FAKULTI TEKNOLOGI DAN KEJURUTERAAN

ELEKTRONIK DAN KOMPUTER

UNIVERSITI TEKNIKAL MALAYSIA MELAKA

APPLICATION SYSTEM DEVELOPMENT I

BERL 2232 SEMESTER 2 SESI 2023/2024

LAB 9: DEVELOPING WEB-BASED DATABASE APPLICATION

DATE

1.
NAME OF GROUP MEMBERS &
MATRIC NUMBER
2.

NAME OF INSTRUCTOR Ts. DR. NORFADZLIA BINTI MOHD YUSOF

EXAMINER’S COMMENT VERIFICATION STAMP

TOTAL MARKS
1.0 OBJECTIVES
After completing this lab, student should be able to:
 Familiar with XAMPP Server applications for web development.
 Apply PHP as a programming language and MySQL as database manager.
 Write PHP codes and run in htdocs directory of Apache server
 Create a table, column, edit and delete function.

2.0 EQUIPMENT
1. Personal Computer.
2. XAMPP Server Software (Apache Server and MySQL Server).
3. Visual Studio Editor or Notepad++Text Editor Software.

3.0 TUTORIAL REFERENCES

1. HTML Tutorial https://www.w3schools.com/html/
2. CSS Tutorial https://www.w3schools.com/css/default.asp
3. PHP Tutorial https://www.w3schools.com/php/default.asp

4.0 SYNOPSIS & THEORY

HyperText Markup Language (HTML) and Cascading Style Sheets (CSS)
HTML is the language in which most websites are written. HTML is used to create pages
and make them functional. The code used to make them visually appealing is known as
CSS. CSS is used to format the layout of a webpage. CSS can control the color, font, the
size of text, the spacing between elements, how elements are positioned and laid out,
what background images or background colors are to be used, different displays for
different devices and screen sizes, and much more.

XAMPP server
XAMPP is an open-source software package that provides a local web server
environment for testing and development. It helps you test web applications locally
before deployment, ensuring they function correctly on a live server.
 In this lab, student will be using XAMPP server as a web development platform. The
PHP codes will be analysed by the student to get an expected result. All the PHP codes
must be written correctly to avoid any error occur.

To get started, student will be exposing on how to:

1) Familiar with phpMyAdmin database
2) Update column/fields name

There are two ways the browser client can send information to the web server.

 The GET Method

 The POST Method
Before the browser sends the information, it encodes it using a scheme called URL
encoding. In this scheme, name/value pairs are joined with equal signs and different pairs
are separated by the ampersand.
name1=value1&name2=value2&name3=value3

Spaces are removed and replaced with the + character and any other nonalphanumeric
characters are replaced with a hexadecimal values. After the information is encoded it is
sent to the server.

The GET Method

The GET method sends the encoded user information appended to the page request. The
page and the encoded information are separated by the ? character.
http://www.test.com/index.htm?name1=value1&name2=value2

 The GET method produces a long string that appears in your server logs, in the
browser's Location: box.
 The GET method is restricted to send upto 1024 characters only.
 Never use GET method if you have password or other sensitive information to be
sent to the server.
 GET can't be used to send binary data, like images or word documents, to the
server.
 The data sent by GET method can be accessed using QUERY_STRING
environment variable.
 The PHP provides $GET associative array to access all the sent information using
GET method.
 The POST Method
The POST method transfers information via HTTP headers. The information is encoded
as described in case of GET method and put into a header called QUERY_STRING.
 The POST method does not have any restriction on data size to be sent.
 The POST method can be used to send ASCII as well as binary data.
 The data sent by POST method goes through HTTP header so security depends on
HTTP protocol. By using Secure HTTP you can make sure that your information
is secure.
 The PHP provides $_POST associative array to access all the sent information
using POST method.

5.0 PROCEDURE
Section 1: Introduction to XAMMP server

1. Run the program “xampp-control.exe” in D:\xampp folder.

2. XAMPP control panel will appear as illustrated in following figure.

