Southern University Bangladesh
Department of Computer Science and
Engineering
TITLE OF THE LAB REPORT
Lab Experiments Report - Exp 1-12
Course Code: CSE 0613-301
Course Title: Web Programming Lab
Fall 2024
1. Name : Sadia ali preety
2. Student ID : 666-60-30
3. Batch : 60th Batch
5. Date of Assignment : 16-05-2025
6. Date of Submission : 19-12-2025
7. Contact No : 01876302843
8. Signature of Student : SADIA
9. Course Teacher : MD.Jahangir Alam
666-60-30
10. Signature of Teacher :
Experiment No 1
Experiment Name: Creating Webpage Using HTML Aim: To
Create Webpage That Contains Form, Frame, Table, List, Link
Using HTML
Input:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VIJOY'S Unique Webpage</title>
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
header {
Page 2 | 52
666-60-30
background-color: #4CAF50;
color: white;
padding: 10px 0;
text-align: center;
font-size: 24px;
section {
margin: 20px 0;
padding: 15px;
border: 1px solid #ccc;
background-color: #fff;
border-radius: 5px;
h2 {
color: #333;
form {
margin-bottom: 20px;
input[type="text"], input[type="email"], textarea {
width: 100%;
padding: 10px;
Page 3 | 52
666-60-30
margin: 5px 0;
border: 1px solid #ccc;
border-radius: 5px;
input[type="submit"] {
background-color: #4CAF50;
color: white;
padding: 10px 15px;
border: none;
border-radius: 5px;
cursor: pointer;
input[type="submit"]:hover {
background-color: #45a049;
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
table, th, td {
border: 1px solid #ddd;
Page 4 | 52
666-60-30
th, td {
padding: 10px;
text-align: left;
th {
background-color: #4CAF50;
color: white;
ul {
list-style-type: none;
padding: 0;
ul li {
background-color: #e2e2e2;
margin: 5px 0;
padding: 10px;
border-radius: 5px;
footer {
text-align: center;
margin-top: 20px;
Page 5 | 52
666-60-30
color: #777;
</style>
</head>
<body>
<header>
Unique Webpage
</header>
<section>
<h2>Contact Us</h2>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" required></textarea>
<input type="submit" value="Submit">
</form>
</section>
<section>
Page 6 | 52
666-60-30
<h2>Frame Section</h2>
<div style="text-align: center;">
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/Qhaz36TZG5Y?si=xa-
Rw1tEd6CqIxD3&start=15"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope;
picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen>
</iframe>
</div>
</section>
<section>
<h2>Data Table</h2>
<table>
<tr>
<th>Name</th>
<th>Email</th>
<th>Message</th>
Page 7 | 52
666-60-30
</tr>
<tr>
<td>VIJOY</td>
<td>vijoy@example.com</td>
<td>Hello!</td>
</tr>
<tr>
<td>Mahmud</td>
<td>mahmud@example.com</td>
<td>Good day!</td>
</tr>
</table>
</section>
<section>
<h2>Useful Links</h2>
<ul>
<li><a href="https://www.youtube.com" target="_blank">YouTube</a></li>
<li><a href="https://www.facebook.com" target="_blank">facebook</a></li>
<li><a href="https://www.instagram.com" target="_blank">Instagram</a></li>
</ul>
</section>
<footer>
Page 8 | 52
666-60-30
© 2024 Unique Webpage. All rights reserved.
</footer>
</body>
</html>
Output:
Page 9 | 52
666-60-30
Experiment No 2
Page 10 | 52
666-60-30
Experiment Name: Creating Webpage Using HTML Aim: To
Create Webpage That Contains Form, Frame, Table, List, Link
Using HTML
Inline Style
Input:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inline CSS Example</title>
</head>
<body>
<h1 style="color: blue; text-align: center;">Inline CSS Example</h1>
<p style="font-size: 18px; color: green;">This paragraph uses inline CSS to style its text
color and size.</p>
</body>
</html>
Output:
Page 11 | 52
666-60-30
Page 12 | 52
666-60-30
Internal Style
Input:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Internal CSS Example</title>
<style>
body {
background-color: #f4f4f4;
font-family: Arial, sans-serif;
h1 {
color: darkblue;
text-align: center;
p{
font-size: 16px;
color: darkgreen;
</style>
</head>
Page 13 | 52
666-60-30
<body>
<h1>Internal CSS Example</h1>
<p>This paragraph is styled using internal CSS.</p>
</body>
</html>
Output:
Page 14 | 52
666-60-30
External Style
Input:
2.3 External CSS.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>External CSS Example</title>
<link rel="stylesheet" href="2.3 style.css">
</head>
<body>
<h1>External CSS Example</h1>
<p>This paragraph is styled using external CSS.</p>
</body>
</html>
Page 15 | 52
666-60-30
2.3 styles.css
body {
background-color: #f4f4f4; font-family: Arial, sans-serif;
h1 {
color: darkblue; text-align: center;
p{
font-size: 16px; color: darkgreen;
Output:
Experiment No 3
Page 16 | 52
666-60-30
Experiment Name: Display even & odd numbers using
JavaScript
Input:
<!DOCTYPE html>
<html> <head>
<title>Even and Odd Numbers</title>
</head>
<body>
<h3>Even and Odd Numbers</h3>
<label for="num">Enter a Number:</label>
<input type="number" id="num" />
<button onclick="displayEvenOdd()">Display</button>
<p id="result"></p>
<script>
function displayEvenOdd() {
const num = parseInt(document.getElementById("num").value);
let evenNumbers = [];
let oddNumbers = [];
for (let i = 1; i <= num; i++) {
if (i % 2 === 0) {
evenNumbers.push(i);
} else {
Page 17 | 52
666-60-30
oddNumbers.push(i);
}}
document.getElementById("result").innerHTML =
"<b>Even Numbers:</b> " + evenNumbers.join(", ") + "<br><b>Odd
Numbers:</b> " + oddNumbers.join(", ");
</script> </body> </html>
Output:
Page 18 | 52
666-60-30
Experiment No 4
Experiment Name: Displaying sum of n numbers using
JavaScript
Input:
<!DOCTYPE html>
<html>
<head>
<title>Sum of N Numbers</title>
</head>
<body>
<h3>Sum of N Numbers</h3>
<label for="number">Enter a Number:</label>
<input type="number" id="number" />
<button onclick="calculateSum()">Calculate Sum</button>
<p id="sumResult"></p>
<script>
function calculateSum() {
const n = parseInt(document.getElementById("number").value);
let sum = 0;
for (let i = 1; i <= n; i++) {
sum += i;
Page 19 | 52
666-60-30
document.getElementById("sumResult").innerHTML = "The sum of first " + n + "
numbers is: " + sum;
</script>
</body>
</html>
Output:
Page 20 | 52
666-60-30
Experiment No 5
Experiment Name: Write JavaScript to validate the following
fields of the
Registration page.
First Name (Name should contains alphabets and the
length should not be less than 6 characters).
Password (Password should not be less than 6 characters
length).
E-mail id (should not contain any invalid and must follow
the standard pattern name@domain.com)
Mobile Number (Phone number should contain 10 digits
only).
Last Name and Address (should not be Empty)
Page 21 | 52
666-60-30
Input:
<html><head>
<title>Registration Page Validation</title>
</head> <body>
<h3>Registration Page</h3>
<form id="registrationForm" onsubmit="return validateForm()">
<label for="firstName">First Name:</label>
<input type="text" id="firstName" /><br><br>
<label for="lastName">Last Name:</label>
<input type="text" id="lastName" /><br><br>
<label for="password">Password:</label>
<input type="password" id="password" /><br><br>
<label for="email">E-mail:</label>
<input type="email" id="email" /><br><br>
<label for="mobile">Mobile Number:</label>
<input type="text" id="mobile" /><br><br>
Page 22 | 52
666-60-30
<label for="address">Address:</label>
<input type="text" id="address" /><br><br>
<button type="submit">Register</button>
</form>
<p id="validationMessage" style="color: red;"></p>
<script>
function validateForm() {
const firstName = document.getElementById("firstName").value;
const lastName = document.getElementById("lastName").value;
const password = document.getElementById("password").value;
const email = document.getElementById("email").value;
const mobile = document.getElementById("mobile").value;
const address = document.getElementById("address").value;
const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
const mobilePattern = /^[0-9]{10}$/;
if (!firstName || firstName.length < 6 || !/^[a-zA-Z]+$/.test(firstName)) {
document.getElementById("validationMessage").innerHTML = "First Name must
contain only alphabets and be at least 6 characters long.";
return false;
if (!lastName) {
document.getElementById("validationMessage").innerHTML = "Last Name cannot be
empty.";
Page 23 | 52
666-60-30
return false;
if (!password || password.length < 6) {
document.getElementById("validationMessage").innerHTML = "Password must be at
least 6 characters long.";
return false;
if (!emailPattern.test(email)) {
document.getElementById("validationMessage").innerHTML = "Invalid E-mail
format.";
return false;
if (!mobilePattern.test(mobile)) {
document.getElementById("validationMessage").innerHTML = "Mobile Number must
contain exactly 10 digits.";
return false;
if (!address) {
document.getElementById("validationMessage").innerHTML = "Address cannot be
empty.";
return false;
alert("Registration Successful!");
Page 24 | 52
666-60-30
return true;
</script> </body> </html>
Output:
Page 25 | 52
666-60-30
Experiment No 6
Page 26 | 52
666-60-30
Experiment Name: To display a digital clock using JavaScript
Input:
6. Digital Clock using JS.html
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Digital Clock</title>
<link rel="stylesheet" href="6. Digital Clock using JS.css">
</head>
<body>
<div class="clock-container">
<div id="time" class="time"></div>
<div id="date" class="date"></div>
</div>
<script src="6. Digital Clock using JS.js"></script>
</body>
</html>
6. Digital Clock using JS.js
function updateClock() {
const timeElement = document.getElementById('time');
Page 27 | 52
666-60-30
const dateElement = document.getElementById('date');
const now = new Date();
let hours = now.getHours();
const minutes = now.getMinutes().toString().padStart(2, '0');
const seconds = now.getSeconds().toString().padStart(2, '0');
const ampm = hours >= 12 ? 'PM' : 'AM';
hours = hours % 12 || 12;
timeElement.innerHTML = `${hours}:${minutes}:${seconds}
<span>${ampm}</span>`;
const days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday",
"Saturday"];
const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov",
"Dec"];
const dayName = days[now.getDay()];
const monthName = months[now.getMonth()];
const day = now.getDate();
dateElement.innerHTML = `${monthName}, ${dayName} ${day}`;
setInterval(updateClock, 1000);
updateClock();
6.Digital Clock using JS.css
body {
Page 28 | 52
666-60-30
font-family: 'Poppins', sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #2e2e38;
margin: 0;
.clock-container {
text-align: center;
background-color: #3d3d4e;
padding: 20px;
border-radius: 15px;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
.time {
font-size: 100px;
font-weight: bold;
background: linear-gradient(to right, #3389ff, #ff6f61);
background-clip: text; /* Standard property */
-webkit-background-clip: text; /* Vendor-prefixed for WebKit browsers */
Page 29 | 52
666-60-30
color: transparent;
.date {
font-size: 25px;
color: #ba9bc1;
margin-top: 10px;
font-family:'Poppins', monospace
Page 30 | 52
666-60-30
Output:
Page 31 | 52
666-60-30
Experiment No 7
Experiment Name: Develop and demonstrate a XHTML file
that includes JavaScript script for the following problems:
a) Input: A number n obtained using prompt
Output: The first n Fibonacci numbers
b) Input: A number n obtained using prompt
Output: A table of numbers from 1 to n and their squares
using alert.
Input:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Fibonacci and Table of Squares</title>
<!-- Link to Google Fonts for Poppins -->
<link href="https://fonts.googleapis.com/css2?
family=Poppins:wght@400;600&display=swap" rel="stylesheet" />
Page 32 | 52
666-60-30
<style type="text/css">
body {
font-family: 'Poppins', sans-serif;
background-color: #f0f0f5;
margin: 20px;
padding: 0;
text-align: center;
h1 {
font-size: 28px;
color: #333;
form {
background-color: #fff;
padding: 20px;
border-radius: 10px;
display: inline-block;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
input[type="number"], input[type="button"] {
padding: 10px;
Page 33 | 52
666-60-30
font-size: 16px;
margin: 10px;
border: 1px solid #ccc;
border-radius: 5px;
width: 200px;
input[type="button"] {
background-color: #007bff;
color: white;
cursor: pointer;
input[type="button"]:hover {
background-color: #0056b3;
#output {
margin-top: 20px;
font-size: 18px;
color: #555;
white-space: pre-line;
</style>
<script type="text/javascript">
Page 34 | 52
666-60-30
// Function to generate Fibonacci sequence
function generateFibonacci() {
var n = document.getElementById('fibonacciInput').value;
n = parseInt(n);
if (isNaN(n) || n <= 0) {
document.getElementById('output').innerText = "Please enter a valid positive
number.";
return;
var fib = [0, 1];
for (var i = 2; i < n; i++) {
fib[i] = fib[i - 1] + fib[i - 2];
document.getElementById('output').innerText = "First " + n + " Fibonacci numbers: \n"
+ fib.slice(0, n).join(", ");
// Function to display numbers and their squares
function displaySquares() {
var n = document.getElementById('squareInput').value;
n = parseInt(n);
if (isNaN(n) || n <= 0) {
document.getElementById('output').innerText = "Please enter a valid positive
number.";
Page 35 | 52
666-60-30
return;
var output = "Number\tSquare\n";
for (var i = 1; i <= n; i++) {
output += i + "\t" + (i * i) + "\n";
document.getElementById('output').innerText = output;
</script>
</head>
<body>
<h1>Fibonacci and Square Table Generator</h1>
<form>
<label for="fibonacciInput">Enter a number for Fibonacci sequence:</label><br />
<input type="number" id="fibonacciInput" min="1" /><br />
<input type="button" value="Generate Fibonacci" onclick="generateFibonacci()" />
<hr />
<label for="squareInput">Enter a number for square table:</label><br />
<input type="number" id="squareInput" min="1" /><br />
<input type="button" value="Generate Square Table" onclick="displaySquares()" />
Page 36 | 52
666-60-30
</form>
<div id="output"></div>
</body></html>
Output:
Page 37 | 52
666-60-30
Experiment No 8
Page 38 | 52
666-60-30
Experiment Name: Write a PHP program to store current
date-time in a COOKIE and display the ‘Last visited on’ date-
time on the web page upon reopening of the same page.
Input:
<?php
$cookie_name = "lastVisit";
if(isset($_COOKIE[$cookie_name])) {
echo "Last visited on: " . $_COOKIE[$cookie_name];
$current_time = date("Y-m-d H:i:s");
setcookie($cookie_name, $current_time, time() + (86400 * 30)); // Cookie expires in 30
days
?>
Output:
Page 39 | 52
666-60-30
Experiment No 9
Experiment Name: Write a PHP program to store page views
count in SESSION, to increment the count on each refresh,
and to show the count on web page.
Input:
<?php
session_start();
if (!isset($_SESSION['views'])) {
$_SESSION['views'] = 0;
$_SESSION['views']++;
echo "Page views: " . $_SESSION['views'];
?>
Output:
Page 40 | 52
666-60-30
Experiment No 10
Experiment Name: Create a XHTML form with Name,
Address Line 1, Address Line 2, and E-mail text fields. On
submitting, store the values in MySQL table. Retrieve and
display the data based on Name
Input:
10 XHTML Form with MySQL Database.xhtml
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Experiment 10</title>
</head>
<body>
<form action="10store_data.php" method="post">
Name: <input type="text" name="name" required="required" /><br />
Address Line 1: <input type="text" name="address1" required="required" /><br />
Address Line 2: <input type="text" name="address2" /><br />
Email: <input type="email" name="email" required="required" /><br />
<input type="submit" value="Submit" />
Page 41 | 52
666-60-30
</form>
</body>
</html>
10store_data.php
<?php
// Database connection
$conn = new mysqli('localhost', 'root', '', 'test_db');
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
// Retrieve form data
$name = $_POST['name'];
$address1 = $_POST['address1'];
$address2 = $_POST['address2'];
$email = $_POST['email'];
// Insert data into the database
$sql = "INSERT INTO users (name, address1, address2, email) VALUES ('$name',
'$address1', '$address2', '$email')";
if ($conn->query($sql) === TRUE) {
echo "Data stored successfully!";
Page 42 | 52
666-60-30
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
$conn->close();
?>
Output:
Page 43 | 52
666-60-30
Experiment No 11
Experiment Name: Develop and demonstrate PHP Script for
the following problems:
a) Write a PHP Script to find out the Sum of the Individual
Digits.
b) b) Write a PHP Script to check whether the given number
is Palindrome or not.
Page 44 | 52
666-60-30
Input:
11_a_Sum of Digits.php
<?php
$number = 1234;
$sum = array_sum(str_split($number));
echo "Sum of digits: $sum";
?>
11_b_Palindrome Check.php
<?php
$number = 121;
$reverse = strrev($number);
if ($number == $reverse) {
echo "$number is a Palindrome.";
} else {
echo "$number is not a Palindrome.";
?>
Output:
11_a_Sum of Digits.php
Page 45 | 52
666-60-30
11_b_Palindrome Check.php
Experiment No 12
Experiment Name: Write an HTML page that contains a
selection box with a list of 5 countries. When the user selects
a country, its capital should be printed next in the list. Add
CSS to customize the properties of the font of the capital
(color, bold and font size).
Input:
<!DOCTYPE html>
<html lang="en">
Page 46 | 52
666-60-30
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Country and Capital Selector</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f8ff;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
.container {
text-align: center;
padding: 20px;
background-color: #ffffff;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
select {
Page 47 | 52
666-60-30
font-size: 16px;
padding: 10px;
margin: 10px;
border-radius: 4px;
border: 1px solid #ccc;
width: 200px;
.capital {
font-weight: bold;
color: #007bff;
font-size: 24px;
</style>
</head>
<body>
<div class="container">
<h1>Select a Country</h1>
<select id="countrySelect" onchange="showCapital()">
<option value="">--Select a Country--</option>
<option value="USA">United States</option>
<option value="Canada">Canada</option>
<option value="UK">United Kingdom</option>
Page 48 | 52
666-60-30
<option value="India">India</option>
<option value="Australia">Australia</option>
</select>
<p id="capitalOutput" class="capital"></p>
</div>
<script>
function showCapital() {
var country = document.getElementById("countrySelect").value;
var capital = "";
if (country === "USA") {
capital = "Washington, D.C.";
} else if (country === "Canada") {
capital = "Ottawa";
} else if (country === "UK") {
capital = "London";
} else if (country === "India") {
capital = "New Delhi";
} else if (country === "Australia") {
capital = "Canberra";
// Display the capital in the <p> tag
Page 49 | 52
666-60-30
document.getElementById("capitalOutput").innerHTML = capital ? `Capital: $
{capital}` : "";
</script>
</body>
</html>
Output:
Page 50 | 52
666-60-30
Page 51 | 52
666-60-30
Page 52 | 52
