6B07 ICT REPORT

Student discipline system

HKDSE
Index

Reason of building this website........................................................................................... 5

General brief........................................................................................................................... 5
HTML..................................................................................................................................5
CSS.................................................................................................................................... 5
JavaScript...........................................................................................................................6
Php..................................................................................................................................... 6
Functions................................................................................................................................ 6
Admin................................................................................................................................. 7
Discipline teacher............................................................................................................... 7
Teacher...............................................................................................................................7
Student............................................................................................................................... 7
Mobile phone interface....................................................................................................... 8
Website hosting......................................................................................................................8
SSL Certificates..................................................................................................................9
1.1Index page......................................................................................................................... 9
1.1.1 introdution..................................................................................................................9
1.1.2 Functions.................................................................................................................10
1.1.1.1 Mobile interface.............................................................................................. 10
1.1.1.1.1 introduction............................................................................................ 10
1.1.1.1.2 adjustable size.......................................................................................10
1.1.1.1.3 adjustable size(CSS)............................................................................. 11
1.1.1.1.4 techniques............................................................................................. 12
1.1.1.2 Navigation bar................................................................................................ 13
1.1.1.3 Linkage...........................................................................................................13
1.1.1.4 redirect of sections......................................................................................... 14
1.1.1.5 responsive drop down list...............................................................................15
1.1.1.6 Change of color of the buttons....................................................................... 16
1.1.3 Sections...................................................................................................................18
1.1.1.1 Introduction...............................................................................................18
1.1.1.2 Frequently asked questions(F&Q)............................................................18
1.1.1.3 Dashboard of teachers and students........................................................19
1.1.1.4 Introduction of the most representative student....................................... 21
1.1.1.5 Latest news.............................................................................................. 21
1.1.1.6 Student record system showcase.............................................................22
1.1.1.7Contact Information................................................................................... 23
1.2 Login page...................................................................................................................... 24
1.2.1introduction................................................................................................... 24
1.2.2 data based structure....................................................................................24
1.2.3 Data validaton..............................................................................................26
1.2.4 Database table connection.......................................................................... 27

1
 1.2.5 Connection check........................................................................................ 28
1.2.6 Storing imputed data................................................................................... 28
1.2.7 Password verification...................................................................................30
1.2.8 Selection of data..........................................................................................30
1.2.9 Access level.................................................................................................31
1.2.10 Fail page....................................................................................................31
1.2.11 Acess passed............................................................................................ 32
1.3Forget password............................................................................................................. 33
1.3.1loop checking................................................................................................35
1.3.2 Confirm page............................................................................................... 36
1.3.3 The password email.................................................................................... 37
1.3.3.1 intro.....................................................................................................37
1.3.3.2 techniques.......................................................................................... 37
1.4 User home page............................................................................................................. 40
1.4.2 Different design between different users..................................................... 40
1.4.3 Students page................................................................................................... 40
1.4.3.1 log out.......................................................................................................41
1.4.3.3 Design for mobile status........................................................................... 45
1.4.3.4Connect to database to show record.........................................................47
1.4.3.5 Back button...............................................................................................48
1.4.3.6 Sliding button............................................................................................49
1.4.3.7 Appeal design...........................................................................................49
1.4.3.8 Get method...............................................................................................51
1.4.3.8 Update record...........................................................................................51
1.4.3.9 Good student............................................................................................ 52
1.4.4 Teacher page.....................................................................................................53
1.4.4.1 log out.......................................................................................................53
1.4.4.2 Check record(teacher version)................................................................. 53
1.4.4.3 Design for mobile status........................................................................... 54
1.4.4.4 Connect to database to show record........................................................55
1.4.4.5 Back button...............................................................................................55
1.4.4.6 Sliding button............................................................................................55
1.4.4.7 Connect to database to show record........................................................55
1.4.4.8 Modify record............................................................................................56
1.4.4.9 Get method...............................................................................................56
1.4.4.9 Modify form...............................................................................................57
1.4.4.10 Sql check................................................................................................ 59
1.4.4.11 Back button(on modify form)...................................................................60
1.4.4.12 Good school(teacher record)..................................................................60
1.4.4.13 Delete record.......................................................................................... 62
1.4.4.14 Action check........................................................................................... 63
1.4.4.15 Recover deleted record.......................................................................... 66
1.4.4.16 Design for mobile status(restore page).................................................. 67
1.4.4.17 Connect to database.............................................................................. 68

2
1.4.4.18 Back button(restore form).......................................................................69
1.4.4.19 No deleted record................................................................................... 69
1.4.4.20 Restore button........................................................................................ 70
1.4.4.21 Add record.............................................................................................. 71

3
Site map

4
Network diagram

5
Introduction

Reason of building this website

According to my observation the discipline system in school are still in a rural
state,the management and the regulation of management are in paper form
which is extremely time costing and with many errors.So that I designed a
website that can fix the problem,it is used with database management to
replace paper storage and use auto system to replace record with pen and
pencil.

General brief
This project aims to design a student discipline management system to
facilitate the arrangement of discipline records on both students to assist
teachers in creating an advanced study environment for students.In order to
achieve the goal I had implement java scripts,cascading style sheets,hypertext
markup language and hypertext preprocessor to provide several function for
users.Further more online server and database system are also applied.

HTML
● It is the markup language that we use to structure and give meaning to
our web content, for example defining paragraphs, headings, and data
tables, or embedding images and videos in the page.

CSS

● It is a language of style rules that we use to apply styling to our HTML

content, for example setting background colors and fonts, and laying
out our content in multiple columns.

6
JavaScript

● It is a scripting language that enables you to dynamically update

content, control multimedia, animate images, and pretty much
everything else.

Php

● PHP code is executed on the server, and the result is sent to the client's
web browser. This allows for dynamic content generation, such as
user-specific pages.

