Scribd
Upload
22 views20 pages

Web Technology 1

Uploaded by

noor785malik
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
22 views20 pages

Web Technology 1

Uploaded by

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

WEB TECHNOLOGY EXAM PREPARATION NOTES

📌 Theory-based Topics:
🌐 Overview of WWW, Web Pages, Web Sites, Web Applications

✅ World Wide Web (WWW):

 The World Wide Web (WWW) is an information system where web pages and resources are
accessed over the Internet.
 It uses HTTP (Hypertext Transfer Protocol) to fetch resources from web servers.
 It was invented by Tim Berners-Lee in 1989.

✅ Web Pages:

 A Web Page is a single document on the Internet, written in HTML (HyperText Markup
Language).
 It can contain text, images, videos, links, and interactive content.
 Web pages are identified by URLs (Uniform Resource Locators).
 Example: https://www.example.com/home.html

✅ Web Sites:

 A Web Site is a collection of interconnected web pages under a single domain name.
 It provides information or services to users.
 Websites can be static (fixed content) or dynamic (content changes based on interaction).
 Example: https://www.wikipedia.org

✅ Web Applications:

 A Web Application is an interactive software application that runs on a web server and is
accessed through a web browser.
 Unlike websites, web applications allow users to input, retrieve, and manipulate data.
 Examples include Facebook, Gmail, YouTube.

🌐 HTTP Protocol (Hypertext Transfer Protocol)


✅ What is HTTP?

 HTTP (Hypertext Transfer Protocol) is an application-layer protocol used for transmitting data
over the World Wide Web (WWW).
 It allows communication between a client (browser) and a server (web server).
 Web pages, images, and files are transferred using HTTP.

✅ Features of HTTP:

 Stateless: Each request is independent; the server does not remember previous interactions.
 Connectionless: After a request is made, the connection between client and server is closed.
 Media Independent: Any type of data can be sent as long as both client and server understand
the format (e.g., text, images, videos).

✅ HTTP Methods:

 GET: Retrieves data from the server (e.g., fetching a web page).

http
CopyEdit
GET /index.html HTTP/1.1
Host: www.example.com

o This requests the "index.html" page from the server.


 POST: Submits data to the server (e.g., form submission).

http
CopyEdit
POST /submit-form HTTP/1.1
Host: www.example.com
Content-Type: application/x-www-form-urlencoded

username=hoor&password=12345

o This sends form data to the server for processing.


 PUT: Updates existing data on the server.
 DELETE: Removes data from the server.
 HEAD: Retrieves only the headers of a resource (like GET, but without the body).

✅ HTTP Request Structure:

 Request Line: Contains method (GET, POST), URL, and HTTP version.
 Headers: Contains additional information like the browser type and content type.
 Body: Contains data to be sent to the server (only in POST, PUT requests).
Example:

http
CopyEdit
POST /login HTTP/1.1
Host: www.example.com
Content-Type: application/json

{
"username": "hoor",
"password": "securepass"
}

✅ HTTP Response Structure:

 Status Line: Contains the HTTP version and status code (e.g., 200 OK, 404 Not Found).
 Headers: Contains server information, content type, etc.
 Body: Contains the actual HTML, JSON, or other content.

Example:

http
CopyEdit
HTTP/1.1 200 OK
Content-Type: text/html
Date: Sun, 09 May 2025 18:00:00 GMT

<html>
<body>
<h1>Login Successful</h1>
</body>
</html>

✅ Common HTTP Status Codes:

 200 OK: The request was successful.


 404 Not Found: The requested resource was not found.
 500 Internal Server Error: The server encountered an error.
 301 Moved Permanently: The resource has been moved to a new URL.

🌐 Client-Server Architecture

✅ What is Client-Server Architecture?

 It is a model where clients (users) request resources, and servers provide those resources.
 The client is typically a web browser (e.g., Chrome, Firefox), and the server is a remote
