wt lab manual (1) - prudentac.com€¦ · about us, our services and contact us. create separate...

LABORATORY MANUAL

Department of Computer Science and Engineering

Web Technology Lab (NCS 554) Manual (CS, V SEM)

Department of Computer Science & Engineering

LIST OF EXPERIMENTS

Expt.

No.

Title of experiment

Corresponding CO

1. Write an HTML code to display your education details in a tabular

format.

C310.1

2. Write an HTML code to display your CV on a web page.

C310.1

3. Write an HTML code to create a Home page having three links:

About Us, Our Services and Contact Us. Create separate web pages

for the three links.

C310.1

4. Write an HTML code to create a login form. On submitting the form,

the user should get navigated to a profile page.

C310.1

5. Write an HTML code to create a Registration Form. On submitting

the form, the user should be asked to login with this new credentials.

C310.1

6. Write an HTML code to create your Institute website, Department

Website and Tutorial website for specific subject.

C310.2

7. Write an HTML code to illustrate the usage of the following:

• Ordered List

• Unordered List

• Definition List

C310.2

8. Write an HTML code to create a frameset having header, navigation

and content sections.

C310.2

9. Write an HTML code to demonstrate the usage of inline CSS. C310.2

10. Write an HTML code to demonstrate the usage of internal CSS. C310.2

11. Write an HTML code to demonstrate the usage of external CSS. C310.3

12. Write a Java script to prompt for users name and display it on the

screen.

C310.3

13. Design HTML form for keeping student record and validate it using

Java script.

C310.3

14. Write an HTML program to design an entry form of student details

and send it to store at database server like SQL, Oracle or MS

Access.

C310.3

15. Write programs using Java script for Web Page to display browsers

information.

C310.3

16. Create an applet which will have a line, an Oval & a Rectangle

Create an applet which will have a line, an Oval & a Rectangle

Create an applet which will have a line, an Oval & a Rectangle

C310.4

17.

Writing program in XML and create a style sheet in CSS & display

the document in internet explorer

C310.4

18. Write an XML program to display products C310.4

19. Write a program using PHP and HTML to create a form and display

the details entered by the user

C310.5



Content Beyond Syllabus

20.

To design the scientific calculator and make event for each

button using java script

C310.5

21.

Use frames such that page is divided into 3 frames 20% on

left to show contents of pages, 60% in center to show body of

page, remaining on right to show remarks.

C310.5

22.

Write an HTML page that contains a selection box with a list

of 5 countries, when the user selects a

country, its capital should be printed next to the list; Add CSS

to customize the properties of the font of

the capital (color, bold and font size).

C310.5

23. Install TOMCAT web server and APACHE. Access the above

developed static web pages for books web site, using these

servers by putting the web pages developed.

C310.4

24. Install a database (Mysql or Oracle). Create a table which

should contain at least the following fields: name, password,

email-id, phone number Write a java program/servlet/JSP to

connect to that database and extract data from the tables and

display them. Insert the details of the users who register with the

web site, whenever a new user clicks the submit button in the

registration page.

C310.4

25. Write a JSP which insert the details of the 3 or 4 users who

register with the web site by using registration form.

Authenticate the user when he submits the login form using the

user name and password from the database

C310.5



INTRODUCTION

Web technology is a collective name for technology primarily for the world wide web. This does,

however, tend to focus more specifically towards technology that aides in the creation, maintenance

and development of web-based applications.

From a developers point of view, these are things like languages and frameworks, data storage

mechanisms, services and products to allow us to create platforms and applications for the web.

ASP.NET is a Microsoft framework for web development that allows a developer to use languages like

C# and VB.NET to build websites and web applications (a web application is a website that offers

functionality, storing data - text, images, etc. - that can be processed and return a useful output to you,

or that you can come back to later, such as Facebook or Quora).

You can find web frameworks for Java, Python and a few other languages so that developers can use a

whole array of technologies, rather than being pinned down to one. These are known as server-side

technologies which lives and runs on a server somewhere.

On the other side, you have client-side web technologies, which include things like HTML, CSS,

JavaScript (which includes JavaScript Frameworks like jQuery, Angular and React). These execute run

from the web page that a user loads, but actually run on the users (clients) computer.

However, web technology is not limited to the developers. Web browsers, for example, are in the

category of web technology as it is technology that allows a user to access the web. FTP may also be

considered a web technology as it is designed to send files over the Internet.

I wouldn't, however, consider a VPN as web technology as a VPN is a networking technology that

sends network traffic over the Internet without actually interacting with the “world wide web” itself.



PREFACE We have come a long way—Web Style Guide and the World Wide Web. The first version of Web Style

Guide was a web site called the Yale c/aim Web Style Guide posted in 1993, just as the world outside

computing and academia began to notice the new medium and the Internet in general. The early web was

sorely lacking in aesthetics but exploding with potential. Web Style Guide provided much-needed

guidance on structure and design based on several decades’ worth of experience with print, hypermedia,

and multimedia design and authoring.

In 1997 we updated the Web Style Guide site to reflect the maturing design trends and changes in web

technology. In the web a novel landscape opened up, like a new continent rising from the sea, ready for

explorers and builders. People from the arts, publishing, and dozens of computing disciplines poured in,

enriching the web and pushing out the boundaries of what might be possible while bringing the wealth of

centuries of media and design culture along with them. The web changed to accommodate these new

settlers, whose expectations for what could be achieved in the web environment often outstripped its

capabilities. This was a time of significant progress in visual design and interface sophistication, but at the

cost of standardization and accessibility.

In 1999 we produced the first print edition of Web Style Guide. The web site had gained a significant

following as more and more organizations turned to the web as their primary means of communication.

People with little or no background in design were assigned the responsibility for web site development,

and they looked to Web Style Guide for calm, reassuring, and practical guidance. For many, the slim and

