design an implementation of a mobile application for ...sci.tamucc.edu/~cams/projects/509.pdf ·...

48
i Design an Implementation of a Mobile Application for Recording Students’ Attendance GRADUATE PROJECT REPORT Submitted to the Faculty of The Department of Computing Sciences Texas A&M University-Corpus Christi Corpus Christi, Texas In Partial Fulfillment of the Requirements for the Degree of Master of Science in Computer Science By Adel Alsulami Spring 2017 Committee Members Dr. Ahmed Mahdy ____________________________ Committee Chairperson Dr. David Thomas ____________________________ Committee Member

Upload: buithuan

Post on 14-Mar-2018

219 views

Category:

Documents


3 download

TRANSCRIPT

Page 1: Design an Implementation of a Mobile Application for ...sci.tamucc.edu/~cams/projects/509.pdf · 3.2. Database diagram: ... The three cases are start class, review attendance, and

i

Design an Implementation of a Mobile Application for

Recording Students’ Attendance

GRADUATE PROJECT REPORT

Submitted to the Faculty of

The Department of Computing Sciences

Texas A&M University-Corpus Christi

Corpus Christi, Texas

In Partial Fulfillment of the Requirements for the Degree of

Master of Science in Computer Science

By

Adel Alsulami

Spring 2017

Committee Members

Dr. Ahmed Mahdy ____________________________

Committee Chairperson

Dr. David Thomas ____________________________

Committee Member

Page 2: Design an Implementation of a Mobile Application for ...sci.tamucc.edu/~cams/projects/509.pdf · 3.2. Database diagram: ... The three cases are start class, review attendance, and

ii

Abstract

The attendance is very important for any professor, manger, or organization to function.

Attendance plays an important role not only for tracking but also for the performance of any

individual over timed tasks. Attendance of students to lectures and exams make them successful

in academics. The traditional approach for taking attendance is a professor calls student’s name

and records attendance, or the student signs in when they attend the class or exam, and there is

always a possibility for error. Also, the traditional approach takes time to take attendance of the

students, especially when dealing with a large group of students. A simple application accessible

to students on their mobile phones only working when they are in a classroom and only when the

professor wants to get accurate results. Before the student get access to the app, there are two

condition must be achieved. The two conditions are the class should be started by the professor,

and the student should be in the class. The student location is related to the class location which is

going to determine by the GPS when the student is in the class (the accuracy of GPS will be

between five and twenty meters). If the student is out of the class, the student cannot attend himself

even if the class has started. After the conditions are achieved, the student has to open the app and

enter username and password. Then, if the student is really in the class, the student can get access

to the camera. Also, the student can take a picture of his face, and then the picture will transfer

automatically to the server. After that the professor can display the attendance from the professor’

page which be on website. This system will reduce the time taking the attendance and give more

security for it.

Page 3: Design an Implementation of a Mobile Application for ...sci.tamucc.edu/~cams/projects/509.pdf · 3.2. Database diagram: ... The three cases are start class, review attendance, and

iii

Table of Contents

Abstract ..................................................................................................................... ii

LIST OF FIGURES ................................................................................................. iv

LIST OF TABLES ................................................................................................... vi

1. Background and Rationale ..................................................................................... 1

2. Narrative ................................................................................................................. 2

3. Proposed System Design ........................................................................................ 5

3.1. Unified Modelling Language (UML): ................................................................ 7

3.2. Database diagram: ............................................................................................12

3.3. Implementation: ................................................................................................13

4. Testing and evaluation .......................................................................................18

4.1. Testing Admin user using web application: .....................................................18

4.2. Testing Professor user using web application: .................................................22

4.3. Testing Student user using mobile application: ...............................................27

5. Conclusion ..........................................................................................................32

6. Future work ..........................................................................................................32

Bibliography .............................................................................................................33

Appendix .................................................................................................................... 1

Page 4: Design an Implementation of a Mobile Application for ...sci.tamucc.edu/~cams/projects/509.pdf · 3.2. Database diagram: ... The three cases are start class, review attendance, and

iv

LIST OF FIGURES

Figure 1: System Architecture ................................................................................... 2

Figure 2: Flow of the steps to be followed to use the system .................................... 4

Figure 3:components of the system ........................................................................... 5

Figure 4: Hardware Architecture schema .................................................................. 6

Figure 5: Use Case for the Admin ............................................................................. 7

Figure 6: Use Case for professor ............................................................................... 8

Figure 7: Use Case for Student .................................................................................. 9

Figure 8: Class Diagram for the system ...................................................................10

Figure 9: Database Relationship Diagram ...............................................................13

Figure 10: The code snippet for tracking attendance ...............................................14

Figure 11: The code snippet for determining location of section ............................15

Figure 12: The code for loading the section information ........................................16

Figure 13: The code for loading information of lecture based on google map .......16

Figure 14: The code for saving student picture after took it by the front camera ...17

Figure 15: Sign in page ............................................................................................18

Figure 16: Example on what the admin can do through the admin page ................19

Figure 17: The page for adding section to a course .................................................20

Figure 18: Adding lectures to a section ...................................................................21

Figure 19: Adding students to a section ...................................................................21

Figure 20: The home page for professor ..................................................................22

Figure 21: The prof reviews his courses ..................................................................23

Figure 22: Section lecture page ................................................................................24

Figure 23: The professor changed the student’s status ............................................26

Figure 24: The attendance’s page ............................................................................26

Figure 25: Sign in page for the app ..........................................................................27

Page 5: Design an Implementation of a Mobile Application for ...sci.tamucc.edu/~cams/projects/509.pdf · 3.2. Database diagram: ... The three cases are start class, review attendance, and

v

Figure 26: Home page for the app ...........................................................................27

Figure 27: Current lecture if a student out the class ................................................28

Figure 28: Home page of student .............................................................................28

Figure 29: Lecture information ................................................................................29

Figure 30: Review the attendance of image .............................................................29

Page 6: Design an Implementation of a Mobile Application for ...sci.tamucc.edu/~cams/projects/509.pdf · 3.2. Database diagram: ... The three cases are start class, review attendance, and

vi

LIST OF TABLES

Table 1: The results of testing with cellular ............................................................30

Table 2: The results of testing with Wi-Fi ...............................................................30

