INTERNET AND WEB TECHNOLOGY

LABORATORY MANUAL &RECORD

B.TECH
(II YEAR – IV SEM)
(2025-26)

DEPARTMENT
OF
COMPUTER SCIENCE AND ENGINEERING

MEDI-CAPS UNIVERSITY,INDORE
INTERNET AND WEB TECHNOLOGY

INDEX

Page
S.No List of experiments
No
Design the following static web pages required for an online book store web site.
1
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
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.
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 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
Price. Validate the above document using DTD and XML Schema.
i. Write a PHP program to validate the fields of the login page.
6 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
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.
Write a PHP program to connect to MySQL database which retrieves the data from the
9 tables and display them to the user.
Write a PHP program to insert the details entered by the user in the Registration form
10
into MySQL database.
INTERNET AND WEB TECHNOLOGY

Vision of the University:

 Be an internationally acclaimed University recognised for its

excellent teaching, research, innovation, outreach and creating top
class technocrats and professionals who can serve the mankind as
multi skilled global citizen.

Mission of the University:

 Establish state-of-the-art facilities for world class education and research.

 Conduct scholarly research and creative endeavours that impact quality of life.

 Attract quality staff and students to cater for diverse needs and

preferences and widenparticipation.

 Build a foundation for students to be successful at all levels

through high-quality,innovative programs.

 Collaborate with institute, industry, and society to address current

issues through researchand align curriculum.

 Involve in societal outreach programs to identify concerns and provide

sustainable ethicalsolutions.
 Encourage life-long learning and team-based problem solving

through an enablingenvironment.
INTERNET AND WEB TECHNOLOGY

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

Vision of the Department:

 To inculcate capability of thinking innovatively and to enrich
Computer Science and Engineering graduates with domain knowledge
and skills to address contemporary industrial and socialrequirements

Mission of the Department:

 Provide an environment to the students to learn with passion and
equip with proper skillset to address current problems.
 Provide maximum exposure to innovative techniques available to
cater industrial needsby maintain the best Industry- Academia
relation.
 Imparting best problem-solving strategies in students to work in a team.
 Produce leadership qualities in Computer Science graduates to work for the
society.
 Attract experienced and expert faculty members and create an
enthusiastic academicenvironment.
INTERNET AND WEB TECHNOLOGY

Program Education Objectives (PEOs):

PEO01 Provide the fundamental knowledge of basic sciences, mathematics, Computer Science
and
Business systems for the applications relevant to various streams of Engineering and
Technology
PEO02 Provide the knowledge of computer science and Data analytics tools to store,
retrieve,implement and analyze data in the context of business enterprise.
PEO03 Provide the facility and establish themselves as professionals by applying their
technical
skills and leadership qualities to solve real world problems and meet the diversified
needsof industry, academia and research
PEO04 Provide the opportunities to learn entrepreneurial skills and qualities which help
them toperceive the functioning of business, diagnose business problems, explore the
entrepreneurial opportunities and prepare them to manage business efficiently.

PEO05 Graduate may make career in various networking companies.

INTERNET AND WEB TECHNOLOGY

PROGRAM OUTCOMES (POs)

Engineering Graduates will be able to:

1. Engineering knowledge: Apply the knowledge of mathematics, science,
engineering fundamentals, and an engineering specialization to the solution of
complex engineering problems.

2. Problem analysis: Identify, formulate, review research literature, and analyze

complex engineering problems reaching substantiated conclusions using first
principles of mathematics, natural sciences, and engineering sciences.

3. Design / development of solutions: Design solutions for complex engineering

problems and design system components or processes that meet the specified
needs with appropriate consideration for the public health and safety, and the
cultural, societal, and environmental considerations.

4. Conduct investigations of complex problems: Use research-based knowledge

and research methods including design of experiments, analysis and
interpretation of data, and synthesis of the information to provide valid
conclusions.

5. Modern tool usage: Create, select, and apply appropriate techniques,

resources, and modern engineering and IT tools including prediction and
modeling to complex engineering activities with an understanding of the
limitations.

