ramslaw.files.wordpress.com · web viewexperiment-1: design the following static web pages...

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 well-known 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" >

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


<right>


<tr>



<tr>

<tr>



</tr>

<tr>

<td><h4>Confirm password</td>


</tr>

<tr>

<td><h4>male

<input type="radio" name="sex" id="male"></td>

<td><h4>female

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


<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 ([email protected]) 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>

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


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


</tr>

<tr>

<td>Father name:</td>


</tr>

<tr>

<td>Mother name:</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>


</tr>

<tr>

<td>Languages known:</td>


</tr>

<tr>

<td>Address:</td>

<td><input type="text" name="firstname" size="20">

</td>

</tr>

<tr>

<td>mobile number:</td>


</tr>

<tr>

<td>Email-id:</td>

<td><input type="text" name="firstname" value="[email protected]"></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>



#heading

{


margin:0px auto;

}

</style>


<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><input type="text" name="inter"></td>

<td>Group:</td>


<td>College name:</td>


</tr>

<tr>

<th>B.Tech:</th>



<td>Branch:</td>


<td>College name:</td>


</tr>

<tr>



</tr>

</form>

</table>

</body>

</html>

Output:

8) Semester wise percentage & aggregate page.html:

<html>

<head>

<title>semister</title>

</head>



#heading

{


margin:0px auto;

}

</style>


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


</tr>

<tr>

<th>Second year</th>

<td>2-1 SGPA:</td>


<td>2-2 SGPA</td>


</tr>

<tr>

<td> </td>



</tr>

<tr>

<td> </td>



</tr>

<tr>

<th>Third year</th>

<td>3-1 SGPA:</td>


<td>3-2 SGPA</td>


</tr>

<tr>

<td> </td>



</tr>

<tr>

<td> </td>



</tr>

<tr>

<th>Fourth year</th>

<td>4-1 SGPA:</td>


<td>4-2 SGPA</td>


</tr>

<tr>

<td> </td>



</tr>

<tr>

<td> </td>



</tr>

<tr>

<th>CGPA</th>


</tr>

<tr>



</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;}if(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()"> <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()">

<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 ServerI’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

http://www.wampserver.com/en/

‘you can download it directly’

2. Start Setup WizardYou’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 IconHere, 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 ofJDK on your system program directory. Install it on your system if not already installed (becauseany 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 thelocation 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.6Note: it should not contain the path up to bin folder. Here, we have taken the URL pathaccording to our installation convention.

For Windows OS, go through the following steps:First, right click on theMy Computer->properties->advance->EnvironmentVariables->New->set the Variable name =JAVA_HOME and variable value = C:\ProgramFiles\Java\jdk1.6Now 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 theMy Computer->properties->advance->EnvironmentVariables->path.Now, set bin directory path of JDK in the path variableStep 3:The process of installing Tomcat 6.0 begins here from now. It takes various steps for installingand 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 fileand 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 theTomcat 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 portnumber 8080 is the default port value for tomcat server to proceed the HTTP requests. The usercan also change the 'port number' after completing the process of installation; for this, users haveto follow the following tips.Go to the specified location as " Tomcat 6.0 \conf \server.xml ". Within the server.xml filechoose "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 ofthe JRE folder and click on the Install button. This will install the Apache tomcat at the specifiedlocation.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 toolbarpanel 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 theserver3. 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. MySQL is the most popular Open Source Relational database management system.2. MySQL is one of the best RDBMS being used for developing web based software applications. 3. A fast, reliable, easy-to-use, multi-user multi-threaded relational database system.4. It is freely available and released under GPL (GNU General Public License ).5. MySQL server can handle very large databases.6. Offers rich and very useful set of functions.7. Connectivity, speed and security make MySQL very suited for accessing database on a network.8. 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 enginec. "username" represents the username that has privileges to access the databased. "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 field5. 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.xml5. Next place all the class files under the classes and jar files(servlet-api.jar,classes12.jaretc…) under lib subdirectories.6. After this start tomcat by giving the following command at the instll_dir>tomcat>bin7. Catalina.bat run8. At the I.E(web browser) give the url as http;//localhost:8080//tr/htmlfile or servlet urlpattern

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.

ramslaw.files.wordpress.com · web viewexperiment-1: design the following static web pages...

Documents