Page 7: Design an Implementation of a Mobile Application for ...sci.tamucc.edu/~cams/projects/509.pdf · 3.2. Database diagram: ... The three cases are start class, review attendance, and

1

1. Background and Rationale

In this modern era of automation many scientific advancements and inventions have

taken place to save labor, increase the accuracy and to ameliorate our lives. In this modern era,

saving time is significant for the most people who are busy every day, so they focus using the

technology which saves time. In school, the attendance of students into the classroom is

important and can be considered as the starting point towards attaining a good education. The

student who does not pay attention to the attendance, usually a student loses a lot of knowledge,

therefore some universities [1] have enforced few application on students which they think are

best to communicate and track the students. With the traditional approaches such as the professor

calls names of students or pass a paper to the students to attend themselves, the instructors cannot

control the students’ attendance, and even if the professor could control the attendance this way

wastes the time of the class.

Now there are software applications which track the students’ attendance using face

recognition where the student has an image is saved in the database, and other image is taken by

the professor, then this image will compare it with another image [2], [3]. Barcode scanning [4]

in this way the student passes his ID on a device barcode scanning, and attendance using a mobile

phone and real location using GPS location [5] in this way the student only can attend himself

when he in class. Most of the existing software which track the students’ attendance are not

secure, need time and continuous maintenance, are expensive, affect physical factors, or are

complex. This paper will introduce some solutions for these problems like saving time, is

expensive and no need for maintenance.

The main reason behind this paper is to build a strong system to track the students’

attendance, and reduce the time to take the attendance.

Page 8: Design an Implementation of a Mobile Application for ...sci.tamucc.edu/~cams/projects/509.pdf · 3.2. Database diagram: ... The three cases are start class, review attendance, and

2

2. Narrative

The main reason students attend classroom is to obtain the knowledge, but not all students

are keen on attendance, while some students do not care at all about attending the classes. This

system encourages students to attend their classes.

The system consists of a website and a phone application where the website is for collecting

the data and process this data, such as (adding, removing, and updating the classes, sections,

students, and professors). For the application, students will use it to attend themselves. See Figure

1

Figure 1: System Architecture

Page 9: Design an Implementation of a Mobile Application for ...sci.tamucc.edu/~cams/projects/509.pdf · 3.2. Database diagram: ... The three cases are start class, review attendance, and

3

The system will be tracking the students’ attendance where the admin will register the

student in the system then takes picture of the student. The admin will add the courses, determine

the location of section for the courses where the admin goes to the classroom and by using Global

Position System (GPS) he can get the latitude and longitude of the classroom; however, the admin

should make sure that he is in the center of the classroom to get the location accurately and save it

in the database. In addition, he determines the time of class. Also, the admin adds the professors

and give them the code or number of section which the professors will teach it. After data collecting

phase, the professor clicks on start button to start the lecture and this will make him able to track

the students’ attendance. Once the professor has started the class by clicking on start class button,

the students can login the app to attend themselves. But the student should be in the class, because

if the student is out of the class, the app will not allow the student to open the camera of the mobile

phone to attend himself. If the student comes after five minutes from the class has started, he will

be considered tardy automatically, and if the student comes after fifteen minutes, he will be absent

automatically. When the student login to app and take picture of himself, the picture will transfer

automatically to the professor page to display the attendance when he wants that. Then the

professor can compare the picture which was sent by the student with the picture that is stored in

the database, because this system does not the facial recognition and there is not way right now to

compare the pictures and gives accurate results. If both pictures are for the same student that means

the student was attending the class else the student will be absent. See Figure 2.

Page 10: Design an Implementation of a Mobile Application for ...sci.tamucc.edu/~cams/projects/509.pdf · 3.2. Database diagram: ... The three cases are start class, review attendance, and

4

Figure 2: Flow of the steps to be followed to use the system

Page 11: Design an Implementation of a Mobile Application for ...sci.tamucc.edu/~cams/projects/509.pdf · 3.2. Database diagram: ... The three cases are start class, review attendance, and

5

3. Proposed System Design

These steps show how the project will be implemented technically using C#, HTML,

CSS, JQuery, and JavaScript. The system and database will be on a server. The admin, the

professor, and the student can connect to the website through Internet. For the application, it is

connected to the server/database through Internet. See figure 3.

Figure 3:components of the system

Page 12: Design an Implementation of a Mobile Application for ...sci.tamucc.edu/~cams/projects/509.pdf · 3.2. Database diagram: ... The three cases are start class, review attendance, and

6

Hardware Requirements:

1. Computer (Desktop/Laptop) to be used by the admin and the peofessor.

2. Smartphone which is working with iOS or android such as iPhone/Galaxy, etc.

Software Requirements:

1. Visual Studio 2010 or later on the computer to write the code.

2. Create an account on Phone Gap to upload the system, and generate platform (ipa, apk,

etc.) to work on smartphones.

3. Install the app on the phone to test it.

The system consists of many types of devices to make the system fully functional. Server

and database are connected to each other through Internet. Computer and smartphone are

connected to server through Interment. Figure 3 shows the hardware architecture.

Figure 4: Hardware Architecture schema

Page 13: Design an Implementation of a Mobile Application for ...sci.tamucc.edu/~cams/projects/509.pdf · 3.2. Database diagram: ... The three cases are start class, review attendance, and

7

3.1. Unified Modelling Language (UML):

Unified modelling language is used to represent the design of the system

software. The main aim of UML diagrams is to help users understand the interaction

between different components of the application

A. Use Case diagram:

Use case diagram consists of the actors and the use cases. Actor represents

the role played by the user or any external system whereas the use cases describe

the functionality of the application.

Figure 4 shows the use case for Admin. It consists of one actor and three

cases. The three case are Add, Delete, and update. Each case has an external use

cases which are related to the three cases. These use cases are section, student,

course, professor, user, and section location.

Figure 5: Use Case for the Admin

Page 14: Design an Implementation of a Mobile Application for ...sci.tamucc.edu/~cams/projects/509.pdf · 3.2. Database diagram: ... The three cases are start class, review attendance, and

8

a. Add: This use case represents the action performed by the admin where the

admin adds students, courses, sections for courses, professor, and finally user.

Also determines the section location.

b. Delete: This use case represents the action performed by the admin where the

admin deletes students, courses, sections for courses, professor, and user from

