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.

Initial Web Page

This is the initial Web page. As previously mentioned the focus is on functionality the colours of this site is creme and blue and the logo is the pink ribbon that is used to represent Breast Cancer. Cancer colour is cobalt blue. I passed validation for both CSS and XHTML 1.1 strict. This page is going to be used to build the rest. I've started implementing three use cases:- Log in, Book Appointment, Register New Patient.

Issues - No Computer

At present I don't have a computer. So for the past three weeks  (August 20th - September11th) I have been overnighting at SBCS at least two days a week. However, I have not accomplished a lot, well not the same amount of work so I am behind schedule.

I have started the actual site, but will only be focused on functionality. I want the design to look like an actual appointment book with turning pages but that will have to wait until I get back my machine and can do the online tutorials and research at home.

Create an ODBC connection to a MS Access Database

I was  originally going to use mySQL but had to change to Access since the Centre uses an access database. to store records.


Open the Administrative Tools icon in your Control Panel.

Double-click on the Data Sources (ODBC) icon inside.

Choose the System DSN tab.
Click on Add in the System DSN tab.

Select the Microsoft Access Driver. Click Finish.














 In the next screen, click Select to locate the database.
Give the database a Data Source Name (DSN).
Click OK.

Note that this configuration has to be done on the computer where your web site is located. If you are running Internet Information Server (IIS) on your own computer, the instructions above will work, but if your web site is located on a remote server, you have to have physical access to that server, or ask your web host to set up a DSN for you to use.