3. Click “start” button for both Actions for Apache and MySQL to start the servers.
4. Windows Security Alert will appear to ask for permission to open some port in the
computer. Click on “Allow Access”. The XAMPP control panel will display if the server
started successfully with GREEN colour indication in the background.
5. If there is “lab4” folder in the folder “..\xampp\htdocs”, delete it first.
6. Create a new folder named as “lab4” within folder “..\xampp\htdocs”.
7. Click Admin button of MySQL on XAMPP control. The result is as follows:

8. Click on Databases tab in order to create a new database. The window appears as shown
below:
9. Give your database a name in the empty box under ‘Create database’. The name should
be lab6. Scroll through the drop button beside collation and select utf8_general_ci. The
result is as follows:

Then, click the Create button.

You’ll notice that your new database had been added into the list and in the left panel of
your phpMyAdmin window.

10. Click on lab9 at the left panel of the phpMyAdmin and Structure tab will be shown. In
this tab you can create new table.

11. Create College and Student tables with following requirements.

Table 1: College table

Name Type Length/Values Property

college_id VARCHAR 3 Primary key, Not null
college_name VARCHAR 45 Not null
 Table 2: Student table

Name Type Length/Values Property

student_id INT Primary key, Not null, Auto-
increment
student_name VARCHAR 45 Not null
college_id VARCHAR 3 Foreign key, DEFAULT = 000

Business rules:
A COLLEGE can be stayed by many STUDENT, each STUDENT may stay in a COLLEGE.

To create foreign key in Student table, click on Student table, and in Structure tab click Relation
view.

Show the College and Student tables’ structure including Foreign key:
College table

Student table
12. Click on Insert tab and key-in below data into each table. To display all the inserted
records click on Browse tab.
Table 3: College data

college_id college_name
000 Outsider
C01 Satria
C02 Melati
C03 Perkasa
C04 Kemboja

Table 4: Student data

student_id student_name College_id

1 Faris C01
2 Harith C01
3 Aisyah C02
4 Hanim C04
5 Vincent C03
6 Chong C01
 7 Lim C03
8 Jessica 000
9 Ganesh 000
10 Rahim 000

Click on a particular table and click on Browse tab to see the records. Paste your output here.
Collage table

Student table

Section 2: Build HTML page

1. Go to Drive\xampp\htdocs.
2. Create new folder name lab9.
3. Open Notepad++. Create a new file and save it as index.html in Drive\xampp\htdocs\lab9.
4. Write the code below in the index.html file and save it.
<!DOCTYPE html>
<html>
<head>
<title>Database Access</title>
</head>
<body>
<h1>Example of Database Application</h1>
<a href="addStudent.php">Add New Student</a>
<br><br>
<table border="1"> <!-- create table -->
<caption>Student records</caption>
<tr> <!-- create table row with 5 columns with
specific table header -->
<th>No.</th>
<th>Student ID</th>
<th>Student Name</th>
<th>College Id</th>
<th>Action</th>
</tr>
</table>

<br><br>

<a href="addCollege.php">Add New College</a>

<br><br>

<table border="1"> <!-- create table -->

<caption>College records</caption>
<tr> <!-- create table row with 4 columns with
 specific table header -->
<th>No.</th>
<th>College Id</th>
<th>College Name</th>
<th>Action</th>
</tr>
</table>

</body>
</html>

5. To view the webpage, open your preferable browser and type in the following URL.
http://127.0.0.1/lab9
The browser will automatically search for the index file and display it. Index file act as a
startup page for a website. The index page is the URL or local file that automatically loads
when a web browser starts and when the browser's 'home' button is pressed. The term is also
used to refer to the front page, web server directory index, or main web page of a website.

Show the index.html page in the browser:

 Section 4: Build CSS file
1. Create a new file in Notepad++ and save as mystyle.css (Cascade Style Sheets File)
2. Now we are adding the CSS file for adjusting the color of some components. Write codes
below and save in the same folder as it will be called from index.html:
body
{
background-color: #defacd;
}

h1
{
font-size:1.4em;
color: #06657a;
}

a
{
color: #008000;
}