computer that stores web applications and databases.
 Communication between client and server happens over the Internet using protocols like HTTP.
✅ How It Works:

1. The client sends a request to the server.


2. The server processes the request, interacts with the database if needed, and prepares a
response.
3. The server sends the response back to the client.
4. The client displays the response to the user.

✅ Example:

 When you search for something on Google, your browser (client) sends a request to Google's
server.
 Google's server processes the request, finds the information, and sends it back to your browser.

✅ Components of Client-Server Architecture:

 Client: Frontend interface (browser or app) that interacts with the user.
 Server: Backend system that handles data processing and responds to client requests.
 Database: Stores and manages data that is retrieved and updated by the server.

✅ Types of Client-Server Architecture:

 Two-Tier Architecture: Client directly communicates with the server.


 Three-Tier Architecture:
o Client (Frontend) → Server (Logic Processing) → Database (Data Storage)
o More secure and scalable than two-tier.

🌐 Client-side vs. Server-side Scripting (10 Key Differences) (imp)

✅ 1️⃣ Execution Location:

 Client-side scripting executes directly in the user's web browser, allowing for quick interactions
and updates without communicating with the server.
 Server-side scripting executes on a remote web server, where all the logic is processed, and the
final output is sent back to the client's browser.
✅ 2️⃣ Languages Used:

 Client-side scripting uses languages like HTML, CSS, and JavaScript that run on the user's
browser.
 Server-side scripting uses languages like PHP, ASP.NET, Node.js, and Python that run on the
server.

✅ 3️⃣ Visibility of Code:

 In client-side scripting, the code is completely visible to the user and can be viewed by
inspecting the page source in the browser.
 In server-side scripting, the code is hidden from the user and only the final HTML output is
visible in the browser.

✅ 4️⃣ Data Access:

 Client-side scripting cannot directly access or manipulate data from databases; it can only send
requests to the server.
 Server-side scripting can directly access and manipulate databases, making it suitable for
fetching and storing data.

✅ 5️⃣ Speed of Execution:

 Client-side scripting is faster because it does not require a round-trip to the server; everything is
handled in the user's browser.
 Server-side scripting is slower in comparison because each request needs to be processed on
the server before the response is sent back to the browser.

✅ 6️⃣ Security Level:

 Client-side scripting is less secure since the code is visible to users, making it vulnerable to
manipulation and exploitation.
 Server-side scripting is more secure because the code is executed on the server and hidden from
the client's view, protecting it from tampering.

✅ 7️⃣ Purpose:

 The main purpose of client-side scripting is to manage UI interactions, form validation,


animations, and to dynamically update content on the page.
 The main purpose of server-side scripting is to handle business logic, interact with databases,
perform authentication, and manage sessions.

✅ 8️⃣ Processing Power:

 In client-side scripting, the processing is handled by the client's machine, using the browser's
engine for execution.
 In server-side scripting, the processing is managed by the server's hardware, which handles the
logic and database interactions.

✅ 9️⃣ Interaction with Server:

 Client-side scripting can only send HTTP requests to the server, usually through AJAX calls or
form submissions, but it cannot directly access server resources.
 Server-side scripting handles the complete request-response cycle, processes the logic, interacts
with the database, and prepares the final response for the client.

✅ 🔟 Examples of Use:

 In client-side scripting, tasks like form validation, animations, and live content updates (like chat
messages appearing instantly) are handled directly in the browser.
 In server-side scripting, tasks like user authentication, fetching data from databases, and storing
user inputs are handled securely on the server.

🌐 Introduction to SQL vs. NoSQL Databases (imp)

✅ What is SQL (Structured Query Language)?

 SQL (Structured Query Language) is a standardized programming language used for managing
and manipulating relational databases.
 It stores data in a tabular format (rows and columns) and enforces strict relationships between
data.
 SQL databases are known for ACID (Atomicity, Consistency, Isolation, Durability) properties,
