Advanced Web Solutions

Report Template
SID:………….

MOD004364

1
 Table of Contents

1.0 Introduction 3
2.0 Literature Review 4
2.1 WAMP Server 4
2.2 Model-View-Controller Framework. 5
2.3 MySQL 6
2.4 Windows Server 7
3.0 Software Design 8
3.2 Software Design 10
3.3 User Interface Design 11
4.0 Software Development Documentation 12
4.1 Registration 12
4.2 Login 12
4.3 Dashboard 13
4.4 My Profile: 14
4.5 Room Capacity 14
5.0 Testing 16
6. Conclusion 20
7.0 Reference 21

2
 1.0 Introduction

Objective: Design of a Mechanism for recording attendance as a Manager.

Intended Purpose

1. Recording attendance for individual student

2. For the group by lecturers
3. Adjusting attendance to correct errors

The system is supposed to give the Manager the possibility of displaying reports and
modules such as:-

1. The room usage against the capacity

2. Alerts when there is low attendance below a set threshold.
3. Manage the students and their attendance records.
4. Admin Module to manager other users
5. Student Module to view student attendance and profile section
6. Lecturer module to add, edit, update student attendance

Resources required:

1. Client Side: HTML5, CSS3,

2. Server Side: PHP, MySQL, SQL
3. Server: Apache (Xampp)
4. Operating System: Windows 8

3
 2.0 Literature Review
Due to the evolution of technology and need for good designs, there is increased demand to
develop websites and mobile applications for different users depending on the intended
purpose. For effective development and management of these websites and mobile application
designs, a lot of research factors need to be considered, reviewed and defined. In this
development report we attempt to consolidate the research items and also define a small
number of design elements to be analysed in the research. The elements to be used in the
design include: - classroom management, content utility, simplicity, readability, attendance
recording, navigation, the purpose and also accountability. Using these elements we define
their purposes and also evaluate them individually in the development.
(Apache_HTTP_Server)

Accelerated moves towards the digital era in management of different programmes is being
advocated for hence the need to develop proper software designs that also involve the
biometric technologies. These systems verify the students’ identity through various factors
such as fingerprints, voice and also the faces.

2.1 WAMP Server

This is a server based service that is used in software and stands for “Windows, Apache,
MySQL and PHP. The system is used mostly for web, development, internal testing and also
for serving live websites.

These are the tools that were used in the administrative student manager software website.
The server is available both in 32 and 64 bits versions.

In order to operationalize the elements that were set for the design, it was suggested that there
had to be the presence of a consistent menu, aids for navigation and also backtracking.

The purpose of a website is clear when it

Establishes a unique and visible brand/identity.

Simplicity is achieved by using the following elements:- simple subject headings,

Transparency of information (reduce search time), Website design optimized for
computer screens, Uncluttered layout, Consistency in design throughout website,
Ease of using (including first-time users), Minimize redundant features, and easily
understandable functions.

4
2.2 Model-View-Controller Framework.

MVC as it is commonly known is a software design pattern mostly used for developing user
interfaces related program logic into three interconnected elements. This is done to separate
internal representations of information from the ways information is presented to and
accepted from the user. This kind of pattern is used for designing the layout of the page. It
contains the following elements,

Model-This is the interface that has the mandate of interacting with the database source.it is
also an enabler for the specific requested data. The model contains a business logic, this id
different from the controller. It writes data to the database and provides tools for edition and
updating of the data. The Code Igniter uses a built-in library Active Record to facilitate the
models
View- This is the interface representation of the data to the end user. In our case it contains
the HTML, CSS, and also JavaScript. The code contained in views is usually used to loop
through collections of data received as parameters from the model or helper function for
cleaning up data or creating links to edit the records. When one uses the Code Igniter, there
is the use of short PHP tags and control structures which also is a combination of PHP
and HTML.

Controller- This facilitates the provision and taking into account the requests from the users.
This is an intermediate between the model and the view. It enables implementation of some
business rules. The controller may perform data validation on what has been submitted to
ensure that all the required parameters have been submitted. If something is missing the user
is redirected to the registration page with the appropriate error message displayed. The
controller may also request the model to perform more validation by checking if the submitted
email address already exists. If all validation rules pass then the controller submits the data to
the model for process and waits for the response. For the Code Igniter when we load the
URL into the browser there will be a file Welcome.php controller located in the application
with the BASEPATH defined or exit.

