1p Connecting Web Pages to Databases
When you make a website (web page), sometimes you want to save data or get
data. For example:
● A login page saves the username and password.
● A product page shows items from a shop.
● To do this, you need to connect your web page to a database.
1. What is a Database?
A database is a place where we store data.
Examples of data: Names, emails, prices, passwords, messages, etc.
Some common databases:
● 1MySQL 2 PostgreSQL 3MongoDB 4 SQLite
2. Why Connect to a Database?
You need a database to:
● Save data from a form (like sign-up or login).
● Show data (like blog posts or products).
● Update or delete data (like editing a profile).
3. How Do We Connect?
We use a backend language to connect the web page to the database.
Some common backend languages:
● PHP 2Python (with Django or Flask) 3Node.js (JavaScript) 4Java
4. Steps to Connect (Example: PHP + MySQL)
1. Create a database using MySQL.
2. Write PHP code to connect to the database.
3. Use SQL queries in PHP to insert, fetch, update, or delete data.
4. Display the data on your web page using HTML.
5. 2. Connect PHP to MySQL
6. <?php
$conn = mysqli_connect("localhost", "root", "", "mydb"); ?>
3. Insert Data (<?php mysqli_query($conn, "INSERT INTO users (username,
password)
VALUES ('ali', '123')"); ?>
1. Create Database & Table (in phpMyAdmin or MySQL)
2p CREATE DATABASE mydb;
USE mydb;
CREATE TABLE users (
id INT AUTO_INCREMENT PRIMARY KEY,
username VARCHAR(50),
password VARCHAR(100)
);
4. Get Data(<?php
$result = mysqli_query($conn, "SELECT * FROM users");
while ($row = mysqli_fetch_assoc($result)) {
echo $row['username'] . "<br>"; /n} /n?>
5. Tip: Always Keep Your Data Safe
● Use prepared statements or ORM tools.
● This helps avoid hacking attacks like SQL Injection.
Final Words
Connecting web pages to databases makes your website smart and dynamic.
It allows users to interact with your website in real-time by saving and retrieving
data.
What is a Database?
A database is a system to store and manage data.
Examples:
● Saving students' names, roll numbers, and marks
● Saving product data for an online store
A database helps us save, find, update, or delete data easily.
🔹 Types of Databases
1. Relational Database
● Data is stored in tables (rows + columns)
● Examples: MySQL, Oracle, PostgreSQL
2. Non-Relational (NoSQL) Database
● Data is stored in JSON-like format
● 3p Example: MongoDB
In this lecture, we focus on Relational Databases using MySQL.
What is MySQL?
MySQL is a free, open-source database management system.
It uses SQL (Structured Query Language) to manage data.
MySQL is used for:
● 1 Websites 2 Apps 3 Business software
Big companies like Facebook, YouTube, and Twitter use MySQL.
How MySQL Works
In MySQL, data is stored in tables.
Each table contains:
● Rows → each row = one record
● Columns → each column = one field (e.g., name, age, email)
What is SQL?
SQL = Structured Query Language
It is used to communicate with the database.
With SQL, we can:
● 1 Add data → INSERT 2 See data → SELECT
● 3 Change data → UPDATE 4 Delete data → DELETE
🔹 Real-Life Example
Imagine we are building a university system:
● Student Table → id, name, roll_number
● Course Table → course_id, title, credits
● Students can be linked to the courses they take.
This keeps all the data organized and easy to access.
✅ Advantages of MySQL
● Easy to learn
● Fast and reliable
● Secure (with user access control)
● Works well with many programming languages (PHP, Python, etc.)
Summary
● Database = A system to store and manage data
● 4p MySQL = A popular tool to use relational databases
● We use SQL to interact with MySQL
● SQL lets us add, view, update, and delete data
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<style>
body {
font-family: sans-serif;
background: #eee;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.login {
background: #fff;
padding: 20px;
border-radius: 8px;
width: 250px;
box-shadow: 0 0 10px gray;
text-align: center;
}
input, button {
width: 100%;
padding: 8px;
margin: 8px 0;
}
button {
background: blue;
color: white;
border: none;
}
</style>
</head>
<body>
<div class="login">
<h2>Login</h2>
<form>
<input type="text" placeholder="Username" required>
<input type="password" placeholder="Password" required>
<button type="submit">Login</button>
</form>
</div>
</body>
</html>
Project Title: Online Teacher Feedback System
Project Description:
The Online Teacher Feedback System is a web-based application that allows students to
submit feedback for their teachers. The system is developed using HTML for the front-end
interface, PHP for server-side processing, and a .txt file for storing feedback data. The project
is designed to be simple, lightweight, and run locally on a browser using tools like VS Code and
XAMPP.
This system helps academic institutions collect feedback from students in a more efficient,
digital, and paperless way.
bjectives of the Project:
● To allow students to rate their teachers based on their teaching performance.
● To maintain a record of student feedback.
● To provide a simple dashboard to view submitted feedback.
● To develop a basic full-stack web application using HTML, CSS, and PHP.
Technologies Used:
● HTML: Used to create the feedback form layout.
● CSS: Used for styling the webpage.
● PHP: Used to handle form submission and display feedback.
● Text File (feedback.txt): Used as a temporary database to store feedback.
● VS Code: Code editor.
● XAMPP: Local server to run PHP scripts.
● Key Features of the Project:
● Feedback Form: Students can enter their name, select a teacher, rate them (1-5), and
add comments.
● Form Validation: Required fields ensure proper and complete submission.
● Feedback Storage: Submitted feedback is saved in a feedback.txt file using PHP.
● Feedback Dashboard: A separate dashboard.php file is used to display all stored
feedback in a readable format.
● Lightweight & Offline: Works locally using XAMPP; no internet required.
Future Scope:
● Add user authentication for admin and students.
● Use MySQL instead of a .txt file for scalable storage.
● Add charts or reports based on feedback.
● Allow anonymous submissions for honest opinions.
Security and Limitations:
● Currently no login system (anyone can access).
● Data is stored in plain text (not secure for real deployment).
● Can be improved by adding login, database (MySQL), and better form validation.
●
●
