Date post: | 04-Apr-2018 |
Category: |
Documents |
Upload: | amit-shubham |
View: | 216 times |
Download: | 0 times |
of 51
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
7/30/2019 Final Wt Lab Program Ss
2/51
2. LOGIN PAGE: This page looks like below:
Logo
Web Site Name
Home Login Registration Catalogue Cart
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
7/30/2019 Final Wt Lab Program Ss
3/51
LogoWeb Site Name
Home Login Registration Catalogue Cart
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
7/30/2019 Final Wt Lab Program Ss
4/51
atri.html
Home Page
top.html
logo
AURORA SHOPPING CARTHOMELOGINREGISTRATIONCATALOGCART
4
7/30/2019 Final Wt Lab Program Ss
5/51
left.html
Links
CSE ECE EEE MECH
right.html
Links
This is information about the site
5
7/30/2019 Final Wt Lab Program Ss
6/51
Output Screen:
6
7/30/2019 Final Wt Lab Program Ss
7/51
LOGIN PAGE
login.html
LOGIN
USERNAME:
PASSWORD:
7
7/30/2019 Final Wt Lab Program Ss
8/51
Output Screen:
8
7/30/2019 Final Wt Lab Program Ss
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
7/30/2019 Final Wt Lab Program Ss
10/51
$60
10
7/30/2019 Final Wt Lab Program Ss
11/51
Output Screen:
11
7/30/2019 Final Wt Lab Program Ss
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
7/30/2019 Final Wt Lab Program Ss
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
7/30/2019 Final Wt Lab Program Ss
14/51
Output Screen:
14
7/30/2019 Final Wt Lab Program Ss
15/51
REGISTRATION PAGE
registration.html
Registration REGISTRATION
USERNAME :
PASSWORD:
E-mail id:
Phone Number:
sexmale
15
7/30/2019 Final Wt Lab Program Ss
16/51
female
Date of Birth: Date
12
Month12
Year19882008
Languages
Telugu
Hindi
EnglishTamil
Address
16
7/30/2019 Final Wt Lab Program Ss
17/51
Output Screens:
17
7/30/2019 Final Wt Lab Program Ss
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]7/30/2019 Final Wt Lab Program Ss
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
7/30/2019 Final Wt Lab Program Ss
20/51
Phone Number:
20
7/30/2019 Final Wt Lab Program Ss
21/51
Output Screen:
21
7/30/2019 Final Wt Lab Program Ss
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
7/30/2019 Final Wt Lab Program Ss
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
7/30/2019 Final Wt Lab Program Ss
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
7/30/2019 Final Wt Lab Program Ss
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
7/30/2019 Final Wt Lab Program Ss
26/51
Output Screens:
6. Work with layers
WORKING WITH LAYERSLAYER 1 LAYER 2
Output Screens:
26
7/30/2019 Final Wt Lab Program Ss
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
7/30/2019 Final Wt Lab Program Ss
28/51
USERNAME:PASSWORD:
web.xml
shyamsunder
shysun
pshyampsunder
a
Validation
a/valid
Validation.java
28
7/30/2019 Final Wt Lab Program Ss
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
7/30/2019 Final Wt Lab Program Ss
30/51
Week-6:
30
7/30/2019 Final Wt Lab Program Ss
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(for7/30/2019 Final Wt Lab Program Ss
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/login7/30/2019 Final Wt Lab Program Ss
33/51
register.html
LOGIN
USERNAME:
AGE:
ADDRESS:
web.xml
a
Register
a/register
b
View
b
33
7/30/2019 Final Wt Lab Program Ss
34/51
7/30/2019 Final Wt Lab Program Ss
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
7/30/2019 Final Wt Lab Program Ss
36/51
36
7/30/2019 Final Wt Lab Program Ss
37/51
37
7/30/2019 Final Wt Lab Program Ss
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
7/30/2019 Final Wt Lab Program Ss
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
7/30/2019 Final Wt Lab Program Ss
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
7/30/2019 Final Wt Lab Program Ss
41/51
Output Screens:
41
7/30/2019 Final Wt Lab Program Ss
42/51
42
7/30/2019 Final Wt Lab Program Ss
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
7/30/2019 Final Wt Lab Program Ss
44/51
Output Screens:
44
7/30/2019 Final Wt Lab Program Ss
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
7/30/2019 Final Wt Lab Program Ss
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
7/30/2019 Final Wt Lab Program Ss
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
7/30/2019 Final Wt Lab Program Ss
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
7/30/2019 Final Wt Lab Program Ss
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
7/30/2019 Final Wt Lab Program Ss
50/51
Output Screens:
50
7/30/2019 Final Wt Lab Program Ss
51/51