straightforward Web Style Guide was a welcome relief from the esoteric, hyperactive, and voluminous

books that lined the shelves in the Web Design section of their bookstores.

Since its inception as a web site in 1993 and into this third edition, Web Style Guide has presented solid

design advice based on classic design principles, acknowledging the possibilities and limitations of current

web technology while trying not to let the media confetti overwhelm good sense and an information-

oriented aesthetic. Thanks to enormous advances in html, Cascading Style Sheets, and the “web

standards” philosophy for building sites, this edition does not contain sections on cross-platform issues or

special techniques for making web sites accessible to people with disabilities.

In this third edition of Web Style Guide, and the nineteenth year of the World Wide Web, we celebrate

how far we’ve come and how much we can do to make the web accessible to and usable by everyone.



DO’S AND DONT’S

DO’s

1. Conform to the academic discipline of the department.

2. Enter your credentials in the laboratory attendance register.

3. Read and understand how to carry out an activity thoroughly before coming to the

laboratory.

4. Ensure the uniqueness with respect to the methodology adopted for carrying out the

experiments.

5. Shut down the machine once you are done using it.

DONT’S

1. Eatables are not allowed in the laboratory.

2. Usage of mobile phones is strictly prohibited.

3. Do not open the system unit casing.

4. Do not remove anything from the computer laboratory without permission.

5. Do not touch, connect or disconnect any plug or cable without your faculty/laboratory

technician’s permission.



GENERAL SAFETY INSTRUCTIONS

1. Know the location of the fire extinguisher and the first aid box and how to use them in

case of an emergency.

2. Report fire or accidents to your faculty /laboratory technician immediately.

3. Report any broken plugs or exposed electrical wires to your faculty/laboratory

technician immediately.

4. Do not plug in external devices without scanning them for computer viruses.

Data Structures Using C/ Java Lab (RCS-355) Manual (CS, III SEM) Page 16

Web Technology Lab (NCS 554)

Name

Roll No.

Section- Batch



INDEX

Experiment

No.

Experiment

Name

Date of

Conduction

Date of

Submission

Faculty

Signature



EXPERIMENT - 1

Aim: Write an HTML code to display your education details in a tabular format.

<html>

<head>

<title>Education details</title>

</head>

<body>

<h1 align="center" style="color:blue">EDUCATION DETAILS</h1><br><br>

<table border="1" background="gray" cellspacing="5" cellpadding="5">

<th>SNo</th>

<th>Course</th>

<th>Board/University</th>

<th>School/College</th>

<th>Year of Passing</th>

<th>Percentage</th>

<tr>

<td>1</td>

<td>10</td>

<td>ICSE</td>

<td>DPS</td>

<td>2008</td>

<td>90</td>

</tr>

<tr>

<td>2</td>

<td>12</td>

<td>ICSE</td>

<td>DPS</td>

<td>2010</td>

<td>95</td>

</tr>

</table>

</body>

</html>

EXPERIMENT - 2

Aim: Write an HTML code to display your CV on a web page..

<html>

<head>

<title>RESUME | JOHN DOE</title>

</head>

<body>



<div id="resume">



<h1>John Doe</h1>

<h2>4242 Ghila Road</h2>

<h2>Tucson, AZ 85701</h2>

<br />



</div>

<h2>Profile</h2>

<p>

Desires a resident position in the Bastyr University Acupuncture and Oriental

Medicine Residency Program. Able to be effective in a practice of any size.

Draw on experience with a range of patient issues, including additional work

in women and children’s care. Interested in health education for homeless.

Strong desire to contribute to the success of a program through an ability to

initiate and maintain relationships. Creative developer and presenter of

educational information.

</p>

<br />

<h2>Education</h2>

<h3>Masters of Acupuncture and Oriental Medicine,

<br />

Graduating June 2003</h3>

<p>

Bastyr University, Kenmore, WA 1999

</p>


<ul>

<li>

Completing an accredited program of coursework and supervised practice

in Acupuncture and Oriental Medicine. Extensive exposure to issues involving

women and children.

</li>

</ul>

<h3>Research Project</h3>

<ul>

<li>

Assisted the primary investigator in a double blind, randomized controlled

trail conducted at the Bastyr Center for Natural Health that evaluated the

effectiveness of Chinese herbs towards the control of Diabetes Mellitus in

post-menopausal women. Co-authored the research report that has been

submitted for publication to the Journal of Traditional Chinese Medicine.

</li>

</ul>

<h3>Bachelor of Science, Zoology</h3>

<p>

Miami University, Oxford, OH 1991 - 1995

</p>

<ul>

<li>

Participated in a community service project to increase citizen participation

in a clean up campaign.

</li>

<li>

Served as project leader in a fund raising project sponsored by the University

Student Council towards helping homeless youthsâ€™ return back to school.

</li>

</ul>

<br />

<h2>Related Experience</h2>

<h3>Bastyr University, Kenmore, WA 1999-present</h3>

<p>

Teaching Assistant


</p>

<ul>

<li>

Assists professor in the Anatomy & Physiology class.

</li>

<li>

Answers questions and demonstrate as needed.

</li>

</ul>

<h3>Kenmore Youth Ministry, Kenmore, WA 2000-2001</h3>

<p>

Camp Group Leader

</p>

<ul>

<li>

Participated in community youth group activities.

</li>

<li>

Developed activity programs now utilized by the youth ministry in helping

children improve reading skills.

</li>

</ul>

<h3>Franciscan Care Center Nursing Home,

<br />

Seattle, WA 1999 - 2000 </h3>

<p>

Volunteer Recreation Worker

</p>

<ul>

<li>

Provided social support to patients by reading to them, writing letters,

and visiting with them.

</li>

<li>

Formed friendships which enriched lives of patients

</li>

</ul>



<div id="bottom">

<p>

<a href="index.html">RESUME HOME</a> | <a href="#">SIMPLE RESUME</a> | <a

href="resume.html">COMPLEX RESUME</a> | <a href="code.html" target="_blank">SEE

HTML</a> | <a href="resume.css" target="_blank">SEE CSS</a>

</p>

</div>





</div>

</body>

</html>



EXPERIMENT - 3

Aim: Write an HTML code to create a Home page having three links: About Us, Our

Services and Contact Us. Create separate web pages for the three links.

<html>

<head>

<title>Gargi's Page</title>

</head>

<body bgcolor="gray">

<font size="8">

<a href="about_us.html">ABOUT US</a>

<a href="biography.html">OUR SERVICES</a>

<a href="contact_us.html">CONTACT US</a></font>

</body>

</html>



EXPERIMENT - 4

Aim: Write an HTML code to create a login form. On submitting the form, the user

should get navigated to a profile page.

<div id="login_form">

<form name="f1" method="post" action="profile.html" id="f1">

<table>

<tr>

<td class="f1_label">User Name :</td><td><input type="text" name="username" value="" />

</td>

</tr>

<tr>

<td class="f1_label">Password :</td><td><input type="password" name="password" value=""

/>

</td>

</tr>

<tr>

<td>

<input type="submit" name="login" value="Log In" style="font-size:18px; " />

</td>

</tr>

</table>

</form>

</div>



EXPERIMENT – 5

Aim: Write an HTML code to create a Registration Form. On submitting the form, the

user should be asked to login with this new credentials.

<html>

<head>

<script type="text/javascript" src="validate.js"></script>

</head>

<body>

<form action="#" name="StudentRegistration" onsubmit="return(validate());">

<table cellpadding="2" width="20%" bgcolor="99FFFF" align="center"

cellspacing="2">

<tr>

<td colspan=2>

<center><font size=4><b>Student Registration Form</b></font></center>

</td>

</tr>

<tr>

<td>Name</td>

<td><input type=text name=textnames id="textname" size="30"></td>

</tr>

<tr>

<td>Father Name</td>

<td><input type="text" name="fathername" id="fathername"

size="30"></td>

</tr>

<tr>

<td>Postal Address</td>

<td><input type="text" name="paddress" id="paddress" size="30"></td>

</tr>

<tr>



<td>Personal Address</td>

<td><input type="text" name="personaladdress"

id="personaladdress" size="30"></td>

</tr>

<tr>

<td>Sex</td>

<td><input type="radio" name="sex" value="male" size="10">Male

<input type="radio" name="sex" value="Female" size="10">Female</td>

</tr>

<tr>

<td>City</td>

<td><select name="City">

<option value="-1" selected>select..</option>

<option value="New Delhi">NEW DELHI</option>

<option value="Mumbai">MUMBAI</option>

<option value="Goa">GOA</option>

<option value="Patna">PATNA</option>

</select></td>

</tr>

<tr>

<td>Course</td>

<td><select name="Course">


<option value="B.Tech">B.TECH</option>

<option value="MCA">MCA</option>

<option value="MBA">MBA</option>

<option value="BCA">BCA</option>

</select></td>

</tr>

<tr>



<td>District</td>

<td><select name="District">


<option value="Nalanda">NALANDA</option>

<option value="UP">UP</option>



</select></td>

</tr>

<tr>

<td>State</td>

<td><select Name="State">





<option value="Bihar">BIHAR</option>

</select></td>

</tr>

<tr>

<td>PinCode</td>

<td><input type="text" name="pincode" id="pincode" size="30"></td>

</tr>

<tr>

<td>EmailId</td>

<td><input type="text" name="emailid" id="emailid" size="30"></td>

</tr>

<tr>

<td>DOB</td>

<td><input type="text" name="dob" id="dob" size="30"></td>



</tr>

<tr>

<td>MobileNo</td>

<td><input type="text" name="mobileno" id="mobileno" size="30"></td>

</tr>

<tr>

<td><input type="reset"></td>

<td colspan="2"><input type="submit" value="Submit Form" /></td>

</tr>

</table>

</form>

</body>

</html>



EXPERIMENT - 6

Aim: Write an HTML code to create your Institute website, Department Website and Tutorial

website for specific subject.

<html>

<head>

<title>Institute of Engineering</title>

</head>

<body>

<ul>

<li><a href="http://my.wm.edu">myWM</a></li>

<li><a href="http://directory.wm.edu/people/">Directory</a></li>

<li><a href="http://events.wm.edu">Events</a></li>

<li><a href="/about/visiting">Visit</a></li>

<li class="last-side-tactical"><a href="/atoz" id="wm-az">W&M A-Z</a></li>

</ul>

</nav>

<nav id="side_top_nav">

<ul>

<li ><a href="/about" id="about" title="About William & Mary">About</a></li>

<li ><a href="/academics" id="academics"

title="InstituteAcademics">Academics</a></li>

<li ><a href="/admission" id="admission" title="InstituteAdmission &

Aid">Admission & Aid</a></li>

<li ><a href="/research" id="research" title="InstituteResearch">Research</a></li>

<li ><a href="/campuslife" id="campus" title="InstituteCampus Life">Campus

Life</a></li>

<li ><a href="/news" id="news_events" title="InstituteNews">News</a></li>

<li><a href="http://www.tribeathletics.com/" id="athletics"

title="InstituteAthletics">Athletics</a></li>

<li><a href="http://www.wmalumni.com/" id="alumni"



title="InstituteAlumni">Alumni</a></li>

<li><a href="/giving" id="giving" title="InstituteGiving">Giving</a></li>

</ul>

</nav>

</div>

<header id="main-header"><div id="topbar"><a class="action_left icon-font" href="#"

id="menu_btn"></a><a class="mobile-header-logo" href="index.php"><img

alt="William and Mary" id="top_mark"

src="img/wm_wordmark_single_line_green.png"/></a><a class="action_right icon-

font" href="#" id="search_btn"></a></div>

<div id="desktop_header">

<nav id="tactical_nav">

<ul>

<li>

<a href="http://my.wm.edu">myWM</a>

</li>

<li>

<a href="http://directory.wm.edu/people/">Directory</a>

</li>

<li>

<a href="http://events.wm.edu">Events</a>

</li>

<li>

<a href="/about/visiting">Visit</a>

</li>

<li>

<a href="/atoz" id="wm-az">W&M A-Z</a>

</li>

</ul>

<

</nav>

<nav id="global_nav"><ul><li><a href="/about" id="about" >About</a>

</li><li><a href="/academics" id="academics" >Academics</a>

</li><li><a href="/admission" id="admission" >Admission & Aid</a>

</li><li><a href="/research" id="research" >Research</a>

</li><li><a href="/campuslife" id="campus" >Campus life</a>

</li><li><a href="/news" id="news_events" >News</a>

</li><li><a href="http://www.tribeathletics.com/" id="athletics">Athletics</a>

</li><li><a href="http://www.wmalumni.com/" id="alumni">Alumni</a>

</li><li><a href="/giving" id="giving" >Giving</a>

</li></ul>

</nav>

</div>



</header>



<nav class="footer_col" id="audience_links">

<a href="/alumnigateway">Alumni</a>

<a href="/currentstudents">Current Students</a>

<a href="/employers">Employers</a>

<a href="/facultystaff">Faculty & Staff</a>

<a href="/parentsandfamilies">Parents & Families</a>

<a href="/friends">Friends & Neighbors</a>

</nav>

<nav class="footer_col" id="additional_links">

<a href="http://swem.wm.edu">Library</a>

<a href="/offices/hr/careers">Careers at W&M</a>

<a href="/offices/compliance/policies">Policies</a>

<a href="/about/administration/emergency">Emergency Information</a>

<a href="/aboutthissite">About this Site</a>

</nav>

<div id="contact_info">

<a href="/" class="wordmark">



<img alt="The College of William and Mary" id="footer_mark"

src="/img/wm_wordmark_single_line_white.png"/>

</a>

<p>Williamsburg, VA

<br/>

<a href="/contactus" class="contact-us">Contact Us</a>

All Rights Reserved ©

<span id="footercopyyear"></span>

</p>

</div>

</div>

</footer>

<div></div>

</body>

</html>



EXPERIMENT - 7

Aim: Write an HTML code to illustrate the usage of the following:

1. Ordered List

2. Unordered List

3. Definition List

<html>

<head>

<title> My First Page </title>

</head>

<body>

<UL type='A'>

<LI>Red

<LI>Blue

<LI>Green

<LI>White

</UL><br>

<OL type='square'>

<LI>Red

<LI>Blue

<LI>Green

<LI>White

</OL><br>

<dl>

<dt>Red</dt>

<dd>Red color has the highest wavelength.</dd>

<dt>Violet</dt>

<dd>Violet color has the shortest wavelength.</dd>

</body>

</html>



EXPERIMENT - 8

Aim: Write an HTML code to create a frameset having header, navigation and content sections.

<html>

<FRAMESET Rows = "30%,*" >

<Frame Src="head.html" >

<FRAMESET Cols = "25%,*">

<Frame Src="navigation.html" >

<Frame Src="content.html" >

</FRAMESET>

</FRAMESET>

</html>



EXPERIMENT - 9

Aim: Write an HTML code to demonstrate the usage of inline CSS.

<!DOCTYPE html>

<html>

<body>

<h1 style="color:blue" align="center">This is a Blue Heading</h1>

<p style="color:red">This is a red paragraph with inline css</p>

</body>

</html>



EXPERIMENT - 10

Aim: Write an HTML code to demonstrate the usage of internal CSS

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

color:blue;

font-family:verdana;

font-size:300%;

}

p {

color:red;

font-family:courier;

font-size:160%;

}

</style>

</head>

<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

</body>

</html>



EXPERIMENT - 11

Aim: Write an HTML code to demonstrate the usage of external CSS.

Css

#para1 {

color: red;

text-align: center;

font-family:courier;

}

h1{

color:blue;

font-size:200%;

text-align:right;

background-color: #6495ed;

}

#para {

color: green;

text-align: center;

font-size:500%;

}

p{

border:1px solid black;

padding:10px;

margin:30px;

background-color: #e0ffff;

}

body {

background-image:url("bird.jpeg");

}



div{

text-decoration:overline;

font-size:200%;

}

Html code

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="mystyle.css">

</head>

<body>

<h1>This is a heading</h1>

<p id="para">This is a green paragraph.</p>

<p id="para1">This is a red paragraph.</p>

<p>This is some paragraph.</p>

<div>html is a markup language. it stands for hypertext mark up language. it is

used to create web pages. html has a very simple syntax. html uses tags for

formatting and for placing objects. html is interpreted by the browser. it is case-

insensitive.</div>

</body>

</html>



EXPERIMENT - 12

Aim: Write a Java script to prompt for users name and display it on the screen.

<html>

<head>

<title>

Greetings </title>

</head>

<body>

<script language="JavaScript">

firstName = prompt("Please enter your name", "");

document.write("Hello " +

firstName + ", welcome to my Web page.");

</script>

<p> This is my web page... </p>

</body>

</html>



EXPERIMENT - 13

Aim: Design HTML form for keeping student record and validate it using Java script.

<html>

<head>

<script type="text/javascript" src="validate.js"></script>

</head>

<body>

<form action="#" name="StudentRegistration" onsubmit="return(validate());">

<table cellpadding="2" width="20%" bgcolor="99FFFF" align="center"

cellspacing="2">

<tr>

<td colspan=2>

<center><font size=4><b>Student Registration Form</b></font></center>

</td>

</tr>

<tr>

<td>Name</td>

<td><input type=text name=textnames id="textname" size="30"></td>

</tr>

<tr>

<td>Father Name</td>

<td><input type="text" name="fathername" id="fathername"

size="30"></td>

</tr>

<tr>

<td>Postal Address</td>

<td><input type="text" name="paddress" id="paddress" size="30"></td>

</tr>

<tr>



<td>Personal Address</td>

<td><input type="text" name="personaladdress"

id="personaladdress" size="30"></td>

</tr>

<tr>

<td>Sex</td>

<td><input type="radio" name="sex" value="male" size="10">Male

<input type="radio" name="sex" value="Female" size="10">Female</td>

</tr>

<tr>

<td>City</td>

<td><select name="City">






</select></td>

</tr>

<tr>

<td>Course</td>

<td><select name="Course">


<option value="B.Tech">B.TECH</option>

<option value="MCA">MCA</option>

<option value="MBA">MBA</option>

<option value="BCA">BCA</option>

</select></td>

</tr>

<tr>

<td>District</td>

<td><select name="District">




<option value="Nalanda">NALANDA</option>

<option value="UP">UP</option>



</select></td>

</tr>

<tr>

<td>State</td>

<td><select Name="State">





<option value="Bihar">BIHAR</option>

</select></td>

</tr>

<tr>

<td>PinCode</td>

<td><input type="text" name="pincode" id="pincode" size="30"></td>

</tr>

<tr>

<td>EmailId</td>

<td><input type="text" name="emailid" id="emailid" size="30"></td>

</tr>

<tr>

<td>DOB</td>

<td><input type="text" name="dob" id="dob" size="30"></td>

</tr>

<tr>

<td>MobileNo</td>

<td><input type="text" name="mobileno" id="mobileno" size="30"></td>

</tr>

<tr>



<td><input type="reset"></td>

<td colspan="2"><input type="submit" value="Submit Form" /></td>

</tr>

</table>

</form>

</body>

</html>

Javascript

function validate()

