Final Wt Lab Program Ss

7/30/2019 Final Wt Lab Program Ss

1/51

Week-1: HTML

AIM: Design the following static web pages required for an online book store web

site.

1) HOME PAGE:2) LOGIN PAGE3) CATALOGE PAGE

DESCRIPTION:

1. HOME PAGE

The static home page must contain three frames.

Top frame : Logo and the college name and links to Home page, Login page,Registration page, Catalogue page and Cart page (the description of these pages willbe given below).

Left frame : At least four links for navigation, which will display the catalogue ofrespective links. For e.g.: When you click the link CSE the catalogue for CSEBooks should be displayed in the Right frame.

Right frame: Thepages to the links in the left frame must be loaded here. Initially thispage contains description of the web site.

LogoWeb Site Name

Home Login Registration Catalogue Cart

CSEECEEEECIVIL

Description of the Web Site

1


2/51

2. LOGIN PAGE: This page looks like below:

Logo

Web Site Name


CSEECEEEECIVIL

Login :Password:

3) CATOLOGUE PAGE:

The catalogue page should contain the details of all the books available in the web sitein a table. The details should contain the following:

1. Snap shot of Cover Page.2. Author Name.3. Publisher.

4. Price.5. Add to cart button.

2

Submit Reset


3/51

LogoWeb Site Name


CSE

ECE

EEE

CIVIL

Book : XML BibleAuthor : WinstonPublication : Wiely

$ 40.5

Book : AIAuthor : S.RusselPublication :Princeton hall

$ 63

Book : Java 2Author : WatsonPublication : BPBpublications

$ 35.5

Book : HTML in 24hoursAuthor : Sam PeterPublication : Sampublication

$ 50

Note: Week 2 contains the remaining pages and their description.

3


4/51

atri.html

Home Page

top.html

logo

AURORA SHOPPING CARTHOMELOGINREGISTRATIONCATALOGCART

4


5/51

left.html

Links

CSE ECE EEE MECH

right.html

Links

This is information about the site

5


6/51

Output Screen:

6


7/51

LOGIN PAGE

login.html

LOGIN

USERNAME:

PASSWORD:

7


8/51

Output Screen:

8


9/51

CATALOGUE PAGE

catalog.html

Catalog

Book:Java Server Pages

Author:winston

publisher:ORIELLY
$40

Book:Sun Certified JavaProgramming

Author:B-russel
publisher:Princeton

$50

Book:Java2

Author:Schildth
publisher:Tata McGrawHill

$60

Book:Web Programming

Author:cHRIS BATES
publisher:Tata McGrawHill

9


10/51

$60

10


11/51

Output Screen:

11


12/51

Week-2: HTML

AIM: To design web page

4) CART PAGE:

5) REGISTARTION PAGE

DESCRIPTION:The cart page contains the details about the books which are addedto the cart. The cart page should look like this:

LogoWeb Site Name

Home Lo

gin

Registration Catalogue Cart

CSEECEEEECIVIL

Book name Price Quantity Amount

Java 2 $35.5 2 $70XML bible $40.5 1 $40.5

Total amount - $130.5

5) REGISTRATION PAGE:

Create a registration form with the following fields

1) Name (Text field)2) Password (password field)3) E-mail id (text field)4) Phone number (text field)5) Sex (radio button)6) Date of birth (3 select boxes)

7) Languages known (check boxes English, Telugu, Hindi, Tamil)8) Address (text area)

12


13/51

CART PAGE:

cart.html

cart

Book Name Price

Quantity Amount

Java 2 $35.5 2 $71

Oracle $55.5 3 $120 Operating System $25.5 2 $51

13


14/51

Output Screen:

14


15/51

REGISTRATION PAGE

registration.html

Registration REGISTRATION

USERNAME :

PASSWORD:

E-mail id:

Phone Number:

sexmale

15


16/51

female

Date of Birth: Date

12

Month12

Year19882008

Languages

Telugu

Hindi

EnglishTamil

Address

16


17/51

Output Screens:

17


18/51

WEEK 3: VALIDATION

AIM:To do validation for registration page using JavaScript.

DESCRIPTION: WriteJavaScriptto validate the following fields of the aboveregistration page.

1. Name (Name should contains alphabets and the length should not be lessthan 6 characters).