database.

c. Update: This use case represents the action performed by the admin where

the admin updates information for students, courses, sections for courses,

professor, and user. Also update the section location.

Figure 5 shows the use case for the professor. It consists of one actor and

three cases. The three cases are start class, review attendance, and change a

student attendance status.

Figure 6: Use Case for professor

Page 15: Design an Implementation of a Mobile Application for ...sci.tamucc.edu/~cams/projects/509.pdf · 3.2. Database diagram: ... The three cases are start class, review attendance, and

9

a. Start class: in this case, the professor will start the class for the particular

section. After the class has started the students can attend themselves.

b. Review attendance: in this case, the professor can display the attendance of

the students who were present, absent, or tardy.

c. Change a student attendance status: in this case, the professor changes the

student attendance status from present to absent when he figured out that the

student’s picture which was sent is not belong to him or he was attended by

his classmates.

Figure 6 shows use case for the student. It consists of one actor and two use cases.

The two cases are attend a student and display student’s schedule.

Figure 7: Use Case for Student

Page 16: Design an Implementation of a Mobile Application for ...sci.tamucc.edu/~cams/projects/509.pdf · 3.2. Database diagram: ... The three cases are start class, review attendance, and

10

a. Attend student: in this case, the student logs in to his account on the

application then he takes a picture of him and this picture will transfer to the

server.

b. Display student’s schedule: in this case, the student can display his schedule

to show what courses have.

B. Class Diagram:

The relationship between different classes and objects can be showed using

a class diagram. The class diagram consists of three sections, the first section shows

the name of the class, second section shows the attributes, and third section

represents the functions which are required for implementation of the logic.

Figure 8: Class Diagram for the system

Page 17: Design an Implementation of a Mobile Application for ...sci.tamucc.edu/~cams/projects/509.pdf · 3.2. Database diagram: ... The three cases are start class, review attendance, and

11

The arrows are used to illustrate the relationship between different classes. Figure

7 shows class diagram for the system. The diagram consists of seven classes. These

classes are Dbclass, Login, User, Section, Student, Course, and Prof.

Dbclass is the main class which all classes inherit the functions and objects.

This class consists of one object and three functions. The function Dbclass is the

function which connects database through defines the path for the database.

getTable function is the function which executes queries from the database. Run

function is the function executes commands for inserting into, updating, and

deleting from the database.

Login class consists of two objects and one function. The function

btnlogin_click runs when the user enters username and password to login to the

system.

User class consists of two objects and five functions. This class is used to

add users as admins. The btadd_clickc function is used to add user into database,

btdelete_click is used to delete user from database, btudate_click function is used

to update user’s data in the database, and GridView1_SelectedIndexChanged

function is used to display the user’s information into gridview table.

Student class consists of two objects and eight functions. Most the functions

are the same functions which are in the User Class. Cmbc_SelectedIndexChanged

function is used to get data from the database and put it in DropDownList to select

the value that user wants, LoadImage is the function which upload an image from

computer and post it into database, and Page_load is the function that load the

website page with data into DropDownList.

Page 18: Design an Implementation of a Mobile Application for ...sci.tamucc.edu/~cams/projects/509.pdf · 3.2. Database diagram: ... The three cases are start class, review attendance, and

12

Course class, Prof class, and section class all the functions and objects are

the same previous functions and objects in the student class.

Note that, the functions and objects in all classes are similar to each other

because of the system handle with database.

3.2. Database diagram:

The database for the system is on a server, so the users can get access to the data

from anywhere. Only the admin can do the Data Manipulation Language (DML) on the

data, and other users can only query from the data, but they cannot modify the sensitive

data except changing the password and addresses.

The database is named Fingerprint, and it consists of ten tables. All tables have

relationship between them for integration. The ten tables are student, professor, section,

course, login, department, collage, StudentSection, StudentLecture, and

LectureSection.

Figure 8 shows the database schema. From this schema, the user can know primary

keys, foreign keys and the relationship between the tables. In the schema, the login

table does not show because it does not have any relationship with other tables. This

Page 19: Design an Implementation of a Mobile Application for ...sci.tamucc.edu/~cams/projects/509.pdf · 3.2. Database diagram: ... The three cases are start class, review attendance, and

13

table is only for adding admin user, so it does not show it. According to the schema

each table has primary key and one, two or three foreign keys.

3.3. Implementation:

the web application and mobile application are developed using visual studio and MS

SQL Database for database. The main modules have been implemented are as follow:

1. Tracking an attendance page.

2. Determining the location of section.

3. Taking an attendance using mobile application.

Figure 9: Database Relationship Diagram

Page 20: Design an Implementation of a Mobile Application for ...sci.tamucc.edu/~cams/projects/509.pdf · 3.2. Database diagram: ... The three cases are start class, review attendance, and

14

1. Tracking an attendance:

Through this page, the professor can track and review the students’ attendance.

When the student takes his attendance through the app, the student’s picture which he

been sent will appear for the professor with his status and time sign in. Figure 10 shows

the code snippet.

2. Determining the location of section:

Determining location of section is very important in this system. determining the

location of section will be done using google map. Through the location of section the

student can attend himself. The location of section determines by the admin. Figure 11

shows the code snippet for determining location class.

Figure 10: The code snippet for tracking attendance

Page 21: Design an Implementation of a Mobile Application for ...sci.tamucc.edu/~cams/projects/509.pdf · 3.2. Database diagram: ... The three cases are start class, review attendance, and

15

3. Taking an attendance using mobile application:

In this implementation, the student uses the mobile application to take his

attendance by accessing to the front camera. The student cannot access to the cam if he is

out the class. The information of section is linked to the location of section, so the

information of the section will not show if the student is not in the class. Figure 12, 13 and

14 show the code snippet for how the student can attend himself.

Figure 11: The code snippet for determining location of section

Page 22: Design an Implementation of a Mobile Application for ...sci.tamucc.edu/~cams/projects/509.pdf · 3.2. Database diagram: ... The three cases are start class, review attendance, and

16

Figure 12: The code for loading the section information

Figure 12: The code for loading information of lecture based on google map

Page 23: Design an Implementation of a Mobile Application for ...sci.tamucc.edu/~cams/projects/509.pdf · 3.2. Database diagram: ... The three cases are start class, review attendance, and