ensuring reliable transactions.
 Examples of SQL databases include MySQL, PostgreSQL, Oracle, and Microsoft SQL Server.

✅ What is NoSQL (Not Only SQL) Database?

 NoSQL databases are designed to handle unstructured, semi-structured, or structured data that
does not fit neatly into a table format.
 They use flexible data models like document-based, key-value pairs, graphs, or wide-column
stores.
 NoSQL databases are known for high scalability and flexibility, making them ideal for large-scale
applications.
 Examples of NoSQL databases include MongoDB, Cassandra, Redis, and Couchbase.

🌐 Differences between SQL and NoSQL Databases

✅ 1️⃣ Data Storage Format:

 SQL databases store data in tables with rows and columns, ensuring structured and organized
information.
 NoSQL databases store data in various formats like documents (JSON), key-value pairs, wide-
columns, or graphs, offering more flexibility.

✅ 2️⃣ Schema Flexibility:

 SQL databases require a fixed schema, meaning the structure of the data must be defined
before data is inserted.
 NoSQL databases support a dynamic schema, allowing the structure of data to change over time
without affecting existing records.

✅ 3️⃣ Scalability:

 SQL databases are vertically scalable, meaning you need to increase the hardware capacity of
the server to handle more load.
 NoSQL databases are horizontally scalable, which means you can add more servers to handle
increased traffic.

✅ 4️⃣ Data Relationships:

 SQL databases support relationships (foreign keys) and are ideal for applications that require
complex joins and multi-table queries.
 NoSQL databases are generally non-relational, making them more efficient for document-based
or key-value pair data models.
✅ 5️⃣ ACID vs. BASE Compliance:

 SQL databases follow ACID properties (Atomicity, Consistency, Isolation, Durability) to ensure
reliable transactions.
 NoSQL databases follow BASE properties (Basically Available, Soft state, Eventually consistent),
prioritizing scalability over strict consistency.

✅ 6️⃣ Query Language:

 SQL databases use SQL (Structured Query Language) for defining and manipulating data, which
is standardized and well-structured.
 NoSQL databases use different query methods depending on the type, such as MongoDB's
JSON-like queries or Cassandra's CQL (Cassandra Query Language).

✅ 7️⃣ Performance:

 SQL databases perform well with complex queries and joins, but can be slower with large
amounts of unstructured data.
 NoSQL databases are optimized for large volumes of data and can handle high-traffic
applications efficiently.

✅ 8️⃣ Use Cases:

 SQL databases are best for applications requiring complex transactions, financial systems, and
enterprise applications where data integrity is crucial.
 NoSQL databases are ideal for real-time web apps, IoT applications, big data analytics, and
content management systems.

✅ 9️⃣ Backup and Recovery:

 SQL databases provide strong backup and recovery mechanisms, ensuring data consistency.
 NoSQL databases may require more manual backup strategies depending on the database type.

✅ 🔟 Examples of Databases:

 SQL databases include MySQL, PostgreSQL, Oracle, Microsoft SQL Server.


 NoSQL databases include MongoDB, Cassandra, Redis, Couchbase.
✅ Real-world Example:

 A Banking System prefers SQL databases because it requires strong relationships, high security,
and reliable transactions.
 A Social Media Platform prefers NoSQL databases because it needs scalability and flexible data
structures to handle millions of users.

🌐 Anatomy of HTTP Request and Response

✅ HTTP Request:

 An HTTP Request is sent from the client (browser) to the server to request data or perform an
action.
 It consists of the following main parts:
o Request Line: Specifies the HTTP method (GET, POST), URL, and HTTP version.
o Headers: Contains additional information like browser type, content type, and cookies.
o Body: Contains data to be sent to the server (only in POST or PUT requests).

Example of HTTP Request:

http
CopyEdit
POST /login HTTP/1.1
Host: www.example.com
Content-Type: application/x-www-form-urlencoded
Content-Length: 27

username=hoor&password=12345

Explanation:

 This is a POST request to the /login route on www.example.com.


 The content type is form data, and the body includes the username and password values.

