Web Technologies Lab

1
AUDISANKARA COLLEGE OF
ENGINEERING AND TECHNOLOGY
Department of Computer Science and Engineering
III Year I Semester
2019 - 2020
WEB TECHNOLOGIES LAB

FACULTY MANUAL
Prepared by
Syed Akhtar Basha

Associate Professor M.C.A.,M.TECH.
III Year I Sem Web Technologies Lab GEC

2

3
INDEX
Page
S.No List of experiments
No
Design the following static web pages required for an online book store web site.
1 7-11
i. Home Page ii. Login Page iii. Catalogue Page
Design the following static web pages required for an online book store web site.
2 i. Registration Page ii. Cart Page 12-15
Design a web page using CSS which includes the following:

i.Use different font and text styles
3 ii. Set a background image for both the page and single element on the page. 16-23
iii. Define styles for links
iv. Working with layers
v. Adding a Customized cursor
i. Write a JavaScript to validate the fields of the login page.
4 24-34
ii. Write a JavaScript to validate the fields of the Registration page
Write an XML file which will display the Book information which includes the
5 following: Title of the book, Author Name, ISBN number, Publisher name, Edition and 35-38
Price. Validate the above document using DTD and XML Schema.
i. Write a PHP program to validate the fields of the login page.
6 39-44
ii. Write a PHP program to validate the fields of the Registration page
Write a JSP to connect to the database and extract data from the tables and display them
7 45-46
to the user.
Design a JSP to insert the details of the users who register through the registration page
8 and store the details in to the database. 47-49
Write a PHP program to connect to MySQL database which retrieves the data from the
9 tables and display them to the user. 50-56
Write a PHP program to insert the details entered by the user in the Registration form
10 57-58
into MySQL database.

4
EXP NO: 1
AIM: Design the following static web pages required for an online book store web site.
i. Home Page ii. Login Page iii. Catalogue Page
1) HOME PAGE:
The static home page must contain three frames.
Top frame : Logo and the college name and links to Home page, Login page, Registration page,
Catalogue page and Cart page (the description of these pages will be given below).
Left frame : At least four links for navigation, which will display the catalogue of respective links.
For e.g.: When you click the link “CSE” the catalogue for CSE Books should be displayed in the
Right frame.
Right frame: The pages to the links in the left frame must be loaded here. Initially this page
contains description of the web site.
Fig 1.1
2) LOGIN PAGE: This page looks like below:

5
3) CATOLOGUE PAGE:
The catalogue page should contain the details of all the books available in the web site in a table.
The details should contain the following:
1. Snap shot of Cover Page.

2. Author Name.
3. Publisher.
4. Price.
5. Add to cart button.

6
Source Code
home.html
<html>
<head>
<frameset rows="20%,80%">
<frame name="title" src="titlepage.html">
<frameset cols="25%,75%">
<frame name="list" src="list.html">
<frame name="display" src="display.html">
</frameset>
</frameset>
</head>
</html>
titlepage.html
<html>
<head>
<title>title page</title>
</head>
<body bgcolor="yellow" text="red">
<h1 align="center"> ONLINE BOOK STORE </h1>
</body>
</html>
list.html
<html>
<head>
<title> List</title>
</head>
<body bgcolor="pink">
<center>
<a href="login.html" target="display"><b> LOGIN </b></a><br>
<a href="catalogue.html" target="display"><b> CATALOGUE </b></a>
</center>
</body>
</html>
Left.html
<html>
<head>
<title>Top Page</title>
</head>
<body>
<a href="cse.html" target="body">CSE</a><br />
<a href="ece.html" target="body">ECE</a><br />
<a href="eee.html" target="body">EEE</a><br />
<a href="civil.html" target="body">CIVIL</a><br />

7
</body>
</html>
Login.html
<html>
<body bgcolor="cyan">
<h2 align="center">LOGIN PAGE</h2>
<center>
<form>
<table border="1">
<tr>
<td><label>USER NAME</label></td>
<td><input type="text" name="uname"></td>
</tr>
<tr>
<td><label>PASSWORD</label></td>
<td><input type="password" name="pwd"></td>
</tr>
<tr>
<td><input type="submit" value="LOGIN"></td>
</tr>
</table>
</form>
</center>
</body>
</html>
Catalogue.html
<html>
<body bgcolor="orange" >
<h1 align="center">CATALOGUE PAGE</h1>
<center>
<table border="1">
<tr>
<th> COVER IMAGE</th>
<th> AUTHOR NAME</th>
<th> TEXT BOOK-NAME</th>
<th> PRICE</th>
<th> ADD TO CART</th>
</tr>
<tr>
<td><imgsrc="c#.jpg" height="105" width="150"></td>
<td>Harsh Bhasin</td>
<td> Programming in C#</td>
<td>200/</td>
<td><input type="button" value="ADD TO CART"</td>
<tr>
<td><imgsrc="cn.jpg" height="105" width="150"></td>

8
<td>Andrew S Tanenbaum</td>
<td>Computer Networks</td>
<td>400/</td>
<tr>
<td><imgsrc="wt.jpg" height="105" width="150"></td>
<td>Chris Bates</td>
<td>Web Programming, Building Internet Applications</td>
<td>599/</td>
<tr>
<td><imgsrc="wt1.jpg" height="105" width="150"></td>
<td>Kogent</td>
<td>Web Technologies, Black book</td>
<td>499/</td>
</table>
</center>
</bdoy>
</html>
display.html
<html>
<head>
<title>display</title>
</head>
<body bgcolor="blue" text="white">
<h2 align="center">DISPLAY</h2>
</body>
</html>
Execution Procedure
Step1: type all html programs in notepad or any text editor and save .html format.
Step2: open web browser and open index.html
Step3: traverse all pages from index.html.