2. Password (Password should not be less than 6 characters length).3. E-mail id (should not contain any invalid and must follow the standard

pattern([email protected])

4. Phone number (Phone number should contain 10 digits only).

Note: You can also validate the login page with these parameters.

validation.html

Registration

function validate(){var c1=new RegExp("^[\\w]{6,}$");var c2=new RegExp("^[\\w]{6,}$");var c3=new RegExp("^[\\w]+@[\\w]+.com$");var c4=new RegExp("^[\\d]{10}$");var name=document.f.user.value;var pwd=document.f.pwd.value;var email=document.f.email.value;var phone=document.f.phone.value;var error="";

if(!name.match(c1)){error+="should be min of 6 char\n"}

18
mailto:[email protected]:[email protected]


19/51

if(!pwd.match(c2)){

error+="should be min of 6 char\n"}

if(!email.match(c3)){error+="should be of format [email protected]\n"}

if(!phone.match(c4)){error+="should be of 10 digits"

}

window.alert(error);}

REGISTRATION FORM

UserName :

Password:

E-mail id:

19


20/51

Phone Number:

20


21/51

Output Screen:

21


22/51

Week-4: CSS

AIM:

Write a program illustrating various methods in cascading style sheets.1) Use different font, styles2) Set a background image3) Control the repetition of the image4) Define styles for links5) Work with layers6) Add a customized cursor

DESCRIPTION: Design a web page using CSS (Cascading Style Sheets) whichincludes the following:

1) Use different font, styles: In the style definition you define how eachselector should work (font, color etc.).Then, in the body of your pages, yourefer to these selectors to activate the styles.

2) Set a background image for both the page and single elements on the page.You can define the background image for the page like this:

3) Control the repetition of the image with the background-repeat property.As background-repeat: repeat

4) Define styles for links as5) Work with layers:6) Add a customized cursor:

Selector {cursor:value}

.xlink {cursor:crosshair}

.hlink{cursor:help}

22


23/51

1. Font syles

styles

b.headline {color:red;font-size:22pt;font-family:arial;text-decoration:none} this is normal bold
this is headline style bold

Output Screen:

23


24/51

2. Background image

0

Output Screens:

3.Control repeat

body{background-image:url(winter.jpg);background-repeat:no-repeat;} this is the body of the page where the image is repeated

Output Screen:

24


25/51

5. Different types of links

a:link {text-decoration:underline;color=red}a:active{ text-decoration;OVERLINE;COLOR:green}

a:visited{ text-decoration;COLOR:yellow}a:hover{ text-decoration:overline; color=green} these are links

LINK1

LINK2

LINK3

LINK4

25


26/51

Output Screens:

6. Work with layers

WORKING WITH LAYERSLAYER 1 LAYER 2

Output Screens:

26


27/51

Week-5: User Authentication:

Assume four users user1,user2,user3 and user4 having the passwordspwd1,pwd2,pwd3 and pwd4 respectively. Write a servelet for doing the following.