th
{
padding-right: 5px;
text-align: left;
background-color: #9fbd08;
color: #eff7c3;
}

td
{
padding-right: 5px;
text-align: left;
background-color: #eefab1;
color: #5c6e05;
}

3. Insert the CSS file for adjusting components in the index.html file and save it. Define the
external style within the <link> element, inside the <head> section of the index.html. The
external style CSS is efficient since the file can be use in other pages as well. Refresh the
browser to see the effect.
<link rel="stylesheet" href="mystyle.css">

Show the output:

Section 3: Build PHP page

a) Accessing MySQL database using PHP
1. Create a new file in Notepad++ and save it as db_connect.php in Drive\xampp\lab9. Write
the following PHP codes:
<?php
$host = "127.0.0.1";
$username = "root";
 $password = "";
$databasename = "lab9";

// Create connection
$connection = new mysqli($host, $username, $password,
$databasename);

// Check connection
if ($connection -> connect_error) {
die("Connection failed: " . $connection->connect_error);
}
?>

2. Check the $host, $username, $password at Privileges menu and make sure it’s the same
with the following example:
3. To test the script, use a browser and type the either on the below URLs:
 http://127.0.0.1/lab9/db_connect.php or
 http://localhost/lab9/db_connect.php

Show the output:

b) Query/Read data from database and display records in the webpage.

1. In the index.html page, you should display the Student records and College records from the
database. To access the data from database you should add a PHP scripts in the index.html
table and rename the file as index.php. If not the script will not works.
2. At the top of index.php page insert the PHP scripts to include db_connect.php file that
contain the scripts to make connection to MySQL database.
<?php
include "db_connect.php";
?>

<!DOCTYPE html>
<html>
<head>
<title>Database Access</title>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>Example of Database Application</h1>
<a href="addStudent.php">Add New Student</a>
<br><br>
<table border="1"> <!-- create table -->
<caption>Student records</caption>
<tr> <!-- create table row with 5 columns with
specific table header -->
<th>No.</th>
<th>Student ID</th>
<th>Student Name</th>
<th>College Id</th>
<th>Action</th>
</tr>
<tr>
<?php
$j = 0;
$sql = "SELECT * FROM student ORDER BY student_id";
$result = $connection -> query($sql);
 if ($result !== false && $result->num_rows > 0)
{
while ($row = $result->fetch_assoc())
{
echo "<tr><td>";
echo $j+1;
echo "</td>";
echo "<td>";
echo $row["student_id"];
echo "</td>";
echo "<td>";
echo $row["student_name"];
echo "</td>";
echo "<td>";
echo $row["college_id"];
echo "</td>";
echo"<td>";
echo "<a href=\"deleteStudent.php?student_id=" .
$row['student_id'] . "\"" . ">Delete</a>";
echo "/";
echo "<a href =\"editStudent.php?student_id=" .
$row['student_id'] ."\"" . ">Edit</a>";
echo "</td></tr>\n";
$j++;
}
} else {
echo "0 results";
}
?>
</tr>
 </table>

<br><br>

<a href="addCollege.php">Add New College</a>

<br><br>

<table border="1"> <!-- create table -->

<caption>College records</caption>
<tr> <!-- create table row with 4 columns with
specific table header -->
<th>No.</th>
<th>College Id</th>
<th>College Name</th>
<th>Action</th>
</tr>
<tr>
<?php
$j = 0;
$sql = "SELECT * FROM college ORDER BY college_id";
$result = $connection -> query($sql);

if ($result !== false && $result->num_rows > 0)

{
while ($row = $result->fetch_assoc())
{
echo "<tr><td>";
echo $j+1;
echo "</td>";
echo "<td>";
 echo $row["college_id"];
echo "</td>";
echo "<td>";
echo $row["college_name"];
echo "</td>";
echo"<td>";
echo "<a href=\"deleteCollegeOperation.php?collegeId="
. $row['college_id'] . "\"" . ">Delete</a>";
echo "/";
echo "<a href =\"editCollege.php?collegeId=" .
$row['college_id'] ."\"" . ">Edit</a>";
echo "</td></tr>\n";
$j++;
}
} else {
echo "0 results";
}
$connection->close(); //Close connection to MySQL database
?>
</tr>
</table>

