Unit 1: Frontend Development

Topics:

Introduction to Web Development (Frontend vs Backend vs Full-Stack)
HTML5: Elements, Forms, Semantic Tags
CSS3: Selectors, Flexbox, Grid, Animations, Responsive Design
JavaScript (ES6+): Variables, Functions, DOM Manipulation, Events
Advanced JS: ES6 modules, Fetch API
Introduction to a frontend framework/library (optional: React.js)
- Components, Props, State
- Event handling and forms
- Routing (React Router or plain JS routing)

Practical:

Build a responsive multipage website (portfolio or task tracker)

Unit 2: Backend Development with PHP

Topics:

Introduction to PHP: Syntax, Variables, Data Types, Operators
Control structures (if, switch, loops)
Functions and arrays
Working with Forms and Superglobals ($_GET, $_POST, $_SESSION, $_COOKIE)
File handling (read/write files)
Object-Oriented PHP (classes, objects, inheritance)
Error handling in PHP
Introduction to Composer and PHP packages

Practical:

Build a basic PHP application (e.g., user registration/login form)
Handle form submissions and sessions

Unit 3: Database Management

Topics:

Introduction to databases: SQL basics
MySQL / MariaDB: Tables, Relationships, Joins
CRUD operations in SQL
Connecting PHP with MySQL using mysqli or PDO
Data validation and sanitization to prevent SQL Injection
Authentication and session management
Optional: Introduction to NoSQL (MongoDB) and connecting with PHP

Practical:

Build a PHP + MySQL CRUD application (e.g., blog or task manager)
Implement user authentication and role-based access

Unit 4: Full-Stack Integration & Deployment

Topics:

Connecting frontend with PHP backend
AJAX / Fetch API for asynchronous requests
RESTful API basics using PHP
File uploads and media management
Security best practices (sessions, cookies, data sanitization)
Deployment: Hosting PHP apps on XAMPP/LAMP, shared hosting, or cloud servers
Version control with Git/GitHub
Optional: Integrating a frontend framework (React/Vue) with PHP backend

Practical:

Build a full-stack PHP project (e-commerce, social media, or blog)
Deploy the project online
Implement login, CRUD operations, and database integration

Lab Program 1: Responsive Website using HTML5 & CSS3

Aim:
Design a responsive multipage website using modern HTML5 and CSS3.

Tasks:

Use semantic HTML tags
Design pages: Home, About, Contact
Apply Flexbox/Grid for layout
Make the site responsive using media queries

Unit Covered: Unit 1
Tools: HTML5, CSS3

Lab Program 2: JavaScript DOM Manipulation & Events

Aim:
Implement dynamic behavior using JavaScript.

Tasks:

DOM selection and manipulation
Event handling (click, submit)
Form validation using JavaScript
Dynamic content update

Unit Covered: Unit 1
Tools: JavaScript (ES6)

Lab Program 3: Task Tracker / Portfolio Website

Aim:
Build a responsive multipage frontend project.

Tasks:

Add navigation and routing (JS or React Router)
Use Fetch API to load data (JSON)
Use components (optional React)
Maintain state and props (if React)

Unit Covered: Unit 1
Outcome: Mini frontend project

Lab Program 4: PHP Basics & Control Structures

Aim:
Understand PHP syntax and programming fundamentals.

Tasks:

PHP variables, data types
Conditional statements and loops
Arrays and functions
Output HTML using PHP

Unit Covered: Unit 2
Tools: PHP

Lab Program 5: PHP Forms & Session Management

Aim:
Handle user input and sessions in PHP.

Tasks:

Create HTML form
Handle form submission using $_GET and $_POST
Implement sessions and cookies
Simple login validation

Unit Covered: Unit 2

Lab Program 6: Object-Oriented PHP Application

Aim:
Implement OOP concepts in PHP.

Tasks:

Create classes and objects
Use constructors and inheritance
Handle errors using try–catch
Build a reusable PHP class

Unit Covered: Unit 2

Lab Program 7: SQL & Database CRUD Operations

Aim:
Perform CRUD operations using SQL.

Tasks:

Create database and tables
Insert, update, delete, and fetch records
Use joins and constraints

Unit Covered: Unit 3
Tools: MySQL / MariaDB

Lab Program 8: PHP + MySQL CRUD Application

Aim:
Build a database-driven PHP application.

Tasks:

Connect PHP with MySQL using PDO / mysqli
Implement Create, Read, Update, Delete
Validate and sanitize inputs
Prevent SQL Injection

Example: Blog or Task Manager
Unit Covered: Unit 3

Lab Program 9: User Authentication & Role-Based Access

Aim:
Implement secure authentication system.

Tasks:

User registration and login
Password hashing
Session-based authentication
Role-based access (Admin/User)

Unit Covered: Unit 3 & 4

Lab Program 10: Full-Stack PHP Project & Deployment

Aim:
Develop and deploy a complete full-stack web application.

Options:

E-commerce website
Blog platform
Social media mini app

Tasks:

Frontend + PHP backend integration
AJAX / Fetch API
File upload handling
Deploy on XAMPP / shared hosting / cloud
Version control using GitHub

Unit Covered: Unit 4
Outcome: Capstone Project

LAB 1

🔹 Lab Program 1: Responsive Website using HTML5 & CSS3

🎯 Aim

Design a responsive multi-page website using modern HTML5 and CSS3.

✅ Project Overview

You will create a 3-page website:

Home
About
Contact

Using:

Semantic HTML5 tags
Flexbox / CSS Grid
Media Queries for responsiveness

📁 Project Structure


responsive-website/
│
├── index.html
├── about.html
├── contact.html
└── css/
      └── style.css

✅ 1️⃣ Use Semantic HTML5 Tags

Semantic tags improve readability and SEO.

Example Tags:

<header>
<nav>
<section>
<article>
<main>
<footer>

🏠 index.html (Home Page)


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Responsive Website</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

<header>
    <h1>My Responsive Website</h1>
    <nav>
        <a href="index.html">Home</a>
        <a href="about.html">About</a>
        <a href="contact.html">Contact</a>
    </nav>
</header>

<main>
    <section class="hero">
        <h2>Welcome to Our Website</h2>
        <p>This site is built using HTML5 & CSS3.</p>
    </section>

    <section class="features">
        <article>
            <h3>Fast</h3>
            <p>Optimized layout using Flexbox.</p>
        </article>
        <article>
            <h3>Responsive</h3>
            <p>Works on all screen sizes.</p>
        </article>
        <article>
            <h3>Modern</h3>
            <p>Built with semantic HTML5.</p>
        </article>
    </section>
</main>

<footer>
    <p>© 2026 My Website</p>
</footer>

</body>
</html>

📄 about.html


<main>
    <section>
        <h2>About Us</h2>
        <p>We create responsive websites using modern web technologies.</p>
    </section>
</main>

(Include same header & footer as index.html)

📄 contact.html


<main>
    <section>
        <h2>Contact Us</h2>
        <form>
            <input type="text" placeholder="Your Name">
            <input type="email" placeholder="Your Email">
            <textarea placeholder="Your Message"></textarea>
            <button type="submit">Send</button>
        </form>
    </section>
</main>

✅ 2️⃣ Apply Flexbox / Grid Layout

📄 css/style.css


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

/* Header */
header {
    background: #333;
    color: white;
    padding: 15px;
    text-align: center;
}

nav {
    margin-top: 10px;
}

nav a {
    color: white;
    margin: 0 15px;
    text-decoration: none;
}

/* Hero Section */
.hero {
    text-align: center;
    padding: 40px;
    background: #f4f4f4;
}

/* Features using Flexbox */
.features {
    display: flex;
    justify-content: space-around;
    padding: 40px;
}

.features article {
    background: #ddd;
    padding: 20px;
    width: 30%;
    text-align: center;
}

/* Contact Form */
form {
    display: flex;
    flex-direction: column;
    width: 300px;
    margin: 20px auto;
}

form input, form textarea {
    margin-bottom: 10px;
    padding: 8px;
}

button {
    padding: 10px;
    background: #333;
    color: white;
    border: none;
}

/* Footer */
footer {
    text-align: center;
    padding: 15px;
    background: #222;
    color: white;
    margin-top: 20px;
}

✅ 3️⃣ Make the Site Responsive (Media Queries)

Add at bottom of style.css:


@media (max-width: 768px) {
    .features {
        flex-direction: column;
        align-items: center;
    }

    .features article {
        width: 80%;
        margin-bottom: 20px;
    }

    nav a {
        display: block;
        margin: 10px 0;
    }
}

📱 Responsive Behavior

✔ Desktop → Horizontal layout
✔ Tablet → Adjusted spacing
✔ Mobile → Vertical stacked layout

📌 Expected Output

3 fully linked pages
Semantic HTML structure
Flexbox layout
Responsive design
Clean modern UI

🎯 Learning Outcomes

After completing this lab, you can:

Use semantic HTML5 tags
Create multi-page websites
Use Flexbox for layouts
Apply media queries
Build responsive web designs

LAB 2

🔹 Lab Program 2: JavaScript DOM Manipulation & Events

🎯 Aim

Implement dynamic behavior in a webpage using JavaScript.

✅ Tasks Covered

DOM selection and manipulation
Event handling (click, submit)
Form validation using JavaScript
Dynamic content updates

📁 Project Structure


dom-lab/
│
├── index.html
├── style.css
└── script.js

📝 index.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM Manipulation Lab</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<h1 id="main-title">JavaScript DOM Lab</h1>

<button id="changeTextBtn">Change Title</button>

<hr>

<h2>Contact Form</h2>
<form id="contactForm">
    <input type="text" id="name" placeholder="Enter Name">
    <input type="email" id="email" placeholder="Enter Email">
    <button type="submit">Submit</button>
</form>

<p id="message"></p>

<hr>

<h2>Dynamic List</h2>
<input type="text" id="itemInput" placeholder="Add item">
<button id="addItemBtn">Add Item</button>
<ul id="itemList"></ul>

<script src="script.js"></script>
</body>
</html>

🎨 style.css (Optional Styling)


body {
    font-family: Arial, sans-serif;
    padding: 20px;
}

button {
    margin-top: 10px;
    padding: 8px;
}

input {
    display: block;
    margin-bottom: 10px;
    padding: 6px;
}

#message {
    margin-top: 10px;
    font-weight: bold;
}

💻 script.js

✅ 1️⃣ DOM Selection & Manipulation


const title = document.getElementById("main-title");
const changeBtn = document.getElementById("changeTextBtn");

changeBtn.addEventListener("click", function() {
    title.textContent = "Title Changed Successfully!";
    title.style.color = "blue";
});

✔ getElementById()
✔ Modify text using textContent
✔ Change style dynamically

✅ 2️⃣ Event Handling (Click & Submit)


const form = document.getElementById("contactForm");
const message = document.getElementById("message");

form.addEventListener("submit", function(event) {
    event.preventDefault();  // Prevent page reload

    const name = document.getElementById("name").value;
    const email = document.getElementById("email").value;

    if (name === "" || email === "") {
        message.textContent = "All fields are required!";
        message.style.color = "red";
    } else {
        message.textContent = "Form submitted successfully!";
        message.style.color = "green";
        form.reset();
    }
});

✔ Handle form submit
✔ Prevent default behavior
✔ Validate inputs

✅ 3️⃣ Dynamic Content Update


const addItemBtn = document.getElementById("addItemBtn");
const itemInput = document.getElementById("itemInput");
const itemList = document.getElementById("itemList");

addItemBtn.addEventListener("click", function() {
    const itemText = itemInput.value;

    if (itemText !== "") {
        const li = document.createElement("li");
        li.textContent = itemText;

        itemList.appendChild(li);
        itemInput.value = "";
    }
});

✔ Create elements dynamically
✔ Append elements to DOM
✔ Update content without page reload