Functions
● This website are link with online server which can access in any online
device including mobile device and personal computer by the
link(https://sdsystem.000.pe)
● I designed 4 different roles for users:Admin,Discipline teacher,Teachers
and Student.Which provide different functions to different users
respectively.

7
Admin
● This role is applied with all functionalities in this webpage which is
designed for users that run this website,they can add more users,reset
password,approve student appeal on records,restore deleted
record,viewing students record and add records.All student accounts
and teachers accounts are managed and added by admin users. This
role can also access the database system to manage different records
and proceed testing and evaluation on each function.

Discipline teacher
● This role can approve records from students' appeals,it is designed for
the discipline team. When I was designing the system I wondered if
students should also have the right to defend and protect themselves
misrecord or malicious targeting.So this function is designed to provide
a way to appeal their injustice and wrongful treatment.

Teacher
● This role is designed for all teachers,it include functions like adding
student discipline record,reset their own password,record viewing and
restore deleted records.It provides basic functions to teacher to apply
their responsibilities on punishing students that violate school rules.In
order to minimize misinput I had add a restore function to prevent
misdelete.The input on add record form had also implemented with java
script that can facilitate the input speed and convenient on inputting
students name.

Student
● This role is applied to all students in this school.It is built with basic
functions like record viewing and password reset.Also a appeal button
on each record are applied,students can appeal records that are

8
 unreasonable or not from you.In another hand it can also be as a tool to
express your apologize on violate the school rules.You can type a
apology letter to be examine by discipline teachers,they can accept your
apology and delete the record but also able to reject your request.To
ensure no spanning all records can be only appeal once.

Mobile phone interface

● As mobile phone became one of the most essential electronic devices in

our lives so that designing one is very important.Also to take care user
with less digital knowledge a easy and accessible interface in a must to
design.Ultimately, prioritizing mobile design not only improves
accessibility and inclusivity for all users but also drives the overall
success of digital products in today’s mobile-centric world.

Website hosting
This website is supported by infinity fee, it provides a web server to displace
our website and customized domain name.It provides a stable environment to
run our webpage and guarantee the operation and accessibility around the
world.

9
 SSL Certificates
This webpage is also applied with SSL certificates provided by google trust. It
can protect the data transfer and being trust by different browser,provide a
confidential environment for users

1.Webpage design

1.1Index page

1.1.1 introdution
This is the index page of the student discipline system.It was divided into
different sections which provide different functions and information to service
our users. Furthermore the webpage was used with a mild blue color
(#eaf2fb)and white,symbolizes harmony and softness which match with the
aim of designing the web page:positive value.The following two pictures are
the user interface of mobile device and personal computer.

Desktop View Mobile View

10
1.1.2 Functions

1.1.1.1 Mobile interface

1.1.1.1.1 introduction
In modern society using mobile phones is now the mainstream of website
surfing,to adapt and convenience others we had to design a mobile version of
webpage to support mobile users.

1.1.1.1.2 adjustable size

As different brands of mobile devices had different sizes of screen so that our
webpage is capable of adjusting its font size to provide a high quality user
experience.Here are the examples.

iphone 14 pro max ipad pro

11
1.1.1.1.3 adjustable size(CSS)
To apply this miracle and fabulous function we applied Bootstrap, the world’s
most popular framework for building responsive, mobile-first sites, with
jsDelivr and a template starter page,it provides a template of css and
javascript to optimize the features of the web page.The bootstrap grid system
will responsively change the font size,spacing and grids according to your
screen size.

12
media@ is used to apply different styles for different devices,so
that’s why it can change font size and line height while using
different screens with different resolutions.

1.1.1.1.4 techniques

1.
This meta tag ensures that the page is responsive. It sets the viewport to
be the same width as the device and sets the initial zoom and minimum
scale level to 1 (100%).

2. This links Bootstrap CSS .It allows you to use Bootstrap's styles and
components for responsive design and layout.
3. This links parallax CSS.It allows the background content (i.e. an image)
is moved at a different speed than the foreground content while
scrolling.

13
 4. This links dropdown CSS.It creates a dropdown box that appears when
the user moves the mouse over an element.

1.1.1.2 Navigation bar

A navigation bar is designed to make it convenient for users to reach different
sections of the webpage.

The home button is designed to reset the website to its neutral states and
redirect to the top. This provides a consistent way for users to return to the
main starting point of the site from anywhere within the site.It simplifies
navigation for users. Instead of having to click multiple times or retrace their
steps through various pages, users can quickly return to the homepage with a
single click.

The student button redirects you to the student information section on the web
page providing the latest introduction of the representative student of the
school this year.This function is to provide extra information to non-campus
personnel and attract them to explore it.Contemporary the teacher button and
explore button serve a similar function which is to provide information of the
top staff of our school

1.1.1.3 Linkage
The logo is also shown to identify that this is a web page that
serves as academic usage.Furthermore the image can also
be lick acting the same function as the home button.

syntax

<a href="index.php">

14
 <img src="assets/images/download-192x216.png" alt="" style="height:
4.3rem;">
The “src” syntax links the picture of the logo,the “href” syntax links with
the”index.php" which is the page itself.While clicking the button will redirect
you to the index page again to complete it duties.

1.1.1.4 redirect of sections

Different from ordinary link buttons,the buttons on the navigation bar are
required to lead users to a specific location of the web page so that their
linkage is slightly different.

syntax

<li class="nav-item">
<a class="nav-link link text-black text-primary display-4"
href="index.php#about-us-12-uii6XJYc3e" aria-expanded="false">Student</a>
</li>

It was shown that after the name of the webpage there are a “#” hashtag after
it.And the “about-us-12-uii6XJYc3e” the section with that id.

syntax

<section data-bs-version="5.1" class="article12 cid-uii6XJYc3e"

id="about-us-12-uii6XJYc3e">

…
</section>

15
The result shown:

1.1.1.5 responsive drop down list

In some situations the size of the screen may not fit the navigation bar.To
overcome this I have implied a function that when the screen size is smaller
than less than 991px wide , it triggers the hidden content of the navigation bar
content.

<button class="navbar-toggler" type="button" data-toggle="collapse"

data-bs-toggle="collapse" data-target="#navbarSupportedContent"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarNavAltMarkup" aria-expanded="false"
aria-label="Toggle navigation">
<div class="hamburger">
<span></span>
<span></span>
<span></span>//The logo
<span></span>
</div>
</button>

@media (max-width: 991px) {

.cid-uiRmTbOoWr .navbar .navbar-toggler {
flex-basis: auto;

16
 }
}
The media function will hide the button when the screen size is smaller than
991px

The result shown:

1.1.1.6 Change of color of the buttons

Sometimes you may find it hard to identify the location of your
mouse,struggling whether your mouse reaches the button.To solve the
problem I designed that when the mouse is attached to the button the button
will have different kinds of changes.

css

a:hover {
color: #eeb902;
}
.mbr-plan-header.bg-primary .mbr-plan-subtitle,
.mbr-plan-header.bg-primary .mbr-plan-price-desc {
color: #fef0be;
}
.mbr-plan-header.bg-success .mbr-plan-subtitle,
.mbr-plan-header.bg-success .mbr-plan-price-desc {
color: #68e3aa;
}
.mbr-plan-header.bg-info .mbr-plan-subtitle,
.mbr-plan-header.bg-info .mbr-plan-price-desc {
color: #55dbf6;
}
.mbr-plan-header.bg-warning .mbr-plan-subtitle,
.mbr-plan-header.bg-warning .mbr-plan-price-desc {
color: #ffe599;
}
.mbr-plan-header.bg-danger .mbr-plan-subtitle,
.mbr-plan-header.bg-danger .mbr-plan-price-desc {
color: #e56773;

17
}

I applied different changes of color when the mouse attached to different

buttons.The “hover” syntax is the key of setting this function.

examples:

Dimmer back ground

Dimmer color

Brighter icon

Underling animation

18
1.1.3 Sections

1.1.1.1 Introduction
The webpage is designed into several sections in order to provide different
information about the school recently,including frequently asked
questions(F&Q),a dashboard of teachers and students,introduction of the
most representative student,latest news,pictures of how this system enhances
study quality and contact information.The abounding information can attract
viewers and provide latest information for student and teacher.

1.1.1.2 Frequently asked questions(F&Q)

● It addresses common questions
and concerns from users. This helps
users find information quickly without
needing to contact support.Which can
also enhance user experience of solving
problems by themselves.

● The questions presented now are

some of the predicted problems.I assume
that while operating the website the FAQ
question can be modified and changed by
the admin to stick with the common
problems of users.

19
1.1.1.3 Dashboard of teachers and students
In order to encourage students and introduce top teachers I have designed a
dashboard that shows them.Teacher that are in charge of the arrangement of
the system will be shown to notify students who they should seek for help and
who they should ask for record appeal.Moreover the top student will be also
shown it is designed that only student that have no misbehavior and with good
manner can be show in this dashboard, he/she will be also treated as the
representative student of the year.

Until now Glenn Yee is the representative student this year, as he is committed
to promoting racial equality and black lives matter, his icons are specially
designed while clicking it will redirect you to the black lives matter official
website.

Refer to:1.1.1.3 Linkage

20
Showcase:

21
1.1.1.4 Introduction of the most representative student
The representative student of the year will be introduced in this section to
show how excellent he is and act as a role model for all other
students.Moreover the introduction of his action can also show the school
spirit and values to the general public and being more well-known and
approved.

1.1.1.5 Latest news

This area shows the latest event and latest news of our school,like the top
teacher election,new update of features,teacher tips and school dse
result,etc.The latest information of the webpage and school are essential to
show as to notice parents,teachers,students and the general public.The
explore button linked to the school webpage to invite outsiders to not only
explore our webpage,also with the school webpage.

22
Link function refer to:1.1.1.3 Linkage

1.1.1.6 Student record system showcase

This part of the website is designed to showcase the enhancement of study
quality brought by the system.I assume that it is with pictures of students and
teachers cooperating and improving their attitude and behavior.However as
the system is not fully operated in school so I used pictures from mobirise to
represent.

23
1.1.1.7Contact Information
It is used to provide different methods to contact us,like phone call,email and
working hours.To facilitate communication between teachers and students and
the public.The information of the location of school are also shown by google
map, which is more accurate and it is able to converted into different language
in order to convenient foreign visitors.

html

<iframe="
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3692.357
3785622543!2d114.24710097529146!3d22.264448279712408!2m3!1f0!2f0!3f0!3
m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3404022fc0016e5b%3A0x6262498d867f
5385!2z5Lit6I-v5Z-66YeR5Lit5a24!5e0!3m2!1szh-TW!2shk!4v1723651871061!5
m2!1szh-TW!2shk" width="600" height="450" style="border:0;"
allowfullscreen="" loading="lazy" referrer
policy="no-referrer-when-downgrade"></iframe>

The <iframe> tag specifies an inline frame.An inline frame is used to embed
another document within the current HTML document.It is used to show the
google map information in this situation.

24
1.2 Login page

1.2.1introduction
In order to identify different identities of users,to provide different services for
different users.After inputting your user id and password it will redirect you to
the home page according to your identity,for example if you are a teacher it will
redirect you to the teacher page.

After clicking on the login button

it will redirect you to the middle of
the login page in order to increase the efficiency
of inputting the user information to log in.

Refer to 1.1.1.4 redirect of sections

The lower section of the page is where the

forget password serves.If you forgot your
password by clicking it,it will redirect you to
the forgot password form.After filling in your
password will be reset.

1.2.2 data based structure

In order to store different account data I have designed a database server to
store password and data.

25
There are totally 6 different field being store in this database:
id
This field is used to store user id,which uniquely identifies different account
so that I set it as the primary key of this table.All id are store as integer as
none of them are text and none of them with starting zero.As I designed user
registration for admin users so that the id field are designed as auto
increment,it will automatically assign id according to the number order(e.g
new id will be created as 3 if it’s last id is 2)so that to simplify the workload of
account input.
Name
This field is stored with the user name of the account , which is being imputed
in the login form and will be verified with password.
Email
This field is used to store users' email in order to send the reseted password
to the users.
Password
This field is used to store a user's password.However in terms of security
concern the passcode is encrypted in hash.It is a permanent encryption, there
are no any methods to decrypt it.

26
Salt

Salt is an additional text randomly generated, it will be mixed with passwords

and the inputted password.As if same password occurred the hash code will
be the same as well so in order to avoid it,while password encryption a
random text will be mixed in and hash together so that even with same
password the output will be different.The field of salt in to store the
randomized text in order be mixed with the inputted password and verify withe
the password in the database.

1.2.3 Data validaton

html

<input type="password" name="password" placeholder="Password"

data-form-field="password" class="form-control" value=""
id="email-form03-0" minlength="8" maxlength="8" required>
</div>

Data validation are essential to reduce the input error and enhance
security.Input type password ”Password” provide a platform of different
attribute to proceed.For example “minlength” it will limit the minimum input
character,as the code above “8” is setted the minimum length is 8
characters.In terms of “maxlength” the meaning are the maximum character

27
can be inputted.The term “required” means that this text box are required to
fill in before submitting.

1.2.4 Database table connection

First of all Php code is used in this setup as it is required to link the database
table to obtain the password and username stored inside.

28
php

<?php
$servername = "sql110.infinityfree.com";
$username = "if0_37140943";
$password = "8RysHjQkRp7w";
$dbname = "if0_37140943_12";
…
?>
The connection are the first part of a php code,”$servername” means the
name of the web server that contain the website,”$username” are the name of
the user(who can access the database),”$password” are the password of the
database,”$dbname” are the name of the database.

1.2.5 Connection check

Php

$conn = new mysqli($servername, $username, $password, $dbname);

if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}

“if ($conn->connect_error)” is a check for connection error,if the connection to

the database fails (e.g., due to incorrect credentials, the database server being
down, or the database not existing), this property will contain an error
message.”die”means to stop the connection of the database immediately in
order to prevent infinite loop.

After inputting the above the php file is now able to access the database and
make interaction with the following code.

1.2.6 Storing imputed data

php

$name = $_POST["name"];
$password = $_POST["password"]; // This will be modified for hashing

29
“$_POST” means that post methods are applied in the data getting method
from the form.

Post
The POST method is one of the most commonly used HTTP request methods
in web development, primarily designed for submitting data to a server. Unlike
the GET method, which appends data to the URL, POST sends data in the
request body, making it more suitable for transmitting large amounts of data or
sensitive information, such as user credentials. This method is often employed
in forms for actions like user registration, login, and data updates, as it allows
for a more secure transfer of information. Additionally, POST requests do not
have size limitations like GET requests, enabling the submission of significant
quantities of data. The server processes the received data and typically
returns a response, which can be used to confirm the success or failure of the
action. Overall, the POST method is essential for creating interactive web
applications, facilitating secure and efficient data handling between clients
and servers.(refer to the definition from the internet)

As it was said this can provide a high level of security in order to protect the
private information input by the users.

30
1.2.7 Password verification

1.2.8 Selection of data

php
$sql = "SELECT name, password, salt, access_level FROM users WHERE
name='$name
Then the password and salt will be sorted out by sql statement.I mean select
the name and password and salt and access_level by the name input by the
user.

php

$row = $result->fetch_assoc();

It form the collected data into an array and stored

Php

$hashed_input_password = md5($password . $stored_salt);

31
It will convert the password imputed and merged with the salt selected out
from the database.And then hashed with md5

1.2.9 Access level

php

if ($name === $stored_name && $hashed_input_password ===

$stored_hashed_password) {
if ($access_level === "admin") {
header("Location: success(admin).php");
exit;
} elseif ($access_level === "teacher") {
header("Location: success(teacher).php");
exit;
} elseif ($access_level === "student") {
header("Location: success(student).php");
exit;
} elseif ($access_level === "dpteacher") {
header("Location: success(dpteacher).php");
exit;
}
} else {
header("Location: fail.php");
exit;
}
} else {
header("Location: fail.php");
exit;
}

