View Appointment Schedule

After comparing the design of two calendars that I liked, I decided to combine the features that I liked from both of them. Both were iCal-like calendars eg. google or yahoo calendars. However, one used dhtml to achieve the iCal effect while the other used ajax. I did not write the jquery or the css that controls the calendar I used it from a static calendar done by stephano verna http://www.stefanoverna.com/log/create-astonishing-ical-like-calendars-with-jquery [accessed 09/09/2010].

My calender is dynamiclly generated I used the date/time  and mktime functions from the php manual and css and jquery to achieve the same effect. The day an appointment is scheduled during the month changes colour (blue). When the mouse is passed over the highlighted day a popup appears to show a list of the patients, doctors, time, treatment and the date was also included because of the width of the popup(it covers the dates near it). This will help to identify which day is being viewed.

Currently appointments are scheduled for October 14th and 18th.

The delete and edit appointment links on the pop-up was changed  and moved to the views instead. so now the views for all the appointments listed and the appointments for the day will now be used to edit and delete appointments.

Final Look



View All Appointment in DB

View Appointments Listed for a Chosen Date only

This was included to show that the appointment counter does indeed work and it subtracts the number added from the total allowed per day to let the person making the appointments know how many appointments they can still make on the chosen date.

Code for the counter:

Passing ID to edit Appoinment

Edit Appointment

Test Results Form

With the exception of the date picker, this also follows the prototype. The datepicker can be improved by using jquery to make it appear whenever the date textbox is selected.

JQuery was used for the datepicker instead of of the normal pop-up javascript date picker.

Patient Registration Form

The form layout follows the prototype with the exception of the radio buttons.

This was used to validate the buttons server side:

if (isset($_POST['sex']))

{
     echo "you checked the following".$_POST['sex'];
}
else
{
   echo "You did not check a radio button";
}

Sex vs Gender
Sex is used for the physical assigned parts (male, female) while Gender is only used for socialization/appearance (masculine, feminine).

MySql Database

I switched from using an access 2007 DB to MySQL instead. Although I connected to the db succesfully and was able to display information using the dsn(odbc)connection, I could not do things like create dynamic select boxes so I would not be constantly updating information in the html pages as more data was added to the db.



Select Box code example:-

This was taken from the makeAppt form. It saves the patientID to the appointment table.

This was then rewritten to look like this instead:

This was also taken from makeAppt but I used the time selectbox instead. The Appointment ID is passed hidden on the form to edit the selected appointment on the first line of the rewritten example.