Activity: jQuery & PHP/MySQL

JavaScript library shortcuts and server-side database connectivity

Grade XII • Computer Science ⏱️ ~40 min

Brief Intro — jQuery & PHP/MySQL

jQuery makes your DOM dances effortless with "write less, do more" syntax. PHP and MySQL make your site store and serve real data on the server side. Together, they form the backbone of dynamic web applications.

In this activity, you'll learn how jQuery simplifies JavaScript, how PHP works as a server-side language, and how to connect PHP scripts to MySQL databases for full-stack web development.

Part 1 Introduction to jQuery

jQuery is a fast, small, feature-rich JavaScript library that simplifies DOM manipulation and event handling.

Interactive Simulator: Code Step-Walker

Step through jQuery and PHP code snippets line-by-line to understand what each line does.

Select a script to begin
Explanation
Click "Next Line" to see explanations for each code line.
This paragraph can be hidden with jQuery selectors.

Task 1: What is jQuery?

What is jQuery and why is it useful?

Definition: Lightweight, "write less, do more" JavaScript library that simplifies DOM manipulation, event handling, AJAX, and animations
Features: HTML/DOM manipulation, CSS manipulation, HTML event methods, effects and animations, AJAX, utilities
$ Sign: The $ sign is a shorthand for jQuery; defines/accesses jQuery
Adding jQuery: Download from jQuery.com or include from CDN (e.g., Google CDN) with script tag in head
Check Answer

Answer: jQuery is a JavaScript library that simplifies web development. The $ sign is its shorthand. Add it via download or CDN script tag.

Task 2: jQuery Selectors

How do jQuery selectors work?

Syntax: $(selector).action() — $ to define jQuery, selector to find elements, action() to perform on elements
Element Selector: $("p") selects all p elements
id Selector: $("#test") selects element with id="test"
class Selector: $(".test") selects all elements with class="test"
Examples: $(this).hide(), $("p").hide(), $(".test").hide(), $("#test").hide()

Check Answer

Answer: jQuery selectors use $() with CSS-style selectors. Element $("p"), id $("#test"), class $(".test"). They find elements to apply actions.

Task 3: jQuery Events & Effects

How does jQuery handle events and what are its advantages?

Events: jQuery responds to HTML events like click, load, change, mouseover, submit
Effects: hide(), show(), toggle() for element visibility manipulation
Advantages: Cross-browser compatibility (jQuery handles browser differences), less code for common tasks, extensive plugin ecosystem
Adding jQuery: Download production/development version or use CDN for caching and faster loading
Check Answer

Answer: jQuery handles events with methods like click(). Effects include hide(), show(), toggle(). Advantages: cross-browser compatibility, less code, plugin support.

Part 2 Server-Side Scripting with PHP

PHP is a server-side scripting language that runs on the web server before sending HTML to the browser.

Task 4: Client-Side vs Server-Side Scripting

What is the difference between client-side and server-side scripting?

Client-Side: Processed within the browser (e.g., JavaScript); code visible in View Source
Server-Side: Processed on the web server before data reaches browser; PHP code never reaches user, only HTML output does
PHP: Most common server-side language; free, open source, runs on various platforms (Windows, Linux, Unix, Mac OS X)
What PHP Can Do: Generate dynamic content, handle files, collect form data, send/receive cookies, modify databases, control user access, encrypt data
Check Answer

Answer: Client-side runs in browser; server-side runs on server. PHP is server-side, free, cross-platform. It generates dynamic content, handles files, forms, databases.

Task 5: PHP with HTML

How does PHP work with HTML?

PHP Tags: PHP code starts with <?php and ends with ?>; can be placed anywhere in document
PHP Files: Contain text, HTML, CSS, JavaScript, and PHP code; extension is .php
Execution: PHP code executes on server; result is embedded in HTML and sent to browser as plain HTML
View Source: When viewing page source, you see HTML but no PHP code
Check Answer