The if loop is to verify whether the inputted password mixed with the salt are
the same with the selected password and whether the name imputed are the
same with the name selected.If the verification failed the php will redirect you
to the fail webpage.Then the second if loop is to redirect the user to the home
page according to their access level(e.g. teacher,admin).

1.2.10 Fail page

When the verification fails or any failure of form inputting and error this form
will appear to notice the process is failed and by pressing retry redirect you to
the original status.

32
1.2.11 Acess passed

When the verification succeeds this page will pop out to notice you, after
clicking continue you can get into the page.

33
1.3Forget password
In some situations users may forget their password,which requires the admin
to reset their password.In order to lower the workload a forgot password
function is implemented.

html
<input type="text" name="name" placeholder="Name"
data-form-field="name" class="form-control" value=""
id="name-form02-1w">
In this form a placeholder called”name” is added,which can notice the
required information from that text box.The personal info field is used to verify
the identity of the user to ensure it is the will of the user to reset the password.

Then it will link to another php which is responsible for the sending of the
newly resetted password to the user's email.

First of all as this function required to get data from database so that the first
part the php connected to the database.Refer to 1.2.4 Database table
connection

34
Then the php will randomize a password and update it to the database which
reset the password to the account.

The javascript that randomize the password

function generatePassword($length = 8)
{
$characters =
'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ01234567
89!@#$%^&*()_+';
$ranvalue = '';
for ($i = 0; $i < $length; $i++) {
$ranvalue .= $characters[mt_rand(0, strlen($characters) - 1)];
}
return $ranvalue;
}