</body>
</html>

Display output of index.php:

c) Add new record in College table in the database from webpage.
1. Create new file in Notepad++ and save it as addCollege.php in Drive\xampp\htdocs\lab9
folder.
<html>
<head>
<title>Add New College</title>
<link rel="stylesheet" href="mystyle.css">
 </head>
<body>
<h1> Add New College</h1>
<form action="insertCollegeOperation.php" method="POST">
<table>
<tr>
<tr>
<td>College id</td>
<td>:</td>
<td><input type="text" name="collegeId"
size="3"></td>
</tr>
<tr>
<td>College name</td>
<td>:</td>
<td><input type="text" name="collegeName"
size="45"></td>
</tr>
<tr>
<td></td><td></td>
<td><input type="submit" value="Add New College"> <a
href="index.php">Back</a> </td>
</tr>
</table>
</form>
</body>
</html>

Paste the output of addCollege.php page:

3. Create PHP file to execute the insert operation. The script should contain a SQL
statement to insert data into college table. Write the code below and save it as
insertCollegeOperation.php into Drive\xampp\htdocs\lab9 folder.
<?php
include "db_connect.php";
$collegeId = $_POST['collegeId'];
$collegeName = $_POST["collegeName"];

$sql = "INSERT INTO college(college_id, college_name) " .

"VALUES ('$collegeId','$collegeName')";

$query = $connection->query($sql) or
die ("Problem in storing the new record.");
if($query)
{

echo "<script
language=\"JavaScript\">document.location=\"index.php\"</script
>";

}
?>

4. Add the following new college records.

 College College name
id
C05 Pertiwi
C06 Mawar

Display the output of index page after insertion operation:

d) Update record in College table from webpage.

1. Create a new file in Notepad++ and name it as editCollege.php. Write the code below and
save it in Drive\xampp\htdocs\lab9 folder.
<?php
include "db_connect.php";
$collegeId = $_GET['collegeId'];
 $sql = "SELECT * FROM college WHERE college_id =
'$collegeId'"; //get the student_id send from index.php page.
Example request http://127.0.0.1/lab4/delete.php?student_id=1
$query = $connection->query ($sql);
if ($row = $query->fetch_assoc())
{
$collegeId = $row['college_id'];
$collegeName = $row['college_name'];
}
?>
<html>
<head>
<title>Edit College Information</title>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>Update College</h1>
<form method="POST" action="updateCollegeOperation.php">
<br>
<table>
<tr>
<td>College id</td>
<td>:</td>
<td><input type="text" name="collegeId" value="<?php
echo $collegeId?>" size='3' readonly></td>
</tr>
<tr>
<td>College name</td>
<td>:</td>
<td><input type="text" name="collegeName" value="<?php
echo $collegeName?>" size='45'></td>
 </tr>
<tr>
<td></td>
<td></td>
<td><input type="submit" value="Update College"/> <a
href="index.php">Back</a> </td>
</tr>

</table>
<form>
</body>
</html>

2. Create PHP file to execute the update operation. The script should contain a SQL statement
to update data in the college table. Write the code below and save it as
updateCollegeOperation.php into Drive\xampp\htdocs\lab9 folder.
<?php
include "db_connect.php";

$collegeId = $_POST['collegeId'];
$collegeName = $_POST['collegeName'];

$sql = "UPDATE college SET college_name='$collegeName' WHERE

college_id = '$collegeId'";

$query = $connection->query($sql)or
die ("Problem in updating the student data");
if($query)
{

echo "<script
 language=\"JavaScript\">document.location=\"index.php\"</script
>";
}
?>

3. Update the record as below:

College College name
id
C06 Mawar 1
Display the output of index.php page after updating operation:
e) Delete record in College table from webpage.

1. Create a new file in Notepad++ and name it as deleteCollegeOperation.php. Write the code
below and save it in Drive\xampp\htdocs\lab9 folder.
<?php
include "db_connect.php";