📌 Expected Output

✔ Clicking "Change Title" updates heading
✔ Form validation shows error/success messages
✔ Items added dynamically to list
✔ No page reload during interactions

🎯 Learning Outcomes

After completing this lab, you can:

Select and manipulate DOM elements
Handle user events (click, submit)
Validate form inputs
Create dynamic content
Understand client-side interactivity

LAB 3

🔹 Lab Program 3: Task Tracker / Portfolio Website

🎯 Aim

Build a responsive multi-page frontend project with navigation, dynamic data loading, and optional React component architecture.

You can implement this in:

✅ Vanilla JavaScript (using Fetch API + simple routing)
✅ Or React (recommended for advanced practice)

✅ Option 1: Vanilla JS Task Tracker (Using Fetch API)

📁 Project Structure


task-tracker/
│
├── index.html
├── tasks.html
├── data.json
├── style.css
└── script.js

📝 Step 1: Navigation (Multi-page)

index.html


<header>
  <h1>Task Tracker</h1>
  <nav>
    <a href="index.html">Home</a>
    <a href="tasks.html">Tasks</a>
  </nav>
</header>

<main>
  <h2>Welcome to Task Tracker</h2>
</main>

📄 data.json (Sample Data)


[
  { "id": 1, "title": "Learn HTML", "status": "Completed" },
  { "id": 2, "title": "Learn CSS", "status": "Pending" },
  { "id": 3, "title": "Learn JavaScript", "status": "In Progress" }
]

📄 tasks.html


<h2>Task List</h2>
<ul id="taskList"></ul>

<script src="script.js"></script>

💻 script.js (Fetch API)


document.addEventListener("DOMContentLoaded", function () {
  const taskList = document.getElementById("taskList");

  fetch("data.json")
    .then(response => response.json())
    .then(data => {
      data.forEach(task => {
        const li = document.createElement("li");
        li.textContent = `${task.title} - ${task.status}`;
        taskList.appendChild(li);
      });
    })
    .catch(error => {
      console.log("Error loading tasks:", error);
    });
});

📌 Features Implemented

✔ Navigation between pages
✔ Fetch API loads JSON data
✔ Dynamic task rendering
✔ Responsive layout using CSS

✅ Option 2: React-Based Task Tracker (Recommended)

Using React Router for navigation.

📁 Structure


src/
│
├── components/
│     ├── Navbar.jsx
│     └── TaskCard.jsx
│
├── pages/
│     ├── Home.jsx
│     └── Tasks.jsx
│
└── App.jsx

🔹 Step 1: Routing Setup (App.jsx)


import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import Tasks from "./pages/Tasks";
import Navbar from "./components/Navbar";

function App() {
  return (
    <Router>
      <Navbar />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/tasks" element={<Tasks />} />
      </Routes>
    </Router>
  );
}

export default App;

🔹 Navbar Component


import { Link } from "react-router-dom";

function Navbar() {
  return (
    <nav>
      <Link to="/">Home</Link> | 
      <Link to="/tasks">Tasks</Link>
    </nav>
  );
}

export default Navbar;

🔹 Tasks Page (Using Fetch API)


import { useState, useEffect } from "react";

function Tasks() {
  const [tasks, setTasks] = useState([]);

  useEffect(() => {
    fetch("/data.json")
      .then(res => res.json())
      .then(data => setTasks(data));
  }, []);

  return (
    <div>
      <h2>Task List</h2>
      {tasks.map(task => (
        <div key={task.id}>
          <h4>{task.title}</h4>
          <p>Status: {task.status}</p>
        </div>
      ))}
    </div>
  );
}

export default Tasks;

🔹 State & Props Example (TaskCard Component)


function TaskCard({ title, status }) {
  return (
    <div>
      <h4>{title}</h4>
      <p>{status}</p>
    </div>
  );
}

Use it in Tasks:


{tasks.map(task => (
  <TaskCard key={task.id} title={task.title} status={task.status} />
))}

📱 Responsive Layout Example (CSS)


nav {
  display: flex;
  justify-content: center;
  gap: 20px;
}

@media (max-width: 768px) {
  nav {
    flex-direction: column;
    align-items: center;
  }
}

📌 Expected Output

✔ Multi-page navigation
✔ JSON data loaded dynamically
✔ Responsive layout
✔ Component-based structure (React option)
✔ State management using useState

🎯 Learning Outcomes

After completing this lab, you can:

Build multi-page frontend applications
Use Fetch API to load external data
Implement routing (Vanilla or React Router)
Manage state and props (React)
Structure projects professionally

LAB 4

🧪 Lab Program 4: PHP Basics & Control Structures

🎯 Aim

Understand PHP syntax and programming fundamentals.

✅ 1. PHP Variables & Data Types

🔹 Example: `index.php`


<?php
// Variables
$name = "John";
$age = 22;
$percentage = 85.5;
$isStudent = true;

// Displaying variables
echo "<h2>Student Information</h2>";
echo "Name: " . $name . "<br>";
echo "Age: " . $age . "<br>";
echo "Percentage: " . $percentage . "%<br>";
echo "Student Status: " . ($isStudent ? "Yes" : "No") . "<br>";
?>

📌 Data Types in PHP

String
Integer
Float
Boolean
Array
NULL
Object

✅ 2. Conditional Statements & Loops

🔹 Conditional Example


<?php
$marks = 75;

if ($marks >= 90) {
    echo "Grade: A";
} elseif ($marks >= 70) {
    echo "Grade: B";
} elseif ($marks >= 50) {
    echo "Grade: C";
} else {
    echo "Fail";
}
?>

🔹 Loop Examples

➤ For Loop


<?php
for ($i = 1; $i <= 5; $i++) {
    echo "Number: $i <br>";
}
?>

➤ While Loop


<?php
$count = 1;
while ($count <= 5) {
    echo "Count: $count <br>";
    $count++;
}
?>

➤ Foreach Loop (for arrays)


<?php
$subjects = array("Math", "Science", "English");

foreach ($subjects as $subject) {
    echo $subject . "<br>";
}
?>

✅ 3. Arrays & Functions

🔹 Indexed Array


<?php
$colors = ["Red", "Green", "Blue"];
echo $colors[0]; // Red
?>

🔹 Associative Array


<?php
$student = [
    "name" => "Alice",
    "age" => 20,
    "course" => "BCA"
];

echo "Name: " . $student["name"];
?>

🔹 Function Example


<?php
function greet($name) {
    return "Hello, " . $name . "!";
}

echo greet("Rahul");
?>

✅ 4. Output HTML using PHP


<?php
$title = "Welcome Page";
?>

<!DOCTYPE html>
<html>
<head>
    <title><?php echo $title; ?></title>
</head>
<body>

<h1><?php echo $title; ?></h1>

<?php
echo "<p>This content is generated using PHP.</p>";
?>

</body>
</html>

🧾 How to Run the Program

Install XAMPP / WAMP
Place the file inside htdocs folder
Start Apache server
Open browser:
```
http://localhost/index.php
```

🎯 Expected Outcome

Understand PHP syntax
Use variables and data types
Implement conditionals and loops
Work with arrays and functions
Embed PHP inside HTML

LAB 5

🧪 Lab Program 5: PHP Forms & Session Management

🎯 Aim

Handle user input and sessions in PHP.

✅ 1. Create HTML Form

🔹 File: `login.html`


<!DOCTYPE html>
<html>
<head>
    <title>Login Form</title>
</head>
<body>

<h2>Login Form</h2>

<form action="login.php" method="POST">
    Username: <input type="text" name="username" required><br><br>
    Password: <input type="password" name="password" required><br><br>
    <input type="submit" value="Login">
</form>

</body>
</html>

✅ 2. Handle Form Submission using $_POST

🔹 File: `login.php`


<?php
session_start();

// predefined credentials
$valid_username = "admin";
$valid_password = "1234";

// get form data
$username = $_POST['username'];
$password = $_POST['password'];

// validation
if ($username == $valid_username && $password == $valid_password) {

    // create session
    $_SESSION['username'] = $username;

    // create cookie (valid for 1 hour)
    setcookie("username", $username, time() + 3600);

    echo "Login successful!<br>";
    echo "<a href='dashboard.php'>Go to Dashboard</a>";

} else {
    echo "Invalid username or password!";
}
?>

✅ 3. Using Sessions

🔹 File: `dashboard.php`


<?php
session_start();

// check session
if (!isset($_SESSION['username'])) {
    echo "Please login first!";
    exit();
}

echo "<h2>Welcome, " . $_SESSION['username'] . "</h2>";
echo "<a href='logout.php'>Logout</a>";
?>

✅ 4. Logout and Destroy Session

🔹 File: `logout.php`


<?php
session_start();

// destroy session
session_destroy();

echo "You have been logged out.<br>";
echo "<a href='login.html'>Login Again</a>";
?>

✅ 5. Using $_GET Example

🔹 File: `welcome.php`


<?php
$name = $_GET['name'];
echo "Welcome, " . $name;
?>

Open in browser:


http://localhost/welcome.php?name=Rahul

Output:


Welcome, Rahul

✅ 6. Display Cookie Example


<?php
if(isset($_COOKIE['username'])) {
    echo "Cookie Username: " . $_COOKIE['username'];
}
?>

📂 Folder Structure


htdocs/
│
├── login.html
├── login.php
├── dashboard.php
├── logout.php
└── welcome.php

▶️ How to Run

Install XAMPP / WAMP
Start Apache server
Place files in htdocs
Open browser
```
http://localhost/login.html
```

🎯 Expected Outcome

Create and handle HTML forms
Use $_GET and $_POST methods
Implement sessions
Implement cookies
Build simple login system

LAB 6

🧪 Lab Program 6: Object-Oriented PHP Application

🎯 Aim

Implement Object-Oriented Programming (OOP) concepts in PHP.

✅ 1. Create Classes and Objects

🔹 Example: Basic Class


<?php
class Student {
    public $name;
    public $age;

    public function setData($name, $age) {
        $this->name = $name;
        $this->age = $age;
    }

    public function display() {
        echo "Name: " . $this->name . "<br>";
        echo "Age: " . $this->age . "<br>";
    }
}

// Create object
$student1 = new Student();
$student1->setData("Rahul", 21);
$student1->display();
?>

✅ 2. Constructors and Inheritance

🔹 Example: Constructor


<?php
class Person {
    protected $name;

    // Constructor
    public function __construct($name) {
        $this->name = $name;
    }

    public function greet() {
        echo "Hello, " . $this->name . "<br>";
    }
}

$person1 = new Person("Anita");
$person1->greet();
?>

🔹 Example: Inheritance


<?php
class Employee extends Person {
    private $salary;

    public function __construct($name, $salary) {
        parent::__construct($name);  // Call parent constructor
        $this->salary = $salary;
    }

    public function showDetails() {
        echo "Name: " . $this->name . "<br>";
        echo "Salary: " . $this->salary . "<br>";
    }
}

$emp1 = new Employee("Ravi", 30000);
$emp1->showDetails();
?>

✅ 3. Error Handling using try–catch


<?php
function divide($a, $b) {
    if ($b == 0) {
        throw new Exception("Division by zero is not allowed.");
    }
    return $a / $b;
}

try {
    echo divide(10, 2) . "<br>";
    echo divide(10, 0);
} catch (Exception $e) {
    echo "Error: " . $e->getMessage();
}
?>

✅ 4. Build a Reusable PHP Class (Example: Calculator)

🔹 File: `Calculator.php`


<?php
class Calculator {

    public function add($a, $b) {
        return $a + $b;
    }

    public function subtract($a, $b) {
        return $a - $b;
    }

    public function multiply($a, $b) {
        return $a * $b;
    }

    public function divide($a, $b) {
        if ($b == 0) {
            throw new Exception("Cannot divide by zero.");
        }
        return $a / $b;
    }
}
?>