9
EXP NO: 2
Aim: Design the following static web pages required for an online book store web site.
i. Registration Page ii. Cart Page
CART PAGE:
The cart page contains the details about the books which are added to the cart.
The cart page should look like this:
5) REGISTRATION PAGE:
Create a “registration form “with the following fields

10
Description
Through table and form tag we can design pages.
The form tag you can add to your web pages a guestbook, order forms, surveys, get feedback or
whatever. The basic construction of a html form is this...
<FORM> begin a form
<INPUT> ask for information in one of several different ways...
<INPUT> ...there can be as many input areas as you wish
</FORM> end a form
<TABLE>
The main tag. Used to tell the browser "this is a table", along with some attributes like size,
border width and a few other things.
<TR>
TableRow defines a horizontal row of <TD> (TableData) cells.
<TD>
Specifies an indiviual block or cell in a table row
Source Code
Registraion.html
<html>
<body bgcolor="seagreen">
<h1 align="center"><font color="red">CART PAGE</font></h1>
<center>
<table border="1">
<tr>
<th>Book Name</th>
<th>Price</th>
<th>Qty</th>
<th>Amount</th>
</tr>

11
<tr>
<td>500/-</td>
<td>2</td>
<td>1000</td>
</tr>
<tr>
<td>400/-</td>
<td>3</td>
<td>1200</td>
</tr>
<tr>
<td>Web Technologies</td>
<td>300/-</td>
<td>4</td>
<td>1200</td>
</tr>
<tr>
<td colspan="3">Total Amount</td>
<td>3400</td>
</tr>
</table>
</body>
</html>
Cart.html
<html>
<body bgcolor="orange" >
<h1 align="center">CATALOGUE PAGE</h1>
<center>
<table border="1">
<tr>
<th> COVER IMAGE</th>
<th> AUTHOR NAME</th>
<th> TEXT BOOK-NAME</th>
<th> PRICE</th>
<th> ADD TO CART</th>
</tr>
<tr>
<td><imgsrc="c#.jpg" height="105" width="150"></td>
<td>Harsh Bhasin</td>
<td> Programming in C#</td>
<td>200/</td>
<tr>
<td><imgsrc="cn.jpg" height="105" width="150"></td>
<td>Andrew S Tanenbaum</td>
<td>Computer Networks</td>

12
<td>400/</td>
<tr>
<td><imgsrc="wt.jpg" height="105" width="150"></td>
<td>Chris Bates</td>
<td>599/</td>
<tr>
<td><imgsrc="wt1.jpg" height="105" width="150"></td>
<td>Kogent</td>
<td>499/</td>
</table>
</center>
</bdoy>
</html>
Execution Procedure
Step2: open web browser and open index.html, i.e previous week.
Step3: traverse all pages from index.html.

13
EXP NO: 3
Design a web page using CSS which includes the following:

i. Use different font and text styles
ii. Set a background image for both the page and single element on the page.
iii. Define styles for links
iv. Working with layers
v. Adding a Customized cursor
1) Use different font, styles:

In the style definition you define how each selector should work (font, color etc.). Then, in the body
of your pages, you refer to these selectors to activate the styles.
For example:
<HTML>
<HEAD>
<style type="text/css">
B.headline {color:red, font-size:22px, font-family:arial, text-decoration:underline}
</style>
</HEAD>
<BODY>
<b>This is normal bold</b><br>
Selector {cursor:value}
For example:
<html>
<head>
.xlink {cursor:crosshair}
.hlink{cursor:help}
</style>
</head>
<body>
<b>
<a href="mypage.htm" class="xlink">CROSS LINK</a>
<br>
<a href="mypage.htm" class="hlink">HELP LINK</a>
</b>
</body>
</html>
<b class="headline">This is headline style bold</b>

</BODY>
</HTML>

14
2) Set a background image for both the page and single elements on the page. You can define the
background image for the page like this:
BODY {background-image:url(myimage.gif),}
3) Control the repetition of the image with the background-repeat property. As background-repeat:
repeat
Tiles the image until the entire page is filled, just like an ordinary background image in plain
HTML.
4) Define styles for links as

A:link
A:visited
A:active
A:hover
Example:
A:link {text-decoration: none}
A:visited {text-decoration: none}
A:active {text-decoration: none}
A:hover {text-decoration: underline, color: red,}
</style>
5) Work with layers:
For example:
LAYER 1 ON TOP:
<div style="position:relative, font-size:50px, z-index:2,">LAYER 1</div><div
style="position:relative, top:-50, left:5, color:red, font-size:80px, z-
index:1">LAYER 2</div>
LAYER 2 ON TOP:
<div style="position:relative, font-size:50px, z-index:3,">LAYER 1</div><div
style="position:relative, top:-50, left:5, color:red, font-size:80px, z-
index:4">LAYER 2</div>
6) Add a customized cursor:

Selector {cursor:value}
For example:
<html>
<head>
.xlink {cursor:crosshair}
.hlink{cursor:help}
</style>
</head>
<body>
<b>
<a href="mypage.htm" class="xlink">CROSS LINK</a>
<br>

15
<a href="mypage.htm" class="hlink">HELP LINK</a>

</b>
</body>
</html>
Description
• CSS stands for Cascading Style Sheets

