PHP & MYSQL
DATABASE-
CONNECTION LAB
(CSE370 LAB 06)
BORSHON ADNAN
BSC THEORETICAL PHYSICS (UNIVERSITY OF YORK)
MSC COMPUTER SCIENCE AND ARTIFICIAL INTELLIGENCE
(UNIVERSITY OF KENT)
LESSON OBJECTIVES
• Establish a MySQL database connection using PHP.
• Create an HTML form to interact with the database.
• Implement Tasks 1–6 from the lab instructions.
CLIENT SIDE VS SERVER SIDE INTERACTION
Client-Side (Browser)
• Role: Handles presentation and user input
• Technologies:
• HTML/CSS (structure/styling)
• JavaScript (form validation, dynamic content)
The browser renders the form and validates the ‘required’ field – more on that later..
SETUP AND REQUIREMENTS
• Prerequisites:
1. XAMPP/WAMP (Apache + MySQL + PHPMyAdmin)
2. Text Editor (VS Code, Notepad++, Sublime)
3. Web Browser (Chrome/Firefox)
• Steps:
1. Start Apache and MySQL in XAMPP.
2. Access PHPMyAdmin (http://localhost/phpmyadmin).
3. Create a project folder in XAMPP/htdocs/.
TASK 0 – START XAMPP SERVICES AND
CREATE PROJECT FOLDER
IDEAL FOLDER STRUCTURE / INFORMATION
FLOW
view_students.php
TASK 1 – CREATE A BASIC HTML FORM
• Design a simple form to collect user data
basichtmlform.html
Expected Output A form with fields for ID, name, CGPA
TASK 2 – MODIFY THE FORM (ADDITIONAL
REQUIREMENTS)
• Changes Made:
1. Added ID field.
2. Renamed Firstname → Name, Lastname → CGPA.
3. Set CGPA as a number input with min="0", max="4", step="0.01".
4. https://www.w3schools.com/tags/att_input_type_number.asp > In lab doc, go to link to get a better
understanding of manipulating the code.
basichtmlform2.html
The required attribute is a built-in HTML5 validation feature that Prevents submission field is
empty
•Forces users to fill out a form field before submission ‘Please fill out this field’ <Msg will be
different depending on the browser used
•Works on input, select, and textarea elements
•Triggers browser-native error messages if left empty
TASK 3: SLIGHT DIFFERENCE FROM LAB
TASKS PDF
• The code snippets don’t use dbconnect.php, they are standalone database connect scripts.
• I think creating a dbconnect file is better because it provides a modular approach – we are not rewriting
our code multiple times, the relevant bits are added utilizing an include / require statement
• Require is actually better, but I have used include in the following examples.
TASK 3 – DATABASE CONNECTION
(DBCONNECT.PHP)
Connect to MySQL using MySQLi (Object-Oriented) <dbconnect.php>
Verification:
•Open http://localhost/your_project_folder/dbconnect.php in a browser.
•If successful, it displays: "Connected successfully!"
INTERMEDIARY STEPS
TROUBLE SHOOTING
Next Steps – Integrate dbconnect.php with insert.php for form submissions
TASK 4: CREATE DATABASE & TABLE
1. Open PHPMyAdmin (http://localhost/phpmyadmin).
2. Create a database: cse370_lab6.
3. Create a table <Students.sql>:
TASK 5: INSERT DATA MANUALLY
• We are going to insert hardcoded data into the database – just to see if the php and mysql system is
working.. we will make our project systems more elegant and flexible You may want to create the
following <insert.php> file:
Make the necessary changes in insert.php according
https://www.w3schools.com/php/php_mysql_insert.as
TASK 6: INSERT FORM DATA INTO
DATABASE (UPGRADE)
When all the pieces fit together Magic!!! <insert2.php>
(BONUS) FETCH DATA FROM THE
DATABASE
Could make ‘view_students.php’ Displays all student records
REFERENCES FOR EXTENSION ACTIVITIES
SUMMARY SLIDE
• What We Covered:
• ✅ Created a MySQL database & table (PHPMyAdmin).
✅ Established PHP-MySQL connection (dbconnect.php).
✅ Built an HTML form (form.html).
✅ Inserted form data into the database (insert.php).
• Next Steps:
• Add error handling (e.g., prevent SQL injection with prepared statements).
• Implement UPDATE/DELETE operations (refer to W3Schools links in the lab).
• Implement Passwords for users feature