🔹 Using the Reusable Class


<?php
require 'Calculator.php';

$calc = new Calculator();

try {
    echo "Addition: " . $calc->add(10, 5) . "<br>";
    echo "Division: " . $calc->divide(10, 2) . "<br>";
} catch (Exception $e) {
    echo "Error: " . $e->getMessage();
}
?>

📂 Suggested Folder Structure


htdocs/
│
├── Calculator.php
└── index.php

🎯 OOP Concepts Covered

✔ Class and Object
✔ Properties and Methods
✔ Constructor
✔ Inheritance
✔ Access Modifiers (public, private, protected)
✔ Exception Handling (try–catch)
✔ Reusable Class Design

🏆 Expected Outcome

After completing this lab, you can:

Develop modular PHP applications
Apply inheritance and encapsulation
Handle runtime errors safely
Create reusable PHP class libraries

LAB 7

🧪 Lab Program 7: SQL & Database CRUD Operations

🎯 Aim

Perform CRUD (Create, Read, Update, Delete) operations using SQL.

✅ 1. Create Database and Tables

🔹 Step 1: Create Database


CREATE DATABASE college_db;


USE college_db;

🔹 Step 2: Create Tables with Constraints

➤ Students Table


CREATE TABLE students (
    student_id INT PRIMARY KEY AUTO_INCREMENT,
    name VARCHAR(50) NOT NULL,
    email VARCHAR(100) UNIQUE,
    age INT CHECK (age >= 18),
    department_id INT
);

➤ Departments Table


CREATE TABLE departments (
    department_id INT PRIMARY KEY AUTO_INCREMENT,
    department_name VARCHAR(50) NOT NULL
);

➤ Add Foreign Key Constraint


ALTER TABLE students
ADD CONSTRAINT fk_department
FOREIGN KEY (department_id)
REFERENCES departments(department_id)
ON DELETE SET NULL;

✅ 2. Insert Records (CREATE)

🔹 Insert into Departments


INSERT INTO departments (department_name)
VALUES ('Computer Science'),
       ('Mechanical'),
       ('Electrical');

🔹 Insert into Students


INSERT INTO students (name, email, age, department_id)
VALUES ('Rahul', 'rahul@gmail.com', 20, 1),
       ('Anita', 'anita@gmail.com', 22, 2);

✅ 3. Fetch Records (READ)

🔹 Select All


SELECT * FROM students;

🔹 Select Specific Columns


SELECT name, email FROM students;

🔹 Using WHERE Clause


SELECT * FROM students
WHERE age > 20;

✅ 4. Update Records (UPDATE)


UPDATE students
SET age = 23
WHERE student_id = 2;

✅ 5. Delete Records (DELETE)


DELETE FROM students
WHERE student_id = 1;

✅ 6. Use Joins

🔹 INNER JOIN Example


SELECT students.name, departments.department_name
FROM students
INNER JOIN departments
ON students.department_id = departments.department_id;

🔹 LEFT JOIN Example


SELECT students.name, departments.department_name
FROM students
LEFT JOIN departments
ON students.department_id = departments.department_id;

✅ 7. Constraints Used

✔ PRIMARY KEY
✔ FOREIGN KEY
✔ UNIQUE
✔ NOT NULL
✔ CHECK
✔ AUTO_INCREMENT

📂 ER Diagram Concept (Logical Structure)


Departments (1) ---- (Many) Students

One department can have many students
Each student belongs to one department

▶️ How to Run

Open MySQL / phpMyAdmin
Execute queries step by step
Verify using SELECT * FROM table_name;

🎯 Expected Outcome

After completing this lab, you can:

Create databases and tables
Apply constraints properly
Perform full CRUD operations
Write SQL joins
Maintain relational integrity

LAB 8

🧪 Lab Program 8: PHP + MySQL CRUD Application

🎯 Aim

Build a database-driven PHP application with secure CRUD operations.

✅ 1. Create Database & Table


CREATE DATABASE student_db;
USE student_db;

CREATE TABLE students (
    id INT PRIMARY KEY AUTO_INCREMENT,
    name VARCHAR(100) NOT NULL,
    email VARCHAR(100) UNIQUE NOT NULL,
    age INT NOT NULL
);

📂 Project Structure


htdocs/
│
├── config.php
├── index.php
├── add.php
├── edit.php
├── delete.php
└── db.sql

✅ 2. Connect PHP with MySQL (Using PDO)

🔹 config.php


<?php
$host = "localhost";
$dbname = "student_db";
$username = "root";
$password = "";