• Styles define how to display HTML elements
• Styles are normally stored in Style Sheets
• Styles were added to HTML 4.0 to solve a problem
• External Style Sheets can save you a lot of work
• External Style Sheets are stored in CSS files
• Multiple style definitions will cascade into one
HTML tags were originally designed to define the content of a document.
As the two major browsers - Netscape and Internet Explorer - continued to add new HTML tags
and attributes (like the <font> tag and the color attribute) to the original HTML specification, it
became more and more difficult to create Web sites where the content of HTML documents was
clearly separated from the document's presentation layout.
To solve this problem, the World Wide Web Consortium (W3C) - the non profit, standard setting
consortium, responsible for standardizing HTML - created STYLES in addition to HTML 4.0.
Source Code

Fontstyle.html
<html>
<head>
<link rel="stylesheet" href="font.css">
</head>
<body>
<p class="center">My text with font-arial</p>
<p class="right">My text with font-calibre</p>
<p class="left">My text with font-cooper</p>
</body>
</html>
font.css
p.center
{
color:pink;
text-align:center;
letter-spacing:3;
font-family:arial;
font-variant:small;
font-weight:bold;

16
}
p.right
{
color:orange;
text-align:right;
letter-spacing:10;
font-family:calibre;
font-variant:uppercase;
font-weight:bold;
}
p.left
{
color:green;
text-align:left;
letter-spacing:15;
font-family:cooper;
font-variant:uppercase;
font-weight:bold;
}
2) Set a background image

background.html
<html>
<head>
body
{
background-image:url(wt.jpg);
background-repeat:repeat;
}
</style>
</head>
<body>
<h1 align="center">WebTechnology</h1>
</body>
</html>
3. Control the repetition of the image with the background-repeat property.

background-image.html
<html>
<head>
body
{
background-image:url(wt.jpg);
background-color:pink;
background-repeat:no-repeat;
background-position:center;

17
background-attachment:fixed;
}
h1
{
background-image:url(wt1.jpg);
background-position:right;
color:red;
background-repeat:no-repeat;
}
</style>
</head>
<body>
<h1 align="center">WEB TECHNOLOGY<br></h1>
</body>
</html>
4) Define styles for links

Link.html
<html>
<head>
a:link
{
color:red;
text-decoration:overline;
font-family:arial;
font-size:spot;
}
a:visited
{
color:yellow;
text-decoration:line-through;
font-family:arial;
font-size:spot;
}
a:hover
{
color:blue;
font-family:arial;
font-size:spot;
}
a:active
{
color:green;
font-family:arial;
font-size:spot;
}

18
</style>
</head>
<center>
<body bgcolor="pink">
<a href="wt.jpg" tagrget="_blank";>Link</a><br><br>
<a href="wt1.jpg" tagrget="_blank";>Link1</a><br><br>
</body>
</center>
</html>
5) Work with layers

layers.html
<html>
<body bgcolor="white" align="left">
<h1 style="background-color:blue; position:relative; top:0; left:0; z-index:2; height:100;"> This is
heading-1.</h1>
<h2 style="background-color:green; position:relative; top:30; left:50; z-index:3; height:100;"> This
is heading-2.</h2>
<h3 style="background-color:red; position:relative; top:55 left:100; z-index:1; height:100;"> This is
heading-3.</h3>
</body>
</html>
6) Add a customized cursor

cursor.html
<html>
<body>
<p style="cursor:not-allowed;">NOT-ALLOWED CURSOR</p>
<p style="cursor:progress;">PROGRESS CURSOR</p>
<p style="cursor:wait;">WAIT CURSOR</p>
<p style="cursor:zoom-in;">ZOOM-IN CURSOR</p>
<p style="cursor:zoom-out;">ZOOM-OUT CURSOR</p>
<p style="cursor:no-drop;">NO-DROP CURSOR</p>
<p style="cursor:move;">MOVE CURSOR</p>
<p style="cursor:default;">DEFAULT CURSOR</p>
<p style="cursor:scroll;">SCROLL CURSOR</p>
<p style="cursor:crosshair;">CROSSHAIR CURSOR</p>
<p style="cursor:help;">HELP CURSOR</p>
<body>
</html>
Execution procedure
Step2: open web browser and open .html files.

19
Output
2) Set a background image
3. Control the repetition of the image with the background-repeat property.
Control the repetition of the image with the background-repeat property

20
4) Define styles for links
Define styles for links
5) Work with layers
6) Add a customized cursor
Add a customized cursor

21
EXP NO: 4
AIM:
i. Write a JavaScript to validate the fields of the login page.
ii. Write a JavaScript to validate the fields of the Registration page
Description
JavaScript is a lightweight interpreted programming language with rudimentary object-oriented
capabilities. Syntactically, the core JavaScript language resembles C, C++ and Java, with
programming constructs such as the if statement, the while loop, and the && operator. The
similarity ends with this syntactic resemblance, however. JavaScript is an untyped language, which
means that variables do not have to have a type specified.
The <SCRIPT> and </SCRIPT> tags are used to embed JavaScript code within an HTML file.
Source Code
login.html
<html>
<head>
<title> LOGIN FORM VALIDATION</title>
<script>
function validate()
{
var username=document.getElementById("username").value;
var password=document.getElementById("password").value;
if(username==null||username==""){
alert("Please enter the username");
return false;
}
if(password==null||password==""){
alert("Please enter the Password");
return false;
}
alert("Login Successful");
}
</script>
</head>
<bodybgcolor="pink">
<font color="red"><h1 align="center">LOGIN FORM VALIDATION</h1></font>
<form name="f1" method="post">
<label>User Name</label>
<input type="text" name="username" id="username"><br>
<label>Password</label>
<input type="password" name="password" id="password"><br>
<input type="button" value="Login" onclick="validate()">&nbsp&nbsp
<input type="reset" name="r1" value="RESET">
</form>
</body>
</html>