Answer: PHP uses <?php ?> tags. PHP files have .php extension and can contain HTML. PHP executes on server; only HTML output reaches browser.

Task 6: PHP Fundamentals

What are the basics of PHP programming?

Variables: Start with $ sign (e.g., $name, $age)
Output: echo or print to display text/content
Comments: Single-line with //, multi-line with /* */
Superglobals: $_POST collects form data sent via POST method; used to read user input
Check Answer

Answer: PHP variables start with $. Use echo/print for output. Comments: // and /* */. $_POST superglobal collects POST form data.

Part 3 Connecting PHP to MySQL

MySQL is the most popular database system used with PHP for storing and retrieving data.

Task 7: What is mysqli?

How does PHP connect to MySQL databases?

MySQLi: MySQL improved extension for PHP 5+; object-oriented and procedural APIs
PDO: PHP Data Objects; works with 12 different database systems
Connection Components: Server name (localhost), username (root default), password (empty default), database name
Connection Syntax: $conn = new mysqli($servername, $username, $password, $dbname)

Check Answer

Answer: PHP uses MySQLi or PDO to connect to MySQL. Connection requires server, username, password, database. Syntax: new mysqli(parameters).

Task 8: Creating a Database

How do you create a database and check connection status?

Create Database: CREATE DATABASE MyDB; SQL command to create new database
Check Connection: if ($conn->connect_error) { die("Connection failed: " . $conn->connect_error); }
Status Message: echo "Connected successfully"; displays success message
Close Connection: $conn->close(); closes the database connection when done
Check Answer

Answer: Use CREATE DATABASE MyDB to create database. Check connection with $conn->connect_error. Close with $conn->close().

Task 9: Creating a Table

How do you create a table in MySQL using PHP?

Create Table: CREATE TABLE students (id INT AUTO_INCREMENT PRIMARY KEY, name VARCHAR(50), age INT)
Attributes: id (primary key, auto-increment), name (varchar), age (int)
Execution: $conn->query($sql) to execute SQL statement
Error Handling: Check if table creation succeeded or failed
Check Answer

Answer: Use CREATE TABLE with column definitions. Execute with $conn->query(). Include id (auto-increment primary key), name, age fields.

Task 10: Inserting and Reading Data

How do you insert records and read them back from MySQL?

INSERT: INSERT INTO students (name, age) VALUES ('John', 20); adds new record
SELECT: SELECT * FROM students; retrieves all records from table
Execution: Use $conn->query() for both INSERT and SELECT
Fetching: Use while($row = $result->fetch_assoc()) to loop through results
Check Answer

Answer: INSERT adds records with VALUES. SELECT retrieves records. Execute both with query(). Use fetch_assoc() to read results row by row.

Part 4 Full Stack in One Story

Putting it all together: a complete PHP+MySQL workflow.

Task 11: Complete Script Trace

Trace a complete PHP+MySQL script from connection to close.

Step 1: Define connection parameters (server, username, password, database)
Step 2: Create connection object with new mysqli()
Step 3: Check connection status with connect_error
Step 4: Create database with CREATE DATABASE
Step 5: Create table with CREATE TABLE
Step 6: Insert data with INSERT INTO
Step 7: Select and display data with SELECT
Step 8: Close connection with close()
Check Answer

Answer: Complete flow: connect → check status → create DB → create table → insert data → select data → display → close. Each step builds on the previous.

Task 12: Design Exercise

Given a school student records scenario, design the reasoning for each PHP+MySQL script block.

Scenario: School needs to store student records (name, class, roll number, marks)
Database Design: Create database "school_db", table "students" with appropriate columns
Connection Block: Connect to MySQL server, check connection, select database
Insert Block: Form to collect student data, INSERT into students table
Display Block: SELECT all students, display in table format on web page
Check Answer

Answer: Design includes database creation, table structure, connection handling, data insertion from forms, and data retrieval for display. Each block serves a specific purpose in the student records system.

Ready to test your knowledge?

Take the Assessment →