$collegeId = $_GET['collegeId'];
$sql = "DELETE FROM college WHERE college_id = '$collegeId'";

$query = $connection->query($sql) or
die ("Problem in deleting the student data");
if($query)
{
echo "<script
language=\"JavaScript\">document.location=\"index.php\"</script
>";
}
?>

Show the output after delete operation in index.php page.

f) Add new record in Student table in the database from webpage.
1. Create new file in Notepad++ and save it as addStudent.php in Drive\xampp\htdocs\lab9
folder.
<!DOCTYPE html>
<html>
<head>
<title>Add New Student</title>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1> Adding a New Student</h1>
<form action="insertStudentOperation.php" method="POST">
<table>
<tr>
<tr>
<td>Student name</td>
<td>:</td>
<td><input type="text" name="studentName"
size="45"></td>
</tr>
<tr>
<tr>
<td>College name</td>
<td>:</td>
<td>
<select name="collegeId" id="collegeId">
 <option value="000">Outsider</option>
<option value="C01">Satria</option>
<option value="C02">Melati</option>
<option value="C03">Perkasa</option>
<option value="C04">Kemboja</option>

</select>
</td>
</tr>
<tr>
<td></td><td></td>
<td><input type="submit" value="Add New Student"> <a
href="index.php">Back</a> </td>
</tr>
</table>
</form>
</body>
</html>

2. What happen when you add new college? Will the listbox will be updated? We need to
improvise the code for select college to keep updated with recent college data.

<?php
include "db_connect.php";

$sql = "SELECT * from college";

$result = $connection->query($sql) or
die ("Problem in selecting college data");
?>
<!DOCTYPE html>
<html>
<head>
<title>Add New Student</title>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1> Adding a New Student</h1>
<form action="insertStudentOperation.php" method="POST">
<table>
<tr>
<tr>
<td>Student name</td>
<td>:</td>
<td><input type="text" name="studentName"
size="45"></td>
</tr>
<tr>
<td>College name</td>
<td>:</td>
<td>
<select name="collegeId" id="collegeId">
<?php

if ($result !== false && $result->num_rows >

0)
{
while ($row = $result->fetch_assoc())
{
echo "<option value=\"" .
$row['college_id'] . "\">" .$row['college_name']. "</option>";
 }
}
?>
</select>
</td>
</tr>
<!--
<tr>
<td>College name</td>
<td>:</td>
<td>
<select name="collegeId" id="collegeId">
<option value="000">Not stay in
college</option>
<option value="C01">Satria</option>
<option value="C02">Melati</option>
<option value="C03">Perkasa</option>
<option value="C04">Kemboja</option>

</select>
</td>
</tr>
-->

<tr>
<td></td><td></td>
<td><input type="submit" value="Add New Student"> <a
href="index.php">Back</a> </td>
</tr>
 </table>
</form>
</body>
</html>

Paste the output of addStudent.php page:

6.0 NOTES
For College selection you can use dropdown list to display the college name. Refer to
https://www.w3schools.com/tags/tag_select.asp for tutorial.

Example code 1:

<select name="collegeId" id="collegeId">

<option value="000">Not stay in college</option>
<option value="C01">Satria</option>
<option value="C02">Melati</option>
<option value="C03">Perkasa</option>
<option value="C04">Kemboja</option>
</select>

Output:
 Example code 2:

<select name="collegeId" id="collegeId">

<option value="000">Not stay in college</option>
<option value="C01">Satria</option>
<option value="C02" selected>Melati</option>
<option value="C03">Perkasa</option>
<option value="C04">Kemboja</option>
</select>

Output:

7.0 QUESTIONS
1. Complete add, update and delete pages for Student records following the given example
in the lab sheet.
 index.php
 insertStudentOperation.php
 editStudent.php
 updateStudentOperation.php
 deleteStudentOperation.php

2. Modify the Student records in index.php page to display College name instead of College
id in Student table. Tips: Use INNER JOIN keyword

Before After
For submission, upload the updated lab sheet, lab9 database SQL script (generate at Export tab),
and source code (compressed lab9 folder in the Drive\xampp\htdocs folder).