{

if( document.StudentRegistration.textnames.value == "" )

{

alert( "Please provide your Name!" );

document.StudentRegistration.textnames.focus() ;

return false;

}

if( document.StudentRegistration.fathername.value == "" )

{

alert( "Please provide your Father Name!" );

document.StudentRegistration.fathername.focus() ;

return false;

}

if( document.StudentRegistration.paddress.value == "" )

{

alert( "Please provide your Postal Address!" );

document.StudentRegistration.paddress.focus() ;

return false;

}

if( document.StudentRegistration.personaladdress.value == "" )

{

alert( "Please provide your Personal Address!" );

document.StudentRegistration.personaladdress.focus() ;

return false;



}

if ( ( StudentRegistration.sex[0].checked == false ) && ( StudentRegistration.sex[1].checked ==

false ) )

{

alert ( "Please choose your Gender: Male or Female" );

return false;

}

if( document.StudentRegistration.City.value == "-1" )

{

alert( "Please provide your City!" );

document.StudentRegistration.City.focus() ;

return false;

}

if( document.StudentRegistration.Course.value == "-1" )

{

alert( "Please provide your Course!" );

return false;

}

if( document.StudentRegistration.District.value == "-1" )

{

alert( "Please provide your Select District!" );

return false;

}

if( document.StudentRegistration.State.value == "-1" )

{

alert( "Please provide your Select State!" );

return false;

}

if( document.StudentRegistration.pincode.value == "" ||

isNaN( document.StudentRegistration.pincode.value) ||

document.StudentRegistration.pincode.value.length != 6 )

{

alert( "Please provide a pincode in the format ######." );

EXPERIMENT - 14

Aim: Write an HTML program to design an entry form of student details and send it to store at

database server like SQL, Oracle or MS Access.

<!DOCTYPE html>

<html>

<head>

<title>PHP insertion</title>

<link href="css/insert.css" rel="stylesheet">

</head>

<body>

<div class="maindiv">



<div class="form_div">

<div class="title">

<h2>Insert Data In Database Using PHP.</h2>

</div>

<form action="insert.php" method="post">



<h2>Form</h2>

<label>Name:</label>

<input class="input" name="name" type="text" value="">

<label>Email:</label>

<input class="input" name="email" type="text" value="">

<label>Contact:</label>

<input class="input" name="contact" type="text" value="">

<label>Address:</label>

<textarea cols="25" name="address" rows="5"></textarea><br>

<input class="submit" name="submit" type="submit" value="Insert">

</form>

</div>

</div>

</body>

</html>

<?php

$connection = mysql_connect("localhost", "root", ""); // Establishing Connection with Server



$db = mysql_select_db("colleges", $connection); // Selecting Database from Server

if(isset($_POST['submit'])){ // Fetching variables of the form which travels in URL

$name = $_POST['name'];

$email = $_POST['email'];

$contact = $_POST['contact'];

$address = $_POST['address'];

if($name !=''||$email !=''){

//Insert Query of SQL

$query = mysql_query("insert into students(student_name, student_email, student_contact,

student_address) values ('$name', '$email', '$contact', '$address')");

echo "<br/><br/><span>Data Inserted successfully...!!</span>";

}

else{

echo "<p>Insertion Failed <br/> Some Fields are Blank....!!</p>";

}

}

mysql_close($connection); // Closing Connection with Server

?>



EXPERIMENT - 15

Aim: Write programs using Java script for Web Page to display browsers information.

<html>

<head>

<title>Browser Information</title>

</head>

<body>

<h1>Browser Information</h1>

<hr>

<p>

The <b>navigator</b> object contains the following information

about the browser you are using.

</p>

<ul>

<script LANGUAGE="JavaScript" type="text/javascript">

document.write("<li><b>Code Name:</b> " + navigator.appCodeName);

document.write("<li><b>App Name:</b> " + navigator.appName);

document.write("<li><b>App Version:</b> " + navigator.appVersion);

document.write("<li><b>User Agent:</b> " + navigator.userAgent);

document.write("<li><b>Language:</b> " + navigator.language);

document.write("<li><b>Platform:</b> " + navigator.platform);

</script>

</ul>

<hr>

</body>

</html>



EXPERIMENT - 16

Aim: Create an applet which will have a line, an Oval & a Rectangle.

import java.applet.*;

import java.awt.*;

public class Shapes extends Applet{

int x=300,y=100,r=50;

public void paint(Graphics g){

g.drawLine(30,300,200,10);

g.drawOval(x-r,y-r,100,100);

g.drawRect(400,50,200,100);

}

}



EXPERIMENT - 17

Aim: Writing program in XML and create a style sheet in CSS & display the document in

internet explorer.

<?xml-stylesheet href="classic.css"?>

<ARTICLE>

<HEADLINE>A Fairytale</HEADLINE>

<AUTHOR>John Brown</AUTHOR>

<PARA>

Once upon a time, in a kingdom called Pansia lived a brave King. He loved to play

<INSTRUMENT>flute</INSTRUMENT>

One fine day he called his ministers to hear him play the instrument.

</PARA>

</ARTICLE>

ARTICLE {

font-family: serif;

background: white; color: #003

}

AUTHOR {

font-size: large;

margin: 1em 0

}

HEADLINE {

font-size: x-large;

margin-bottom: 1em

}

PARA {

text-indent: 1em;

text-align: justify

}

INSTRUMENT {

font-style: italic

}



EXPERIMENT - 18

Aim: Write an XML program to display products .

<?xml-stylesheet href="classic.css"?>

<ARTICLE>

<HEADLINE>A Fairytale</HEADLINE>

<AUTHOR>John Brown</AUTHOR>

<PARA>

Once upon a time, in a kingdom called Pansia lived a brave King. He loved to play

<INSTRUMENT>flute</INSTRUMENT>

One fine day he called his ministers to hear him play the instrument.

</PARA>

</ARTICLE>



EXPERIMENT - 19

Aim: Write a program using PHP and HTML to create a form and display the details entered by

the user. <html>

<head>

<title>PHP Form Validation</title>

</head>

<body>

<?php

// define variables and set to empty values

$name = $email = $gender = $comment = $website = "";

if ($_SERVER["REQUEST_METHOD"] == "POST") {

$name = test_input($_POST["name"]);

$email = test_input($_POST["email"]);

$website = test_input($_POST["website"]);

$comment = test_input($_POST["comment"]);

$gender = test_input($_POST["gender"]);

}

function test_input($data) {

$data = trim($data);

$data = stripslashes($data);

$data = htmlspecialchars($data);

return $data;

}

?>

<h2>Tutorials Point Absolute classes registration </h2>

<form method="post" action="/php/php_form_introduction.htm">

<table>

<tr>

<td>Name:</td>

<td><input type="text" name="name"></td>

</tr>

<tr>

<td>E-mail:</td>

<td> <input type="text" name="email"></td>



</tr>

<tr>

<td>Specific Time:</td>

<td> <input type="text" name="website"></td>

</tr>

<tr>

<td>Class details:</td>

<td><textarea name="comment" rows="5" cols="40"></textarea></td>

</tr>

<tr>

<td>Gender:</td>

<td>

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

<input type="radio" name="gender" value="male">Male

</td>

</tr>

<tr>

<td>

<input type="submit" name="submit" value="Submit">

</td>

</tr>

</table>

</form>

<?php

echo "<h2>Your Given details are as :</h2>";

echo $name;

echo "<br>";

echo $email;

echo "<br>";

echo $website;

echo "<br>";

echo $comment;

echo "<br>";

echo $gender;

?></body>

</html>



EXPERIMENT - 20

Aim: To design the scientific calculator and make event for each button using java script.

<body>

<div id=”big_wrapper”>

<h1 id=”heading”>SIMPLE SCIENTIFIC CALCULATOR</h1>

<div id=”form_wrapper”>

<form id=”formone” name=”calc”>

<input id=”display” type=”text” name=”display” value=” ” disabled contenteditable=”false” >

<br>

<input class=”button number” type=”button” value=”1” onClick=”calc.display.value+=1”>



<input class=”button three” type=”button” value=”C” onClick=”Resetfunction(this.form)”>

<input class=”button three” type=”button” value=”<-” onClick=”backspace(this.form)”>

<input class=”button three” type=”button” value=”=” onClick=”evaluation(this.form)”>

<br>




<input class=”button opps” type=”button” value=”-” onClick=”calc.display.value+=’-‘”>

<input class=”button opps” type=”button” value=”%” onClick=”calc.display.value+=’%’”>

<input class=”button” type=”button” value=”cos” onClick=”cos_function()”>

<br>




<input class=”button opps” type=”button” value=”*” onClick=”calc.display.value+=’*’”>

<input class=”button” type=”button” value=”n!” onClick=”fact_function()”>

<input class=”button” type=”button” value=”sin” onClick=”sin_function()”>

<br>

<input class=”button opps” type=”button” value=”.” onClick=”calc.display.value+=’.’”>



EXPERIMENT - 21

Aim: : Develop and demonstrate using JavaScript, a XHTML document that displays

random numbers (integers).

<html>

<head>

<title>ramdom numbers</title>

<p>click here to generate random numbers</p>

<button onclick="ran()">click here</button>

<script type="text/javascript">

function ran()

{

alert(Math.floor(Math.random()*101));

}

</script>

</head>

</html>



EXPERIMENT - 22

Aim: Develop using JavaScript script, an XHTML document that use of onload and onfocus

events.

<html>

<head>

<title>nochange.html</title>

<script type = "text/javascript" src = "nochange.js">

</script>

</head>

<body onload="computeCost().focus">

<form action = " ">

<h3> Groceries Order Form</h3>

<table border="border">

<tr>

<th>Item</th>

<th>Price</th>

<th>Quantity</th>

</tr>

<tr>

<th>Rice</th>

<td>Rs.50</td>

<td><input type = "text" id = "rice" size = "2"/>

</td>

</tr>

<tr>

<th>Toor daal</th>

<td>Rs. 100</td>

<td><input type = "text" id = "toor_daal" size = "2"/>

</td>

</tr>

<tr>

<th>Urad daal</th>

<td>Rs. 125</td>



EXPERIMENT - 23 Aim: Install TOMCAT web server and APACHE. Access the above developed static web pages for books web site, using these servers by putting the web pages developed.

Installing Tomcat on Windows can be done easily using the Windows installer. Its interface and functionality

is similar to other wizard based installers, with only a few items of interest.

Installation as a service: Tomcat will be installed as a Windows service no matter what setting is selected.

Using the checkbox on the component page sets the service as "auto" startup, so that Tomcat is automatically

started when Windows starts. For optimal security, the service should be run as a separate user, with reduced

permissions (see the Windows Services administration tool and its documentation).

Java location: The installer will provide a default JRE to use to run the service. The installer uses the registry

to determine the base path of a Java 6 or later JRE, including the JRE installed as part of the full JDK. When

running on a 64-bit operating system, the installer will first look for a 64-bit JRE and only look for a 32-bit

JRE if a 64-bit JRE is not found. It is not mandatory to use the default JRE detected by the installer. Any

installed Java 6 or later JRE (32-bit or 64-bit) may be used.

Tray icon: When Tomcat is run as a service, there will not be any tray icon present when Tomcat is running.

Note that when choosing to run Tomcat at the end of installation, the tray icon will be used even if Tomcat

was installed as a service.

Defaults: The defaults used by the installer may be overridden by use of the /C=<config file> command line

argument. The configuration file uses the format name=value with each pair on a separate line. The names of

the available configuration options are:

JavaHome

TomcatPortShutdown

TomcatPortHttp

TomcatPortAjp

TomcatMenuEntriesEnable

TomcatShortcutAllUsers

TomcatServiceDefaultName

TomcatServiceName

TomcatServiceFileName

TomcatServiceManagerFileName

TomcatAdminEnable

TomcatAdminUsername

TomcatAdminPassword



TomcatAdminRoles

By using /C=... along with /S and /D= it is possible to perform fully configured unattended installs of Apache

Tomact.

Refer to the Windows Service HOW-TO for information on how to manage Tomcat as a Windows service.

The installer will create shortcuts allowing starting and configuring Tomcat. It is important to note that the

Tomcat administration web application can only be used when Tomcat is running.



EXPERIMENT – 24

Aim: Install a database (Mysql or Oracle). Create a table which should contain at least the following fields: name, password, email-id, phone number Write a java program/servlet/JSP to connect to that database and extract data from the tables and display them. Insert the details of the users who register with the web site, whenever a new user clicks the submit button in the registration page.

JDBC Driver Types

There are four types of JDBC drivers in use:

Type 1: JDBC-ODBC Bridge

A Type 1 JDBC-ODBC Bridge provides application developers with a way to access JDBC drivers via the

JDBC API. Type 1 JDBC drivers translate the JDBC calls into ODBC calls and then send the calls to the

ODBC driver. Type 1 JDBC drivers are generally used when the database client libraries need to be loaded

on every client machine.

Type 2: Native API/Partly Java Driver

A Type 2 Native API/Partly Java Driver is a partial Java driver because it converts JDBC calls into database

specific calls. Type 2 Native API/Partly Java Driver communicates directly with the database server.

Type 3: Pure Java Driver

A Type 3 Pure Java Driver works in a three tiered architecture. The JDBC calls are passed via the network to

the middle tier server. This server translates the calls to the database specific native interface to further

request the server. JDBC drivers available from Simba are Type 3 drivers.

Type 4: Native Protocol Java Driver

The type 4 driver is written completely in Java and is hence platform independent. It is installed inside the

Java Virtual Machine of the client. It provides better performance over the type 1 and 2 drivers as it does not

have the overhead of conversion of calls into ODBC or database API calls. Unlike the type 3 drivers, it does

not need associated software to work.A Type 4 Native Protocol Java Driver converts JDBC calls into the

database specific calls so that the client applications can communicate directly with the server.

PROGRAM:

Registration.html:

<html>

<head>

<title>Registration page</title>

</head>

<body bgcolor="#00FFFf">

<form METHOD="POST" ACTION="register">

<CENTER>

<table>



<center>

<tr> <td> Username </td>

<td><input type="text" name="usr"> </td> </tr>

<tr><td> Password </td>

<td><input type="password" name="pwd"> </td> </tr>

<tr><td>Age</td>

<td><input type="text" name="age"> </td> </tr>

<tr> <td>Address</td>

<td> <input type="text" name="add"> </td> </tr>

<tr> <td>email</td>

<td> <input type="text" name="mail"> </td> </tr>

<tr> <td>Phone</td>

<td> <input type="text" name="phone"> </td> </tr>

<tr> <td colspan=2 align=center> <input type="submit" value="submit"> </td> </tr>

</center>

</table>

</form>

</body>

Login.html

<html>

<head>

<title>Registration page</title>

</head>

<body bgcolor=pink> <center> <table>

<form METHOD="POST" ACTION="authent">

<tr> <td> Username </td>

<td><input type="text" name="usr"></td> </tr>

<tr> <td> Password </td>

<td> <input type="password" name="pwd"> </td> </tr>

<tr> <td align=center colspan="2"><input type="submit" value="submit"></td> </tr>

</table> </center>

</form>

</body>

</html>

Ini.java:



import javax.servlet.*;

import java.sql.*;

import java.io.*;

public class Ini extends GenericServlet

{

private String user1,pwd1,email1;

public void service(ServletRequest req,ServletResponse res) throws ServletException,IOException

{

user1=req.getParameter("user");

pwd1=req.getParameter("pwd");

email1=req.getParameter("email");

res.setContentType("text/html");

PrintWriter out=res.getWriter();

try

{

Class.forName("oracle.jdbc.driver.OracleDriver");

Connection

con=DriverManager.getConnection("jdbc:oracle:thin:@195.100.101.158:1521:cclab","scott","tiger");

PreparedStatement st=con.prepareStatement("insert into personal values(?,?,?,?,?,?)");

st.setString(1,user1);

st.setString(2,pwd1);

st.setString(3,"25");

st.setString(4,"hyd");

st.setString(5,email1);

st.setString(6,"21234");

st.executeUpdate();

con.close();

}

catch(SQLException s)

{ out.println("not found "+s);

}

catch(ClassNotFoundException c)

{

out.println("not found "+c);

}

} }



web.xml:

<web-app>

<servlet>

<servlet-name>init1</servlet-name>

<servlet-class>Ini</servlet-class>

</servlet>

<servlet-mapping>

<servlet-name>init1</servlet-name>

<url-pattern>/regis</url-pattern>

</servlet-mapping>

</web-app>



EXPERIMENT – 24

Aim: Write a JSP which insert the details of the 3 or 4 users who register with the web

site by using registration form. Authenticate the user when he submits the login form

using the user name and password from the database

Java Server Pages (JSP) is a technology that helpssoftware developers create dynamically generated

web pages based on HTML, XML, or other document types. JSP pages use several delimiters for

scripting functions. The most basic is , which encloses a JSP scriptlet. A scriptlet is a fragment of

Java code that is run when the user requests the page. Other common delimiters include for

expressions, where the value of the expression is placed into the page delivered to the user, and

directives, denoted with JDBC is a Java-based data access technology from Sun Microsystems. It is

an acronym as it is unofficially referred to as Java Database Connectivity. This technology is an API

for the Java programming language that defines how a client may access adatabase. It provides

methods for querying and updating data in a database. JDBC is oriented towards relational

databases. A JDBC driver is a software component enabling a Java application to interact with a

database. To connect with individual databases, JDBC (the Java Database Connectivity API)

requires drivers for each database. The JDBC driver gives out the connection to the database and

implements the protocolfor transferring the query and result between client and database.

PROGRAM: Login.jsp:

<%@ page import="java.sql.*;" %>

<html>

<body>

<%

try

{

Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");

Connection

con=DriverManager.getConnection("jdbc:odbc:web",

"","");

PreparedStatement st=con.prepareStatement("select

password from users where

username=?");

String s1=request.getParameter("t1");

st.setString(1,s1);

ResultSet rs=st.executeQuery();

if(rs.next())

{

String s2=request.getParameter("t2");



if(s2.equals(rs.getString(1)))

out.println("<h2 style='color:blue;font-

family:cambria;textalign:center'>Welcome "+s1+"

!!!</h2>");

else


family:cambria;textalign:center''>Invalid Password!!!

Please Enter Correct Password</h3>");

}

else


family:cambria;text-align:center''>Invalid

User!!! Please Register</h3>");

rs.close();

st.close();

con.close();

}

catch(Exception e)

{

out.println(e);

}

%>



References

1. Ivan Bayross,” HTML, DHTML, Java Script, Perl & CGI”, BPB Publication

2. Xavier, C, “ Web Technology and Design” , New Age International

3. https://www.javatpoint.com/.

.



APPENDIX

AKTU SYLLABUS

RCS-554 DEPTT ELECTIVE COURSE-1 Lab

1. Write HTML/Java scripts to display your CV in navigator, your Institute website,

Department Website and Tutorial website for specific subject

2. Design HTML form for keeping student record and validate it using Java script.

3. Write an HTML program to design an entry form of student details and send it to

store at database server like SQL, Oracle or MS Access.

4. Write programs using Java script for Web Page to display browsers information.

5. Write a Java applet to display the Application Program screen i.e. calculator and

other.

6. Writing program in XML for creation of DTD, which specifies set of rules. Create

a style sheet in CSS/ XSL & display the document in internet explorer.

7. Program to illustrate JDBC connectivity. Program for maintaining database by

sending queries. Design and implement a simple servlet book query with the

help of JDBC & SQL. Create MS Access Database, Create on ODBC link,

Compile & execute JAVA JDVC Socket.

8. Install TOMCAT web server and APACHE. Access the above developed static

web pages for books web site, using these servers by putting the web pages

developed .

9. Assume four users user1, user2, user3 and user4 having the passwords pwd1,

pwd2, pwd3 and pwd4 respectively. Write a servlet for doing the following.

Create a Cookie and add these four user id’s and passwords to this Cookie. 2.

Read the user id and passwords entered in the Login form and authenticate with

the values available in the cookies.

10. Install a database (Mysql or Oracle). Create a table which should contain at least

the following fields: name, password, email-id, phone number Write a java

program/servlet/JSP to connect to that database and extract data from the tables

and display them. Insert the details of the users who register with the web site,

whenever a new user clicks the submit button in the registration page.

11. Write a JSP which insert the details of the 3 or 4 users who register with the web



12. site by using registration form. Authenticate the user when he submits the login

form using the user name and password from the database

13. Design and implement a simple shopping cart example with session tracking

API.

wt lab manual (1) - prudentac.com€¦ · about us, our services and contact us. create separate...

Documents