6. The engineer and society: Apply reasoning informed by the contextual

knowledge to assess societal, health, safety, legal and cultural issues and the
consequent responsibilities relevant to the professional engineering practice.

7. Environment and sustainability: Understand the impact of the professional

engineering solutions in societal and environmental contexts, and demonstrate the
knowledge of, and need for sustainable development.

8. Ethics: Apply ethical principles and commit to professional ethics and

responsibilities and norms of the engineering practice.

9. Individual and team work: Function effectively as an individual, and as a

member or leader in diverse teams, and in multidisciplinary settings.

10. Communication: Communicate effectively on complex engineering activities

with the engineering community and with society at large, such as, being able
to comprehend and write effective reports and design documentation, make
effective presentations, and give and receive clear instructions.

11. Project management and finance: Demonstrate knowledge and understanding

of the engineering and management principles and apply these to one‟s own
work, as a member and leader in a team, to manage projects and in multi
disciplinary environments.
12. Life- long learning: Recognize the need for, and have the preparation and
ability to engage in independent and life-long learning in the broadest context
of technological change.
INTERNET AND WEB TECHNOLOGY

Course Learning Objectives (CLOs):

CLO01 Understand WWW architecture, HTTP protocol, Web 2.0, and basics of DNS, SMTP, and
POP3.
CLO02 Develop web design skills using HTML, CSS, JavaScript, and DOM manipulation.
CLO03 Gain proficiency in XML, DTD, schemas, and transforming XML with CSS, XSL, and
XSLT.
CLO04 Acquire PHP and Servlet scripting skills for dynamic web development with databases.
CLO05 Explore JSP, JDBC, MVC, and frontend frameworks like Bootstrap and AngularJS.

Course Outcomes (COs):

After completion of this course the students shall be able to:
CO Description Blooms
Level
CO01 Define Web designing concepts for effective design. BL01
Understanding the fundamentals of many languages, such as HTML, XML, BL02
CO02
and PHP
CO03 Apply linguistic skills to create both static and dynamic websites. BL03
CO04 Analyze XML vs. HTML, MVC Framework and Angular JS for the design BL04
of the website

CO-PO Mapping:

Programme
Outcomes PO01 PO02 PO03 PO04 PO05 PO06 PO07 PO08 PO09 PO10 PO11 PO12

Course
Outco
me
CO01 1 1 3 3 1
CO02 1 2 2 1 2 2 3 2
CO03 1 3 1 2 2 1 1 2
CO04 1 2 3 3 2 1 2 1 2

Indicate 3, 2 or 1
3 = Significant, 2 = Medium Significance, 1 = Low Significance
INTERNET AND WEB TECHNOLOGY

CO-PSO Mapping:
Programme
Specific
Outcomes PSO01 PSO02 PSO03 PSO04
Course
Outcome
CO01 1 1 2 3
CO02 1 1 2 3
CO03 1 1 2 3
CO04 1 1 2 3
Indicate 3, 2 or 1
3 = Significant, 2 = Medium Significance, 1 = Low Significance
INTERNET AND WEB TECHNOLOGY

GENERAL LABORATORY INSTRUCTIONS

1. Students are advised to come to the laboratory at least 5 minutes before (to the
starting time), those who come after 5 minutes will not be allowed into the lab.
2. Plan your task properly much before to the commencement, come prepared to thelab
with the synopsis / program / experiment details.
3. Student should enter into the laboratory with:
a. Laboratory observation notes with all the details (Problem statement, Aim,
Algorithm, Procedure, Program, Expected Output, etc.,) filled in for the lab session.
b. Laboratory Record updated up to the last session experiments and other utensils (if
any) needed in the lab.
c. Proper Dress code and Identity card.
4. Sign in the laboratory login register, write the TIME-IN, and occupy the computer
system allotted to you by the faculty.
5. Execute your task in the laboratory, and record the results / output in the lab
observation note book, and get certified by the concerned faculty.
6. All the students should be polite and cooperative with the laboratory staff, must
maintain the discipline and decency in the laboratory.
7. Computer labs are established with sophisticated and high end branded systems,
which should be utilized properly.
8. Students / Faculty must keep their mobile phones in SWITCHED OFF mode during
the lab sessions. Misuse of the equipment, misbehaviors with the staff and systems
etc., will attract severe punishment.
9. Students must take the permission of the faculty in case of any urgency to go out ; if
anybody found loitering outside the lab / class without permission during working
hours will be treated seriously and punished appropriately.
10. Students should LOG OFF/ SHUT DOWN the computer system before he/she leaves
the lab after completing the task (experiment) in all aspects. He/she must ensure the
system / seat is kept properly.