try {
    $pdo = new PDO("mysql:host=$host;dbname=$dbname", $username, $password);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch(PDOException $e) {
    die("Connection failed: " . $e->getMessage());
}
?>

✔ Uses PDO
✔ Enables error mode
✔ Prevents SQL Injection via prepared statements

✅ 3. READ (Display Records)

🔹 index.php


<?php
require 'config.php';

$stmt = $pdo->query("SELECT * FROM students");
$students = $stmt->fetchAll(PDO::FETCH_ASSOC);
?>

<h2>Student List</h2>
<a href="add.php">Add Student</a>
<table border="1">
<tr>
    <th>ID</th><th>Name</th><th>Email</th><th>Age</th><th>Action</th>
</tr>

<?php foreach ($students as $student): ?>
<tr>
    <td><?= $student['id']; ?></td>
    <td><?= htmlspecialchars($student['name']); ?></td>
    <td><?= htmlspecialchars($student['email']); ?></td>
    <td><?= $student['age']; ?></td>
    <td>
        <a href="edit.php?id=<?= $student['id']; ?>">Edit</a> |
        <a href="delete.php?id=<?= $student['id']; ?>">Delete</a>
    </td>
</tr>
<?php endforeach; ?>
</table>

✔ Uses htmlspecialchars() to prevent XSS

✅ 4. CREATE (Insert Data)

🔹 add.php


<?php
require 'config.php';

if ($_SERVER["REQUEST_METHOD"] == "POST") {

    $name = htmlspecialchars(trim($_POST['name']));
    $email = filter_var($_POST['email'], FILTER_SANITIZE_EMAIL);
    $age = intval($_POST['age']);

    if (!empty($name) && filter_var($email, FILTER_VALIDATE_EMAIL) && $age > 0) {

        $stmt = $pdo->prepare("INSERT INTO students (name, email, age) VALUES (?, ?, ?)");
        $stmt->execute([$name, $email, $age]);

        header("Location: index.php");
        exit();
    } else {
        echo "Invalid input!";
    }
}
?>

<form method="POST">
    Name: <input type="text" name="name" required><br><br>
    Email: <input type="email" name="email" required><br><br>
    Age: <input type="number" name="age" required><br><br>
    <button type="submit">Add Student</button>
</form>

✔ Input validation
✔ Prepared statement
✔ Prevents SQL Injection

✅ 5. UPDATE (Edit Data)

🔹 edit.php


<?php
require 'config.php';

$id = intval($_GET['id']);

$stmt = $pdo->prepare("SELECT * FROM students WHERE id = ?");
$stmt->execute([$id]);
$student = $stmt->fetch(PDO::FETCH_ASSOC);

if ($_SERVER["REQUEST_METHOD"] == "POST") {

    $name = htmlspecialchars(trim($_POST['name']));
    $email = filter_var($_POST['email'], FILTER_SANITIZE_EMAIL);
    $age = intval($_POST['age']);

    $stmt = $pdo->prepare("UPDATE students SET name=?, email=?, age=? WHERE id=?");
    $stmt->execute([$name, $email, $age, $id]);

    header("Location: index.php");
}
?>

<form method="POST">
    Name: <input type="text" name="name" value="<?= $student['name']; ?>" required><br><br>
    Email: <input type="email" name="email" value="<?= $student['email']; ?>" required><br><br>
    Age: <input type="number" name="age" value="<?= $student['age']; ?>" required><br><br>
    <button type="submit">Update</button>
</form>

✅ 6. DELETE (Remove Data)

🔹 delete.php


<?php
require 'config.php';

$id = intval($_GET['id']);

$stmt = $pdo->prepare("DELETE FROM students WHERE id = ?");
$stmt->execute([$id]);

header("Location: index.php");
exit();
?>

🔐 Security Measures Implemented

✔ PDO Prepared Statements
✔ Input validation (filter_var, intval, trim)
✔ XSS prevention (htmlspecialchars)
✔ SQL Injection prevention
✔ Server-side validation

▶️ How to Run

Install XAMPP / WAMP
Create database and table
Place files inside htdocs
Start Apache & MySQL
Open:
```
http://localhost/index.php
```

🎯 Expected Outcome

After completing this lab, you can:

Connect PHP with MySQL using PDO
Perform full CRUD operations
Validate and sanitize user input
Prevent SQL Injection
Build secure database-driven applications

LAB 9

🧪 Lab Program 9: User Authentication & Role-Based Access

🎯 Aim

Implement a secure authentication system with role-based access (Admin/User).

🗄️ 1️⃣ Database Setup

🔹 Create Database & Table


CREATE DATABASE auth_db;
USE auth_db;

CREATE TABLE users (
    id INT PRIMARY KEY AUTO_INCREMENT,
    name VARCHAR(100) NOT NULL,
    email VARCHAR(150) UNIQUE NOT NULL,
    password VARCHAR(255) NOT NULL,
    role ENUM('admin','user') DEFAULT 'user'
);

✔ ENUM ensures valid roles
✔ Password column supports hashed values

📂 Project Structure


htdocs/
│
├── config.php
├── register.php
├── login.php
├── dashboard.php
├── admin.php
├── logout.php

🔗 2️⃣ Database Connection (PDO)

🔹 config.php


<?php
$host = "localhost";
$dbname = "auth_db";
$username = "root";
$password = "";

try {
    $pdo = new PDO("mysql:host=$host;dbname=$dbname", $username, $password);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch(PDOException $e) {
    die("Connection failed: " . $e->getMessage());
}

session_start();
?>

📝 3️⃣ User Registration (Password Hashing)

🔹 register.php


<?php
require 'config.php';

if ($_SERVER["REQUEST_METHOD"] == "POST") {

    $name = trim($_POST['name']);
    $email = filter_var($_POST['email'], FILTER_SANITIZE_EMAIL);
    $password = $_POST['password'];

    if (!empty($name) && filter_var($email, FILTER_VALIDATE_EMAIL) && strlen($password) >= 6) {

        $hashedPassword = password_hash($password, PASSWORD_DEFAULT);

        $stmt = $pdo->prepare("INSERT INTO users (name, email, password, role) VALUES (?, ?, ?, 'user')");
        $stmt->execute([$name, $email, $hashedPassword]);

        echo "Registration successful! <a href='login.php'>Login</a>";
    } else {
        echo "Invalid input!";
    }
}
?>

<form method="POST">
    Name: <input type="text" name="name" required><br><br>
    Email: <input type="email" name="email" required><br><br>
    Password: <input type="password" name="password" required><br><br>
    <button type="submit">Register</button>
</form>

✔ Uses password_hash()
✔ Validates inputs
✔ Default role = user

🔐 4️⃣ Login System (Session-Based Authentication)

🔹 login.php


<?php
require 'config.php';

if ($_SERVER["REQUEST_METHOD"] == "POST") {

    $email = $_POST['email'];
    $password = $_POST['password'];

    $stmt = $pdo->prepare("SELECT * FROM users WHERE email = ?");
    $stmt->execute([$email]);
    $user = $stmt->fetch(PDO::FETCH_ASSOC);

    if ($user && password_verify($password, $user['password'])) {

        $_SESSION['user_id'] = $user['id'];
        $_SESSION['name'] = $user['name'];
        $_SESSION['role'] = $user['role'];

        header("Location: dashboard.php");
        exit();
    } else {
        echo "Invalid credentials!";
    }
}
?>

<form method="POST">
    Email: <input type="email" name="email" required><br><br>
    Password: <input type="password" name="password" required><br><br>
    <button type="submit">Login</button>
</form>

✔ Uses password_verify()
✔ Secure session storage

👤 5️⃣ User Dashboard (Protected Page)

🔹 dashboard.php


<?php
require 'config.php';

if (!isset($_SESSION['user_id'])) {
    header("Location: login.php");
    exit();
}

echo "<h2>Welcome, " . $_SESSION['name'] . "</h2>";
echo "Role: " . $_SESSION['role'] . "<br><br>";

if ($_SESSION['role'] == 'admin') {
    echo "<a href='admin.php'>Go to Admin Panel</a><br><br>";
}

echo "<a href='logout.php'>Logout</a>";
?>

✔ Session-based authentication
✔ Redirect if not logged in

🛠️ 6️⃣ Role-Based Access (Admin Only Page)

🔹 admin.php


<?php
require 'config.php';

if (!isset($_SESSION['user_id']) || $_SESSION['role'] != 'admin') {
    echo "Access Denied!";
    exit();
}

echo "<h2>Admin Panel</h2>";
echo "Only admins can access this page.";
?>

✔ Admin-only restriction
✔ Role-based validation

🚪 7️⃣ Logout

🔹 logout.php


<?php
require 'config.php';

session_destroy();
header("Location: login.php");
exit();
?>

🔐 Security Features Implemented

✔ Password hashing (password_hash)
✔ Password verification (password_verify)
✔ PDO prepared statements
✔ Session-based authentication
✔ Role-based access control
✔ Input validation & sanitization

▶️ How to Run

Start XAMPP / WAMP
Create database & table
Place files inside htdocs
Open browser:
```
http://localhost/register.php
```

🎯 Expected Outcome

After completing this lab, you can:

Build secure authentication systems
Hash and verify passwords properly
Manage user sessions
Implement role-based authorization
Protect pages from unauthorized access

LAB 10

🧪 Lab Program 10: Full-Stack PHP Project & Deployment

🎯 Aim

Develop and deploy a complete full-stack web application using PHP & MySQL.

✅ Project Option (Recommended Example)

📝 Blog Platform (Full-Stack PHP + MySQL)

You can adapt the same structure for:

🛒 E-commerce website
📱 Social media mini app

📂 Project Architecture


blog_app/
│
├── config.php
├── index.php
├── login.php
├── register.php
├── dashboard.php
├── create_post.php
├── upload/
├── assets/
│   ├── css/
│   └── js/
└── database.sql

🗄️ 1️⃣ Database Structure


CREATE DATABASE blog_db;
USE blog_db;

CREATE TABLE users (
    id INT PRIMARY KEY AUTO_INCREMENT,
    name VARCHAR(100),
    email VARCHAR(150) UNIQUE,
    password VARCHAR(255)
);

CREATE TABLE posts (
    id INT PRIMARY KEY AUTO_INCREMENT,
    title VARCHAR(255),
    content TEXT,
    image VARCHAR(255),
    user_id INT,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
);

🔗 2️⃣ Frontend + PHP Backend Integration

🔹 config.php (PDO Connection)


<?php
$pdo = new PDO("mysql:host=localhost;dbname=blog_db", "root", "");
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
session_start();
?>

🔐 3️⃣ User Authentication (Backend Integration)

Use:

password_hash()
password_verify()
Sessions for login

(Reuse Lab 9 authentication logic)

✍️ 4️⃣ Create Blog Post (With File Upload)

🔹 create_post.php


<?php
require 'config.php';

if ($_SERVER["REQUEST_METHOD"] == "POST") {

    $title = htmlspecialchars($_POST['title']);
    $content = htmlspecialchars($_POST['content']);
    $user_id = $_SESSION['user_id'];

    // File Upload
    $imageName = $_FILES['image']['name'];
    $tempName = $_FILES['image']['tmp_name'];
    $uploadPath = "upload/" . basename($imageName);

    if (move_uploaded_file($tempName, $uploadPath)) {

        $stmt = $pdo->prepare("INSERT INTO posts (title, content, image, user_id) VALUES (?, ?, ?, ?)");
        $stmt->execute([$title, $content, $imageName, $user_id]);

        echo "Post created successfully!";
    } else {
        echo "Image upload failed!";
    }
}
?>

<form method="POST" enctype="multipart/form-data">
    Title: <input type="text" name="title" required><br><br>
    Content: <textarea name="content" required></textarea><br><br>
    Image: <input type="file" name="image" required><br><br>
    <button type="submit">Create Post</button>
</form>

✔ Handles file upload
✔ Stores image name in DB
✔ Uses prepared statements

📄 5️⃣ Display Posts (Frontend Integration)

🔹 index.php


<?php
require 'config.php';

$stmt = $pdo->query("SELECT posts.*, users.name 
                     FROM posts 
                     JOIN users ON posts.user_id = users.id 
                     ORDER BY created_at DESC");

$posts = $stmt->fetchAll(PDO::FETCH_ASSOC);
?>

<h2>All Posts</h2>

<?php foreach ($posts as $post): ?>
    <div>
        <h3><?= htmlspecialchars($post['title']); ?></h3>
        <p><?= htmlspecialchars($post['content']); ?></p>
        <p>By: <?= $post['name']; ?></p>
        <img src="upload/<?= $post['image']; ?>" width="200">
        <hr>
    </div>
<?php endforeach; ?>

⚡ 6️⃣ AJAX / Fetch API Example

🔹 assets/js/script.js


document.getElementById("loadPosts").addEventListener("click", function() {
    fetch("fetch_posts.php")
        .then(response => response.text())
        .then(data => {
            document.getElementById("postContainer").innerHTML = data;
        });
});

✔ Enables dynamic loading
✔ No page reload required

📤 7️⃣ Deployment Options

🖥️ Local Deployment (XAMPP)

Install XAMPP
Place project inside htdocs
Start Apache & MySQL
Open:
```
http://localhost/blog_app
```

🌐 Shared Hosting Deployment

Purchase hosting (Hostinger / Bluehost / etc.)
Upload files via cPanel File Manager
Create MySQL database in cPanel
Update config.php with live DB credentials

☁️ Cloud Deployment Options

VPS (DigitalOcean, AWS EC2)
Cloud platforms like:
- Amazon Web Services
- Microsoft Azure
- Google Cloud

🔄 8️⃣ Version Control Using GitHub

Steps:


git init
git add .
git commit -m "Initial Blog Project"
git branch -M main
git remote add origin https://github.com/username/blog-app.git
git push -u origin main

Use:

GitHub for repository hosting
Add .gitignore for:
```
upload/
config.php
```

🔐 Security Best Practices

✔ Use prepared statements (PDO)
✔ Hash passwords
✔ Validate file uploads (check MIME type & size)
✔ Use htmlspecialchars()
✔ Protect admin routes
✔ Disable error display in production

📘 Documentation Should Include

Project Title
Aim
Technologies Used
Database Design
Screenshots
Features
Deployment Steps
Conclusion

🎯 Expected Learning Outcomes

After completing this lab, you can:

Build full-stack PHP applications
Integrate frontend & backend
Use AJAX / Fetch API
Handle file uploads
Deploy projects
Use Git & GitHub
Build production-ready web apps

UNIT 1

🌐 What is Web Development?

Web development is the process of building websites and web applications that run on the internet.
Anything you open in a browser—Google, Instagram, Amazon—is a web app.

At a high level, web development is divided into Frontend, Backend, and Full-Stack.

🎨 Frontend Development (Client-Side)

Frontend = what users see and interact with

This is the visual part of a website.

Responsibilities

Page layout & design
Buttons, forms, animations
Responsive design (mobile, tablet, desktop)
User interactions (clicks, scrolling, inputs)

Core Technologies

HTML – structure (skeleton)
CSS – styling (look & feel)
JavaScript – interactivity

Popular Frameworks / Libraries

React.js
Vue.js
Angular
Tailwind CSS, Bootstrap

Example

Login page UI
Product listing page
Dashboard charts

👉 If you enjoy design, visuals, and UX, frontend is your zone.

⚙️ Backend Development (Server-Side)

Backend = behind the scenes logic

This is where data is processed, stored, and secured.

Responsibilities

Business logic
Authentication & authorization
Database operations
APIs for frontend communication
Server performance & security

Core Technologies

Languages:
- JavaScript (Node.js)
- Python (Django, Flask, FastAPI)
- Java (Spring Boot)
- PHP (Laravel)
Databases:
- MySQL, PostgreSQL
- MongoDB
- Redis

Example

Saving user data
Processing payments
Fetching products from database

👉 If you enjoy logic, data, and problem-solving, backend fits well.

🔁 Full-Stack Development

Full-Stack = Frontend + Backend

A full-stack developer can build an entire web application end-to-end.

Responsibilities

Frontend UI
Backend logic
Database design
API integration
Deployment

Common Full-Stack Combos

MERN → MongoDB + Express + React + Node.js
MEAN → MongoDB + Express + Angular + Node.js
Django + React
Flask + Vue

Example

Building a complete e-commerce website
Creating dashboards with login, data, and charts

👉 Best if you want versatility & startup-ready skills.

🧠 Quick Comparison

Aspect	Frontend	Backend	Full-Stack
Focus	UI/UX	Logic & Data	Both
Languages	HTML, CSS, JS	Python, JS, Java	All
Database	❌	✅	✅
User Facing	Yes	No	Yes
Difficulty	Medium	Medium–High	High

🧩 HTML5 Elements

An HTML element usually consists of:


<tagname> content </tagname>

🔹 Common HTML5 Elements

Text & Structure


<h1>Heading</h1>
<p>This is a paragraph</p>
<span>Inline text</span>
<div>Block container</div>

Media


<img src="image.jpg" alt="Image description">
<audio controls src="audio.mp3"></audio>
<video controls src="video.mp4"></video>

Lists


<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

<ol>
  <li>First</li>
  <li>Second</li>
</ol>

📝 HTML5 Forms

Forms collect user input and send it to the backend.

🔹 Basic Form Structure


<form action="/submit" method="POST">
  <input type="text" name="username">
  <button type="submit">Submit</button>
</form>

🔹 Common Input Types (HTML5 Superpowers 💥)


<input type="email" placeholder="Email">
<input type="password" placeholder="Password">
<input type="number" min="1" max="100">
<input type="date">
<input type="file">
<input type="checkbox">
<input type="radio" name="gender">

🔹 Useful Form Attributes

required – must be filled
placeholder – hint text
readonly – non-editable
disabled – inactive field
pattern – regex validation
autocomplete – on/off


<input type="text" required pattern="[A-Za-z]+">

🔹 Form Validation (No JS!)

HTML5 provides built-in validation:


<input type="email" required>

🧠 Semantic HTML5 Tags

Semantic tags describe meaning, not just layout.

❌ Non-Semantic


<div class="header"></div>
<div class="nav"></div>

✅ Semantic (Recommended)


<header></header>
<nav></nav>
<main></main>
<section></section>
<article></article>
<aside></aside>
<footer></footer>

🔹 Common Semantic Tags Explained

Tag	Purpose
`<header>`	Page or section header
`<nav>`	Navigation links
`<main>`	Main content
`<section>`	Thematic grouping
`<article>`	Independent content
`<aside>`	Sidebar / related info
`<footer>`	Footer info

🔹 Example Page Layout


<body>
  <header>
    <h1>My Website</h1>
  </header>

  <nav>
    <a href="#">Home</a>
    <a href="#">About</a>
  </nav>

  <main>
    <section>
      <article>
        <h2>Blog Post</h2>
        <p>Content here...</p>
      </article>
    </section>
  </main>

  <aside>
    Ads or links
  </aside>

  <footer>
    © 2026
  </footer>
</body>

🌟 Why Semantic HTML Matters

Better SEO
Improved accessibility
Cleaner & readable code
Easier for screen readers
Loved by Google ❤️

🚀 Best Practices

✅ Use semantic tags wherever possible
✅ One <main> per page
✅ Use <label> with form inputs


<label for="email">Email</label>
<input id="email" type="email">

🎯 CSS3 Selectors

Selectors decide which HTML elements get styled.

🔹 Basic Selectors


p { color: blue; }          /* element */
#title { font-size: 32px; } /* id */
.card { padding: 16px; }    /* class */

🔹 Grouping & Universal


h1, h2, h3 { font-family: Arial; }
* { margin: 0; padding: 0; }

🔹 Combinators


div p { color: red; }      /* descendant */
div > p { color: green; } /* direct child */
h1 + p { color: blue; }   /* adjacent sibling */

🔹 Attribute Selectors


input[type="text"] { border: 1px solid black; }

🔹 Pseudo-Classes & Pseudo-Elements


a:hover { color: red; }
li:first-child { font-weight: bold; }

p::first-letter { font-size: 2em; }

📦 Flexbox (1D Layout King 👑)

Best for rows OR columns.

🔹 Container Properties


.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

🔹 Main Flexbox Properties

flex-direction → row | column
justify-content → main axis
align-items → cross axis
gap → spacing (use this instead of margins!)

🔹 Example


.card-container {
  display: flex;
  gap: 20px;
}

👉 Use Flexbox for:

Navbars
Buttons
Cards
Centering content (finally 😌)

🧩 CSS Grid (2D Layout Boss 🧠)

Best for rows AND columns.

🔹 Grid Container


.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

🔹 Grid Placement


.item1 {
  grid-column: 1 / 3;
}

🔹 Layout Example


.page {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}

header { grid-area: header; }
aside  { grid-area: sidebar; }
main   { grid-area: main; }
footer { grid-area: footer; }

👉 Use Grid for:

Full-page layouts
Dashboards
Complex UI sections

🎞️ CSS Animations

Make your UI feel alive (not annoying).

🔹 Transitions


button {
  transition: background 0.3s ease;
}

button:hover {
  background: black;
}

🔹 Keyframe Animations


@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.box {
  animation: fadeIn 1s ease-in;
}

🔹 Transform Magic


.card:hover {
  transform: scale(1.05);
}

📱 Responsive Design

Make your site look good on all screens.

🔹 Media Queries


@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

🔹 Responsive Units

%
vw, vh
em, rem
clamp() (🔥 modern)


h1 {
  font-size: clamp(1.5rem, 5vw, 3rem);
}

🔹 Mobile-First Approach (Best Practice)


/* Mobile */
.container { padding: 10px; }

/* Desktop */
@media (min-width: 1024px) {
  .container { padding: 40px; }
}

🧠 Flexbox vs Grid (Quick Rule)

Use Case	Choose
Navbar / buttons	Flexbox
Page layout	Grid
One direction	Flexbox
Two directions	Grid

📦 Variables (ES6 Way)

JavaScript has 3 ways to declare variables.

❌ `var` (old & messy)


var x = 10;

– function-scoped
– can cause bugs
🚫 avoid in modern JS

✅ `let`


let count = 0;
count = 1;

block-scoped
value can change

✅ `const`


const PI = 3.14;

block-scoped
cannot be reassigned
✔ default choice

Rule of thumb: use const, switch to let only if needed

🔧 Functions

Functions let you reuse logic.

🔹 Function Declaration


function greet(name) {
  return `Hello, ${name}`;
}

🔹 Arrow Functions (ES6 ⭐)


const greet = (name) => `Hello, ${name}`;

🔹 Default Parameters


const add = (a = 0, b = 0) => a + b;

🔹 Callback Example


setTimeout(() => {
  console.log("Hello after 2 seconds");
}, 2000);

🌳 DOM Manipulation

DOM = Document Object Model
JavaScript uses DOM to change HTML dynamically.

🔹 Selecting Elements


document.getElementById("title");
document.querySelector(".card");
document.querySelectorAll("li");

🔹 Changing Content


title.textContent = "New Title";
title.innerHTML = "<span>Hello</span>";

🔹 Changing Styles


box.style.backgroundColor = "blue";
box.style.padding = "20px";

🔹 Adding / Removing Classes


box.classList.add("active");
box.classList.remove("active");
box.classList.toggle("active");

🔹 Creating Elements


const div = document.createElement("div");
div.textContent = "New Element";
document.body.appendChild(div);

🖱️ Events

Events let your page respond to user actions.

🔹 Common Events

click
submit
input
keydown
mouseover

🔹 Event Listener


button.addEventListener("click", () => {
  alert("Button clicked!");
});

🔹 Event Object


input.addEventListener("input", (e) => {
  console.log(e.target.value);
});

🔹 Prevent Default Behavior


form.addEventListener("submit", (e) => {
  e.preventDefault();
  console.log("Form submitted");
});

🔄 Event Delegation (Pro Move 😎)

Efficient handling for dynamic elements.


ul.addEventListener("click", (e) => {
  if (e.target.tagName === "LI") {
    console.log(e.target.textContent);
  }
});

🧠 ES6+ Must-Know Extras


// Destructuring
const { name, age } = user;

// Spread operator
const newArr = [...oldArr, 5];

// Template literals
console.log(`Hello ${name}`);

🚀 Mini Example: Button Counter


<button id="btn">Click</button>
<p id="count">0</p>

<script>
  let count = 0;
  const btn = document.getElementById("btn");
  const text = document.getElementById("count");

  btn.addEventListener("click", () => {
    count++;
    text.textContent = count;
  });
</script>

✅ Best Practices

✔ Use const by default
✔ Use arrow functions
✔ Avoid inline event handlers
✔ Keep JS logic separate from HTML
✔ Manipulate classes, not inline styles

📦 ES6 Modules

Modules let you split code into reusable files.

🔹 Export


// math.js
export const add = (a, b) => a + b;
export const sub = (a, b) => a - b;

🔹 Import


// app.js
import { add, sub } from "./math.js";

🔹 Default Export


export default function greet() {
  console.log("Hello");
}


import greet from "./greet.js";

👉 Use modules for scalable codebases.

🌐 Fetch API (Talking to Servers)

Used to call APIs and get data.

🔹 GET Request


fetch("https://api.example.com/users")
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error(err));

🔹 POST Request


fetch("/api/login", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ email, password })
});

🔹 Async / Await (Preferred ✅)


const getUsers = async () => {
  try {
    const res = await fetch("/api/users");
    const data = await res.json();
    console.log(data);
  } catch (err) {
    console.error(err);
  }
};

⚛️ Introduction to React.js (Optional but Powerful)

React = component-based UI library

Why React?

Reusable components
Fast updates (Virtual DOM)
Industry standard

🔹 Basic Component


function Welcome() {
  return <h1>Hello World</h1>;
}

🧩 Components, Props & State

🔹 Props (Data from Parent)


function User({ name }) {
  return <h2>Hello {name}</h2>;
}


<User name="Alice" />

📌 Props are read-only

🔹 State (Dynamic Data)


import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      {count}
    </button>
  );
}

📌 State triggers re-render

🖱️ Event Handling & Forms (React Way)

🔹 Event Handling


<button onClick={() => alert("Clicked!")}>
  Click Me
</button>

🔹 Controlled Form


function Login() {
  const [email, setEmail] = useState("");

  return (
    <form>
      <input
        value={email}
        onChange={e => setEmail(e.target.value)}
      />
    </form>
  );
}

📌 React controls form data via state

🧭 Routing

🔹 React Router (Recommended)


npm install react-router-dom


import { BrowserRouter, Routes, Route } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/login" element={<Login />} />
      </Routes>
    </BrowserRouter>
  );
}

🔹 Plain JavaScript Routing (SPA Style)


window.addEventListener("hashchange", () => {
  if (location.hash === "#/login") {
    renderLogin();
  }
});

👉 React Router is cleaner & scalable.

🧠 Mental Model (Super Important)

Concept	Think of it as
Component	Reusable UI block
Props	Inputs to component
State	Internal memory
Fetch	Data bridge
Router	Page switcher

🚀 What You Can Build Now

Login & Signup pages
Dashboards with API data
Single Page Applications
Admin panels
Your ML / analytics dashboards (perfect for you 👀)

UNIT 2

🐘 Introduction to PHP

PHP (Hypertext Preprocessor) is a server-side scripting language mainly used for:

Dynamic websites
Form handling
Database interaction (MySQL)
APIs & backend logic

🔹 Basic PHP Structure


<?php
  echo "Hello, World!";
?>

📌 PHP code runs on the server, not in the browser.

🧾 PHP Syntax Rules

Starts with <?php
Ends with ?> (optional in pure PHP files)
Statements end with ;
Variables start with $


<?php
  echo "Welcome to PHP";

📦 Variables in PHP


<?php
  $name = "Alice";
  $age = 22;
?>

No need to declare data type
Case-sensitive ($name ≠ $Name)

🔢 Data Types in PHP

🔹 Scalar Types


$string = "Hello";
$int = 10;
$float = 5.6;
$bool = true;

🔹 Compound Types


$array = [1, 2, 3];


$user = [
  "name" => "Alice",
  "age" => 22
];

🔹 Special Types

NULL
resource
object

➗ Operators in PHP

🔹 Arithmetic


$a = 10 + 5;
$b = 10 * 2;

🔹 Assignment


$x += 5;

🔹 Comparison


$a == $b;   // equal
$a === $b;  // equal + same type
$a != $b;

🔹 Logical


$a && $b;
$a || $b;
!$a;

🔀 Control Structures

🔹 if / else


if ($age >= 18) {
  echo "Adult";
} else {
  echo "Minor";
}

🔹 switch


switch ($day) {
  case "Mon":
    echo "Monday";
    break;
  case "Tue":
    echo "Tuesday";
    break;
  default:
    echo "Unknown day";
}

🔁 Loops

🔹 for Loop


for ($i = 1; $i <= 5; $i++) {
  echo $i;
}

🔹 while Loop


$i = 1;
while ($i <= 5) {
  echo $i;
  $i++;
}

🔹 do-while Loop


$i = 1;
do {
  echo $i;
  $i++;
} while ($i <= 5);

🔹 foreach (Very Important ⭐)


$colors = ["red", "green", "blue"];

foreach ($colors as $color) {
  echo $color;
}

🧠 Mini Example


<?php
  $marks = 75;

  if ($marks >= 90) {
    echo "Grade A";
  } elseif ($marks >= 60) {
    echo "Grade B";
  } else {
    echo "Fail";
  }
?>

✅ PHP Best Practices (Early Habits)

✔ Use === instead of ==
✔ Always validate user input
✔ Keep logic separate from HTML
✔ Use meaningful variable names

🔧 PHP Functions

Functions let you reuse logic.

🔹 Basic Function


<?php
function greet($name) {
  return "Hello, $name";
}

echo greet("Alice");
?>

🔹 Default Parameters


function add($a = 0, $b = 0) {
  return $a + $b;
}

🔹 Type Hinting (Modern PHP)


function multiply(int $a, int $b): int {
  return $a * $b;
}

📦 Arrays in PHP

🔹 Indexed Array


$colors = ["red", "green", "blue"];
echo $colors[0];

🔹 Associative Array (Very Important ⭐)


$user = [
  "name" => "Alice",
  "age" => 22
];

echo $user["name"];

🔹 Multidimensional Array


$students = [
  ["name" => "A", "marks" => 80],
  ["name" => "B", "marks" => 70]
];

🔹 Looping Arrays


foreach ($user as $key => $value) {
  echo "$key : $value";
}

🔹 Useful Array Functions


count($colors);
array_push($colors, "yellow");
array_merge($a, $b);
in_array("red", $colors);