17

Figure 13: The code for saving student picture after took it by the front camera

Page 24: Design an Implementation of a Mobile Application for ...sci.tamucc.edu/~cams/projects/509.pdf · 3.2. Database diagram: ... The three cases are start class, review attendance, and

18

4. Testing and evaluation

Testing is done to find if there are any errors in the final web application and mobile

application. Testing the final web application and mobile application make sure that the application

functions without any errors. In the testing phase the system will test in three steps as follows:

1. Testing Admin user using web application.

2. Testing Professor user using web application.

3. Testing Student user using mobile application.

4.1. Testing Admin user using web application:

To make an order, the admin should sign in to the system using the username and

password which was provided to him. The admin should sign in using proper username

and password. If the admin forgets to enter either the username or the password, error

message will be displayed. Show figure 15.

Figure 14: Sign in page

Page 25: Design an Implementation of a Mobile Application for ...sci.tamucc.edu/~cams/projects/509.pdf · 3.2. Database diagram: ... The three cases are start class, review attendance, and

19

After the admin got access to the home page and through this page, he can add, delete, and

update the course, user, student, professor, and section for the course. In this testing, I will

concentrate on add section because other processes are just adding regular information such as

name of course or student, data of birth, etc. See figure 16.

Figure 15: Example on what the admin can do through the admin page

Page 26: Design an Implementation of a Mobile Application for ...sci.tamucc.edu/~cams/projects/509.pdf · 3.2. Database diagram: ... The three cases are start class, review attendance, and

20

when the admin adds the section, he should enter ID section and select a collage, a

department, a course, a professor who will teach this section and other information as shown in

figure 16. Then he should click on Map button to determine where the location of section is. After

the admin determined the location of section, he should click on Add button to save the data into

the database. After the admin save the data of section, he can add students and lecture to the section

by clicking on Student button and Lecture button. See figures 17 and 18.

Figure 16: The page for adding section to a course

Page 27: Design an Implementation of a Mobile Application for ...sci.tamucc.edu/~cams/projects/509.pdf · 3.2. Database diagram: ... The three cases are start class, review attendance, and

21

Figure 17: Adding students to a section

Figure 18: Adding lectures to the section

Page 28: Design an Implementation of a Mobile Application for ...sci.tamucc.edu/~cams/projects/509.pdf · 3.2. Database diagram: ... The three cases are start class, review attendance, and

22

As you can see in figure 19, the admin can select when the lectures dates start and end.

Also, he can select what the days of lectures are, and enter the starting time of lecture.

Based on the admin testing, the system works perfectly for the admin no errors or any

problems which effect on the system.

4.2. Testing Professor user using web application:

Once the professor gets access to home page, the professor will see top bar sing

out, my schedule, and my profile. See figure 20.

Figure 19: The home page for professor

Page 29: Design an Implementation of a Mobile Application for ...sci.tamucc.edu/~cams/projects/509.pdf · 3.2. Database diagram: ... The three cases are start class, review attendance, and

23

In this testing, I will talk shortly about my profile. In my profile the professor can

display his information such as the name, address, change password, etc. on the other

hand, I will talk in detail about my schedule. From my schedule the professor can start

the lecture, display dates lectures, review the attendance, and change the student status.

See figures 21, 22, and 23.

When the professor clicks on the lecture link, he will transfer to section lectures page.

See figure 22. From the next page the professor can do many things.

Figure 20: The prof reviews his courses

Page 30: Design an Implementation of a Mobile Application for ...sci.tamucc.edu/~cams/projects/509.pdf · 3.2. Database diagram: ... The three cases are start class, review attendance, and

24

From this page, the professor can see the lecture date, status, and list student. The status

is related to lecture data where the statuses are as follow:

1. Finished: This status means that the lecture started in the past by the professor, and he can

click on the list of students to display the attendance.

2. Canceled: This status means that the time of lecture entered and ended, but the professor

did not start the lecture. In this case, the list of students will be disappeared.

3. Start: This status means that the lecture date has entered and the professor can start the

lecture by clicking on start link. “note: the status will change to finished after forty-five

minutes”.

4. On time: This status means that the lecture’s date has not entered yet.

Figure 21: Section lecture page

Page 31: Design an Implementation of a Mobile Application for ...sci.tamucc.edu/~cams/projects/509.pdf · 3.2. Database diagram: ... The three cases are start class, review attendance, and

25

When the professor clicks on the list of students, he will go to lecture attendance

page. Through the lecture attendance page the professor can know who the students were

present, tardy, and absent. If the professor figured out the student was presented by his

classmate through compares the original images to the image of the attendance, he will

change the status to absent. The same thing is implemented in tardy status if the professor

figured out the student was presented by his classmate. If the student attends at the first

five minutes, he will be present. And if the student attends after the first five minutes, he

will be tardy. Also, if the student attends after ten minutes, he will be absent. See figure

23, there are some statuses which the professor should change to absent. Such as the student

John Marco is present, but he was attended by his classmate or someone else. So, the

professor will change his status to absent. Another status, the Li Choua was also attended

by someone, but his status has already absent. In case Li, if he was tardy, the professor will

change his status to absent by click on Absent link. The student Joseph Aramon did not

come to the class, and he also did not attend by someone. So, his status is absent. In figure

24 shows John Marco’s status was changed to absent by the professor. Another thing the

professor can attend any student he wants to attend.

Page 32: Design an Implementation of a Mobile Application for ...sci.tamucc.edu/~cams/projects/509.pdf · 3.2. Database diagram: ... The three cases are start class, review attendance, and

26

Figure 22: The professor changed the student’s status

Figure 23: The attendance’s page

Page 33: Design an Implementation of a Mobile Application for ...sci.tamucc.edu/~cams/projects/509.pdf · 3.2. Database diagram: ... The three cases are start class, review attendance, and

27

In figure 24 shows that John’s status changed to absent after the professor figured out that

John was attended by his classmate.

After completed the testing for the professor testing, the system is working perfectly, and

no errors or anything can affect the system. the professor can start the lecture and browse the

attendance easily.

4.3. Testing Student user using mobile application:

In this phase, the application will test with different location and distances. Also, it

will test in case the class in first floor, and second floor. Also, it will test if the student

in class, around the class, out the class. The application will test with different distances