Head of the Department

INTERNET AND WEB TECHNOLOGY

Objectives:

 To develop an ability to design and implement static and dynamicwebsite

 Choose best technologies for solving web client/server problems
 Create conforming web pages
 Use JavaScript for dynamic effects
 To prepare PHP scripts
 Use JavaScript & PHP to validate form input entry
 Understand, analyze and create XML documents and XML Schema
 Understand, analyze and build web applications using PHP
 Use appropriate client-side or Server-side applications
 Handling Cookies and Sessions using PHP, SERVLETS and JSP
 Manage normal and abnormal interactions with databases using JDBC.

Outcomes:

Upon successful completion of this course, the students will be able to:

 Design and implement dynamic websites with good aesthetic sense of designing
and latest technical know-how's
 Create web pages using HTML and Cascading Styles sheets
 Analyze a web page and identify its elements and attributes
 Create dynamic web pages using JavaScript
 Build web applications using PHP
 Create XML documents and XML Schema
 Understand, analyze and apply the role of languages like HTML, CSS, XML,
JavaScript, PHP, SERVLETS, JSP and protocols in the workings of the web and
webapplications
 Have a Good grounding of Web Application Terminologies, Internet Tools,
E – Commerce and other web services
 Develop interactive web applications using HTML forms and servlets.
 Use request and response objects provided to a servlet to read parameters andto
produce an HTML response.
 Develop JSP applications implementing Session management and Data base
Connectivity.
CS3EW04: Internet and Web Technology Laboratory Experiment no- 1
Page 1 of 5
Experiment Title: Design the following static web pages required for
an online book store web site.
i. Home Page ii. Login Page iii. Catalogue Page

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:

Department of Computer Science and Engineering

Faculty of Engineering
Medi-Caps University
CS3EW04: Internet and Web Technology Laboratory Experiment no- 1
Page 2 of 5
Experiment Title: Design the following static web pages required for
an online book store web site.
i. Home Page ii. Login Page iii. Catalogue Page

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.

Department of Computer Science and Engineering

Faculty of Engineering
Medi-Caps University
CS3EW04: Internet and Web Technology Laboratory Experiment no- 1
Page 3 of 5
Experiment Title: Design the following static web pages required for
an online book store web site.
i. Home Page ii. Login Page iii. Catalogue Page

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>

Department of Computer Science and Engineering

Faculty of Engineering
Medi-Caps University
CS3EW04: Internet and Web Technology Laboratory Experiment no- 1
Page 4 of 5
Experiment Title: Design the following static web pages required for
an online book store web site.
i. Home Page ii. Login Page iii. Catalogue Page

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

Department of Computer Science and Engineering

Faculty of Engineering
Medi-Caps University
CS3EW04: Internet and Web Technology Laboratory Experiment no- 1
Page 5 of 5
Experiment Title: Design the following static web pages required for
an online book store web site.
i. Home Page ii. Login Page iii. Catalogue Page

<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>
<td>Andrew S Tanenbaum</td>
<td>Computer Networks</td>
<td>400/</td>
<td><input type="button" value="ADD TO CART"</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>
<td><input type="button" value="ADD TO CART"</td>
<tr>
<td><imgsrc="wt1.jpg" height="105" width="150"></td>
<td>Kogent</td>
<td>Web Technologies, Black book</td>
<td>499/</td>
<td><input type="button" value="ADD TO CART"</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.
Department of Computer Science and Engineering
Faculty of Engineering
Medi-Caps University
CS3EW04: Internet and Web Technology Laboratory Experiment no- 1