✅ HTTP Response:

 An HTTP Response is sent from the server back to the client as a reply to the request.
 It consists of the following main parts:
o Status Line: Contains the HTTP version and status code (e.g., 200 OK, 404 Not Found).
o Headers: Contains information like server type, content type, and cookies.
o Body: Contains the actual content (HTML, JSON, etc.) sent back to the browser.

Example of HTTP Response:

http
CopyEdit
HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 56

<html>
<body>
<h1>Login Successful!</h1>
</body>
</html>

Explanation:

 This response indicates that the request was successful (200 OK) and it sends back an HTML
page with the message "Login Successful!"

🌐 Routes, Routing, and Sub-Routes

✅ Routes:

 A Route defines the URL structure and how the application should respond to client requests.
 Each route is associated with a specific action or page.

Example:

php
CopyEdit
// Route definition in Laravel (PHP Framework)
Route::get('/home', function () {
return view('home');
});

Explanation:

 This route listens for a GET request on /home and loads the home view.

✅ Routing:

 Routing is the process of determining which part of the application handles a specific request.
 It connects the URL path to a particular function or controller.

✅ Sub-Routes:

 Sub-Routes are nested routes that belong to a main route. They are used to handle more
specific paths.
Example:

php
CopyEdit
// Main Route
Route::get('/user', function () {
return "User Dashboard";
});

// Sub-Route
Route::get('/user/settings', function () {
return "User Settings Page";
});

Explanation:

 /user shows the dashboard, and /user/settings shows the settings page.

🌐 RESTful API (Representational State Transfer)

✅ What is RESTful API?

 A RESTful API is an architectural style that allows communication between client and server
over HTTP.
 It uses standard HTTP methods to perform CRUD operations (Create, Read, Update, Delete).

✅ HTTP Methods in RESTful API:

 GET: Retrieve data from the server.


 POST: Send new data to the server.
 PUT: Update existing data on the server.
 DELETE: Remove data from the server.

Example of RESTful API Request (GET):

http
CopyEdit
GET /api/users/1 HTTP/1.1
Host: www.example.com

Explanation:

 This is a GET request to fetch the details of a user with ID 1 from the /api/users endpoint.

Example of RESTful API Request (POST):


http
CopyEdit
POST /api/users HTTP/1.1
Host: www.example.com
Content-Type: application/json

{
"name": "Hoor Fatima",
"email": "[email protected]"
}

Explanation:

 This is a POST request to create a new user with the name "Hoor Fatima" and the provided
email address.

🌐 Explain HTTP Request and Response Structure

✅ Introduction to HTTP (Hypertext Transfer Protocol):

 HTTP (Hypertext Transfer Protocol) is the foundation of any data exchange on the Web.
 It is a protocol used for transferring hypertext requests and information between servers
and browsers.
 HTTP is a stateless protocol, meaning each request from client to server is processed
independently.

✅ 1️⃣ HTTP Request Structure:

 An HTTP Request is initiated by the client (usually a web browser) to request


information or resources from a server.
 It consists of three main parts:

1. Request Line:

 Contains the HTTP method (GET, POST, PUT, DELETE), the URL (Uniform
Resource Locator), and the HTTP version.
 Example:
 GET /index.html HTTP/1.1

2. Headers:

 Provide additional information about the client request like browser type, language, and
content type.
 Common headers include:
o Host: Specifies the domain name of the server (e.g., www.example.com).
o User-Agent: Provides information about the client browser.
o Content-Type: Specifies the media type of the resource.

3. Body (Optional):

 Contains data sent to the server (only used with POST, PUT requests).
 Example of form data:
 username=hoor&password=12345

✅ Example of a Full HTTP Request:


POST /login HTTP/1.1
Host: www.example.com
Content-Type: application/x-www-form-urlencoded
Content-Length: 27

username=hoor&password=12345

