5.
CHAPTER FIVE
5. Implementation And Coding
5.1. Overview
Implementation is one of parts of the project development phase where project inputs are
converted to project outputs. In implementation phase, main task is coding. So we tried to
put into practice what was proposed in the project document i.e. transforming the project
proposal into the actual project. Then the developed system is implemented or hosted on the
server for the users to get the purpose or benefit of the system.
It includes the following:-
Logical Implementation: -implementation of the functionality of the system.
User interface Implementation: - the design of the user interface
Database Implementation: - the design of database tables it included in the previous
chapter
5.2. TOOLS AND TECHNOLOGIES UTILIZED DURING SYSTEM
DEVELOPMENT
Software Name
OPERATION ENVIRONMENT Windows 7
DBMS WAMP
Programming Language PHP
System Analysis and Design Enterprise, Edrow max
Text editor Sublime text editor
DEVICE DELL I5
Table 5.1 Tools utilized during system development
TECHNOLOGY
FRONT END (CLIENT SIDE) BACK END(SERVER SIDE)
TECHNOLOGY TECHNOLOGY
HTML 5 PHP
CSS
JAVA SCRIPT
JQUERY
BOOTSTRAP
AJAX
Table5.2: technology utilized during system development
5.3. System implementation
In this topic we tried to explain some of the implementation of the system. It contains
sample of user interface design and some code.
5.3.1 User Interface Design
In this system the users of this online clearance system will communicate with it through the
following user interfaces.
1. Home Page :This page contains the use of the system and link for login page
Fig 5.1 Home page user interface
2. Main page :- This page contains the background of EIABC
Fig 5.2 Main page user interface
3. Login Page: This form contains some links which lead it to the concerned page, and
if the user has an account he/she will directly go to concerned page by entering their
username and password.
Fig 5.3 Login page user interface
4. Create Account page:
In this page the admin can create account for different users. Also the admin must choose
account types and fill all the required fields. This page contains student, offices, and
administrator account types.
Fig 5.4 Create Account page user interface
5. View request progress page
This page contains the student’s clearance request status. So the student can view the
progress of his/her request.
Fig 5.5 View request progress page user interface
6. Send request page
In this page the student can send clearance request but first he/she fill all the required fields
and choose request type.
Fig 5.6 Send request page user interface
7. Manage Account page
In this page the admin can manage all user accounts that means the admin can update
delete or activate and deactivate the user accounts.
Fig 5.7 Manage Account page user interface
8. Change password page:
In this page all users can change their own account password.
Fig 5.8 Change password page user interface
5.3.2 Sample source code
In this topic we tried to show some of implementations source code both client side and server side.
We use PHP programing language in the server side and HTML, CSS, and JavaScript, etc in the client side.
1. Server side (PHP) source code for login function in the UserAccount class
<?php
class UserAccount{
private $con;
function __construct(){
require_once 'DbConnect.php';
$db = new DbConnect();
$this->con = $db->connect();
public function userLogin($username, $password){
$pass= md5($password);
$stmt = $this->con->prepare("SELECT * FROM user WHERE username = ? AND
password = ?");
$stmt->bind_param("ss",$username,$pass);
$stmt->execute();
$stmt->store_result();
return $stmt->num_rows > 0;
2. Server side (PHP) source code for login
<?php
require_once 'UserAccount.php';
$response = array();
if(isset($_POST['username']) and isset($_POST['password'])){
$db = new UserAccount();
if($db->userLogin($_POST['username'], $_POST['password'])){
$user = $db->getprivilage($_POST['username']);
if($user['Active_status']=="Active"){
$response['error'] = false;
session_start();
$privilege = $user['privilege'];
$_SESSION['privilege'] = $privilege;
$user_name = $user['username'];
$_SESSION['user_name'] = $user_name;
$Student_ID = $user['Student_ID'];
$_SESSION['Student_ID'] = $Student_ID;
$full_name = $user['Full_name'];
$_SESSION['full_name'] = $full_name;
$institute = $user['Institute'];
$_SESSION['institute'] = $institute;
$program = $user['Program'];
$_SESSION['program'] = $program;
$Office = $user['Office'];
$_SESSION['Office'] = $Office;
header("Location:Home.php");
} else{
$response['error'] = true;
$response['message'] = "User Account is Deactivated";
}else{
$response['error'] = true;
$response['message'] = "Invalid username or password";
echo json_encode($response);
3. Client side (HTML) source code for login.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--
==================================================================
=============================-->
<link rel="icon" type="image/png" href="images/icons/favicon.ico"/>
<!--
==================================================================
=============================-->
<link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css">
<!--
==================================================================
=============================-->
<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-
awesome.min.css">
<!--
==================================================================
=============================-->
<link rel="stylesheet" type="text/css" href="vendor/animate/animate.css">
<!--
==================================================================
=============================-->
<link rel="stylesheet" type="text/css"
href="vendor/css-hamburgers/hamburgers.min.css">
<!--
==================================================================
=============================-->
<link rel="stylesheet" type="text/css" href="vendor/select2/select2.min.css">
<!--
==================================================================
=============================-->
<link rel="stylesheet" type="text/css" href="css/util.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<!--
==================================================================
=============================-->
</head>
<body>
<div class="limiter">
<div class="container-login100">
<div class="wrap-login100">
<div class="login100-pic js-tilt" data-tilt>
<img src="images/logo.png" alt="IMG">
</div>
<form class="login100-form validate-form"
action="userLogin.php" method="post">
<span class="login100-form-title">
Login Page
</span>
<div class="wrap-input100 validate-input" data-validate =
"Valid Username is required: ex">
<input class="input100" type="text"
name="username" placeholder="Username">
<span class="focus-input100"></span>
<span class="symbol-input100">
<i class="fa fa-user"
aria-hidden="true"></i>
</span>
</div>
<div class="wrap-input100 validate-input" data-validate =
"Password is required">
<input class="input100" type="password"
name="password" placeholder="Password">
<span class="focus-input100"></span>
<span class="symbol-input100">
<i class="fa fa-lock"
aria-hidden="true"></i>
</span>
</div>
<div class="container-login100-form-btn">
<button class="login100-form-btn"
onclick="window.location = 'test.php'">
Login
</button>
</div>
</form>
</div>
</div>
</div>
<!--
==================================================================
=============================-->
<script src="vendor/jquery/jquery-3.2.1.min.js"></script>
<!--
==================================================================
=============================-->
<script src="vendor/bootstrap/js/popper.js"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<!--
==================================================================
=============================-->
<script src="vendor/select2/select2.min.js"></script>
<!--
==================================================================
=============================-->
<script src="vendor/tilt/tilt.jquery.min.js"></script>
<script >
$('.js-tilt').tilt({
scale: 1.1
})
</script>
<!--
==================================================================
=============================-->
<script src="js/main.js"></script>
</body>
</html>
4. Server side (PHP) source code for Send Request function in the ClearanceRequest
class
class ClearanceRequest{
private $con;
function __construct(){
require_once 'DbConnect.php';
$db = new DbConnect();
$this->con = $db->connect();
public function SendRequest($Student_ID,$Reason,$Last_Class_Attend,$Request_type){
$stmt = $this->con->prepare("INSERT INTO `student_request`
(`Student_ID`, `Reason`, `Last_Class_Attend`,
`Request_type`
,`Request_Status`)
VALUES (?,?,?,?,'Inprocess');");
$stmt->bind_param("ssss",$Student_ID,$Reason,
$Last_Class_Attend,$Request_type);
if($stmt->execute()){
return 1;
}else{
return 2;
5. Client side (JavaScript) source code for View Request
</script>
<script>
var row1=document.getElementById('student2'),rIndex;
for(var i=1;i<row1.rows.length;i++){
row1.rows[i].onclick=function (){
rIndex=this.rowIndex;
console.log(rIndex);
document.getElementsByName('Student_ID2')[0].value=this.cells[4].innerHTML;
document.getElementsByName('Student_ID5')[0].value=this.cells[4].innerHTML;
}
}
</script>
5.4 Prototype setup
In order to implement the system first the IT group must setup the server computer or any
computer that has server software. Then they need to install all the necessary software’s for
example wamp server software, MYSQL database and PHP in the server computer. After that
they need load the project in to the server. Then the next thing is data integration after the data
integration finished testing must be performed. The testing helps to identify errors, gaps or
missing requirements in contrary to the actual requirements. It can be either done manually or
using automated tools. Finally the implementation phase complete and the software ready to
use.
5.5 Conclusion and Recommendations
5.5.1 Conclusion
This paper culminated in the design and implementation of a software application, meant to ease
the process and activities of student’s during withdrawal clearance and graduating student, final
clearance. The application was successfully developed, tested, and found to be working as
expected. The developed system is capable of storing and processing student clearance with high
speed and accuracy, and presenting output in certain required format. Other qualities of this
system include reduction in cost of travelling, elimination of stress for both students and
administrative staff, reduction of paper works and reliability. This system will help in a good
ways to ease the queuing system in the university as the online clearance system will help
students to achieve whatever they want without coming to the various offices for clearance
personally such as dormitory, library, registrar, department and student service.
This system uses for regular and post graduate EIABC student’s withdrawal or graduate
clearance requests. The system allow:-
The administrator to manage(create, update, delete) different
accounts
The students to send either withdrawal or graduate clearance
request.
The students to check their request progress status.
The offices to approve or reject the student’s clearance request.
The registrar to generate different reports.
In this project we used object oriented system development methodology we chose this
methodology, so that the system able to provide the following points to the users or us.
Increase the extensibility of the users
Improve the quality of the system.
Increase chance of project success.
It can manage complexity.
5.5.2 Recommendations
This project limited to online clearance only. So it must to be integrate with other systems. When
this is done the following modules are
Recommended to be included.
The student account must be created when the student register.
Maintaining a central database for accessing all
Information relating to students.
The proposed system use only English language and it doesn’t included other languages so we
recommended that the local languages should include. And also the system administrator must
backup the database in every scheduled time in order to void the loss of data because of server
crash or other reasons. We didn’t include help menu in navigation bar so me recommended it
must be included to help and guide the users.
In order to use the system both software and hardware servers must needed and they should
always online. Finally we recommended the following for this system user.
Authenticated user with predefined access right should only enter to the information
related to database.
The users that use the password which is given by office should use keep passwords
secretively especially the office and that clears student’s clearance request and also the
system administrator and registrar.
User that has granted access to database must enter valid user name and password to
login to system. Without this, access to the system is denied.