Experiment Title: Page 1 of 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

Department of Computer Science and Engineering

Faculty of Engineering
Medi-Caps University
CS3EW04: Internet and Web Technology Laboratory Experiment no- 1

Experiment Title: Page 2 of 9

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

Department of Computer Science and Engineering

Faculty of Engineering
Medi-Caps University
CS3EW04: Internet and Web Technology Laboratory Experiment no- 1

Experiment Title: Page 3 of 9

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>
<tr>
<td>Web Programming, Building Internet Applications</td>
<td>500/-</td>
<td>2</td>
<td>1000</td>
</tr>
<tr>
<td>Web Technologies, Black book</td>
<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>
Department of Computer Science and Engineering
Faculty of Engineering
Medi-Caps University
CS3EW04: Internet and Web Technology Laboratory Experiment no- 1

Experiment Title: Page 4 of 9

<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>
<td>Andrew S Tanenbaum</td>
<td>Computer Networks</td>
<td>400/</td>
<td><input type="button" value="ADD TO CART"</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>
<td><input type="button" value="ADD TO CART"</td>
<tr>
<td><imgsrc="wt1.jpg" height="105" width="150"></td>
<td>Kogent</td>
<td>Web Technologies, Black book</td>
<td>499/</td>
<td><input type="button" value="ADD TO CART"</td>
</table>
</center>
</bdoy>
</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, i.e previous week.
Step3: traverse all pages from index.html.

Department of Computer Science and Engineering

Faculty of Engineering
Medi-Caps University
CS3EW04: Internet and Web Technology Laboratory Experiment no- 1

Experiment Title: Page 1 of 9

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>
<style type="text/css">
.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>
Department of Computer Science and Engineering
Faculty of Engineering
Medi-Caps University
CS3EW04: Internet and Web Technology Laboratory Experiment no- 1

Experiment Title: Page 2 of 9

</HTML>
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:
<style type="text/css">
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>
<style type="text/css">
.xlink {cursor:crosshair}
.hlink{cursor:help}
</style>
</head>

<body>
Department of Computer Science and Engineering
Faculty of Engineering
Medi-Caps University
CS3EW04: Internet and Web Technology Laboratory Experiment no- 1

Experiment Title: Page 3 of 9

<b>
<a href="mypage.htm" class="xlink">CROSS LINK</a>
<br>
<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

1) Use different font, styles:

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;

Department of Computer Science and Engineering

Faculty of Engineering
Medi-Caps University
CS3EW04: Internet and Web Technology Laboratory Experiment no- 1

Experiment Title: Page 4 of 9

text-align:center;
letter-spacing:3;
font-family:arial;
font-variant:small;
font-weight:bold;
}
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>
<style type="text/css">
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>
Department of Computer Science and Engineering
Faculty of Engineering
Medi-Caps University
CS3EW04: Internet and Web Technology Laboratory Experiment no- 1

Experiment Title: Page 5 of 9

<style type="text/css">
body
{
background-image:url(wt.jpg);
background-color:pink;
background-repeat:no-repeat;
background-position:center;
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>
<style type="text/css">
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;
text-decoration:overline;
font-family:arial;
Department of Computer Science and Engineering
Faculty of Engineering
Medi-Caps University
CS3EW04: Internet and Web Technology Laboratory Experiment no- 1

Experiment Title: Page 6 of 9

font-size:spot;
}
a:active
{
color:green;
text-decoration:overline;
font-family:arial;
font-size:spot;
}
</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>
Department of Computer Science and Engineering
Faculty of Engineering
Medi-Caps University
CS3EW04: Internet and Web Technology Laboratory Experiment no- 1

Experiment Title: Page 7 of 9

<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 .html files.

Department of Computer Science and Engineering

Faculty of Engineering
Medi-Caps University
CS3EW04: Internet and Web Technology Laboratory Experiment no- 1