Explanation:

 This is a POST request to the /login route on www.example.com.


 The form data includes a username and password.
 The headers specify the content type and the length of the data being sent.

✅ 2️⃣ HTTP Response Structure:

 After receiving a request, the server processes it and sends back an HTTP Response.
 It consists of three main parts:

1. Status Line:

 Contains the HTTP version, a status code (like 200, 404), and a status message.
 Example:
 HTTP/1.1 200 OK

2. Headers:

 Provide information about the server and the content being sent.
 Common headers include:
o Content-Type: Specifies the format of the response (e.g., text/html).
o Content-Length: Indicates the size of the response body.
o Set-Cookie: Allows the server to store cookies in the client's browser.

3. Body:

 Contains the actual content being sent back to the client (e.g., HTML, JSON, images).
✅ Example of a Full HTTP Response:
HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 56

<html>
<body>
<h1>Login Successful!</h1>
</body>
</html>

Explanation:

 This is a response to a successful request, indicated by the status code 200 OK.
 The response body contains HTML that displays the message "Login Successful!".

✅ Common HTTP Status Codes:

 200 OK: The request was successful.


 404 Not Found: The requested resource could not be found.
 500 Internal Server Error: The server encountered an unexpected condition.
 301 Moved Permanently: The resource has been moved to a new URL.
 403 Forbidden: The server understands the request but refuses to authorize it.

✅ Conclusion:

 The HTTP request and response structure is the backbone of client-server


communication.
 Understanding its anatomy helps in debugging, optimizing, and developing robust web
applications.

🌐 Describe the Architecture of a Web Application

✅ Introduction to Web Application Architecture:

 Web application architecture defines the interactions between applications, databases,


and middleware systems on the web.
 It determines how web applications are structured, how components communicate, and
how data flows between them.
 A well-structured architecture ensures scalability, security, and maintainability of the
application.
✅ 1️⃣ Components of Web Application Architecture:

1. Client (Frontend):

 This is the part of the application that users interact with directly through a web browser.
 Technologies used include HTML, CSS, and JavaScript.
 It is responsible for displaying content, form validation, and UI interactions.

2. Server (Backend):

 The backend handles the logic, database interactions, and processing of user requests.
 Technologies used include PHP, Node.js, ASP.NET, Python.
 It receives requests from the client, processes them, and sends back responses.

3. Database:

 Databases store the application data, such as user information, products, transactions, etc.
 Common databases include MySQL, MongoDB, PostgreSQL, Oracle.
 The server communicates with the database to perform CRUD operations (Create, Read,
Update, Delete).

4. Middleware:

 Middleware is software that connects different applications or services.


 It handles tasks like authentication, data management, messaging, and API management.

✅ 2️⃣ Types of Web Application Architectures:

1. Single-Page Application (SPA):

 In SPA, the application loads a single HTML page and dynamically updates content
without refreshing the page.
 Technologies like React, Angular, Vue.js are used to build SPAs.
 Example: Gmail, Google Maps.

2. Multi-Page Application (MPA):

 In MPA, each request loads a new HTML page from the server.
 Traditional websites are usually MPAs, like Wikipedia, Amazon.

3. Microservices Architecture:

 Microservices break the application into small, independent services that work together.
 Each service handles a specific function like authentication, user management, or
payments.
 It allows easier scaling and management of applications.

4. Serverless Architecture:

 In Serverless architecture, backend logic is hosted in cloud-based functions.


 Developers don't need to manage the server; cloud providers handle that automatically.

✅ 3️⃣ Request-Response Cycle:

 When a user interacts with a web application (e.g., submits a form), a request is sent to
the server.
 The server processes the request, interacts with the database if required, and sends back a
response to the client.
 The client then displays the result to the user.

Example:

1. The user submits a login form on the frontend (client).


2. A POST request is sent to the server with login credentials.
3. The server checks the credentials in the database.
4. If valid, it responds with a success message; otherwise, an error message is sent back.
5. The client displays the appropriate response to the user.