such five meters, eight meters, twenty meters.

To test the application, at first, the student opens the app, and clicks on sign in icon,

then enters his ID and password. If the student ID or password is not correct a message

will appear. See figure 25 and 26.

Figure 25: Sign in page for the app Figure 24: Home page of the app

Page 34: Design an Implementation of a Mobile Application for ...sci.tamucc.edu/~cams/projects/509.pdf · 3.2. Database diagram: ... The three cases are start class, review attendance, and

28

If the student id and password are correct, the student will go to the student page.

See figure 27. When student wants to attend himself, he should be in the class and the

lecture has started by the professor. Then the student should click on lecture icon to take

his attendance. After the student click on the lecture icon, he will transfer to the current

lecture. If the student out or not near the class, or the professor does not the class the lecture

information will not appear. See figure 28.

If the student in the class and the professor started the lecture, he will show the lecture

information. See figure 29. When the student gets the lecture information, he can attend

himself by clicking on the lecture information. The student will go to the page which open

the camera. See figure 30.

Figure 27: Current lecture if a student out the class

Figure 26: Home page of student

Page 35: Design an Implementation of a Mobile Application for ...sci.tamucc.edu/~cams/projects/509.pdf · 3.2. Database diagram: ... The three cases are start class, review attendance, and

29

When the student click on take image button, the camera will open and he can take picture

of him. See figure 31. Then the picture will transfer to the database and the professor can

see this picture anytime he wants.

Figure 28: Lecture information

Figure 30: Page taking picture of student

Figure 31: Review the attendance of image

Page 36: Design an Implementation of a Mobile Application for ...sci.tamucc.edu/~cams/projects/509.pdf · 3.2. Database diagram: ... The three cases are start class, review attendance, and

30

After tested the app in general. The next phase, I will post the results after tested

the application when it connects to Internet using cellular and Wi-Fi. The testing was done

with different distances and different locations. The testing will be done after the professor

started the lecture. The below table illustrates the testing results.

Floor Distance Number of

Attempts Success Failure

Percent of

Success

First

5 M 10 2 8 20%

8 M 10 4 6 40%

10 M 10 4 6 40%

15 M 10 7 3 70%

20 M 10 9 1 90%

Second

5 M 10 1 9 10%

8 M 10 2 8 20%

10 M 10 4 6 40%

15 M 10 7 3 70%

20 M 10 8 2 80%

Table 1: The results of testing with cellular

Floor Distance Number of

Attempts Success Failure

Percent of

Success

First

5 M 10 0 10 0%

8 M 10 2 8 20%

10 M 10 3 7 30%

15 M 10 7 3 70%

20 M 10 8 1 80%

Second

5 M 10 1 9 10%

8 M 10 2 8 20%

10 M 10 4 6 40%

15 M 10 7 3 70%

20 M 10 10 0 100%

Table 2: The results of testing with Wi-Fi

Page 37: Design an Implementation of a Mobile Application for ...sci.tamucc.edu/~cams/projects/509.pdf · 3.2. Database diagram: ... The three cases are start class, review attendance, and

31

Distance: it is the distance between the student location and the center of section

location.

Success: it is the number of attempts the student could attend himself when he

achieved the two conditions to attending.

Failure: it is the number of attempts which the student could not attend himself

because he did not achieve the two conditions.

According to the results in both tables, the results are affected by the distances.

Whenever the distance increases, whenever the app gives accurate results. The reason

behind that the app gives accurate results when the distance be large is the mobile does not

give stable latitude and longitude, but it gives changeable latitude and longitude. So, the

distance is changeable where the app sometimes achieves the specific distance, and

sometimes dose not achieve it. Also, the location of student is not fixed even if the student

is inside the class, because the mobile changes the location, and latitude and longitude in

few seconds. So, the app is working perfectly when the distance is greater than fifteen

meters.

The testing in table 1 was done using cellular connection, the testing in table 2 The

testing in table 1 was done using cellular connection. When the table 1 compares to the

table 2, we will see that the results almost are similar. So, there is no problem when the app

is connected to internet using cellular or Wi-Fi.

Page 38: Design an Implementation of a Mobile Application for ...sci.tamucc.edu/~cams/projects/509.pdf · 3.2. Database diagram: ... The three cases are start class, review attendance, and

32

5. Conclusion

The main idea of this research is to track the students’ attendance using the technology to

save time. This research has been built a website and an application to track the students’

attendance. According to the results which I obtained from the system testing, the system is

working without any errors. From the results, the professor cannot know if the photo of student

was taken in the classroom which the lecture was in it or no. Also, in some cases the student can

attend himself if there are two classes have the same location and different floor. When the

professor wants to display the attendance, he needs to compare the image that is stored in the

database to the image which was taken by the student while attends himself. Finally, the system

will assist the professors to track the attendance of students.

6. Future work

1. Using facial recognition to compare the images of students automatically.

2. Using an Indoor Position System IPS rather than Global Position System GPS. Because

GPS does not work accurately indoor, the student location and the section location are not

accurate; thus, there will be errors in the system.

Page 39: Design an Implementation of a Mobile Application for ...sci.tamucc.edu/~cams/projects/509.pdf · 3.2. Database diagram: ... The three cases are start class, review attendance, and

33

Bibliography

[1] “Auto Attendance Tracking System” retrieved from, http://www.kc.devry.edu/Auto_AttendanceTrackingSystem.htm

[2] Shireesha Chintalapati, and M.V. Raghunadh, “Automated Attendance Management System

Based On Face Recognition Algorithms”, Computational Intelligence and Computing Research

(ICCIC), 26-28 Dec. 2013.

[3] Aziza Ahmedi, and Dr Suvarna Nandyal “ An Automatic Attendance System Using Image

processing”, The International Journal Of Engineering And Science, Vol. 4, no. 11, pp. 01-08,

2015.

[4] “Student Attendance System by Barcode”, retrieved from, http://nevonprojects.com/student-

attendance-system-by-barcode-scan/

[5] Hajime SHIBATA, “An attendance management system using mobile phones”,

Communications, Computers and signal Processing, 24-26 Aug. 2005

Page 40: Design an Implementation of a Mobile Application for ...sci.tamucc.edu/~cams/projects/509.pdf · 3.2. Database diagram: ... The three cases are start class, review attendance, and

