ajwt lab manual for 3-2 students of it & cse
Post on 03-Jun-2018
218 Views
Preview:
TRANSCRIPT
-
8/12/2019 AJWT LAB MANUAL FOR 3-2 students of IT & CSE
1/58
Week-1:
AIM:Design the following static web pages required for an online book store web site.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 will be given below).Left frame :At least four links for navigation, which will display the catalogue of respective links.
For e.g.: When you click the link CSE the catalogue for CSE Books should be displayed inthe Right frame.Right frame:The pages to the links in the left frame must be loaded here. Initially this page
Contains description of the web site.
SOURCE CODE:
Online.html:WEBSITE
-
8/12/2019 AJWT LAB MANUAL FOR 3-2 students of IT & CSE
2/58
Top frame:Logo.htmlLOGO
Home.htmlHOMEhome
Login.htmlloginlogin
Reg.htmlwebsitereg1
Cata.html
catalogue
Cart.htmlcart
-
8/12/2019 AJWT LAB MANUAL FOR 3-2 students of IT & CSE
3/58
Left frame:Branches.htmlBranches
CSE
ECE
EEE
CIVILRight frame:Cse.htmlCSE
CSE Departiment
Books in CSE areJava
HtmlEce.htmlECEECE Departiment
Books in ECE areMicroprosessor
EdcEee.html
EEEEEE Departiment
Books in EEE areBEE
Power system1Civil.html
CIVIL
-
8/12/2019 AJWT LAB MANUAL FOR 3-2 students of IT & CSE
4/58
CIVIL Departiment
Books in CIVIL areMachinetools
Tools and systemsName.htmlname
-
8/12/2019 AJWT LAB MANUAL FOR 3-2 students of IT & CSE
5/58
Ece
Eee
-
8/12/2019 AJWT LAB MANUAL FOR 3-2 students of IT & CSE
6/58
Civil
-
8/12/2019 AJWT LAB MANUAL FOR 3-2 students of IT & CSE
7/58
2) LOGIN PAGE:This page looks like below:
Source code:Login1.htmlwebsiteLogin:
Password:Output:
-
8/12/2019 AJWT LAB MANUAL FOR 3-2 students of IT & CSE
8/58
3) CATOLOGUE PAGE:The catalogue page should contain the details of all the books available in the web site in atable.The details should contain the following:
1. Snap shot of Cover Page.2. Author Name.3. Publisher.4. Price.5. Add to cart button.
Source code:Catalogue2.html
imagedetailscostadd to cartBook:XML
Author:Winston
Publications:wiely$50Book:Ai
Author:S.russel
Publication:princetionhall$63Book:Java2
Author:Watson
Publication:BPB -
8/12/2019 AJWT LAB MANUAL FOR 3-2 students of IT & CSE
9/58
$35.5Book:HTML
Author:Sampeter
Publication:sampublication$50Week-2:
4) CART PAGE:The cart page contains the details about the books which are added to the cart.The cart page should look like this:
5) REGISTRATION PAGE:Create a registration form with the following fields1) 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 boxesEnglish, Telugu, Hindi, Tamil)8) Address (text area)
Source code:Cart1.html
-
8/12/2019 AJWT LAB MANUAL FOR 3-2 students of IT & CSE
10/58
BOOK NamePriceQuantityAmountJava$35.52$70html$40.51$40.5TOTAL AMOUNT-$110
Reg.htmlwebsitereg1Registration.html
RegformREGISTRATION FORMNAME
PASSWORD
Email id
Phone number
Sex: female male
Date of Birth: Day123MonthjanfebYear198719881989Languages:EnglishTeluguHindiTamil
Address: -
8/12/2019 AJWT LAB MANUAL FOR 3-2 students of IT & CSE
11/58
Output:Registration
RESULT:The registration page and cart page successfully created.
-
8/12/2019 AJWT LAB MANUAL FOR 3-2 students of IT & CSE
12/58
Week:3
AIM:
VALIDATION:
Write Javascript to validate the following fields of the above Registration pageName:(Name should contain alphabets and the length should not be less than 6 characters)Password:(password should not be less than 6 characters length)Emailid:(should not contain any invalid and must follow the standard pattern name@domail.com)Phone Number:(phone number should contain 10 digits only)
NOTE:You can also validate the login page with these parametersUse PHP to connect with the database to store the above details
Source code:
REGISTRATIONPAGE:
Function validate(){Var method=document.forms[0].method;Var action=document.forms[0].action;Var name=document.forms[0].elements[0].value;Var pass=document.forms[0].elements[1].value;Var email=document.forms[0].elements[2].value;Var phone=document.forms[0].elements[3].value;Var country=document.forms[0].elements[4].value;Var gender=document.forms[0].elements[5].value;Var letter=/^[A-Za-z]+$/;Var letters=/^[0-9A-Za-z]+$/;Var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;Var numbers = /^[0-9]+$/;If(name.length!=0){If((name.length>=6)&&(name.length=6)&&(pass.length
-
8/12/2019 AJWT LAB MANUAL FOR 3-2 students of IT & CSE
13/58
{If(pass.match(letters)){If(email.length!=0){
If(email.match(mailformat)){ if(phone.length!=0){ if(phone.match(numbers)){If(document.forms[0].country.value!="-1"){If(!Document.getelementsbyname("sex")[0].checked &&!Document.getelementsbyname("sex")[1].checked){Window.alert("select gender");}Else
{Window.alert("regestration sucessful");}}
Else{Window.alert("enetr ur country");}}Else{window.alert("Enter phone number in digits");}}Else{window.alert("Enter phone number");}}Else{ window.alert("Enter email in correct order");}}
Else{window.alert("Enter email");}}Else{window.alert("Enter Password having characters and numbers");}}Else{window.alert("Enter Password having 6 to 12 characters");}
}Else
-
8/12/2019 AJWT LAB MANUAL FOR 3-2 students of IT & CSE
14/58
{ window.alert("Enter Password");}}Else{ window.alert("Enter Name having characters only");
}}Else{ window.alert("Enter Name having 6 to 12 characters");}}Else{ window.alert("Enter Name");}}
REGESTRATION FORM
NAME:
PASSWORD:
EMAIL ID:
PHONENO:
COUNTRY:Select Countryindiausaukengland
GENDERMaleFemale
STATE:andrapradeshuttarpradeshDelhiKarnatakatamilnadu
-
8/12/2019 AJWT LAB MANUAL FOR 3-2 students of IT & CSE
15/58
LOGIN PAGE:Function validate()
{Var letter=/^[A-Za-z]+$/;Var method=document.forms[0].method;Var action=document.forms[0].action;Var id=document.forms[0].elements[0].value;Var pwd=document.forms[0].elements[1].value;If(id!=0){If(id.match(letter)){If(pwd!=0)
{Window.alert("login succesful");}Else{Window.alert("enter password");}}Else{Window.alert("name must be char only");}}Else{window.alert("enter name"):}}
LOGIN PAGEName:
Password: -
8/12/2019 AJWT LAB MANUAL FOR 3-2 students of IT & CSE
16/58
OUTPUT:
REGISTRATIONPAGE:
-
8/12/2019 AJWT LAB MANUAL FOR 3-2 students of IT & CSE
17/58
Login page:
-
8/12/2019 AJWT LAB MANUAL FOR 3-2 students of IT & CSE
18/58
WEEK:4
AIM:
Design a web page using CSS (Cascading Style Sheets) which includes the following:1) Use different font, styles:In the style definition you define how each selector should work (font, color etc.).Then, in the body of your pages, you refer to these selectors to activate the styles.
SOURCE CODE:font.htmlcss
h1{color:green;font-family:segoe script;font-size:20px;font-weight:15px;text-decoration:line-through;text-transform:uppercase;text-align:center;
}This is simple style sheet
-
8/12/2019 AJWT LAB MANUAL FOR 3-2 students of IT & CSE
19/58
Output:
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:
Source code:Image.html
css
body{
background-image:url("hari.jpg");background-repeat:no-repeat;background-position:50%;}
-
8/12/2019 AJWT LAB MANUAL FOR 3-2 students of IT & CSE
20/58
Output:
Result:Hence the background image for both the page and single element of the page is successfullycreated.
3) Control the repetition of the image with the background-repeat property.As background-repeat: repeatTiles the image until the entire page is filled, just like an ordinary background image in plainHTML
Source code:
Repeat.html:
css
body{
background-image:url("hari.jpg");background-repeat:repeat;}
-
8/12/2019 AJWT LAB MANUAL FOR 3-2 students of IT & CSE
21/58
Output:
4) Define styles for links as
A:linkA:visitedA:activeA:hover
SOURCE CODE:a.ex1:hover,a.ex1:active {color:red;}
a.ex2:hover,a.ex2:active {font-size:150%;}a.ex3:hover,a.ex3:active {background:red;}a.ex4:hover,a.ex4:active {font-family:monospace;}a.ex5:visited,a.ex5:link {text-decoration:none;}a.ex5:hover,a.ex5:active {text-decoration:underline;}
QIS COLLEGE
IT
CSE
MECH
ECE
-
8/12/2019 AJWT LAB MANUAL FOR 3-2 students of IT & CSE
22/58
CIVIL
OUTPUT:
5) Work with layers:
SOURCE CODE:Layers.htmlcsslayer1layer2layer3layer4
-
8/12/2019 AJWT LAB MANUAL FOR 3-2 students of IT & CSE
23/58
Output:
Result: The web page working with layers using cascading style sheets was designedsuccessfully.
6) Add a customized cursor:Selector {cursor:value}SOURCE CODE:Cursur1.html:css
.c1{cursor:default};
.c2{cursor:crosshair};
.c3{cursor:move};
.c4{cursor:havid};
.c5{cursor:text};
.c6{cursor:wait};
.c7{cursor:help};
.c8{cursor:n-resize};
.c9{cursor:s-resize};
.c10{cursor:e-resize};
.c11{cursor:w-resize};
.c12{cursor:progress};
.c13{cursor:notallowed};
-
8/12/2019 AJWT LAB MANUAL FOR 3-2 students of IT & CSE
24/58
.c14{cursor:no-drop};
.c15{cursor:all-scroll};
default
crosshair
move
havid
text
wait
help
n-resize
s-resize
e-resize
w-resizeprogress
notallowed
no-drop
all-scroll
OUTPUT: -
8/12/2019 AJWT LAB MANUAL FOR 3-2 students of IT & CSE
25/58
Week-5:Write an XML file which will display the Book information which includes the following:1) Title of the book2) Author Name3) ISBN number
4) Publisher name5) Edition6) PriceWrite a Document Type Definition (DTD) to validate the above XML file.Display the XML file as follows.The contents should be displayed in a table. The header of the table should be in colorGREY. And the Author names column should be displayed in one color and should becapitalized and in bold. Use your own colors for remaining columns.Use XML schemas XSL and CSS for the above purpose.
Note: Give at least for 4 books. It should be valid syntactically.Hint: You can use some xml editors like XML-spy
SOURCE CODE:
cBalaguruswamy1234pearson
4$50c++Balaguruswamy123pearson3$55
javaBrett spell12Apress2$45
-
8/12/2019 AJWT LAB MANUAL FOR 3-2 students of IT & CSE
26/58
Output:
Write a Document Type Definition (DTD) to validate the above XML fileXml file:
cBalaguruswamy1234pearson4$50c++Balaguruswamy
123pearson3$55javaBrett spell12Apress2
$45
-
8/12/2019 AJWT LAB MANUAL FOR 3-2 students of IT & CSE
27/58
Dtd file:
Output:
Xml file with schema definition
cBalaguruswamy1234pearson4$50Schema file
-
8/12/2019 AJWT LAB MANUAL FOR 3-2 students of IT & CSE
28/58
Output:
Xml file with XSLXML file:
cBalaguruswamy1234pearson4$50
c++
-
8/12/2019 AJWT LAB MANUAL FOR 3-2 students of IT & CSE
29/58
Balaguruswamy123pearson3$55
javaBrett spell12Apress2$45
XSL file:Book DetailsTitleAuthorIsbnPublisherEditionPrice
-
8/12/2019 AJWT LAB MANUAL FOR 3-2 students of IT & CSE
30/58
Output:
RESULT:The xml file is successfully created.
-
8/12/2019 AJWT LAB MANUAL FOR 3-2 students of IT & CSE
31/58
Week-6:
VISUAL BEANS:Create a simple visual bean with a area filled with a color.The shape of the area depends on the property shape. If it is set to true then the shape of the
area is Square and it is Circle, if it is false. The color of the area should be changeddynamically for every mouse click. The color should also bechanged if we change the color in the property window .
Source code:
SimpleBean.java
import java.awt.*;import java.io.Serializable;
/* serialization is a process of writing the state of an object to a stream or storing the state ofan object permanently, later we can retrieve it*//* an object that implements serializable interface is called serializable object */
public class SimpleBean extends Canvas implements Serializable{
private Color color=Color.green;public Color getColor(){
return color;}
public void setColor(Color newColor)
{color=newColor;repaint();
}public void paint(Graphics g){
g.setColor(color);g.fillRect(20,5,20,30);
}// constructor sets inherited properties
public SimpleBean()
{setSize(60,40);setBackground(Color.red);
}}
-
8/12/2019 AJWT LAB MANUAL FOR 3-2 students of IT & CSE
32/58
SimpleBean.mft:
Name: SimpleBean.classJava-Bean: True
-
8/12/2019 AJWT LAB MANUAL FOR 3-2 students of IT & CSE
33/58
Result : Simple Visual Bean was successfully created.
-
8/12/2019 AJWT LAB MANUAL FOR 3-2 students of IT & CSE
34/58
Week7
Aim: To install the tomcat server on windows platform.
Procedure:
WEEK-7TOMCAT INSTALLATION
AIM:
1) Install TOMCATweb server andAPACHE.While installation assign port number 4040 to TOMCATand 8080 toAPACHE.Make sure that these ports are available i.e., no other process is using Port.
2)Access the above developed static web pages for books web site .Using theseservers by putting the web pages developed in week-1 and week-2 in the
documents root.
Access the pages by using theurl:http://localhost:4040/rama/books.html(for
tomcat)
http://localhost:8080/books.html(for apache)
Procedure:
http://localhost:4040/rama/books.htmlhttp://localhost:4040/rama/books.htmlhttp://localhost:4040/rama/books.htmlhttp://localhost:4040/rama/books.html -
8/12/2019 AJWT LAB MANUAL FOR 3-2 students of IT & CSE
35/58
-
8/12/2019 AJWT LAB MANUAL FOR 3-2 students of IT & CSE
36/58
-
8/12/2019 AJWT LAB MANUAL FOR 3-2 students of IT & CSE
37/58
-
8/12/2019 AJWT LAB MANUAL FOR 3-2 students of IT & CSE
38/58
Result: Tomcat 5.0 server is installed successfully on window platform.
-
8/12/2019 AJWT LAB MANUAL FOR 3-2 students of IT & CSE
39/58
2) Access the above developed static web pages for books web site, using these servers byputting the web pages developed in week-1 and week-2 in the document root. Access thepages by using the urls : http://localhost:4040/rama/books.html (for tomcat)http://localhost:8080/books.html (for Apache)
RESULT:
The week1 and week2 page are accessed using tomcat server is successfully completed.
-
8/12/2019 AJWT LAB MANUAL FOR 3-2 students of IT & CSE
40/58
Week-8:User Authentication :Assume four users user1,user2,user3 and user4 having the passwords pwd1,pwd2,pwd3 and pwd4respectively. Write a servelet for doing the following.
1. Create a Cookie and add these four user ids and passwords to this Cookie.
2. Read the user id and passwords entered in the Login form (week1) and authenticate with thevalues (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 arenot an authenticated user .Use init-parameters to do this. Store the user-names and passwords inthe webinf.xml and access them in the servlet by using the getInitParameters() method.
COLOGIN.HTML: login Page
Login
Password
COLOGIN1.HTML:
login Page Login
Password
COK.JAVAimport javax.servlet.* ;import javax.servlet.http.*;import java.io.*;
public class Cok extends HttpServlet{
-
8/12/2019 AJWT LAB MANUAL FOR 3-2 students of IT & CSE
41/58
String user,pas;public void service(HttpServletRequest req,HttpServletResponse res)throwsServletException,IOException{res.setContentType("text/html");
PrintWriter out=res.getWriter();Cookie c1=new Cookie("usr1","suni");Cookie p1=new Cookie("pwd1","ani");Cookie c2=new Cookie("usr2","abc");Cookie p2=new Cookie("pwd2","123");Cookie c3=new Cookie("usr3","def");Cookie p3=new Cookie("pwd3","456");Cookie c4=new Cookie("usr4","mno");Cookie p4=new Cookie("pwd4","789");res.addCookie(c1);res.addCookie(p1);
res.addCookie(c2);res.addCookie(p2);res.addCookie(c3);res.addCookie(p3);res.addCookie(c4);res.addCookie(p4);out.println("COOKIE ADDED");}}
CLOGIN.JAVA
import javax.servlet.*;import javax.servlet.http.*;import java.io.*;import java.lang.*;
public class Clogin extends HttpServlet{String user,pas;public void service(HttpServletRequest req,HttpServletResponse res)throwsServletException,IOException{
res.setContentType("text/html");PrintWriter out=res.getWriter();user=req.getParameter("usr");
pas=req.getParameter("pwd");Cookie[] c=req.getCookies();for(int i=0;i
-
8/12/2019 AJWT LAB MANUAL FOR 3-2 students of IT & CSE
42/58
{RequestDispatcher rd=req.getRequestDispatcher("/cart.html");rd.forward(req,res);}else
{out.println("YOU ARE NOT AUTHORISED USER ");
}}}}}
Output:
-
8/12/2019 AJWT LAB MANUAL FOR 3-2 students of IT & CSE
43/58
-
8/12/2019 AJWT LAB MANUAL FOR 3-2 students of IT & CSE
44/58
-
8/12/2019 AJWT LAB MANUAL FOR 3-2 students of IT & CSE
45/58
2)Read the user id and passwords entered in the Login form (week1) and authenticatewiththe 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 shoulddisplay 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.
Source code:Home.html:AuthenticationUsername
password
Example.javaimport javax.servlet.*;
import java.io.*;public class Example1 extends GenericServlet{
public String user1,pwd1,user2,pwd2,user3,pwd3,user4,pwd4,user5,pwd5;public void init(ServletConfig sc){user1=sc.getInitParameter("username1");
pwd1=sc.getInitParameter("password1");user2=sc.getInitParameter("username2");
pwd2=sc.getInitParameter("password2");user3=sc.getInitParameter("username3");
pwd3=sc.getInitParameter("password3");user4=sc.getInitParameter("username4");
pwd4=sc.getInitParameter("password4");}
public void service(ServletRequest req,ServletResponse res)throws ServletException, IOException {
res.setContentType("text/html");PrintWriter out=res.getWriter();user5=req.getParameter("user");
pwd5=req.getParameter("pwd");
if((user5.equals(user1)&&pwd5.equals(pwd1))||(user5.equals(user2)&&pwd5.equals(pwd2))||
-
8/12/2019 AJWT LAB MANUAL FOR 3-2 students of IT & CSE
46/58
(user5.equals(user3)&&pwd5.equals(pwd3))||(user5.equals(user4)&&pwd5.equals(pwd4)))out.println("
welcome to"+user5.toUpperCase());elseout.println("You are not authorized user");
}}
web.xml:
ExampleExample1username1pvpsit
password1cseusername21234password24567username3csepassword3pvpsit
username4wtpassword4labExample
/ex1
-
8/12/2019 AJWT LAB MANUAL FOR 3-2 students of IT & CSE
47/58
Output:
RESULT:
Thus the user authentication is carried out for four users by using both cookiesand
getInitParameters successfully
-
8/12/2019 AJWT LAB MANUAL FOR 3-2 students of IT & CSE
48/58
Week-9:
Install a database(Mysql or Oracle).Create a table which should contain at least the following fields: name, password, email-id, phone
number(these should hold the data from the registration form).Practice 'JDBC' connectivity.Write a java program/servlet/JSP to connect to that database and extract data from the tables anddisplay them. Experiment with various SQL queries.Insert the details of the users who register with the web site, whenever a new user clicks the submit
button in the registration page (week2).
SOURCE CODE:Registration.jsp:
Untitled Documentfunction validate(){if(f1.fname.value== ""){alert("UserName Cannot be Empty");f1.fname.focus();return false;}
if(f1.password.value== ""){alert("Password Cannot be Empty");f1.password.focus();return false;}var p=f1.password.value;var i=p.length;if(i>8){alert(" password is not more than 8 characters");f1.password.focus();return false;}var a=f1.email.value;var a1=a.indexOf("@");var dot=a.indexOf(".");if(a1
-
8/12/2019 AJWT LAB MANUAL FOR 3-2 students of IT & CSE
49/58
var pattern2 = /^\d{10}/;if(!pattern2.test(document.f1.mnum.value)){alert("It is not valid mobile number.input 10 digits number!");f1.mnum.focus();
return false;}} NAME
PASSWORDEMAILMobile Number
Registration.jsp:registration details
-
8/12/2019 AJWT LAB MANUAL FOR 3-2 students of IT & CSE
50/58
String mno=request.getParameter("mnum");String vsql="insert into register values(?,?,?,?)";PreparedStatement pst = con.prepareStatement(vsql);
pst.setString(1,vname);pst.setString(2,pname);
pst.setString(3,veml);pst.setString(4,mno);pst.executeUpdate();out.println("inserted successfully");con.close();}catch(Exception e){response.sendError(504,"Err Msg--> "+e);}%>
OUTPUT:
-
8/12/2019 AJWT LAB MANUAL FOR 3-2 students of IT & CSE
51/58
-
8/12/2019 AJWT LAB MANUAL FOR 3-2 students of IT & CSE
52/58
result: The student details are entered in to the database successfully.
-
8/12/2019 AJWT LAB MANUAL FOR 3-2 students of IT & CSE
53/58
Week-10AIM:Write a JSP which does the following jobInsert the details of the 3 or 4 users who register
with the web site (week9) by usingregistration form.Authenticate the user when he submits the login form using the user name and password
from the database (similar to week8 instead of cookies).
SOURCECODE:
Login.html:
QIS INSTUTE OF TECHNOLOGY.
LoginPageUser NamePassword
-
8/12/2019 AJWT LAB MANUAL FOR 3-2 students of IT & CSE
54/58
Auth.jsp: This is simple data base example in JSP
-
8/12/2019 AJWT LAB MANUAL FOR 3-2 students of IT & CSE
55/58
Output:
RESULT:The user is authenticated when he subm its the login form using the username and password from the database
-
8/12/2019 AJWT LAB MANUAL FOR 3-2 students of IT & CSE
56/58
Week-11:Create tables in the database which contain the details of items (books in our case like Book name ,Price, Quantity, Amount )) of each category. Modify your catalogue page (week 2)in such a waythat you should connect to the database and extract data from the tables and display them in thecatalogue page using JDBC.
Cart.jsp:
BookNamePriceQuantity
Amount
-
8/12/2019 AJWT LAB MANUAL FOR 3-2 students of IT & CSE
57/58
-
8/12/2019 AJWT LAB MANUAL FOR 3-2 students of IT & CSE
58/58
Output:
RESULT: Using jsp the data will be successfully added to database and the data will be
top related