WT Lab Manual - WordPress.com
advertisement
Web Technologies Lab Manual
Experiment-1: Design the following static web pages required for a Training and placement cell
web site.
1) Home Page 2) Login Page 3) Registration page
1) Homepage.html:
<html>
<body>
<h2>Placement</h2>
<h4 color="orange">Overview</h4>
<p>GMRIT’s Training, Placement and Development Cell plays a critical role in networking
graduating students with the industry. It prepares the students for the process of recruitment and
simultaneously create awareness among companies about the recruitment opportunities at
GMRIT. Potential recruiters are given structural support for scheduling interviews, hosting
seminars, group discussions and written tests</p>
<br>
<ul>
<h4 >Training of students</h4>
<p>
<li>A special corporate training program is conducted for final year students in resume building,
group discussions, general knowledge, current affairs, etc</li>
<li>Mock interviews are conducted by inviting HR Heads and Technical Experts from wellknown companies.</li>
<li>For expose to real-world work culture, short industrial tours to neighboring companies and
extended visits to distant industries / organizations of national and international repute are
conducted each year.</li>
<li>Regular training classes are conducted, on campus, at the Digital English Language Lab to
improve the communication skills of students. With a focus on Campus Recruitment, special
training classes are conducted in association with professional training institutes and specialists
in personality development, etiquette, grooming etc.</li>
<li>On campus training for competitive exams like GRE, GATE, CAT, etc is also offered.
In order to bridge the gap between the university curriculum and industry needs, the college
offers various short-term training programs. These programs include CAD / CAM, J2JEE, VLSI
& Embedded systems.
</li>
<li>Seminars and workshops are conducted on entrepreneurship development</li>
<h4 >placement Services</h4>
<li>Internships and summer placements are ensured.</li>
<li>Towards the end of the final year, an Ad campaign is launched in leading newspapers and
journals to attract prospective recruiters. Recruitment advertisements are also collected, after
thoroughly checking eligibility conditions. For the convenience of students, recruitment
application forms are supplied for free of cost</li>
</ul>
</p>
</body>
</html>
Output:
2) LoginPage.html:
<html>
<head>
<title>
login page</title>
</head>
<body bgcolor="pink"><center>
<strong><h1> Training and Placement </h1></strong></center>
<center><h2> Login </h2></center>
<center>
<table align="middle">
<tr>
<td><h4>User name</td>
<td><input type="text" ></td>
<td></td>
</tr>
<tr>
<td><h4>Password</td>
<td><input type="password"></td>
<td></td>
</tr>
<tr>
<td>
<form method="post" action="catalog.html" >
<input type="submit" value="submit" >
</form>
</td>
<td>
<form method="post" action="userpro.html" >
<input type="submit" value="register" >
&nbsp;&nbsp;
<input type="reset" value="reset"></form></td>
</tr>
</table>
</center>
</body>
</html>
Output:
3) Registrationpage.html:
<html>
<head>
<title>
login page</title>
</head>
<body bgcolor="pink">
<center>
<center><strong><h1> Training and Placement Cell </h1></strong></center>
<form method="post" action="catalog.html" >
<right>
<table align="middle">
<tr>
<td><h4>User name</td>
<td><input type="text" ></td>
<tr>
<tr>
<td><h4>Password</td>
<td><input type="password"></td>
</tr>
<tr>
<td><h4>Confirm password</td>
<td><input type="password"></td>
</tr>
<tr>
<td><h4>male &nbsp;&nbsp;
<input type="radio" name="sex" id="male"></td>
<td><h4>female &nbsp; &nbsp;
<input type="radio" name="sex" id="female" ></td>
</tr>
<tr>
<td>Address</td>
<td><textarea name="address" rows=5 cols=19>
</textarea>
</td>
<tr>
<td>
<input type="submit" value="submit" ></td>
<td>
<input type="reset" value="reset"></td>
</tr>
</form>
</center>
</body>
</html>
Output:
Experiment-2: 4) Company Details Page 5) Alumni Details Page 6) Placement Staff Details
Page
4) Company Details page:
<html>
<head>
<title>TCS</title>
</head>
<body bgcolor="aqua">
<center>
<h1><b>TATA Consultancy Services</b></h1>
<p>Experienced certainty</p></center>
<p>
<h2>TCS recognised as a TOP 100 brand in the US by Brand Finance <br>
<u>Read more</u></p></h2>
<p>
<H2><u>HBR Report:</u></h2>
<p><h2> How smart connected products are transforming compeition</p></h2>
<p><h3><u>ABOUT US:</u></h3></p>
<p><h2>
TCS is a global leader in IT Services digital and business soloution that
partnerss with its cilents to simpfily strengthen and transform their business<br>
<u>read more</u> </h2>
<H2>Careers WorldWide </h2>
<pre><h2>
Asia
Europe
Austraila
NewZealand
<u>Read more</u></h2>
</pre>
Output:
5) Alumni detailspage.html:
<html>
<body bgcolor="pink">
<h2>GMRIT Alumni detais</h2>
<h4 color="orange">Overview</h4>
<p>Welcome to Alumni Association website of GMRIT(www.gmrit.org).
The GMRIT-ALUMNI Association endeavours to involve alumni with the Insitute, while also providing
current students access to a network of well-employed graduates. Members are encouraged to inform
GMRIT's Training & Placement Cell (tpo@gmrit.org) about potential job opportunities in their
organisations. They are also welcome to visit the Institute to deliver special lectures in their respective
fields. This interaction helps students bridge the gap between industry experience and academic
learning</p>
<br>
<center><h2> Login </h2></center>
<center>
<table align="middle">
<tr>
<td><h4>User name</td>
<td><input type="text" ></td>
<td></td>
</tr>
<tr>
<td><h4>Password</td>
<td><input type="password"></td>
<td></td>
</tr>
<tr>
<td>
<form method="post" action="catalog.html" >
<input type="submit" value="submit" >
</form>
</td>
<td>
<form method="post" action="userpro.html" >
<input type="submit" value="register" >
&nbsp;&nbsp;
<input type="reset" value="reset"></form></td>
</tr>
</table>
</body>
</html>
Experimen-3: 7) Student personal Info Page 8) Student Academic Info page 9) Semester Wise
Percentage & their Aggregate page
7) Student personal Info Page:
<html>
<head>
<title>student personal</title>
</head>
<body bgcolor="pink">
<style type="text/css">
#heading
{
border:2px solid blue;
margin:0px auto;
}
</style>
<div id="heading" align="center">
<h1>STUDENT
PERSONAL INFORMATION</h1>
</div>
<table align="center">
<tr></tr>
<tr></tr>
<tr></tr>
<form>
<tr>
<td>First name:</td>
<td><input type="text" name="firstname"></td>
</tr>
<tr></tr>
<tr>
<td>Last name:</td>
<td><input type="text" name="firstname"></td>
</tr>
<tr>
<td>Father name:</td>
<td><input type="text" name="firstname"></td>
</tr>
<tr>
<td>Mother name:</td>
<td><input type="text" name="firstname"></td>
</tr>
<tr>
<td>Gender:</td>
<td><input type="radio" name="gender">Male</td>
<td><input type="radio" name="gender">Female</td>
</tr>
<tr>
<td>D.O.B:</td>
<td><input type="date" id="DATE" name="date" value="TODAY"></td>
</tr>
<tr>
<td>Category:</td>
<td><select>
<option value="cat">choose</option>
<option value="cat">OC</option>
<option value="cat">BC</option>
<option value="cat">SC</option>
<option value="cat">ST</option>
</td>
</tr>
<tr>
<td>Religion:</td>
<td><select>
<option value="cat">choose</option>
<option value="rel">Hindu</option>
<option value="rel">Christian</option>
<option value="rel">Muslim</option>
<option value="rel">Other</option></td>
</tr>
<tr>
<td>Hobbies:</td>
<td><input type="text" name="firstname"></td>
</tr>
<tr>
<td>Languages known:</td>
<td><input type="text" name="firstname"></td>
</tr>
<tr>
<td>Address:</td>
<td><input type="text" name="firstname" size="20">
</td>
</tr>
<tr>
<td>mobile number:</td>
<td><input type="text" name="firstname"></td>
</tr>
<tr>
<td>Email-id:</td>
<td><input type="text" name="firstname" value="someone@gmail.com"></td>
</tr>
<tr>
<td><input type="button" name="submit" value="submit"></td>
<td><input type="button" name="cancel" value="cancel"></td>
</tr>
</form>
</table>
</body>
</html>
Output:
8) Student Academic Page.html:
<html>
<head>
<title>student acadamical</title>
</head>
<body bgcolor="pink">
<style type="text/css">
#heading
{
border:2px solid blue;
margin:0px auto;
}
</style>
<div id="heading" align="center">
<h1>STUDENT ACADAMIC INFORMATION</h1>
</div>
<table align="center">
<tr></tr>
<tr></tr>
<tr></tr>
<form>
<tr>
<th>10th:</th>
<td>percentage:</td>
<td><input type="text" name="10th"></td>
<td>School name:</td>
<td><input type="text" name="10th"></td>
</tr>
<tr>
<th>SELECT<select>
<option value="sel">Inter</option>
<option value="sel">Polytechnic</option>
</th>
<td>percentage:</td>
<td><input type="text" name="inter"></td>
<td>Group:</td>
<td><input type="text" name="inter"></td>
<td>College name:</td>
<td><input type="text" name="inter"></td>
</tr>
<tr>
<th>B.Tech:</th>
<td>percentage:</td>
<td><input type="text" name="inter"></td>
<td>Branch:</td>
<td><input type="text" name="inter"></td>
<td>College name:</td>
<td><input type="text" name="inter"></td>
</tr>
<tr>
<td><input type="button" name="submit" value="submit"></td>
<td><input type="button" name="cancel" value="cancel"></td>
</tr>
</form>
</table>
</body>
</html>
Output:
8) Semester wise percentage & aggregate page.html:
<html>
<head>
<title>semister</title>
</head>
<body bgcolor="pink">
<style type="text/css">
#heading
{
border:2px solid blue;
margin:0px auto;
}
</style>
<div id="heading" align="center">
<h1>SEMISTER WISE AGGREGATE</h1>
</div>
<table align="center" height="30">
<tr></tr>
<tr></tr>
<tr></tr>
<form>
<tr>
<th>First year</th>
<td>1-1 SGPA:</td>
<td><input type="text" name="firstyaer"></td>
<td>1-2 SGPA</td>
<td><input type="text" name="firstyear"></td>
</tr>
<tr>
<td>
</td>
<td>Backlogs <input type="radio" name="bl">yes</td>
<td><input type="radio" name="bl">No</td>
</tr>
<tr>
<td>
</td>
<td>No.of backlogs</td>
<td><input type="text" name="firstname"></td>
</tr>
<tr>
<th>Second year</th>
<td>2-1 SGPA:</td>
<td><input type="text" name="firstname"></td>
<td>2-2 SGPA</td>
<td><input type="text" name="firstname"></td>
</tr>
<tr>
<td>
</td>
<td>Backlogs <input type="radio" name="bl">yes</td>
<td><input type="radio" name="bl">No</td>
</tr>
<tr>
<td>
</td>
<td>No.of backlogs</td>
<td><input type="text" name="firstname"></td>
</tr>
<tr>
<th>Third year</th>
<td>3-1 SGPA:</td>
<td><input type="text" name="firstname"></td>
<td>3-2 SGPA</td>
<td><input type="text" name="firstname"></td>
</tr>
<tr>
<td>
</td>
<td>Backlogs <input type="radio" name="bl">yes</td>
<td><input type="radio" name="bl">No</td>
</tr>
<tr>
<td>
</td>
<td>No.of backlogs</td>
<td><input type="text" name="firstname"></td>
</tr>
<tr>
<th>Fourth year</th>
<td>4-1 SGPA:</td>
<td><input type="text" name="firstname"></td>
<td>4-2 SGPA</td>
<td><input type="text" name="firstname"></td>
</tr>
<tr>
<td>
</td>
<td>Backlogs <input type="radio" name="bl">yes</td>
<td><input type="radio" name="bl">No</td>
</tr>
<tr>
<td>
</td>
<td>No.of backlogs</td>
<td><input type="text" name="firstname"></td>
</tr>
<tr>
<th>CGPA</th>
<td><input type="text" name="firstname"></td>
</tr>
<tr>
<td><input type="button" name="submit" value="submit"></td>
<td><input type="button" name="cancel" value="cancel"></td>
</tr>
</form>
</table>
</body>
</html>
Output:
Experiment-4: Validate login page and registration page using regular expressions.
Loginvalidation.html:
<html>
<body bgcolor="pink"><br><br><br>
<script language="javascript">
function validate()
{
var flag=1;
if(document.myform.id.value==""||
document.myform.pwd.value=="")
{ alert("LoginId and Password must be filled")
flag=0;
}i
f(flag==1)
{ alert("VALID INPUT");
window.open("catalog.html","right");
} else
{ alert("INVALID INPUT");
//document.myform.focus();
}}
</script>
<form name="myform">
<div align="center"><pre>
LOGIN ID:<input type="text" name="id"><br>
PASSWORD:<input type="password" name="pwd"><br><br>
</pre>
<input type="button" value="ok" onClick="validate()">&nbsp;&nbsp;&nbsp;&nbsp;
<input type="reset" value="clear" >
</div>
</form>
</body>
</html>
Output:
RegistrationValidation page:
<html>
<body bgcolor="pink"><br><br>
<script type="text/javascript">
function validate()
{
var flag=1;
if(document.myform.name.value==""||
document.myform.addr.value==""||
document.myform.phno.value==""||
document.myform.id.value==""||
document.myform.pwd.value=="")
{
alert("Enter all the details");
flag=0;
}
var str=document.myform.phno.value;
var x=new RegExp("\\d","g");
if(!(str.match(x)))
{
if(!(str.length==10))
flag=0;
}
var str1=document.myform.id.value;
var x1=new RegExp("^[A-Z][a-zA-Z]+$","g");
if(!(str1.match(x1)))
{
flag=0;
alert("Invalid UserID");
}
var str1=document.myform.pwd.value;
var x1=new RegExp("^[A-Z][a-zA-Z]+$","g");
if(!(str1.match(x1)))
{
flag=0;
alert("Invalid password");
}
if(flag==1)
{
alert("VALID INPUT");
window.self.location.href="login.html";
}
else
{
alert("INVALID INPUT");
document.myform.focus();
}}
</script>
<form name="myform">
<div align="center"><pre>
NAME :<input type="text" name="name"><br>
ADDRESS :<input type="type" name="addr"><br>
CONTACT NUMBER:<input type="text" name="phno"><br>
LOGINID :<input type="text" name="id"><br>
PASSWORD :<input type="password" name="pwd"></pre><br><br>
</div>
<br><br>
<div align="center">
<input type="button" value="ok" onClick="validate()">&nbsp;&nbsp;&nbsp;
<input type="reset" value="clear">
</form></body></html>
Experiment-5: Apply different font styles, font families, font colors and other formatting styles
to the above static web pages.
Css.html:
<html>
<html>
<head>
<title>
</title>
<STYLE TYPE="TEXT/CSS">
a:link {color:"orange";} /* unvisited link */
a:visited {color:"red";} /* visited link */
a:hover {color:green;} /* mouse over link */
a:active {color:yellow;} /* selected link */
H1
{
COLOR:rgb(50,100,150);
TEXT-ALIGN:right;
FONT-FAMILY:Times new roman;
}
H6
{
COLOR:green;
TEXT-ALIGN:CENTER;
FONT-FAMILY:Verdana;
}
</STYLE>
</HEAD>
<body>
<p>Mouse over the words to change the cursor.</p>
<span style="cursor:auto">auto</span><br />
<span style="cursor:crosshair">crosshair</span><br />
<span style="cursor:default">default</span><br />
<span style="cursor:e-resize">e-resize</span><br />
<span style="cursor:help">help</span><br />
<span style="cursor:move">move</span><br />
<span style="cursor:n-resize">n-resize</span><br />
<span style="cursor:ne-resize">ne-resize</span><br />
<span style="cursor:nw-resize">nw-resize</span><br />
<span style="cursor:pointer">pointer</span><br />
<span style="cursor:progress">progress</span><br />
<span style="cursor:s-resize">s-resize</span><br />
<span style="cursor:se-resize">se-resize</span><br />
<span style="cursor:sw-resize">sw-resize</span><br />
<span style="cursor:text">text</span><br />
<span style="cursor:w-resize">w-resize</span><br />
<span style="cursor:wait">wait</span><br />
background-image:url("Sunset.jpg" );
background-repeat:no-repeat;
<div style="position:static;Border-style:solid;color:red;top:100px;
right:150px;">CSE
</div><br>
<div style="position:static;Border-style:dashed;color:blue;">IT
</div>
<div align="right">
sdasdadadadasdasd
</div>
<H1>WELCOME TO CSE</H1>
<H6>WELCOME TO INTERNAL CSS</H2>
<H6>WELCOME TO INTERNAL CSS</H2>
</BODY>
</html>
Output:
Experiment-6: Install wamp server and tomcat server, access above developed static web pages
using these servers.
Installation of WAMP Server – step to install
1. Download the WAMP Server
I’ll give you simple steps for ‘Installation of WAMP Server’. We need to
download the WAMP server Package .exe file from official WAMP server page.
Choose file with Config of your system.
after select your file, It’ll ask following Popup. Don’t worry about this. Just click
‘you can download it directly’
2. Start Setup Wizard
You’ll get below Setup Wizard window, When you Run WAMP server .exe file.
It shows config of WAMP. Click ‘Next’ button to continue.
You should agree the license of WampServer before Installation of WAMP
Server.
3. Select Destination and Icon
Here, You should select the Server Location. Most of the server installing into C
drive only. Me too installing into C drive. You can browse any other location and
click ‘Next’.
And choose which icons you want.
4. Installing and Complate
In ‘Ready to Install’ window, just click ‘Install’ button.
Now wait up-to finish the installing.
In following window, just leave Default value and Click ‘Next’.
Now Installation Process is almost done. Tic the Launch and Finish it.
5. Run WAMP Server.
Just double click the Wamp Server icon. You’ll get following small icon
in TaskBar. First it’s color is Red and change to Orange. At-last it goes to Green
color. If green color comes, Your WAMP server running successful.
Now see your WAMP server Home Page with following URL ‘http://localhost/’.
Now Installation of WAMP Server is finished.
Install the TOMCAT web server:
Step 1:
Installation of JDK:
Before beginning the process of installing Tomcat on your system, ensure first the availability of
JDK on your system program directory. Install it on your system if not already installed (because
any version of tomcat requires the Java 1.6 or higher versions) and then set the class path
(environment variable) of JDK. To set the JAVA_HOME Variable: you need to specify the
location of the java run time environment to support the Tomcat else Tomcat server can not run.
This variable contains the path of JDK installation directory.
set JAVA_HOME=C:\Program Files\Java\jdk1.6
Note: it should not contain the path up to bin folder. Here, we have taken the URL path
according to our installation convention.
For Windows OS, go through the following steps:
First, right click on the
My Computer->properties->advance->Environment
Variables->New->set the Variable name =
JAVA_HOME and variable value = C:\Program
Files\Java\jdk1.6
Now click on all the subsequent ok buttons one by one. It will set the JDK path.
Step 2:
For setting the class path variable for JDK, do like this:
First, right click on the
My Computer->properties->advance->Environment
Variables->path.
Now, set bin directory path of JDK in the path variable
Step 3:
The process of installing Tomcat 6.0 begins here from now. It takes various steps for installing
and configuring the Tomcat 6.0.
For Windows OS, Tomcat comes in two forms: .zip file and .exe file (the Windows installer file).
Here we are exploring the installation process by using the .exe file. First unpack the zipped file
and simply execute the '.exe' file.
A Welcome screen shot appears that shows the beginning of installation process. Just click on
the 'Next' button to proceed the installation process.
Steps 4:
A screen of 'License Agreement' displays.
Click on the 'I Agree' button.
Step 5:
A screen shot appears asking for the 'installing location'
Choose the default components and click on the 'Next' button.
Step 6:
A screen shot of 'Configuration Options' displays on the screen. Choose the location for the
Tomcat files as per your convenience. You can also opt the default Location
The port number will be your choice on which you want to run the tomcat server. The port
number 8080 is the default port value for tomcat server to proceed the HTTP requests. The user
can also change the 'port number' after completing the process of installation; for this, users have
to follow the following tips.
Go to the specified location as " Tomcat 6.0 \conf \server.xml ". Within the server.xml file
choose "Connector" tag and change the port number.
Now, click on the 'Next' button to further proceed the installation process.
Step 7:
A Window of Java Virtual Machine displays on the screen
This window asks for the location of the installed Java Virtual Machine. Browse the location of
the JRE folder and click on the Install button. This will install the Apache tomcat at the specified
location.
Step 8:
A processing window of installing displays on the screen.
To get the information about installer click on the "Show details" button
Step 9:
A screen shot of 'Tomcat Completion' displays on the screen.
Click on the 'Finish' button.
Step 10:
A window of Apache Service Manager appears with displaying the running process.
Let the running process goes on.
Step 11:
After completing the installation process, the Apache Tomcat Manager appears on the toolbar
panel like shown in the below picture.
Start the Tomcat Server:
1.Start the tomcat server from the bin folder of Tomcat 6.0 directory by double clicking the
"tomcat6.exe" file.
OR create a shortcut of this .exe file at your desktop.
2. Now Open web browser and type URL http://localhost:8080 in the address bar to test the
server
3. To Stop the Tomcat Server: Stop the server by pressing the "Ctrl + c" keys.
The screen of Apache Tomcat software looks like this:
Experiment7: Write a servlet/PHP to connect to the database, Insert the details of the users who
register with the web site, whenever a new user clicks the submit button in the registration.
INTRODUCTION TO MYSQL…..
1.
2.
3.
4.
5.
6.
7.
8.
MySQL is the most popular Open Source Relational database management system.
MySQL is one of the best RDBMS being used for developing web based software applications.
A fast, reliable, easy-to-use, multi-user multi-threaded relational database system.
It is freely available and released under GPL (GNU General Public License ).
MySQL server can handle very large databases.
Offers rich and very useful set of functions.
Connectivity, speed and security make MySQL very suited for accessing database on a network.
MySQL works on many operating systems and with many languages including PHP, PERL, C, C++,
JAVA etc.
9. MySQL uses a standard form of the well-known SQL data language
Basic Steps to Process DB
1. Connect to host server which has Mysql installed
2. Select a database
3. Form an SQL statement
4. Execute the SQL statement and (optionally) return a record set
5. Extract data from recordset using php
6. Close connection
Connect to host server has Mysql installed
1. Syntax:
$connection = mysql_connect ("host_URL", "username", "password");
2. Connecting to the server using the function mysql_connect() takes three parameters:
a. $connection is a variable that is used as a reference to the connection once it has been made.
b. host_URL is the domain name of the MySQL host. "localhost" can be used if MySQL is installed on
the same server as the PHP engine
c. "username" represents the username that has privileges to access the database
d. "password" is the password for the username
Select a database
1. Syntax:
mysql_select_db("dbname", $connection);
2. Selecting a database using the function mysql_select_db() takes two parameters:
a. "dbname" identifies the name of the database..
b. $connection identifies the connection resource you declared when you established a connection to the
MySQL server
Querying a Table Using PHP
1. Syntax:
$result = mysql_query("SELECT * FROM tablename", $connection);
2. Querying a table is as simple as creating a string representing the select statement and passing it to the
table.
3. The first parameter of the function is the MySQL statement in the form of a string.
4. The second parameter of the function identifies the connection resource
Retrieving the Query Data
1. Unfortunately, the output $result from the previous function doesn’t provide you with anything
beyond a reference to the resource where you can find the results. In other words, this isn't just an
array of returned records.
2. We need to use the function mysql_fetch_array() to access the records returned from the query. This
is done one record at a time.
3. Syntax:
$record = mysql_fetch_array($result [, int result_type])
4. Pulling a record from the result of a query requires at least one parameter:
a. $result is the reference to the query performed by calling the function mysql_query()
b. result_type is an optional field
5. The function mysql_fetch_array() returns either the next record in the returned query or a “false” if
there are no more records.
6. By returning a “false”, a while loop can be used to process until there are no more records.
Closing the Connection
1. A connection should close automatically when the PHP script completes, but as all good
programmers know, you always close anything you open.
2. To close a connection, use the mysql_close() function.
3. Syntax:
boolean = mysql_close($connection);
4. $connection is the connection resource assigned with mysql_connect()
5. The return value is true on success, false on failure.
Experiment8: Write a JSP/PHP to connect to the database, Insert the details of the student
academic information with student academic info page.
Same procedure for above program.
These are screen shots:
Experiment 9: Experiment9: User Authentication:
Assume four users user1user2, user3 and user4 having the passwords pwd1, pwd2, pwd3 and
pwd4 respectively. Write a servlet for doing the following.
1. 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 (week1) and authenticate with the
values (user id and passwords) available in the cookies.
If he is a valid user (i.e., user-name and password match) you should welcome him by name
(user-name) else you should display “You are not an authenticated user “.
Use init-parameters to do this. Store the user-names and passwords in the webinf.xml and access
them in the servlet by using the getInitParameters() method.
PROCEDURE:
We assumed there are four valid users like user1,user2,user3 and user4 having passwords pwd1, pwd2,
pwd3 and pwd4 respectively.
On the login page we must provide proper username and password. For instance: for user1 the password
must be pwd1 and so on.
1. First install the tomcat into the system.
2. Then make a subdirectly(eg., tr) in the \tomcat\webapps.
3. Under tr create WEB-INF directory and also place the html files in this tr directory only.
4. Next under WEB-INF create two subclasses lib,classes and web.xml
5. Next place all the class files under the classes and jar files(servlet-api.jar,classes12.jar
etc…) under lib subdirectories.
6. After this start tomcat by giving the following command at the instll_dir>tomcat>bin
7. Catalina.bat run
8. At the I.E(web browser) give the url as http;//localhost:8080//tr/htmlfile or servlet url
pattern
10. Portno 8080 is assigned for the tomcat.
Experiment 10: Write a JSP which does the following job: Authenticate the user when he submits the
login form using the user name and password from the database.
Step 1: Design code for Login Page
<html>
<head>
<title>userloginpage</title>
<SCRIPT LANGUAGE="javascript"> function usermeth()
{
var user=document.Login_Page.usr.value;
var pass=document.Login_Page.pswd.value;
if(user.length==0) { alert("Please Enter the username");
document.Login_Page.usr.focus(); return false;
}
if(pass.length==0){ alert("Please Enter the password");
document.Login_Page.pswd.focus(); return false;
} return true;
}
</script></head><body>
<form name="Login_Page" method="Post" action="loginjsp.jsp"
onsubmit="javascript: return usermeth()">
<center><font color='green' size=4>Login your Authentication:</font><br><br>
Enter UserName<input type="text" name="usr">
<br>
Enter PassWord<input type="password" name="pswd"><br>
<input type="submit" value="`````Submit`````">
</center>
</form>
</body>
</html>
Step 2: Design code for Access values from DB
<%@ page import="java.sql.*" %>
<html>
<head>
<title>LoginJSP</title>
</head>
<body>
<form>
<%
String username=request.getParameter("usr");
String password=request.getParameter("pswd");
String sql="select * from logintb";
Connection con;
ResultSet rs;
try
{
Class.forName("com.mysql.jdbc.Driver");
}
catch(ClassNotFoundException e)
{
System.out.println("Class Error");
}
try
{
con=DriverManager.getConnection("jdbc:mysql://localhost:3306/vijikumar","root","sun");
Statement st = con.createStatement();
rs=st.executeQuery(sql);
while(rs.next())
{
String us=rs.getString(1);
String ps=rs.getString(2);
if(us.equals(username)&&ps.equals(password))
{
%>
<jsp:forward page="logsuc.html"/>;
<%
}
else
{ %>
<jsp:forward page="logfail.html"/>;
<% }
}
}
catch(SQLException e)
{
System.out.println(e.getMessage());
}
%>
</form>
</body>
</html>
Step 3: Design code for If the output of success page
<head>
<title>LoginSucess</title>
</head>
<body>
<h2><Font color="green">LoginSuccessfully</Font></h2>
</body>
</html>
Step 4: Design code for If the output of failurepage
<html>
<head>
<title>LoginFailed</title>
</head>
<body>
<h2><Font color="red">LoginFailed</Font></h2>
</body>
</html>
Output Screens:
Login page:
Experiment-11: write a JSP to insert the student’s semester wise percentages and calculate aggregate and
insert into database.
Procedure:
Step 1: Create a user html form which collects all semester’s students percentage.
Step 2: Write a JSP file that opens the database and connects the student table with the following scheme.
Initially create a table using:
Create table student_marks(name varchar2(20), rollno varchar(20), s1 double(7,2), s2 double(7,2), s3
double(7,2), s4 double(7,2), s5 double(7,2), s6 double(7,2), s7 double(7,2), s8 double(7,2), agg
double(7,2));
Establish a database connection by using following code:
Class.forName("oracle.jdbc.driver.OracleDriver");
con=DriverManager.getConnection("jdbc:oracle:thin:@localhost:1521:xe","system","summer3");
Statement st=con.createStatement();
Step 3: Once the user press calculate button , it has to display the aggregate value in the aggregate text
box, and insert all the semester marks along with the aggregate marks onto student database.
Step 4: Display all the students semester wise marks and their aggregate in a Table format, when the user
press display button.
Output Screens:
Experiment-12: write a JSP to search the students according to their aggregate and produce sorted list or
according to their Enroll number
Procedure:
Step 1: Create table
Create table student_marks(name varchar2(20), rollno varchar(20), s1 double(7,2), s2 double(7,2), s3
double(7,2), s4 double(7,2), s5 double(7,2), s6 double(7,2), s7 double(7,2), s8 double(7,2), agg
double(7,2));
Step 2: create two jsp files and one servlet class given below :
1.
searchstudentform.jsp: JSP collects aggregate as the input and display all the students having the aggregate
more than or equal to the given aggregate.
2.
searchstudent.jsp: JSP file collects the student rollno from the textbox provided in the search.html,
establish the connectivity with the database and retrieve the student information from the student table
when the student rollno is matched.
Step 3: Create a GUI for search option
Search.html: Create a file for collecting the student roll no from the user. Once the user press search
button it should display the student semester wise percentage and their aggreage.