1

Appendix

Code to connect to database:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Data;

using System.Data.SqlClient;

//This class for connecting to database.

public class Dbclass

{

SqlConnection dbconn = new SqlConnection();

//This function is used to connect to database which is on the server.

public Dbclass()

{

try

{

dbconn.ConnectionString = @"Data Source=FingerPrint.mssql.somee.com;Initial

Catalog=FingerPrint;Persist Security Info=True;User

ID=Fingerprint_SQLLogin_1;Password=Adel1406";

dbconn.Open();

}

catch (Exception ex)

{

Console.WriteLine(ex.Message);

}

}

//This function to insert, delete and update from DB.

public bool Run(String sql)

{

bool done= false;

try

{

SqlCommand cmd = new SqlCommand(sql,dbconn);

cmd.ExecuteNonQuery();

done= true;

}

catch (Exception ex)

{

Console.WriteLine(ex.Message);

}

return done;

}

//This function to query from DB

public DataTable getTable(String sql)

{

DataTable done = null;

try

{

SqlDataAdapter da = new SqlDataAdapter(sql, dbconn);

DataSet ds = new DataSet();

da.Fill(ds);

return ds.Tables[0];

}

catch (Exception ex)

{

Console.WriteLine(ex.Message);

}

return done;

}

}

Page 41: Design an Implementation of a Mobile Application for ...sci.tamucc.edu/~cams/projects/509.pdf · 3.2. Database diagram: ... The three cases are start class, review attendance, and

2

Code for adding section:

public partial class section: System.Web.UI.Page

{

//define a variable of Dbclass to connect to DB.

Dbclass db = new Dbclass();

string s = "";

//this function works when the page has been loaded.

protected void Page_Load(object sender, EventArgs e)

{

try

{

if (!IsPostBack)

{

SqlDataSource4.SelectCommand = "Select top 1 0 as collageID , 'Select Collage' as

collageName from collage union all Select collageID , collageName from collage ";

SqlDataSource4.DataBind();

cmbl.DataBind();

SqlDataSource5.SelectCommand = "Select top 1 0 as DeptID , 'Select Department' as

DepName from Department union all Select DeptID , DepName from Department where collageID=" +

cmbl.SelectedValue;

SqlDataSource5.DataBind();

cmbd.DataBind();

SqlDataSource3.SelectCommand = "Select top 1 '0' as Course_ID , 'Select Course'

as Name_of_course from Course union all Select Course_ID , Name_of_course from Course where

DeptID=" + cmbd.SelectedValue;

SqlDataSource3.DataBind();

cmbc.DataBind();

}

}catch{}

}

// This function will run when the user click on the select link to show the data in TEXT BOX

protected void GridView1_SelectedIndexChanged(object sender, EventArgs e)

{

try

{

GridViewRow r = GridView1.SelectedRow;

tbid.Text = r.Cells[0].Text;

tbyear.Text = r.Cells[4].Text;

tbterm.Text = r.Cells[5].Text;

lblid.Text = tbid.Text;

string s = "Select * From SectionData where SectionID='" + lblid.Text + "'";

DataTable dt = db.getTable(s);

if (dt != null && dt.Rows.Count > 0)

{

cmbp.SelectedValue = dt.Rows[0]["Prof_ID"].ToString();

tbn.Text = dt.Rows[0]["n"].ToString();

tbe.Text = dt.Rows[0]["e"].ToString();

cmbl.SelectedValue = dt.Rows[0]["collageID"].ToString();

SqlDataSource5.SelectCommand = "Select top 1 0 as DeptID , 'Select Department' as

DepName from Department union all Select DeptID , DepName from Department where collageID=" +

dt.Rows[0]["collageID"].ToString();

SqlDataSource5.DataBind();

cmbd.DataBind();

cmbd.SelectedValue = dt.Rows[0]["DeptID"].ToString();

SqlDataSource3.SelectCommand = "Select top 1 '0' as Course_ID , 'Select Course'

as Name_of_course from Course union all Select Course_ID , Name_of_course from Course where

DeptID=" + cmbd.SelectedValue;

SqlDataSource3.DataBind();

cmbc.DataBind();

cmbc.SelectedValue = dt.Rows[0]["Course_ID"].ToString();

Page 42: Design an Implementation of a Mobile Application for ...sci.tamucc.edu/~cams/projects/509.pdf · 3.2. Database diagram: ... The three cases are start class, review attendance, and

3

}

lberr.Text = "";

}

catch (Exception ex)

{

lberr.Text = ex.Message;

}

}

//This function runs to add section to the database.

protected void btadd_Click(object sender, EventArgs e)

{

try

{

if (tbid.Text == "")

{

lberr.Text = "Please input Section id";

return;

}

if (tbyear.Text == "")

{

lberr.Text = "Please input Year ";

return;

}

if (tbterm.Text == "")

{

lberr.Text = "Please input Term Name ";

return;

}

if (cmbl.SelectedValue == "0")

{

lberr.Text = "Please select Collage ";

return;

}

if (cmbd.SelectedValue == "0")

{

lberr.Text = "Please select Collage ";

return;

}

if (cmbc.SelectedValue == "0")

{

lberr.Text = "Please select Course ";

return;

}

s = "Insert into Section(SectionID,Prof_ID,Course_ID,YearNo,TermNo,n,e) values ('" +

tbid.Text + "','" + cmbp.SelectedValue + "','" + cmbc.SelectedValue + "','" + tbyear.Text + "','"

+ tbterm.Text + "','"+tbn.Text +"','"+tbe.Text +"')";

if (db.Run(s))

{

lberr.Text = "The data is added";

lblid.Text = tbid.Text;

}

else

{

lberr.Text = "The data is not added";

}

SqlDataSource1.DataBind();

GridView1.DataBind();

}

catch (Exception ex)

{

lberr.Text = ex.Message;

}

}

// This function to clean the TEXT BOX from the data.

protected void btclear_Click1(object sender, EventArgs e)

{

tbid.Text = "";

tbyear.Text = "";

tbterm.Text = "";

Page 43: Design an Implementation of a Mobile Application for ...sci.tamucc.edu/~cams/projects/509.pdf · 3.2. Database diagram: ... The three cases are start class, review attendance, and

4

tbn.Text = "";

tbe.Text = "";

lberr.Text = "";

}

// This function to update the course info.

protected void btupdate_Click(object sender, EventArgs e)

{

try

{

if (tbid.Text == "")

{

lberr.Text = "Please input Section id";

return;

}

if (tbyear.Text == "")

{

lberr.Text = "Please input Year ";

return;

}

if (tbterm.Text == "")

{

lberr.Text = "Please input Term Name ";

return;

}

if (cmbl.SelectedValue == "0")

{

lberr.Text = "Please select Collage ";

return;

}

if (cmbd.SelectedValue == "0")

{

lberr.Text = "Please select Collage ";

return;

}

if (cmbc.SelectedValue == "0")

{

lberr.Text = "Please select Course ";

return;

}

s = "Update Section set SectionID ='" + tbid.Text + "', Prof_ID = '" +

cmbp.SelectedValue + "',Course_ID='" + cmbc.SelectedValue + "',YearNo='" + tbyear.Text +

"',TermNo='" + tbterm.Text + "',n='"+tbn.Text +"',e='"+tbe.Text +"' where SectionID ='" +

lblid.Text + "'";

if (db.Run(s))

{

lberr.Text = "The data has update";

lblid.Text = tbid.Text;

}

else

{

lberr.Text = "The data has not update";

}

SqlDataSource1.DataBind();

GridView1.DataBind();

}

catch (Exception ex)

{

lberr.Text = ex.Message;

}

}

// This function to delete data from database.

protected void btdelete_Click(object sender, EventArgs e)

{

try

{

if (tbid.Text == "")

{

lberr.Text = "Please Enter Section ID";

}

s = "Delete From Section where SectionID ='" + lblid.Text + "'";

if (db.Run(s))

Page 44: Design an Implementation of a Mobile Application for ...sci.tamucc.edu/~cams/projects/509.pdf · 3.2. Database diagram: ... The three cases are start class, review attendance, and

5

{

lberr.Text = "The data has deleted";

}

else

{

lberr.Text = "The data has not deleted";

}

SqlDataSource1.DataBind();

GridView1.DataBind();

}

catch (Exception ex)

{

lberr.Text = ex.Message;

}

}

//This function to transfer from section page to students' page to add students to the

section.

protected void btnstudent_Click(object sender, EventArgs e)

{

if (tbid.Text == "")

{

lberr.Text = "Please Enter Section ID";

}

Session["sid"] = tbid.Text;

string s = "Select * From SectionData where SectionID='" + tbid.Text + "'";

DataTable dt = db.getTable(s);

if (dt != null && dt.Rows.Count > 0)

{

Session["DeptID"] = dt.Rows[0]["DeptID"].ToString();

Session["collageID"] = dt.Rows[0]["collageID"].ToString();

}

Response.Redirect("~\\SectioStudent.aspx");

}

//This function to add lectures to the section.

protected void btnlecture_Click(object sender, EventArgs e)

{

if (tbid.Text == "")

{

lberr.Text = "Please Enter Section ID";

}

Session["sid"] = tbid.Text;

Response.Redirect("~\\SectionLecture.aspx");

}

// This function will work after the user select the collage to show the departments and

courses which are related to the collage.

protected void cmbl_SelectedIndexChanged(object sender, EventArgs e)

{

SqlDataSource5.SelectCommand = "Select top 1 0 as DeptID , 'Select Department' as DepName

from Department union all Select DeptID , DepName from Department where collageID=" +

cmbl.SelectedValue;

SqlDataSource5.DataBind();

cmbd.DataBind();

SqlDataSource3.SelectCommand = "Select top 1 0 as Course_ID , 'Select Course' as

Name_of_course from Course union all Select Course_ID , Name_of_course from Course where

DeptID=" + cmbd.SelectedValue;

SqlDataSource3.DataBind();

cmbc.DataBind();

}

// This function will work after the user select the departments to show the courses which

are related to the department.

protected void cmbd_SelectedIndexChanged(object sender, EventArgs e)

{

try

{

SqlDataSource3.SelectCommand = "Select top 1 '0' as Course_ID , 'Select Course' as

Name_of_course from Course union all Select Course_ID , Name_of_course from Course where

DeptID=" + cmbd.SelectedValue;

SqlDataSource3.DataBind();

cmbc.DataBind();

Page 45: Design an Implementation of a Mobile Application for ...sci.tamucc.edu/~cams/projects/509.pdf · 3.2. Database diagram: ... The three cases are start class, review attendance, and

6

}

catch { }

}

protected void cmbp_SelectedIndexChanged(object sender, EventArgs e)

{

}

}