In order to keep security the randomized passwords are limited to 8 digits,with

different symbols.

php

$name = $_POST["name"];
$recipient_email= $_POST["recipient_email"];
$personal_info= $_POST["personal_info"];
The data are obtained from the inputted form which refer to 1.2.5 Storing
imputed data

php

$sql = "SELECT name,email FROM users WHERE name='$name' and

$result=$conn->query($sql);

The data form the database are sorted out refer to 1.2.6 Password verification

35
1.3.1loop checking

php

if ($result->num_rows > 0) {
if (!$mail->send()) {
header("Location: fail(email_confirm).php");
} else {....
…. }
} else {
header("Location: fail(email_confirm).php");
}

The if loop is to guarantee that the notified emails are sent before updating
the database,if the email and sended fail the fail page will pop out and require
you to try it again.

php

$update_sql = "UPDATE users SET password = md5('$new_pass') WHERE

name = '$name' AND email = '$recipient_email'";
if ($conn->query($update_sql) === TRUE) {
header("Location: email_confirmed.php");
} else {
header("Location: fail(email_confirm).php");
}

In side the else loop a update sql are run if the verification above approved
The sql will update the password based on the inputted email and name and
also along with the verification of the connection of the database.If everything
works perfectly the confirmed page will pop out and notice the user you had
successfully reset password.Refer to 1.2.5 Connection check and 1.4.3.8
Update record

36
1.3.2 Confirm page

After clicking continue it will redirect you back to the login page and re-login.
Refer to 1.1.1.3 Linkage

html

<body>
<div class="container">
<span class="icon">✓</span>
<h1>Email Confirmed!</h1>
<p>Thank you for successfully inputting your email. Please check your
inbox for an email to change your password.</p>
<a class="btn btn-primary display-7"
href="https://sdsystem.000.pe/index.php">continue</a>
</div>

</body>

37
The redirect function are also refers to 1.1.1.4 redirect of sections and a with
the 1.1.1.6 Change of color of the buttons

1.3.3 The password email

1.3.3.1 intro

In order to notice the user a notice email will be displayed after the user
change his password.Which is easy and efficient for users to reset password
without annoying the admin.As I preserved if we don't have this function every
time user forget their password they need to send email to admin and admin
need to reset their password on database then email back to the user.Which
very inefficient and time consuming. The auto email notice can perfectly solve
the problem

As I mentioned above the update of date will be applied after the email being
send.Which is to prevent situations like the email being sent but the password
haven't changed yet which will waste the time of the user and also influence
the confidence and trust between user and the website.

1.3.3.2 techniques

First of all I registered an email account as the media to send email and verify
it with 2 step verification.And then I use smtp protocol and with port 587 to
send the email

38
 php

$email_title = "Password Reset Request for Student Discipline Record

System";

This is the title of the sended email and it is to directly attract the user's
attention to notify this is from the student discipline system.

php

$email_content = "<!DOCTYPE html><html lang='en'><head> <meta

