JNTUH WEB TECHNOLOGIES Web Technologies Syllabus Programs (JNTU) S.No Programs 1 Develop static pages (using only HTML) of an online Book store. The pages should resemble: www.amazon.com The website should consist the following pages. Home page, Registration and user Login, User profile page, Books catalog, Shopping cart, Payment By credit card, order confirmation. 2 Validate the registration, user login, user profile and payment by credit card pages using JavaScript. 3 Create and save an XML document at the server, which contains 10 users information. Write a program which takes User Id as input and returns the user details by taking the user information from the XML document. 4 Bean Assignments a. Create a JavaBeans which gives the exchange value of INR (Indian Rupees) into equivalent American/Canadian/Australian Dollar value. b. Create a simple Bean with a label which is the count of number of clicks. Then create a Bean info class such that only the count properly is visible in the property Window. c. Create two Beans – a) Keypad b) Display pad. After that integrate the two Beans to make it work as a calculator. d. Create two Beans Traffic Light(implemented as a label with only three background colors-red, green, yellow) and Automobile(Implemented as a Text Box which states its state/movement). The state of the Automobile should depend on the following Light Transition table. 5 Install TOMCAT web server. Convert the static web pages of assignments 2 into dynamic web pages using servlets and cookies. Hint: User’s information (user id, password, credit card number) would be stored in web. Xml. Each user should have a separate shopping cart. 6 Redo the previous task using JSP by converting the static web pages of assignment 2 into dynamic web pages. Create a database with user information and books information. The books catalogue should be dynamically loaded from the database. Follow the MVC architecture while doing the website. 7 Implement the “Hello World” program using JSP Struts Framework. 1
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
JNTUH WEB TECHNOLOGIES
Web Technologies Syllabus Programs (JNTU)
S.No Programs
1 Develop static pages (using only HTML) of an online Book store. The pages should resemble: www.amazon.comThe website should consist the following pages. Home page, Registration and user Login, User profile page, Books catalog, Shopping cart, Payment By credit card, order confirmation.
2 Validate the registration, user login, user profile and payment by credit card pages using JavaScript.
3 Create and save an XML document at the server, which contains 10 users information. Write a program which takes User Id as input and returns the user details by taking the user information from the XML document.
4 Bean Assignmentsa. Create a JavaBeans which gives the exchange value of INR (Indian Rupees)
into equivalent American/Canadian/Australian Dollar value.b. Create a simple Bean with a label which is the count of number of clicks.
Then create a Bean info class such that only the count properly is visible in the property Window.
c. Create two Beans – a) Keypad b) Display pad. After that integrate the two Beans to make it work as a calculator.
d. Create two Beans Traffic Light(implemented as a label with only three background colors-red, green, yellow) and Automobile(Implemented as a Text Box which states its state/movement). The state of the Automobile should depend on the following Light Transition table.
5 Install TOMCAT web server. Convert the static web pages of assignments 2 into dynamic web pages using servlets and cookies. Hint: User’s information (user id, password, credit card number) would be stored in web. Xml. Each user should have a separate shopping cart.
6 Redo the previous task using JSP by converting the static web pages of assignment 2 into dynamic web pages. Create a database with user information and books information. The books catalogue should be dynamically loaded from the database. Follow the MVC architecture while doing the website.
7 Implement the “Hello World” program using JSP Struts Framework.
1.Develop static pages (using only HTML) of an online Book store. The pages should resemble: www.amazon.com The website consists the following pages. Home page, Registration and user Login, User profile page, Books catalog, Shopping cart, Payment By credit card, order confirmation.
HOME PAGE
<!DOCTYPE html><html><body>
<table width=100%><tr><td><img src="amazonlogo.jpg"> </td><td style="background-color:#E55151"> <h1> WELCOME TO AMAZON.COM <h1> </td></tr><tr><td colspan="2" style="background-color:#AFB3F2"> HOMEPAGE </td></tr><tr><td colspan="2" style="background-color:#E8F2AF; text-align:center"> <a href="regamazon.html" style="text-decoration:none"> registration link </a><hr><a href="logamazon.html" style="text-decoration:none"> user login link </a><hr><a href="profamazon.html" style="text-decoration:none" > user profile page </a><hr><a href="bookamazon.html" style="text-decoration:none" > books catalog </a><hr><a href="shopcart.html" style="text-decoration:none"> shopping cart</a><hr><a href="payamazon.html" style="text-decoration:none"> payment by credit card </a><hr><a href="orderamazon.html" style="text-decoration:none"> order confirmation </a>
REGISTRATION <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> <html><head><style> p.reg {color:#990000}</style></head><body><b><font size="4">
<p class="reg"> Sign In <br> What is your e-mail address?</p><table align="center"><tr ><form action=""><td style="text-align:right">My e-mail address is:</td> <td> <input type="text" name="emailid1"></td> </form></tr></table><p class="reg"> Do you have an Amazon.com password?</p><table align="center"><tr ><form action=""><input type="radio" name="ans" value="no">No, I am a new customer<br><input type="radio" name="ans" value="yes">Yes,I have a password:<input type="text" name="password"><br></form></tr><tr> <a href="">Forgot password</a></tr><tr><td><button type="button">Sign in using our secure server</button></td></table></b>
</div><div id="help">
<p>Sign In Help</p><p>Forgot your password? <a href=""> Get password help.</a></p><p> Has your e-mail address changed? <a href="">Update it here.</a></p><hr>
</div><div id="footer" style="text-align:center"><a href="">Conditions of Use</a><a href="">Privacy Notice</a>@ 1996-2013,Amazon.com,Inc. or its affliates</div></DIV></body></html>
6
JNTUH WEB TECHNOLOGIES
PROFILE PAGE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> <html><body><div id="main" style="margin-left:60px;width:800px;height:100%"><table WIDTH=100%> <tr><td width=70%> <img src="amazonlogo.jpg"></td><td width=100%> <button type="button" onclick="window.location.href='Amazon4.html'">HOMEPAGE</BUTTON></td></tr></table><hr><h1>John</h1><div id="index" style="width:100%;height:500px">
Security Access Code:<br><input type="text" placeholder="For buildings or gated communities"><br>Is this address also your billing address(the address that appears on your credit card or bank statement)?<br><input type="radio" name="ans" value="yes">Yes<br><input type="radio" name="ans" value="no">No (If not, we'll ask you for it in a moment )<br><hr></form>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html><body><font size="4">
<div id="main" style="margin-left:60px;width:800px;height:100%"><img src="amazonpic.png"><p><font size="6">Add a Payment Method</font></p><hr><p><font size="5">Credit or Debit Cards</font></p><p>Amazon accepts all major credit and debit cards:</p><div id="imagecredit" style="margin-left:600px;width:200px;height:90px"><img src="creditcard.jpg"></div><p>Add a card</p><p>Enter your card information:</p><form action=""><table><b><tr><td>Name on card<br><input type="text" name="cardname"></td><td>Card number<br><input type="text" name"cardno"></td><td>Expiration Date<br><select name="month">
</select></td><td><button type="button">Add your card</button></td></tr></form></table></b><hr><p><font size="5">Gift Cards & Promotional Codes</font></p><p>Enter a gift card or promotional code</p><form><input type="text" name="code"><button type="button">Apply</button></form><hr><button type="button" ONCLICK="window.location.href='confirm.html'">Cotinue</button></div>
</font></body></html>
15
JNTUH WEB TECHNOLOGIES
ORDER CONFIRMATION
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html><body><font size="4">
<div id="main" style="margin-left:60px;width:800px;height:100%"><img src="amazonconfirm.png"><p><font size="6">Review your order</font></p><p>By placing your order, you agree to Amazon.com's privacy notice and
4. Create and save an XML document which contains 10 users information. Write a program which takes User Id as input and returns the user details by taking the user information from the XML document.
demo.html
<html>
<body>
<script>
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","details.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
var x=xmlDoc.getElementsByTagName("user");
function myfun()
{
var a = document.forms["form1"]["userid"].value;
for (i=0;i<x.length;i++)
{
if (a==x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue)
else g.drawString( "I Can't convert for such country" ,20 ,20 );
}
}
1. Compile the source code for the Bean and generate the Currency_converter1.class in the command prompt :
javac Indian.java
2. Create a manifest file in a text editor.
The manifest file specifies the name of the class file and indicates that it is a JavaBean. The manifest file becomes part of the JAR file. You can name the manifest file manifest.man. It contains the following two lines:
Name: Indian.classJava-Bean: True
(On Windows, be sure to include a carriage return at the end of the text in the manifest file.)
3.. Create the executable JAR file.
45
JNTUH WEB TECHNOLOGIES
Use the form of the jar command to include the manifest file along with the Indian.class file (Type the command on one line):
jar cfm indian.jar manifest.man Indian.class
NetBean 6.1 IDE For Indian JavaBean
Click File | New Project to create a new project, a grouping of related files. Follow the wizard steps below.
1. Choose Project - General | Java Application 2. Name and Location - Uncheck Create Main Class, check Set as Main Project
Click File | New File to create a new file. Follow the wizard steps below. 1. Choose File Type - Java GUI Forms | JApplet Form 2. Class Name - Use Default
Installing Counter JavaBeans - JavaBeans that have been jarr'ed can be downloaded
and added to the Palette . o Tools | Pallette Manager
1. Click Add from JAR 2. Select JAR file - Locate and select indian.jar 3. Select Components - Highlight indian4. Select Palette Category - Highlight Beans
o Beans should now contain Indian class Visual programming - Since applets are visual it is possible to program by dragging
and dropping components from the toolbar. o Click Design tab. o To see the layout manager:
Right click in gray design area | Set Layout | Flow Layout o To add a visual object, right click the gray area:
Add From Palette | Swing | JButton Add From Palette | Beans | Indian
Then the net beans IDE look like this:
46
JNTUH WEB TECHNOLOGIES
47
JNTUH WEB TECHNOLOGIES
Create a simple Bean with a label which is the count of number of clicks.
Counter.java
import java.awt.*;
public class Counter extends Panel {
private long count=0;
private Label label;
private long maxValue=20;
public void setMaxValue(long max) {
maxValue = max;
}
public long getMaxValue() { return maxValue; }
public Counter() {
setBackground(Color.blue);
setForeground(Color.white);
label = new Label(""+count);
add(label);
}
public void increment () {
if (count < maxValue) {
count++;
label.setText(count+" ");
}
else label.setText("!!");
}
}
1. Compile the source code for the Bean and generate the Counter.class in the command prompt :
48
JNTUH WEB TECHNOLOGIES
javac Counter.java
2. Create a manifest file in a text editor.
The manifest file specifies the name of the class file and indicates that it is a JavaBean. The manifest file becomes part of the JAR file. You can name the manifest file manifest.man. It contains the following two lines:
Name: Counter.classJava-Bean: True
(On Windows, be sure to include a carriage return at the end of the text in the manifest file.)
3.. Create the executable JAR file.
Use the form of the jar command to include the manifest file along with the Counter.class file (Type the command on one line):
jar cfm counterEvent.jar manifest.man Counter.class
NetBean 6.1 IDE For Counter JavaBean
Click File | New Project to create a new project, a grouping of related files. Follow the wizard steps below.
1. Choose Project - General | Java Application 2. Name and Location - Uncheck Create Main Class, check Set as Main Project
Click File | New File to create a new file. Follow the wizard steps below. 1. Choose File Type - Java GUI Forms | JApplet Form 2. Class Name - Use Default
Installing Counter JavaBeans - JavaBeans that have been jarr'ed can be downloaded
and added to the Palette . o Tools | Pallette Manager
1. Click Add from JAR 2. Select JAR file - Locate and select counterEvent.jar 3. Select Components - Highlight Counter 4. Select Palette Category - Highlight Beans
o Beans should now contain Counter class Visual programming - Since applets are visual it is possible to program by dragging
and dropping components from the toolbar. o Click Design tab. o To see the layout manager:
Right click in gray design area | Set Layout | Flow Layout o To add a visual object, right click the gray area:
Add From Palette | Swing | JButton
49
JNTUH WEB TECHNOLOGIES
Add From Palette | Beans | Counter
Then the net beans IDE look like this:
Connecting the Button to the Counter Bean
CounterFrame.java
public class CounterFrame extends javax.swing.JFrame {
Create two Beans Traffic Light(implemented as a label with only three background colors-red, green, yellow) and Automobile(Implemented as a Text Box which states its state/movement). The state of the Automobile should depend on the following Light Transition table.
changes.firePropertyChange("seconds", new Integer(i), new Integer(j));
i = j;
} while(true);
}
public void propertyChange(PropertyChangeEvent propertychangeevent)
{
if(color == Color.red)
{
label.setBackground(Color.orange);
color = Color.orange;
} else
if(color == Color.orange)
57
JNTUH WEB TECHNOLOGIES
{
label.setBackground(Color.green);
color = Color.green;
} else
if(color == Color.green)
{
label.setBackground(Color.red);
color = Color.red;
}
}
}
1. Compile the source code for the Bean and generate the Traffic.class and TrafficLight.class in the command prompt :
javac Traffic.javajavac TrafficLight.java
2. Create a manifest file in a text editor.
The manifest file specifies the name of the class file and indicates that it is a JavaBean. The manifest file becomes part of the JAR file. You can name the manifest file manifest1.man and manifest2.man . It contains the following two lines:
manifest1.man
Name: Traffic.classJava-Bean: True
manifest2.man
Name: TrafficLight.classJava-Bean: True
3. Create the executable JAR file.
Use the form of the jar command to include the manifest file along with the Traffic.class and TrafficLight.class file (Type the command on one line):
jar cf Traffic.jar manifest.man Traffic.class
58
JNTUH WEB TECHNOLOGIES
jar cf TrafficLight.jar manifest.man TrafficLight.class
NetBean 6.1 IDE For Light JavaBean
Click File | New Project to create a new project, a grouping of related files. Follow the wizard steps below.
1. Choose Project - General | Java Application 2. Name and Location - Uncheck Create Main Class, check Set as Main Project
Click File | New File to create a new file. Follow the wizard steps below. 1. Choose File Type - Java GUI Forms | JApplet Form 2. Class Name - Use Default
Installing Counter JavaBeans - JavaBeans that have been jarr'ed can be downloaded
and added to the Palette . o Tools | Pallette Manager
1. Click Add from JAR 2. Select JAR file - Locate and select counterEvent.jar 3. Select Components - Highlight TrafficLight 4. Select Palette Category - Highlight Beans
o Beans should now contain TrafficLight class Visual programming - Since applets are visual it is possible to program by dragging
and dropping components from the toolbar. o Click Design tab. o To see the layout manager:
Right click in gray design area | Set Layout | Flow Layout o To add a visual object, right click the gray area:
Add From Palette | Swing | JButton Add From Palette | Beans | TrafficLight
Then the net beans IDE look like this:
59
JNTUH WEB TECHNOLOGIES
To run : Shift+F6
60
JNTUH WEB TECHNOLOGIES
SERVLETS (HELLOSERVLET)
HelloServlet.java
import java.io.*;
import javax.servlet.*;
public class HelloServlet extends GenericServlet
{
public void service(ServletRequest request, ServletResponse response)
Main.html:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><body><br /><br /><br /><br /><br /><h1 align="center"><U>ONLINE BOOK STORAGE</U></h1><br /><br /><br /><h2 align="center"><pre><b>Welcome to online book storage.Press LOGIN if you are having idotherwise press REGISTRATION</b></pre></h2><br /><br /><pre><div align="center"><a href="login.html">LOGIN</a> <a href="reg.html">REGISTRATION</a></div></pre></body></html>
pw.println("</div>");flag=1;}if(flag==0){pw.println("SORRY INVALID ID TRY AGAIN ID<br><br>");pw.println("<a href=\"profile.html\">press HERE to RETRY</a>");}pw.println("</body></html>");}catch(Exception e){resp.sendError(500,e.toString());}}}
Statement stmt=con.createStatement();String sqlstmt="select id,pwd from login";ResultSet rs=stmt.executeQuery(sqlstmt);int flag=0;while(rs.next())
105
JNTUH WEB TECHNOLOGIES
{if(id.equals(rs.getString(1))&&pwd.equals(rs.getString(2))){flag=1;} }if(flag==1){pw.println("SORRY INVALID,ID ALREADY EXITS TRY AGAIN WITH NEW ID<br>");pw.println("<a href=\"reg.html\">press REGISTER to RETRY</a>");}else{ Statement stmt1=con.createStatement();stmt1.executeUpdate("insert into login values(' "+name+"' ,'"+addr+"',' "+id+"',' "+pwd+" ')");pw.println("YOUR DETAILS ARE ENTERED<br><br>");pw.println("<a href=\"login.html\">press LOGIN to login</a>");}pw.println("</body></html>");}catch(Exception e){ resp.sendError(500,e.toString());} }}
catalog.javaimport java.sql.*;import java.io.*;import java.util.*;import javax.servlet.*;import javax.servlet.http.*;public class catalog extends HttpServlet{public void service(HttpServletRequest req,HttpServletResponse resp)throws ServletException,IOException{PrintWriter pw=resp.getWriter();pw.println("<html><body >");String title=req.getParameter("title");try{Class.forName("com.mysql.jdbc.Driver");Connection con=DriverManager.getConnection("jdbc:mysql://localhost:3306/sushma","root","root");Statement stmt=con.createStatement();String sqlstmt="select * from books where title="+title+"";ResultSet rs=stmt.executeQuery(sqlstmt);int flag=0;while(rs.next())
pw.println("COST :"+rs.getString(3)+"<br>");pw.println("</div");flag=1;}if(flag==0){pw.println("SORRY INVALID TITLE TRY AGAIN <br><br>");pw.println("<a href=\"catalog.html\">press HERE to RETRY</a>");}pw.println("</body></html>");}catch(Exception e){resp.sendError(500,e.toString());}}}
Statement stmt=con.createStatement();String sqlstmt="select id,pwd from login";ResultSet rs=stmt.executeQuery(sqlstmt);int flag=0,amount,x;while(rs.next()){if(id.equals(rs.getString(1))&&pwd.equals(rs.getString(2))){flag=1;}}if(flag==0){pw.println("SORRY INVALID ID TRY AGAIN ID<br><br>");pw.println("<a href=\"order.html\">press HERE to RETRY</a>");}else{Statement stmt2=con.createStatement();String s="select cost from book where title="+title+"";ResultSet rs1=stmt2.executeQuery(s);int flag1=0;while(rs1.next()){flag1=1;x=Integer.parseInt(rs1.getString(1)); amount=count*x;pw.println("AMOUNT :"+amount+"<br><br><br><br>");Statement stmt1=con.createStatement();stmt1.executeUpdate("insert into details values('"+id+",'"+title+"','"+amount+"','"+cno+"')");pw.println("YOUR ORDER has taken<br>");}if(flag1==0){pw.println("SORRY INVALID ID TRY AGAIN ID<br><br>");pw.println("<a href=\"order.html\">press HERE to RETRY</a>");}}pw.println("</body></html>");con.close();}catch(Exception e){resp.sendError(500,e.toString());}}}
if(request.getParameter("action")!=null){String Bname1=request.getParameter("Bname");stmt=conn.createStatement();String sqlstmt="select * from Catalog_table where name='"+Bname1+"'";rs=stmt.executeQuery(sqlstmt);