Code to start lecture:

<%@ WebHandler Language="C#" Class="lecture" %>

using System;

using System.Web;

using System.Data;

public class lecture : IHttpHandler, System.Web.SessionState.IRequiresSessionState

{

//this function will call when the user click on lecture hyperlink in

(ProfTable.aspx)

public void ProcessRequest (HttpContext context) {

context.Response.ContentType = "text/plain";

Dbclass db = new Dbclass();

string id = (context.Request["id"] != null) ? context.Request["id"] : "";

string mode = (context.Request["mode"] != null) ? context.Request["mode"]

: "";

string s = "";

DataTable dt;

if (mode == "update")

{

s = "Select * From StudentSection where SectionID='" +

context.Session["sid"].ToString() + "'";

dt = db.getTable(s);

for (int x = 0; x < dt.Rows.Count; x++)

{

s = "Insert into StudentLecture(LectureID,Student_ID) values('" +

id + "','" + dt.Rows[x]["Student_ID"].ToString() + "')";

db.Run(s);

}

s = "Update LectuerSection set

LectureState=1,lectureStart='"+System.DateTime.Now.ToString("MM/dd/yyyy HH:mm:ss")

+"' where LectureID='" + id + "'";

db.Run(s);

}

if (mode == "student") context.Session["lid"] = id;

s = "SELECT [LectureID], [LectuerDate] ,LectureState FROM [LectuerSection]

WHERE (SectionID ='" + context.Session["sid"].ToString() + "' )";

dt = db.getTable(s);

string data = " <table style='width:100%;'>";

data += " <tr style='color: #FFFFFF; font-weight: 700; font-size: 11pt;

font-family:Times New Roman, Times, serif; background-color: #000099'>";

data += " <td style='text-align: center'> Lecture ID</td> ";

data += " <td style='text-align: center'> Lecture Date </td> ";

data += " <td style='text-align: center'> Status </td> ";

Page 46: Design an Implementation of a Mobile Application for ...sci.tamucc.edu/~cams/projects/509.pdf · 3.2. Database diagram: ... The three cases are start class, review attendance, and

7

data += " <td style='text-align: center'> List Student </td> </tr> ";

if (dt != null && dt.Rows.Count > 0)

{

for (int x = 0; x < dt.Rows.Count; x++)

{

data += " <tr style='font-weight: 700; color: #000099;text-

align: center'> ";

data += " <td> " + dt.Rows[x]["LectureID"].ToString() + " </td>

";

DateTime ld =

DateTime.Parse(dt.Rows[x]["LectuerDate"].ToString()).Date;

data += " <td> " + ld.ToString("MM/dd/yyyy") + " </td> ";

string st = "";

int state = Int32.Parse(dt.Rows[x]["LectureState"].ToString());

if (state == 0 && ld == DateTime.Now.Date) st = "<a

href='javascript:lect(\"" + dt.Rows[x]["LectureID"].ToString() + "\")' >

Start</a>";

if (state == 1) st = "starting";

if (state == 2) st = "Finished";

if (state == 0 && ld < DateTime.Now.Date) st = "Canceled";

if (state == 0 && ld > DateTime.Now.Date) st = "On time";

data += " <td> " + st + " </td> ";

if (state == 1 || state == 2) data += " <td><a

href='javascript:showstudent(\"" + dt.Rows[x]["LectureID"].ToString() + "\")' >

List Student</a> </td> </tr> "; else data += "<td>---</td>";

}

}

data += "</table>";

context.Response.Write(data);

}

public bool IsReusable {

get {

return false;

}

}

}

