Web Technology CSC-251
Lab Manual
Student Name: Fiza Shoaib
Roll Number: 23-ARID-4563
Registration Number: 23-ARID-4563
Degree Program: Bachelor of Science in Computer Science
Semester: 4
Section: A
Lab Instructor Name: Prof. Samra Shehzadi
Barani Institute of Sciences, Burewala
Department of Computer Science
Spring 2025
Table of Contents / Home Task List
Lab No. Task Detail CLOs
Lab 01 Create an HTML page with ordered and unordered lists of your CLO-2
favorite websites and programming languages.
Lab 02 Design a webpage using internal, external, and email CLO-2
hyperlinks.
Lab 03 Create a time-table using HTML tables for your semester CLO-2
schedule.
Lab 04 Design a static home page for a university using frames or CLO-2
modern CSS layout.
Lab 05 Create a static registration form for an event with basic input CLO-2
fields.
Lab 06 Create a static login form with username and password input CLO-2
fields.
Lab 07 Add JavaScript validation to the login form to ensure fields are CLO-3
not empty.
Lab 08 Add JavaScript validation to a registration form for valid email CLO-3
and password rules.
Lab 09 Write a PHP script to display prime numbers between 1 and CLO-3
100.
Lab 10 Create a PHP form to input text and apply string functions: CLO-3
length, word count, reverse, search.
Lab 11 Write a PHP script to merge two arrays and sort them in CLO-3
descending order.
Lab 12 Write a PHP program to read from one file and write contents CLO-3
to another.
Lab 13 Design static pages for an online store: Home, Register/Login, CLO-2
Profile, Catalog, Cart, Payment, Order.
Lab 14 Apply JavaScript validation to registration, login, profile, and CLO-3
payment pages in your store project.
Lab 15 Write a servlet (or PHP alternative) to connect to a database, CLO-4
retrieve data, and display it.
Date: 05-03-25
Lab Task-1
Problem Statement
Create an HTML page with ordered and unordered lists of your favorite websites and
programming languages.
Solution:
<!DOCTYPE html>
<html>
<head>
<title>My Favorites</title>
</head>
<body>
<h2>Favorite Websites (Ordered List)</h2>
<ol>
<li>[Link]
<li>[Link]
<li>[Link]
</ol>
<h2>Favorite Programming Languages (Unordered List)</h2>
<ul>
<li>PHP</li>
<li>Python</li>
<li>JavaScript</li>
</ul>
</body>
</html>
Output
Date: 12-03-25
Lab Task-2
Problem Statement
Design a webpage using internal, external, and email hyperlinks.
Solution:
<!DOCTYPE html>
<html>
<head>
<title>Hyperlinks</title>
</head>
<body>
<h2>Internal Link</h2>
<a href="[Link]">About Us</a>
<h2>External Link</h2>
<a href="[Link] target="_blank">Google</a>
<h2>Email Link</h2>
<a href="[Link] Us</a>
</body>
</html>
Date: 19-03-25
Lab Task-3
Problem Statement
Create a time-table using HTML tables for your semester schedule.
Solution:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>BSCS-4A Timetable</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
th, td {
border: 1px solid black;
padding: 10px;
text-align: center;
}
th {
background-color: #f2f2f2;
}
.break {
background-color:blanchedalmond;
font-weight: bold;
}
</style>
</head>
<body>
<h2>BSCS-4A Timetable</h2>
<table>
<tr>
<th>Time/Day</th>
<th>9:00-10:00</th>
<th>10:00-11:00</th>
<th>11:15-12:15</th>
<th>12:15-01:15</th>
<th>01:15-02:15</th>
</tr>
<tr>
<td>Monday</td>
<td>(CSC-211) Computer Organization & Assembly Language
(09:00-11:00)<br><b>Lab-2</b></td>
<td class="break">Break</td>
<td class="break">Break</td>
<td>(MTH-103) Multivariable Calculus<br><b>Room# 16</b></td>
<td>(CSC-355) Cloud Computing(09:00-11:00)<br><b>Lab-
1</b></td>
</tr>
<tr>
<td>Tuesday</td>
<td class="break">Break</td>
<td>(ENG-102) Expository Writing<br><b>Room# 22</b></td>
<td>(ENG-102) Expository Writing<br><b>Room# 22</b></td>
<td>(PHY-201) Applied Physics<br><b>Room# 17</b></td>
<td class="break">Break</td>
</tr>
<tr>
<td>Wednesday</td>
<td>(CSC-355) Cloud Computing <br><b>Room#18</b></td>
<td>(CSC-355) Cloud Computing<br><b>Room# 18</b></td>
<td>(CSC-211) Computer Organization & Assembly
Language<br><b>Room# 18</b></td>
<td>(CSC-251) Web Technologies<br><b>Room# 18</b></td>
<td>(CSC-211) Computer Organization & Assembly
Language<br><b>Room# 12</b></td>
</tr>
<tr>
<td>Thursday</td>
<td>(CSC-251) Web Technologies (12:15-2:15)<br><b>Lab
2</b></td>
<td>(IS-201) Islamic Studies<br><b>Room# 18</b></td>
<td>(CSC-251) Web Technologies<br><b>Room# 18</b></td>
<td class="break">Break</td>
<td>(IS-201) Islamic Studies<br><b>Room# 18</b></td>
</tr>
<tr>
<td>Friday</td>
<td class="break">Break</td>
<td>(PHY-201) Applied Physics<br><b>Room# 18</b></td>
<td>(PHY-201) Applied Physics<br><b>Room# 18</b></td>
<td>(PHY-201) Applied Physics<br><b>Lab-2</b></td>
<td class="break">Break</td>
</tr>
</table>
</body>
</html>
Output:
Date: 26-03-25
Lab Task-4
Problem Statement
Design a static home page for a university using frames or modern CSS layout.
Solution:
<!DOCTYPE html>
<html>
<head>
<title>University Home</title>
<style>
body { font-family: Arial; }
header, footer { background: green; color: white; padding: 10px;
text-align: center; }
nav { background: #ddd; padding: 10px; }
section { padding: 10px; }
</style>
</head>
<body>
<header><h1>Arid University</h1></header>
<nav>
<a href="#">Home</a> |
<a href="#">Departments</a> |
<a href="#">Contact</a>
</nav>
<section>
<h2>Welcome to Arid University</h2>
<p>We offer various programs in technology and sciences.</p>
<br> <br> <br> <br> <br> <br> <br> <br>
</section>
<footer>© 2025 ABC University</footer>
</body>
</html>
Date: 02-04-25
Lab Task-5
Problem Statement
Create a static registration form for an event with basic input fields
Solution:
<!DOCTYPE html>
<html>
<head>
<title>Event Registration</title>
</head>
<body>
<h2>Register for the Event</h2>
<form>
Name: <input type="text" name="name"><br><br>
Email: <input type="email" name="email"><br><br>
Gender:
<input type="radio" name="gender"> Male
<input type="radio" name="gender"> Female <br><br>
<input type="submit" value="Register">
</form>
</body>
</html>
Date: 09-04-25
Lab Task-6
Problem Statement
Create a static login form with username and password input fields.
Solution:
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
</head>
<body>
<h2>Login</h2>
<form>
Username: <input type="text" name="username"><br><br>
Password: <input type="password" name="password"><br><br>
<input type="submit" value="Login">
</form>
</body>
</html>
Date: 16-04-25
Lab Task-7
Problem Statement
Add JavaScript validation to the login form to ensure fields are not empty.
Solution:
<!DOCTYPE html>
<html>
<head>
<script>
function validateLogin() {
let user = [Link]["loginForm"]["username"].value;
let pass = [Link]["loginForm"]["password"].value;
if (user === "" || pass === "") {
alert("Both fields are required.");
return false;
}
}
</script>
</head>
<body>
<h2>Login Form</h2>
<form name="loginForm" onsubmit="return validateLogin()">
Username: <input type="text" name="username"><br><br>
Password: <input type="password" name="password"><br><br>
<input type="submit" value="Login">
</form>
</body>
</html>
Date: 30-04-25
Lab Task-8
Problem Statement
Add JavaScript validation to a registration form for valid email and password rules.
Solution:
<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
let email = [Link]["regForm"]["email"].value;
let password = [Link]["regForm"]["password"].value;
if (![Link]("@")) {
alert("Invalid email format.");
return false;
}
if ([Link] < 6) {
alert("Password must be at least 6 characters.");
return false;
}
}
</script>
</head>
<body>
<h2>Registration Form</h2>
<form name="regForm" onsubmit="return validateForm()">
Email: <input type="email" name="email"><br><br>
Password: <input type="password" name="password"><br><br>
<input type="submit" value="Register">
</form>
</body>
</html>
Date: 07-05-25
Lab Task-9
Problem Statement
Write a PHP script to display prime numbers between 1 and 100.
Solution:
<?php
echo "Prime Numbers between 1 and 100:<br>";
for ($num = 2; $num <= 100; $num++) {
$prime = true;
for ($i = 2; $i <= sqrt($num); $i++) {
if ($num % $i == 0) {
$prime = false;
break;
}
}
if ($prime) echo $num . " ";
}
?>
Date: 14-05-25
Lab Task-10
Problem Statement
Create a PHP form to input text and apply string functions: length, word count, reverse, search.
Solution:
<form method="post">
Enter text: <input type="text" name="text"><br>
<input type="submit" name="submit" value="Process">
</form>
<?php
if (isset($_POST['submit'])) {
$text = $_POST['text'];
echo "Length: " . strlen($text) . "<br>";
echo "Word Count: " . str_word_count($text) . "<br>";
echo "Reverse: " . strrev($text) . "<br>";
echo "Search 'PHP': ";
echo strpos($text, 'PHP') !== false ? 'Found' : 'Not Found';
}
?>
Date: 21-05-25
Lab Task-11
Problem Statement
Write a PHP script to merge two arrays and sort them in descending order.
Solution:
<?php
$arr1 = array(4, 2, 8);
$arr2 = array(3, 9, 1);
$merged = array_merge($arr1, $arr2);
rsort($merged);
echo "Sorted Merged Array: <br>";
foreach ($merged as $value) {
echo $value . " ";
}
?>
Date: 04-06-25
Lab Task-12
Problem Statement
Write a PHP program to read from one file and write contents to another.
Solution:
<?php
$inputFile = '[Link]';
$outputFile = '[Link]';
// Step 1: Create [Link] and write sample content
file_put_contents($inputFile, "This is a sample content written to
input file.");
// Step 2: Read content from [Link]
$content = file_get_contents($inputFile);
// Step 3: Write content to [Link]
file_put_contents($outputFile, $content);
// Step 4: Display output on browser
echo "<strong>Data copied from [Link] to [Link]:</strong><br>";
echo nl2br($content);
// Optional: Show confirmation and file names
echo "<br><br><em>[Link] and [Link] created in the same
directory as this PHP file.</em>";
?>
Date: 11-06-25
Lab Task-13
Problem Statement
Design static pages for an online store: Home, Register/Login, Profile, Catalog, Cart, Payment,
Order.
Solution:
Home:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SnapPink Online Store</title>
<link
href="[Link]
.css" rel="stylesheet">
<style>
.hero-img {
width: 100%;
height: 300px;
object-fit: cover;
}
</style>
</head>
<body>
<header class="bg-dark text-white p-3 text-center">
<h1>SnapPink Online Store</h1>
</header>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="[Link]">Home</a>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link"
href="[Link]">Register</a></li>
<li class="nav-item"><a class="nav-link"
href="[Link]">Login</a></li>
<li class="nav-item"><a class="nav-link"
href="[Link]">Profile</a></li>
<li class="nav-item"><a class="nav-link"
href="[Link]">Catalog</a></li>
<li class="nav-item"><a class="nav-link"
href="[Link]">Cart</a></li>
<li class="nav-item"><a class="nav-link"
href="[Link]">Payment</a></li>
<li class="nav-item"><a class="nav-link"
href="[Link]">Order</a></li>
</ul>
</div>
</nav>
<img src="[Link]" alt="Store Banner" class="hero-img">
<div class="container my-5">
<h2 class="text-center">Welcome to Our Online Store</h2>
<p class="text-center">Shop the best products curated for you.</p>
</div>
<footer class="bg-dark text-white text-center p-3 mt-5">
<p>© 2025 SnapPink Store. All rights reserved.</p>
</footer>
</body>
</html>
Register:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SnapPink Online Store</title>
<link
href="[Link]
.css" rel="stylesheet">
<style>
.hero-img {
width: 100%;
height: 300px;
object-fit: cover;
}
</style>
</head>
<body>
<header class="bg-dark text-white p-3 text-center">
<h1>SnapPink Online Store</h1>
</header>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="[Link]">Home</a>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link"
href="[Link]">Register</a></li>
<li class="nav-item"><a class="nav-link"
href="[Link]">Login</a></li>
<li class="nav-item"><a class="nav-link"
href="[Link]">Profile</a></li>
<li class="nav-item"><a class="nav-link"
href="[Link]">Catalog</a></li>
<li class="nav-item"><a class="nav-link"
href="[Link]">Cart</a></li>
<li class="nav-item"><a class="nav-link"
href="[Link]">Payment</a></li>
<li class="nav-item"><a class="nav-link"
href="[Link]">Order</a></li>
</ul>
</div>
</nav>
<div class="container my-5">
<h2>Register</h2>
<form class="row g-3">
<div class="col-md-6">
<label class="form-label">Name</label>
<input type="text" class="form-control" required>
</div>
<div class="col-md-6">
<label class="form-label">Email</label>
<input type="email" class="form-control" required>
</div>
<div class="col-12">
<label class="form-label">Password</label>
<input type="password" class="form-control" required>
</div>
<div class="col-12">
<button type="submit" class="btn btn-primary">Register</button>
</div>
</form>
</div>
<footer class="bg-dark text-white text-center p-3 mt-5">
<p>© 2025 SnapPink Store. All rights reserved.</p>
</footer>
</body>
</html>
Login:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SnapPink Online Store</title>
<link
href="[Link]
.css" rel="stylesheet">
<style>
.hero-img {
width: 100%;
height: 300px;
object-fit: cover;
}
</style>
</head>
<body>
<header class="bg-dark text-white p-3 text-center">
<h1>SnapPink Online Store</h1>
</header>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="[Link]">Home</a>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link"
href="[Link]">Register</a></li>
<li class="nav-item"><a class="nav-link"
href="[Link]">Login</a></li>
<li class="nav-item"><a class="nav-link"
href="[Link]">Profile</a></li>
<li class="nav-item"><a class="nav-link"
href="[Link]">Catalog</a></li>
<li class="nav-item"><a class="nav-link"
href="[Link]">Cart</a></li>
<li class="nav-item"><a class="nav-link"
href="[Link]">Payment</a></li>
<li class="nav-item"><a class="nav-link"
href="[Link]">Order</a></li>
</ul>
</div>
</nav>
<div class="container my-5">
<h2>Login</h2>
<form class="row g-3">
<div class="col-md-6">
<label class="form-label">Username</label>
<input type="text" class="form-control" required>
</div>
<div class="col-md-6">
<label class="form-label">Password</label>
<input type="password" class="form-control" required>
</div>
<div class="col-12">
<button type="submit" class="btn btn-secondary">Login</button>
</div>
</form>
</div>
<footer class="bg-dark text-white text-center p-3 mt-5">
<p>© 2025 SnapPink Store. All rights reserved.</p>
</footer>
</body>
</html>
Catalog:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SnapPink Online Store</title>
<link
href="[Link]
.css" rel="stylesheet">
<style>
.hero-img {
width: 100%;
height: 300px;
object-fit: cover;
}
</style>
</head>
<body>
<header class="bg-dark text-white p-3 text-center">
<h1>SnapPink Online Store</h1>
</header>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="[Link]">Home</a>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link"
href="[Link]">Register</a></li>
<li class="nav-item"><a class="nav-link"
href="[Link]">Login</a></li>
<li class="nav-item"><a class="nav-link"
href="[Link]">Profile</a></li>
<li class="nav-item"><a class="nav-link"
href="[Link]">Catalog</a></li>
<li class="nav-item"><a class="nav-link"
href="[Link]">Cart</a></li>
<li class="nav-item"><a class="nav-link"
href="[Link]">Payment</a></li>
<li class="nav-item"><a class="nav-link"
href="[Link]">Order</a></li>
</ul>
</div>
</nav>
<div class="container my-5">
<h2>Product Catalog</h2>
<div class="row">
<div class="col-md-4">
<div class="card mb-3">
<img src="[Link]" class="card-img-top" alt="Blue Hoodie">
<div class="card-body">
<h5 class="card-title">Blue Hoodie</h5>
<p class="card-text">PKR 1200</p>
<button class="btn btn-success">Add to Cart</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-3">
<img src="[Link]" class="card-img-top" alt="Notebook Pack">
<div class="card-body">
<h5 class="card-title">Notebook Pack</h5>
<p class="card-text">PKR 350</p>
<button class="btn btn-success">Add to Cart</button>
</div>
</div>
</div>
</div>
</div>
<footer class="bg-dark text-white text-center p-3 mt-5">
<p>© 2025 SnapPink Store. All rights reserved.</p>
</footer>
</body>
</html>
Cart:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SnapPink Online Store</title>
<link
href="[Link]
.css" rel="stylesheet">
<style>
.hero-img {
width: 100%;
height: 300px;
object-fit: cover;
}
</style>
</head>
<body>
<header class="bg-dark text-white p-3 text-center">
<h1>SnapPink Online Store</h1>
</header>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="[Link]">Home</a>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link"
href="[Link]">Register</a></li>
<li class="nav-item"><a class="nav-link"
href="[Link]">Login</a></li>
<li class="nav-item"><a class="nav-link"
href="[Link]">Profile</a></li>
<li class="nav-item"><a class="nav-link"
href="[Link]">Catalog</a></li>
<li class="nav-item"><a class="nav-link"
href="[Link]">Cart</a></li>
<li class="nav-item"><a class="nav-link"
href="[Link]">Payment</a></li>
<li class="nav-item"><a class="nav-link"
href="[Link]">Order</a></li>
</ul>
</div>
</nav>
<div class="container my-5">
<h2>Your Cart</h2>
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-
items-center">
Blue Hoodie
<span>PKR 1200 <button class="btn btn-danger btn-
sm">Remove</button></span>
</li>
</ul>
<p class="mt-3"><strong>Total:</strong> PKR 1200</p>
</div>
<footer class="bg-dark text-white text-center p-3 mt-5">
<p>© 2025 SnapPink Store. All rights reserved.</p>
</footer>
</body>
</html>
Payment:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SnapPink Online Store</title>
<link
href="[Link]
.css" rel="stylesheet">
<style>
.hero-img {
width: 100%;
height: 300px;
object-fit: cover;
}
</style>
</head>
<body>
<header class="bg-dark text-white p-3 text-center">
<h1>SnapPink Online Store</h1>
</header>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="[Link]">Home</a>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link"
href="[Link]">Register</a></li>
<li class="nav-item"><a class="nav-link"
href="[Link]">Login</a></li>
<li class="nav-item"><a class="nav-link"
href="[Link]">Profile</a></li>
<li class="nav-item"><a class="nav-link"
href="[Link]">Catalog</a></li>
<li class="nav-item"><a class="nav-link"
href="[Link]">Cart</a></li>
<li class="nav-item"><a class="nav-link"
href="[Link]">Payment</a></li>
<li class="nav-item"><a class="nav-link"
href="[Link]">Order</a></li>
</ul>
</div>
</nav>
<div class="container my-5">
<h2>Payment</h2>
<form class="row g-3">
<div class="col-md-4">
<label class="form-label">Card Number</label>
<input type="text" class="form-control" required>
</div>
<div class="col-md-4">
<label class="form-label">Expiry</label>
<input type="text" class="form-control" placeholder="MM/YY"
required>
</div>
<div class="col-md-4">
<label class="form-label">CVV</label>
<input type="text" class="form-control" required>
</div>
<div class="col-12">
<button type="submit" class="btn btn-primary">Pay Now</button>
</div>
</form>
</div>
<footer class="bg-dark text-white text-center p-3 mt-5">
<p>© 2025 SnapPink Store. All rights reserved.</p>
</footer>
</body>
</html>
Order:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SnapPink Online Store</title>
<link
href="[Link]
.css" rel="stylesheet">
<style>
.hero-img {
width: 100%;
height: 300px;
object-fit: cover;
}
</style>
</head>
<body>
<header class="bg-dark text-white p-3 text-center">
<h1>SnapPink Online Store</h1>
</header>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="[Link]">Home</a>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link"
href="[Link]">Register</a></li>
<li class="nav-item"><a class="nav-link"
href="[Link]">Login</a></li>
<li class="nav-item"><a class="nav-link"
href="[Link]">Profile</a></li>
<li class="nav-item"><a class="nav-link"
href="[Link]">Catalog</a></li>
<li class="nav-item"><a class="nav-link"
href="[Link]">Cart</a></li>
<li class="nav-item"><a class="nav-link"
href="[Link]">Payment</a></li>
<li class="nav-item"><a class="nav-link"
href="[Link]">Order</a></li>
</ul>
</div>
</nav>
<div class="container my-5">
<h2>Order Summary</h2>
<div class="alert alert-success">
<strong>Thank you!</strong> Your order has been placed successfully.
</div>
</div>
<footer class="bg-dark text-white text-center p-3 mt-5">
<p>© 2025 SnapPink Store. All rights reserved.</p>
</footer>
</body>
</html>
Date: 18-06-25
Lab Task-14
Problem Statement
Apply JavaScript validation to registration, login, profile, and payment pages in your store
project.
Solution:
This is called in each file <script src="[Link]"></script>
[Link]:
<script>
function validateRegister() {
const name = [Link]('regName').value;
const email = [Link]('regEmail').value;
const password = [Link]('regPassword').value;
if (!name || !email || !password) {
alert("All registration fields are required."); return false;
}
if () {
alert("Enter a valid email."); return false;
}
if ([Link] < 6) {
alert("Password must be at least 6 characters."); return false;
}
return true;
}
function validateLogin() {
const username = [Link]('loginUsername').value;
const password = [Link]('loginPassword').value;
if (!username || !password) {
alert("Username and Password are required."); return false;
}
return true;
}
function validateProfile() {
const fullname = [Link]('profileFullname').value;
const phone = [Link]('profilePhone').value;
if (!fullname || !phone) {
alert("Name and Phone are required."); return false;
}
if (!/^[0-9]{11}$/.test(phone)) {
alert("Phone must be 11 digits."); return false;
}
return true;
}
function validatePayment() {
const card = [Link]('cardNumber').value;
const expiry = [Link]('expiry').value;
const cvv = [Link]('cvv').value;
if (!card || !expiry || !cvv) {
alert("All payment fields are required."); return false;
}
if ([Link] !== 16 || isNaN(card)) {
alert("Card number must be 16 digits."); return false;
}
return true;
}
</script>
Date: 26-06-25
Lab Task-15
Problem Statement
Write a servlet (or PHP alternative) to connect to a database, retrieve data, and display it.
Solution:
[Link]
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "store";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
?>
PhpMyAdmin (Database: store)
view_users.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>View Registered Users</title>
<link
href="[Link]
.css" rel="stylesheet">
</head>
<body>
<div class="container my-5">
<h2 class="text-center">Registered Users</h2>
<table class="table table-striped">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<?php
include 'db_connect.php';
$sql = "SELECT id, name, email FROM users";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
echo "<tr><td>" . $row["id"] . "</td><td>" . $row["name"] .
"</td><td>" . $row["email"] . "</td></tr>";
}
} else {
echo "<tr><td colspan='3' class='text-center'>No users
found</td></tr>";
}
$conn->close();
?>
</tbody>
</table>
</div>
</body>
</html>