Web technology Lab
1)Coding Server Client Programs
Basic Server-Client Model:
1. The server runs continuously, waiting for client connections.
2. The client connects to the server and sends requests.
3. The server processes the request and sends a response.
4. The client receives and processes the response.
Example: Python Socket Programming
Here’s a basic TCP server-client example in Python using the socket module.
Server (server.py)
python
CopyEdit
import socket
# Create a socket object
server_socket = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
# Define server address and port
host = '127.0.0.1'
port = 12345
# Bind the socket to the address
server_socket.bind((host, port))
# Listen for incoming connections
server_socket.listen(1)
print(f"Server listening on {host}:{port}")
while True:
# Accept a client connection
client_socket, addr = server_socket.accept()
print(f"Connection from {addr}")
# Receive data from the client
data = client_socket.recv(1024).decode()
print(f"Received: {data}")
# Send a response back to the client
response = f"Hello, {addr}. You said: {data}"
client_socket.send(response.encode())
# Close the client socket
client_socket.close()
Client (client.py)
python
CopyEdit
import socket
# Create a socket object
client_socket = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
# Define server address and port
host = '127.0.0.1'
port = 12345
# Connect to the server
client_socket.connect((host, port))
# Send a message to the server
message = "Hello, Server!"
client_socket.send(message.encode())
# Receive and print response from server
response = client_socket.recv(1024).decode()
print(f"Server says: {response}")
# Close the connection
client_socket.close()
How to Run the Code
1. Start the server:
nginx
CopyEdit
python server.py
2. Start the client in a separate terminal:
nginx
CopyEdit
python client.py
2) Developing Web Application using HTML, JavaScript
Basic Structure of a Web Application
A web application consists of:
1. Frontend – Built using HTML, CSS, and JavaScript.
2. Backend (optional) – Uses technologies like Node.js, Django, or PHP for processing.
3. Database (optional) – Stores data, like MySQL, PostgreSQL, or Firebase.
Simple Web App Example
Let's create a basic web application that takes user input and displays it dynamically.
1. HTML (index.html)
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Web App</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Welcome to My Web App</h1>
<input type="text" id="userInput" placeholder="Type something...">
<button onclick="displayText()">Submit</button>
<p id="output"></p>
</div>
<script src="script.js"></script>
</body>
</html>
2. JavaScript (script.js)
javascript
CopyEdit
// Function to display user input
function displayText() {
let input = document.getElementById("userInput").value;
document.getElementById("output").innerText = "You entered: " + input;
3. CSS (styles.css)
css
CopyEdit
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 50px;
.container {
background: #f4f4f4;
padding: 20px;
border-radius: 10px;
width: 300px;
margin: auto;
button {
margin-top: 10px;
padding: 8px 16px;
background: blue;
color: white;
border: none;
cursor: pointer;
}
3)Developing Advanced Web Application Programs using CSS
1. HTML (index.html)
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advanced Web App</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Advanced Web Application</h1>
</header>
<div class="container">
<div class="card">
<h2>Feature 1</h2>
<p>Interactive UI with CSS effects.</p>
</div>
<div class="card">
<h2>Feature 2</h2>
<p>Responsive layout using Flexbox.</p>
</div>
<div class="card">
<h2>Feature 3</h2>
<p>Animated hover effects.</p>
</div>
</div>
<button class="animated-button">Click Me</button>
<script src="script.js"></script>
</body>
</html>
2. CSS (styles.css)
css
CopyEdit
/* Global Styles */
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 0;
padding: 0;
background: linear-gradient(135deg, #74ebd5, #acb6e5);
}
/* Header */
header {
background: rgba(255, 255, 255, 0.8);
padding: 20px;
font-size: 24px;
font-weight: bold;
/* Responsive Card Layout */
.container {
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
padding: 20px;
.card {
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.2);
transition: transform 0.3s ease-in-out;
width: 250px;
/* Hover Effect */
.card:hover {
transform: scale(1.05);
/* Animated Button */
.animated-button {
background: #ff4b2b;
color: white;
border: none;
padding: 15px 25px;
font-size: 16px;
margin-top: 20px;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s ease-in-out;
/* Button Hover Effect */
.animated-button:hover {
background: #ff7e5f;
transform: translateY(-3px);
/* Responsive Design */
@media (max-width: 768px) {
.container {
flex-direction: column;
3. JavaScript (script.js)
javascript
CopyEdit
document.querySelector('.animated-button').addEventListener('click', function() {
alert("You clicked the animated button!");
});
4) Practicing PHP : Basics
Example: Hello World
Create a file named index.php:
php
CopyEdit
<?php
echo "Hello, World!";
?>
echo prints text to the browser.
Run this file on a local server by placing it inside the htdocs (for XAMPP) or www (for WAMP)
folder.
3. PHP Variables & Data Types
PHP variables start with $ and do not require explicit type declarations.
php
CopyEdit
<?php
$name = "John"; // String
$age = 25; // Integer
$price = 10.5; // Float
$isStudent = true; // Boolean
echo "Name: $name, Age: $age";
?>
4. Conditional Statements
php
CopyEdit
<?php
$age = 18;
if ($age >= 18) {
echo "You are an adult.";
} else {
echo "You are a minor.";
?>
5. Loops
For Loop
php
CopyEdit
<?php
for ($i = 1; $i <= 5; $i++) {
echo "Number: $i <br>";
?>
While Loop
php
CopyEdit
<?php
$x = 1;
while ($x <= 5) {
echo "Count: $x <br>";
$x++;
?>
6. Functions
php
CopyEdit
<?php
function greet($name) {
return "Hello, $name!";
echo greet("Alice");
?>
7. Handling Forms
HTML Form (form.html)
html
CopyEdit
<form action="process.php" method="POST">
<input type="text" name="username" placeholder="Enter Name">
<button type="submit">Submit</button>
</form>
PHP Form Processing (process.php)
php
CopyEdit
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$name = $_POST['username'];
echo "Hello, $name!";
?>
5) Practicing PHP : Web Application Development
: Create a MySQL Database
Run this SQL command in phpMyAdmin:
sql
CopyEdit
CREATE DATABASE myapp;
USE myapp;
CREATE TABLE users (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(100) NOT NULL,
email VARCHAR(100) UNIQUE NOT NULL,
password VARCHAR(255) NOT NULL
);
Step 2: Database Connection (config.php)
php
CopyEdit
<?php
$host = "localhost";
$user = "root"; // Default for XAMPP
$pass = ""; // Default for XAMPP
$db = "myapp";
$conn = new mysqli($host, $user, $pass, $db);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
?>
Step 3: Registration Form (index.php)
php
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>User Registration</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>Register</h2>
<form action="process.php" method="POST">
<input type="text" name="name" placeholder="Enter Name" required><br>
<input type="email" name="email" placeholder="Enter Email" required><br>
<input type="password" name="password" placeholder="Enter Password"
required><br>
<button type="submit" name="register">Register</button>
</form>
</body>
</html>
Step 4: Processing User Registration (process.php)
php
CopyEdit
<?php
include 'config.php';
if (isset($_POST['register'])) {
$name = $_POST['name'];
$email = $_POST['email'];
$password = password_hash($_POST['password'], PASSWORD_DEFAULT); // Secure
password storage
$sql = "INSERT INTO users (name, email, password) VALUES ('$name', '$email',
'$password')";
if ($conn->query($sql) === TRUE) {
echo "Registration successful!";
} else {
echo "Error: " . $conn->error;
$conn->close();
?>
Step 5: Basic Styling (style.css)
css
CopyEdit
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 50px;
input, button {
margin: 5px;
padding: 10px;
width: 200px;
}
button {
background-color: blue;
color: white;
border: none;
6) Practicing PHP: MySQL - tiered Applications.
Data Tier - MySQL Database
sql
CopyEdit
CREATE DATABASE school;
USE school;
CREATE TABLE students (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(100),
email VARCHAR(100),
course VARCHAR(100)
);
Folder Structure
pgsql
CopyEdit
/student-app
┣ config/
┃ ┗ db.php → Database connection
┣ business/
┃ ┗ Student.php → Business logic (CRUD operations)
┣ public/
┃ ┗ index.php → Presentation layer (UI)
┗ style.css → CSS styling
Logic Tier - PHP (student.php)
php
CopyEdit
<?php
include 'config.php'; // Database connection
function getStudents() {
global $conn;
$sql = "SELECT * FROM students";
return $conn->query($sql);
function addStudent($name, $email, $course) {
global $conn;
$stmt = $conn->prepare("INSERT INTO students (name, email, course) VALUES (?, ?, ?)");
$stmt->bind_param("sss", $name, $email, $course);
return $stmt->execute();
?>
3️⃣ Presentation Tier - HTML/PHP Form (index.php)
php
CopyEdit
<?php include 'student.php'; ?>
<!DOCTYPE html>
<html>
<head><title>Student Manager</title></head>
<body>
<h2>Add Student</h2>
<form method="POST">
<input type="text" name="name" placeholder="Name" required>
<input type="email" name="email" placeholder="Email" required>
<input type="text" name="course" placeholder="Course" required>
<button type="submit" name="add">Add</button>
</form>
<?php
if (isset($_POST['add'])) {
addStudent($_POST['name'], $_POST['email'], $_POST['course']);
echo "<p>Student added!</p>";
$students = getStudents();
?>
<h3>Student List</h3>
<ul>
<?php while($row = $students->fetch_assoc()): ?>
<li><?= $row['name'] ?> - <?= $row['email'] ?> (<?= $row['course'] ?>)</li>
<?php endwhile; ?>
</ul>
</body>
</html>
Data Layer (config/db.php)
php
CopyEdit
<?php
$host = "localhost";
$user = "root";
$pass = "";
$db = "school";
$conn = new mysqli($host, $user, $pass, $db);
if ($conn->connect_error) {
die("Database connection failed: " . $conn->connect_error);
?>
2. Business Logic Layer (business/Student.php)
php
CopyEdit
<?php
include_once '../config/db.php';
class Student {
private $conn;
public function __construct($db) {
$this->conn = $db;
public function getAllStudents() {
$result = $this->conn->query("SELECT * FROM students");
return $result;
public function addStudent($name, $email) {
$stmt = $this->conn->prepare("INSERT INTO students (name, email) VALUES (?, ?)");
$stmt->bind_param("ss", $name, $email);
return $stmt->execute();
?>
3. Presentation Layer (public/index.php)
php
CopyEdit
<?php
include_once '../business/Student.php';
include_once '../config/db.php';
$student = new Student($conn);
// Add student
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$student->addStudent($_POST['name'], $_POST['email']);
// Get all students
$students = $student->getAllStudents();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Student Management</title>
<link rel="stylesheet" href="../style.css">
</head>
<body>
<h1>Student Management System</h1>
<form method="POST">
<input type="text" name="name" placeholder="Student Name" required>
<input type="email" name="email" placeholder="Student Email" required>
<button type="submit">Add Student</button>
</form>
<h2>All Students</h2>
<ul>
<?php while ($row = $students->fetch_assoc()) : ?>
<li><?php echo $row['name'] . " - " . $row['email']; ?></li>
<?php endwhile; ?>
</ul>
</body>
</html>
7) Developing a fully functional Web Service Application using all the technologies learned in
this course.
Key Features for Your Web Service Application
User Authentication (Login/Registration with Sessions)
Database Management (CRUD Operations in MySQL)
REST API Integration (API endpoints for data exchange)
Frontend with HTML, CSS, JavaScript (Dynamic UI)
AJAX for Asynchronous Requests (Faster experience)
Security Best Practices (Input validation, hashing passwords)
Deployment Considerations (Hosting, domain setup)
📂 Suggested Project Structure
pgsql
Copy
Edit
/webservice-app
┣ config/
┃ ┗ db.php → Database connection
┣ api/
┃ ┗ user.php → REST API for User Management
┣ business/
┃ ┗ User.php → Business Logic Layer
┣ public/
┃ ┣ index.php → Frontend UI (Homepage)
┃ ┗ dashboard.php → User Dashboard
┣ assets/
┃ ┗ style.css → CSS Styling
┗ js/
┗ script.js → JavaScript (AJAX, Client-side interactions)
🛠 Step-by-Step Development Plan
1️⃣ Database Layer (MySQL)
📌 Create Database & Users Table
sql
Copy
Edit
CREATE DATABASE webapp;
USE webapp;
CREATE TABLE users (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(100) NOT NULL,
email VARCHAR(100) UNIQUE NOT NULL,
password VARCHAR(255) NOT NULL
);
2️⃣ Backend: API Layer (api/user.php)
REST API to handle user authentication & data exchange.
php
Copy
Edit
<?php
include_once '../config/db.php';
header("Content-Type: application/json");
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$data = json_decode(file_get_contents("php://input"));
if (!empty($data->email) && !empty($data->password)) {
$email = $data->email;
$password = $data->password;
$stmt = $conn->prepare("SELECT * FROM users WHERE email=?");
$stmt->bind_param("s", $email);
$stmt->execute();
$result = $stmt->get_result()->fetch_assoc();
if ($result && password_verify($password, $result["password"])) {
echo json_encode(["status" => "success", "message" => "Login successful"]);
} else {
echo json_encode(["status" => "error", "message" => "Invalid credentials"]);
?>
3️⃣ Business Logic Layer (business/User.php)
php
Copy
Edit
<?php
class User {
private $conn;
public function __construct($db) {
$this->conn = $db;
public function register($name, $email, $password) {
$hashedPassword = password_hash($password, PASSWORD_DEFAULT);
$stmt = $this->conn->prepare("INSERT INTO users (name, email, password) VALUES
(?, ?, ?)");
$stmt->bind_param("sss", $name, $email, $hashedPassword);
return $stmt->execute();
?>
4️⃣ Frontend (public/index.php)
php
Copy
Edit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Service App</title>
<link rel="stylesheet" href="../assets/style.css">
</head>
<body>
<h2>Login</h2>
<form id="loginForm">
<input type="email" id="email" placeholder="Enter Email" required><br>
<input type="password" id="password" placeholder="Enter Password" required><br>
<button type="submit">Login</button>
</form>
<p id="response"></p>
<script src="../js/script.js"></script>
</body>
</html>
5️⃣ JavaScript for API Calls (js/script.js)
javascript
Copy
Edit
document.getElementById("loginForm").addEventListener("submit", async function(e) {
e.preventDefault();
let email = document.getElementById("email").value;
let password = document.getElementById("password").value;
let response = await fetch("../api/user.php", {
method: "POST",
body: JSON.stringify({ email, password }),
headers: { "Content-Type": "application/json" }
});
let result = await response.json();
document.getElementById("response").innerText = result.message;
});
6️⃣ Styling (assets/style.css)
css
Copy
Edit
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
input, button {
display: block;
margin: 10px auto;
padding: 10px;
Running the Web Application
1. Start Apache & MySQL (Using XAMPP/WAMP).
2. Create the database in phpMyAdmin (webapp).
3. Place files inside htdocs/webservice-app/.
4. Open http://localhost/webservice-app/public/index.php.