Experiment Title: Page 8 of 9

Output
1) Use different font, styles:

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

Department of Computer Science and Engineering

Faculty of Engineering
Medi-Caps University
CS3EW04: Internet and Web Technology Laboratory Experiment n9o- 1
Page 9

4) Define styles for links

Define styles for links

5) Work with layers

6) Add a customized cursor

CS3EW04: Internet and Web Technology Laboratory Experiment n1o- 1
Page 1
CS3EW04: Internet and Web Technology Laboratory Experiment n1o- 1
Page 1

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>
CS3EW04: Internet and Web Technology Laboratory Experiment n2o- 1
Page 2

</html>
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>
CS3EW04: Internet and Web Technology Laboratory Experiment n3o- 1
Page 3

</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>
<td width="57%" height="22">
<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>
<td width="57%" height="22">
<font face="timesnewroman" size="20" >

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

CS3EW04: Internet and Web Technology Laboratory Experiment n4o- 1
Page 4

<option value>choose..</option>
<option value="Engineer">Engineer</option>
<option value="Lecturer">Lecturer</option>
</select></font>
</td>

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

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

Industry
</font>
</td>
<td width="57%" height="22">
<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>
</tr>
<tr>

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

<font face="timesnewroman" size="4">
Email-id
</font>
CS3EW04: Internet and Web Technology Laboratory Experiment n5o- 1
Page 5

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

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

<font color="red"> * </font>
</td>
</tr>
<tr>
<td width="43%" height="22" >

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

Country
</font>
</td>
<td width="57%" height="38">
<font face="timesnewroman" size="20">

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

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

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

Organization
</font>
</td>
<td width="57%" height="22">

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

CS3EW04: Internet and Web Technology Laboratory Experiment n6o- 1
Page 5

</td>
</tr>
<tr>

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

Address

</font>
</td>
<td>
<textarea rows="2" cols="16"></textarea>
</td>
</tr>

<tr>
<td width="43%" height="22" >
<font face="timesnewroman" size="4">
Town/city
</font>
</td>

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

<input type="text" name="city" size="20">
</td>
</tr>
<tr>

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

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

State
</font>
</td>
<td width="57%" height="38">

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

</td>
CS3EW04: Internet and Web Technology Laboratory Experiment n7o- 1
Page 7

</tr>
<tr>
<td width="43%" height="38" >
<font face="timesnewroman" size="4">
zip/Postalcode

</font>
</td>
<td width="57%" height="38">
<input type="text" name="zip" size="20">
<font color="red">

*
</font>
</td>
</tr>
<tr>
<td width="43%" height="38" >

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

Phonenumber
</font>
</td>
<td width="57%" height="38">

<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">
CS3EW04: Internet and Web Technology Laboratory Experiment n8o- 1
Page 8

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.
CS3EW04: Internet and Web Technology Laboratory Experiment n9o- 1
Page 9

Output

Login Page

Registration Page
CS3EW04: Internet and Web Technology Laboratory Experiment n1o0- 1
Page 10

Registration Page – Email Validation

Registration Page – Phone Number Validation

CS3EW04: Internet and Web Technology Laboratory Experiment n1o1- 1
Page 11

Registration Page – Postal Code Validation

CS3EW04: Internet and Web Technology Laboratory Experiment n1o- 1
Page 1
CS3EW04: Internet and Web Technology Laboratory Experiment n1o- 1
Page 1

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>
CS3EW04: Internet and Web Technology Laboratory Experiment n2o- 1
Page 2

<ISBN>123-456-789</ISBN>
<publisher>Dreamtech</publisher>
<edition>2nd</edition>
<prices>229</prices>
</book>

<book>
<title>WEB TECHNOLOGIES</title>
<author>Uttam.K.Roy</author>
<ISBN>123-456-789</ISBN>
<publisher>Oxford</publisher>
<edition>2nd</edition>
<prices>429</prices>
</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>
CS3EW04: Internet and Web Technology Laboratory Experiment n3o- 1
Page 3

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>
<prices>329</prices>
</book>

