Lab Manual for Introduction to Database

Lab 7:View, Update and Delete Operation using web interface

 Lab 7:View, Update and Delete Operation using Web Interface

Contents

1. Introduction 3

2. Activity Time boxing 3

3. Objective of the experiment 3

4. Concept Map 3

4.1 Create Database Connection 3

4.2 Operation 4

5. Tools 4

5.1 Setting-up and Setting up XAMPP (MySQL, Apache) [Expected time = 5mins] 4

6. Walkthrough Task [Expected time = 30mins] 4

6.1 First Insert Operation: 8

6.2 View Inserted Data: 10

6.3 Delete Inserted Data: 11

6.4 Updating Existing Records: 13

7. Evaluation Criteria 17

8. Practice Tasks 17
a. Task 01 17
b. Outcome 17

9. Evaluation Task (Unseen) [Expected time = 60 mins] 17

10. Evaluation Criteria 17

11. Further Reading 17

• http://www.htmlcodetutorial.com/ 18

Department of Computer Science, Page 2

C.U.S.T
 Lab 7:View, Update and Delete Operation using Web Interface

Lab 7: View, Update and Delete Operation using Web Interface

1. Introduction
As you have remember about the insert operation which we have done in lab 4, now in this lab,
we will perform Complete CRUD operation.

2. Activity Time boxing

Table 1: Activity Time Boxing

Task No. Activity Name Activity time Total Time

6.2 Setting-up and Setting Up 20mins 20mins
XAMPP (MySQL, Apache)
6.3 Walkthrough Tasks 90min 90mins
7 Practice tasks 50 mins 50mins

3. Objective of the experiment

• To learn about the CRUD operation using web interface.

4. Concept Map
For CRUD operation we have used the student database which we have created in lab 4. Now
first we established a connection then we performed all the operation.

4.1 Create Database Connection

For set up a connection to the database, use the function mysqli_connect. This function returns a
pointer (also known as a database handle) to the database connection. This handle will be used in the
code later on. Once you have the handle, remember to add your database credentials (servername,
username ,password, databasename).
Create a new php file and name it db_connnection.php and save it. Why am I creating a separate
database connection file? Because if you have created multiple files in which you want to insert data
or select data from the databases, you don’t need to write the code for database connection every
time. You just have to include it by using PHP custom function include (include ‘connection.php’) on
the top of your code and call its function and use it.

<?php
$servername = "localhost";
$username = "username";
$password = "password";
$databasename=”database name”;
// Create connection
$conn = mysqli_connect($servername, $username, $password,$databasename);

// Check connection
Department of Computer Science, Page 3
C.U.S.T
 Lab 7:View, Update and Delete Operation using Web Interface

if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
echo "Connected successfully";
?>

4.2 Operation
In a walkthrough section we have performed all CRUD operation using web interface.

5. Tools
In this section tools installation and setup is defined.
• Computer
• Microsoft Windows 10 operating system
• Internet Browser(Internet Explorer, Mozilla Firefox or Google Chrome etc.)
• Notepad

5.1 Setting-up and Setting up XAMPP (MySQL, Apache) [Expected time = 5mins]

Refer to Lab 1 sec 6.2.

For creating PHP project move to C:\xampp\htdocs and perform tasks of PHP using notepad

6. Walkthrough Task [Expected time = 30mins]

In this task you can learn how to create a simple web application using PHP.For this we have to
perform insert operation in student_info table of Student_db database.
1) Move to<Drive>\xampp\htdocs

2) Create a Folder WalkthroughTaskon <Drive>\xampp\htdocs drive

3) Open any text editor and first create db_connnection.php

Department of Computer Science, Page 4

C.U.S.T
 Lab 7:View, Update and Delete Operation using Web Interface

Output :

4) Write the following HTML code in it and save the file with name first.php

HTML Code Section:

Department of Computer Science, Page 5

C.U.S.T
 Lab 7:View, Update and Delete Operation using Web Interface

5) Create a new file for CSS and save with name style.css

Department of Computer Science, Page 6

C.U.S.T
 Lab 7:View, Update and Delete Operation using Web Interface

Now the output of our form is like that:

Department of Computer Science, Page 7

C.U.S.T
 Lab 7:View, Update and Delete Operation using Web Interface