charset='UTF-8'> <meta name='viewport' content='width=device-width,
initial-scale=1.0'> <title>Reset Password</title> <style> body {
font-family: Arial, sans-serif; margin: 0; padding: 0;
background-color: #f4f4f4; } .container { max-width: 600px;
margin: 0 auto; padding: 20px; background-color: #fff;
border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } .button
{ display: inline-block; background-color: #007bff; color: #fff;
text-decoration: none; padding: 10px 20px; border-radius: 5px;
font-size: 16px; } .button:hover { background-color: #0056b3; }
</style> </head> <body> <div class='container'> <h1>Reset Your
Password</h1> <p>Hello,</p> <p>We received a request to reset your
password. The text under will be your new password:</p>
<p>".$new_pass."</p> <p>If you did not request a password reset, please
disregard this email.</p> <p>Best regards,<br> Student Discipline
Team</p> </div> </body></html>";
To provide a clean and tidy appearance of the message I design a html that
with simple css and with direct message.Means while as the sended password
are different to everyone so that the password are echo form the script to
ensure the sended password are the updated one.

39
40
1.4 User home page
1.4.1 intro

After logging in it will redirect you to the home page that according to your
access level set form your account.Also in order to create a clean and tidy
home page for users most of the extra informational data for outsiders are
removed.for example only FAQ is remain as to answer technical questions and
a function bar are added in the button and different users can access into
different function so that their are also different.

1.4.2 Different design between different users

Different users are with different types of design in order to specify their
identity and to notice they are now successfully logged in.

1.4.3 Students page

The title and logo are changed after logging in according to your access level.
Refer to 1.2.7 Access level .
Function bar:

This bar represents the function that students can apply including check
records, logout and reset password(refer to 1.3 Forget password )

41
1.4.3.1 log out

After pressing the logout button it will redirect you back to the index page.It is
an essential practice for maintaining security and ensuring privacy,it reduces
unauthorized access by physically using access to your device.
1.4.3.2 Check record
In this project checking records is one of the most important aims in this
project,as this system is called student discipline system which is to provide a
convenient platform for students to check records and learn their mistakes.

This html is designed to replace using papers to show discipline records as it

cannot be synchronized,low and not efficient.This html are built with a form
that connect to that database and update data immediately, student can see
their latest records including when,where,why,response teacher,why to
appeal,punishment,trial.

42
● SID: Student ID for to identify student
● CCNO: Student class and class number
● NAMEC:Chinese name of the student.
● NAMEE:English name of the student.
● Item: Various disciplinary actions, including reasonable scenarios for
each action.
● description: Each record provides a brief, plausible explanation of the
disciplinary action taken.
● incident: Incident categories that match the disciplinary action.
● Tritial: Indicates whether the case is pending or resolved.
● Tname: Response teacher that records and decides the punishment.
● DATE: Dates of committing the misbehavior .

43
1.4.3.2 Flow chart

44
It is designed that student are able to appeal for the result as well,it is to
reduce injustice or wrong records.Each record has one chance of
appealing,and can be also rejected,it is setted that after appeal if the discipline
teacher approved your appeal the record will be deleted, or else it will show as
rejected status means that it is not able to appeal and the result are confirm
reasonable.Also before before getting the result the appealed record will show
it is in a appealing status.

45
1.4.3.3 Design for mobile status

In order to serve mobile users the record table will regulate itself to suit the
decreased screen size.Refer to 1.1.1.1.2 adjustable size
But however as the table is with a large amount of field and data it is difficult
to reduce its width.

It is shown that some of the fields are cutted and covered,it will be very
uncovertebral to view the record. Although users can slide the table from right
to left,in some situations sliding may consist of some physical limitation. So
that on the left hand and right hand corner I designed two buttons for mobile
users.After clicking the left button that is written with right the screen will
move from left to right which shows the rest of the field.

46
In this situation a java script code is used,the scrollTable function is designed
to scroll a table horizontally within 1000 pixels . The scrolling occurs smoothly,
and the direction of the scroll (left or right) is determined by the input
parameter direction.

javascript

function scrollTable(direction) {
const container = document.querySelector('.table-container');
const scrollAmount = 1000;
container.scrollBy({
left: scrollAmount * direction,
behavior: 'smooth' });
}

html

echo "<button class='scroll-icon scroll-left'

onclick='scrollTable(1)'>Right</button>";
echo "<button class='scroll-icon scroll-right'
onclick='scrollTable(-1)'>Left</button>";

“container.scrollBy({ ... })” This method is called on the container element. It

scrolls the element by a specified amount.
“left: scrollAmount * direction” This calculates how much to scroll
horizontally. The direction parameter is expected to be either 1 or -1,for
example if direction is 1, it scrolls to the right (positive direction),if direction is
-1, it scrolls to the left (negative direction).
“onclick='scrollTable(1)”means that after clicking the button, run the function
and the (1) means the perimeter of the function,in this situation the direction of
scrolling will be left to right.
“behavior: 'smooth' “means that the scrolling action after clicking the button
should be smooth and slow.

47
1.4.3.4 Connect to database to show record

php

$sql = "SELECT * FROM record Where status = true and id= $name";

Refer to 1.2.7 Selection of data aims to select the record of the student who
owns the account. If this record is deleted it’s status will be switched to
negative, which acts as an insurance that records are deleted accidentally.In
this situation it is to select records that are not deleted and it is from the
student that is using this account.

php

while($row = $result->fetch_assoc()) {
echo "<tr>
<td>" . $row["SID"] . "</td>
<td>" . $row["CCNO"] . "</td>
<td>" . $row["NAMEC"] . "</td>
<td>" . $row["NAMEE"] . "</td>
<td>" . $row["Item"] . "</td>
<td>" . $row["description"] . "</td>
<td>" . $row["incident"] . "</td>
<td>" . $row["Tritial"] . "</td>
<td>" . $row["Tname"] . "</td>
<td>" . $row["DATE"] . "</td>
<td>";

After selecting the data from the database it is putted in to the array “$row”
and then being echoed accordingly.”<td>” are used to separate the field.

48
1.4.3.5 Back button

In the bottom of the record site there are back buttons which serve as a return
button that redirect you to the student home page allowing users to easily
retrace their steps without needing to back the browser.It is designed to
provide users a more flexible experience on using the website.

html

<a
href='https://sdsystem.000.pe/student.php'class='modify-button'>Back</a>
It is designed as simply linked back to the homepage.Which refer to 1.1.1.3

Linkage

49
1.4.3.6 Sliding button

By pressing the button “appeal” of the record page you can start the whole
appeal process.Refer to

php

echo "<a href='approval_form.php?action=appeal id=" . $row["id"] . "'

class='modify-button'>Appeal</a>";

1.4.3.7 Appeal design

After clicking it a URL

https://sdsystem.000.pe/approval_form.php?action=appeal id=13 will be
formed, combined with the approval_form URL and the action and id.

In the appeal form(the name of the form is approval_form) page it is required

to write down the reason that you think you don't deserve the punishment or

50
your regret letter.The written paragraph will be updated into the database to be
observed by the teacher and provide them a reference on whether or not they
forgive you.

This design is the make the record cancel,record appeal and apologize easier
to proceed.In the past student need to find the response teacher face to face to
ask for forgiveness or calling the general office to deal with wrong
records.With this advanced function student are now able to express
themselves in a easier way and teacher can allow receive and reply unified.

In the appeal form

php

$id = $_GET['id'] ?? '';

It will get the id from the URL formed previously from the record page.

php

<form action="approve.php" method="post">

<label for="description_student">Incident Description:</label>

<textarea id="description_student" name="description_student"
required></textarea>
</div>
<div class="buttons">
<button type="submit">Submit</button>
</div>
</form>

Then the inputted data will be transferred to approve.php to deal further action
after clicking submit.

51
1.4.3.8 Get method

php

$id = $_POST['id'];
$description_student= $_POST['description_student'];

if($conn->query($sql_1) === TRUE) {

header("Location:record(student).php");

} else {
header("Location:fail.php");
}

1.4.3.8 Update record

php

$sql_1 = "UPDATE record

SET description_student = '$description_student', appeal_status = true
WHERE id = '$id'";

In the approve.php it will receive the id and the written paragraph by post form
the appeal form, then $sql_1 will be run in order to insert the paragraph into
the database according to their student id.And the at last there will be a if loop
to check whether the sql had successfully run or else the fail page will pop out
and notice the fail in inputting.

This function is not yet finished. It will be continued in the discipline teacher’s
page as one of their functions is to reject or approve the appeal.

52
The appeal_status will be also changed while updating the database which is
used to identify whether the records are now appealing.

php

if ($row["appeal_status"] == false) {
echo "<a href='approval_form.php?action=appeal id=" . $row["id"] . "'
class='modify-button'>Appeal</a>";
} else {

echo "Appeal Submitted";

}

If the appeal status is true the appeal button will not show and be replaced by
a notice that the records are now appealing to prevent multiple requests on
one record and unlimited spamming.The href redirect the webpage after
clicking refer to 1.1.1.3 Linkage

1.4.3.9 Good student

If you are a good student your discipline record page will be shown like this
means that you have no discipline record or violate any school rules which is
worthy of appreciation

php

else {
echo "<div class='no-records'>No records found</div>";
}

53
1.4.4 Teacher page

The title and logo are changed after logging in according to your access level.
Refer to 1.2.7 Access level .

Function bar

This bar represents the function that teacher can apply including checking
records, restore deleted record,logout ,add record and reset password(refer to
1.3 Forget password )

1.4.4.1 log out

Refer to 1.4.3.1 log out

1.4.4.2 Check record(teacher version)

Compared to the record page from students there are few changes and
additional functions in order to enhance efficiency on record regulation.For
examples the teacher version can modify records and restore records and
viewing records from all school students.

54
1.4.4.3 Design for mobile status

55
It will adapt to different size of screen.Refer to 1.4.3.3 Design for mobile status

1.4.4.4 Connect to database to show record

Refer to 1.4.3.4Connect to database to show record

1.4.4.5 Back button

php

<a
href='https://sdsystem.000.pe/teacher.php'class='modify-button'>Back</a>

Refer to 1.4.3.5 Back button

1.4.4.6 Sliding button

Refer to 1.4.3.6 Sliding button

56
1.4.4.7 Flow Chart

57
1.4.4.8 Modify record

In some situation teachers may have errors in inputting records,for example

wrong name,wrong class,wrong incident,etc.This will both influence teacher
and the student, admin may face a lot of load on fixing the wrong record and
explain to student.So that a modify function are designed for all teachers
which provide a higher tolerance on wrong input.

58
1.4.4.9 Get method

In this situation records are identified by the URL

php

<a href='modify_record.php?id=" . $row["id"] . "'

class='modify-button'>Modify</a>

URL:https://sdsystem.000.pe/modify_record.php?id=29
The id will be stuck with the URL so that it can modify_record.php so that it
can select the data about that record and apply a form for users to modify.

php

$id = $_GET['id'] ?? '';

It is use to captured the id in URL.Refer to 1.4.3.7 Get method

59
1.4.4.10 Modify form

After getting the id from the URL the form will select it and add it into the form
as value to show the original record,to convenient users to modify records.

php

$sql = "SELECT * FROM record WHERE id = '$id'";

$result = $conn->query($sql);

if ($result->num_rows > 0) {
$row = $result->fetch_assoc();

Selecting data by id and input into the array.Refer to 1.2.7 Selection of data .
Refer to 1.2.5 Connection check

60
php

<form method="post" action="update_record.php">

<input type="hidden" name="id" value="<?php echo $row["id"]; ?>">

As to notice what the previous record is, the form will show the original record
by echoing the record selected from the database and inputted as a value.The
value attribute specifies the initial value of the element.Refer to 1.4.3.8 Update
record

It is shown that the id was a hidden input of data which is already inputted by
the capture of URL, the hidden design prevents users from editing it as the
following update and modification is based on the hidden field.Moreover the
prevention of user edit can also reduce the data error form the modify process.

The original data are re-inputted into the form already to act as a reference for
the modification.

Then by clicking on the update record button it will transfer the data to the
update_record.php and update the record from the database.

In terms of update_record.php it will connect to database first and then

capture the data by post method.Refer to 1.2.5 Storing imputed data

php

$id = $_POST['id'];
$sid = $_POST['sid'];
$ccno = $_POST['ccno'];
$namec = $_POST['namec'];
$namee = $_POST['namee'];

61
$item = $_POST['item'];
$description = $_POST['description'];
$incident = $_POST['incident'];
$tritial = $_POST['tritial'];
$tname = $_POST['tname'];
$date = $_POST['date'];

$conn = new mysqli($servername, $username, $password, $dbname);

if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}

Then update the record based on the modified record according to the
id.Which refer to 1.4.3.8 Update record,refer to 1.2.5 Connection check

php

$sql = "UPDATE record SET SID='$sid', CCNO='$ccno', NAMEC='$name',

NAMEE='$namee', Item='$item', Description='$description',
Incident='$incident', Tritial='$tritial', Tname='$tname', DATE='$date' WHERE
id='$id'";

Refer to 1.4.3.8 Update record

1.4.4.11 Sql check

php

if ($conn->query($sql) === TRUE) {

header ("Location:record.php");
} else {
echo "Error updating record: " . $conn->error;
}

62
At last it will have a query check to ensure the sql is successfully proceed or
else it shows the fail page.

1.4.4.12 Back button(on modify form)

php

<a href='https://sdsystem.000.pe/record.php'class='modify-button'>Back</a>
After clicking it will redirect you back to the record page.

1.4.4.13 Good school(teacher record)

If this shows in the teacher version of the record page there will be only
consist of two reasons the database lost connection or our school had reach
zero misbehavior,which will be a remarkable goal.Refer to 1.4.3.9 Good student

php

else {
echo "<div class='no-records'>No records found</div>";
}

1.4.4.14 Delete record

Meanwhile a delete record function is also designed for record regulation,in

some situations teachers may accidentally input the wrong record which they

63
want to delete.In the past to reach this goal you needed to inform admin and
through various processes to confirm to delete the record.So in order of
simplify the process the function is added which allow teachers to delete
desire records.

By clicking on this button the button will spawn a URL and link to the
delete.php

64
1.4.4.15 Action check

php

<a href='delete.php?action=delete&id=" . $row["id"] .

"'class='modify-button'>Delete</a>

Which store the id and the action of the record by get method.Refer to 1.4.4.7
Get method.

Then in the delete php it will connect to the database and proceed to delete sql
according to the id .

php

<?php
$servername = "sql110.infinityfree.com";
$username = "if0_37140943";
$password = "8RysHjQkRp7w";
$dbname = "if0_37140943_12";
…
?>
connect to the database refer to 1.2.4 Database table connection

php

$conn = new mysqli($servername, $username, $password, $dbname);

if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}

connection check refer to 1.2.5 Connection check

1.4.4.12 Action check

Then it captures the action and id from the UPL.Comparing to the previous get
method a action slot are created compared to all the normal collin.It is because
the delete function are a bit important compare to most of the process as
wrongly delete may face lose in data also create serval problems.So first of all
i bit of keeping the method of URL Capture target more stable and trust
able.The joining the action check will further ensure that the action of the URL
is to delete a record base on the record id.

65
php

$action = $_GET['action'] ?? '';

$id = $_GET['id'] ?? '';

php

if ($action == 'delete') {
$sql = "Update record set status = false WHERE id = '$id'";

if ($conn->query($sql) === TRUE) {

header ("Location:record.php");
} else {
echo "Error deleting record: " . $conn->error;
}
}

The highlighted part shows that only with two parts of ensurement to activate
the sql to delete records.

php

$sql = "Update record set status = false WHERE id = '$id'";

However you may wondering there are no delete or drop syntax are apply in
this sql,instead an update function is used.It is because directly deleting face a
large issus is that there are no regrets,if any ring of the process appear error
student records may be deleted accidentally so that instead of deleting
directory I design another way of removing data which is add another field to
identify a “deleted file” and a “ordinary file”.By switching their identify to
delete record provide a larger tolerant on technical error and user input
error,the wrongly deleted data can be regenerate as it wasnt really being
deleted.Refer to 1.4.3.8 Update record

66
1.4.4.16 Recover deleted record

Based on the above setting which shows that deleted record can be restored
by changing its status.

The restore menu can be open by clicking on the restore record button in the
bottom right corner of the webpage.Refer to 1.1.1.3 Linkage

html

<a href="https://sdsystem.000.pe/restore.php"
class='modify-button'>Restore<br>records</a>

67
1.4.4.17 Design for mobile status(restore page)

It shows that the table of restorable data are also responsible for adapting
different size of monitor.Refer to 1.4.3.3 Design for mobile status

68
1.4.4.18 Connect to database

In this situation of restoring record I designed that it will show all the
restorable record to users then user can decide to restore which one.As I
observe most of the website will restore all deleted record recently at once,
which is not user friendly and cost many problems,so I decided to show all
option and give autonomy on deciding which one to restore.
php

<?php
$servername = "sql110.infinityfree.com";
$username = "if0_37140943";
$password = "8RysHjQkRp7w";
$dbname = "if0_37140943_12";
…
?>
First of all connect the database by 1.2.4 Database table connection

php

$conn = new mysqli($servername, $username, $password, $dbname);

if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
A connection check to the php by 1.2.5 Connection check

php

$sql = "SELECT * FROM record Where status = false";

$result = $conn->query($sql);

It is used to select the deleted file and store it in a array by 1.2.8 Selection of
data

php

while($row = $result->fetch_assoc()) {
echo "<tr>
<td>" . $row["SID"] . "</td>
<td>" . $row["CCNO"] . "</td>

69
 <td>" . $row["NAMEC"] . "</td>
<td>" . $row["NAMEE"] . "</td>
<td>" . $row["Item"] . "</td>
<td>" . $row["description"] . "</td>
<td>" . $row["incident"] . "</td>
<td>" . $row["Tritial"] . "</td>
<td>" . $row["Tname"] . "</td>
<td>" . $row["DATE"] . "</td>

Refer to 1.4.3.4Connect to database to show record

1.4.4.19 Back button(restore form)

php

<a href='https://sdsystem.000.pe/record.php'class='modify-button'>Back</a>

Refer to 1.4.3.5 Back button

1.4.4.20 No deleted record

If this shows in the restore file means that no record are deleted recently
.Refer to 1.4.3.9 Good student

php

else {
echo "<div class='no-records'>No records found</div>";
}

70
1.4.4.21 Restore button

After showing users the restorable records you can restore the record by
clicking the restore button.

php

<a href='restore_record.php?action=restore&id=" . $row["id"] . "'

class='modify-button'>Restore</a></td>

after clicking it it will transfer the id and action to the restore_record.php using
the method get.Refer to 1.4.4.9 Get method

php

$servername = "sql110.infinityfree.com";
$username = "if0_37140943";
$password = "8RysHjQkRp7w";
$dbname = "if0_37140943_12";

$conn = new mysqli($servername, $username, $password, $dbname);

if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}

Same procedure as the above function from now on I will skip most of the
explanation.Refer to 1.2.4 Database table connection and 1.2.5 Connection
check

php

$sql = "Update record set status = true WHERE id = '$id'";

Then the sql of updating the status from deleted to normal.

71
php

if ($conn->query($sql) === TRUE) {

header ("Location:restore.php");
} else {
header ("Location:fail.php");
}

This loop ensure that the sql are successfully ran or else it will pop up fail
page.Refer to 1.4.4.10 Sql check

1.4.4.22 Add record

By clicking this button on the function bar of the teacher page it will redirect
you to the add record form which is used to add records for students.
Although it is unfortunate that students are required to add misbehaving
records, this function is one of the important pillars of the system.

html

<a class="btn btn-primary display-4"

href="https://sdsystem.000.pe/add_record.php">Add <br>Record</a>

After clicking the button it will redirect you to the add record form.This button
is link with it.Refer to 1.1.1.3 Linkage

72
● Student ID :Student ID is for to identify student
● Student class and class number:is to record class and class number
● Chinese name: Chinese name of the student.
● English name :English name of the student.
● Disciplinary actions: including reasonable scenarios for each action.
● Incident :Categories that match the disciplinary action.
● Description: Each record provides a brief, plausible explanation of the
disciplinary action taken.
● Tritial: Indicates whether the case is pending or resolved.
● Teacher name: Response teacher that records and decides the
punishment.
● Dates: date of committing the misbehavior .

73
1.4.4.23 Autocomplete

You see that to keep a full record of the incident committed by the student it
includes many fields to input which waste so much time so that an auto
complete function is added to assist the teacher to input faster and more
efficiently.This function are applied on Student id,Student name,teacher name,
class and class number.

74
For example, after typing some of the components of the desire option the
autocomplete function will guess your desire and try to help you complete the
inputting process.

1.4.4.24 Drop-down list

In the field disciplinary action and incident are designed with dropdown list as
the amount of disciplinary action and incident category limited in amount so
that it provide a drop down list to input accordingly.Which can unified the
misbehavior commit by student and unified to punishment to student to reach
a fair stage and a systemise the whole process.

incident:

html

<select id="item" name="Item">

<option value="">Select a disciplinary action</option>
<option value="verbal_warning">Verbal Warning</option>
<option value="written_warning">Written Warning</option>
<option value="suspension">Suspension</option>
<option value="termination">Termination</option>

75
 <option value="probation">Probation</option>
<option value="demotion">Demotion</option>
<option value="training">Training</option>
<option value="counseling">Counseling</option>
<option value="final_warning">Final Warning</option>
<option value="performance_improvement_plan">Performance
Improvement Plan</option>
<option value="reduction_in_pay">Reduction in life</option>
<option value="reassignment">Reassignment</option>

</select>

Using <select> to form a drop down list and the <option> will be the possible
option for users to choose .

Then it will link with insert_record.php to proceed the addition of data to the
database.

php

<?php
$servername = "sql110.infinityfree.com";
$username = "if0_37140943";
$password = "8RysHjQkRp7w";
$dbname = "if0_37140943_12";
…
?>
First of all connect the database by 1.2.4 Database table connection

php

$conn = new mysqli($servername, $username, $password, $dbname);

if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
A connection check to the php by 1.2.5 Connection check

76
php

$SID = $_POST["SID"];
$CCNO = $_POST["CCNO"];
$NAMEC = $_POST["NAMEC"];
$NAMEE = $_POST["NAMEE"];
$Item = $_POST["Item"];
$description = $_POST["description"];
$incident = $_POST["incident"];
$Tritial = $_POST["Tritial"];
$Tname = $_POST["Tname"];
$DATE = $_POST["DATE"];

The inputted data from the previous form will be extracted to the insert_record
.php by post and store in those variables.Refer to 1.2.6 Storing imputed data

php

$sql = "INSERT INTO record (SID, CCNO, NAMEC, NAMEE, Item,

description, incident, Tritial, Tname, DATE)
VALUES ('$SID', '$CCNO', '$NAMEC', '$NAMEE', '$Item', '$description',
'$incident', '$Tritial', '$Tname', '$DATE')";

The sql was used to import the data from the variables to the database,which
is a sql that adds records.

php

if ($conn->query($sql) === TRUE) {

header("Location:teacher.php");
} else {
header("Location:fail..php");
}

This loop ensure that the sql are successfully ran or else it will pop up fail
page.Refer to 1.4.4.10 Sql check

77
Flow Chart:

78
1.4.5 Disciplin teacher page

The title and logo are changed after logging in according to your access level.
Refer to 1.2.7 Access level .

Function bar

This bar represents the function that discipline teachers can apply including
approve appeal log out (1.4.3.1 log out)and reset password(refer to 1.3 Forget
password )

In Terms of my expectation this home page is a extra account for discipline

teacher, as you can see it only consist of only major function which is approve
appeal and I believe it is the only purpose of this account so that I expect that
this will be a additional account for discipline teacher to handle record appeal
and examine student whether or not with repentance.

79
1.4.5.1 Aprove appeal

By clicking this button on the function bar of the discipline teacher page it will
redirect you to the appeal record table which is used to approve or deny
appeal from students.

html

<a class="btn btn-primary display-4"

href="https://sdsystem.000.pe/approve_record.php">Add <br>Record</a>

After clicking the button it will redirect you to the appeal record table.This
button is link with it.Refer to 1.1.1.3 Linkage

