Scribd
Upload
11 views

Lab 06 - Database Connection PHP HTML Form

The document outlines a lab exercise focused on establishing a MySQL database connection using PHP, creating an HTML form, and completing various tasks related to database interaction. It includes prerequisites, setup instructions, and detailed steps for creating forms, connecting to the database, and inserting data. Additionally, it suggests next steps for enhancing the project with error handling and user authentication features.

Uploaded by

Aer As
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
11 views

Lab 06 - Database Connection PHP HTML Form

The document outlines a lab exercise focused on establishing a MySQL database connection using PHP, creating an HTML form, and completing various tasks related to database interaction. It includes prerequisites, setup instructions, and detailed steps for creating forms, connecting to the database, and inserting data. Additionally, it suggests next steps for enhancing the project with error handling and user authentication features.

Uploaded by

Aer As
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 19

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

You might also like