Figure 1: Html Form

6.1 First Insert Operation:

6) For php code create file with phpcode.php

Figure 2:PHP Code

Input:

Department of Computer Science, Page 8

C.U.S.T
 Lab 7:View, Update and Delete Operation using Web Interface

Figure 3: Give Input

Output:

Figure 4: Table Data

Department of Computer Science, Page 9

C.U.S.T
 Lab 7:View, Update and Delete Operation using Web Interface

6.2 View Inserted Data:

To view the inserted data, you have to add the below code in first.php file after form and
before end body tag.

Figure 5: View Data

Output:

Figure 6: Output of View Operation

Department of Computer Science, Page 10

C.U.S.T
 Lab 7:View, Update and Delete Operation using Web Interface

6.3 Delete Inserted Data:

For deleting record first you have to create a delete button. For this you will modify first.php
file. For creating button just add a single line of code in first.php like shown in figure.

Figure 7: Add Delete Button

Output:

Figure 8: Show Delete Button

Department of Computer Science, Page 11

C.U.S.T
 Lab 7:View, Update and Delete Operation using Web Interface

After creating the delete button delete action code in process.php file like shown in figure:

Figure 9: Add Delete Action Code

Output:
Now you can see record 3 and 5 deleted just by clicking delete button.

Figure 10: Data after Deletion Operation

Department of Computer Science, Page 12

C.U.S.T
 Lab 7:View, Update and Delete Operation using Web Interface

6.4 Updating Existing Records:

Same as delete, first create a Edit button by modifying the first.php code as shown in figure.

Figure 11: Creating Edit Button

Output:

Department of Computer Science, Page 13

C.U.S.T
 Lab 7:View, Update and Delete Operation using Web Interface

Figure 12: Show Delete Button

After creating edit button, now when we click on edit button the current row data will place in
form for editing and save button replace by update button. For this we have to modify the
first.php file like shown in figure.

Figure 13: Update Code

Department of Computer Science, Page 14

C.U.S.T
 Lab 7:View, Update and Delete Operation using Web Interface

Output:

Figure 14: Update Form

Now update the data in update form and click on Update button. To update the data in
database you must add update code in process.php file like shown in figure.

Department of Computer Science, Page 15

C.U.S.T
 Lab 7:View, Update and Delete Operation using Web Interface

Figure 15: Update Button Code

We have updated the address of a Hassan student, replace Islamabad by Lahore and clicked on
update button. The data updated successfully in database which is shown in figure.

Figure 16: Update Output

Department of Computer Science, Page 16

C.U.S.T
 Lab 7:View, Update and Delete Operation using Web Interface

7. Evaluation Criteria
The evaluation criteria for this lab will be based on the completion of the following tasks. Each
task is assigned the marks percentage which will be evaluated by the instructor in the lab whether
the student has finished the complete/partial task(s).

Table 2: Evaluation of the Lab

Sr. No Task No. Task Description Grade
1 7 Practice task 20
2 - Unseen Task 80

8. Practice Tasks

a. Task 01
First you will create an Employee database and employee information table. Then you have to
create an interface for taking input employee information and save them in database.

b. Outcome
After completing this lab, students will be able to perform some functionality using PHP and also
understand the concept of web application development using PHP.

9. Evaluation Task (Unseen) [Expected time = 60 mins]

The lab instructor will give you unseen task depending upon the progress of the class.

10. Evaluation Criteria

The evaluation criteria for this lab will be based on the completion of the following tasks. Each task is
assigned the marks percentage which will be evaluated by the instructor in the lab whether the student has
finished the complete/partial task(s).
Table 3: Evaluation of the Lab
Sr. No. TaskNo Description Marks

1 6 ProceduresandTools 0
2 7.1 Practicetask1withTesting 15
5 8 EvaluationTasks(Unseen) 80
6 GoodProgrammingPractices 5

TotalMarks 100

11. Further Reading

HTML W3 Tutorial
• http://www.w3schools.com/html/
HTML code Tutorial

Department of Computer Science, Page 17

C.U.S.T
 Lab 7:View, Update and Delete Operation using Web Interface

• http://www.htmlcodetutorial.com/

Department of Computer Science, Page 18

C.U.S.T