22
registration.html
<html>
<head>
<script type="text/javascript">
function checkfield(){
if(document.regfrm.fname.value.length==0){
alert("fill firstname field")
document.regfrm.fname.focus();
return;
}
if(document.regfrm.lname.value.length==0){
alert("fill lastname field")
document.regfrm.lname.focus();
return;
}
if(document.regfrm.eid.value.length==0){
alert("fill email-id")
document.regfrm.eid.focus();
return;
}
if(document.regfrm.zip.value.length==0){
alert("fill zip field")
document.regfrm.zip.focus();
return;
}
if(document.regfrm.phonenumber.value.length==0){
alert("fill phone number field")
document.regfrm.phonenumber.focus();
return;
}
else{
alert("Succesfull");
}
}
</script>
</head>
<body>
<center>
<form name="regfrm" method="post">
<p align="center">
<b>
<i><font face="monotype corsiva" color="black" size="7">
<u>Personal Registration Form</u>

23
</font>
</i>
</b>
</p>
<p align="center">
<font face="arial" color="bluishgreen" >
<b>You must complete fields marked with </b></font>
<font color="bluishgreen" face="times newroman">
*(star)</font></p>
<table border="8" cellpadding="0" cellspacing="0" width="73%" height="10">
<tr><td width="43%" height="22" >Firstname</font></td>
<td width="57%" height="22">
<input type="text" name="fname" size="20">
<font color="red"> * </font></td>
</tr>
<tr>
<td width="43%" height="22" >
<font face="timesnew roman" size="4">
Lastname
</font>
</td>
<input type="text" name="lname" size="20">
<font color="red"> * </font>
</td>
</tr>
<tr><td width="43%" height="22" >

<font face="timesnewroman" size="4">
Jobtitle
</font>
</td>

24

<font face="timesnewroman" size="20" >
<select size="1" name="jobsinfo">

<option value>choose..</option>
<option value="Engineer">Engineer</option>
<option value="Lecturer">Lecturer</option>
</select></font>
</td>
</tr>
<tr>
Industry
</font>
</td>
<font face="timesnewroman"size="20" >
<select size="1" name="industry">
<option value>Choose..</option>
<option value="Acadamic">Acdamic</option>
<option value="Corporate">Corporate</option>
<option value="Finantial">Finantial</option>
<option value="Government">Government</option>
<option value="Millatory">Millatory</option>
<option value="Research">Research</option>
<option value="Technology">Technology</option>
<option value="Transportation">Transportation</option>
</select></font>
</td>

25
</tr>
<tr>

Email-id
</font>
</td>
<input type="text" name="eid" size="20">

<font color="red"> * </font>
</td>
</tr>
<tr>

Country
</font>
</td>
<select size="1" name="country">

<option value>Choose..</option>
<option value="IND">INDIA</option>
<option value="US">AMERICA</option>
<option value="JPN">JAPAN</option>
<option value="AUS">AUSTRALIA</option>
<option value="FRN">FRANCE</option>
</select></font>
</td>

26
</tr>
<tr>

Organization
</font>
</td>
<input type="text" name="org" size="20">

</td>
</tr>
<tr>
<td ><font face="timesnewroman" size="4">
Address
</font>
</td>
<td>
<textarea rows="2" cols="16"></textarea>
</td>
</tr>
<tr>
Town/city
</font>
</td>
<input type="text" name="city" size="20">
</td>

27
</tr>
<tr>

State
</font>
</td>
<input type="text" name="state" size="20">

</td>
</tr>
<tr>
zip/Postalcode
</font>
</td>
<input type="text" name="zip" size="20">
<font color="red">
*
</font>
</td>
</tr>
<tr>
Phonenumber
</font>

28
</td>
<input type="text" name="phonenumber" size="20">

<font color="red">
*
</font>
</td>
</tr>
</table>
<p align="center"><font face="timesnewroman" color="bluishgreen">
<input type="radio" name="submit">
I agree terms and Conditions<br>
<input type="button" value="submit" name="b1" onclick="checkfield()">
<input type="reset" value="cancel" name="b2">
</p>
</form>
</center>
</body>
</html>
Execution Procedure
Step1: type the html program in notepad or any text editor and save .html format.
Step2: open web browser and open .html.

29
Output
Login Page
Registration Page

30
Registration Page – Email Validation
Registration Page – Phone Number Validation

31
Registration Page – Postal Code Validation

