Scribd
Upload
7 views38 pages

WAS Printouts PDF

The document outlines the design of a static web page for an online bookstore, including HTML files for various sections such as home, top, left, right, and individual subject pages. It also includes a registration form with JavaScript validation for user inputs, as well as CSS styles for formatting the pages. The structure is organized using framesets and various HTML elements to create a user-friendly interface for browsing and ordering books.

Uploaded by

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

WAS Printouts PDF

The document outlines the design of a static web page for an online bookstore, including HTML files for various sections such as home, top, left, right, and individual subject pages. It also includes a registration form with JavaScript validation for user inputs, as well as CSS styles for formatting the pages. The structure is organized using framesets and various HTML elements to create a user-friendly interface for browsing and ordering books.

Uploaded by

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

EXPERIMENT 01: Design the following static web pages required for an online

book store web site.

home.html
<frameset rows="40%,*">

<frame src="top.html" noresize scrolling="NO" name="topframe">


<frameset cols="15%,*">
<frame src="left.html" noresize scrolling="NO" name="leftframe">
<frame src="right.html" noresize name="rightframe" scrolling="auto">
</frameset>
</frameset>

top.html
<html>
<head>

<title>Top Frame</title>
</head>
<body bgcolor="YellowGreen">
<img src="images/logo1.png" width="125" height="115" align="left">
<img src="images/cse.png" width="125" height="115" align="right">
<center>
<marquee bgcolor="yellow" width="650" behavior="alternate">
<font face="Brush Script MT" size="8" color="green"><b><i>Online Book Store</i></b></font>
</marquee>
<br>
<font face="Brush Script" size="6" color="white"><b>Created & Maintained By MRCET</b></font>
</center>
<br>
<table width="100%" height="50%" cellspacing="10">
<tr align="center">
<td><a href="Home.html" target="_parent"><font face="Brush Script" size="6"
color="navy">HOME</a></td>
<td><a href="login.html" target="rightframe"><font face="Brush Script" size="6"
color="navy">LOGIN</a></td>
<td><a href="registration.html" target="rightframe"><font face="Brush Script" size="6"
color="navy">REGISTER</a></td>
<td><a href="catalogue.html" target="rightframe"><font face="Brush Script" size="6"
color="navy">CATALOGUE</a></td>
</tr>
</table>
</body>
</html>

left.html
<html>
<body align="center" bgcolor="bisque">

<br>
<a href="cse.html" target="rightframe"><font size="6">CSE</font></a><br><br>
<a href="ece.html" target="rightframe"><font size="6">ECE</font></a><br><br>
<a href="eee.html" target="rightframe"><font size="6">EEE</font></a><br><br>
<a href="mech.html" target="rightframe"><font size="6">MECH</font></a><br>
</body>
</html>

right.html
<html>
<body bgcolor="orange">
<center>
<img src="images/Books.jpg" height="170"><br>
<font face="Brush Script MT" size="5" color="blue">
<h1><b>Welcome to the Online Book Store!!!</b></h1>
</font>
<font face="Brush Script MT" size="5" color="red">
<h2><b>"A Huge Collection Of Engineering E-Books"</b></h2>
</font>
</center>
</body>
</html>

cse.html
<html>
<head><title>CSE</title></head>
<body bgcolor="cyan">
<center><font color="blue"><h1>Computer Science and Engineering</h1></font></center>
<br>
<table align="center">
<tr>
<td>Text Books</td>
<td>
<select>
<option value="select the book" selected>Select the book</option>
<option value="C&Ds">C&Ds</option>
<option value="Ads">Ads</option>
<option value="Java">Java</option>
<option value="Oracle">Oracle</option>
<option value="Ms SQL Server">Ms SQL Server</option>
<option value="MySql">MySql</option>
</select>
</td>
</tr>
<tr>
<td>Quantity</td>
<td><input type="text" id="q"></td>
</tr>
<tr>
<td></td>
<td>
<form method="post" action="order.html">
<input type="submit" value="ok" />
</form>
</td>
</tr>
</table>
<center>
<pre>Cost of one book is 500 + shipping 100</pre>
</center>
</body>
</html>