1.4.5.2 Connect to database

In the situation of the appeal record table I designed ,it will show all the
records that request for appeal,Which allow the discipline teacher to decide
whether to approve their appeal or reject their appeal based on their
explanation.

80
php

<?php
$servername = "sql110.infinityfree.com";
$username = "if0_37140943";
$password = "8RysHjQkRp7w";
$dbname = "if0_37140943_12";
…
?>
First of all connect the database by 1.2.4 Database table connection

php

$conn = new mysqli($servername, $username, $password, $dbname);

if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}

A connection check to the php by 1.2.5 Connection check

php

$sql = "SELECT * FROM record Where appeal_status = true and status = true
and deny = false ";

It is used to select the files that are not deleted and are in appeal status also
haven been denied yet.

php

while($row = $result->fetch_assoc()) {
echo "<tr>
<td>" . $row["SID"] . "</td>
<td>" . $row["CCNO"] . "</td>
<td>" . $row["NAMEC"] . "</td>
<td>" . $row["NAMEE"] . "</td>

81
 <td>" . $row["Item"] . "</td>
<td>" . $row["description"] . "</td>
<td>" . $row["incident"] . "</td>
<td>" . $row["Tritial"] . "</td>
<td>" . $row["Tname"] . "</td>
<td>" . $row["DATE"] . "</td>
<td>" . $row["description_student"] . "</td>

Refer to 1.4.3.4Connect to database to show record

1.4.5.3 Back button

php

<a
href='https://sdsystem.000.pe/teacher.php'class='modify-button'>Back</a>

Refer to 1.4.3.5 Back button

1.4.5.4 Sliding button

Which convent used to slide left and right easier

Refer to 1.4.3.6 Sliding button

82
1.4.5.5 Flow Chart

83
1.4.5.6 Student explanation

A new field has been added into this table,which is different from the teacher
version and student version.It will show the paragraph written by the student
in the appeal form, and the teacher can determine whether to reject or approve
their appeal by their explanation.

● It is shown that the short one is a bad example,in my

opinion the explanation should include details and proof of
how you learn a lesson so that they can improve.
● The explanation below is a better explanation; it
shows his regret and determination to change.

84
1.4.5.7 Approval button

html

<a href='delete(admin).php?action=delete&id=" . $row["id"] .

"'class='modify-button'>Approve</a>

Although it is called approve but in other words it means that discipline

teachers are now approve to remove your record, so that I link the button with
the delete php in order to remove the record to show the approval.Refer to
1.4.4.14 Delete record

1.4.5.8 Deny button

html

<a href='denie.php?action=denied&id=" . $row["id"] .

"'class='modify-button'>Denie</a>

By clicking on this button the button will spawn a URL and link to the deny.php

85
1.4.5.9 Connect to database

php

<?php
$servername = "sql110.infinityfree.com";
$username = "if0_37140943";
$password = "8RysHjQkRp7w";
$dbname = "if0_37140943_12";
…
?>
Connect to the database refer to 1.2.4 Database table connection

php

$conn = new mysqli($servername, $username, $password, $dbname);

if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}

