11-10-2025

Web-Based
Application
Development

🌍 1. Internet Basics (इं टरने ट की मूल बात)

Definition (प रभाषा):
The Internet is a global network of interconnected computers that communicate using the TCP/IP
protocol to share data and resources.
Simple Words:
Internet ek network of networks hai — duniya ke computers ek dusre se baat karte hain data, email, aur
websites ke zariye.
Key Components:
Term English Meaning Hindi Meaning
IP Address Unique address for a device हर िडवाइस का यू िनक पहचान नं बर
Domain Name Human-readable website name वे बसाइट का नाम जैसे google.com
इं टरने ट दे ने वाली कंपनी (जै से Jio,
ISP (Internet Service Provider) Company providing internet
Airtel)
Bandwidth Data transfer speed डे टा टां सफर की गित
URL (Uniform Resource Locator) Address of a webpage वे बसाइट का पता
Example:
When you open www.flipkart.com,
your browser connects to Flipkart’s server using IP and loads the webpage.
Desi Example:
Internet ek highway jaisa hai jahan computers gaadiyan (data packets) bhejte hain aur lete hain 🚗💨

1
 11-10-2025

2. Introduction to Web Development (वे ब िवकास का प रचय)

Definition:
Web Development means creating and maintaining websites and web applications that run on browsers.
Types:

Type Description Example

Front-End What users see HTML, CSS, JavaScript
Back-End Server logic and database PHP, Node.js, MySQL
Full Stack Both front & back end Developer handling all parts

Desi Example:
Socho tum ek Online Tea Ordering Website bana rahe ho ☕
•Front-end → Menu aur button dikhata hai
•Back-end → Order save karta hai
•Database → Kisne kya order kiya, store karta hai

⚙ 3. Node.js and Git

Node.js:
•Node.js is a server-side JavaScript runtime (built on Chrome V8 engine).
•It allows JavaScript to run outside browsers.
Example Code:

Desi Explanation:
Node.js tumhare website ka backend worker hai — jo data
process karta hai, aur user ko result deta hai.

2
 11-10-2025

Git (Version Control System):

•Git helps developers track changes in code and collaborate easily.
•Hosted on GitHub, GitLab, etc.
Important Commands:

Command Use
git init Start repository
git add . Add files
git commit -m "message" Save version
git push Upload to GitHub

Desi Example:
Jaise school ke teacher homework copy check karte hain aur
version rakhte hain,
waise Git code ke version rakh kar rakhta hai

4. HTML (HyperText Markup Language)

Definition:
HTML is used to structure content on a webpage using tags.
Example:

Desi Analogy:
HTML website ka ढां चा (skeleton) hai — bina iske body khadi
nahi hoti.

3
 11-10-2025

🎨 5.CSS (Cascading Style Sheets)

Definition:
CSS is used to style HTML elements (color, layout, fonts, etc.).
Example:

Desi Analogy:
HTML ghar banata hai 🏠, CSS us ghar ko paint aur decorate
karta hai 🎨

⚡ 6. JavaScript (JS)
Definition:
JavaScript adds interactivity and logic to web pages.
Example:

Desi Analogy:
JS website me jaan daal deta hai – user ke click aur action pe
response deta hai.

4
 11-10-2025

🔁7. JQuery
Definition:
jQuery is a JavaScript library that makes JS code shorter and
easier.
Example:

Desi Example:
jQuery ek short-cut masala jaisa hai — kaam same karta hai par asaan tareeke se 🍲

🌐 8. JavaScript and HTTP (Forms)

HTTP:
•HTTP (HyperText Transfer Protocol) defines how browser and
server communicate.
•Request → Response Model
Example Flow:
1.User fills HTML form
2.Browser sends HTTP request to server
3.Server sends back a response
Example HTML Form:

Desi Example:
Jaise tum restaurant me order dete ho 🍛
•Waiter (HTTP) → order kitchen (server) tak le jata hai
•Cook (server) → food bana ke waiter ko deta hai
•Waiter → tumhe plate serve karta hai

5
 11-10-2025

9. Sessions and HTTP

Session:
Data stored on the server for each user.
Cookie:
Small data piece stored in the browser.
Example (PHP):

Desi Analogy:
•Cookie → chhoti chitthi jo browser rakhta hai 🍪
•Session → bada register jo server rakhta hai 📒

10. JavaScript & Document Object Model (DOM)

Definition:
The DOM is a tree-like structure representing all HTML elements
as objects.
JavaScript can manipulate these elements dynamically.
Example:

Desi Example:
DOM ek family tree jaisa hai — JavaScript kisi bhi member (element)
ko badal sakta hai.

6
 11-10-2025

11. XML (Extensible Markup Language)

Definition:
XML is used to store and transport data using custom tags.
Example:

Desi Analogy:
XML ek dabba (container) hai jisme data neatly pack hota hai 📦

12. DTD (Document Type Definition)

Definition:
DTD defines the structure, elements, and rules for XML
documents.
Example:

Desi Example:
DTD ek rulebook hai jo kehta hai XML me kya tag allowed hai aur kis order me.

7
 11-10-2025

13. Dreamweaver
Definition:
Adobe Dreamweaver is a web design and development tool
used for creating, editing, and publishing websites visually and
with code.
Features:
•WYSIWYG editor (What You See Is What You Get)
•Supports HTML, CSS, JS, PHP
•Live Preview of site
Desi Analogy:
Dreamweaver ek digital architect tool jaisa hai — bina code
likhe website ka design ready kar deta hai 🧱🎨

14. PHP (HyperText PreProcessor)

Definition:
PHP is a server-side scripting language used to make dynamic
web pages.
Example:

Desi Example:
HTML ek photo hai (static),
PHP ek video hai (dynamic) — har baar naya content dikhata hai 🎥

8
 11-10-2025

15. SQL & MySQL

Definition:
•SQL: Structured Query Language used to manage databases.
•MySQL: A relational database system using SQL.
Basic SQL Commands:

Desi Example:
MySQL ek register book jaisa hai jisme sab record likhe jaate hain 📓

16. Integrating PHP and MySQL (डे टाबे स इं टरै न)

Steps:
1.Create HTML form
2.Write PHP script to receive data
3.Connect to MySQL database
4.Insert or fetch data
5.Display results
Example:

Desi Example:
Socho tum ek Online Admission Form bana rahe ho 🎓
•Student form fill karta hai → (HTML)
•PHP data receive karta hai → (Server)
•MySQL data store karta hai → (Database)

9
 11-10-2025

Basic HTML Tag

Tag Purpose Example
<h1> to <h6> Headings <h1>Main Heading</h1>
<p> Paragraph <p>This is a paragraph.</p>
<b> Bold text <b>Important</b>
<i> Italic text <i>Italic word</i>
<u> Underline <u>Underlined text</u>
<br> Line break First line<br>Second line
<hr> Horizontal line <hr>

<a> Hyperlink <a href="https://google.com">Google</a>

<img> Image <img src="image.jpg" alt="Description">

<ul> Unordered list <ul><li>Apple</li><li>Banana</li></ul>

<ol> Ordered list <ol><li>First</li><li>Second</li></ol>

<li> List item <li>Item</li>

Basic SQL Command

Command /
Category Description / Use Example
Keyword
Database CREATE
Create a new database CREATE DATABASE school;
Commands DATABASE
Select a database to
USE USE school;
work with
DROP Delete an existing
DROP DATABASE school;
DATABASE database
Table CREATE TABLE students (id INT, name
CREATE TABLE Create a new table
Commands VARCHAR(50), age INT);
Add / remove / modify ALTER TABLE students ADD grade
ALTER TABLE
columns VARCHAR(10);
DROP TABLE Delete a table DROP TABLE students;
TRUNCATE Remove all data but
TRUNCATE TABLE students;
TABLE keep structure

10
 11-10-2025

Data
Insert new data into a INSERT INTO students VALUES (1, 'Kajal',
Manipulation INSERT INTO
table 20);
(DML)
Retrieve data from
SELECT SELECT * FROM students;
table
UPDATE students SET age = 21 WHERE id
UPDATE Modify existing records
= 1;
Delete records from
DELETE DELETE FROM students WHERE id = 1;
table
Filter rows based on SELECT * FROM students WHERE age >
Filtering Data WHERE
condition 18;
Sorting & Sort results SELECT * FROM students ORDER BY
ORDER BY
Limiting ascending/descending name ASC;
LIMIT Limit number of results SELECT * FROM students LIMIT 5;
Aggregate
COUNT() Count number of rows SELECT COUNT(*) FROM students;
Functions
SUM() Calculate total SELECT SUM(age) FROM students;
AVG() Calculate average SELECT AVG(age) FROM students;
MAX() Find maximum value SELECT MAX(age) FROM students;
MIN() Find minimum value SELECT MIN(age) FROM students;

Group rows with same SELECT grade, COUNT(*) FROM students

Grouping Data GROUP BY
values GROUP BY grade;
Constraints PRIMARY KEY Unique and not null id INT PRIMARY KEY
NOT NULL Value must not be empty name VARCHAR(50) NOT NULL
UNIQUE No duplicate values email VARCHAR(50) UNIQUE
DEFAULT Assign default value grade VARCHAR(5) DEFAULT 'C'
CHECK Condition must be true CHECK (age >= 18)
FOREIGN KEY (id) REFERENCES
FOREIGN KEY Link to another table
teacher(id)
SELECT s.name, t.subject FROM
Combine rows from two
Joins INNER JOIN students s INNER JOIN teacher t ON
tables with match
s.teacher_id=t.id;
Comparison
DELETE Remove specific rows DELETE FROM students WHERE id=1;
(Delete Types)
Remove all rows, keep
TRUNCATE TRUNCATE TABLE students;
structure
Remove table
DROP DROP TABLE students;
completely

11