📝 Working with Forms in PHP

🔹 Basic HTML Form


<form action="submit.php" method="POST">
  <input type="text" name="username">
  <button type="submit">Submit</button>
</form>

🌐 PHP Superglobals

Superglobals are always available variables.

🔹 $_GET

Used to get data from URL.


<a href="page.php?name=Alice">Click</a>


<?php
echo $_GET["name"];
?>

📌 Data visible in URL
📌 Good for search, filters

🔹 $_POST (Most Common)

Used for secure form data.


<?php
$username = $_POST["username"];
echo $username;
?>

📌 Data not visible in URL
📌 Used for login, signup, forms

🔹 Input Validation (IMPORTANT 🔐)


$username = htmlspecialchars($_POST["username"]);

Always sanitize user input!

🔹 $_SESSION

Used to store user data across pages.

Start Session (Required!)


session_start();

Set Session


$_SESSION["user"] = "Alice";

Access Session


echo $_SESSION["user"];

Destroy Session


session_destroy();

📌 Used for login systems

🍪 $_COOKIE

Used to store small data on user’s browser.

Set Cookie


setcookie("theme", "dark", time() + 3600);

Get Cookie


echo $_COOKIE["theme"];

📌 Cookies have expiry
📌 Not secure for sensitive data

🧠 Mini Example: Login Simulation


<?php
session_start();

if ($_POST["email"] === "admin@test.com") {
  $_SESSION["login"] = true;
  echo "Logged in";
} else {
  echo "Invalid login";
}
?>

⚠️ Security Best Practices

🚫 Never trust user input
✔ Use htmlspecialchars()
✔ Use password_hash() for passwords
✔ Prefer sessions over cookies
✔ Validate on both frontend & backend

🚀 What You Can Build Now

Login & logout system
Contact forms
Dashboard with session auth
PHP + MySQL apps
Admin panels

📁 PHP File Handling (Read / Write)

🔹 Reading Files

Read Entire File


<?php
$content = file_get_contents("data.txt");
echo $content;
?>

Read Line by Line


<?php
$file = fopen("data.txt", "r");

while (!feof($file)) {
  echo fgets($file);
}

fclose($file);
?>

🔹 Writing Files

Write / Overwrite


<?php
file_put_contents("data.txt", "Hello PHP");
?>

Append to File


<?php
file_put_contents("data.txt", "New Line\n", FILE_APPEND);
?>

🔹 File Modes (Important)

Mode	Description
`r`	Read
`w`	Write (overwrite)
`a`	Append
`r+`	Read & write

🔹 Check File Exists


if (file_exists("data.txt")) {
  echo "File found";
}

🔹 File Upload (Basic)


<form method="POST" enctype="multipart/form-data">
  <input type="file" name="file">
  <button>Upload</button>
</form>


<?php
move_uploaded_file(
  $_FILES["file"]["tmp_name"],
  "uploads/" . $_FILES["file"]["name"]
);
?>

📌 Always validate file type & size!

🧱 Object-Oriented PHP (OOP)

🔹 Class & Object


<?php
class User {
  public $name;

  function setName($name) {
    $this->name = $name;
  }
}

$user = new User();
$user->setName("Alice");
echo $user->name;
?>

🔹 Constructor


class User {
  public $name;

  function __construct($name) {
    $this->name = $name;
  }
}

🔹 Access Modifiers


class Account {
  public $id;
  protected $balance;
  private $pin;
}

Modifier	Access
public	Everywhere
protected	Class + child
private	Same class only

🔹 Inheritance


class Admin extends User {
  public function role() {
    return "Admin";
  }
}

🔹 Method Overriding


class Admin extends User {
  function greet() {
    return "Hello Admin";
  }
}

🔹 Static Methods & Properties


class Math {
  public static function add($a, $b) {
    return $a + $b;
  }
}

echo Math::add(2, 3);

🧠 Mini Example: File Logger (OOP)


class Logger {
  private $file = "log.txt";

  public function write($msg) {
    file_put_contents(
      $this->file,
      $msg . "\n",
      FILE_APPEND
    );
  }
}

$log = new Logger();
$log->write("User logged in");

⚠️ Best Practices

✔ Close files after use
✔ Validate uploads
✔ Use private properties
✔ Follow single responsibility
✔ Use OOP for scalable apps

🚀 What You Can Build Now

File-based CMS
Log systems
Upload managers
MVC-style apps
Pre-Laravel architecture

🚨 Error Handling in PHP

🔹 Types of Errors

Type	Example
Notice	Undefined variable
Warning	File not found
Fatal	Call to undefined function
Exception	Custom, catchable errors

🔧 Displaying Errors (Development Only!)


ini_set('display_errors', 1);
error_reporting(E_ALL);

⚠️ Never enable this in production

❌ Die & Exit (Basic)


if (!file_exists("data.txt")) {
  die("File not found");
}

✅ Try–Catch (Recommended ⭐)

Used with exceptions.


try {
  if (!file_exists("data.txt")) {
    throw new Exception("File missing");
  }
} catch (Exception $e) {
  echo $e->getMessage();
}

🔁 Finally Block


try {
  // risky code
} catch (Exception $e) {
  echo "Error occurred";
} finally {
  echo "Cleanup done";
}

🧠 Custom Exceptions


class MyException extends Exception {}

throw new MyException("Custom error");

📝 Error Logging (Production Safe)


error_log("Login failed", 3, "errors.log");

📌 Keeps errors hidden from users
📌 Essential for debugging live apps

📦 Introduction to Composer

Composer = dependency manager for PHP
(Like npm for JS, pip for Python)

🔹 Why Use Composer?

Install PHP libraries easily
Auto-load classes
Manage versions
Industry standard

⚙️ Install Composer


composer --version

If not installed → https://getcomposer.org

📄 composer.json (Heart of Composer)


{
  "require": {
    "monolog/monolog": "^3.0"
  }
}

Install dependencies:


composer install

🔄 Autoloading (Huge Win 🚀)


require "vendor/autoload.php";

Now Composer handles all require_once for you.

📘 Using a Package (Example: Monolog)


use Monolog\Logger;
use Monolog\Handler\StreamHandler;

$log = new Logger("app");
$log->pushHandler(new StreamHandler("app.log"));

$log->error("Something went wrong");

🧠 PSR-4 Autoload (Your Own Classes)


"autoload": {
  "psr-4": {
    "App\\": "src/"
  }
}


composer dump-autoload


use App\User;

🛡️ Best Practices

✔ Use try–catch for risky operations
✔ Log errors, don’t echo them
✔ Never expose stack traces in production
✔ Use Composer for all dependencies
✔ Follow PSR standards

🚀 What You’re Ready For Now

Clean, maintainable PHP apps
Real-world backend projects
Frameworks like Laravel
API development

UNIT 3

🗄️ Introduction to Databases

A database stores data in a structured way so it can be:

Inserted
Retrieved
Updated
Deleted
(aka CRUD)

🔹 Why Databases?

Faster than files
Secure & consistent
Handles large data
Multi-user access

🧠 SQL Basics

SQL (Structured Query Language) is used to talk to databases.

🔹 Core SQL Commands

Command	Purpose
`CREATE`	Create tables/databases
`INSERT`	Add data
`SELECT`	Fetch data
`UPDATE`	Modify data
`DELETE`	Remove data

🏗️ MySQL / MariaDB Basics

MariaDB is a drop-in replacement for MySQL (same syntax).

🔹 Create Database


CREATE DATABASE school;
USE school;

📋 Tables

A table = rows + columns.

🔹 Create Table


CREATE TABLE students (
  id INT AUTO_INCREMENT PRIMARY KEY,
  name VARCHAR(100),
  email VARCHAR(100) UNIQUE,
  age INT
);

🔹 Insert Data


INSERT INTO students (name, email, age)
VALUES ("Alice", "alice@mail.com", 22);

🔹 Select Data


SELECT * FROM students;
SELECT name, age FROM students;

🔹 Update Data


UPDATE students
SET age = 23
WHERE id = 1;

⚠️ Always use WHERE with UPDATE!

🔹 Delete Data


DELETE FROM students WHERE id = 1;

🔗 Relationships in Databases

Relationships connect tables using keys.

🔹 Primary Key


id INT PRIMARY KEY

🔹 Foreign Key


student_id INT,
FOREIGN KEY (student_id) REFERENCES students(id)

🔹 One-to-Many (Most Common)

Example: One student → many enrollments


CREATE TABLE enrollments (
  id INT AUTO_INCREMENT PRIMARY KEY,
  student_id INT,
  course VARCHAR(100),
  FOREIGN KEY (student_id) REFERENCES students(id)
);

🔀 SQL Joins (VERY IMPORTANT ⭐)

🔹 INNER JOIN

Returns matching rows only.


SELECT students.name, enrollments.course
FROM students
INNER JOIN enrollments
ON students.id = enrollments.student_id;

🔹 LEFT JOIN

Returns all rows from left table.


SELECT students.name, enrollments.course
FROM students
LEFT JOIN enrollments
ON students.id = enrollments.student_id;

🔹 RIGHT JOIN

Returns all rows from right table.


SELECT students.name, enrollments.course
FROM students
RIGHT JOIN enrollments
ON students.id = enrollments.student_id;

🧠 Visual Join Intuition

INNER JOIN → intersection
LEFT JOIN → left + match
RIGHT JOIN → right + match

⚡ Useful SQL Extras


WHERE age > 18
ORDER BY name ASC
LIMIT 10
COUNT(*)

🧠 Mini Real-World Example


SELECT s.name, COUNT(e.id) AS courses
FROM students s
LEFT JOIN enrollments e
ON s.id = e.student_id
GROUP BY s.name;

🛡️ Best Practices

✔ Use primary keys
✔ Normalize data
✔ Use foreign keys
✔ Avoid SELECT * in production
✔ Index frequently searched columns

🚀 What You’re Ready For Now

PHP + MySQL integration
Login systems
CRUD applications
APIs with relational data

🔁 CRUD Operations in SQL

CRUD = Create, Read, Update, Delete

Assume this table:


CREATE TABLE users (
  id INT AUTO_INCREMENT PRIMARY KEY,
  name VARCHAR(100),
  email VARCHAR(100) UNIQUE,
  password VARCHAR(255)
);

🟢 CREATE (INSERT)


INSERT INTO users (name, email, password)
VALUES ('Alice', 'alice@mail.com', 'hashed_pwd');

🔵 READ (SELECT)


SELECT * FROM users;

With condition:


SELECT name, email FROM users WHERE id = 1;

🟡 UPDATE


UPDATE users
SET name = 'Alice Smith'
WHERE id = 1;

⚠️ Never update without WHERE

🔴 DELETE


DELETE FROM users WHERE id = 1;

🧠 CRUD Summary

Operation	SQL
Create	INSERT
Read	SELECT
Update	UPDATE
Delete	DELETE

🔗 Connecting PHP with MySQL

You have two options:

mysqli (procedural / OOP)
PDO (recommended ⭐)

🟦 Option 1: mysqli (Procedural)

🔹 Connect


$conn = mysqli_connect("localhost", "root", "", "test_db");

if (!$conn) {
  die("Connection failed");
}

🔹 INSERT


$sql = "INSERT INTO users (name, email) VALUES ('Bob', 'bob@mail.com')";
mysqli_query($conn, $sql);

🔹 SELECT


$result = mysqli_query($conn, "SELECT * FROM users");

while ($row = mysqli_fetch_assoc($result)) {
  echo $row["name"];
}

🟦 Option 2: PDO (BEST PRACTICE ⭐)

🔹 Connect Using PDO


try {
  $pdo = new PDO(
    "mysql:host=localhost;dbname=test_db",
    "root",
    ""
  );
  $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
  die($e->getMessage());
}