<book>
<title>Web Technologies, Black book</title>
<author>Kogent</author>
<ISBN>123-456-789</ISBN>
<publisher>Dreamtech</publisher>
<edition>2nd</edition>
<prices>229</prices>
</book>

<book>
<title>WEB TECHNOLOGIES</title>
<author>Uttam.K.Roy</author>
<ISBN>123-456-789</ISBN>
<publisher>Oxford</publisher>
<edition>2nd</edition>
<prices>429</prices>
</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.
CS3EW04: Internet and Web Technology Laboratory Experiment n4o- 1
Page 4

Output

Demonstrating DTD

Demonstrating XSD
CS3EW04: Internet and Web Technology Laboratory Experiment n5o- 1
Page 5
CS3EW04: Internet and Web Technology Laboratory Experiment n6o- 1
Page 6
CS3EW04: Internet and Web Technology Laboratory Experiment n7o- 1
Page 7

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>
CS3EW04: Internet and Web Technology Laboratory Experiment n8o- 1
Page 8

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

placeholder="Max 15 characters"/></td>
</tr>
<tr>
</tr> <td ><input type="submit" class="button button1" value="LOGIN" /></td>

<td></td>
<td ><input type="reset" class="button button1"
value="RESET" /></td>
</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> <form name="RegistrationPage"

action="http://localhost:2424/19batch/registeration-validation.php" method="post">
CS3EW04: Internet and Web Technology Laboratory Experiment n9o- 1
Page 9

<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"
placeholder="Max 15 characters"/></td>
</tr>
<tr>
<td> Password</td>
<td> : </td>
<td><input type="Password" name="t3" class ="textbox"
placeholder="Max 15 characters"/></td>
</tr>
<tr>
<td>Contact Number</td>
<td> : </td>
<td><input type="text" name="t4" class ="textbox"
placeholder="Without country code" max=10/></td>
</tr>
<tr>
<td>Email Address</td>
<td> : </td>
<td><input type="text" name="t5" class ="textbox"
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>
CS3EW04: Internet and Web Technology Laboratory Experiment n1o0- 1
Page 10

<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=="") {
CS3EW04: Internet and Web Technology Laboratory Experiment n1o1- 1
Page 11

$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:
CS3EW04: Internet and Web Technology Laboratory Experiment n1o2- 1
Page 12
CS3EW04: Internet and Web Technology Laboratory Experiment n1o3- 1
Page 13

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:
CS3EW04: Internet and Web Technology Laboratory Experiment n1o4- 1
Page 14
CS3EW04: Internet and Web Technology Laboratory Experiment n1o5- 1
Page 15

EXP NO: 8
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");
CS3EW04: Internet and Web Technology Laboratory Experiment n1o6- 1
Page 16

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>
CS3EW04: Internet and Web Technology Laboratory Experiment n1o7- 1
Page 17

OUTPUT:
CS3EW04: Internet and Web Technology Laboratory Experiment n1o8- 1
Page 18

EXP NO: 9
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)
{
die('Could not connect: ' . mysql_error());
}

// some code

mysql_close($con);
?>
CS3EW04: Internet and Web Technology Laboratory Experiment n1o9- 1
Page 19

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.

CS3EW04: Internet and Web Technology Laboratory Experiment n2o0- 1
Page 20

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
CS3EW04: Internet and Web Technology Laboratory Experiment n2o1- 1
Page 21

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
CS3EW04: Internet and Web Technology Laboratory Experiment n2o2- 1
Page 22

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
CS3EW04: Internet and Web Technology Laboratory Experiment n2o3- 1
Page 23

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>";
CS3EW04: Internet and Web Technology Laboratory Experiment n2o4- 1
Page 24

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

CS3EW04: Internet and Web Technology Laboratory Experiment n2o5- 1
Page 25

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 protected]"/><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)
{
die('Could not connect: ' . mysql_error());
}

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>";
CS3EW04: Internet and Web Technology Laboratory Experiment n2o6- 1
Page 26

mysqli_close($con);
?>

Output: