Scribd
Upload
4 views

Web Technology Lab

The document outlines the development of web applications using various technologies, including server-client programming with Python sockets, HTML, CSS, JavaScript, and PHP. It provides examples of basic and advanced web applications, including user input handling, database management, and CRUD operations. Additionally, it emphasizes best practices for security and deployment considerations for web service applications.

Uploaded by

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

Web Technology Lab

The document outlines the development of web applications using various technologies, including server-client programming with Python sockets, HTML, CSS, JavaScript, and PHP. It provides examples of basic and advanced web applications, including user input handling, database management, and CRUD operations. Additionally, it emphasizes best practices for security and deployment considerations for web service applications.

Uploaded by

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

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.

You might also like