5
2.3 MySQL
SQL means Structured Query Language. This is an open source Related Database
Management System which was established in 1995 to enable provision of many database
operations. It supports many applications used for data retrieval and also interpretation.

MySQL is used by many applications like WordPress, Joomla, TYPO3, Drupal, MyBB,
phpBB, MODX and other software. Numerous large scale websites including Google,
YouTube, Facebook, Twitter, and Flickr are also using MySQL.
On all platforms excluding Windows, MySQL sends with no GUI (Graphical User Interface)
to administer MySQL databases or manage the data held within the databases.
Users may install MySQL Workbench by downloading separately or simply may use the
command line tools.
Numbers of third party GUI tools are also available. (How to Fix SQL, 2017)

The basic need of introducing MVC was to make complex application development easy.
MVC is a lightweight highly testable framework as compared to traditional Code Igniter
Web Forms. MVC focusses on Separation of Concerns. The purpose of MVC is to separate
the content from the presentation and data processing from content. One thing that MVC has
done is to separate the view from the code i.e., unlike Web Forms where “*.aspx” is attached
to “*.codeigneter.as” here in MVC View is a separate entity entirely. CODE IGNITER.NET
is stateless. In this we do not pass requests to the page like Web Forms. But we talk to the
controller. And the controller handles the request and fetches the desired data from the model
and transfers the data to the view. (Berndtsson, M., Hansson, 2005) And this View is used to
display the data to the end user.

PHP is a recursive acronym for "PHP: Hypertext Pre-processors". PHP is a server side
scripting language that is embedded in HTML. It is used to manage dynamic content,
databases, session tracking, even build entire e-commerce sites. It is integrated with a number
of popular databases, including MySQL, PostgreSQL, Oracle, Sybase, Informix, and
Microsoft SQL Server. PHP supports a large number of major protocols such as POP3,
IMAP, and LDAP. PHP4 added support for Java and distributed object architectures (COM
and CORBA), making n-tier development a possibility for the first time. PHP performs
system functions, i.e. from files on a system it can create, open, read, write, and close them.

6
PHP has been developed to its latest version, version 7, which was used because of its strong
features and characteristics. It has the following:

▪ Improved performance − having PHPNG code merged in PHP7,

it is twice as fast as PHP 5.

▪ Lower Memory Consumption − Optimized PHP 7 utilizes lesser

resource.

▪ Scalar type declarations − Now parameter and return types

can be enforced.

▪ Consistent 64-bit support − Consistent support for 64-bit

architecture machines.

▪ Improved Exception hierarchy − Exception hierarchy is

improved.

▪ Many fatal errors converted to Exceptions − Range of

exceptions is increased covering many fatal error converted
as exceptions.

▪ Secure random number generator − Addition of new secure

random number generator API.

2.4 Windows Server

This is the name of some servers operating under Microsoft. There are different stages and
versions of this operating system with the resent being the Window NT 4.0 Server and also
the Windows 2000 Server. These versions featured things like the DNS Server, DHCP Server,
Group Policy and other features in use today. (Android Studio the Official IDE for Android,
2015). It was basically written in C, and assembly.

7
 3.0 Software Design
The database design entails all the columns and the rows used for web design with different
elemental entries as required by the Administration manager.

In the Database Module we are going to use the Manager’s module. The elements in the
Managers module relate with the other entry modules. The Manager is able to key in their
personal information to gain valid access to the system. The information necessary include the
ID, last name, first name, username, password, sex, rank, office, email and also the
personal number. The Manager’s maindb is directly corresponding and relating to the
modules, the lectures module, the student module, the room’s module and also the
administrator module.

8
For this Module developed for the Administration managers there are different entries that are
specified for correct data collection from the website. All registration details for the room
identity, name of the students, the room capacity, the usage number of the rooms, and the type
of facilities that are present in the rooms.

The table for attendance will be able to store and save the students attendance for the
Managers reference and usage. For the Managers the main tool to be focused on is the
capacity records, this will enable recording and data collection of the capacity used compared
to the total room capacity per lecture room. The capacity will include the facilities in them.
This number will also include the students and also the lectures.

The updates on attendance will be factored in daily and recorded under the capacity
column for retrieval on call. So, if student attendance for the month exists in the database,
then update operation is performed. Student id is used to update the corresponding record.
And if the attendance does not exist for the student, then fresh attendance will be inserted for
the student.

The Manager is able to have information on each student’s personal attendance capacity
which is updated regularly once the student login into the system. The Manager also accesses
the name of the student. This individual attendance percentage then translates to the total
room attendance capacity which is also updated per single student entry.

9
3.2 Software Design
The table below lists the tools that were used for the software development and management.

Sr No Item Details

1 Microsoft Word For documentation of the

project

2 Sublime Text Editor, Text editor for

Notepad++ development

3 PHP 7 Server side scripting

language for web
development
4 MySQL Database for storing
project data

5 XAMPP Web Server for running

application on local
machine
6 Google Chrome Browser for testing web
application and check
design compatibility

7 Mozilla Firefox Browser for testing web

application and check
design compatibility

8 Opera Browser for testing web

application and check
design compatibility

Table 1. List of software development Tools

10
3.3 User Interface Design
1. Registration Page-
This is the page where the manager registers as the first user interface to access the
website. Different security tools are put in place for securing the data collected. The
security feature includes a password that is the biometric identification. The details are
handled asynchronously, this is because of the AJAX (asynchronous JavaScript and
XML)
2. Login and Entry Page
Second page in any project, from where use can login and access the features provided
role wise.
3. Dashboard
This is the main interface after the administrations Manager has logged in. This is the
page that contains all the data entry and information the manager needs for analysis. In
this page the entry for the total capacity of each registered room id is displayed. The
information for the current capacity is resisted and compared to the total room
capacity. It also contains the facilities records that are done by the Manager.
4. Profile Section
This is the page with all the details of the manager/managers. It contains the name,
email address, password, address, and department. From this page the manager is able
to edit and update the personal information at any time and to their liking
5. Students:

The manager can view all the students in this section and can update the attendance of
each student.

6. Navigation Menu:

This is the menu which takes the user to all the pages in the website. So, it plays a key
role in any software project. IN our case, it includes Home, profile, students. And In
header, logo, Manager’s name with welcome text, logout option and ip address of
current login session.

11
 4.0 Software Development Documentation
Manager Module

4.1 Registration
If the Manager is new, then the register option is displayed beside to login. The Manager can
then be able to register. CSS3 animations and transitions are used to make buttons attractive
and highlighting. Login page has a background image which is related to the project. CSS and
JS files used in thorough projects are of external type and are included in the header file.
Whatever the configuration is required for running the application, that is base URL or site
URL, starting session, database configuration (setting database server, username, password
and database) are coded in a single configuration file which is included in project files
wherever necessary.

All the new Managers will be required to register to use the system. While registering, the
basic fields like first name, last name, username, email address, password, confirm password,
role ( after selecting role from dropdown the other fields like Department and Address are
shown in user interface) are recorded. With bootstrap validator, data is checked (empty,
valid /invalid etc.) .After client side validation, data is passed to server via Ajax call (data is
transferred to server asynchronously and perform essential operations), and checked whether
current data exists or not and with MySQL functions sanitised string and converted password
to encrypted form with MD5 hash (one way hashing algorithm). If data already exists, then
registration is not allowed.
4.2 Login
At this stage, the manager needs to select corresponding roles from dropdown, then email
address and password. Valid login data is passed to the server via Ajax call and checked for
validity, data existence and data match. If the Admin has not approved the Managers’ Logins
then login is prohibited and requested to wait till approval Suppose if email address and
password entered are correct and role chosen is incorrect, then authentication is terminated
and invalid login details message is shown on login screen. Also, if the email address does not
exist in the system database, then invalid email address message is displayed on the login
screen and access is denied. And if the role and email address are correct, and password
entered is incorrect, then also login access is denied at the moment. As the password is an
MD5 encrypted form which allows one way hashing, so password form input is converted
into encrypted form using the same MD5 hashing algorithm, thus form input and records from
database are encrypted one and can now be used to authenticate the Manager.

12
So each and every credential needs to be filled correctly After successful login, with the help
of session (Manager data like id, email, name are stored in session which will be helpful for
handling and retrieving the information on other web pages), Manager is redirected to
dashboard page where firstly checked whether session is set or not. In the dashboard, with
CSS3, some loading gif images are added. Benefit of this is that, until the document gets
loaded fully, loading gif is shown and after successful loading of document, it gets hidden.
Registration and login page’s UI is designed with the help of HTML5, CSS3 and Bootstrap
which is compatible in all devices and mobile friendly too.
With the help of font awesome.css and animate.css libraries, the user interface looks
interactive and informative itself. Since, font awesome icons used in application are self-
describing and are being used wherever necessary.
4.3 Dashboard
In the dashboard page, Sidebar (fixed header) is shown which contains navigation menu like
Home, My Profile, Classrooms, Students etc. which is considered as header and in footer
(fixed footer) copyrighted text. Main menu’s header contains a logo, welcome text with name
as full name of lecturer and corresponding role of lecturer, after that logout button is shown.
Logo is having a hyperlink of the home page that is the dashboard page.
Functionality of the logout button is like a first it gives confirmation in the bootstrap modal
dialogue box, after confirming it the data that is stored in session is destroyed with session
destroy() function and then redirect the Admin to login page. And if lecturer cancels the
confirmation, then no action is taken except closing the modal dialogue box.

On the main dashboard, statistics are shown. Statistics include total number of students in the
system, total number of class rooms allotted to a corresponding lecturer in a system. These
records are retrieved from database tables’ visa student and classroom. This data is displayed
to only the lecturer since on the dashboard, information is displayed according to role.
The data that is retrieved from above tables is displayed in the form of styled blocks with the
help of CSS3 and bootstrap and is self-informative. At the bottom of every block, there is an
option ‘view all’ which contains a hyperlink which will take the lecturer to the student list and
class rooms page where detailed information about these is shown and arranged in an
understanding way.

13
4.4 My Profile:
On this page, the Manager is checked for session data, if session is expired then Manager is
redirected to the login page. If there is data in session, then the Manager is allowed to access
the Profile section.

The Profile section contains the Manager’s data where the Manager can view and update data.
The data to be viewed is name, username, email address, password, Department and address.
Password shown is in an encrypted form since the MD5 hash allows only one way encryption.
It has no decryption algorithm.
Manager’s information is shown in the list group with the help of bootstrap list group class.
If the Manager wants to edit and update current information, then after clicking on the edit
button, the edit form page will be displayed with current lecturer information auto filled in
form fields since id is passed as a parameter to the URL. And From that unique id, lecturer
data (First name, last name, username, email address, password, department and address)
from the staff manager table is retrieved.
If the Manager left some field empty, then form does not get submitted since client side
validation is there which checks for form fields are empty or not, password and confirm
password fields match each other or not, email address has valid characters or not and is valid
or not. After submitting the form, data is checked at the server side for its validity and for the
current lecturer id, the data gets updated in the table. After successfully updating, a success
message is displayed and redirects the lecturer to the previous profile page. And if the lecturer
does not want to update information, then a back button is provided after clicking on which
lecturer gets redirected to the profile page.

14
 4.5 Room Capacity
The Room details are retrieved from the classroom table in the database. Manager is only
given access to add, edit, update and delete the classroom. Whatever the classrooms are
allotted to corresponding lecturers are displayed in this section. Not all classrooms that exist
in the database are shown here. The class rooms allotted to current lecturer are displayed in a
tabular form with the help of bootstrap table class which is responsive and scrollable in all
devices.
The fields that are shown are room id and room number data is filtered as per the role and
displayed according to date. Means latest data will be shown before at the top. Here the
Manager is able to view and obtain information on the following;-
1. The Room Identity and the full room Capacity including the Facilities in the Room
2. The Current Room Capacity on the specific time and also date for comparison with the
full capacity.
3. Automatically obtain information when the student attendance is below the threshold.
This Automation is mainly facilitate because of the automatic data entry of each student
calculated towards obtaining the overall capacity per room per time. The Manager’s main
interest is the capacity so if the student attendance is below compared to the set threshold
there will be a notification alert sent to the Manager in the room capacity interface.

15
 5.0 Testing