Code to display the attendance:

<%@ WebHandler Language="C#" Class="profStudent" %>

using System;

using System.Web;

using System.Data;

public class profStudent : IHttpHandler,

System.Web.SessionState.IRequiresSessionState

{

//This function runs when the user click on List Students hyperlink in

(ProfLecture.aspx)

public void ProcessRequest (HttpContext context) {

context.Response.ContentType = "text/plain";

Dbclass db = new Dbclass();

string id = (context.Request["id"] != null) ? context.Request["id"] : "";

Page 47: Design an Implementation of a Mobile Application for ...sci.tamucc.edu/~cams/projects/509.pdf · 3.2. Database diagram: ... The three cases are start class, review attendance, and

8

string mode = (context.Request["mode"] != null) ? context.Request["mode"]

: "";

string studentstate = (context.Request["state"] != null) ?

context.Request["state"] : "";

string sid = (context.Request["sid"] != null) ? context.Request["sid"] :

"";

string s = "";

DataTable dt;

if (mode == "update")

{

s = "Update StudentLecture set profchange=1, studentState=" +

studentstate + " where LectureID='" + id + "' and Student_ID='" + sid + "'";

db.Run(s);

}

if (mode == "student") context.Session["lid"] = id;

s = "Select * From LectureData where LectureID='" +

context.Session["lid"].ToString() + "'";

dt = db.getTable(s);

string d = "";

if (dt != null && dt.Rows.Count > 0)

{

d = "<table style='width:100%;background-color: #FFFFFF'

border='1'>";

d += " <tr style='text-align: center;color: #FFFFFF; font-weight: 700;

font-size: 11pt; font-family:Times New Roman, Times, serif; background-color:

#000099'>";

d += " <td> ID</td><td>Student Name</td><td>Time Sing

in</td><td>Status</td><td style='width:200px;'> Attendance Image</td><td

style='width:200px;'> Orginal Image</td> <td></td></tr>";

for (int x = 0; x < dt.Rows.Count; x++)

{

int state = 0;

int profstate = 0;

int min = 0;

int newstate = 1;

string color = "880000";

string st = "Absent";

string lst = "Present";

try { state = Int32.Parse(dt.Rows[x]["StudentState"].ToString());

}

catch { }

try { profstate =

Int32.Parse(dt.Rows[x]["profchange"].ToString()); }

catch { }

try { min = Int32.Parse(dt.Rows[x]["mint"].ToString()); }

catch { }

if (profstate == 1)

{

if (state == 1)

{

color = "008800"; st = "Present"; lst = "Absent"; newstate

= 0;

}

else

{

color = "880000"; st = "Absent"; lst = "Present"; newstate

= 1;

}

Page 48: Design an Implementation of a Mobile Application for ...sci.tamucc.edu/~cams/projects/509.pdf · 3.2. Database diagram: ... The three cases are start class, review attendance, and

9

}

else

{

if (min == 0) { color = "000088"; st = "Absent"; lst =

"Present"; newstate = 1; }

else if (min <= 5) { color = "008800"; st = "Present"; lst =

"Absent"; newstate = 0; }

else if (min <= 15) { color = "884433"; st = "Tardy"; lst =

"Present"; newstate = 1; }

else { color = "000088"; st = "Absent"; lst = "Attended";

newstate = 1; }

}

d += " <tr style='text-align: center;'> ";

d += " <td> " + dt.Rows[x]["Student_ID"].ToString() + "</td> ";

d += " <td> " + dt.Rows[x]["Fname"].ToString() + " " +

dt.Rows[x]["Lname"].ToString() + "</td> ";

d += " <td> " + dt.Rows[x]["logtime"].ToString() + "</td> ";

d += " <td style='color:#" + color + ";'>" + st + " </td> ";

d += " <td style='width:200px;'> <img alt='' width='200'

height='200' src='upload/" + dt.Rows[x]["SImageName"].ToString() + "' /> </td> ";

d += " <td style='width:200px;'> <img alt='' width='200'

height='200' src='upload/" + dt.Rows[x]["ImageName"].ToString() + "' /> </td> ";

d += " <td><a href='javascript:lect(\"" +

dt.Rows[x]["LectureID"].ToString() + "\",\"" + dt.Rows[x]["Student_ID"].ToString()

+ "\",\"" + newstate.ToString() + "\")' > " + lst + "</a></td>";

d += "</tr> ";

}

d += "</table>";

}

context.Response.Write(d);

}

public bool IsReusable {

get {

return false;

}

}

}