ece.html
<html>
<body bgcolor="Plum">
<h1><font color="blue">Electronics and Communication Engineering</font></h1>
<h2>
<ul>
<li>Digital Circuits</li>
<li>Signals and Systems</li>
<li>Digital Communication</li>
</ul>
</h2>
</body>
</html>

eee.html
<html>
<body bgcolor="Plum">
<h1><font color="blue">Electrical and Electronics Engineering</font></h1>
<h2>
<ul type="square">
<li>Concepts in Electric Circuits</li>
<li>Introduction to Electronic Engineering</li>
<li>Electrical Power</li>
</ul>
</h2>
</body>
</html>

mech.html
<html>
<body bgcolor="Plum">
<h1><font color="blue">Mechanical Engineering</font></h1>
<h2>
<ol type="I">
<li>Theory of Machines</li>
<li>Automation and Robotics</li>
<li>Engineering Fluid Mechanics</li>
</ol>
</h2>
</body>
</html>
catalogue.html
<html>
<head>

<title>Catalogue</title>
</head>
<body bgcolor="pink">
<form action="order.html">
<table border="1" width="100%">
<tr>
<td><img src="images/wt.jpg" width="100" height="100"></td>
<td>Book: Web Technologies <br> Author: Uttam K. Roy <br> Publication: Oxford University Press</td>
<td>531</td>
<td><input type="submit" value="Add to cart"></td>
</tr>
<tr>
<td><img src="images/php.jpg" width="100" height="100"></td>
<td>Book: PHP & MySQL Web Development <br> Author: Luke Welling & Laura Thompson <br>
Publication: PEARSON</td>
<td>898</td>
<td><input type="submit" value="Add to cart"></td>
</tr>
</table>
</form>
</body>
</html>

login.html
<html>
<body bgcolor="pink">

<basefont face="Cambria" size="4">


<center>
<img src="images/login.jpg" width="385" height="135" /><br />
<font face="Brush Script MT" size="7" color="purple"><b>Enter Login Details:</b></font>
</center>
<form name="f1" method="post" action="right.html">
<table align="center" width="100" height="150" cellspacing="15">
<tr>
<td><b>Login ID:</b></td>
<td><input type="text" name="t1"></td>
</tr>
<tr>
<td><b>Password:</b></td>
<td><input type="password" name="t2"></td>
</tr>
<tr align="center">
<td><input type="submit" name="b1" value="Submit"></td>
<td><input type="reset" name="b2" value="Reset"></td>
</tr>
</table>
</form>
</basefont>
</body>
</html>
registration.html
<html>
<head><title>Registration Form</title></head>
<body bgcolor="#E4F0F8">

<center><font color="blue" size="6" face="arial">Registration Form</font></center><br />


<form action="right.html">
First Name (Minimum 6 characters)<font color="red">*</font>
<input type="text" id="firstname" /><br /><br />
Last Name<font color="red">*</font>
<input type="text" id="lastname" /><br /><br />
Email Address<font color="red">*</font>
<input type="text" id="email" /><br />
<font color="red">(one e-mail id only):</font>
<font color="blue">e.g. [email protected]</font><br /><br />
Password (minimum 6 characters)<font color="red">*</font>
<input type="password" id="pass"><br /><br />
Address<font color="red">*</font>
<textarea rows="2" cols="20" id="addr"></textarea><br /><br />
Mobile No<font color="red">*</font>
<input type="text" id="mobileno" /><br /><br />
Gender:
<input type="radio" name="gender"> Male
<input type="radio" name="gender"> Female<br /><br />
<input type="submit" value="Submit" />
<input type="reset" value="Reset" />
</form>
</body>
</html>

order.html
<html>
<head><title>Order Confirmation</title></head>
<body bgcolor="cyan">

<center>
<pre><strong><b>Your order is confirmed</b></strong></pre>
<h2><b>THANK YOU... Visit Again</b></h2>
</center>
</body>
</html>
EXPERIMENT 02: Write JavaScript to validate the following fields of the
Registration page.

registeration.html
<html>

<head>

<title>Registration Form Validation</title>