✅ 4️⃣ Advantages of Well-Structured Web Application Architecture:

 Scalability: Easy to scale with user demand.


 Maintainability: Clear separation of components makes it easier to maintain.
 Security: Sensitive data is handled securely by the server.
 Performance: Optimized data handling and quick response times.

✅ Conclusion:

 Understanding the architecture of web applications is crucial for building efficient,


scalable, and secure web platforms.
 A well-structured architecture simplifies development, debugging, and maintenance,
leading to better user experiences.

🌐 Explain the Concept of RESTful API


✅ Introduction:

REST (Representational State Transfer) is an architectural style for designing networked applications. A
RESTful API (Application Programming Interface) allows communication between a client and a server
using standard HTTP methods. REST APIs are widely used for web services because they are lightweight,
scalable, and platform-independent.

✅ Key Principles of REST:

1. Stateless:
o Every request from the client to the server must contain all the information needed to
understand and process the request.
o The server does not store client state; each request is independent.
2. Client-Server Architecture:
o REST maintains a clear separation of concerns between the client (frontend) and the
server (backend).
o The client handles the user interface, while the server handles data storage and
processing.
3. Cacheable:
o Responses from the server are cacheable, which improves performance by reusing data
instead of fetching it again.
4. Layered System:
o REST allows for intermediate layers such as load balancers or proxies to improve
scalability and manage traffic.
5. Uniform Interface:
o A consistent way of interacting with resources through well-defined URIs (Uniform
Resource Identifiers).

✅ HTTP Methods Used in RESTful API:


HTTP Method Operation Description

GET Read Retrieves data from the server.

POST Create Sends data to the server to create a resource.

PUT Update Updates an existing resource on the server.

DELETE Delete Removes a resource from the server.

✅ Example of RESTful API Endpoints:

1️⃣ GET Request (Retrieve Data):


http
CopyEdit
GET /api/users/1 HTTP/1.1
Host: www.example.com

Explanation:
This request fetches the details of the user with ID 1 from the server.

Response:

json
CopyEdit
{
"id": 1,
"name": "Hoor Fatima",
"email": "[email protected]"
}

2️⃣ POST Request (Create Data):

http
CopyEdit
POST /api/users HTTP/1.1
Host: www.example.com
Content-Type: application/json

{
"name": "Hoor Fatima",
"email": "[email protected]"
}

Explanation:
This request creates a new user with the given name and email in the server database.

Response:

json
CopyEdit
{
"message": "User created successfully",
"userId": 2
}

3️⃣ PUT Request (Update Data):

http
CopyEdit
PUT /api/users/2 HTTP/1.1
Host: www.example.com
Content-Type: application/json

{
"name": "Hoor F. Fatima",
"email": "[email protected]"
}

Explanation:
This request updates the existing user information with ID 2.

Response:

json
CopyEdit
{
"message": "User updated successfully"
}

4️⃣ DELETE Request (Remove Data):

http
CopyEdit
DELETE /api/users/2 HTTP/1.1
Host: www.example.com

Explanation:
This request deletes the user with ID 2 from the database.

Response:

json
CopyEdit
{
"message": "User deleted successfully"
}

✅ Advantages of RESTful API:

 Stateless Operations: Every call is independent; server doesn't store session info.
 Scalability: Easy to scale because each request is isolated.
 Language Independence: Works with any language that can send HTTP requests.
 Caching Support: Responses can be cached for better performance.
 Flexibility: Supports multiple formats like JSON, XML, HTML, etc.
✅ Real-world Examples of RESTful API:

 Google Maps API: To fetch location data and display maps.


 Twitter API: For sending and retrieving tweets.
 YouTube Data API: For fetching videos, comments, and user information.

✅ Conclusion:

RESTful APIs are the backbone of modern web applications, enabling communication between frontend
and backend systems. They are simple, flexible, and scalable, making them the preferred choice for
building web and mobile applications.

You might also like