32
EXP NO: 5
AIM:Write an XML file which will display the Book information which includes the following:
Title of the book, Author Name, ISBN number, Publisher name, Edition and Price. Validate the
above document using DTD and XML Schema.
Description
Extensible Markup Language (XML) is a meta-markup language that provides a format for
describing structured data. This facilitates more precise declarations of content and more
meaningful search results across multiple platforms. In addition, XML is enabling a new generation
of Web-based data viewing and manipulation applications.
In the HTML you use tags to tell the browser to display data as bold or italic; in XML you use tags
only to describe data, such as city name, temperature, and barometric pressure. In XML, you use
style sheets such as Extensible Stylesheet Language (XSL) and Cascading Style Sheets (CSS) to
present the data in a browser. XML separates the data from the presentation and the process,
enabling you to display and process the data as you wish by applying different style sheets and
applications.
Source Code
a) Demonstrating DTD file
bookstore.dtd
<!ELEMENT bookstore (book+)>
<!ELEMENT book (title,author+,ISBN,publisher,edition,prices)>
<!ELEMENT title (#PCDATA)>
<!ELEMENT author (#PCDATA)>
<!ELEMENT ISBN (#PCDATA)>
<!ELEMENT publisher (#PCDATA)>
<!ELEMENT edition (#PCDATA)>
<!ELEMENT prices (#PCDATA)>
books.xml
<?xml version="1.0"?>
<!DOCTYPE bookstore SYSTEM "bookstore.dtd">
<bookstore>
<book>
<title>Web Programming, Building Internet Applications</title>
<author>Chris Bates </author>
<ISBN>123-456-789</ISBN>
<publisher>Wiley</publisher>
<edition>2nd</edition>
<prices>329</prices>
</book>
<book>
<title>Web Technologies, Black book</title>
<author>Kogent</author>

33
<ISBN>123-456-789</ISBN>
<publisher>Dreamtech</publisher>
</book>
<book>
<title>WEB TECHNOLOGIES</title>
<author>Uttam.K.Roy</author>
<ISBN>123-456-789</ISBN>
<publisher>Oxford</publisher>
</book>
</bookstore>
b) Demonstrating XSD
book-schema.xsd
<?xml version="1.0" ?>

<xs:schemaxmlns:xs="http://www.w3.org/2001/XMLSchema">
<xs:element name="bookstore">
<xs:complexType>
<xs:sequence>
<xs:element name="book">
<xs:complexType>
<xs:sequence>
<xs:element name="title" type="xs:string"/>
<xs:element name="author" type="xs:string"/>
<xs:element name="ISBN" type="xs:int"/>
<xs:element name="publisher" type="xs:string"/>
<xs:element name="edition" type="xs:int"/>
<xs:element name="prices" type="xs:int"/>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:schema>

34
Book-schema.xsl
<?xml version="1.0"?>
<bookstore xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="book-schema.xsd">
<book>
<title>Web Programming, Building Internet Applications</title>
<author>Chris Bates </author>
<ISBN>123456789</ISBN>
<publisher>Wiley</publisher>
<edition>2</edition>
</book>
<book>
<title>Web Technologies, Black book</title>
<author>Kogent</author>
<ISBN>123-456-789</ISBN>
<publisher>Dreamtech</publisher>
</book>
<book>
<title>WEB TECHNOLOGIES</title>
<author>Uttam.K.Roy</author>
<ISBN>123-456-789</ISBN>
<publisher>Oxford</publisher>
</book>
</bookstore>
Execution Procedure
Step1: Type all html programs in notepad or any text editor and save the files.
Step2: open appropriate xml files in web browser for getting output.

35
Output
Demonstrating DTD
Demonstrating XSD

36
EXP NO: 6
AIM:
i. Write a PHP program to validate the fields of the login page.
ii. Write a PHP program to validate the fields of the Registration page
DESCRIPTION:
This PHP login application uses MySQL database to store user information and all the input
parameters are validated with javascript.This PHP login page using MySQL database connections
contains PHP 7.0 methods only. Many methods like mysql_real_escape_string(), mysql_query(),
mysql_num_rows(), mysql_connect(), mysql_select_db(), mysql_close() were depricated in PHP 5
and removed from the latest version of PHP i.e. PHP 7.0.
ALGORITHM:
LoginForm.php
Step 1:-Open the html tag and the title as LoginForm.php.
Step 2:-Declare the validate() function.
Step 3:-Design login form with username, password, submit and reset values.
Step 4:-if anyone not enter user name or password it shows alert message.
Step 5:-close the html tag.
Login.php
Step 1:-Open the html and body tag.
Step 2:-Open the MYSQL database connection.
Step 3:-if the $_SERVER['REQUEST_METHOD'] == 'POST' then
Step 4:-enter user name and password
Step 5:-check the user name and password is valid or not
Step 6:-if valid then display the login page
Step 7:-otherwise it shows incorrect username and password.
Step 8:-close body and html tags.
PROGRAM:
login.html
<html>
<body bgcolor=azure>
<form name="LoginForm" action="http://localhost:2424/19batch/login-
validate.php" method="post">
<fieldset>
<legend align=center><h2>Login Here</h2></legend>
<table cellpadding=5 align=center>
<tr>
<td>User Name</td>
<td> : </td>
<td><input type="text" name="t1" class="textbox"
placeholder="Only Characters" /></td>
</tr>
<tr>
<td> Password </td>
<td> : </td>

37
<td><input type="Password" name="t2" class="textbox"

placeholder="Max 15 characters"/></td>
</tr>
<tr>
<td ><input type="submit" class="button button1"
value="LOGIN" /></td>
<td></td>
<td ><input type="reset" class="button button1"
value="RESET" /></td>
</tr>
</table>
</form>
</body>
</html>
Login-validation.php
<?php
$user=$_POST['t1'];
$pwd=$_POST['t2'];
$uname_pat='/^[a-zA-Z0-9]{5,13}$/';
$pwd_pat='/^[a-zA-Z0-9@$& ]{5,13}$/';
$flag=true;
if($user=="") {
$flag=false;
echo "PLEASE Enter the user name ";
}
else if($pwd=="") {
$flag=false;
echo "PLEASE Enter the password ";
}
else if(preg_match($uname_pat,$user)==false) {
$flag=false;
echo "Please Enter UserName Format";
}
else if(preg_match($pwd_pat,$pwd)==false) {
$flag=false;
echo "Please Enter Password Format";
}
else if($flag==true) {
echo "All Details are valid";
}
?>
registeration.php
<html>
<body bgcolor=azure>

38
<form name="RegistrationPage"
action="http://localhost:2424/19batch/registeration-validation.php" method="post">
<fieldset>
<legend align=center><h2>REGISTER HERE</h2></legend>
<table cellpadding=5 align=center >
<tr>
<td>First Name</td>
<td> : </td>
<td><input type="text" name="t1" class ="textbox"
placeholder="Only Characters" /></td>
</tr>
<tr>
<td>LastName</td>
<td> : </td>
<td><input type="Password" name="t2" class ="textbox"
</tr>
<tr>
<td> Password</td>
<td> : </td>
<td><input type="Password" name="t3" class ="textbox"
</tr>
<tr>
<td>Contact Number</td>
<td> : </td>
placeholder="Without country code" max=10/></td>
</tr>
<tr>
<td>Email Address</td>
<td> : </td>
placeholder="Mail ID" max=35/></td>
</tr>
<tr>
<td>Address</td>
<td> : </td>
<td>
<textarea name="t6" class ="textbox" rows=5 cols=50
>
</textarea>
</td>
</tr>
<tr>
<td>Gender</td>
<td> : </td>
<td><input type="radio" name="gender" value="male"
checked> Male<br>

39
<input type="radio" name="gender" value="female">

Female<br>
<input type="radio" name="gender" value="other">
Other
</td>
</tr>
<tr>
<td ><input type="submit" class="button button1"
value="REGISTER" /></td>
<td></td>
<td ><input type="reset" class="button button1"
value="RESET" /></td>
</tr>
</table>
</form>
</body>
</html>
registeration-validation. php
<?php
$fn=$_POST['t1'];
$ln=$_POST['t2'];
$pwd=$_POST['t3'];
$mob=$_POST['t4'];
$mail=$_POST['t5'];
$fn_pat='/^[a-zA-Z][a-zA-Z0-9]{5,13}$/';
$ln_pat='/^[a-zA-Z][a-zA-Z0-9]{5,13}$/';
$pwd_pat='/^[a-zA-Z0-9@$& ]{5,13}$/';
$mob_pat='/^\d{10}$/';
$mail_pat='/^[A-Za-z0-9]+@[A-Za-z]+.[A-Za-z]{2,4}$/';
$flag=true;
if($fn=="") {
$flag=false;
echo "Enter the First name PLEASE";
}
else if($ln=="") {
$flag=false;
echo "Enter the LastPLEASE";
}
else if($pwd=="") {
$flag=false;
echo "Enter the password PLEASE";
}
else if($mob=="") {
$flag=false;
echo "Enter the Mobile NumberPLEASE";
}
else if($mail=="") {

40
$flag=false;
echo "Enter the E-Mail PLEASE";
}
else if(preg_match($fn_pat,$fn)==false) {
$flag=false;
echo "Please Enter First Name in Given Format";
}
else if(preg_match($ln_pat,$ln)==false) {
$flag=false;
echo "Please Enter Last Name in Given Format";
}
else if(preg_match($pwd_pat,$pwd)==false) {
$flag=false;
echo "Please Enter Password in Given Format";
}
else if(preg_match($mob_pat,$mob)==false) {
$flag=false;
echo "Please Enter Mobile in Given Format";
}
else if(preg_match($mail_pat,$mail)==false) {
$flag=false;
echo "Please Enter Mail in Given Format";
}
else if($flag==true) {
echo "All details are valid";
}
?>
Output:

41

42
EXP NO: 7
AIM:Write a JSP to connect to the database and extract data from the tables and display them to the
user.
DESCRIPTION
Source Code:
Retrieve.Html
<html>
<head><title>loginpage</title></head>
<body>
<center><br><br><br><h1><font size="22" color="pink"><i>Login Page</font></h1></i>
<form action="retrieve.jsp" name="log" id="li" onSubmit="return validate( )" action="#"
method="post">
<table><tr><td>Login Id:<td><input type="text" name="login" size="10"><span
id="s1"></span></td></tr>
<tr><td>Password:</td><td><input type="password" name="pwd" size="10"><span
id="s2"></span></td></tr>
<tr><td><input type="submit" value="Login"></td><td><input type="reset"
value="reset"></td></tr></table>
</form>
</body>
</html>
retrieve.jsp
<%@page import="java.sql.*"%>
<html>
<body>
<%
String uname=request.getParameter("login");
String pwd=request.getParameter("pwd");
try{
Class.forName("com.mysql.jdbc.Driver");
Connection con=DriverManager.getConnection("jdbc:mysql://localhost:3306/srimanth","root","");
Statement st=con.createStatement();
PreparedStatement p=con.prepareStatement("select * from student");
p.setString(1,uname);
p.setString(2,pwd);
if(uname==E_mail&&pwd==Password) {
response.sendRedirect("welcome.jsp");
}
OUTPUT:

43
EXP NO: 8

44
AIM:Design a JSP to insert the details of the users who register through the registration page and
store the details in to the database.
PROGRAM:
Registration.html
<html>
<head><title>register</title></head>
<body>
<center><br><br><br><h1><font size="22" color="pink"><i>Registration</font></h1></i>
<form action="registration.jsp" method="post" name="reg" id="rn" onSubmit="return validate( )">
<table><tr><td>Name:<td><input type="text" name="na" size="10"></td></tr>
<tr><td>Gender:</td><td><input type="Radio" name="gender" >Male<input type="Radio"
name="gender" >Female</td></tr>
<tr><td>Date of birth:</td><td><input type="date" name="dob" size="10"></td></tr>
<tr><td>Rollno:</td><td><input type="text" name="roll" size="10"></td></tr>
<tr><td>Phone no:</td><td><input type="text" name="pno" size="10"></td></tr>
<tr><td>Email id:</td><td><input type="text" name="mail" size="30"></td></tr>
<tr><td>Password:</td><td><input type="password" name="pwd" size="10"></td></tr>
<tr><td>Re-enter Password:</td><td><input type="password" name="rpwd" size="10"></td></tr>
<tr><td>Branch:</td><td><select name="br"><option value="default">Select
branch</option><option value="IT">Information Technology</option><option
value="CSE">Computer Science Engineering</option><option value="ECE">Electronics and
Communication Engineering</option><option value="EEE">Electrical and Electronics
Engineering</option><option value="CIVIL">Civil Engineering</option><option
value="MECH">Mechanical Engineering</option></td></tr>
<tr><td>College:</td><td><input type="text" name="col" size="10"></td></tr>
<tr><td>Address:</td><td><textarea name="add" rows="4" cols="30"></textarea></td></tr>
<tr><td><input type="submit" value="Register"></td><td><input type="reset"
value="reset"></td></tr></table>
</form>
</body>
</html>
registration.jsp
<%@page import="java.sql.*"%>
<html>
<body>
<%
String Name=request.getParameter("na");
String Gender=request.getParameter("gender");
String Dob=request.getParameter("dob");
String Rollno=request.getParameter("roll");
String Phoneno=request.getParameter("pno");
String E_mail=request.getParameter("mail");
String Password=request.getParameter("pwd");
String Branch=request.getParameter("br");
String College=request.getParameter("col");

45
String Address=request.getParameter("add");
try{
Class.forName("com.mysql.jdbc.Driver");
Connection con=DriverManager.getConnection("jdbc:mysql://localhost:3306/srimanth","root","");
Statement st=con.createStatement();
PreparedStatementps=con.prepareStatement("insert into
student(Name,Gender,Dob,Rollno,Phoneno,E_mail,Password,Branch,College,Address)values(?,?,?,
?,?,?,?,?,?,?)");
ps.setString(1,Name);
ps.setString(2,Gender);
ps.setString(3,Dob);
ps.setString(4,Rollno);
ps.setString(5,Phoneno);
ps.setString(6,E_mail);
ps.setString(7,Password);
ps.setString(8,Branch);
ps.setString(9,College);
ps.setString(10,Address);
int x=ps.executeUpdate();
%><a href="welcome.jsp">Register</a><%
}
catch(Exception e) {
out.print(e.getMessage());
}
%>
</body>
</html>
welcome.jsp
<html>
<body bgcolor="green"><center>
<font size="22" color="red">
<%
out.print("1 record added");
out.print("<br> You want to register another user");
%>
Click <a href=”Registration.html”>here</a>
</font>
</center>
</body>
</html>
OUTPUT:

46
EXP NO: 9

47
AIM:
Write a PHP program to connect to MySQL database which retrieves the data from the tables and
display them to the user.
Description
Create a Connection to a MySQL Database
Before you can access data in a database, you must create a connection to the database.
In PHP, this is done with the mysqli_connect() function.
Syntax
mysql_connect(servername,username,password,dbname);
Parameter Description
Servername Optional. Specifies the server to connect to. Default value is "localhost:3306"
Username Optional. Specifies the username to log in with. Default value is the name of
the user that owns the server process
Password Optional. Specifies the password to log in with. Default is ""
Dbname Database Name
Example
In the following example we store the connection in a variable ($con) for later use in the script. The
"die" part will be executed if the connection fails:
<?php
$con = mysqli_connect(“localhost”,”root”,””,’srikanth’);
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
// some code
?>
Closing a Connection
The connection will be closed automatically when the script ends. To close the connection before,
use the mysql_close() function:
<?php
$con = mysqli_connect("localhost","root","",”srikanth”);
if (!$con)
{
}
// some code
mysql_close($con);
?>

48
Source code
Step by step procedure for creating table in php my admin
MySQL is automatically installed along with WAMP server installation.

User environment for MySQL in WAMP is “phpMyAdmin”.
Step1: Start WAMP server
Step2: Click WAMP server icon on taskbar and select “phpMyAdmin” option.
It automatically opens “phpMyAdmin” screen.

49
Step3: create New Database.

Provide database name on “create new database” field and click “create” button. The
following screen displays in your computer
Step 4: Click database “ivcse” i.e appeared left panel of phpMyAdmin Screen. It displays following
screen

50
Step5: Creating a table.

The Aim indicates that you can create which should contain at least the following fields:
name, password, email-id, phone number. So here 4 fields are there.
Provide table name “login” and “number of fields:” 4
Click “Go” button. It displays following screen
Step 6: Provide fields name and its datatype, size like the following screen

51
Step 7: click “Save”. It create login table and displays “Table ‘ivcse’,’login’ has been created.”
Step 8: click on table name on left panel of phpMyAdmin, you can see structure of table i.e field
name datatype and other parameters

52
Display.php
<?php
$con = mysqli_connect("localhost","root","","srikanth");
if (!$con)
{
die('Could not connect: ' . mysqli_error());
}
mysql_select_db("ivcse", $con);
$result = mysqli_query($con, "SELECT * FROM login");
echo "<table border='1'>

<tr>
<th>Name</th>
<th>Password</th>
<th>Email</th>
<th>Phone Number</th>
</tr>";
while($row = mysql_fetch_array($result))
{
echo "<tr>";
echo "<td>" . $row['name'] . "</td>";
echo "<td> Not shown</td>";
echo "<td>" . $row['email'] . "</td>";
echo "<td>" . $row['phno'] . "</td>";
echo "</tr>";
}
echo "</table>";

53
mysqli_close($con);
?>
Execution procedure
Step1: Type all programs and save with .php extension in c:\WAMP\WWW directory.
Step2: Run WAMP Server.
Step3: Through localhost execute your programs.
url’s are: http://localhost/display.php&&http://localhost/insert.php
Output
Displaying data from Database
Registering New User
After providing all fields of data and Click on Submit button
After successfully added 1 user

54
EXP NO: 10
AIM:
Write a PHP program to insert the details entered by the user in the Registration form into MySQL
database.
DESCRIPTION:
PROGRAM-1:
Register.php
<html>
<title>Registration Page</title>
</head>
<body>
<h1> Registration Page</h1>
<br />
<form action="insert.php" method="post">
Name <input type="text" name="fname" id="fname" value="name" /><br />
Password <input type="password" name="pwd" id="pwd" value="password" /><br />
Email <input type="text" name="email" id="email" value="email@example.com"/><br />
Phone Number <input type="text" name="ph" id="ph" value="9999999999" maxlength="10"/><br
/>
<input type="submit" value="Submit" />
</form>
</body>
</html>
Insert .php
<?php
$con = mysqli_connect("localhost","root","root","srikanth");
if (!$con)
{
}
mysql_select_db("ivcse", $con);
$sql="INSERT INTO login (name, password, email, phno)

VALUES
('$_POST[fname]','$_POST[pwd]','$_POST[email]','$_POST[ph]')";
if (!mysqli_query($con,$sql))
{
die('Error: ' . mysqli_error());
}
echo "1 record added";
echo "<br><br>";
echo "You want to register another user, Click <a href='register.html'>here</a>";

55
mysqli_close($con);
?>
Output:

Web Technologies Lab

Uploaded by

Web Technologies Lab

Uploaded by

1

Department of Computer Science and Engineering

III Year I Semester

WEB TECHNOLOGIES LAB

Syed Akhtar Basha

III Year I Sem Web Technologies Lab GEC

III Year I Sem Web Technologies Lab GEC

Design a web page using CSS which includes the following:

III Year I Sem Web Technologies Lab GEC

2) LOGIN PAGE: This page looks like below:

III Year I Sem Web Technologies Lab GEC

1. Snap shot of Cover Page.

III Year I Sem Web Technologies Lab GEC

III Year I Sem Web Technologies Lab GEC

III Year I Sem Web Technologies Lab GEC

III Year I Sem Web Technologies Lab GEC

The cart page should look like this:

Create a “registration form “with the following fields

III Year I Sem Web Technologies Lab GEC

III Year I Sem Web Technologies Lab GEC

III Year I Sem Web Technologies Lab GEC

III Year I Sem Web Technologies Lab GEC

Design a web page using CSS which includes the following:

1) Use different font, styles:

<b class="headline">This is headline style bold</b>

III Year I Sem Web Technologies Lab GEC

4) Define styles for links as

6) Add a customized cursor:

III Year I Sem Web Technologies Lab GEC

<a href="mypage.htm" class="hlink">HELP LINK</a>

• CSS stands for Cascading Style Sheets

HTML tags were originally designed to define the content of a document.

1) Use different font, styles:

III Year I Sem Web Technologies Lab GEC

2) Set a background image

3. Control the repetition of the image with the background-repeat property.

III Year I Sem Web Technologies Lab GEC

4) Define styles for links