<script type='text/javascript'>
function formValidator() {

// Make quick references to our fields


var firstname = document.getElementById('firstname');

var lastname = document.getElementById('lastname');

var email = document.getElementById('email');


var pass = document.getElementById('pass');

var addr = document.getElementById('addr');

var mobileno = document.getElementById('mobileno');

// Check each input in the order that it appears in the form


if (notEmpty(firstname, "First Name cannot be null") &&

isAlphabet(firstname, "Please enter only letters for your Firstname") &&


lengthRestriction(firstname, 6) &&

isAlphabet(lastname, "Please enter only letters for your Lastname") &&

emailValidator(email, "Please enter a valid email address") &&


lengthRestriction(pass, 6) &&

isAlphanumeric(pass, "Please enter Numbers and Letters Only for password") &&
notEmpty(addr, "Please enter the address") &&

isNumeric(mobileno, "Please enter a valid mobile number") &&


lengthRestriction1(mobileno, 10, 10)) {
return true;

return false;

function notEmpty(elem, helperMsg) {


if (elem.value.length == 0) {

alert(helperMsg);

elem.focus(); // set the focus to this input


return false;

return true;

function isNumeric(elem, helperMsg) {

var numericExpression = /^[0-9]+$/;

if (elem.value.match(numericExpression)) {

return true;

} else {

alert(helperMsg);

elem.focus();

return false;

function isAlphabet(elem, helperMsg) {

var alphaExp = /^[a-zA-Z]+$/;

if (elem.value.match(alphaExp)) {

return true;

} else {
alert(helperMsg);
elem.focus();
return false;

function isAlphanumeric(elem, helperMsg) {

var alphaExp = /^[0-9a-zA-Z]+$/;


if (elem.value.match(alphaExp)) {

return true;
} else {

alert(helperMsg);
elem.focus();

return false;

function lengthRestriction(elem, min) {

var uInput = elem.value;

if (uInput.length >= min) {

return true;

} else {

alert("Please enter a minimum of " + min + " characters");

elem.focus();
return false;

function emailValidator(elem, helperMsg) {

var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-Z0-9]{2,4}$/;

if (elem.value.match(emailExp)) {

return true;

} else {

alert(helperMsg);
elem.focus();
return false;

function lengthRestriction1(elem, min, max) {

var uInput = elem.value;


if (uInput.length >= min && uInput.length <= max) {

return true;

} else {
alert("Please enter " + min + " numbers only");
elem.focus();

return false;

</script>

</head>

<body bgcolor="#E4F0F8">

<center>

<font color="blue" size="6" face="arial">Registration Form</font>


</center>

<br />

<form onsubmit='return formValidator()' action="success.html">

First Name (Minimum 6 characters)<font color="red">*</font>

<input type='text' id='firstname' /><br /><br />

Last Name<font color="red">*</font>

<input type='text' id='lastname' /><br /><br />

Email Address<font color="red">*</font>

<input type='text' id='email' /><br />

<font color="red">(one e-mail id only):</font>

<font color="redblue">e.g. [email protected]</font><br /><br/>

Password (Minimum 6 characters)<font color="red">*</font>


<input type='password' id='pass'><br /><br/>

Address<font color="red">*</font>
<textarea rows="2" cols="20" id='addr'></textarea><br /><br />

Mobile No<font color="red">*</font>


<input type='text' id='mobileno' /><br />
Gender:

<input type='radio' name="gender"> Male


<input type='radio' name="gender"> Female<br /><br />

<input type='Submit' value='Submit' />

<input type='Reset' value='Reset' />

</form>

</body>

</html>
EXPERIMENT 03: Develop and demonstrate the usage of inline, internal and
external style sheet using CSS

style.css:
css
Copy
p.left {
text-align: left;
color: blue;
font-family: Cambria;
font-size: large;
text-indent: 20px;
}

p.center {
text-align: center;
text-decoration: underline;
text-transform: uppercase;
letter-spacing: -3px;
word-spacing: 20px;
font-size: larger;
}

p.right {
text-align: right;
color: red;
font-family: Tahoma;
font-size: 15pt;
text-decoration: overline;
font-style: italic;
}

b#headline {
color: orange;
font-size: 22px;
font-family: Arial;
text-decoration: underline;
}

sample.html:
html
Copy
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
background-image: url('images/cse.png');
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-color: pink;
}

a:link {
text-decoration: none;
color: orange;
}

a:visited {
text-decoration: none;
color: red;
}

a:hover {
text-decoration: underline;
color: blue;
}

a:active {
text-decoration: underline;
color: purple;
}

h3 {
color: green;
}

.c1 {
cursor: crosshair;
}

.c2 {
cursor: pointer;
}

.c3 {
cursor: move;
}

.c4 {
cursor: text;
}

.c5 {
cursor: wait;
}

.c6 {
cursor: help;
}
</style>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body bgcolor="cyan">
<h1 style="color:blue; text-align:center;">CSS (Inline, Internal and External)</h1>

<p>This Paragraph is Not Styled</p>


<p class="left">This Paragraph is Styled by class "Left"</p>
<p class="center">This Paragraph is Styled by class "Center"</p>
<p class="right">This Paragraph is Styled by class "Right"</p>

<b>This is normal Bold</b> <br>


<b id="headline">This Bold Text is Styled</b>

<h2><b><a href="#">This is a link</a></b></h2>

<h3 class="c1">The cursor over this element is a plus sign</h3>


<h3 class="c2">The cursor over this element is a pointing hand</h3>
<h3 class="c3">The cursor over this element is a grasping hand</h3>
<h3 class="c4">The cursor over this element is an I bar</h3>
<h3 class="c5">The cursor over this element is a wait</h3>
<h3 class="c6">The cursor over this element is a question mark</h3>
</body>
</html>
EXPERIMENT 04: Develop and demonstrate JavaScript with POP-UP boxes and
functions for the following problems:
• Input: Click on Display Date button using onclick( ) function
Output: Display date in the textbox

• Input: A number n obtained using prompt


Output: Factorial of n number using alert
• Input: A number n obtained using prompt
Output: A multiplication table of numbers from 1 to 10 of n using
alert
• Input: A number n obtained using prompt and add another number
using confirm
Output: Sum of the entire n numbers using alert

date.html:
<html>
<body>
<script>
function display() {

var x = "You have clicked";


var d = new Date();
var date = d.getDate();
var month = d.getMonth();
month++;
var year = d.getFullYear();
document.getElementById("dis").value = date + "/" + month + "/" + year;
}
</script>
<form>
<input type="text" id="dis" /><br />
<input type="button" value="Display Date" onclick="display()" />
</form>
</body>
</html>

factorial.html:
<html>
<head>

<title>Factorial</title>
<script language="javascript">
function factorialcalc() {
var number = parseInt(prompt("Enter a number, I'll calculate its factorial", "Whole numbers greater
than zero, please"));
var factorial = 1;
for (var i = 1; i <= number; i++) {
factorial = factorial * i;
}
alert("The factorial of " + number + " is " + factorial);
}
</script>
</head>
<body>
<form name="frm">
<input type="button" value="Factorial" onclick="factorialcalc();" />
</form>
</body>
</html>

multable.html:
<html>
<head><title>Multiplication Table</title></head>
<body>
<script type="text/javascript">
var n = prompt("Enter positive value for n: ");
if (!isNaN(n) && n > 0) {
var table = "";
var number = "";
for (var i = 1; i <= 10; i++) {
number = n * i;
table += n + " * " + i + " = " + number + "\n";
}
alert(table);
} else {
alert("Please enter a valid positive number.");
}
document.write(n + " table values displayed using alert..<br />");
</script>
</body>
</html>

sum of n numbers.html:
<html>
<head><title>Sum of N Numbers using Popup Boxes</title>
<script language="javascript">
function addsum() {
alert("You're going to give me a list of numbers. I'm going to add them together for you.");
var keepgoing = true;
var sumofnums = 0;
while (keepgoing) {
sumofnums = sumofnums + parseInt(prompt("What's the next number to add?", ""));
keepgoing = confirm("Add another number?");
}
alert("The sum of all your numbers is " + sumofnums);
}
</script>
</head>
<body>
<form name="frm">
<input type="button" value="Sum of N Numbers" onclick="addsum();" />
</form>
</body>
</html>
EXPERIMENT 05: 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).

countries.html
<html>
<head>

<title>WT Lab Manual Program No. 3</title>

<style>

h1 {

color: red;
text-align: center;

}
.textbox1 {

color: blue;
font-size: 30px;

font-weight: bold;

}
</style>

</head>

<body>

<center>

<h1>Select the country name to find its capital</h1>

<form name="myform">

Select Country

<select name="country" id="sbox1" onChange="myFunction()" required>

<option value=""></option> <option value="NEW

DELHI">INDIA</option> <option
value="CANBERRA">AUSTRALIA</option> <option
value="WASHINGTON D.C">AMERICA</option> <option

value="LONDON">UNITED KINGDOM</option> <option


value="BERLIN">GERMANY</option>

</select><br><br>
Capital
<input type="text" class="textbox1" id="sbox2" readonly>

</form>

</center>
<script>

function myFunction() {

var a = document.getElementById("sbox1").value;

document.getElementById("sbox2").value = a;

</script>
</body>

</html>
EXPERIMENT 06: Develop and demonstrate PHP Script for the following
problems:
• Write a PHP Script to find out the Sum of the Individual Digits.
Write a PHP Script to check whether the given number is Palindrome or not

sum.php
<?php

$n = 323; // Example number

$sum = 0;

// Loop through the digits of the number

while ($n > 0) {

$r = $n % 10; // Get the last digit

$sum += $r; // Add the digit to sum

$n = (int)($n / 10); // Remove the last digit

echo "Sum of individual digits is: $sum";

?>

palindrome.php
<?php
$n = 323; // Example number

$t = $n; // Store the original number


$rev = 0;

// Reverse the number


while ($n > 0) {

$r = $n % 10; // Get the last digit


$rev = $rev * 10 + $r; // Build the reversed number
$n = (int)($n / 10); // Remove the last digit

}
echo "Reversed number is: $rev <br>";

if ($t == $rev) {

echo "$t is a Palindrome";

} else {

echo "$t is not a Palindrome";

?>
EXPERIMENT 07: Write a XML program to validate student details (Rno,
Name, college & branch) using DTD

student1.xml
<?xml version="1.0"?>
<!-- student1.xml -->

<students>

<student>

<name>

<firstname>James</firstname>

<lastname>Smith</lastname>

</name>
<address>

<street>101 South Street</street>


<city>Halifax</city>

<email>[email protected]</email>

<phone>4940001</phone>

</address>

</student>

<student>

<name>

<firstname>Tom</firstname>
<lastname>White</lastname>

</name>
<address>

<street>202 Victoria Road</street>


<city>Dartmouth</city>
<email>[email protected]</email>
<phone>4940002</phone>

</address>

</student>

</students>
student2.xml
<?xml version="1.0"?>

<!-- students2.xml for the DTD -->

<!DOCTYPE students SYSTEM "students.dtd">

<students>

<student>

<name>

<firstname>James</firstname>

<lastname>Smith</lastname>

</name>

<address>

<street>101 South Street</street>

<city>Halifax</city>

<email>[email protected]</email>

<phone>4940001</phone>

</address>

<college>Dalhousie University</college>

<branch>Computer Science</branch>

</student>

<student>

<name>

<firstname>Tom</firstname>

<lastname>White</lastname>

</name>

<address>

<street>202 Victoria Road</street>

<city>Dartmouth</city>

<email>[email protected]</email>

<phone>4940002</phone>

</address>

<college>Dalhousie University</college>

<branch>Electrical Engineering</branch>

</student>

</students>
students.dtd
<?xml version="1.0"?>

<!-- students.dtd - A Document Type Definition for the students.xml -->

<!ELEMENT students (student+)>


<!ELEMENT student (name, address, college, branch)>

<!ELEMENT name (firstname, lastname)>

<!ELEMENT firstname (#PCDATA)>


<!ELEMENT lastname (#PCDATA)>
<!ELEMENT address (street, city, email, phone)>

<!ELEMENT street (#PCDATA)>


<!ELEMENT city (#PCDATA)>

<!ELEMENT email (#PCDATA)>


<!ELEMENT phone (#PCDATA)>

<!ELEMENT college (#PCDATA)>

<!ELEMENT branch (#PCDATA)>


EXPERIMENT 08: Implement the web applications using (a) PHP b) Servlets c)
JSP

(a) PHP Program to Display Current Date, Time, and Day

date.php
<?php
// Set the default timezone
date_default_timezone_set("Asia/Calcutta");
// Display the current date in day/month/year format
echo "Date: ";
echo date("d/m/y");

echo "<br>";

// Display the current time in hours:minutes:seconds AM/PM format


echo "Time: ";
echo date("H:i:s A", time());

echo "<br>";

// Get the current day of the week


$day = date("l");
echo "Day: ";
echo $day;
?>
(b) A web application that takes name and age from an HTML page. If the age is
less than 18, it should send a page with “Hello <name>, you are not authorized
to visit the site” message, where <name> should be replaced with the entered
name. Otherwise it should send “Welcome <name> to this site” message.
1. index.html (HTML Form)
<html>
<head>

<title>VoterApp</title>
</head>
<body>
<form action="http://localhost:8080/CheckAge/check" method="get">
<fieldset style="width:20%; background-color:#80ffcc">
<table>
<tr>
<td>Name</td>
<td><input type="text" name="name"></td>
</tr>
<tr>
<td>Age</td>
<td><input type="text" name="age"></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Check Eligibility"></td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>

2. VoterSrv.java (Servlet Code)


import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;

public class VoterSrv extends HttpServlet {

public void service(HttpServletRequest req, HttpServletResponse res) throws IOException, ServletException {


// Set response content type
res.setContentType("text/html");

// Get PrintWriter object


PrintWriter pw = res.getWriter();

// Read form data from the request


String name = req.getParameter("name");
int age = Integer.parseInt(req.getParameter("age"));

// Check if the age is 18 or above


if (age >= 18) {
pw.println("<font color='green' size='4'>Welcome " + name + " to this site</font>");
} else {
pw.println("<font color='red' size='4'>Hello " + name + ", you are not authorized to visit the
site</font>");
}

// Add hyperlink to go back to the index page


pw.println("<br><br><a href='index.html'>back</a>");

// Close the stream


pw.close();
}
}

3. web.xml (Web Configuration File)


<web-app>
<servlet>
<servlet-name>abc</servlet-name>
<servlet-class>VoterSrv</servlet-class>
</servlet>

<servlet-mapping>
<servlet-name>abc</servlet-name>
<url-pattern>/check</url-pattern>
</servlet-mapping>
</web-app>
Vivek

Welcome Vivek to this site.


(c) JSP Application to Print the Current Date and Time

test.jsp
<html>
<head>
<title>JSP Application</title>
</head>
<body>
<form>
<fieldset style="width:50%; background-color: #ccffeb;">
<legend><b><i>JSP Application</i></b></legend>
<h3>Current Date and Time is:</h3>
<%
// Get the current date and time
java.util.Date d = new java.util.Date();
// Print the current date and time
out.println(d.toString());

%>
</fieldset>
</form>
</body>
</html>
EXPERIMENT 09: Implement the web applications with Database using (a)
PHP, (b) Servlets and (c) JSP.

1. PHP Code: db.php


This PHP file sets up the database and inserts a user record for validation.

<html>
<body>
<?php
$servername = "localhost";
$username = "root";
$password = "TIGER";

// Create connection
$conn = new mysqli($servername, $username, $password);

// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
echo "Connected successfully <br>";

// Create database
$sql = "CREATE DATABASE reg";
if (mysqli_query($conn, $sql)) {
echo "Database created successfully<br>";
} else {
echo "Error creating database: " . mysqli_error($conn);
}

$servername = "localhost";
$dbname = "reg";
$conn = mysqli_connect($servername, $username, $password, $dbname);

// Check connection
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
echo "Connected to database successfully <br>";

// SQL to create table


$sql = "CREATE TABLE Guests (
name VARCHAR(30) NOT NULL,
pwd VARCHAR(30) NOT NULL
)";
if (mysqli_query($conn, $sql)) {
echo "Table MyGuests created successfully<br>";
} else {
echo "Error creating table: " . mysqli_error($conn);
}

// Insert data into table


$sql = "INSERT INTO Guests (name, pwd) VALUES ('cse', '5')";
if (mysqli_query($conn, $sql)) {
echo "New record created successfully<br>";
} else {
echo "Error: " . $sql . "<br>" . mysqli_error($conn);
}

// Close connection
mysqli_close($conn);
?>
</body>
</html>

2. HTML Login Form: Login.html


The HTML form where the user submits their login credentials (username and password).

<html>
<head>
<title>Login Page</title>
</head>
<body>
<center>
<h1>Login Page</h1>
<form action="loginform.php" method="post">
<table>
<tr>
<td><label>Name:</label></td>
<td><input type="text" name="uname" /></td>
</tr>
<tr>
<td><label>Password:</label></td>
<td><input type="password" name="upwd" /></td>
</tr>
<tr>
<td><input type="submit" value="Submit" /></td>
<td><input type="reset" value="Reset" /></td>
</tr>
</table>
</form>
</center>
</body>
</html>

3. PHP Login Validation: loginform.php


This PHP file checks the submitted username and password against the database.

<html>
<head>
<title>Registration page</title>
</head>
<body>
<?php
$name = $_POST["uname"];
$pwd = $_POST["upwd"];

// Connect to MySQL database


$conn = mysql_connect("localhost", "root", "TIGER") or die("mysql_error()");
mysql_select_db("reg") or die("mysql_error()");

// Query to check user credentials


$query = mysql_query("SELECT * FROM guests WHERE name='$name'");

while ($row = mysql_fetch_array($query)) {


$duser = $row['name'];
$dpwd = $row['pwd'];
}

if ($pwd == $dpwd && $name == $duser) {


echo "Welcome $name, branch";
} else {
echo "Invalid user";
}
?>
</body>
</html>

4. Java Servlet: DBExample.java


This Java Servlet connects to the MySQL database, retrieves records from the Emp table, and displays them.

import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
import java.sql.*;

public class DBExample extends HttpServlet {


public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException,
IOException {
String JDBC_DRIVER = "com.mysql.jdbc.Driver";
String DB_URL = "jdbc:mysql://localhost/csec";
String USER = "root";
String PASS = "TIGER";

// Set response content type


response.setContentType("text/html");
PrintWriter out = response.getWriter();
out.println("<html><body><h1>Welcome to MRCET</h1>\n");

try {
// Register JDBC driver
Class.forName("com.mysql.jdbc.Driver");

// Open a connection
Connection conn = DriverManager.getConnection(DB_URL, USER, PASS);

// Execute a query
Statement stmt = conn.createStatement();
String sql = "SELECT * FROM Emp";
ResultSet rs = stmt.executeQuery(sql);
// Extract data from result set
while (rs.next()) {
out.println("ID: " + rs.getString(1));
out.println("Age: " + rs.getString(2));
out.println("First Name: " + rs.getString(3) + "<br>");
}

// Clean-up environment
rs.close();
stmt.close();
conn.close();
} catch (SQLException se) {
// Handle errors for JDBC
out.println(se.getMessage());
} catch (Exception e) {
// Handle errors for Class.forName
out.println(e.getMessage());
}

out.println("</body></html>");
}
}

5. Web XML Configuration: web.xml


This configuration file maps the servlet to a URL pattern (/db).

<?xml version="1.0" encoding="UTF-8"?>


<web-app>
<servlet>
<servlet-name>DBExample</servlet-name>
<servlet-class>DBExample</servlet-class>
</servlet>

<servlet-mapping>
<servlet-name>DBExample</servlet-name>
<url-pattern>/db</url-pattern>
</servlet-mapping>
</web-app>

6. JSP Database Connection: JSPExample.jsp


This JSP page connects to the MySQL database and displays records from the emp table.

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>


<%@ page import="java.sql.*" %>
<html>
<head>
<title>JSP Database Connection</title>
</head>
<body>
<h2>Employee List</h2>
<%
try {
Class.forName("com.mysql.jdbc.Driver");
Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/sonoo", "root", "root");
Statement stmt = con.createStatement();
ResultSet rs = stmt.executeQuery("SELECT * FROM emp");

while (rs.next()) {
out.println(rs.getInt(1) + " " + rs.getString(2) + " " + rs.getString(3) + "<br>");
}

con.close();
} catch (Exception e) {
out.println(e);
}
%>
</body>
</html>

Vivek

Vivek

You might also like