School of Engineering and Information Technology

Name of the Program: BCA

Course Name and Code: Web Architecture– Principles and
Protocols Lab(CYB 258)
List of Experiments

Exp. No Name of Experiments

To implement the configuration of a basic HTTP server using Apache

1.
or Nginx.

To implement HTTP request methods (GET, POST, PUT, DELETE)

2.
and analyze responses using tools like cURL or Postman.

To implement the examination of HTTP message structures,

3.
including request and response headers and body content.

To implement server-side logic to handle different HTTP request

4.
methods using programming languages such as Python, Java, or PHP.

To implement the handling and interpretation of HTTP status codes in

5.
server-side applications.

To implement custom HTTP headers for enhanced functionality and

6.
security in web communication.

To implement caching control headers to manage browser and proxy

7.
caching behavior effectively.

1
 To implement session management in web applications using cookies
8.
or session tokens.

To implement an analysis of HTTP protocol evolution, comparing

9.
HTTP/1.0, HTTP/1.1, and HTTP/2.

To implement virtual hosting to serve multiple websites on a single

10.
web server.

To implement content chunking and streaming using chunked transfer

11.
encoding.

To implement secure web server communication by configuring

12.
HTTPS with SSL/TLS and following best security practices.

To implement firewall configurations to control access to HTTP

13.
servers.

14. To implement HTTP proxies for request forwarding and management.

To implement an analysis of browser functionality and the HTTP

15.
request-response processing flow.

To implement the design of a basic web page using HTML, CSS, and
16.
JavaScript to manipulate page elements dynamically.
To implement client-side form validation using JavaScript for real-
17. time user input validation.

To implement image rollover effects using JavaScript for interactive

18.
user experiences.

19. To implement JSON data parsing and manipulation using JavaScript.

To implement styling and layout control of web pages using

20.
Cascading Style Sheets (CSS).

2
1. To implement the configuration of a basic HTTP server using Apache
Objective:

To set up and configure a basic HTTP server using Apache.

Requirements:

• A system with Linux (Ubuntu/CentOS) or Windows

• Apache HTTP Server installed

• Basic knowledge of terminal/command prompt

Procedure:
1. Install Apache:

o On Ubuntu/Debian:

o sudo apt update

o sudo apt install apache2 -y

o On CentOS/RHEL:

o sudo yum install httpd -y

o On Windows:
▪ Download and install Apache from Apache Lounge.

2. Start and Enable Apache Service:

o On Ubuntu/Debian:

o sudo systemctl start apache2

o sudo systemctl enable apache2

o On CentOS/RHEL:

o sudo systemctl start httpd

o sudo systemctl enable httpd

o On Windows:

▪ Start Apache using httpd.exe from the Apache installation directory.

3. Verify Apache Installation:

o Open a web browser and enter http://localhost or http://your_server_ip.

o You should see the default Apache welcome page.

4. Configure Virtual Hosts:

3
 o Create a new configuration file for your website:

o sudo nano /etc/apache2/sites-available/mywebsite.conf # Ubuntu

o sudo nano /etc/httpd/conf.d/mywebsite.conf # CentOS

o Add the following content:

o <VirtualHost *:80>

o ServerAdmin [email protected]

o DocumentRoot /var/www/mywebsite

o ServerName mywebsite.com

o ErrorLog ${APACHE_LOG_DIR}/error.log

o CustomLog ${APACHE_LOG_DIR}/access.log combined

o </VirtualHost>
o Save and exit.
5. Enable the New Virtual Host:

o On Ubuntu/Debian:

o sudo a2ensite mywebsite.conf

o sudo systemctl restart apache2

o On CentOS/RHEL:

o sudo systemctl restart httpd

6. Allow HTTP Traffic in Firewall:

o On Ubuntu:

o sudo ufw allow 80/tcp

o sudo ufw reload

o On CentOS:

o sudo firewall-cmd --permanent --add-service=http

o sudo firewall-cmd --reload

4
2. To implement HTTP request methods (GET, POST, PUT, DELETE)
index.html

<!DOCTYPE html>

<html>

<head>

<title>HTTP Methods Demo</title>

</head>

<body>

<h2>GET Request</h2>

<form action="demo" method="GET">

<input type="text" name="name" placeholder="Enter name">

<input type="submit" value="Send GET">

</form>

<h2>POST Request</h2>

<form action="demo" method="POST">

<input type="text" name="data" placeholder="Enter data">

<input type="submit" value="Send POST">

</form>

<h2>PUT Request</h2>

<form id="putForm">

<input type="text" name="updateData" placeholder="Enter data to update">

<button onclick="sendPutRequest(event)">Send PUT</button>

</form>

<h2>DELETE Request</h2>

<form id="deleteForm">
<input type="text" name="id" placeholder="Enter ID to delete">

5
 <button onclick="sendDeleteRequest(event)">Send DELETE</button>

</form>

<script>
function sendPutRequest(e) {

e.preventDefault();

const data = document.querySelector('input[name="updateData"]').value;

fetch('demo', {

method: 'PUT',

headers: {

'Content-Type': 'application/x-www-form-urlencoded',
},
body: 'data=' + encodeURIComponent(data)

});

function sendDeleteRequest(e) {

e.preventDefault();

const id = document.querySelector('input[name="id"]').value;

fetch('demo', {
method: 'DELETE',

headers: {

'Content-Type': 'application/x-www-form-urlencoded',

},

body: 'id=' + encodeURIComponent(id)

});

}
</script>

</body>
</html>

6
DemoServlet.java

package com.example;

import jakarta.servlet.ServletException;

import jakarta.servlet.annotation.WebServlet;

import jakarta.servlet.http.HttpServlet;

import jakarta.servlet.http.HttpServletRequest;

import jakarta.servlet.http.HttpServletResponse;

import java.io.IOException;

import java.io.PrintWriter;

@WebServlet("/demo")

public class DemoServlet extends HttpServlet {

@Override

protected void doGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

response.setContentType("text/html");
PrintWriter out = response.getWriter();

String name = request.getParameter("name");

out.println("GET request received with name: " + name);

@Override

protected void doPost(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

response.setContentType("text/html");
PrintWriter out = response.getWriter();

7
 String data = request.getParameter("data");

out.println("POST request received with data: " + data);

@Override

protected void doPut(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

response.setContentType("text/html");

PrintWriter out = response.getWriter();

String data = request.getParameter("data");

out.println("PUT request received with data: " + data);

}

@Override

protected void doDelete(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

response.setContentType("text/html");

PrintWriter out = response.getWriter();

String id = request.getParameter("id");
out.println("DELETE request received for ID: " + id);

8
web.xml

<?xml version="1.0" encoding="UTF-8"?>

<web-app xmlns="https://jakarta.ee/xml/ns/jakartaee"

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:schemaLocation="https://jakarta.ee/xml/ns/jakartaee
https://jakarta.ee/xml/ns/jakartaee/web-app_5_0.xsd"

version="5.0">

<display-name>HTTP Methods Demo</display-name>

</web-app>

9
3. To implement the examination of HTTP message structures, including
request and response headers and body content.
message-inspector.html

<!DOCTYPE html>

<html>

<head>

<title>HTTP Message Inspector</title>

</head>

<body>

<h2>HTTP Message Inspector</h2>

<form action="inspector" method="POST" enctype="multipart/form-data">

<h3>Send a Test Request</h3>

<input type="text" name="message" placeholder="Enter message"><br><br>

<input type="file" name="file"><br><br>

<h4>Custom Headers</h4>
<input type="text" name="customHeader" placeholder="Custom header
value"><br><br>

<input type="submit" value="Send Request">

</form>

<script>

// Add custom header to all requests

fetch('inspector', {

headers: {
'X-Custom-Header': 'Test-Value',
'Content-Type': 'application/json'

10
 }

});

</script>

</body>
</html>

HttpMessageInspectorServlet.java

package com.example;

import jakarta.servlet.ServletException;

import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.annotation.MultipartConfig;
import jakarta.servlet.http.HttpServlet;

import jakarta.servlet.http.HttpServletRequest;

import jakarta.servlet.http.HttpServletResponse;

import jakarta.servlet.http.Part;

import java.io.IOException;

import java.io.PrintWriter;

import java.util.Collections;
import java.util.Enumeration;

import java.util.stream.Collectors;

@WebServlet("/inspector")

@MultipartConfig

public class HttpMessageInspectorServlet extends HttpServlet {

@Override

protected void doGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

11
 examineRequest(request, response);

@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

examineRequest(request, response);

private void examineRequest(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

response.setContentType("text/html");
PrintWriter out = response.getWriter();

// Set some response headers

response.setHeader("X-Response-Custom", "Hello from servlet");

response.setHeader("Cache-Control", "no-cache");

out.println("<html><body>");
out.println("<h2>HTTP Request Information</h2>");

// Request Line Information

out.println("<h3>Request Line</h3>");

out.println("Method: " + request.getMethod() + "<br>");

out.println("Request URI: " + request.getRequestURI() + "<br>");

out.println("Protocol: " + request.getProtocol() + "<br>");

// Request Headers
out.println("<h3>Request Headers</h3>");

12
Enumeration<String> headerNames = request.getHeaderNames();

while (headerNames.hasMoreElements()) {

String headerName = headerNames.nextElement();

out.println(headerName + ": " + request.getHeader(headerName) + "<br>");

}

// Request Parameters

out.println("<h3>Request Parameters</h3>");

request.getParameterMap().forEach((key, values) -> {

out.println(key + ": " + String.join(", ", values) + "<br>");

});

// Request Body (for POST requests)

if ("POST".equals(request.getMethod())) {

out.println("<h3>Request Body</h3>");

try {

// Handle multipart form data

if (request.getContentType() != null &&

request.getContentType().startsWith("multipart/form-data")) {
for (Part part : request.getParts()) {

out.println("Part Name: " + part.getName() + "<br>");

out.println("Size: " + part.getSize() + " bytes<br>");

out.println("Content Type: " + part.getContentType() + "<br><br>");

} else {

// Handle regular POST body

String body = request.getReader()

.lines()
.collect(Collectors.joining(System.lineSeparator()));

13
 out.println("Body Content: " + body + "<br>");

} catch (Exception e) {

out.println("Error reading body: " + e.getMessage());

}

// Response Information

out.println("<h3>Response Information</h3>");

out.println("Content-Type: " + response.getContentType() + "<br>");

out.println("Character Encoding: " + response.getCharacterEncoding() + "<br>");

out.println("Buffer Size: " + response.getBufferSize() + "<br>");

out.println("</body></html>");

14
4. To implement server-side logic to handle different HTTP request
methods using programming languages such as Python, Java, or PHP.
index.html

<!DOCTYPE html>

<html>

<head>

<title>HTTP Methods Demo</title>

</head>

<body>

<h2>User Management System</h2>

<!-- GET Request - Fetch User -->

<div>

<h3>Get User</h3>

<form action="userServlet" method="GET">

<input type="text" name="userId" placeholder="Enter User ID">

<input type="submit" value="Get User">

</form>

</div>

<!-- POST Request - Create User -->

<div>

<h3>Create User</h3>

<form action="userServlet" method="POST">

<input type="text" name="name" placeholder="Name">

<input type="email" name="email" placeholder="Email">

<input type="submit" value="Create User">

</form>
</div>

15
<!-- PUT Request - Update User -->

<div>

<h3>Update User</h3>
<form id="updateForm">

<input type="text" id="updateUserId" placeholder="User ID">

<input type="text" id="updateName" placeholder="New Name">

<input type="email" id="updateEmail" placeholder="New Email">

<button onclick="updateUser(event)">Update User</button>

</form>

</div>

<!-- DELETE Request - Delete User -->

<div>

<h3>Delete User</h3>

<form id="deleteForm">

<input type="text" id="deleteUserId" placeholder="User ID">

<button onclick="deleteUser(event)">Delete User</button>

</form>
</div>

<script>

function updateUser(e) {

e.preventDefault();

const data = {

userId: document.getElementById('updateUserId').value,
name: document.getElementById('updateName').value,

email: document.getElementById('updateEmail').value
};

16
 fetch('userServlet', {

method: 'PUT',

headers: {
'Content-Type': 'application/json'

},

body: JSON.stringify(data)

})

.then(response => response.text())

.then(result => alert(result));

function deleteUser(e) {

e.preventDefault();

const userId = document.getElementById('deleteUserId').value;

fetch(`userServlet?userId=${userId}`, {

method: 'DELETE'

})
.then(response => response.text())

.then(result => alert(result));

</script>

</body>

</html>

UserServlet.java

package com.example;

17
import jakarta.servlet.ServletException;

import jakarta.servlet.annotation.WebServlet;

import jakarta.servlet.http.HttpServlet;

import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

import java.io.IOException;

import java.io.BufferedReader;

import java.util.HashMap;

import java.util.Map;

import com.google.gson.Gson;

@WebServlet("/userServlet")
public class UserServlet extends HttpServlet {

private Map<String, User> users = new HashMap<>();

private Gson gson = new Gson();

@Override

protected void doGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

String userId = request.getParameter("userId");

response.setContentType("text/plain");

if (users.containsKey(userId)) {

response.getWriter().write("User found: " + gson.toJson(users.get(userId)));

} else {

response.setStatus(HttpServletResponse.SC_NOT_FOUND);
response.getWriter().write("User not found");

}
}

18
@Override

protected void doPost(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

String name = request.getParameter("name");

String email = request.getParameter("email");

String userId = String.valueOf(System.currentTimeMillis());

User newUser = new User(userId, name, email);

users.put(userId, newUser);

response.setContentType("text/plain");
response.getWriter().write("User created with ID: " + userId);

@Override

protected void doPut(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

StringBuilder buffer = new StringBuilder();

BufferedReader reader = request.getReader();

String line;

while ((line = reader.readLine()) != null) {

buffer.append(line);

User updatedUser = gson.fromJson(buffer.toString(), User.class);

response.setContentType("text/plain");

if (users.containsKey(updatedUser.getUserId())) {
users.put(updatedUser.getUserId(), updatedUser);

19
 response.getWriter().write("User updated successfully");

} else {

response.setStatus(HttpServletResponse.SC_NOT_FOUND);

response.getWriter().write("User not found");

}

@Override

protected void doDelete(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

String userId = request.getParameter("userId");

response.setContentType("text/plain");

if (users.containsKey(userId)) {

users.remove(userId);

response.getWriter().write("User deleted successfully");

} else {

response.setStatus(HttpServletResponse.SC_NOT_FOUND);

response.getWriter().write("User not found");

}

User.java

package com.example;

public class User {

private String userId;

private String name;

private String email;

20
 public User(String userId, String name, String email) {

this.userId = userId;

this.name = name;
this.email = email;

public String getUserId() {

return userId;

public String getName() {

return name;

public String getEmail() {

return email;

pom.xml

<dependency>

<groupId>com.google.code.gson</groupId>

<artifactId>gson</artifactId>

<version>2.10.1</version>
</dependency>

21
5. To implement the handling and interpretation of HTTP status codes in
server-side applications.
Status.html
<!DOCTYPE html>

<html>

<head>

<title>HTTP Status Code Demo</title>

<style>

.result {

margin: 20px;
padding: 10px;

border: 1px solid #ccc;

</style>

</head>

<body>

<h2>HTTP Status Code Demo</h2>

<div>

<h3>Test Different Status Codes</h3>

<button onclick="testStatus('success')">200 OK</button>

<button onclick="testStatus('created')">201 Created</button>

<button onclick="testStatus('notfound')">404 Not Found</button>

<button onclick="testStatus('unauthorized')">401 Unauthorized</button>

<button onclick="testStatus('forbidden')">403 Forbidden</button>

<button onclick="testStatus('redirect')">302 Redirect</button>

<button onclick="testStatus('server-error')">500 Server Error</button>

</div>

22
<div id="result" class="result"></div>

<script>
async function testStatus(action) {

try {

const response = await fetch(`status?action=${action}`);

const result = document.getElementById('result');

result.innerHTML = `

<h4>Response Details:</h4>
<p>Status: ${response.status} ${response.statusText}</p>
<p>Headers:</p>

<pre>${formatHeaders(response.headers)}</pre>

`;

if (response.ok) {

const text = await response.text();

result.innerHTML += `<p>Response Body:</p><div>${text}</div>`;

}

} catch (error) {

document.getElementById('result').innerHTML = `

<p>Error: ${error.message}</p>

`;

function formatHeaders(headers) {
let result = '';

23
 for (const [key, value] of headers) {

result += `${key}: ${value}\n`;

return result;
}

</script>

</body>

</html>

StatusCodeDemoServlet.java

package com.example;

import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;

import jakarta.servlet.http.HttpServlet;

import jakarta.servlet.http.HttpServletRequest;

import jakarta.servlet.http.HttpServletResponse;

import java.io.IOException;

import java.io.PrintWriter;

@WebServlet("/status")

public class StatusCodeDemoServlet extends HttpServlet {

@Override

protected void doGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

String action = request.getParameter("action");

try {
if (action == null) {

24
 // 400 Bad Request

response.sendError(HttpServletResponse.SC_BAD_REQUEST, "Action parameter

is required");

return;

switch (action) {
case "success":

// 200 OK

response.setStatus(HttpServletResponse.SC_OK);

sendResponse(response, "200 OK - Request successful");

break;

case "created":
// 201 Created

response.setStatus(HttpServletResponse.SC_CREATED);

response.setHeader("Location", "/resource/123");

sendResponse(response, "201 Created - Resource created successfully");

break;

case "notfound":
// 404 Not Found

response.sendError(HttpServletResponse.SC_NOT_FOUND, "Resource not

found");
break;

case "unauthorized":

// 401 Unauthorized

response.setStatus(HttpServletResponse.SC_UNAUTHORIZED);

25
 response.setHeader("WWW-Authenticate", "Basic realm=\"Access to status
demo\"");

sendResponse(response, "401 Unauthorized - Authentication required");

break;

case "forbidden":

// 403 Forbidden
response.sendError(HttpServletResponse.SC_FORBIDDEN, "Access denied");

break;

case "redirect":

// 302 Found (Temporary Redirect)

response.sendRedirect("/status?action=success");

break;

case "server-error":

// 500 Internal Server Error

throw new RuntimeException("Simulated server error");

default:

// 400 Bad Request

response.sendError(HttpServletResponse.SC_BAD_REQUEST, "Invalid action
parameter");

}
} catch (Exception e) {

response.sendError(HttpServletResponse.SC_INTERNAL_SERVER_ERROR,
"Internal Server Error: " + e.getMessage());

26
 private void sendResponse(HttpServletResponse response, String message) throws
IOException {

response.setContentType("text/html");

PrintWriter out = response.getWriter();

out.println("<html><body>");

out.println("<h2>Status Code Demo</h2>");

out.println("<p>" + message + "</p>");

out.println("<p>Status Code: " + response.getStatus() + "</p>");

out.println("</body></html>");

27
6. To implement custom HTTP headers for enhanced functionality and
security in web communication.
headers.html

<!DOCTYPE html>

<html>

<head>

<title>Custom Headers Demo</title>

<style>

.response {

margin: 20px;
padding: 10px;

border: 1px solid #ccc;

background-color: #f9f9f9;

</style>

</head>

<body>
<h2>Custom Headers Demo</h2>

<div>

<h3>Test API Request with Custom Headers</h3>

<input type="text" id="apiKey" placeholder="Enter API Key">

<input type="text" id="customHeader" placeholder="Custom Header Value">

<button onclick="sendRequest()">Send Request</button>

</div>

<div id="response" class="response"></div>

<script>

28
async function sendRequest() {

const apiKey = document.getElementById('apiKey').value;

const customHeader = document.getElementById('customHeader').value;

try {

const response = await fetch('/api/test', {

headers: {

'X-API-Key': apiKey,

'X-Custom-Header': customHeader,

'X-Client-Version': '1.0',

'X-Device-ID': generateDeviceId()
}
});

const responseDiv = document.getElementById('response');

responseDiv.innerHTML = '<h3>Response Headers:</h3>';

// Display response headers

for (const [key, value] of response.headers) {

responseDiv.innerHTML += `<strong>${key}:</strong> ${value}<br>`;

// Display response body

const text = await response.text();

responseDiv.innerHTML += '<h3>Response Body:</h3>';

responseDiv.innerHTML += text;

} catch (error) {
document.getElementById('response').innerHTML =

29
 `<p style="color: red">Error: ${error.message}</p>`;

function generateDeviceId() {

return 'WEB-' + Math.random().toString(36).substr(2, 9);

</script>

</body>

</html>

CustomHeaderServlet.java
package com.example;

import jakarta.servlet.ServletException;

import jakarta.servlet.annotation.WebServlet;

import jakarta.servlet.http.HttpServlet;

import jakarta.servlet.http.HttpServletRequest;

import jakarta.servlet.http.HttpServletResponse;

import java.io.IOException;
import java.io.PrintWriter;

import java.util.Enumeration;

@WebServlet("/api/*")

public class CustomHeaderServlet extends HttpServlet {

@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

// Set security headers

30
 setSecurityHeaders(response);

// Set custom application headers

response.setHeader("X-API-Version", "1.0");
response.setHeader("X-Request-ID", generateRequestId());

// Check for required custom headers

String apiKey = request.getHeader("X-API-Key");

if (apiKey == null || !validateApiKey(apiKey)) {

response.setStatus(HttpServletResponse.SC_UNAUTHORIZED);

response.getWriter().write("Invalid or missing API key");

return;
}

// Process the request

processRequest(request, response);

private void setSecurityHeaders(HttpServletResponse response) {

// Security Headers

response.setHeader("X-Content-Type-Options", "nosniff");

response.setHeader("X-Frame-Options", "DENY");

response.setHeader("X-XSS-Protection", "1; mode=block");

response.setHeader("Strict-Transport-Security", "max-age=31536000;
includeSubDomains");

response.setHeader("Content-Security-Policy",

"default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-

inline';");

response.setHeader("Referrer-Policy", "strict-origin-when-cross-origin");
}

31
 private String generateRequestId() {

return java.util.UUID.randomUUID().toString();

private boolean validateApiKey(String apiKey) {

// In production, validate against secure storage

return "your-valid-api-key".equals(apiKey);

private void processRequest(HttpServletRequest request, HttpServletResponse response)

throws IOException {
response.setContentType("text/html");

PrintWriter out = response.getWriter();

out.println("<html><body>");

out.println("<h2>Custom Headers Demo</h2>");

// Display received headers

out.println("<h3>Received Headers:</h3>");

Enumeration<String> headerNames = request.getHeaderNames();

while (headerNames.hasMoreElements()) {

String headerName = headerNames.nextElement();

out.println(headerName + ": " + request.getHeader(headerName) + "<br>");

out.println("</body></html>");

}
}

32
7. To implement caching control headers to manage browser and proxy
caching behavior effectively.

cache-test.html

<!DOCTYPE html>
<html>
<head>
<title>Cache Control Demo</title>
<style>
.result {
margin: 10px;
padding: 10px;
border: 1px solid #ccc;
}
.button-group {
margin: 10px 0;
}
</style>
</head>
<body>
<h2>Cache Control Testing</h2>

<div class="button-group">
<button onclick="testCache('/cache/no-cache')">Test No Cache</button>
<button onclick="testCache('/cache/public')">Test Public Cache</button>
<button onclick="testCache('/cache/private')">Test Private Cache</button>
<button onclick="testCache('/cache/etag')">Test ETag</button>
<button onclick="testCache('/cache/last-modified')">Test Last-Modified</button>
</div>

<div id="result" class="result"></div>

<script>
async function testCache(url) {
try {
const response = await fetch(url);
const result = document.getElementById('result');

result.innerHTML = `
<h3>Response Headers:</h3>
<pre>${formatHeaders(response.headers)}</pre>
<h3>Response Body:</h3>

33
 `;

const text = await response.text();

result.innerHTML += `<div>${text}</div>`;
} catch (error) {
document.getElementById('result').innerHTML =
`<p style="color: red">Error: ${error.message}</p>`;
}
}

function formatHeaders(headers) {
let result = '';
for (const [key, value] of headers) {
result += `${key}: ${value}\n`;
}
return result;
}
</script>
</body>
</html>

CacheControlServlet.java

package com.example;

import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.TimeZone;
@WebServlet("/cache/*")
public class CacheControlServlet extends HttpServlet {

@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String pathInfo = request.getPathInfo();

switch (pathInfo) {

34
 case "/no-cache":
setNoCacheHeaders(response);
break;
case "/public":
setPublicCacheHeaders(response);
break;
case "/private":
setPrivateCacheHeaders(response);
break;
case "/etag":
handleEtagRequest(request, response);
break;
case "/last-modified":
handleLastModifiedRequest(request, response);
break;
default:
response.sendError(HttpServletResponse.SC_NOT_FOUND);
return;
}
// Generate content
generateContent(response, pathInfo);
}
private void setNoCacheHeaders(HttpServletResponse response) {
response.setHeader("Cache-Control", "no-store, no-cache, must-revalidate");
response.setHeader("Pragma", "no-cache");
response.setDateHeader("Expires", 0);
}
private void setPublicCacheHeaders(HttpServletResponse response) {
response.setHeader("Cache-Control", "public, max-age=31536000"); // Cache for one
year
response.setDateHeader("Expires", System.currentTimeMillis() + 31536000000L);
}
private void setPrivateCacheHeaders(HttpServletResponse response) {
response.setHeader("Cache-Control", "private, max-age=3600"); // Cache for one
hour
response.setDateHeader("Expires", System.currentTimeMillis() + 3600000L);
}

private void handleEtagRequest(HttpServletRequest request, HttpServletResponse

response) {
String resourceVersion = "v1.2"; // This would typically be based on content
String etag = "\"" + resourceVersion + "\"";

35
 String ifNoneMatch = request.getHeader("If-None-Match");
if (ifNoneMatch != null && ifNoneMatch.equals(etag)) {
response.setStatus(HttpServletResponse.SC_NOT_MODIFIED);
return;
}
response.setHeader("ETag", etag);
response.setHeader("Cache-Control", "public, must-revalidate");
}
private void handleLastModifiedRequest(HttpServletRequest request,
HttpServletResponse response) {
long lastModified = 1609459200000L; // Example timestamp (2021-01-01)
long ifModifiedSince = request.getDateHeader("If-Modified-Since");
if (ifModifiedSince != -1 && ifModifiedSince >= lastModified) {
response.setStatus(HttpServletResponse.SC_NOT_MODIFIED);
return;
}
response.setDateHeader("Last-Modified", lastModified);
response.setHeader("Cache-Control", "public, must-revalidate");
}
private void generateContent(HttpServletResponse response, String pathInfo) throws
IOException {
response.setContentType("text/html");
response.getWriter().println("<html><body>");
response.getWriter().println("<h2>Cache Control Demo</h2>");
response.getWriter().println("<p>Path: " + pathInfo + "</p>");
response.getWriter().println("<p>Generated at: " + getCurrentTime() + "</p>");
response.getWriter().println("</body></html>");
}
private String getCurrentTime() {
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
sdf.setTimeZone(TimeZone.getTimeZone("UTC"));
return sdf.format(new Date()) + " UTC";
}
}

36
8. To implement session management in web applications using cookies or
session tokens.

session.html

<!DOCTYPE html>
<html>
<head>
<title>Session Management Demo</title>
<style>
.container {
margin: 20px;
padding: 20px;
border: 1px solid #ccc;
}
.status {
margin-top: 10px;
padding: 10px;
border-radius: 4px;
}
.success { background-color: #dff0d8; }
.error { background-color: #f2dede; }
</style>
</head>
<body>
<div class="container">
<h2>Session Management Demo</h2>

<div>
<h3>Login</h3>
<select id="sessionType">
<option value="cookie">Cookie-based Session</option>
<option value="token">Token-based Session</option>
</select>
<br><br>
<input type="text" id="username" placeholder="Username">
<input type="password" id="password" placeholder="Password">
<button onclick="login()">Login</button>
</div>

<div>
<h3>Session Status</h3>
<button onclick="checkSession()">Check Session</button>

37
 <button onclick="logout()">Logout</button>
</div>
<div id="status" class="status"></div>
</div>
<script>
async function login() {
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
const sessionType = document.getElementById('sessionType').value;

try {
const response = await fetch('/session/login', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body:
`username=${username}&password=${password}&sessionType=${sessionType}`
});

const result = await response.json();

showStatus(result.message, response.ok);
} catch (error) {
showStatus('Error: ' + error.message, false);
}
}

async function checkSession() {

const sessionType = document.getElementById('sessionType').value;
try {
const response = await fetch(`/session/check?sessionType=${sessionType}`);
const result = await response.json();
showStatus(
result.authenticated ?
`Authenticated as: ${result.username}` :
'Not authenticated',
result.authenticated
);
} catch (error) {
showStatus('Error: ' + error.message, false);
}
}

38
 async function logout() {
const sessionType = document.getElementById('sessionType').value;
try {
const response = await fetch('/session/logout', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: `sessionType=${sessionType}`
});

const result = await response.json();

showStatus(result.message, response.ok);
} catch (error) {
showStatus('Error: ' + error.message, false);
}
}

function showStatus(message, isSuccess) {

const statusDiv = document.getElementById('status');
statusDiv.textContent = message;
statusDiv.className = 'status ' + (isSuccess ? 'success' : 'error');
}
</script>
</body>
</html>

SessionManagementServlet.java

package com.example;

import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.Cookie;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import jakarta.servlet.http.HttpSession;
import java.io.IOException;
import java.util.UUID;
import java.util.concurrent.ConcurrentHashMap;

@WebServlet("/session/*")

39
public class SessionManagementServlet extends HttpServlet {

private static final ConcurrentHashMap<String, SessionData> tokenSessions = new

ConcurrentHashMap<>();

@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String action = request.getPathInfo();

switch (action) {
case "/login":
handleLogin(request, response);
break;
case "/logout":
handleLogout(request, response);
break;
default:
response.sendError(HttpServletResponse.SC_NOT_FOUND);
}
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String action = request.getPathInfo();

if ("/check".equals(action)) {
checkSession(request, response);
} else {
response.sendError(HttpServletResponse.SC_NOT_FOUND);
}
}

private void handleLogin(HttpServletRequest request, HttpServletResponse response)

throws IOException {
String username = request.getParameter("username");
String password = request.getParameter("password");
if (validateCredentials(username, password)) {
String sessionType = request.getParameter("sessionType");
if ("cookie".equals(sessionType)) {
// Cookie-based session
HttpSession session = request.getSession(true);
session.setMaxInactiveInterval(1800); // 30 minutes

40
 session.setAttribute("username", username);
session.setAttribute("loginTime", System.currentTimeMillis());
} else {
// Token-based session
String token = generateToken();
SessionData sessionData = new SessionData(username,
System.currentTimeMillis());
tokenSessions.put(token, sessionData);

Cookie tokenCookie = new Cookie("session_token", token);

tokenCookie.setHttpOnly(true);
tokenCookie.setSecure(true);
tokenCookie.setMaxAge(1800);
tokenCookie.setPath("/");
response.addCookie(tokenCookie);
}

response.setContentType("application/json");
response.getWriter().write("{\"status\":\"success\",\"message\":\"Login
successful\"}");
} else {
response.setStatus(HttpServletResponse.SC_UNAUTHORIZED);
response.getWriter().write("{\"status\":\"error\",\"message\":\"Invalid
credentials\"}");
}
}

private void handleLogout(HttpServletRequest request, HttpServletResponse response)

throws IOException {
String sessionType = request.getParameter("sessionType");

if ("cookie".equals(sessionType)) {
HttpSession session = request.getSession(false);
if (session != null) {
session.invalidate();
}
} else {
Cookie[] cookies = request.getCookies();
if (cookies != null) {
for (Cookie cookie : cookies) {
if ("session_token".equals(cookie.getName())) {
tokenSessions.remove(cookie.getValue());
cookie.setMaxAge(0);

41
 response.addCookie(cookie);
break;
}
}
}
}
response.getWriter().write("{\"status\":\"success\",\"message\":\"Logout
successful\"}");
}
private void checkSession(HttpServletRequest request, HttpServletResponse response)
throws IOException {
String sessionType = request.getParameter("sessionType");
boolean isValid = false;
String username = null;
if ("cookie".equals(sessionType)) {
HttpSession session = request.getSession(false);
if (session != null) {
username = (String) session.getAttribute("username");
isValid = username != null;
}
} else {
Cookie[] cookies = request.getCookies();
if (cookies != null) {
for (Cookie cookie : cookies) {
if ("session_token".equals(cookie.getName())) {
SessionData sessionData = tokenSessions.get(cookie.getValue());
if (sessionData != null && !isSessionExpired(sessionData)) {
isValid = true;
username = sessionData.username;
}
break;
}
}
}
}
response.setContentType("application/json");
if (isValid) {
response.getWriter().write(

String.format("{\"status\":\"success\",\"authenticated\":true,\"username\":\"%s\"}",
username)
);
} else {

42
 response.getWriter().write("{\"status\":\"success\",\"authenticated\":false}");
}
}
private boolean validateCredentials(String username, String password) {
// In production, implement proper authentication
return "demo".equals(username) && "password".equals(password);
}
private String generateToken() {
return UUID.randomUUID().toString();
}
private boolean isSessionExpired(SessionData sessionData) {
return System.currentTimeMillis() - sessionData.loginTime > 1800000; // 30 minutes
}
private static class SessionData {
final String username;
final long loginTime;

SessionData(String username, long loginTime) {

this.username = username;
this.loginTime = loginTime;
}
}
}

43
9. To implement an analysis of HTTP protocol evolution, comparing
HTTP/1.0, HTTP/1.1, and HTTP/2.

protocol-demo.html

<!DOCTYPE html>
<html>
<head>
<title>HTTP Protocol Evolution Demo</title>
<style>
.container {
margin: 20px;
padding: 20px;
border: 1px solid #ccc;
}
.result {
margin-top: 10px;
padding: 10px;
background-color: #f5f5f5;
border: 1px solid #ddd;
white-space: pre-wrap;
}
.timing {
color: #666;
font-style: italic;
}
</style>
</head>
<body>
<div class="container">
<h2>HTTP Protocol Evolution Demo</h2>

<div>
<h3>Protocol Tests</h3>
<button onclick="testProtocol('http1.0')">Test HTTP/1.0</button>
<button onclick="testProtocol('http1.1')">Test HTTP/1.1</button>
<button onclick="testProtocol('http2')">Test HTTP/2</button>
<button onclick="loadMultipleResources()">Load Multiple
Resources</button>
</div>

<div id="result" class="result"></div>

<div id="timing" class="timing"></div>

44
</div>

<script>
async function testProtocol(version) {
const startTime = performance.now();
try {
const response = await fetch(`/protocol/${version}`);
const text = await response.text();

let headerInfo = 'Response Headers:\n';

for (const [key, value] of response.headers) {
headerInfo += `${key}: ${value}\n`;
}

document.getElementById('result').textContent =
`${text}\n\n${headerInfo}`;

showTiming(startTime);
} catch (error) {
document.getElementById('result').textContent =
`Error: ${error.message}`;
}
}

async function loadMultipleResources() {

const startTime = performance.now();
try {
const response = await fetch('/protocol/resources');
const text = await response.text();
document.getElementById('result').textContent = text;
showTiming(startTime);
} catch (error) {
document.getElementById('result').textContent =
`Error: ${error.message}`;
}
}

function showTiming(startTime) {
const duration = performance.now() - startTime;
document.getElementById('timing').textContent =
`Request completed in: ${duration.toFixed(2)}ms`;
}
</script>

45
</body>
</html>

HttpProtocolDemoServlet.java

package com.example;

import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;

@WebServlet("/protocol/*")
public class HttpProtocolDemoServlet extends HttpServlet {

@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String pathInfo = request.getPathInfo();

switch (pathInfo) {
case "/http1.0":
demonstrateHttp10(response);
break;
case "/http1.1":
demonstrateHttp11(response);
break;
case "/http2":
demonstrateHttp2(response);
break;
case "/resources":
handleMultipleResources(request, response);
break;
default:
response.sendError(HttpServletResponse.SC_NOT_FOUND);
}
}

46
 private void demonstrateHttp10(HttpServletResponse response) throws
IOException {
// HTTP/1.0 characteristics
response.setHeader("Connection", "close"); // No keep-alive
response.setContentType("text/plain");

PrintWriter out = response.getWriter();

out.println("HTTP/1.0 Characteristics:");
out.println("- No persistent connections");
out.println("- Basic headers only");
out.println("- One request-response per TCP connection");
}
private void demonstrateHttp11(HttpServletResponse response) throws
IOException {
// HTTP/1.1 features
response.setHeader("Connection", "keep-alive");
response.setHeader("Transfer-Encoding", "chunked");
response.setContentType("text/plain");
PrintWriter out = response.getWriter();
out.println("HTTP/1.1 Improvements:");
out.println("- Persistent connections");
out.println("- Chunked transfer encoding");
out.println("- Host header required");
out.println("- Enhanced caching mechanisms");
}

private void demonstrateHttp2(HttpServletResponse response) throws IOException

{
// HTTP/2 features
response.setHeader("X-HTTP2-Support", "enabled");
response.setContentType("text/plain");

// Simulate HTTP/2 push (actual push would require container support)

response.setHeader("Link", "</styles.css>; rel=preload; as=style, " +
"</script.js>; rel=preload; as=script");
PrintWriter out = response.getWriter();
out.println("HTTP/2 Features:");
out.println("- Multiplexing");
out.println("- Server Push");
out.println("- Header Compression");
out.println("- Binary Protocol");
out.println("- Stream Prioritization");
}

47
 private void handleMultipleResources(HttpServletRequest request,
HttpServletResponse response)
throws IOException {
String protocol = request.getProtocol();
List<String> resources = new ArrayList<>();

// Simulate loading multiple resources

resources.add("main.css");
resources.add("app.js");
resources.add("image1.jpg");
resources.add("image2.jpg");
response.setContentType("text/plain");
PrintWriter out = response.getWriter();
out.println("Protocol: " + protocol);
out.println("\nSimulated Resource Loading:");

for (String resource : resources) {

out.println("Loading: " + resource);
// Simulate network delay
try {
Thread.sleep(100);
} catch (InterruptedException e) {
Thread.currentThread().interrupt();
}
}
}
}

48
10.To implement virtual hosting to serve multiple websites on a single web
server.

VirtualHostManager.java

package com.example;

import java.util.HashMap;
import java.util.Map;

public class VirtualHostManager {

private static final Map<String, VirtualHost> hosts = new HashMap<>();
static {
// Initialize virtual hosts
hosts.put("site1.localhost", new VirtualHost("Site 1", "/sites/site1"));
hosts.put("site2.localhost", new VirtualHost("Site 2", "/sites/site2"));
hosts.put("site3.localhost", new VirtualHost("Site 3", "/sites/site3"));
}
public static VirtualHost getHost(String serverName) {
return hosts.getOrDefault(serverName, hosts.get("site1.localhost")); //
Default host
}
public static class VirtualHost {
private final String siteName;
private final String documentRoot;
public VirtualHost(String siteName, String documentRoot) {
this.siteName = siteName;
this.documentRoot = documentRoot;
}
public String getSiteName() {
return siteName;
}
public String getDocumentRoot() {
return documentRoot;
}
}
}

49
 VirtualHostServlet.java

package com.example;

import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

@WebServlet("/vhost/*")
public class VirtualHostServlet extends HttpServlet {

@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// Get the server name from the request
String serverName = request.getServerName();
String pathInfo = request.getPathInfo();

// Get virtual host configuration

VirtualHostManager.VirtualHost host = VirtualHostManager.getHost(serverName);

response.setContentType("text/html");
PrintWriter out = response.getWriter();

out.println("<!DOCTYPE html>");
out.println("<html>");
out.println("<head>");
out.println("<title>" + host.getSiteName() + "</title>");
out.println("</head>");
out.println("<body>");

// Display virtual host information

out.println("<h1>Welcome to " + host.getSiteName() + "</h1>");
out.println("<p>Server Name: " + serverName + "</p>");
out.println("<p>Document Root: " + host.getDocumentRoot() + "</p>");
out.println("<p>Requested Path: " + pathInfo + "</p>");

// Display virtual host menu

50
 out.println("<h2>Available Virtual Hosts:</h2>");
out.println("<ul>");
out.println("<li><a href='http://site1.localhost:8080/vhost/'>Site 1</a></li>");
out.println("<li><a href='http://site2.localhost:8080/vhost/'>Site 2</a></li>");
out.println("<li><a href='http://site3.localhost:8080/vhost/'>Site 3</a></li>");
out.println("</ul>");

out.println("</body>");
out.println("</html>");
}
}

web.xml

<?xml version="1.0" encoding="UTF-8"?>

<web-app xmlns="https://jakarta.ee/xml/ns/jakartaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="https://jakarta.ee/xml/ns/jakartaee
https://jakarta.ee/xml/ns/jakartaee/web-app_5_0.xsd"
version="5.0">

<display-name>Virtual Hosting Demo</display-name>

<!-- Virtual Host Mappings -->

<context-param>
<param-name>virtualHostConfig</param-name>
<param-value>/WEB-INF/virtual-hosts.properties</param-value>
</context-param>
</web-app>

51
virtual-hosts.properties

# Virtual Host Configurations

site1.localhost.name=Site 1
site1.localhost.docroot=/sites/site1

site2.localhost.name=Site 2
site2.localhost.docroot=/sites/site2

site3.localhost.name=Site 3
site3.localhost.docroot=/sites/site3

To test this locally, you'll need to:

1. Add these entries to your hosts file ( C:\Windows\System32\drivers\etc\hosts ):

plaintext
127.0.0.1 site1.localhost
127.0.0.1 site2.localhost
127.0.0.1 site3.localhost

2. Create the site directories:

bash
mkdir C:\tomcat\webapps\ROOT\sites\site1
mkdir C:\tomcat\webapps\ROOT\sites\site2
mkdir C:\tomcat\webapps\ROOT\sites\site3

52
11. To implement content chunking and streaming using chunked transfer
encoding.
streaming.html

<!DOCTYPE html>

<html>

<head>

<title>Content Streaming Demo</title>

<style>

.container {

margin: 20px;
padding: 20px;

border: 1px solid #ccc;

.output {

margin-top: 10px;

padding: 10px;

background-color: #f5f5f5;
border: 1px solid #ddd;

min-height: 200px;

white-space: pre-wrap;

.progress {

margin-top: 10px;

width: 100%;
height: 20px;

</style>

</head>
<body>

53
<div class="container">

<h2>Content Streaming Demo</h2>

<div>
<h3>Streaming Options</h3>

<button onclick="streamText()">Stream Text</button>

<button onclick="streamData()">Stream Large Data</button>

<button onclick="startEventStream()">Start Server Events</button>

<button onclick="stopEventStream()">Stop Server Events</button>

</div>

<progress id="progress" class="progress" value="0" max="100"></progress>

<div id="output" class="output"></div>

</div>

<script>

let eventSource = null;

async function streamText() {

const output = document.getElementById('output');

output.textContent = '';

try {

const response = await fetch('/stream/text');

const reader = response.body.getReader();

const decoder = new TextDecoder();

while (true) {
const {done, value} = await reader.read();

54
 if (done) break;

output.textContent += decoder.decode(value);

}
} catch (error) {

output.textContent += '\nError: ' + error.message;

async function streamData() {

const output = document.getElementById('output');

const progress = document.getElementById('progress');
output.textContent = '';

let bytesReceived = 0;

try {

const response = await fetch('/stream/data');

const reader = response.body.getReader();

const contentLength = 81920; // Expected total bytes (10 chunks * 8KB)

while (true) {

const {done, value} = await reader.read();

if (done) break;

bytesReceived += value.length;

progress.value = (bytesReceived / contentLength) * 100;

output.textContent = `Received ${bytesReceived} bytes of data\n`;

}
} catch (error) {

55
 output.textContent += '\nError: ' + error.message;

function startEventStream() {

const output = document.getElementById('output');

output.textContent = '';

if (eventSource) {

eventSource.close();

eventSource = new EventSource('/stream/events');

eventSource.onmessage = function(event) {

output.textContent += event.data + '\n';

};

eventSource.onerror = function(error) {

output.textContent += 'Error: Connection lost\n';

eventSource.close();

};

function stopEventStream() {

if (eventSource) {

eventSource.close();
eventSource = null;

}
}

56
 </script>

</body>

</html>

StreamingServlet.java
package com.example;

import jakarta.servlet.ServletException;

import jakarta.servlet.annotation.WebServlet;

import jakarta.servlet.http.HttpServlet;

import jakarta.servlet.http.HttpServletRequest;

import jakarta.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

import java.util.concurrent.TimeUnit;

@WebServlet("/stream/*")

public class StreamingServlet extends HttpServlet {

@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

String pathInfo = request.getPathInfo();

switch (pathInfo) {

case "/text":

streamTextContent(response);
break;

case "/data":
streamLargeData(response);

57
 break;

case "/events":

streamServerEvents(response);

break;
default:

response.sendError(HttpServletResponse.SC_NOT_FOUND);

private void streamTextContent(HttpServletResponse response) throws IOException {

response.setContentType("text/plain");
response.setHeader("Transfer-Encoding", "chunked");

PrintWriter writer = response.getWriter();

for (int i = 1; i <= 5; i++) {

writer.write("Chunk " + i + " of streaming data\n");

writer.flush();

try {

TimeUnit.SECONDS.sleep(1);

} catch (InterruptedException e) {

Thread.currentThread().interrupt();

break;

}
}

private void streamLargeData(HttpServletResponse response) throws IOException {

58
 response.setContentType("application/octet-stream");

response.setHeader("Transfer-Encoding", "chunked");

byte[] buffer = new byte[8192]; // 8KB chunks

int totalChunks = 10;

for (int i = 0; i < totalChunks; i++) {

// Fill buffer with sample data

for (int j = 0; j < buffer.length; j++) {

buffer[j] = (byte)(j % 256);

response.getOutputStream().write(buffer);

response.getOutputStream().flush();

try {

TimeUnit.MILLISECONDS.sleep(500);

} catch (InterruptedException e) {

Thread.currentThread().interrupt();
break;

private void streamServerEvents(HttpServletResponse response) throws IOException {

response.setContentType("text/event-stream");
response.setCharacterEncoding("UTF-8");

response.setHeader("Cache-Control", "no-cache");
response.setHeader("Connection", "keep-alive");

59
 PrintWriter writer = response.getWriter();

for (int i = 1; i <= 5; i++) {

writer.write("data: Event " + i + " at " + System.currentTimeMillis() + "\n\n");

writer.flush();

try {

TimeUnit.SECONDS.sleep(2);

} catch (InterruptedException e) {

Thread.currentThread().interrupt();
break;
}

60
12. To implement secure web server communication by configuring HTTPS
with SSL/TLS and following best security practices.

secure-test.html

<!DOCTYPE html>
<html>
<head>
<title>HTTPS Security Test</title>
<style>
.container {
margin: 20px;
padding: 20px;
border: 1px solid #ccc;
}
.status {
margin-top: 10px;
padding: 10px;
background-color: #f5f5f5;
}
</style>
</head>
<body>
<div class="container">
<h2>HTTPS Security Test</h2>

<div>
<button onclick="checkSecureConnection()">Check Connection
Security</button>
<button onclick="testSecureEndpoint()">Test Secure Endpoint</button>
</div>

<div id="status" class="status"></div>

</div>

<script>
async function checkSecureConnection() {
const status = document.getElementById('status');
status.innerHTML = `
<p>Protocol: ${window.location.protocol}</p>
<p>TLS Version: ${await getTLSVersion()}</p>
<p>Security Headers: ${await checkSecurityHeaders()}</p>
`;

61
 }

async function getTLSVersion() {

try {
const response = await fetch('/secure/info');
const connection = response.headers.get('Connection-Info');
return connection || 'TLS version information not available';
} catch (error) {
return 'Error checking TLS version';
}
}

async function checkSecurityHeaders() {

try {
const response = await fetch('/secure/info');
const headers = Array.from(response.headers.entries())
.filter(([key]) => key.toLowerCase().includes('security'))
.map(([key, value]) => `${key}: ${value}`)
.join('\n');
return headers || 'No security headers found';
} catch (error) {
return 'Error checking security headers';
}
}

async function testSecureEndpoint() {

try {
const response = await fetch('/secure/test');
const text = await response.text();
document.getElementById('status').innerHTML = text;
} catch (error) {
document.getElementById('status').textContent =
`Error: ${error.message}`;
}
}
</script>
</body>
</html>

SecurityConfigServlet.java

package com.example;

62
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet("/secure/*")
public class SecurityConfigServlet extends HttpServlet {

@Override
public void init() throws ServletException {
// Verify HTTPS is configured
if (!getServletContext().getServerInfo().toLowerCase().contains("ssl")) {
throw new ServletException("HTTPS is required for this application");
}
}

@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// Enforce HTTPS
if (!request.isSecure()) {
String httpsUrl = "https://" + request.getServerName() +
":" + request.getServerPort() + request.getRequestURI();
response.sendRedirect(httpsUrl);
return;
}

// Set security headers

setSecurityHeaders(response);

// Handle the secure request

handleSecureRequest(request, response);
}

private void setSecurityHeaders(HttpServletResponse response) {

response.setHeader("Strict-Transport-Security", "max-age=31536000;
includeSubDomains");
response.setHeader("X-Content-Type-Options", "nosniff");
response.setHeader("X-Frame-Options", "DENY");
response.setHeader("X-XSS-Protection", "1; mode=block");
response.setHeader("Content-Security-Policy",

63
 "default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline';");
response.setHeader("Referrer-Policy", "strict-origin-when-cross-origin");
}

private void handleSecureRequest(HttpServletRequest request, HttpServletResponse

response)
throws IOException {
response.setContentType("text/html");
response.getWriter().println("<html><body>");
response.getWriter().println("<h2>Secure Connection Information</h2>");
response.getWriter().println("<p>Protocol: " + request.getProtocol() + "</p>");
response.getWriter().println("<p>SSL Session ID: " +
request.getAttribute("javax.servlet.request.ssl_session_id") + "</p>");
response.getWriter().println("<p>Cipher Suite: " +
request.getAttribute("javax.servlet.request.cipher_suite") + "</p>");
response.getWriter().println("</body></html>");
}
}

server.xml

<Connector port="8443" protocol="org.apache.coyote.http11.Http11NioProtocol"

maxThreads="150" SSLEnabled="true"
scheme="https" secure="true"
keystoreFile="conf/keystore.jks" keystorePass="your_keystore_password"
clientAuth="false" sslProtocol="TLS"
sslEnabledProtocols="TLSv1.2,TLSv1.3"
ciphers="TLS_ECDHE_ECDSA_WITH_AES_256_GCM_SHA384,
TLS_ECDHE_RSA_WITH_AES_256_GCM_SHA384,
TLS_ECDHE_ECDSA_WITH_CHACHA20_POLY1305_SHA256,
TLS_ECDHE_RSA_WITH_CHACHA20_POLY1305_SHA256,
TLS_ECDHE_ECDSA_WITH_AES_128_GCM_SHA256,
TLS_ECDHE_RSA_WITH_AES_128_GCM_SHA256"/>

web.xml

<?xml version="1.0" encoding="UTF-8"?>

<web-app xmlns="https://jakarta.ee/xml/ns/jakartaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="https://jakarta.ee/xml/ns/jakartaee
https://jakarta.ee/xml/ns/jakartaee/web-app_5_0.xsd"
version="5.0">

64
 <security-constraint>
<web-resource-collection>
<web-resource-name>Secure Resources</web-resource-name>
<url-pattern>/secure/*</url-pattern>
</web-resource-collection>
<user-data-constraint>
<transport-guarantee>CONFIDENTIAL</transport-guarantee>
</user-data-constraint>
</security-constraint>

<session-config>
<cookie-config>
<secure>true</secure>
<http-only>true</http-only>
<same-site>Strict</same-site>
</cookie-config>
<tracking-mode>COOKIE</tracking-mode>
</session-config>
</web-app>

bash
openssl req -newkey rsa:2048 -nodes -keyout private.key -x509 -days 365 -out
certificate.crt

bash
keytool -importcert -file certificate.crt -keystore keystore.jks -alias tomcat

65
13. To implement firewall configurations to control access to HTTP servers.

firewall.html

<!DOCTYPE html>

<html>

<head>

<title>Firewall Management</title>
<style>

.container {

margin: 20px;

padding: 20px;

border: 1px solid #ccc;

.form-group {
margin: 10px 0;

.result {

margin-top: 10px;

padding: 10px;

background-color: #f5f5f5;

}
</style>

</head>

<body>

<div class="container">

<h2>Firewall Management Console</h2>

<div class="form-group">

<h3>Add HTTP Rule</h3>

<input type="text" id="ruleName" placeholder="Rule Name">

66
 <input type="text" id="port" placeholder="Port">

<select id="protocol">

<option value="TCP">TCP</option>

<option value="UDP">UDP</option>
</select>

<button onclick="addRule()">Add Rule</button>

</div>

<div class="form-group">

<h3>Remove Rule</h3>

<input type="text" id="removeRuleName" placeholder="Rule Name">

<button onclick="removeRule()">Remove Rule</button>
</div>

<div class="form-group">

<h3>Block IP Address</h3>

<input type="text" id="ipAddress" placeholder="IP Address">

<button onclick="blockIp()">Block IP</button>

</div>

<div class="form-group">

<h3>Firewall Rules</h3>

<button onclick="listRules()">List Rules</button>

</div>

<div id="result" class="result"></div>

</div>

<script>

67
async function addRule() {

const ruleName = document.getElementById('ruleName').value;

const port = document.getElementById('port').value;

const protocol = document.getElementById('protocol').value;

try {

const response = await fetch('/firewall/add', {

method: 'POST',

headers: {

'Content-Type': 'application/x-www-form-urlencoded',

},
body: `ruleName=${ruleName}&port=${port}&protocol=${protocol}`
});

const result = await response.json();

showResult(result.message);

} catch (error) {

showResult('Error: ' + error.message);

async function removeRule() {

const ruleName = document.getElementById('removeRuleName').value;

try {

const response = await fetch('/firewall/remove', {

method: 'POST',
headers: {

'Content-Type': 'application/x-www-form-urlencoded',
},

68
 body: `ruleName=${ruleName}`

});

const result = await response.json();

showResult(result.message);
} catch (error) {

showResult('Error: ' + error.message);

async function blockIp() {

const ip = document.getElementById('ipAddress').value;

try {

const response = await fetch('/firewall/block', {

method: 'POST',

headers: {

'Content-Type': 'application/x-www-form-urlencoded',

},

body: `ip=${ip}`
});

const result = await response.json();

showResult(result.message);

} catch (error) {

showResult('Error: ' + error.message);

async function listRules() {

try {

69
 const response = await fetch('/firewall/list');

const text = await response.text();

document.getElementById('result').innerHTML =

'<pre>' + text + '</pre>';

} catch (error) {

showResult('Error: ' + error.message);

function showResult(message) {

document.getElementById('result').textContent = message;
}
</script>

</body>

</html>

FirewallManager.java

package com.example;

import java.io.BufferedReader;
import java.io.InputStreamReader;

import java.util.ArrayList;

import java.util.List;

public class FirewallManager {

public boolean addHttpRule(String ruleName, String port, String protocol) {

try {

String command = String.format(

70
 "netsh advfirewall firewall add rule name=\"%s\" dir=in action=allow protocol=%s
localport=%s",

ruleName, protocol, port

);

return executeCommand(command);

} catch (Exception e) {

System.err.println("Error adding firewall rule: " + e.getMessage());

return false;

public boolean removeRule(String ruleName) {

try {

String command = String.format(

"netsh advfirewall firewall delete rule name=\"%s\"",

ruleName

);

return executeCommand(command);

} catch (Exception e) {

System.err.println("Error removing firewall rule: " + e.getMessage());

return false;
}

public boolean blockIpAddress(String ipAddress) {

try {

String ruleName = "BLOCK_" + ipAddress.replace(".", "_");

String command = String.format(

"netsh advfirewall firewall add rule name=\"%s\" dir=in action=block
remoteip=%s",

71
 ruleName, ipAddress

);

return executeCommand(command);

} catch (Exception e) {
System.err.println("Error blocking IP: " + e.getMessage());

return false;

public List<String> listRules() {

List<String> rules = new ArrayList<>();

try {
String command = "netsh advfirewall firewall show rule name=all";

Process process = Runtime.getRuntime().exec(command);

BufferedReader reader = new BufferedReader(new

InputStreamReader(process.getInputStream()));

String line;

while ((line = reader.readLine()) != null) {

if (line.startsWith("Rule Name:")) {

rules.add(line);
}

} catch (Exception e) {

System.err.println("Error listing rules: " + e.getMessage());

return rules;

72
 private boolean executeCommand(String command) throws Exception {

Process process = Runtime.getRuntime().exec(command);

return process.waitFor() == 0;

}
}

FirewallServlet.java

package com.example;

import jakarta.servlet.ServletException;

import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;

import jakarta.servlet.http.HttpServletResponse;

import java.io.IOException;

import java.io.PrintWriter;

@WebServlet("/firewall/*")

public class FirewallServlet extends HttpServlet {

private final FirewallManager firewallManager = new FirewallManager();

@Override

protected void doPost(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

String action = request.getPathInfo();

switch (action) {
case "/add":

73
 handleAddRule(request, response);

break;

case "/remove":

handleRemoveRule(request, response);
break;

case "/block":

handleBlockIp(request, response);

break;

default:

response.sendError(HttpServletResponse.SC_NOT_FOUND);

}
}

@Override

protected void doGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

if ("/list".equals(request.getPathInfo())) {

listRules(response);

} else {
response.sendError(HttpServletResponse.SC_NOT_FOUND);

private void handleAddRule(HttpServletRequest request, HttpServletResponse response)

throws IOException {

String ruleName = request.getParameter("ruleName");

String port = request.getParameter("port");

String protocol = request.getParameter("protocol");

74
 boolean success = firewallManager.addHttpRule(ruleName, port, protocol);

sendJsonResponse(response, success ? "Rule added successfully" : "Failed to add

rule");

private void handleRemoveRule(HttpServletRequest request, HttpServletResponse

response)

throws IOException {

String ruleName = request.getParameter("ruleName");

boolean success = firewallManager.removeRule(ruleName);

sendJsonResponse(response, success ? "Rule removed successfully" : "Failed to remove

rule");
}

private void handleBlockIp(HttpServletRequest request, HttpServletResponse response)

throws IOException {

String ipAddress = request.getParameter("ip");

boolean success = firewallManager.blockIpAddress(ipAddress);

sendJsonResponse(response, success ? "IP blocked successfully" : "Failed to block IP");

}

private void listRules(HttpServletResponse response) throws IOException {

response.setContentType("text/plain");

PrintWriter out = response.getWriter();

for (String rule : firewallManager.listRules()) {

out.println(rule);
}

75
 private void sendJsonResponse(HttpServletResponse response, String message) throws
IOException {

response.setContentType("application/json");

response.getWriter().write("{\"message\":\"" + message + "\"}");

76
14. To implement HTTP proxies for request forwarding and management.

proxy-config.html

<!DOCTYPE html>
<html>
<head>
<title>Proxy Configuration</title>
<style>
.container {
margin: 20px;
padding: 20px;
border: 1px solid #ccc;
}
.form-group {
margin: 10px 0;
}
.status {
margin-top: 10px;
padding: 10px;
background-color: #f5f5f5;
}
</style>
</head>
<body>
<div class="container">
<h2>Proxy Server Configuration</h2>

<div class="form-group">
<h3>Add Target Server</h3>
<input type="text" id="serverUrl" placeholder="Server URL">
<button onclick="addServer()">Add Server</button>
</div>

<div class="form-group">
<h3>Block URL</h3>
<input type="text" id="blockUrl" placeholder="URL to block">
<button onclick="blockUrl()">Block URL</button>
</div>

<div class="form-group">
<h3>Test Proxy</h3>
<input type="text" id="testUrl" placeholder="URL to test">

77
 <button onclick="testProxy()">Test</button>
</div>

<div id="status" class="status"></div>

</div>

<script>
async function addServer() {
const serverUrl = document.getElementById('serverUrl').value;
try {
const response = await fetch('/proxy/config/server', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: `url=${encodeURIComponent(serverUrl)}`
});
showStatus(await response.text());
} catch (error) {
showStatus('Error: ' + error.message);
}
}

async function blockUrl() {

const url = document.getElementById('blockUrl').value;
try {
const response = await fetch('/proxy/config/block', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: `url=${encodeURIComponent(url)}`
});
showStatus(await response.text());
} catch (error) {
showStatus('Error: ' + error.message);
}
}

async function testProxy() {

const url = document.getElementById('testUrl').value;
try {
const response = await fetch(`/proxy/${encodeURIComponent(url)}`);

78
 showStatus(`Status: ${response.status} ${response.statusText}`);
} catch (error) {
showStatus('Error: ' + error.message);
}
}

function showStatus(message) {
document.getElementById('status').textContent = message;
}
</script>
</body>
</html>

ProxyServer.java

package com.example;

import java.io.IOException;
import java.net.HttpURLConnection;

import java.net.URL;

import java.util.ArrayList;

import java.util.List;

import java.util.concurrent.atomic.AtomicInteger;

public class ProxyServer {

private final List<String> targetServers;

private final AtomicInteger currentServerIndex;

private final List<String> blockedUrls;

public ProxyServer() {

this.targetServers = new ArrayList<>();

this.currentServerIndex = new AtomicInteger(0);

this.blockedUrls = new ArrayList<>();

}

79
 public void addTargetServer(String serverUrl) {

targetServers.add(serverUrl);

public void addBlockedUrl(String url) {

blockedUrls.add(url);

public String getNextServer() {

int index = currentServerIndex.getAndIncrement() % targetServers.size();

return targetServers.get(index);
}

public boolean isUrlBlocked(String url) {

return blockedUrls.stream().anyMatch(url::contains);

public HttpURLConnection createProxyConnection(String targetUrl) throws IOException

{

URL url = new URL(targetUrl);

return (HttpURLConnection) url.openConnection();

}

ProxyServlet.java

package com.example;

import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;

80
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.net.HttpURLConnection;
import java.util.Collections;
import java.util.Enumeration;

@WebServlet("/proxy/*")
public class ProxyServlet extends HttpServlet {
private ProxyServer proxyServer;

@Override
public void init() throws ServletException {
proxyServer = new ProxyServer();
// Add your target servers here
proxyServer.addTargetServer("http://localhost:8081");
proxyServer.addTargetServer("http://localhost:8082");

// Add blocked URLs here

proxyServer.addBlockedUrl("blocked-site.com");
}

@Override
protected void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

String targetUrl = extractTargetUrl(request);

// Check if URL is blocked

if (proxyServer.isUrlBlocked(targetUrl)) {
response.sendError(HttpServletResponse.SC_FORBIDDEN, "Access to this URL
is blocked");
return;
}

// Forward the request

String targetServer = proxyServer.getNextServer();
String fullUrl = targetServer + request.getPathInfo();

HttpURLConnection connection = proxyServer.createProxyConnection(fullUrl);

setupProxyRequest(connection, request);

81
 // Forward the response
forwardResponse(connection, response);
}

private void setupProxyRequest(HttpURLConnection connection, HttpServletRequest

request)
throws IOException {
// Set up the connection
connection.setRequestMethod(request.getMethod());
connection.setDoOutput(true);
connection.setDoInput(true);

// Copy headers
Enumeration<String> headerNames = request.getHeaderNames();
while (headerNames.hasMoreElements()) {
String headerName = headerNames.nextElement();
String headerValue = request.getHeader(headerName);
connection.setRequestProperty(headerName, headerValue);
}

// Copy request body for POST/PUT requests

if ("POST".equals(request.getMethod()) || "PUT".equals(request.getMethod())) {
try (OutputStream out = connection.getOutputStream();
InputStream in = request.getInputStream()) {
byte[] buffer = new byte[4096];
int length;
while ((length = in.read(buffer)) > 0) {
out.write(buffer, 0, length);
}
}
}
}

private void forwardResponse(HttpURLConnection connection, HttpServletResponse

response)
throws IOException {
// Set response code
response.setStatus(connection.getResponseCode());

// Copy response headers

connection.getHeaderFields().forEach((key, values) -> {
if (key != null) {

82
 values.forEach(value -> response.setHeader(key, value));
}
});

// Copy response body

try (InputStream in = connection.getInputStream();
OutputStream out = response.getOutputStream()) {
byte[] buffer = new byte[4096];
int length;
while ((length = in.read(buffer)) > 0) {
out.write(buffer, 0, length);
}
}
}

private String extractTargetUrl(HttpServletRequest request) {

String pathInfo = request.getPathInfo();
String queryString = request.getQueryString();
return pathInfo + (queryString != null ? "?" + queryString : "");
}
}

83
15. To implement an analysis of browser functionality and the HTTP
request-response processing flow.

browser-analysis.html

<!DOCTYPE html>
<html>
<head>
<title>Browser and HTTP Analysis</title>
<style>
.container {
margin: 20px;
padding: 20px;
border: 1px solid #ccc;
}
.analysis-section {
margin: 15px 0;
padding: 10px;
background-color: #f5f5f5;
}
.request-info {
font-family: monospace;
white-space: pre-wrap;
}
.timing-info {
color: #666;
font-style: italic;
}
</style>
</head>
<body>
<div class="container">
<h2>Browser and HTTP Analysis Tool</h2>

<div class="analysis-section">
<h3>Request Analysis</h3>
<button onclick="analyzeGet()">Analyze GET Request</button>
<button onclick="analyzePost()">Analyze POST Request</button>
<button onclick="analyzeAjax()">Analyze AJAX Request</button>
<button onclick="analyzeHeaders()">Analyze Headers</button>
</div>

<div class="analysis-section">

84
 <h3>Performance Analysis</h3>
<button onclick="analyzeLoadTime()">Analyze Load Time</button>
<button onclick="analyzeResources()">Analyze Resource Loading</button>
</div>

<div id="result" class="request-info"></div>

<div id="timing" class="timing-info"></div>
</div>

<script>
async function analyzeGet() {
const startTime = performance.now();
try {
const response = await fetch('/analyze/get');
const html = await response.text();
showResult(html, startTime);
} catch (error) {
showError(error);
}
}

async function analyzePost() {

const startTime = performance.now();
try {
const response = await fetch('/analyze/post', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ test: 'data' })
});
const html = await response.text();
showResult(html, startTime);
} catch (error) {
showError(error);
}
}

async function analyzeAjax() {

const startTime = performance.now();
try {
const response = await fetch('/analyze/ajax', {
headers: {

85
 'X-Requested-With': 'XMLHttpRequest'
}
});
const html = await response.text();
showResult(html, startTime);
} catch (error) {
showError(error);
}
}

async function analyzeHeaders() {

const startTime = performance.now();
try {
const response = await fetch('/analyze/headers');
const headers = {};
for (const [key, value] of response.headers) {
headers[key] = value;
}
showResult(JSON.stringify(headers, null, 2), startTime);
} catch (error) {
showError(error);
}
}

function analyzeLoadTime() {
const timing = window.performance.timing;
const result = {
'DNS Lookup': timing.domainLookupEnd - timing.domainLookupStart,
'TCP Connection': timing.connectEnd - timing.connectStart,
'Request Time': timing.responseStart - timing.requestStart,
'Response Time': timing.responseEnd - timing.responseStart,
'DOM Processing': timing.domComplete - timing.domLoading,
'Total Time': timing.loadEventEnd - timing.navigationStart
};
showResult(JSON.stringify(result, null, 2));
}

function analyzeResources() {
const resources = window.performance.getEntriesByType('resource');
const analysis = resources.map(resource => ({
name: resource.name,
type: resource.initiatorType,
duration: Math.round(resource.duration),

86
 size: resource.transferSize
}));
showResult(JSON.stringify(analysis, null, 2));
}

function showResult(html, startTime) {

document.getElementById('result').innerHTML = html;
if (startTime) {
const duration = performance.now() - startTime;
document.getElementById('timing').textContent =
`Request completed in ${duration.toFixed(2)}ms`;
}
}

function showError(error) {
document.getElementById('result').innerHTML =
`<div style="color: red">Error: ${error.message}</div>`;
}
</script>
</body>
</html>

BrowserAnalyzerServlet.java

package com.example;

import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Enumeration;

@WebServlet("/analyze/*")
public class BrowserAnalyzerServlet extends HttpServlet {

@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
analyzeRequest(request, response);
}

87
 @Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
analyzeRequest(request, response);
}

private void analyzeRequest(HttpServletRequest request, HttpServletResponse

response)
throws IOException {
response.setContentType("text/html");
PrintWriter out = response.getWriter();

out.println("<h2>Browser and Request Analysis</h2>");

// Browser Information
out.println("<h3>Browser Information</h3>");
String userAgent = request.getHeader("User-Agent");
out.println("User Agent: " + userAgent + "<br>");
out.println("Accept Types: " + request.getHeader("Accept") + "<br>");
out.println("Accept Language: " + request.getHeader("Accept-Language") +
"<br>");
out.println("Accept Encoding: " + request.getHeader("Accept-Encoding") +
"<br>");

// Request Details
out.println("<h3>Request Details</h3>");
out.println("Method: " + request.getMethod() + "<br>");
out.println("Protocol: " + request.getProtocol() + "<br>");
out.println("Scheme: " + request.getScheme() + "<br>");
out.println("Server Name: " + request.getServerName() + "<br>");
out.println("Server Port: " + request.getServerPort() + "<br>");
out.println("Request URI: " + request.getRequestURI() + "<br>");
out.println("Query String: " + request.getQueryString() + "<br>");

// Request Headers
out.println("<h3>Request Headers</h3>");
Enumeration<String> headerNames = request.getHeaderNames();
while (headerNames.hasMoreElements()) {
String headerName = headerNames.nextElement();
out.println(headerName + ": " + request.getHeader(headerName) + "<br>");
}

88
 // Client Capabilities
out.println("<h3>Client Capabilities</h3>");
out.println("Cookies Enabled: " + (request.getCookies() != null) + "<br>");
out.println("Session ID: " + request.getRequestedSessionId() + "<br>");
}
}

89
16. To implement the design of a basic web page using HTML, CSS, and
JavaScript to manipulate page elements dynamically.

Index.html

<!DOCTYPE html>
<html>
<head>
<title>Dynamic Web Page</title>
<style>
/* Basic styling */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f0f0f0;
}

.container {
max-width: 800px;
margin: 0 auto;
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header {
text-align: center;
margin-bottom: 30px;
}

.content-section {
margin: 20px 0;
padding: 15px;
border: 1px solid #ddd;
border-radius: 4px;
}

.button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;

90
 border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
}

.button:hover {
background-color: #45a049;
}

.input-field {
width: 100%;
padding: 8px;
margin: 8px 0;
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box;
}

.theme-dark {
background-color: #333;
color: white;
}

/* Responsive design */
@media (max-width: 600px) {
.container {
padding: 10px;
}

.button {
width: 100%;
margin-bottom: 10px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>Dynamic Web Page</h1>
<button class="button" onclick="toggleTheme()">Toggle Theme</button>
</div>

91
 <div class="content-section">
<h2>Add Content</h2>
<input type="text" id="contentInput" class="input-field" placeholder="Enter
content">
<button class="button" onclick="addContent()">Add</button>
</div>

<div class="content-section">
<h2>Dynamic List</h2>
<ul id="dynamicList"></ul>
</div>

<div class="content-section">
<h2>Interactive Form</h2>
<form id="userForm" onsubmit="handleSubmit(event)">
<input type="text" class="input-field" id="nameInput" placeholder="Name"
required>
<input type="email" class="input-field" id="emailInput" placeholder="Email"
required>
<button type="submit" class="button">Submit</button>
</form>
</div>

<div class="content-section">
<h2>User Information</h2>
<div id="userInfo"></div>
</div>
</div>

<script>
// Theme toggle functionality
function toggleTheme() {
const container = document.querySelector('.container');
container.classList.toggle('theme-dark');
}

// Dynamic content addition

function addContent() {
const input = document.getElementById('contentInput');
const list = document.getElementById('dynamicList');

if (input.value.trim() !== '') {

92
 const listItem = document.createElement('li');
listItem.textContent = input.value;

// Add delete button

const deleteButton = document.createElement('button');
deleteButton.textContent = 'Delete';
deleteButton.className = 'button';
deleteButton.style.marginLeft = '10px';
deleteButton.onclick = () => listItem.remove();

listItem.appendChild(deleteButton);
list.appendChild(listItem);
input.value = '';
}
}

// Form submission handling

function handleSubmit(event) {
event.preventDefault();

const name = document.getElementById('nameInput').value;

const email = document.getElementById('emailInput').value;

const userInfo = document.getElementById('userInfo');

userInfo.innerHTML = `
<p><strong>Name:</strong> ${name}</p>
<p><strong>Email:</strong> ${email}</p>
`;

// Clear form
event.target.reset();
}

// Event listeners for keyboard shortcuts

document.addEventListener('keydown', function(event) {
if (event.ctrlKey && event.key === 'Enter') {
addContent();
}
});

// Initial setup
window.onload = function() {
// Add some sample content

93
 const list = document.getElementById('dynamicList');
['Item 1', 'Item 2', 'Item 3'].forEach(text => {
const li = document.createElement('li');
li.textContent = text;
list.appendChild(li);
});
};
</script>
</body>
</html>

94
17.To implement client-side form validation using JavaScript for real-time
user input validation.

form-validation.html

<!DOCTYPE html>
<html>
<head>
<title>Form Validation</title>
<style>
.form-container {
max-width: 500px;
margin: 30px auto;
padding: 20px;
border: 1px solid #ddd;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.form-group {
margin-bottom: 15px;
}

.form-group label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}

.form-group input {
width: 100%;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box;
}

95
.error {
color: #dc3545;
font-size: 0.85em;
margin-top: 5px;
display: none;
}

.invalid {
border-color: #dc3545;
}

.valid {
border-color: #28a745;
}

.submit-button {
background-color: #007bff;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}

.submit-button:disabled {
background-color: #ccc;
cursor: not-allowed;
}

.password-strength {
height: 5px;
margin-top: 5px;
background-color: #eee;
border-radius: 2px;
}

.strength-weak { background-color: #dc3545; width: 33%; }

96
 .strength-medium { background-color: #ffc107; width: 66%; }
.strength-strong { background-color: #28a745; width: 100%; }
</style>
</head>
<body>
<div class="form-container">
<h2>Registration Form</h2>
<form id="registrationForm" novalidate>
<div class="form-group">
<label for="username">Username</label>
<input type="text" id="username" name="username" required
pattern="^[a-zA-Z0-9_]{4,20}$">
<div id="usernameError" class="error">
Username must be 4-20 characters and contain only letters,
numbers, and underscores
</div>
</div>

<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
<div id="emailError" class="error">
Please enter a valid email address
</div>
</div>

<div class="form-group">
<label for="password">Password</label>
<input type="password" id="password" name="password"
required>
<div class="password-strength" id="passwordStrength"></div>
<div id="passwordError" class="error">
Password must be at least 8 characters with letters, numbers,
and symbols
</div>
</div>

97
 <div class="form-group">
<label for="confirmPassword">Confirm Password</label>
<input type="password" id="confirmPassword"
name="confirmPassword" required>
<div id="confirmPasswordError" class="error">
Passwords do not match
</div>
</div>

<div class="form-group">
<label for="phone">Phone Number</label>
<input type="tel" id="phone" name="phone" required
pattern="^\+?[\d\s-]{10,}$">
<div id="phoneError" class="error">
Please enter a valid phone number
</div>
</div>

<button type="submit" class="submit-button"

disabled>Register</button>
</form>
</div>

<script>
const form = document.getElementById('registrationForm');
const submitButton = form.querySelector('button[type="submit"]');
const inputs = form.querySelectorAll('input');

// Real-time validation
inputs.forEach(input => {
input.addEventListener('input', () => {
validateInput(input);
checkFormValidity();
});

input.addEventListener('blur', () => {
validateInput(input);

98
 });
});

function validateInput(input) {
const errorElement = document.getElementById(`${input.id}Error`);
let isValid = true;

// Reset validation state

input.classList.remove('valid', 'invalid');
errorElement.style.display = 'none';

// Required field validation

if (!input.value.trim()) {
showError(input, errorElement, 'This field is required');
isValid = false;
}

// Specific validation rules

switch(input.id) {
case 'username':
if (!input.value.match(/^[a-zA-Z0-9_]{4,20}$/)) {
showError(input, errorElement);
isValid = false;
}
break;

case 'email':
if (!input.value.match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/)) {
showError(input, errorElement);
isValid = false;
}
break;

case 'password':
const strength = checkPasswordStrength(input.value);
updatePasswordStrength(strength);
if (strength === 'weak') {

99
 showError(input, errorElement);
isValid = false;
}
validateConfirmPassword();
break;

case 'confirmPassword':
if (input.value !==
document.getElementById('password').value) {
showError(input, errorElement);
isValid = false;
}
break;

case 'phone':
if (!input.value.match(/^\+?[\d\s-]{10,}$/)) {
showError(input, errorElement);
isValid = false;
}
break;
}

if (isValid) {
input.classList.add('valid');
}

return isValid;
}

function showError(input, errorElement, message) {

input.classList.add('invalid');
errorElement.style.display = 'block';
if (message) {
errorElement.textContent = message;
}
}

100
 function checkPasswordStrength(password) {
const hasLetters = /[a-zA-Z]/.test(password);
const hasNumbers = /\d/.test(password);
const hasSymbols = /[^a-zA-Z\d]/.test(password);
const isLongEnough = password.length >= 8;

if (isLongEnough && hasLetters && hasNumbers && hasSymbols)

{
return 'strong';
} else if (isLongEnough && hasLetters && hasNumbers) {
return 'medium';
}
return 'weak';
}

function updatePasswordStrength(strength) {
const strengthBar = document.getElementById('passwordStrength');
strengthBar.className = 'password-strength';
if (strength !== 'weak') {
strengthBar.classList.add(`strength-${strength}`);
}
}

function validateConfirmPassword() {
const confirmPassword =
document.getElementById('confirmPassword');
if (confirmPassword.value) {
validateInput(confirmPassword);
}
}

function checkFormValidity() {
let isValid = true;
inputs.forEach(input => {
if (!validateInput(input)) {
isValid = false;
}

101
 });
submitButton.disabled = !isValid;
}

form.addEventListener('submit', (e) => {

e.preventDefault();
if (Array.from(inputs).every(input => validateInput(input))) {
alert('Form submitted successfully!');
form.reset();
inputs.forEach(input => input.classList.remove('valid'));
document.getElementById('passwordStrength').className =
'password-strength';
submitButton.disabled = true;
}
});
</script>
</body>
</html>

102
18. To implement image rollover effects using JavaScript for interactive
user experiences.
image-rollover.html

<!DOCTYPE html>

<html>

<head>

<title>Image Rollover Effects</title>

<style>

.gallery {

display: flex;
flex-wrap: wrap;

gap: 20px;

padding: 20px;

justify-content: center;

.image-container {
position: relative;

width: 300px;

height: 200px;

overflow: hidden;

border-radius: 8px;

cursor: pointer;

.image-container img {

width: 100%;

height: 100%;
object-fit: cover;

103
 transition: transform 0.3s ease, filter 0.3s ease;

.overlay {
position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: rgba(0, 0, 0, 0.5);

color: white;
display: flex;
align-items: center;

justify-content: center;

opacity: 0;

transition: opacity 0.3s ease;

.image-container:hover img {
transform: scale(1.1);

.image-container:hover .overlay {

opacity: 1;

.zoom-effect img:hover {

transform: scale(1.2);
}

104
.blur-effect img:hover {

filter: blur(3px);

.grayscale-effect img:hover {

filter: grayscale(100%);

.brightness-effect img:hover {

filter: brightness(150%);
}

.controls {

text-align: center;

margin: 20px;

.control-button {
padding: 8px 16px;

margin: 0 5px;

border: none;

border-radius: 4px;

background-color: #007bff;

color: white;

cursor: pointer;
}

.control-button:hover {

105
 background-color: #0056b3;

</style>

</head>
<body>

<div class="controls">

<button class="control-button" onclick="setEffect('zoom')">Zoom Effect</button>

<button class="control-button" onclick="setEffect('blur')">Blur Effect</button>

<button class="control-button" onclick="setEffect('grayscale')">Grayscale

Effect</button>

<button class="control-button" onclick="setEffect('brightness')">Brightness

Effect</button>

</div>

<div class="gallery" id="imageGallery">

<div class="image-container">
<img src="https://picsum.photos/300/200?1" alt="Sample Image 1">

<div class="overlay">Image 1</div>

</div>

<div class="image-container">

<img src="https://picsum.photos/300/200?2" alt="Sample Image 2">

<div class="overlay">Image 2</div>

</div>

<div class="image-container">
<img src="https://picsum.photos/300/200?3" alt="Sample Image 3">

<div class="overlay">Image 3</div>

</div>

<div class="image-container">

<img src="https://picsum.photos/300/200?4" alt="Sample Image 4">

<div class="overlay">Image 4</div>

106
 </div>

</div>

<script>
const gallery = document.getElementById('imageGallery');

const containers = document.querySelectorAll('.image-container');

function setEffect(effect) {

containers.forEach(container => {

container.className = 'image-container';

if (effect) {
container.classList.add(`${effect}-effect`);
}

});

// Add mouse movement tracking for parallax effect

containers.forEach(container => {

container.addEventListener('mousemove', (e) => {

const { left, top, width, height } = container.getBoundingClientRect();

const x = (e.clientX - left) / width - 0.5;

const y = (e.clientY - top) / height - 0.5;

const img = container.querySelector('img');

img.style.transform = `scale(1.1) translate(${x * 10}px, ${y * 10}px)`;

});

container.addEventListener('mouseleave', (e) => {

const img = container.querySelector('img');

107
 img.style.transform = '';

});

});

// Add touch support for mobile devices

containers.forEach(container => {

container.addEventListener('touchstart', (e) => {

const img = container.querySelector('img');

img.style.transform = 'scale(1.1)';

});

container.addEventListener('touchend', (e) => {

const img = container.querySelector('img');

img.style.transform = '';

});

});

// Add keyboard navigation

let currentFocus = -1;

document.addEventListener('keydown', (e) => {

if (e.key === 'ArrowRight') {

currentFocus = (currentFocus + 1) % containers.length;

containers[currentFocus].focus();

} else if (e.key === 'ArrowLeft') {

currentFocus = (currentFocus - 1 + containers.length) % containers.length;

containers[currentFocus].focus();

}
});

108
 // Add lazy loading

const images = document.querySelectorAll('img');

const imageOptions = {

threshold: 0.5,
rootMargin: '0px 0px 50px 0px'

};

const imageObserver = new IntersectionObserver((entries, observer) => {

entries.forEach(entry => {

if (entry.isIntersecting) {

const img = entry.target;

if (img.dataset.src) {
img.src = img.dataset.src;
img.removeAttribute('data-src');

observer.unobserve(img);

});

}, imageOptions);

images.forEach(img => imageObserver.observe(img));

</script>

</body>

</html>

109
19. To implement JSON data parsing and manipulation using JavaScript.

json-parser.html

<!DOCTYPE html>
<html>
<head>
<title>JSON Parser and Manipulator</title>
<style>
.container {
max-width: 800px;
margin: 20px auto;
padding: 20px;
font-family: Arial, sans-serif;
}

.json-input {
width: 100%;
height: 200px;
margin: 10px 0;
font-family: monospace;
}

.result {
background-color: #f5f5f5;
padding: 15px;
border-radius: 4px;
margin-top: 10px;
white-space: pre-wrap;
font-family: monospace;
}

.error {
color: #dc3545;
margin-top: 10px;
}

110
 .button-group {
margin: 10px 0;
}

button {
padding: 8px 16px;
margin-right: 8px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}

button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div class="container">
<h2>JSON Parser and Manipulator</h2>

<div>
<textarea id="jsonInput" class="json-input" placeholder="Enter
JSON data here..."></textarea>
</div>

<div class="button-group">
<button onclick="parseJSON()">Parse JSON</button>
<button onclick="formatJSON()">Format JSON</button>
<button onclick="validateJSON()">Validate JSON</button>
<button onclick="transformJSON()">Transform Data</button>
</div>

<div>
<h3>Result:</h3>

111
 <div id="result" class="result"></div>
</div>
</div>

<script>
function parseJSON() {
const input = document.getElementById('jsonInput').value;
const resultDiv = document.getElementById('result');

try {
const parsed = JSON.parse(input);
displayResult(parsed);
} catch (error) {
showError('Invalid JSON: ' + error.message);
}
}

function formatJSON() {
const input = document.getElementById('jsonInput').value;

try {
const parsed = JSON.parse(input);
const formatted = JSON.stringify(parsed, null, 2);
document.getElementById('jsonInput').value = formatted;
displayResult('JSON formatted successfully');
} catch (error) {
showError('Invalid JSON: ' + error.message);
}
}

function validateJSON() {
const input = document.getElementById('jsonInput').value;

try {
JSON.parse(input);
displayResult('JSON is valid');

112
 // Additional validation checks
const validation = validateJSONStructure(input);
if (validation.issues.length > 0) {
displayResult('Validation Issues:\n' +
validation.issues.join('\n'));
}
} catch (error) {
showError('Invalid JSON: ' + error.message);
}
}

function transformJSON() {
const input = document.getElementById('jsonInput').value;

try {
const data = JSON.parse(input);
const transformed = transformData(data);
displayResult(transformed);
} catch (error) {
showError('Transformation error: ' + error.message);
}
}

function validateJSONStructure(jsonString) {
const result = {
issues: []
};

try {
const obj = JSON.parse(jsonString);

// Check for empty objects/arrays

if (Object.keys(obj).length === 0) {
result.issues.push('Warning: Empty object/array');
}

// Check for null values

113
 function checkNulls(obj) {
for (let key in obj) {
if (obj[key] === null) {
result.issues.push(`Warning: Null value found for key
"${key}"`);
} else if (typeof obj[key] === 'object') {
checkNulls(obj[key]);
}
}
}
checkNulls(obj);

// Check data types

function checkTypes(obj) {
for (let key in obj) {
if (typeof obj[key] === 'undefined') {
result.issues.push(`Error: Undefined value for key
"${key}"`);
}
}
}
checkTypes(obj);

} catch (error) {
result.issues.push('Error: ' + error.message);
}

return result;
}

function transformData(data) {
if (Array.isArray(data)) {
return transformArray(data);
} else if (typeof data === 'object') {
return transformObject(data);
}
return data;

114
 }

function transformArray(arr) {
return {
type: 'array',
length: arr.length,
items: arr.map(item => transformData(item)),
summary: {
numbers: arr.filter(item => typeof item === 'number').length,
strings: arr.filter(item => typeof item === 'string').length,
objects: arr.filter(item => typeof item === 'object' && item !==
null).length
}
};
}

function transformObject(obj) {
const transformed = {};
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
transformed[key] = {
value: obj[key],
type: typeof obj[key],
nested: typeof obj[key] === 'object' && obj[key] !== null
};
}
}
return transformed;
}

function displayResult(data) {
const resultDiv = document.getElementById('result');
resultDiv.className = 'result';
resultDiv.textContent = typeof data === 'string' ?
data : JSON.stringify(data, null, 2);
}

115
 function showError(message) {
const resultDiv = document.getElementById('result');
resultDiv.className = 'result error';
resultDiv.textContent = message;
}

// Add sample data

document.getElementById('jsonInput').value = JSON.stringify({
name: "John Doe",
age: 30,
address: {
street: "123 Main St",
city: "Boston"
},
hobbies: ["reading", "swimming"]
}, null, 2);
</script>
</body>
</html>

116
20. implement styling and layout control of web pages using Cascading
Style Sheets (CSS).

styles-demo.html

<!DOCTYPE html>
<html>
<head>
<title>CSS Styling Demo</title>
<style>
/* Reset and base styles */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Segoe UI', Arial, sans-serif;
line-height: 1.6;
color: #333;
background-color: #f4f4f4;
}

/* Layout containers */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}

/* Grid layout */
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin: 20px 0;
}

.grid-item {
background: white;
padding: 20px;

117
 border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
transition: transform 0.3s ease;
}

.grid-item:hover {
transform: translateY(-5px);
}

/* Flexbox layout */
.flex-container {
display: flex;
flex-wrap: wrap;
gap: 15px;
margin: 20px 0;
}

.flex-item {
flex: 1 1 200px;
padding: 15px;
background: white;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Navigation */
.nav {
background: #333;
padding: 1rem;
position: sticky;
top: 0;
z-index: 100;
}

.nav ul {
display: flex;
justify-content: center;
list-style: none;
gap: 20px;
}

.nav a {
color: white;

118
 text-decoration: none;
padding: 5px 10px;
border-radius: 4px;
transition: background-color 0.3s;
}

.nav a:hover {
background-color: #555;
}

/* Cards */
.card {
background: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.card-image {
width: 100%;
height: 200px;
object-fit: cover;
}

.card-content {
padding: 20px;
}

/* Buttons */
.button {
display: inline-block;
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
}

.button:hover {
background-color: #0056b3;
}

119
/* Form styles */
.form-group {
margin-bottom: 15px;
}

.form-group label {
display: block;
margin-bottom: 5px;
}

.form-group input,
.form-group textarea {
width: 100%;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
}

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

.animate-fade {
animation: fadeIn 0.5s ease-in;
}

/* Media Queries */
@media (max-width: 768px) {
.nav ul {
flex-direction: column;
align-items: center;
}

.grid-container {
grid-template-columns: 1fr;
}
}

/* Custom Properties */
:root {

120
 --primary-color: #007bff;
--secondary-color: #6c757d;
--success-color: #28a745;
--danger-color: #dc3545;
}

/* Utility Classes */
.text-center { text-align: center; }
.mt-2 { margin-top: 2rem; }
.mb-2 { margin-bottom: 2rem; }
.p-2 { padding: 2rem; }
</style>
</head>
<body>
<nav class="nav">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>

<div class="container">
<h1 class="text-center mt-2 mb-2">CSS Styling Demo</h1>

<div class="grid-container">
<div class="grid-item animate-fade">
<h2>Grid Item 1</h2>
<p>This demonstrates grid layout and animations.</p>
</div>
<div class="grid-item animate-fade">
<h2>Grid Item 2</h2>
<p>Responsive grid with auto-fit.</p>
</div>
<div class="grid-item animate-fade">
<h2>Grid Item 3</h2>
<p>Hover effects and transitions.</p>
</div>
</div>

<div class="flex-container">
<div class="card">

121
 <img src="https://picsum.photos/300/200" alt="Sample" class="card-image">
<div class="card-content">
<h3>Card Title</h3>
<p>Card description with flexbox layout.</p>
<button class="button mt-2">Learn More</button>
</div>
</div>
<div class="card">
<img src="https://picsum.photos/300/201" alt="Sample" class="card-image">
<div class="card-content">
<h3>Card Title</h3>
<p>Responsive card design.</p>
<button class="button mt-2">Learn More</button>
</div>
</div>
</div>

<form class="p-2">
<div class="form-group">
<label for="name">Name</label>
<input type="text" id="name" required>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email" required>
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea id="message" rows="4"></textarea>
</div>
<button type="submit" class="button">Submit</button>
</form>
</div>
</body>
</html>

122