III Year I Sem Web Technologies Lab GEC

5) Work with layers

6) Add a customized cursor

III Year I Sem Web Technologies Lab GEC

2) Set a background image

3. Control the repetition of the image with the background-repeat property.

Control the repetition of the image with the background-repeat property

III Year I Sem Web Technologies Lab GEC

4) Define styles for links

Define styles for links

5) Work with layers

6) Add a customized cursor

Add a customized cursor

III Year I Sem Web Technologies Lab GEC

III Year I Sem Web Technologies Lab GEC

III Year I Sem Web Technologies Lab GEC

<tr><td width="43%" height="22" >

III Year I Sem Web Technologies Lab GEC

<td width="57%" height="22">

<select size="1" name="jobsinfo">

III Year I Sem Web Technologies Lab GEC

<td width="43%" height="22" >

<input type="text" name="eid" size="20">

<font face="timesnewroman" size="4">

<select size="1" name="country">

III Year I Sem Web Technologies Lab GEC

<td width="43%" height="22" >

<input type="text" name="org" size="20">

III Year I Sem Web Technologies Lab GEC

<td width="43%" height="22" >

<input type="text" name="state" size="20">

III Year I Sem Web Technologies Lab GEC

<input type="text" name="phonenumber" size="20">

III Year I Sem Web Technologies Lab GEC

III Year I Sem Web Technologies Lab GEC

Registration Page – Email Validation

Registration Page – Phone Number Validation

III Year I Sem Web Technologies Lab GEC