connection check refer to 1.2.5 Connection check

php

$action = $_GET['action'] ?? '';

$id = $_GET['id'] ?? '';

Which store the id and the action(refer to 1.4.4.15 Action check ) of the record
by get method.Refer to 1.4.4.7 Get method.

php

if ($action == 'deneid') {
// Prepare the SQL statement
$sql = "Update record set denie = true WHERE id = '$id'";

// Execute the SQL statement

86
 if ($conn->query($sql) === TRUE) {
header ("Location:approve_record.php");
} else {
header ("Location:fail.php");
}
}

After ensuring the correctness of the action it proceeds the sql which will set
the field denie as positive which identified that this record are already
appealed and being rejected.

1.4.5.10 No appeal

If this shows means that there are no any appeal recently.Refer to 1.4.3.9 Good
student

php

else {
echo "<div class='no-records'>No records found</div>";
}

87
1.4.5.11 Rejected

After being rejected the “Rejected” will be shown in the record table in the
student account.

php

if ($row["denie"] == false) {
if ($row["appeal_status"] == false) {
echo "<a href='approval_form.php?action=appeal&id=" . $row["id"] . "
class='modify-button'>Appeal</a>";
} else {
echo "Appeal Submitted";}
} else{
echo "Rejected";
}

A if loop is formed,if denie is true(denied) the “Rejected” will be shown and if

appeal_status is true(appealed) the “Appeal Submitted “ will show only
records without appeal and rejected will be shown. This setting is to avoid
multi appeal and appeal after being rejected.Which let students understand
that appeal is very precious, it is a must to pay 100% concentration on
finishing it .

88
1.4.6 Admin

The title and logo are changed after logging in according to your access level.
Refer to 1.2.7 Access level .

Admin is crucial in managing and overseeing the functionality of various

systems within an organization. Admins are responsible for maintaining user
accounts, ensuring data security, and implementing access controls to
safeguard sensitive information. They monitor system performance,
troubleshoot issues, and provide technical support to users, ensuring that
operations run smoothly.

Functional bar

This bar represents the function that students can apply including checking
records, restoring deleted record,logout ,add record,register ,approve appeal
and reset password(refer to 1.3 Forget password )In additionally admin have
every function that every role have.

89
1.4.6.1 log out

Refer to 1.4.3.1 log out

1.4.6.2 Admin Check record

Refer to 1.4.4.2 Check record(teacher version)

1.4.6.3 Aprove appeal

Refer to 1.4.5.1 Approve appeal

1.4.6.4 Add record

Refer to 1.4.4.22 Add record

1.4.6.5 Recover deleted record

Refer to 1.4.4.16 Recover deleted record

1.4.6.6 Delete record

Refer to 1.4.4.14 Delete record

1.4.6.7 Modify record

Refer to 1.4.4.8 Modify record

1.4.6.8 Add account

Add accounts are the unique ability that only admin can proceed.This system
is for the regulation of discipline records of students,which means that it will
serve the school.So that outsider should not be able to register and join our
system.As admin are response for the regulation of the system so that adding
account will be one of it’s essential function.

By clicking add account it will redirect you to the account register form which
will be able to add the account in to the database.

90
html

<a class="btn btn-primary display-4"

href="register_form.php">Add<br>Account</a>

● Name: the account name

● Email: the email of the owner of the account
● Password :code to input in order to login
● Confirm password: Data verification ensure the password is correct
● Access level: Setting the role of the account.

91
1.4.6.9 Connect to database

php

<?php
$servername = "sql110.infinityfree.com";
$username = "if0_37140943";
$password = "8RysHjQkRp7w";
$dbname = "if0_37140943_12";
…
?>
Connect to the database refer to 1.2.4 Database table connection

php

$conn = new mysqli($servername, $username, $password, $dbname);

if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}

connection check refer to 1.2.5 Connection check

1.4.6.10 Password confirm name

php

if ($password !== $confirmPassword) {

echo "Passwords must match.";
header ("Location:fail.php");
}

It used to check whether the password and confirm password if not stop the
whole process and notify the user then switch to the fail page. By requiring
users to input their password twice, it helps ensure that they have typed it
correctly. This is particularly important because passwords are often
case-sensitive and can contain various characters.

92
1.4.6.11 Salt

php

$salt = bin2hex(random_bytes(16));
$salted_password = $salt . $password;
$hashed_password =
password_hash($salted_password,PASSWORD_DEFAULT);

To ensure security password are being hashed,it is a irreversible way to

encrypt the password however if two people having a same password their
hash value will be the same so that it is not secure enough.The adding of
salt(random number) before hashing can solve the problem mentioned
above,by adding a random number the security measure will be very high.

php

$sql = "SELECT * FROM users WHERE name = '".$name."'";

$result = $conn->query($sql);

It is use to find is their any repeated user name in the database,if it is positive
according to the php under the retry.php will pop out to inform you.Which is
use to ensure no users are with same names to prevent chaos on identifying

retey.php:

93
 php

if ($result->num_rows > 0) {
header("Location:retry.php");
} else {$sql = "INSERT INTO users (name, email, password,salt,access_level)
VALUES ('$name','$email',$hashed_password,'$salt','$accessLevel')";}

If the user name are not repeated the sql will run, which will insert the inputted
data to the database.$hashed_password(already mix with salt)

php

if($conn->query($sql) === TRUE) {

header("Location:admin.php");
} else {
header ("Location:fail.php")
}

If the query fails it will redirect you to the fail page to notify you to retry.

1.4.6.11 Back button

php

<a href='https://sdsystem.000.pe/admin.php'class='modify-button'>Back</a>

Refer to 1.4.3.5 Back button

94
1.4.6.12 Flow Chart

95
1.5.5 Cut connection

96
php

$conn->close();

This is one of the most commonly used php code which is used to break the
connection between the script and the database after it’s work.It is very
essential and important. While my programming I alway make mistakes with
creating endless loop.Result is fully occupied with the resources of the server
,which cause me many lessons of being banned due to the abuse of
resources.So that all of the end of my code include this sentence at last.

97
Reference
Thank you for providing me help in the presentation of my report and the
operation of website

Picture:
https://www.avg.com/en/signal/deactivate-or-delete-facebook-account
https://iboysoft.com/data-recovery/recover-deleted-files.html
https://iboysoft.com/data-recovery/recover-deleted-files.html
https://kinsta.com/knowledgebase/what-is-html/
https://www.researchgate.net/figure/Password-verification-flowchart-showing-
how-the-users-password-is-compared-to-its_fig48_339952762
https://www.tibco.com/glossary/what-is-data-validation
https://www.phptutorial.net/php-tutorial/php-prg/
https://medium.com/@sujoy.swe/database-connection-pool-647843dd250b
https://media.geeksforgeeks.org/wp-content/uploads/20220823185238/saltedpa
sswordhashing.jpg
/w:1200/aHR0cHM6Ly9jZG4uaW5mb2RpYWdyYW0uY29tL2MvMzU3YTY3L2Zsb
3ctY2hhcnQud2VicA

knowledge reference:
https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/What_is
_JavaScript
https://www.techtarget.com/whatis/definition/PHP-Hypertext-Preprocessor
https://www.w3schools.com/

website building sever:

https://dash.infinityfree.com
database server:
https://php-myadmin.net/index.php

98
Flow chart drawing:
https://www.edrawmax.com/online/en/

Java coding:
https://jsfiddle.net/

General knowledge based support :

https://poe.com/

99