🔐 Prepared Statements (SECURITY 🔒)

🔹 INSERT (Safe)


$stmt = $pdo->prepare(
  "INSERT INTO users (name, email) VALUES (?, ?)"
);

$stmt->execute(["Alice", "alice@mail.com"]);

🔹 SELECT


$stmt = $pdo->prepare("SELECT * FROM users");
$stmt->execute();

$users = $stmt->fetchAll(PDO::FETCH_ASSOC);

foreach ($users as $user) {
  echo $user["name"];
}

🔹 UPDATE


$stmt = $pdo->prepare(
  "UPDATE users SET name=? WHERE id=?"
);
$stmt->execute(["New Name", 1]);

🔹 DELETE


$stmt = $pdo->prepare("DELETE FROM users WHERE id=?");
$stmt->execute([1]);

🧠 Why PDO > mysqli?

Feature	PDO	mysqli
Prepared statements	✅	✅
Multiple DBs	✅	❌
Named parameters	✅	❌
Cleaner syntax	✅	❌

🛡️ Security Musts

✔ Always use prepared statements
✔ Never store plain passwords


password_hash($pwd, PASSWORD_BCRYPT);

✔ Validate user input
✔ Use try–catch for DB errors

🚀 Mini Flow (Real App)

HTML Form
PHP receives $_POST
PHP validates data
PDO inserts into MySQL
Success response

🔥 What You Can Build Now

User authentication
Admin dashboards
CRUD apps
APIs
CMS systems

🔐 Data Validation & Sanitization (Prevent SQL Injection)

🧨 What is SQL Injection?

When attackers inject SQL into inputs:


' OR 1=1 --

…and suddenly your whole table is exposed 😬

✅ Rule #1: NEVER trust user input

Frontend validation is nice.
Backend validation is mandatory.

🧼 Sanitization (Cleaning Input)

🔹 Basic Sanitization


$name = htmlspecialchars(trim($_POST["name"]));

🔹 Filter Functions (Recommended)


$email = filter_input(INPUT_POST, "email", FILTER_SANITIZE_EMAIL);

✔️ Validation (Check Correctness)


if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
  die("Invalid email");
}

Other examples:


is_numeric($age);
strlen($password) >= 8;

🔐 SQL Injection Protection (MOST IMPORTANT ⭐)

❌ WRONG (Vulnerable)


$sql = "SELECT * FROM users WHERE email='$email'";

✅ RIGHT (Prepared Statements)


$stmt = $pdo->prepare(
  "SELECT * FROM users WHERE email = ?"
);
$stmt->execute([$email]);

📌 Prepared statements separate SQL from data

🔑 Authentication System (Login & Signup)

🔹 Password Hashing (NEVER store plain text)


$hashed = password_hash($password, PASSWORD_BCRYPT);

🔹 Verify Password


if (password_verify($password, $row["password"])) {
  echo "Login success";
}

🧾 Signup Flow

Validate input
Hash password
Store in DB


$stmt = $pdo->prepare(
  "INSERT INTO users (email, password) VALUES (?, ?)"
);
$stmt->execute([$email, $hashed]);

🔐 Login Flow


$stmt = $pdo->prepare(
  "SELECT * FROM users WHERE email = ?"
);
$stmt->execute([$email]);
$user = $stmt->fetch();

if ($user && password_verify($password, $user["password"])) {
  session_start();
  $_SESSION["user_id"] = $user["id"];
}

🧠 Session Management

🔹 Start Session


session_start();

🔹 Set Session


$_SESSION["user"] = "Alice";

🔹 Check Auth (Protect Pages)


if (!isset($_SESSION["user"])) {
  header("Location: login.php");
  exit;
}

🔹 Logout


session_start();
session_destroy();

🛡️ Session Security Best Practices

✔ Regenerate session ID on login


session_regenerate_id(true);

✔ Use HTTPS
✔ Set session timeout
✔ Never store passwords in session

🍪 Cookies vs Sessions

Feature	Cookie	Session
Stored on	Browser	Server
Secure	❌	✅
Use for auth	❌	✅

🌱 Optional: Introduction to NoSQL (MongoDB)

🧠 What is NoSQL?

Schema-less
JSON-like documents
Flexible structure
Scales horizontally

📌 Use when data structure changes often.

📦 MongoDB vs MySQL

Feature	MongoDB	MySQL
Schema	Flexible	Fixed
Joins	Limited	Strong
Structure	JSON	Tables
Use cases	Logs, analytics	Transactions

🔗 Connecting MongoDB with PHP

🔹 Install MongoDB Driver


composer require mongodb/mongodb

🔹 Connect to MongoDB


require "vendor/autoload.php";

$client = new MongoDB\Client("mongodb://localhost:27017");
$collection = $client->test->users;

🔹 Insert Document


$collection->insertOne([
  "name" => "Alice",
  "email" => "alice@mail.com"
]);

🔹 Fetch Documents


$users = $collection->find();

foreach ($users as $user) {
  echo $user["name"];
}

🧠 When to Use What?

Auth, payments, CRUD → MySQL
Logs, ML data, flexible data → MongoDB
Hybrid apps → both (very common)

🚀 What You’re Fully Capable of Now

Secure login systems
Role-based access
Admin dashboards
REST APIs
Full backend for React apps

UNIT 4

🔗 How Frontend Talks to PHP Backend

Flow looks like this:


HTML / JS
   ↓ (Fetch / AJAX)
PHP Script
   ↓
Database
   ↓
JSON Response

📌 No page reload
📌 Smooth UX (SPA-like)

🧱 Backend Rule (Very Important)

Your PHP backend should return JSON, not HTML.


header("Content-Type: application/json");

🌐 Using Fetch API (Modern Way ⭐)

🔹 Frontend (GET Request)


<button id="load">Load Users</button>
<ul id="list"></ul>

<script>
document.getElementById("load").addEventListener("click", async () => {
  const res = await fetch("users.php");
  const data = await res.json();

  document.getElementById("list").innerHTML =
    data.map(u => `<li>${u.name}</li>`).join("");
});
</script>

🔹 Backend (users.php)


<?php
header("Content-Type: application/json");

echo json_encode([
  ["name" => "Alice"],
  ["name" => "Bob"]
]);

📤 POST Request (Forms Without Reload)

🔹 Frontend


<form id="loginForm">
  <input name="email">
  <input name="password" type="password">
  <button>Login</button>
</form>

<script>
document.getElementById("loginForm").addEventListener("submit", async e => {
  e.preventDefault();

  const formData = new FormData(e.target);

  const res = await fetch("login.php", {
    method: "POST",
    body: formData
  });

  const result = await res.json();
  alert(result.message);
});
</script>

🔹 Backend (login.php)


<?php
header("Content-Type: application/json");

if ($_POST["email"] === "admin@test.com") {
  echo json_encode(["status" => "success", "message" => "Logged in"]);
} else {
  echo json_encode(["status" => "error", "message" => "Invalid login"]);
}

📦 Sending JSON Instead of FormData


fetch("api.php", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ email, password })
});


$data = json_decode(file_get_contents("php://input"), true);

⏳ AJAX with XMLHttpRequest (Old but Useful)


const xhr = new XMLHttpRequest();
xhr.open("GET", "data.php");

xhr.onload = () => {
  console.log(JSON.parse(xhr.responseText));
};

xhr.send();

📌 Fetch is preferred in modern apps.

🔐 Sessions + Fetch (Auth)

Sessions still work automatically if:

Same domain
Cookies enabled


session_start();
$_SESSION["user"] = "Alice";


fetch("dashboard.php");

🧠 Common Use Cases

Login & Signup
Live search
Pagination
Form validation
Dashboards
API-based apps

⚠️ Common Mistakes

❌ Echo HTML instead of JSON
❌ Forget header("Content-Type: application/json")
❌ Not handling errors
❌ Exposing sensitive data

✅ Best Practices

✔ Always return JSON
✔ Use async/await
✔ Validate data in PHP
✔ Handle errors gracefully
✔ Separate frontend & backend folders

🚀 Mini Architecture (Clean Setup)


/frontend
  index.html
  app.js
/backend
  login.php
  users.php
  db.php

🔥 What You Can Build Now

SPA-style apps
React frontend + PHP backend
Admin panels
APIs for mobile apps
Secure dashboards

🌐 RESTful API Basics using PHP

🧠 What is a REST API?

REST (Representational State Transfer) is a way for systems to communicate over HTTP using standard methods.

Instead of pages → you send & receive JSON.

🔁 HTTP Methods (Core of REST)

Method	Purpose
GET	Read data
POST	Create data
PUT	Update data
DELETE	Delete data

📦 REST API Rules (Simple)

✔ Use URLs as resources
✔ Use HTTP methods, not verbs in URLs
✔ Return JSON only
✔ Use proper status codes

📂 Example Resource


/api/users
/api/users/1

🧱 Basic PHP API Structure


<?php
header("Content-Type: application/json");
header("Access-Control-Allow-Origin: *");

$method = $_SERVER["REQUEST_METHOD"];

🔵 GET – Fetch Data


if ($method === "GET") {
  echo json_encode([
    ["id" => 1, "name" => "Alice"],
    ["id" => 2, "name" => "Bob"]
  ]);
}

🟢 POST – Create Data


$data = json_decode(file_get_contents("php://input"), true);

if ($method === "POST") {
  echo json_encode([
    "status" => "success",
    "name" => $data["name"]
  ]);
}

🟡 PUT – Update Data


if ($method === "PUT") {
  parse_str(file_get_contents("php://input"), $data);
  echo json_encode(["updated" => true]);
}

🔴 DELETE – Remove Data


if ($method === "DELETE") {
  echo json_encode(["deleted" => true]);
}

📡 HTTP Status Codes (IMPORTANT ⭐)


http_response_code(201); // Created
http_response_code(400); // Bad Request
http_response_code(401); // Unauthorized
http_response_code(404); // Not Found
http_response_code(500); // Server Error

🧠 Example: RESTful Users API (Clean)


switch ($method) {
  case "GET":
    // fetch users
    break;

  case "POST":
    // create user
    break;

  case "PUT":
    // update user
    break;

  case "DELETE":
    // delete user
    break;
}

🔐 API Best Practices

✔ Validate input
✔ Use prepared statements
✔ Return consistent JSON
✔ Never expose DB errors
✔ Use tokens (JWT) for auth

📁 File Uploads & Media Management

🧠 How File Upload Works


Frontend Form
   ↓
$_FILES
   ↓
Server Validation
   ↓
Upload Directory
   ↓
DB (store filename/path)

📤 HTML Upload Form


<form method="POST" enctype="multipart/form-data">
  <input type="file" name="image">
  <button>Upload</button>
</form>

📦 PHP File Upload Handling


$file = $_FILES["image"];

move_uploaded_file(
  $file["tmp_name"],
  "uploads/" . $file["name"]
);

🔐 File Validation (CRITICAL 🔥)

✔ Check File Type


$allowed = ["image/jpeg", "image/png"];
if (!in_array($file["type"], $allowed)) {
  die("Invalid file type");
}

✔ Check File Size


if ($file["size"] > 2 * 1024 * 1024) {
  die("File too large");
}

✔ Rename Files (Avoid Overwrites)


$filename = uniqid() . "_" . basename($file["name"]);

🗂️ Store File Info in Database


CREATE TABLE uploads (
  id INT AUTO_INCREMENT PRIMARY KEY,
  filename VARCHAR(255),
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);


$stmt = $pdo->prepare(
  "INSERT INTO uploads (filename) VALUES (?)"
);
$stmt->execute([$filename]);

📸 Fetch Uploaded Media


$files = glob("uploads/*");

foreach ($files as $file) {
  echo "<img src='$file' width='100'>";
}

🛡️ Upload Security Checklist

