Web Technology Lab: Department of Computer Science & Engineering
Uploaded by
Aman MouryaWeb Technology Lab: Department of Computer Science & Engineering
Uploaded by
Aman MouryaWeb Technology Lab
(KCS-652)
Submitted To : Submitted By :
Ms. Laxmanika Himanshu Mishra
(1901920100125)
Department of Computer Science & Engineering
G.L. Bajaj Institute of Technology and Management Greater Noida
201306
INDEX
Sr. Name of Experiment Date of Date of Remark Faculty
no. Experiment Submission Signature
1. Write HTML/Java scripts to
display your CV in navigator.
2. Write HTML/Java scripts to
display an institute website,
Department Website and
Tutorial Website for specific
subjects.
3. Design HTML from for keeping
student record and validate it
using javascript
4. Write an HTML program to
design an entry form of student
details and send it to database
servers like SQL, Oracle or MS
Access.
5. Write programs using Java script
for Web Page to display
browsers information.
6. Write a Java applet to display
the Application Program screen
i.e. calculator and other.
7. Writing program in XML for
creation of DTD, which
specifies a set of rules. Create a
style sheet in CSS/ XSL &
display the document in internet
explorer.
8. Using ASP for server side
programming, ASP for
username and password and to
retrieve and match the value.It
displays success and failure
messages.ASP for creating text
file local drive, ASP for keeping
the student record in database.
PROGRAM 1
Objective: Write HTML/Java scripts to display your CV in navigator.
Theory:
Introduction:
HTML stands for Hyper Text Markup Language. HTML is the computer language that is used to
create documents for display on the Web. Many editors exist to create Web Pages – Word, Front
Page, and Dream Weaver are just a few. Nevertheless, each of these software programs (editors)
performs the exact same task – they all generate HTML language.
The HTML language consists of a series of HTML tags. Learning HTML involves finding out
what tags are used to mark the parts of a document and how these tags are used in creating an
HTML document.
Tags are instructions that tell your browser what to show on a Web page. They break up your
document into basic sections. All tags start with a < (left bracket) and end with a > (right
bracket).
Basic HTML Tags
<HTML> </HTML>
This tag tells your browser that the file contains HTML-coded information. All html tags must
be placed between the open <HTML> tag and the closed tag </HTML> The file extension .html
also indicates the document is an HTML document. All html documents MUST be saved with
the .html file extension.
<HEAD> </HEAD>
The head tag identifies the first part of your HTML-coded document. The title tag (explained
below) must be places between the open <HEAD> tag and the closed </HEAD> tag.
<BODY> </BODY>
The largest part of your HTML document is the body, which contains the content of your
document (displayed within the text area of your browser window). All HTML tags that pertain
to the body of your HTML document must be places between the open <BODY> tag and the
closed </BODY> tag. The tag has attributes which you can use to set the colors of your
background, text, links, and also to include your own background image. They are as follows:
● BGCOLOR="white" Sets the background color (other color names: red, black,
blue etc)
● TEXT="black" Sets the body text color
● LINK="blue" Sets the unvisited hypertext links
● VLINK ="purple" Sets the visited hypertext links
● ALINK="red" Sets the active hypertext links (the color of the hypertext link
when you have your mouse button depressed)
● BACKGROUND Let you use an image as the
background <background= Body attributes are used as part of the
open <body> tag. For example:
<BODY BGCOLOR = "white" TEXT = "black" LINK = "blue" VLINK =
"purple" ALINK = "red">
Code :
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title> Resume</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body >
<table cellspacing="10">
<tr>
<td><img
src="https://image.shutterstock.com/image-illustration/friendly-positive-cute-cartoon-orange-260nw-170235
8245.jpg" alt="img"></td>
<td><h1>Amit Kumar</h1>
<h2><b>Student</b></h2>
<h4><b> <em> G L Bajaj Institue of Technology and Management</em></b></h4>
</td>
</tr>
</table>
<hr>
<h3><b>Schooling</b></h3>
<table cellspacing = "20">
<tr>
<td> <b>Completion</b> </td>
<td> <b>School/College</b> </td>
<td> <b>Year of Completion</b> </td>
</tr>
<tr>
<td>10th</td>
<td>M S S K Vedic Vidhalya Bulandshahr</td>
<td>2016</td>
</tr>
<tr>
<td>12th</td>
<td>C S S Vidya Mandir Shivaji Nagar Bulandshahr</td>
<td>2018</td>
</tr>
<tr>
<td>B.tech(pursuing)</td>
<td>G L Bajaj Institue of Technology and Management Greate Noida</td>
<td>2019 - </td>
</tr>
</table>
<hr>
<h3>Skills</h3>
<table cellspacing = "20">
<tr>
<td> <b>Programming Languages</b> </td>
<td> <b>Core Subjects</b> </td>
</tr>
<tr>
<td>C++</td>
<td>DBMS</td>
</tr>
<tr>
<td>Python</td>
<td>Operating System</td>
</tr>
</table>
<hr>
<h3>Hobbies</h3>
<table>
<tr>
<td>Video Gaming</td>
</tr>
</table>
<hr>
<a href="G:\web_Dev_projects\HTML - Personal Site\contactme.html"> Contact Me</a>
</body>
</html>
Output:
PROGRAM 2
Objective: Write HTML/Java scripts to display an institute website,Department
Website and Tutorial Website for specific subjects.
Theory:
Introduction:
HTML stands for Hyper Text Markup Language. HTML is the computer language that is
used to create documents for display on the Web. Many editors exist to create Web Pages –
Word, Front Page, and Dream Weaver are just a few. Nevertheless, each of these software
programs (editors) performs the exact same task – they all generate HTML language.
bracket).
Code :
Institute Website-
<!DOCTYPE html>
<html>
<head>
<title>GL Bajaj institute of technology</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
</head>
<body>
<div class ="head-section">
<table>
<tr>
<td><img src="glblogo.jpg" alt="Glbajaj logo"></td>
<td><h2>G L BAJAJ INSTITUTE OF TECHNOLOGY AND MANAGEMENT GRETER
NOIDA</h2></td>
</tr>
</table>
</div>
<hr>
<h2> About College </h2>
<div class="about-college" style = "background-color:#339933;">
<p>GL Bajaj Institute of Technology & Management is the 6th Institute established under the prestigious
banner of Rajeev Memorial Academic Welfare Society (Registered Under Societies Registration Act 1860). The
institute is approved by All India Council for Technical Education (AICTE), Ministry of HRD, Govt. of India and
Affiliated to Dr. A.P.J. Abdul Kalam Technical University (Formerly UPTU Lucknow).</p>
</div>
<div class="about" style = "background-color:yellow;">
<p>GL Bajaj Institute of Technology and Management is one of the quality driven Educational Institutes
in the Greater Noida/Delhi-NCR Region. GL Bajaj stands out as one of the best engineering and management
colleges in UP. It also stands out in its approach to assist and equip the students for their overall development,
giving them a strong foundation for a successful future. The institute offers B.Tech, MBA and MCA programs.
</p>
</div>
<div class="about-image">
<div class = "row">
<div class = "col-lg-4" >
<img src="glb1.jpg" alt="Glbajaj logo" height = 400px width =300px>
</div>
<div class = "col-lg-4" >
<img src="glb2.jpg" alt="Glbajaj logo" height = 400px width =300px>
</div>
<div class = "col-lg-4" >
<img src="glb3.jpg" alt="Glbajaj logo" height = 400px width =300px>
</div>
</div>
<div>
<hr>
<h3> Departments</h3>
<table>
<tr>
<td><a href="C:/Users/user/Desktop/dept.html" class="btn btn-primary btn-lg active"
role="button" aria-pressed="true">Computer Science and Engineering</a><td>
</tr>
<tr>
<td><a href="#" class="btn btn-primary btn-lg active" role="button"
aria-pressed="true">Information Technology</a><td>
</tr>
<tr>
<td><a href="#" class="btn btn-primary btn-lg active" role="button"
aria-pressed="true">Electronics and Engineering</a><td>
</tr>
<tr>
<td><a href="#" class="btn btn-primary btn-lg active" role="button"
aria-pressed="true">Mechanical Department</a><td>
</tr>
<tr>
<td><a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Civil
Department</a><td>
</tr>
<tr>
<td><a href="#" class="btn btn-primary btn-lg active" role="button"
aria-pressed="true">MBA</a><td>
</tr>
<tr>
<td><a href="#" class="btn btn-primary btn-lg active" role="button"
aria-pressed="true">Placement Department</a><td>
</tr>
</table>
<hr>
<h3>Contact us</h3>
<footer>
<a href="mailto:[email protected]">Contact us</a>
<a href="">facebook</a>
<a href="">Linkdin</a>
</footer>
</body>
</html>
Department Website:-
<!DOCTYPE html>
<html>
<head>
<title>dept of cse</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
</head>
<body>
<div class ="head-section">
<h1>Department of Computer Science and Engineering</h1>
</div>
<hr>
<h2>About Deparment</h2>
<div class="about-dept">
<h4> B.Tech (4 Years) & M.Tech (2 Years), Approved by AICTE
Affilated to Dr. A.P.J. Abdul Kalam Technical University</h4>
<p>The Department of Computer Science Engineering at GL Bajaj Institute of Technology was
established in the year 2005 with a vision to help the IT boom and fulfill the need of dynamic Software
Engineers globally. Since then, especially in the last ten years of the IT revolution, the department has
taken long strides and is now among one of the best departments in the college. The Department aims to
nurture students in terms of modern computer techniques and to prepare them to cope well with the
technical advancements in future. Computer Science being the flagship branch of Engineering takes
focus in scientific research, scientific programming, and software engineering.</p>
</div>
<hr>
<h3> Subjects </h3>
<table>
<tr>
<td><button type="button" class="btn btn-link btn-light" >WEB Development</button><td>
</tr>
<tr>
<td><button type="button" class="btn btn-link btn-dark">DBMS</button><td>
</tr>
<tr>
<td><button type="button" class="btn btn-link btn-light">COA</button><td>
</tr>
<tr>
<td><button type="button" class="btn btn-link btn-dark">Operating System</button><td>
</tr>
<tr>
<td><button type="button" class="btn btn-link btn-light">Computer
Networks</button></a><td>
</tr>
<tr>
<td><button type="button" class="btn btn-link btn-dark">OOPS</button><td>
</tr>
<tr>
<td><button type="button" class="btn btn-link btn-light">Software Engineering</button><td>
</tr>
</table>
</body>
Tutorial Website:-
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>DBMS Tutorial Website</title>
</head>
<body>
<h1>Database Management System</h1>
<br><hr>
<h3>Database Concepts</h3>
<ul>
<li>Overview of DBMS</li>
<li>Concepts of DBMS</li>
<li>Database Architecture</li>
<li>Types of database models</li>
<li>ER Model:Basic Concepts</li>
</ul>
<h3>What is Database?</h3>
<br>
<p>A Database is a collection of related data organized in a way that data can be easily accessed,
managed and updated. Databases can be software based or hardware based, with one sole purpose, storing
data.</p>
<br>
<hr>
<h3>What is DBMS?</h3>
<br>
<p>A DBMS is a software that allows creation, definition and manipulation of databases, allowing users
to store, process and analyze data easily.</p>
</body>
</html>
Output:
Institute Website :
Department Website:
Tutorial Website :
PROGRAM 3
Objective: Design HTML from for keeping student record and validate it using javascript
Theory:
HTML Forms
HTML Forms are required to collect different kinds of user inputs, such as contact details like
name, email address, phone numbers, or details like credit card information, etc.
Forms contain special elements called controls like inputbox, checkboxes, radio-buttons, submit
buttons, etc. Users generally complete a form by modifying its controls e.g. entering text,
selecting items, etc. and submitting this form to a web server for processing.
The <form> tag is used to create an HTML form. Here's a simple example of a login form:
HTML Code :
<html>
<head>
<script type="text/javascript" src="validateform.js"></script>
<style>
ul {list-style-type:none;}
form{
background-color: #DCDCDC;
}
</style>
</head>
<body>
<form action="#" name="Student Signup Form" onsubmit="return(validateHTMlform());">
<div cellpadding="2" width="20%" bgcolor="99FFFF" align="center"
cellspacing="2">
<ul>
<li>
<center><font size=4><b>Student Registration Form</b></font></center>
</li>
</ul>
<ul>
<li>First Name</li>
<li><input type=text name=textnames id="textname" size="30"></li>
</ul>
<ul>
<li>
Last Name</li>
<li><input type=text name=lastnames id="lastname" size="30"></li>
</ul>
<ul>
<li>Father Name</li>
<li><input type="text" name="full_father_name" id="fathername"
size="30"></li>
</ul>
<ul>
<li>Address</li>
<li><input type="text" name="personal_address"
id="personaladdress" size="30"></li>
</ul>
<ul>
<li>Gender</li>
<li><input type="radio" name="sex" value="male" size="10">Male
<input type="radio" name="sex" value="Female" size="10">Female</li>
</ul>
<ul>
<li>City</li>
<li><select name="City">
<option value="-1" selected>select..</option>
<option value="KOLKATA">KOLKATA</option>
<option value="CHENNAI">CHENNAI</option>
<option value="PUNE">PUNE</option>
<option value="JAIPUR">JAIPUR</option>
</select></li>
</ul>
<ul>
<li>Course</li>
<li><select name="Course">
<option value="-1" selected>select..</option>
<option value="B.Tech">B.TECH</option>
<option value="MCA">MCA</option>
<option value="MBA">MBA</option>
<option value="BCA">BCA</option>
</select></li>
</ul>
<ul>
<li>State</li>
<li><select Name="State">
<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="Bihar">BIHAR</option>
</select></li>
</ul>
<ul>
<li>District</li>
<li><select name="Disulict">
<option value="-1" selected>select..</option>
<option value="Nalanda">NALANDA</option>
<option value="UP">UP</option>
<option value="Goa">GOA</option>
<option value="Patna">PATNA</option>
</select></li>
</ul>
<ul>
<li>PinCode</li>
<li><input type="text" name="pin_code" id="pincode" size="30"></li>
</ul>
<ul>
<li>student email</li>
<li><input type="text" name="email_id" id="emailid" size="30"></li>
</ul>
<ul>
<li>Date Of Birth</li>
<li><input type="text" name="date_of_birth" id="dob" size="30"></li>
</ul>
<ul>
<li>Mobile Number</li>
<li><input type="text" name="mobilenumber" id="mobile_no" size="30"></li>
</ul>
<ul>
<li><input type="reset"></li>
<li colspan="2"><input type="submit" value="Submit Form" /></li>
</ul>
</div>
</form>
</body>
</html>
Validateform.js:-
function validateHTMlform()
{
let form = document.StudenSignupForm;
if( form.textnames.value == "" )
{
alert( "Enter Your First Name!" );
form.textnames.focus() ;
return;
}
if( form.lastnames.value == "" )
{
alert( "Enter Your Last Name!" );
form.textnames.focus() ;
return;
}
if( form.fathername.value == "" )
{
alert( "Enter Your Father Name!" );
form.fathername.focus() ;
return;
}
if( form.paddress.value == "" )
{
alert( "Enter Your Postal Address!" );
form.paddress.focus() ;
return;
}
if( form.personaladdress.value == "" )
{
alert( "Enter Your Personal Address!" );
form.personaladdress.focus() ;
return;
}
if ( ( StudenSignupForm.sex[0].checked == false ) && ( StudenSignupForm.sex[1].checked == false ) )
{
alert ( "Choose Your Gender: Male or Female" );
return false;
}
if( form.City.value == "-1" )
{
alert( "Enter Your City!" );
form.City.focus() ;
return;
}
if( form.Course.value == "-1" )
{
alert( "Enter Your Course!" );
return;
}
if( form.District.value == "-1" )
{
alert( "Select Your District!" );
return;
}
if( form.State.value == "-1" )
{
alert( "Select Your State!" );
return;
}
if( form.pincode.value == "" ||
isNaN( form.pincode.value) ||
form.pincode.value.length != 6 )
{
alert( "Enter your pincode in format ######." );
form.pincode.focus() ;
return;
}
var email = form.emailid.value;
atpos = email.indexOf("@");
dotpos = email.lastIndexOf(".");
if (email == "" || atpos < 1 || ( dotpos - atpos < 2 ))
{
alert("Enter your correct email ID")
form.emailid.focus() ;
return;
}
if( form.dob.value == "" )
{
alert( "Enter your DOB!" );
form.dob.focus() ;
return;
}
if( form.mobileno.value == "" ||
isNaN( form.mobileno.value) ||
form.mobileno.value.length != 10 )
{
alert( "Enter your Mobile No. in the format 123." );
form.mobileno.focus() ;
return;
}
return( true );
}
I hope you got an ide
Output:
PROGRAM-4
Objective: Write an HTML program to design an entry form of student details and send it
to a database server like SQL, Oracle or MS Access.
Theory:
HTML Forms
HTML Forms are required to collect different kinds of user inputs, such as contact details like
name, email address, phone numbers, or details like credit card information, etc.
Forms contain special elements called controls like inputbox, checkboxes, radio-buttons, submit
buttons, etc. Users generally complete a form by modifying its controls e.g. entering text,
selecting items, etc. and submitting this form to a web server for processing.
The <form> tag is used to create an HTML form. Here's a simple example of a login form:
Input Element
This is the most commonly used element within HTML forms.It allows you to specify various
types of user input fields, depending on the type attribute. An input element can be of type
text field, checkbox, password field, radio button, submit button, reset button, etc. and several
new input types introduced in HTML5.
The most used input types are described below.
Text Fields Text fields are one line areas that allow the user to input text.Single-line text input
controls are created using an <input> element, whose type attribute has a value of text. Here's an
example of a single-line text input used to take username:
Password Field
Password fields are similar to text fields. The only difference is; characters in a password field
are masked i.e. shown as asterisks or dots. This is to prevent others from reading the password
on the screen. This is also a single-line text input controls created using an <input> element
whose type attribute has a value of password.
Here's an example of a single-line password input used to take user password:
Radio Buttons:
Radio buttons are used to let the user select exactly one option from a pre-defined set of options.
It is created using an <input> element whose type attribute has a value of radio.
Checkboxes
Checkboxes allows the user to select one or more option from a pre-defined set of options. It
is created using an <input> element whose type attribute has a value of checkbox.
File Select box
The file fields allow a user to browse for a local file and send it as an attachment to the form
data. It normally rendered as a text box with a button that enables the user to browse for a file.
However, the user can also type the path and name of the file in the text box.This is also created
using an <input> element, whose type attribute value is set to file.
Textarea
Textarea is a multiple-line text input control that allows a user to enter more than one line of
text. Multi-line text input controls are created using an <textarea> element.
Select Boxes
A select box is a drop down list of options that allows user to select one or more option from a
pull-down list of options. Select box is created using the <select> element and <option>
element. The option elements within the <select> element define each list item.
Submit and Reset Buttons
A submit button is used to send the form data to a web server. When submit button is clicked
the form data is sent to the file specified in the form's action attribute to process the submitted
data. A reset button resets all the forms control to default values.
Most frequently used form attributes are:
Name The name of the form.
action URL of the program that processes the information submitted via form.
method The HTTP method that the browser uses to submit the form. Possible values are get and
post.
target A name or keyword indicating the target page where the result of the script will be
Code:
<html>
<head>
<script type="text/javascript" src="validate.js" ></script>
</head>
<body bolder="5">
<form action="register.jsp" name="StudentRegistration" method=”post”>
<table cellpadding="2" width="50%" border="10" 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="-1" selected>select..</option>
<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="-1" selected>select..</option>
<option value="Nalanda">NALANDA</option>
<option value="UP">UP</option>
<option value="Goa">GOA</option>
<option value="Patna">PATNA</option>
</select></td>
</tr>
<tr>
<td>State</td>
<td><select Name="State">
<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="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>
<td><input type="reset"></td>
<td colspan="2"><input type="submit" value="Submit Form" /></td>
<tr>
</tr>
</tr>
</table>
</form><br><br>
<h1><a href="MainPage.html">Back</a></h1>
</body>
</html>
OUTPUT:
PROGRAM 5
Objective: Write programs using Javascript for Web Page to display browsers
information.
Theory:
The navigator object contains information about the browser.
Navigator Object Properties
Property Description
appName Returns the name of the browser
cookieEnabled Determines whether cookies are enabled in the browser
language Returns the language of the browser
platform Returns for which platform the browser is compiled
userAgent Returns the user-agent header sent by the browser to the server
Code:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Browser Information</title>
<script language=javascript>
function show()
{
document.write("Name "+navigator.appName+"<br>");
document.write("Version "+navigator.appVersion +"<br>");
document.write("Codename " +navigator.appCodeName +"<br>");
document.write("Cookie enable"+navigator.cookieEnabled +"<br>");
document.write("Java Enable"+navigator.javaEnabled +"<br>");
document.write("Mime type"+navigator.mimeTypes +"<br>");
document.write("Platform"+navigator.platform +"<br>");
document.write("Plug ins"+navigator.plugins +"<br>");
document.write("System Language"+navigator.systemLanguage +"<br>");
document.write("User language"+navigator.userAgent +"<br>");
document.write("User Agent"+navigator.userAgent +"<br>");
</script>
</head>
<body>
<form id="form1">
<div>
<input id="Button1" type="button" value="Click me" onclick="show()" />
</div>
</form>
</body>
</html>
OUTPUT :
PROGRAM 6
Objective: Write a Java applet to display the Application Program screen i.e. calculator
and other.
Theory
:Applet is a special type of program that is embedded in the web page to generate dynamic
content. It runs inside the browser and works at the client side.
There are many advantages of applets. They are as
follows a)It works at client side so less response time
b) Secured
c) It can be executed by browsers running under many platforms, including Linux,
Windows, Mac Os etc.
1) Code for Calculator:
import java.awt.*;
import java.awt.event.*;
import java.applet.*;
/*
<applet code="Cal" width=300 height=300>
</applet>
*/
public class Cal extends Applet
implements ActionListener
{
String msg=" ";
int
v1,v2,result;
TextField t1;
Button b[]=new Button[10];
Button add,sub,mul,div,clear,mod,EQ;
char OP;
public void init()
{
Color k=new Color(120,89,90);
setBackground(k);
t1=new TextField(10);
GridLayout gl=new GridLayout(4,5);
setLayout(gl);
for(int i=0;i<10;i++)
{
b[i]=new Button(""+i);
}
add=new Button("add");
sub=new Button("sub");
mul=new Button("mul");
div=new Button("div");
mod=new Button("mod");
clear=new Button("clear");
EQ=new Button("EQ");
t1.addActionListener(this);
add(t1);
for(int i=0;i<10;i++)
{
add(b[i]);
}
add(add);
add(sub);
add(mul);
add(div);
add(mod);
add(clear)
; add(EQ);
for(int i=0;i<10;i++)
{
b[i].addActionListener(this);
}
add.addActionListener(this);
sub.addActionListener(this);
mul.addActionListener(this);
div.addActionListener(this);
mod.addActionListener(this);
clear.addActionListener(this);
EQ.addActionListener(this);
}
public void actionPerformed(ActionEvent ae)
{
String str=ae.getActionCommand();
char ch=str.charAt(0);
if ( Character.isDigit(ch))
t1.setText(t1.getText()+str);
else
if(str.equals("add"))
{
v1=Integer.parseInt(t1.getText());
OP='+';
t1.setText("");
}
else if(str.equals("sub"))
{
v1=Integer.parseInt(t1.getText());
OP='-';
t1.setText("");
}
else if(str.equals("mul"))
{
v1=Integer.parseInt(t1.getText());
OP='*';
t1.setText("");
}
else if(str.equals("div"))
{
v1=Integer.parseInt(t1.getText());
OP='/';
t1.setText("");
}
else if(str.equals("mod"))
{
v1=Integer.parseInt(t1.getText());
OP='%';
t1.setText("");
}
if(str.equals("EQ"))
{
v2=Integer.parseInt(t1.getText());
if(OP=='+')
result=v1+v2;
else if(OP=='-')
result=v1-v2;
else if(OP=='*')
result=v1*v2;
else if(OP=='/')
result=v1/v2;
else if(OP=='%')
result=v1%v2;
t1.setText(""+result);
}
if(str.equals("clear"))
{
t1.setText("");
}
}}
OUTPUT:
PROGRAM 7
Objective: Writing program in XML for creation of DTD, which specifies a set of rules.
Create a style sheet in CSS/ XSL & display the document in internet explorer .
Theory:
XML Document Type Declaration, commonly known as DTD, is a way to describe precisely the
XML language. DTDs check the validity of structure and vocabulary of an XML document
against the grammatical rules of the appropriate XML language.
An XML document can be defined as:
● Well-formed: If the XML document adheres to all the general XML rules such as
tags must be properly nested, opening and closing tags must be balanced, and empty
tags must end with '/>', then it is called as well-formed.
OR
● Valid: An XML document said to be valid when it is not only well-formed, but it also
conforms to available DTD that specifies which tags it uses, what attributes those tags
can contain, and which tags can occur inside other tags, among other properties.
Types:
DTD can be classified on its declaration basis in the XML document, such as:
● Internal DTD
● External DTD
When a DTD is declared within the file it is called Internal DTD and if it is declared in a separate
file it is called External DTD.
We will learn more about these in the chapter DTD Syntax
Syntax
Basic syntax of a DTD is as follows:
In the above syntax
● DTD starts with <!DOCTYPE> delimiter.
● An element tells the parser to parse the document from the specified root element.
● DTD identifier is an identifier for the document type definition, which may be the
path to a file on the system or URL to a file on the internet. If the DTD is pointing to
external path, it is called external subset.
● The square brackets [ ] enclose an optional list of entity declarations called internal
subset.
Internal DTD
A DTD is referred to as an internal DTD if elements are declared within the XML files. To
reference it as an internal DTD, the standalone attribute in XML declaration must be set to yes.
This means the declaration works independent of external source.
Syntax
The syntax of internal DTD is as shown:
where root-element is the name of root element and element-declarations is where you declare the
elements.
Example
Following is a simple example of internal DTD:
<!DOCTYPE address [
<!ELEMENT address (name,company,phone)>
<!ELEMENT name (#PCDATA)>
<!ELEMENT company (#PCDATA)>
<!ELEMENT phone (#PCDATA)>
]>
<address>
<name>Tanmay Patil</name>
<company>TutorialsPoint</company>
<phone>(011) 123-4567</phone>
External DTD
In external DTD elements are declared outside the XML file. They are accessed by specifying
the system attributes which may be either the legal .dtd file or a valid URL. To reference it as an
external DTD, a standalone attribute in the XML declaration must be set as no. This means,
declaration includes information from the external source.
Syntax
Following is the syntax for external DTD:
where file-namen is the file with .dtd extension.
Example
The following example shows external DTD usage:
<!DOCTYPE address SYSTEM "address.dtd">
<address>
<name>Tanmay Patil</name>
<company>TutorialsPoint</company>
<phone>(011) 123-4567</phone>
The content of the DTD file address.dtd are as shown:
<!ELEMENT name (#PCDATA)>
<!ELEMENT company (#PCDATA)>
Code:
1. XML :
<?xml version="1.0" encoding="UTF-8"?>
<catalog>
<cd>
<title>Empire Burlesque</title>
<artist>Bob Dylan</artist>
<country>USA</country>
<company>Columbia</company>
<price>10.90</price>
<year>1985</year>
</cd>
<cd>
<title>Hide your heart</title>
<artist>Bonnie Tyler</artist>
<country>UK</country>
<company>CBS Records</company>
<price>9.90</price>
<year>1988</year>
</cd>
</catalog>
XSL:
<html>
<body>
<h2>My CD Collection</h2>
<table border="1">
<tr bgcolor="#9acd32">
<th style="text-align:left">Title</th>
<th style="text-align:left">Artist</th>
</tr>
<xsl:for-each select="catalog/cd">
<tr>
<td><xsl:value-of select="title"/></td>
<td><xsl:value-of select="artist"/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
Output:
In Internet Explorer
Title Artist
Empire Burlesque Bob Dylan
Hide your heart Bonnie Tyler
2. XML
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE note SYSTEM "Note.dtd">
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
DTD:
<!DOCTYPE note
[
<!ELEMENT note (to,from,heading,body)>
<!ELEMENT to (#PCDATA)>
<!ELEMENT from (#PCDATA)><!ELEMENT heading (#PCDATA)>
<!ELEMENT body (#PCDATA)>
]>
OUTPUT:
PROGRAM 8
Objective: Using ASP for server side programming, ASP for user name and password and to
retrieve and match the value.It displays success and failure messages.ASP for creating text
file local drive, ASP for keeping the student record in database.
Theory:
Class loading and instantiation
If you consider a servlet to be just like any other Java program, except that it runs within a
servlet container, there has to be a process of loading the class and making it ready for requests.
Servlets do not have the exact equivalent of a main method that causes them to start execution.
When a web container starts it searches for the deployment descriptor (WEB.XML) for each of
its web applications. When it finds a servlet in the descriptor it will create an instance of the
servlet class. At this point the class is considered to be loaded (but not initialized).
The init method
The HttpServlet class inherits the init method from GenericServlet. The init method performs a
role slightly similar to a constructor in an “ordinary” Java program in that it allows initialization
of an instance at start up. It is called automatically by the servlet container and as it causes the
application context (WEB.XML) to be parsed and any initialization will be performed. It comes
in two versions, one with a zero parameter constructor and one that takes a ServletConfig
parameter.
The servlet engine creates a request object and a response object. The servlet engine invokes the
servlet service() method, passing the request and response objects. Once the init method returns
the servlet is said to be placed into service. The process of using init to initialize servlets means
that it is possible to change configuration details by modifying the deployment descriptor
without having them hard coded in with your Java source and needing a re-compilation.
void init(ServletConfig sc)
Calling the service method
The service() method gets information about the request from the request object, processes the
request, and uses methods of the response object to create the client response. The service
method can invoke other methods to process the request, such as doGet(), doPost(), or methods
you write. The service method is called for each request processed and is not normally
overridden by the programmer.
The code that makes a servlet “go” is the. servlet
void service(ServletRequest req,ServletResponse
res)
Two typical reasons for the destroy method being called are if the container is shutting down or
if the container is low on resources. This can happen when the container keeps a pool of
instances of servlets to ensure adequate performance. If no requests have come in for a particular
servlet for a while it may destroy it to ensure resources are available for the servlets that are
being requested. The destroy method is called only once, before a servlet is unloaded and thus
you cannot be certain when and if it is called.
void destroy()
ServletConfig Class
ServletConfig object is used by the Servlet Container to pass information to the Servlet
during it's initialization. Servlet can obtain information regarding initialization parameters and
their values using different methods of ServletConfig class initialization parameters are
name/value pairs used to provide basic information to the Servlet during it's initialization like
JDBC driver name, path to database, username, password etc.
Methods of ServletConfig class
Following are the four methods of this class :
1. getInitParameter(String paramName) Returns value of the given parameter. If value
of parameter could not be found in web.xml file then a null value is returned.
2. GetInitParameterNames() Returns an Enumeration object containing all the names
of initialization parameters provided for this Servlet.
3. GetServletContext() Returns reference to the ServletContext object for this
Servlet. It is similar to getServletContext() method provided by
HttpServlet class.
4. GetServletName() Returns name of the Servlet as provided in the web.xml file or if none
is provided then returns complete class path to the Servlet.
CODE:
cologin.html:
<html>
<head>
<title> login Page </title>
<p style= "background:yellow; top:100px; left:250px; position:absolute; ">
</head>
<body>
<form ACTION="clogin">
<label> Login </label>
<input type="text" name="usr" size="20"> <br> <br>
<label> Password </label>
<input type="password" name="pwd" size="20"> <br> <br>
<input type="submit" value="submit">
</form>
</body>
</html>
cologin1.html
<html>
<head>
<title> login Page </title>
<p style= "background:yellow; top:100px; left:250px; position:absolute; ">
</head>
<body>
<form ACTION="clogin1">
<label> Login </label>
<input type="text" name="usr" size="20"> <br> <br>
<label> Password </label>
<input type="password" name="pwd" size="20"> <br> <br>
<input type="submit" value="submit">
</form>
</body>
</html>
Addcook.java:
import javax.servlet.* ;
import javax.servlet.http.*;
import java.io.*;
public class Addcook extends HttpServlet
{
String user,pas;
public void service(HttpServletRequest req,HttpServletResponse res) throws
ServletException,IOException
{
res.setContentType("text/html");
PrintWriter out=res.getWriter();
Cookie c1=new Cookie("usr1","suni");
Cookie p1=new Cookie("pwd1","ani");
Cookie c2=new Cookie("usr2","abc");
Cookie p2=new Cookie("pwd2","123");
Cookie c3=new Cookie("usr3","def");
Cookie p3=new Cookie("pwd3","456");
Cookie c4=new Cookie("usr4","mno");
Cookie p4=new Cookie("pwd4","789");
res.addCookie(c1);
res.addCookie(p1)
;
res.addCookie(c2);
res.addCookie(p2)
;
res.addCookie(c3);
res.addCookie(p3)
;
res.addCookie(c4);
res.addCookie(p4);
out.println("COOKIE
ADDED");
}
}
Clogin.java:
import javax.servlet.* ;
import javax.servlet.http.*;
import java.io.*;
public class Clogin extends HttpServlet
{
String user,pas;
public void service(HttpServletRequest req,HttpServletResponse res) throws
ServletException,IOException
{
res.setContentType("text/html")
; PrintWriter
out=res.getWriter();
user=req.getParameter("usr");
pas=req.getParameter("pwd");
Cookie[] c=req.getCookies();
for(int i=0;i<c.length;i++)
{
if((c[i].getName().equals("usr1")&&c[i+1].getName().equals("pwd1"))||
c[i].getName().equals("usr2")
&&c[i+1].getName().equals("pwd2"))||(c[i].getName().equals("usr3")&&
c[i+1].getName().equals("pwd3"))||(c[i].getName().equals("usr4")&&
c[i+1].getName().equals("pwd4") ))
{
{
if((user.equals(c[i].getValue()) && pas.equals(c[i+1].getValue())) )
{
//RequestDispatcher rd=req.getRequestDispatcher("/cart.html");
rd.forward(req,res);
}
else
{
out.println("YOU ARE NOT AUTHORISED USER ");
//res.sendRedirect("/cookdemo/cologin.html");
}
}
Web.xml:
<web-app>
<servlet>
<servlet-name>him</servlet-name>
<servlet-class>Clogin</servlet-class>
</servlet>
<servlet>
<servlet-name>him1</servlet-name>
<servlet-class>Addcook</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>him</servlet-name>
<url-pattern>/clogin</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>him1</servlet-name>
<url-pattern>/clogin1</url-pattern>
</servlet-mapping>
</web-app>
OUTPUT:
2. Read the user id and passwords entered in the Login form (week1) and authenticate with
the values (user id and passwords) available in the cookies.
home.html:
<html>
<head>
<title>Authentication</title>
</head>
<body>
<form action="ex1">
<label>Username </label>
<input type="text"size="20" name="user"><br><br>
password<input type="text" size="20" name="pwd"><br><br>
<input type="submit" value="submit">
</form>
</body>
</html>
Example1.java
import javax.servlet.*;
import java.io.*;
public class Example1 extends GenericServlet
{
private String user1,pwd1,user2,pwd2,user3,pwd3,user4,pwd4,user5,pwd5;
public void init(ServletConfig sc)
{
user1=sc.getInitParameter("username1");
pwd1=sc.getInitParameter("password1");
user2=sc.getInitParameter("username2");
pwd2=sc.getInitParameter("password2");
user3=sc.getInitParameter("username3");
pwd3=sc.getInitParameter("password3");
user4=sc.getInitParameter("username4");
pwd4=sc.getInitParameter("password4");
}
Public void service(ServletRequest req,ServletResponse res)throws
ServletException,IOException
{
res.setContentType("text/html");
PrintWriter out=res.getWriter();
user5=req.getParameter("user");
pwd5=req.getParameter("pwd");
if((user5.equals(user1)&&pwd5.equals(pwd1))||(user5.equals(user2)&&pwd5.equals(pwd2))|
|(user5.equals(user3)&&pwd5.equals(pwd3))||(user5.equals(user4)&&pwd5.equals(pwd4)))
out.println("<p> welcome to"+user5.toUpperCase());
else
out.println("You are not authorized user");
}
}
web.xml:
<web-app>
<servlet>
<servlet-name>Example</servlet-name>
<servlet-class>Example1</servlet-class>
<init-param>
<param-name>username1</param-name>
<param-value>pvpsit</param-value>
</init-param>
<init-param>
<param-name>password1</param-name>
<param-value>cse</param-value>
</init-param>
<init-param>
<param-name>username2</param-name>
<param-value>1234</param-value>
</init-param>
<init-param>
<param-name>password2</param-name>
<param-value>4567</param-value>
</init-param>
<init-param>
<param-name>username3</param-name>
<param-value>cse</param-value>
</init-param>
<init-param>
<param-name>password3</param-name>
<param-value>pvpsit</param-value>
</init-param>
<init-param>
<param-name>username4</param-name>
<param-value>wt</param-value>
</init-param>
<init-param>
<param-name>password4</param-name>
<param-value>lab</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>Example</servlet-name>
<url-pattern>/ex1</url-pattern>
</servlet-mapping>
</web-app>
OUTPUT:
