Blog 8 – Website design

I’ll start out with saying that I know that my project is for a Infrastructure and Networking major and that Website design is the more for a software design major. But I do have a defense to this. This project is a proof of concept based project. I want to see if this system possible using the Arduino and Cloud. I am doing a design of a web site that could be implemented with this system. I however, for the project, are not going to implement the whole website. I just need the sections of the website that will demonstrate that the infrastructure that I have created will work, and how the system works. The web site is also the best way to demonstrate the project so I believe that it is also useful in this way. In a later blog I will outline the web pages I intend to create and why.

Coming up with a design;

For the website design I had a number of features that I thought would be good to implement but I had no idea how to. I have only ever briefly seen enrolment and attendance systems in the past, but they were systems that did a lot more than my project. I went on google images, looked up attendance systems and had a look at the way the features that I wanted were integrated in there designs.

Initial sketches;

I then came up with some initial sketches. Some of these were done alongside the database design to help plan it out.


The Design;

Once again I used powerpoint to come up with a series of website designs that represent each of the functions of the site.


Above is the login for the teachers. Each Person in the database has a type, so the teachers have the type “T”, they also have a username and password. When the person logs in there is a check to see if there Username and Password are correct and if they have the person type “T”. If they do then the PHP starts a session for that user, if not they are shown a message (see below).


This error message will appear if there login details are not correct.


The main menu is shown after the teacher logs in. The tables will be blank if the teacher has not added any courses that they are teaching. However if the teacher has added courses then they will show. There is a current courses table that shows the current course that the teacher has running. In the previous course table there is courses that have finished. The teacher can click on the course to view it or remove it. Viewing the course takes them to the View Course page.


The add course page allows the teacher to add courses that they are teaching. They can find a course, add the dates that the course will run from and too, and add it. The course will then be added to that user and show up on there home page.


In the view course page there is the list of classes that the teacher is going to be running. The teacher can perform a number of actions on this page to set up the course;

  • Edit course dates
  • Add and edit the course roll
  • Add, Edit or remove classes
  • and View the class attendance records that the Arduino units have captured


Above is where the teacher can edit start and end times of the course that they created.


I the Add edit class page the teacher can add or edit classes that will be run for the course. They can specify the date of the class, the time it is on and which class room it is in. In the bottom right corner there is a replicate button. I added this as a possible feature. The teacher could click this and a calendar pops up. They click the days that the class with the same room and times are going to run in and it replicates the class for each day.


On this page there is a list of all persons in the system on the left. The teacher can search through these, select the student and add them to the course roll, on the left. Possible future additions would to be to have the option to only to show students enrolled in the course.


This is the page that the whole website is about. Here when the teacher goes to this page it checks the class against the records to see if any students have clocked in. When the teacher first goes to this page all students are added to the attendance table with the status of not attending class. They website then checks to see if any of the students appear in the records class. If they do then the student’s attendance status will be updated to show that they attended. The teacher can also manually edit the attendance records on this page. Possible additions to this will be automating the late status by comparing the start time of the class to the timestamp on in the record to see how late the student was. If they were later than a certain time then there status could be updated to late.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s