Sr no Feature Scenario Expected Output Resul Chro Oper Firefox
t me a
1 Login Wrong Shows an Invalid Pass √ √ √
email, role error and Login
and prohibits credential
password Manager s
from
getting
logged in
2 Correct Shows an Invalid Pass √ √ √
email, error and Login
wrong role prohibits credential
and Manager s
password from
getting
logged in
3 Wrong Shows an Invalid Pass √ √ √
email, role error and Login
and correct prohibits credential
password Manager s
from
getting
logged in
4 Wrong Shows an Email Pass √ √ √
email at error and address
client side form does should
not get contain
submitted ‘@’
5 Empty role, Prompts Please fill Pass √ √ √
email and for input out the
password fields

16
6 Register Empty Prompts Please fill Pass √ √ √
fields for input out this
field
7 Wrong Prompts Please Pass √ √ √
email for correct include
format email ‘@’ in the
address email
address
8 Password Prompts The Pass √ √ √
requiremen for password
t not password must be at
fulfilled fulfilment least 8
characters

Please
enter
password
9 Confirm Prompts The Pass √ √ √
Password for password
requiremen password must be at
t not match and least 8
fulfilled fulfilment characters

Please
enter
password

Whoops!
Passwords
do not
match

10 Select role Prompts Please Pass √ √ √

from for select an

17
 dropdown choosing item from
item from dropdown
dropdown
menu
11 Attendan Attendance Display Shows no Pass √ √ √
ce on of student attendance records
Dashboar monthwise of student found if
d from there is no
database attendance
monthwise in
database

12 Profile Profile Display Shows no Pass √ √ √

section information lecturer records
of a informatio found if
Lecturer n in list there is no
group any
lecturer
informatio
n in
database
13 Edit Empty Prompts Please fill Pass √ √ √
Profile fields for input out this
field
14 Wrong Prompts Please Pass √ √ √
email for correct include
format email ‘@’ in the
address email
address

18
15 Password Prompts The Pass √ √ √
requiremen for password
t not password must be at
fulfilled fulfilment least 8
characters

Please
enter
password

16 Confirm Prompts The Pass √ √ √

Password for password
requiremen password must be at
t not match and least 8
fulfilled fulfilment characters

Please
enter
password

Whoops!
Passwords
do not
match

6. Conclusion

19
I got a good exposure to bootstrap 3 which is a very good CSS framework for making user
interface responsive, mobile friendly and compatible in all devices, browsers. With PHP and
MySQL, I learnt how to handle data and manage all the pages in the application. PHP
provides very simple syntax to develop the web application and is easy to learn. PHP7
provides better features than the previous version and I used them in this project too. It also
provided me the platform to improve my coding and debugging skills, understand it properly
and how to utilize the web technologies in day to day life.

The development of the website was facilitated by clear understanding of the login and
registration operation work. The basic features have been implemented for clear and precise
use for the Administration Manager. I provided features that enabled the Manager to know the
room capacity and to also view the attendance and the facilities available in the room per
room id. . For the better UI, I used front end technologies like HTML5, CSS3, JavaScript, and
Bootstrap.

7.0 Reference

20
Asghar MZ, Ahmad S, Marwat A, Kundi FM. Sentiment Analysis on YouTube: A Brief
Survey. arXiv preprint arXiv:1511.09142. 2015 Nov 30

Android StudioThe Official IDE for Android. (n.d.). Retrieved April 26, 2017, from
https://developer.android.com/studio/index.html

Apache_HTTP_Server, available at: https://en.wikipedia.org/wiki/Apache_HTTP_Server last

accessed, 10 Oct 2015.

INFORMATION AND COMMUNICATION TECHNOLOGIES ENGINEERING, available

at:http://www.uninettunouniversity.net/allegati/1/CommonFiles/Eventi/it/27/440/Full
%20Thesis.p dflast accessed, 10 Oct 2015

How To Fix SQL Injection: Statements. (n.d.). Retrieved April 26, 2017, from
https://software-security.sans.org/developer-how-to/fix-sql-injection-in-java- using-prepared-
callable-statement

Number of students in tamucc. (n.d.). Retrieved April 26, 2017, from

https://www.google.com/search?q=number%2Bof%2Bstudents%2Bin%2Btamucc&rl=

S. K. Jain, U. Joshi, and B. K. Sharma, “Attendance Management System,” Masters Project

Report, Rajasthan Technical University, Kota.

21