🚫 Never trust filename
✔ Validate MIME type
✔ Limit file size
✔ Use uniqid()
✔ Block executable uploads
✔ Store uploads outside root (best)

🚀 What You Can Build Now

REST APIs for frontend/mobile
Image upload systems
Profile picture uploads
CMS media managers
Admin dashboards
React + PHP API backend

🔐 Security Best Practices in PHP

🧠 Core Security Rule

Never trust user input. Ever.

Assume everything coming from:

Forms
URLs
Cookies
Headers
APIs
is malicious until proven otherwise.

🧼 Data Sanitization & Validation

✔ Validation (Is data correct?)


if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
  die("Invalid email");
}

✔ Sanitization (Clean unsafe characters)


$email = filter_input(INPUT_POST, "email", FILTER_SANITIZE_EMAIL);

🚫 Prevent SQL Injection (CRITICAL 🔥)

❌ Vulnerable Code


$sql = "SELECT * FROM users WHERE email='$email'";

✅ Secure Code (Prepared Statements)


$stmt = $pdo->prepare(
  "SELECT * FROM users WHERE email = ?"
);
$stmt->execute([$email]);

✔ This alone stops 90% of attacks

🍪 Secure Cookies

❌ Insecure Cookie


setcookie("user", $id);

✅ Secure Cookie


setcookie("user", $id, [
  "expires" => time() + 3600,
  "httponly" => true,
  "secure" => true,
  "samesite" => "Strict"
]);

🔐 Cookie Flags Explained

Flag	Purpose
HttpOnly	Blocks JS access
Secure	HTTPS only
SameSite	Prevents CSRF

🧠 Session Security

✔ Start Session Securely


session_start([
  "use_strict_mode" => 1,
  "cookie_httponly" => 1,
  "cookie_secure" => 1
]);

🔄 Regenerate Session ID (IMPORTANT)


session_regenerate_id(true);

Use after login to prevent session hijacking.

⏳ Session Timeout


if (isset($_SESSION["last_activity"]) &&
    time() - $_SESSION["last_activity"] > 1800) {
  session_destroy();
}

$_SESSION["last_activity"] = time();

🛑 CSRF Protection

✔ CSRF Token


$_SESSION["token"] = bin2hex(random_bytes(32));

✔ In Form


<input type="hidden" name="token" value="<?= $_SESSION['token'] ?>">

✔ Validate


if ($_POST["token"] !== $_SESSION["token"]) {
  die("CSRF detected");
}

🧪 XSS Protection

❌ Vulnerable Output


echo $_GET["name"];

✅ Safe Output


echo htmlspecialchars($_GET["name"], ENT_QUOTES, "UTF-8");

🔐 Password Security

✔ Hash Passwords


$hash = password_hash($password, PASSWORD_DEFAULT);

✔ Verify


password_verify($password, $hash);

🚫 Never use MD5 or SHA1.

🚫 Disable Dangerous PHP Settings


display_errors = Off
allow_url_include = Off
expose_php = Off

🔐 File Upload Security (Recap)

✔ MIME type check
✔ Size limit
✔ Rename files
✔ No .php uploads
✔ Store outside web root

🚀 Deployment: Hosting PHP Applications

🖥️ Local Development (XAMPP / LAMP)

✔ XAMPP (Windows / macOS)

Apache
MySQL
PHP
phpMyAdmin

📂 Project folder:


htdocs/your_project/

Access:


http://localhost/your_project

✔ LAMP (Linux)


sudo apt install apache2 mysql-server php

Project path:


/var/www/html/

🌍 Shared Hosting (Beginner Friendly)

Examples

Bluehost
Hostinger
GoDaddy

How It Works

Upload files to public_html
Create DB via cPanel
Update config.php
Done ✅

✔ Cheap
❌ Limited control

☁️ Cloud Hosting (Professional Level)

Popular Choices

AWS EC2
DigitalOcean
Linode
Vultr

🧱 Typical Cloud Stack


Nginx / Apache
PHP-FPM
MySQL / MariaDB
Ubuntu Server

🚀 Deploy PHP App on Cloud (High Level)

Create server (Ubuntu)
Install LEMP/LAMP
Upload code (Git / SCP)
Set permissions
Configure .env
Enable HTTPS (Let’s Encrypt)
Done 🎉

🔐 Environment Variables (.env)


DB_HOST=localhost
DB_NAME=app_db
DB_USER=root
DB_PASS=secret

Load with:


$_ENV["DB_NAME"];

🚫 Never commit secrets to Git.

🔒 HTTPS (Mandatory)


sudo certbot --nginx

✔ Encrypts cookies
✔ Protects sessions
✔ Required for Secure flag

🧪 Deployment Checklist

✅ Error reporting OFF
✅ HTTPS enabled
✅ File permissions correct
✅ .env secured
✅ DB access limited
✅ Backups enabled

🎯 What You’re Ready For Now

Secure login systems
Production REST APIs
Hosting real apps
Handling real users
Moving to Laravel effortlessly

🧠 Version Control with Git & GitHub

❓ Why Git Matters

Without Git:

No collaboration
No history
No rollback
No professionalism

With Git:
✔ Track changes
✔ Collaborate safely
✔ Deploy easily
✔ Showcase work (GitHub)

🛠️ Git Basics (Core Commands)

🔹 Initialize a Repo


git init

🔹 Check Status


git status

🔹 Add Files


git add .

🔹 Commit Changes


git commit -m "Initial commit"

✔ Commit message should explain what changed

🌿 Branching (IMPORTANT)


git branch feature-login
git checkout feature-login

Or (shortcut):


git checkout -b feature-login

Why branches?

Work on features safely
Avoid breaking main code

🔀 Merge Branch


git checkout main
git merge feature-login

🌍 GitHub Workflow

🔹 Push to GitHub


git remote add origin https://github.com/user/repo.git
git push -u origin main

🔹 Pull Latest Changes


git pull origin main

🚫 .gitignore (CRITICAL 🔥)

Never commit:

Config files
Secrets
Vendor files

Example `.gitignore`


.env
/vendor
/node_modules
/uploads

🏷️ Common Git Mistakes

❌ Committing secrets
❌ Huge commits
❌ No branches
❌ No commit messages

🧠 Professional Git Habits

✔ Small commits
✔ Descriptive messages
✔ Feature branches
✔ README.md
✔ Issues & Projects

📘 README.md Structure


# Project Name
## Features
## Tech Stack
## Setup Instructions
## Screenshots

⚛️ Integrating Frontend Framework with PHP Backend

You’re moving into decoupled architecture now 🔥

🧠 How Modern Stack Works


React / Vue (Frontend)
        ↓ API Calls (JSON)
PHP REST API (Backend)
        ↓
Database

✔ Frontend = UI
✔ Backend = Logic + DB
✔ Communication = REST API

🔌 Backend (PHP API Example)


header("Content-Type: application/json");
header("Access-Control-Allow-Origin: *");

echo json_encode([
  "message" => "Hello from PHP API"
]);

🌐 CORS (IMPORTANT)


header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE");
header("Access-Control-Allow-Headers: Content-Type");

⚛️ React → PHP API (Fetch Example)


fetch("http://localhost/api/users.php")
  .then(res => res.json())
  .then(data => console.log(data));

🧠 React Component Example


import { useEffect, useState } from "react";

function Users() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch("http://localhost/api/users.php")
      .then(res => res.json())
      .then(setUsers);
  }, []);

  return (
    <ul>
      {users.map(u => (
        <li key={u.id}>{u.name}</li>
      ))}
    </ul>
  );
}

export default Users;

🧾 POST Data from React to PHP


fetch("http://localhost/api/create-user.php", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ name: "Alice" })
});


$data = json_decode(file_get_contents("php://input"), true);

🔐 Authentication with React + PHP

Options:

Sessions (same domain)
JWT (recommended)

JWT Flow


Login → Token → LocalStorage → API Headers


Authorization: Bearer TOKEN

🧪 Development Setup (Recommended)

Frontend	Backend
localhost:3000	localhost:8000
Vite / CRA	Apache / PHP

🚀 Production Setup

✔ Build frontend
✔ Upload /dist
✔ API on /api
✔ Enable HTTPS
✔ Secure CORS

🧠 Vue + PHP (Same Idea)


axios.get("/api/users")

Framework doesn’t matter — API contract does.

🎯 Real Projects You Can Build Now

React + PHP blog
Auth system with JWT
Admin dashboard
File upload manager
E-commerce backend
REST API for mobile apps

🔥 Perfect Capstone Project (Highly Recommended)

Full-Stack App

React frontend
PHP REST API
MySQL DB
JWT auth
File uploads
Role-based access
GitHub repo
Live deployment

Top Job & Internship Portals

GeeksforGeeks

Internshala

Google Careers

Apna Jobs

Instahyre

Naukri.com

Internship & Job Alerts

PGAGI Consultancy Pvt Ltd — AI/ML Intern

CyArt Tech — Cybersecurity Intern

NEC Corporation - Product Intern

Latest notes

Web development with Fullstack

Unit 1: Frontend Development

Unit 2: Backend Development with PHP

Unit 3: Database Management

Unit 4: Full-Stack Integration & Deployment

Lab Program 1: Responsive Website using HTML5 & CSS3

Lab Program 2: JavaScript DOM Manipulation & Events

Lab Program 3: Task Tracker / Portfolio Website

Lab Program 4: PHP Basics & Control Structures

Lab Program 5: PHP Forms & Session Management

Lab Program 6: Object-Oriented PHP Application

Lab Program 7: SQL & Database CRUD Operations

Lab Program 8: PHP + MySQL CRUD Application

Lab Program 9: User Authentication & Role-Based Access

Lab Program 10: Full-Stack PHP Project & Deployment

🔹 Lab Program 1: Responsive Website using HTML5 & CSS3

🎯 Aim

✅ Project Overview

📁 Project Structure

✅ 1️⃣ Use Semantic HTML5 Tags

Example Tags:

🏠 index.html (Home Page)

📄 about.html

📄 contact.html

✅ 2️⃣ Apply Flexbox / Grid Layout

📄 css/style.css

✅ 3️⃣ Make the Site Responsive (Media Queries)

📱 Responsive Behavior

📌 Expected Output

🎯 Learning Outcomes

🔹 Lab Program 2: JavaScript DOM Manipulation & Events

🎯 Aim

✅ Tasks Covered

📁 Project Structure

📝 index.html

🎨 style.css (Optional Styling)

💻 script.js

✅ 1️⃣ DOM Selection & Manipulation

✅ 2️⃣ Event Handling (Click & Submit)

✅ 3️⃣ Dynamic Content Update

📌 Expected Output

🎯 Learning Outcomes

🔹 Lab Program 3: Task Tracker / Portfolio Website

🎯 Aim

✅ Option 1: Vanilla JS Task Tracker (Using Fetch API)

📁 Project Structure

📝 Step 1: Navigation (Multi-page)

index.html

📄 data.json (Sample Data)

📄 tasks.html

💻 script.js (Fetch API)

📌 Features Implemented

✅ Option 2: React-Based Task Tracker (Recommended)

📁 Structure

🔹 Step 1: Routing Setup (App.jsx)

🔹 Navbar Component

🔹 Tasks Page (Using Fetch API)

🔹 State & Props Example (TaskCard Component)

📱 Responsive Layout Example (CSS)

📌 Expected Output

🎯 Learning Outcomes

🧪 Lab Program 4: PHP Basics & Control Structures

🎯 Aim

✅ 1. PHP Variables & Data Types

🔹 Example: index.php

📌 Data Types in PHP

✅ 2. Conditional Statements & Loops

🔹 Conditional Example

🔹 Example: `index.php`

🔹 File: `login.html`

🔹 File: `login.php`

🔹 File: `dashboard.php`

🔹 File: `logout.php`

🔹 File: `welcome.php`

🔹 File: `Calculator.php`