If he is a valid user(i.e., user-name and password match) you should welcome him byname(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 web.xml andaccess them in the servlet by using the getInitParameters() method.

login.html

LOGIN

27


28/51

USERNAME:PASSWORD:

web.xml

shyamsunder

shysun

pshyampsunder

a

Validation

a/valid

Validation.java

28


29/51

import java.io.*;import javax.servlet.*;import javax.servlet.http.*;

public class Validation extends HttpServlet {public void doPost(HttpServletRequest request,HttpServletResponse response)throws ServletException, IOException {response.setContentType("text/html");PrintWriter out = response.getWriter();// Get parameter from HTTP request.String user = request.getParameter("user");String pwd = request.getParameter("pwd");ServletConfig config =getServletConfig();if(((String)config.getInitParameter(user))!=null)

{String pass=(String)config.getInitParameter(user);if(pass.equals(pwd))out.println("Welcome to "+user+"");elseout.println("Not a valid User");}elseout.println("Not a valid User");}}

Output Screens:

29


30/51

Week-6:

30


31/51

Install Tomcat web server and APACHE. While installation assign port number 4040to TOMCAT and 8080 to APACHE. Make sure that these ports are available i.e., noother process is using this port.

Access the above developed static web pages for books web site, using these serversby putting the web pages developed in week-1 and week-2 in the document root.Access the pages by suing the urls

http://localhost:4040/rama/books.html(for tomcat) http://localhost:8080/books.html(forApache)

Installation of Tomcat Server and Apache Server

Tomcat is a Pure Java Web Server with support for the Servlet and JSP Specification.In order to use it you must first install a Java Runtime Environment. JSP requires a

Java Compiler included in the SDK, but not in the JRE. So one have to install SDKinstead of JRE.

Before you install and Run TOMCAT, make sure that the JAVA-HOME Environmentvariable is set to the installation directory of your Java Environment and that the Javabin is included in the PATH Environment variable.

To set JAVA-HOME

Right click on the My Computer icon on your Desktop and select properties.

Click the Advanced tab

Click the Environment variable Button

Click new

Enter JAVA-HOME as the variable name and the directory where you installedJava.

Tomcat server is an Open-Server Job based Web Application contains creator to RunServlet and Java server page Web application.For installing TOMCAT on windows, select Jakarta Tomcat-5.5.zip from thedriver(where we save it) for instance in a directory namedC:\>Jakarta

Use the command prompt window where you set the JAVA-HOME and Pathenvironment variable earlier change to the directories in which we downloaded.C:\>cd jakartaC:\>Jakarta>jarIt creates a director structure.

31
http://localhost:8080/books.html(forhttp://localhost:8080/books.html(for


32/51

We should set the Catalina-home environment variable to point to the Tomcat-installation directory.To start the server in a separate window, change to bin directoryand run the startup.bat file.Just leaves this window open; this is where the server

process is running.Testing

The tomcat installation directory contains a number of sub directories.

BIN- it contains windows batch files for starting and stopping the server.

Conf-Tomcat Configuration files.

Web-apps-Default location web application served by Tomcat.

Logs-Server log file, if something doesnt work as excepted, look in this filedirectory for clues as to whats wrong.

Work-a directory for tempory files created by the JSP contain and other files.

To test the server run the start up script and open a browser and enter URL inthe Address field.http://localhost:8080/......

The Tomcat main page is shown in the browser and we can run now as servletsand JSP examples bond led with TOMCAT to ensure everything works.

To execute application.

User application folder---WEB-INF, classes, web.xml

Classes---.java,. class.

To execute a simple application for ex.login page.

Click on startup batch file to start server

Create an application folder ex.servletone

Create subfolder for classes.

In class folder write a java file.

Compile the java files,it gives.class file.

Create an xml file place web.xml in WEB-INF.

Keep our application folder in web page.

Open internet explorer.

Typehttp://localhost:8080/,we get TOMCAT home page.

Select Tomcat manager enter user and password. Check our context path is present /not.

Append the Url name specified in .xml file to the browser

http://localhost:8080/servletone/login

32
http://localhost:8080/http://localhost:8080/,wehttp://localhost:8080/,wehttp://localhost:8080/servletone/loginhttp://localhost:8080/http://localhost:8080/,wehttp://localhost:8080/servletone/login


33/51

register.html

LOGIN

USERNAME:

AGE:

ADDRESS:

web.xml

a

Register

a/register

b

View

b

33


34/51


35/51

String name=(String)ctxt.getAttribute("name");String age=(String)ctxt.getAttribute("age");String addr=(String)ctxt.getAttribute("addr");

out.println("Name:"+name);out.println("
Age:"+age);out.println("
Addr:"+addr);}}

Output Screens:

35


36/51

36


37/51

37


38/51

Week-7:

Write a servlet program illustrating Cookies.

Addcookie.html

Enter a value for MyCookie:

web.xml

addAddCookieServlet

add/addcookieservlet

get

GetCookiesServlet

get/getcookiesservlet

38


39/51

AddCookieServlet.java

import java.io.*;import javax.servlet.*;import javax.servlet.http.*;

public class AddCookieServlet extends HttpServlet {public void doPost(HttpServletRequest request,HttpServletResponse response)throws ServletException, IOException {// Get parameter from HTTP request.

String data = request.getParameter("data");// Create cookie.Cookie cookie = new Cookie("MyCookie", data);// Add cookie to HTTP response.response.addCookie(cookie);// Write output to browser.response.setContentType("text/html");PrintWriter pw = response.getWriter();pw.println("MyCookie has been set to");pw.println(data);pw.println("
Show my Cookie Data");

pw.close();}}

GetCookieServlet.java

import java.io.*;import javax.servlet.*;import javax.servlet.http.*;public class GetCookiesServlet extends HttpServlet {

public void doGet(HttpServletRequest request,HttpServletResponse response)throws ServletException, IOException {// Get cookies from header of HTTP request.

39


40/51

Cookie[] cookies = request.getCookies();// Display these cookies.response.setContentType("text/html");

PrintWriter pw = response.getWriter();pw.println("");for(int i = 0; i < cookies.length; i++) {String name = cookies[i].getName();String value = cookies[i].getValue();pw.println("name = " + name +"; value = " + value);}pw.close();}}

40


41/51

Output Screens:

41


42/51

42


43/51

Week-8:

Write a program illustrating HttpSession interface

web.xml

dateDateServletdate/dateservlet

DateServlet.java

import java.io.*;import java.util.*;import javax.servlet.*;import javax.servlet.http.*;public class DateServlet extends HttpServlet {public void doGet(HttpServletRequest request,

HttpServletResponse response)throws ServletException, IOException {HttpSession hs = request.getSession(true);response.setContentType("text/html");PrintWriter pw = response.getWriter();pw.print("");// Display date/time of last access.Date date = (Date)hs.getAttribute("date");if(date != null) { pw.print("Last access: " + date + "
");}// Display current date/time.

date = new Date();hs.setAttribute("date", date);pw.println("Current date: " + date);}}

43


44/51

Output Screens:

44


45/51

Week-9:

AIM:

Install a database(Mysql or Oracle).

Create a table which should contains at least the followingfields:name,password,email-id,phone number(these should hold the data from theregistration form).Practice JDBC connectivity.Write a java program/servlet/JSP to connect to that database and extract data from thetables and display them.Experiment with various SQL queries.Insert the details of the users who register with the web site whenever a new userclicks the submit button in the registration page.

JavaToMySQL.java

import java.sql.*;public class JavaToMySQL {public static void main(String[] args)throws SQLException, ClassNotFoundException {// Load the JDBC driverClass.forName("com.mysql.jdbc.Driver");System.out.println("Driver loaded");// Establish a connectionConnection connection =DriverManager.getConnection("jdbc:MySQL://localhost/shyamp","root","sunder");System.out.println("Database connected");

// Create a statementStatement statement = connection.createStatement();// Execute a statementResultSet resultSet = statement.executeQuery("select * from shy");

// Iterate through the result and print the student nameswhile (resultSet.next())System.out.println(resultSet.getString(1) + "\t" +resultSet.getString(2) + "\t");// Close the connection

connection.close();}}

45


46/51

MySQL

Table Creation:

1.Create tatabase

Mysql>create database shyamp;

2 use database.

Mysql>use atri

3.Create table

Mysql>create table atri(user varchar(20),pwd varchar(20));

4.Insert values into table

Mysql>insert into shy values(nestham,sai);Mysql>insert into shy values(shy,sun);

enter password: ******Welcome to the MySQL monitor. Commands end with ; or \g.Your MySQL connection id is 6Server version: 5.1.23-rc-community MySQL Community Server (GPL)

Type 'help;' or '\h' for help. Type '\c' to clear the buffer.

mysql> create database users;

Query OK, 1 row affected (0.00 sec)

mysql> use users;Database changed

mysql> create table userstable(user varchar(20),pwd varchar(20));Query OK, 0 rows affected (0.11 sec)

mysql> insert into userstable values("shyam","sunder");Query OK, 1 row affected (0.03 sec)

mysql> insert into userstable values("shy","sun");Query OK, 1 row affected (0.03 sec)mysql>

46


47/51

Output:

C:\>javac JavaToMySQL.java

C:\>java JavaToMySQLDriver loadedDatabase connectedshy sunshyam sunder

MySQL

Table Cration:

1.Create tatabase

Mysql>create database shyamp;

Mysql>use shyamp

Mysql>create table shy(user varchar(20),pwd varchar(20));

Mysql>insert into shy values(shyam,sunder);

Mysql>insert into shy values(shy,sun);

47


48/51

Week10:

AIM:

Write a JSP which does the following job:Insert the details of the 3 or 4 users who register with the web site(week9) by usingregistration form. Authenticate the user when the submits the login form using the username and password from the database (similar to week8 instead of cookies).

Validate.java

import java.sql.*;import java.io.*;import javax.servlet.*;import javax.servlet.http.*;

public class Validate extends HttpServlet {public void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException

{response.setContentType("text/html");PrintWriter out = response.getWriter();// Get parameter from HTTP request.

String user = request.getParameter("user");String pwd = request.getParameter("pwd");

// Load the JDBC drivertry{Class.forName("com.mysql.jdbc.Driver");

// Establish a connectionConnection connection =DriverManager.getConnection("jdbc:MySQL://localhost/shyamp","root","sunder");// Create a statementStatement statement = connection.createStatement();

// Execute a statement

ResultSet resultSet = statement.executeQuery("select * from shy");while(resultSet.next())

{if(user.equals(resultSet.getString(1))){

48


49/51

if(pwd.equals(resultSet.getString(2))){out.println("Welcome to "+user);return;}

}}if(!resultSet.next())out.println("Invalid User");

}catch(Exception e){out.println("error"+e);}

}

}

web.xml

get

Validate

get/validate

49


50/51

Output Screens:

50


51/51

Final Wt Lab Program Ss

Documents

Transcript of Final Wt Lab Program Ss