Scribd
Upload
15 views51 pages

666-59-17 Lab Experiments Report - Web Programming

Uploaded by

sadiapreety2003
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
15 views51 pages

666-59-17 Lab Experiments Report - Web Programming

Uploaded by

sadiapreety2003
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/ 51

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 : Vijoy Barua

2. Student ID : 666-59-17

3. Batch : 59th Batch

4. Email ID : [email protected]

5. Date of Assignment : 4-12-2024

6. Date of Submission : 14-12-2024

7. Contact No : 01726829868

8. Signature of Student : VIJOYBARUA

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;

}
Page 2 | 51
666-60-30

header {

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%;

Page 3 | 51
666-60-30

padding: 10px;

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 {

Page 4 | 51
666-60-30

border: 1px solid #ddd;

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;

Page 5 | 51
666-60-30

margin-top: 20px;

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>

Page 6 | 51
666-60-30

<section>

<h2>Frame Section</h2>

<div style="text-align: center;">

<iframe

width="560"

height="315"

src="https://www.youtube.com/embed/Qhaz36TZG5Y?si=xa-
Rw1tEd6CqIxD3&amp;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>
Page 7 | 51
666-60-30

<th>Message</th>

</tr>

<tr>

<td>VIJOY</td>

<td>[email protected]</td>

<td>Hello!</td>

</tr>

<tr>

<td>Mahmud</td>

<td>[email protected]</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>

Page 8 | 51
666-60-30

<footer>

© 2024 Unique Webpage. All rights reserved.

</footer>

</body>

</html>

Output:

Page 9 | 51
666-60-30

Experiment No 2
Page 10 | 51
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 | 51
666-60-30

Internal Style
Page 12 | 51
666-60-30

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>

<body>

<h1>Internal CSS Example</h1>

Page 13 | 51
666-60-30

<p>This paragraph is styled using internal CSS.</p>

</body>

</html>

Output:

External Style

Input:

2.3 External CSS.html


Page 14 | 51
666-60-30

<!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>

2.3 styles.css

body {

background-color: #f4f4f4; font-family: Arial, sans-serif;

h1 {

Page 15 | 51
666-60-30

color: darkblue; text-align: center;

p{

font-size: 16px; color: darkgreen;

Output:

Experiment No 3

Experiment Name: Display even & odd numbers using


JavaScript

Input:

<!DOCTYPE html>

Page 16 | 51
666-60-30

<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 {

oddNumbers.push(i);

}}

document.getElementById("result").innerHTML =

Page 17 | 51
666-60-30

"<b>Even Numbers:</b> " + evenNumbers.join(", ") + "<br><b>Odd


Numbers:</b> " + oddNumbers.join(", ");

</script> </body> </html>

Output:

Experiment No 4

Experiment Name: Displaying sum of n numbers using


JavaScript

Input:

<!DOCTYPE html>

<html>

Page 18 | 51
666-60-30

<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;

document.getElementById("sumResult").innerHTML = "The sum of first " + n + "


numbers is: " + sum;

</script>

</body>

</html>

Page 19 | 51
666-60-30

Output:

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).
Page 20 | 51
666-60-30

 E-mail id (should not contain any invalid and must follow


the standard pattern [email protected])
 Mobile Number (Phone number should contain 10 digits
only).
 Last Name and Address (should not be Empty)

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>

Page 21 | 51
666-60-30

<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>

<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}$/;

Page 22 | 51
666-60-30

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.";

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.";

Page 23 | 51
666-60-30

return false;

if (!address) {

document.getElementById("validationMessage").innerHTML = "Address cannot be


empty.";

return false;

alert("Registration Successful!");

return true;

</script> </body> </html>

Output:

Page 24 | 51
666-60-30

Experiment No 6

Experiment Name: To display a digital clock using JavaScript

Input:

6. Digital Clock using JS.html

<head>

Page 25 | 51
666-60-30

<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');

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');

Page 26 | 51
666-60-30

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 {

font-family: 'Poppins', sans-serif;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

Page 27 | 51
666-60-30

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 */

color: transparent;

.date {

font-size: 25px;

color: #ba9bc1;

Page 28 | 51
666-60-30

margin-top: 10px;

font-family:'Poppins', monospace

Output:

Page 29 | 51
666-60-30

Experiment No 7

Page 30 | 51
666-60-30

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" />

<style type="text/css">

body {

font-family: 'Poppins', sans-serif;

Page 31 | 51
666-60-30

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;

font-size: 16px;

margin: 10px;

border: 1px solid #ccc;

Page 32 | 51
666-60-30

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">

// Function to generate Fibonacci sequence

function generateFibonacci() {

var n = document.getElementById('fibonacciInput').value;

Page 33 | 51
666-60-30

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.";

return;

var output = "Number\tSquare\n";

Page 34 | 51
666-60-30

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()" />

</form>

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

</body>

Page 35 | 51
666-60-30

</html>

Output:

Page 36 | 51
666-60-30

Experiment No 8

Page 37 | 51
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:

Experiment No 9

Page 38 | 51
666-60-30

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:

Experiment No 10

Page 39 | 51
666-60-30

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" />

</form>

Page 40 | 51
666-60-30

</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!";

} else {

Page 41 | 51
666-60-30

echo "Error: " . $sql . "<br>" . $conn->error;

$conn->close();

?>

Output:

Page 42 | 51
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 43 | 51
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 44 | 51
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 45 | 51
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 46 | 51
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 47 | 51
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 48 | 51
666-60-30

document.getElementById("capitalOutput").innerHTML = capital ? `Capital: $


{capital}` : "";

</script>

</body>

</html>

Output:

Page 49 | 51
666-60-30

Page 50 | 51
666-60-30

Page 51 | 51

You might also like