WEB TECHNOLOGIES LAB MANUAL IV YEAR B.Tech.CSE-1 Semester 2009 Department of Computer Science GRIET Objectives This course introduces the technologies behind today's web-based applications. A student completing this course should have acquired a good understanding of the basic design principles of the web model of computing. Students should have designed and implemented a web application using current software development technologies and methodologies. He should have learned in detail some cutting-edge technologies. The student should have learned how to work in a group with strict delivery deadlines. The student should have learned how to prepare reading material, bibliography search, and make presentations to a class. Course structure The course will be mostly driven by active student participation. Students are expected to research specific technologies and present them in the class. An important part of the course are programming assignments. There will be regular programming assignments that help students understand and implement the concepts taught in the class. How to use /read this manual This manual is divided into sections with different problems. Each section corresponds to different programs in the lab, the different lab sessions and programs will be available in the manual. Each session contains theory that you will need for proper understanding during the lab sessions. Get clear idea of different concepts that you will have to manage while executing the lab tasks. CONTENTS 1. LAB SYLLABUS 2. INTRODUCTION 3. PROGRAMS DESCRIPTION 4. PROGRAMS EXPLANATION WITH Definition Code 5. ASSIGNMENT 6. REFERENCES 7. CONTENT BEYOND SYLLABUS. JAWAHARLAL NEHRU TECHNOLOGICAL UNIVERSITY HYDERABAD IV B.Tech (I-SEM) T P 0 3 WEB TECHNOLOGIES LAB C 2 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 Conformation 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 an input and returns the user details by taking the user information from the XML document. 4. Create a JavaBean which gives the exchange value of INR (Indian Rupees) into equivalent American/Canadian/Australian Dollar value. 5. Create a simple Bean with a label - which is the count of number of clicks. Then create a BeanInfo class such that only the “count” property is visible in the Property Window. 6. Create two Beans Traffic Light(Implemented as a Label with only three Background colours-Red,Green,Yellow) and Automobile(Implemented as a TextBox which states its state/movement). The state of the Automobile should depend on the following Light Transition Table. Light Transition Red ---> Yellow Yellow ---> Green Green --> Red Automobile State Ready Move Stopped 7. Convert the static web pages online library into dynamic web pages using servlets and cookies. EXPERIMENT-1 Develop static pages (using only HTML) of an online Book store. The page should resemble www.amazon.com.The website should consist the following pages Home page Registration page and user Login User Profile page Books Catalog Shopping Cart Payment by credit card Order Confirmation PROGRAM: Source Code for home page <html> <head> <title> ONLINE BOOK STORES</title> </head> <body bgcolor="pink"> <FRAMESET ROWS="20%,*"> <FRAME NAME="A2" SCROLLING="YES" SRC="head.html"> </FRAMESET><H1 ALIGN="CENTER"><U><FONT COLOR="PURPLE">WELCOME TO ONLINE BOOK SHOPPING<ITALIC></ITALIC> </U></FONT></H1> <H2> <FONT COLOR="WHITE"></FONT></H2> <H3 ALIGN="CENTER"><A HREF="reg.html"><BR><BR> <FONT COLOR="black"><ITALIC>REGISTRATION FORM</FONT></ITALIC><BR><BR> <BR><BR><A HREF="user profile .html"><FONT COLOR="black"><ITALIC>USER PROFILE</FONT></ITALIC><BR> <BR><BR><A HREF="user login.html"><FONT COLOR="black"><ITALIC>USER LOGIN</FONT></ITALIC><BR> <BR><BR><A HREF="book catalog.html"><FONT COLOR="black"><ITALIC>BOOKS CATALOG</FONT></ITALIC><BR> <BR><BR><A HREF="confim.HTML"><FONT COLOR="black"><ITALIC>BOOKS CART</FONT></ITALIC><BR> <BR><BR><A HREF="payment.HTML"><FONT COLOR="black"><ITALIC>PAYMENT</H3></FONT></ITALIC><BR> </BODY> </HTML> OUTPUT SCREEN: Source Code for Registration and user Login <html> <head> <center><u><h1>Registration Form</h1></u></center> </head> <body> <fieldset width=300><legend class=heading>Registration Form</legend> <form actions="http://localhost:8080//servletexamples//KiranUserProfile"> <pre class="reg"> First Name : <input type="text" size=30> Last Name : <input type="text" size=30> Age : <input type="text" size=30 onFocus="kirandisp()"> Email Id : <input type="email" size=30> Alternate Email Id : <input type="email" size=30> Address : <textarea cols=50 rows=3></textarea> Phone Occupation : <input type="text" size=30> : <input type="text" size=30> <input type="radio" name="agree" value="i agree">I Agree Terms & conditions <input type="radio" name="agree" value="i disagree">I DisAgree <input type="submit" value=submit> type="Reset" value=" reset "> </form> </fieldset> </body> </html> <input OUTPUT SCREEN FOR REGISTRATION FORM sourcecode for Userlogin <html> <head><center> <font size="6" color="Black" ><h1><u>User login.....</u><h1></font></center> </head> <form method="POST" ACTION="http://localhost:8080//servletexamples//KiranPass"> <body bgcolor="0x1ff0f2"> <pre> Enter Name : <input type="text" name="name" size=15 > <br> Enter Password : <input type="password" name="pwd" size=15><br> <input type= Submit name=sbmt value="Login"> </pre> </form></body> </html> OUTPUT SCREEN FOR USERLOGIN Source code for books catalog <html> <head> </head> <body> <center><font color="red" size=7 face="Vivaldi"><b><i>Book Catlog</i></font></center></b> <table> <td><img src=java.jpg width=100></td><td><b>Java Complete <br>references</b> <ul><pre><li><font color=blue>Author :Gangadhar</font> <li><font color=blue>edition :2007</font> <li><font color=blue>price :450</font> <li><font color=blue>Publicher :Ideal publishers</pre></font></pre> </ul> <td><pre><b>add to cart</b> <img src="click.gif"></pre></td> </td> <tr> <td><img src="vbnet.gif" width=80></td><td><b>Visual Basics</b> <ul><pre><li><font color=blue>Author :Kiran</font> <li><font color=blue>edition :2007</font> <li><font color=blue>price :950</font> <li><font color=blue>Publicher :gangii publishers</pre></font></pre> </ul> <td><pre><b>add to cart</b> <img src="click.gif"></pre></td> </tr> <tr> <td><img src="web tech.gif" width=80></td><td><b>Web Technology & Designing</b> <ul><pre><li><font color=blue>Author :Kiran-Gangadhar</font> <li><font color=blue>edition :2007</font> <li><font color=blue>price :5950</font> <li><font color=blue>Publicher :jyothi publishers</pre></font></pre> </ul> <td><pre><b>add to cart</b> <img src="click.gif"></pre></td> </tr> <tr> <td><img src="quick.gif" width=80></td><td><b>Web Technology & Designing</b> <ul><pre><li><font color=blue>Author :Kiran-Gangadhar</font> <li><font color=blue>edition :2007</font> <li><font color=blue>price :5950</font> <li><font color=blue>Publicher :jyothi publishers</pre></font></pre> </ul> <td><pre><b>add to cart</b> <img src="click.gif"></pre></td> </tr> <tr> <td><img src="harry.jpg" width=80></td><td><b>Harry reference to java</b> <ul><pre><li><font color=blue>Author :Harry Potter</font> <li><font color=blue>edition :2007</font> <li><font color=blue>price :950</font> <li><font color=blue>Publicher :jyothi publishers</pre></font></pre> </ul> <td><pre><b>add to cart</b> <img src="click.gif"></pre></td> </tr> </table> </body> </html> OUTPUT SCREEN FOR BOOKCATLOG What is JavaScript? JavaScript was designed to add interactivity to HTML pages JavaScript is a scripting language A scripting language is a lightweight programming language JavaScript is usually embedded directly into HTML pages JavaScript is an interpreted language (means that scripts execute without preliminary compilation) What can a JavaScript do? JavaScript gives HTML designers a programming tool - HTML authors are normally not programmers, but JavaScript is a scripting language with a very simple syntax! Almost anyone can put small "snippets" of code into their HTML pages JavaScript can put dynamic text into an HTML page - A JavaScript statement like this: document.write("<h1>" + name + "</h1>") can write a variable text into an HTML page JavaScript can react to events - A JavaScript can be set to execute when something happens, like when a page has finished loading or when a user clicks on an HTML element JavaScript can read and write HTML elements - A JavaScript can read and change the content of an HTML element JavaScript can be used to validate data - A JavaScript can be used to validate form data before it is submitted to a server. This saves the server from extra processing JavaScript can be used to detect the visitor's browser - A JavaScript can be used to detect the visitor's browser, and - depending on the browser - load another page specifically designed for that browser JavaScript can be used to create cookies - A JavaScript can be used to store and retrieve information on the visitor's computer To insert a JavaScript into an HTML page, we use the <script> tag. Inside the <script> tag we use the type attribute to define the scripting language. So, the <script type="text/javascript"> and </script> tells where the JavaScript starts and ends: The example below shows how to use JavaSript to write text on a web page: <html> <body> <script type="text/javascript"> document.write("Hello World!"); </script> </body> </html> The document.write command is a standard JavaScript command for writing output to a page. By entering the document.write command between the <script> and </script> tags, the browser will recognize it as a JavaScript command and execute the code line. In this case the browser will write Hello World! to the page EXPERIMENT-2 Validate the Registration, user login and payment by credit card pages using JavaScript. Aim: To validate the Registration, user login and payment by credit card pages using Javascript. Program: Registration <html> <head><title> register</title> <SCRIPT LANGUAGE="JAVASCRIPT"> function essentials_of_validation(form1) { var return_value=true; var username1=form1.txtusername1.value; var username2=form1.txtusername2.value; var password1=form1.txtpassword1.value; var password2=form1.txtpassword2.value; if(username1.length < 8) { return_value=false; window.alert("user name less than 8 chars"); } if(username1==username2) { return_value=false; window.alert("both ids are same"); form1.txtusername2.value=""; } if(password1.length<6) { return_value=false; window.alert(" pwd should be > 6 char's "); form1.txtpassword1.value=""; form1.txtpassword2.value=""; } if(password1!=password2) { return_ value=false; window.alert("ur password mismatched "); form1.txtpassword1.value=""; form1.txtpassword2.value=""; } return return_value; } </script> </head> <body BGCOLOR="YELLOW"> <CENTER><u> <marquee><font name="mistral" size="+1">REGISTRATION FORM</font></marquee> </u></center> <form name="form1" onSubmit="essentials_of_validation(this)"> Name:<input name="name" type="text" size="10"> <br> Age:<input type="text" size="3"> <br> Sex:<br> <input name ="gen" type="radio" value="male">male <input name="gen" type="radio" value="female">female <br> Address:<textarea name="address" rows="3" cols="3"></textarea> <br> Enter e-mail id u want :<sup>*</sup> <input type="text" name="txtusername1" size="15"> <br> Password:<sup>*</sup> <input type="Password" name="txtpassword1" size="15">(password should exceed 6 characters) <br> Confirm password:<input type="password" name="txtpassword2" size=20> <br> Alternate mail:<sup>*</sup> <input type="text" name="txtusername2" size="15"> <br> Known This Site Through <br> <input name="things" type="checkbox" value="srts"> internet <input name="things" type="checkbox" value="sp">newspapers <input name="things" type="checkbox" value="spor"> friends <br> Rate ur site <select name="rating"> <option selected>good <option>average <option>bad <option>no rating </select><br> Enter the code<input name="code" type="text" size="5"> <table border="1" width="10%" height="10%"> <thead><tr><th> 1123</th></tr> </thead> </table> <br> <input type="submit" value="submit "> <input type ="reset" value="clear ur entries"> </form> <font size="+1"> <A Href="E:\cs540\online.html">Home</A> <A Href="E:\cs540\user.html">Login</A> </font> </body> </html> User Login <html> <head> <SCRIPT LANGUAGE="JAVASCRIPT"> function essentials_of_validation(form1) { var return_value=true; var username=form1.txtusername.value; var password1=form1.txtpassword1.value; var password2=form1.txtpassword2.value; if(username.length < 8) { return_value=false; window.alert("user name less thn 8 chars"); } if(password1.length<6) { return_value=false; window.alert(" pwd should be > 6 char's "); form1.txtpassword1.value=""; form1.txtpassword2.value=""; } if(password1!=password2) { return_value=false; window.alert("ur password mismatched "); form1.txtpassword1.value=""; form1.txtpassword2.value=""; } return return_value; } </script> </head> <body bgcolor="skyblue"> <marquee><b><u><font face="comic sans ms" color="light blue">login here</font></u></b></marquee> <form name="form1" onSubmit="essentials_of_validation(this)"> Username <input type="text" name="txtusername" size=20> <br>Password: <input type="password" name="txtpassword1" size=20> <br>Confirm password:<input type="password" name="txtpassword2" size=20> <br><br> <input type="submit" value="submit"> <input type="reset" value="reset"> </form> </body> </html> Payment by credit card <html> <head><title> payment</title> <SCRIPT LANGUAGE="JAVASCRIPT"> function essentials_of_validation(form1) { var current=new Date(); var return_value=true; var username=form1.txtusername.value; var password1=form1.txtpassword1.value; var a=form1.dd.value; var b=form1.mm.value; var c=form1.yyyy.value; if(isNaN(username)) { window.alert("Not a valid account number"); } if(a<32 && b<13&& c>=current.getFullYear()) { if(c>current.getFullYear()) { window.alert(" you are validated"); } else if(c=current.getFullYear()) { if(b>current.getMonth()) { window.alert(" you are validated"); } else if(b=current.getMonth()) { if(a>current.getDate()) { window.alert("you are validated"); } } } else { window.alert("Your card has expired"); } } else { window.alert(" card has expired"); } } </script> </head> <body bgcolor="pink"> <marquee><strong>Enjoy the Shopping with special Offers</strong></marquee> <form name="form1" onSubmit="essentials_of_validation(this)"> <font size="+2"> Payment Through <br> <input name="pay" type="radio" >Credit card <input name="pay" type="radio" >Debit card <br> Bank <select name="bank"> <option selected>sbi <option>HSBC <option>ICICI <option>others </select> <br> Account/Card number: <input name="txtusername" type="textbox"> <br> Net banking id/Password<input name="txtpassword1" type="password"> <br> Enter date of expiryof account/card<input name="dd" type="text" size=2>(dd) <input name="mm" type="text" size=2>(mm) <input name="yyyy" type="text" size=4>(yyyy) <br> <input type="submit" value="Accept"> <input type="reset" value="Reject"> </form> <A Href="e:\cs540\online.html">Home</A> <br><A Href="e:\cs540\shop.html">back</A> </body> </html> Output screens for validations XML XML is a markup language. The mighty ones who created this acronym cheated a little, as XML stands for eXtensible Markup Language. XML was released in the late 90's and has since received a great amount of hype. The XML standard was created by W3C to provide an easy to use and standardized way to store self-describing data (self-describing data is data that describes both its content and its structure). XML is nothing by itself. XML is more of a "common ground" standard. The main benefit of XML is that you can use it to take data from a program like MSSQL (Microsoft SQL), convert it into XML, then share that XML with a slough of other programs and platforms. Each of these receiving platforms can then convert the XML into a structure the platform uses normally, and presto! You have just communicated between two platforms which are potentially very different! What makes XML truly powerful is the international acceptance it has received. Many individuals and corporations have put forth their hard work to make XML interfaces for databases, programming, office application, mobile phones and more. It is because of this hard work that the tools exist to do these conversion from whatever platform into standardized XML data or convert XML into a format used by that platform. XML Applications: Although there are countless numbers of applications that use XML, here are a few examples of the current platforms and applications that are making use of this technology: Cell Phones - XML data is sent to some cell phones. The data is then formatted by the specification of the cell phone software designer to display text or images, and even to play sounds! File Converters - Many applications have been written to convert existing documents into the XML standard. An example is a PDF to XML converter. VoiceXML - Converts XML documents into an audio format so that you can listen to an XML document. EXPERIMENT-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. Aim: To write a program, which takes user id as input and displays the user details by taking the user information from the XML document. Program: User Information <?xml version="1.0"?> <userdata> <user1> <jntuno>561</jntuno> <name> chandu</name> <phno>9989891510</phno> <address>srikakulam</address> </user1> <user2> <jntuno>540</jntuno> <name> karteek</name> <phno>9701443556</phno> <address>srikakulam1</address> </user2> <user3> <jntuno>525</jntuno> <name> giri</name> <phno>9897895301</phno> <address>rajam</address> </user3> <user4> <jntuno>526</jntuno> <name>gopi</name> <phno>9999789540</phno> <address>parlakimidi</address> </user4> <user5> <jntuno>513</jntuno> <name> manoj</name> <phno>9989233331</phno> <address>hyderabad</address> </user5> <user6> <jntuno>514</jntuno> <name> balaji</name> <phno>9999789560</phno> <address>vizag</address> </user6> <user7> <jntuno>567</jntuno> <name>kiran </name> <phno>9999178957</phno> <address>vijayanagaram</address> </user7> <user8> <jntuno>518</jntuno> <name> sekhar</name> <phno>789580</phno> <address>bobili</address> </user8> <user9> <jntuno>517</jntuno> <name>chaitu</name> <phno>789590</phno> <address>sallur</address> </user9> <user10> <jntuno>595</jntuno> <name> sravan</name> <phno>9000789500</phno> <address>sklm</address> </user10> </userdata> Information Retrival <html> <!--DOM with javascript> <head> <title>user profile example</title> </head> <body> <script type="text/JavaScript"> var xmldoc=new ActiveXObject("Microsoft.XMLDOM"); xmldoc.load("data.xml"); var ele=xmldoc.documentElement; var y=window.prompt("eneter user num",1); var node=ele.childNodes.item(y-1); for(var i=0;i<node.childNodes.length;i++) { var child=node.childNodes.item(i); var val=child.firstChild; document.write("<h2>"+child.nodeName+":"+val.nodeValue); } </script> </body> </html> Output screens for XML document JavaBeans is a portable, platform-independent component model written in the Java programming language. The JavaBeans architecture was built through a collaborative industry effort and enables developers to write reusable components in the Java programming language. With the JavaBeans API you can create reuseable, platform-independent components. Using JavaBeans-compliant application builder tools, you can combine these components into applets, applications, or composite components. JavaBean components are known as beans. Beans are dynamic in that they can be changed or customized. Through the design mode of a builder tool, you use the property sheet or bean customizer to customize the bean and then save (persist) your customized beans. Example and explanation of a simple bean program import java.awt.Color; import java.beans.XMLDecoder; import javax.swing.JLabel; import java.io.Serializable; public class SimpleBean extends JLabel implements Serializable { public SimpleBean() { setText( "Hello world!" ); setOpaque( true ); setBackground( Color.RED ); setForeground( Color.YELLOW ); setVerticalAlignment( CENTER ); setHorizontalAlignment( CENTER ); } } SimpleBean extends the javax.swing.JLabel graphic component and inherits its properties, which makes the SimpleBean a visual component. SimpleBean also implements the java.io.Serializable interface. Your bean may implement either the Serializable or the Externalizable interface. The JavaBeans™ specification defines the following types of bean properties: Simple – A bean property with a single value whose changes are independent of changes in any other property. Indexed – A bean property that supports a range of values instead of a single value. Bound – A bean property for which a change to the property results in a notification being sent to some other bean. Constrained – A bean property for which a change to the property results in validation by another bean. The other bean may reject the change if it is not appropriate. Bean properties can also be classified as follows: Writable – A bean property that can be changed Standard Expert Preferred Read Only – A bean property that cannot be changed. Hidden – A bean property that can be changed. However, these properties are not disclosed with the BeanInfo class EXPERIMENT-4 . Create a JavaBean which gives the exchange value of INR(Indian Rupees) into equivalent American/Canadian/Australian Dollar value. Aim: To create a JavaBean so that it converts value of INR(Indian Rupees) into equivalent American/Canadian/Australian Dollar value. Program: package sunw.demo.KiranRupee; import java.awt.*; import java.awt.event.*; public class KiranRupee extends Canvas { private double Rupee; public KiranRupee() { addMouseListener(new MouseAdapter() { public void mousePressed(MouseEvent me) { repaint(); } }); setSize(300,300); } public double getRupee() { return Rupee; } public void setRupee(double r) { Rupee=r; repaint(); } public void paint(Graphics g) { double Ausdollar,Usadollar,Candiandollar; Usadollar=(Rupee*39.72); Ausdollar=(Rupee*34.8941); Candiandollar=(Rupee*40.4852); Dimension d=getSize(); int h=d.height; int w=d.width; g.setFont(new Font("SansSerif",Font.PLAIN,22)); g.drawString("Indian Rupee :"+Rupee,50,50); g.drawString("Aus Dollar :"+Ausdollar,50,150); g.drawString("Candian Dollar :"+Candiandollar,50,200); } } Output screen for javabean EXPERIMENT-5 Create a simple Bean with a label - which is the count of number of clicks. Then create a BeanInfo class such that only the “count” property is visible in the Property Window. Aim: To create a simple Bean with a label - which is the count of number of clicks and a BeanInfo class such that only the “count” property is visible in the Property Window. Program: package sunw.demo.KiranCount; import java.awt.*; import java.awt.event.*; public class KiranCount extends Canvas { private int count; public KiranCount() { addMouseListener(new MouseAdapter() { public void mousePressed(MouseEvent me) { count++; repaint(); } }); setSize(200,300); } public void paint(Graphics g) { Dimension d=getSize(); int h=d.height; int w=d.width; g.setFont(new Font("SansSerif",Font.PLAIN,22)); g.drawString("Count :"+count,150,150); }} Outputscreen for Using bean info class: EXPERIMENT-6 . Create two Beans Traffic Light(Implemented as a Label with only three background colours-Red,Green,Yellow) and Automobile(Implemented as a TextBox which states its state/movement). The state of the Automobile should depend on the following Light Transition Table. Light Transition Red ---> Yellow Yellow ---> Green Green --> Red Automobile State Ready Move Stopped Aim: To create two Beans Traffic Light which implemented as a Label with only three background colours-Red,Green,Yellow and Automobile which is implemented as a TextBox which states its state/movement with above stated conditions. Program: package sunw.demo.Colors; import java.awt.*; import java.awt.event.*; public class Colors extends Canvas { transient private Color color; private boolean rectangular; public Colors() { addMouseListener(new MouseAdapter() { public void mousePressed(MouseEvent me) { change(); } }); rectangular=false; setSize(200,100); change(); } public boolean getRectangular() { return rectangular; } public void setRectangular(boolean flag) { this.rectangular=flag; repaint(); } public void change() { color=randomColor(); repaint(); } private Color randomColor() { int r=(int) (255*Math.random()); int g=(int) (255*Math.random()); int b=(int) (255*Math.random()); return new Color(r, g, b); } public void paint(Graphics g) { Dimension d=getSize(); int h=d.height; int w=d.width; g.setColor(color); if(rectangular) { g.fillRect(0, 0, w-1, h-1); } else { g.fillOval(0, 0, w-1, h-1); } } } Output screens A static web page is a web page that always comprises the same information in response to all download requests from all users. Contrast with Dynamic web page. It displays the same information for all users, from all contexts, providing the classical hypertext, where navigation is performed through "static" documents. Advantages Quick and easy to put together, even by someone who doesn't have much experience. Ideal for demonstrating how a site will look. Cache friendly, one copy can be shown to many people. Disadvantages Difficult to maintain when a site gets large. Difficult to keep consistent and up to date. Offers little visitor personalization (all would have to be client side). Dynamic web page Classical hypertext navigation, with HTML or XHTML alone, provides "static" content, meaning that the user requests a web page and simply views the page and the information on that page. However, web navigation can also provide an "interactive experience" that is termed "dynamic". Content (text, images, form fields, etc.) on a web page can change, in response to different contexts or conditions. There are two ways to create this kind of interactivity: 1. Using client-side scripting to change interface behaviors within a specific web page, in response to mouse or keyboard actions or at specified timing events. In this case the dynamic behavior occurs within the presentation. 2. Using server-side scripting to change the supplied page source between pages, adjusting the sequence or reload of the web pages or web content supplied to the browser. Server responses may be determined by such conditions as data in a posted HTML form, parameters in the URL, the type of browser being used, the passage of time, or a database or server state. The result of either technique is described as a dynamic web page, and both may be used simultaneously. Advantages Offers highly personalized and customised visitor options. Database access improves the personalized experience (as opposed to using just client side cookies) Scripts can read in data sources and display it differently depending on how it is run. Can create the illusion of being updated regularly using time and date sensitive routines (or even randomisers) to display pre-written text. Disadvantages Personalized pages are not very cache friendly. Requires a basic minimum knowledge of the language being used. Scripts need more consideration when uploading and installing, particularly to *unix servers. Servlets are modules that run inside request/response-oriented servers, such as Java-enabled web servers. Functionally they operate in a very similar way to CGI scripts, however, being Java based they are more platform independent. Some Example Applications A few of the many applications for servlets include, Processing data POSTed over HTTPS using an HTML form, including purchase order or credit card data. A servlet like this could be part of an order-entry and processing system, working with product and inventory databases, and perhaps an on-line payment system. Allowing collaboration between people. A servlet can handle multiple requests concurrently; they can synchronize requests to support systems such as on-line conferencing. Forwarding requests. Servlets can forward requests to other servers and servlets. This allows them to be used to balance load among several servers that mirror the same content. It also allows them to be used to partition a single logical service over several servers, according to task type or organizational boundaries. Servlet Architecture Overview The central abstraction in the Servlet API is the Servlet interface. All servlets implement this interface, either directly or, more commonly, by extending a class that implements it such as HttpServlet. The inheritance hierarchy looks as follows. The Servlet interface provides the following methods that manage the servlet and its communications with clients. destroy() Cleans up whatever resources are being held and makes sure that any persistent state is synchronized with the servlet's current in-memory state. getServletConfig() Returns a servlet config object, which contains any initialization parameters and startup configuration for this servlet. getServletInfo() Returns a string containing information about the servlet, such as its author, version, and copyright. init(ServletConfig) Initializes the servlet. Run once before any requests can be serviced. service(ServletRequest, ServletResponse) Carries out a single request from the client. Cookies are small bits of textual information that a Web server sends to a browser and that the browser returns unchanged when visiting the same Web site or domain later. By having the server read information it sent the client previously, the site can provide visitors with a number of conveniences: Identifying a user during an e-commerce session. Many on-line stores use a "shopping cart" metaphor in which the user selects an item, adds it to his shopping cart, then continues shopping. Since the HTTP connection is closed after each page is sent, when the user selects a new item for his cart, how does the store know that he is the same user that put the previous item in his cart? Cookies are a good way of accomplishing this. In fact, this is so useful that servlets have an API specifically for this, and servlet authors don't need to manipulate cookies directly to make use of it Avoiding username and password. Many large sites require you to register in order to use their services, but it is inconvenient to remember the username and password. Cookies are a good alternative for low-security sites. When a user registers, a cookie is sent with a unique user ID. When the client reconnects at a later date, the user ID is returned, the server looks it up, determines it belongs to a registered user, and doesn't require an explicit username and password. Customizing a site. Many "portal" sites let you customize the look of the main page. They use cookies to remember what you wanted, so that you get that result initially next time. I'll give an example like this later in this section of the tutorial. Focusing advertising. The search engines charge their customers much more for displaying "directed" ads than "random" ads. That is, if you do a search on "Java Servlets", a search site can charge much more for an ad for a servlet development environment than an ad for an on-line travel agent. On the other hand, if the search had been "Bali Hotels", the situation would be reversed. The problem is that they have to show a random ad when you first arrive and haven't yet performed a search, as well as when you search on something that doesn't match any ad categories. Cookies let them remember "Oh, that's the person who was searching for such and such previously" and display an appropriate (read "high priced") ad instead of a random (read "cheap") one. EXPERIMENT-7 . Convert the static web pages online library into dynamic web pages using servlets and cookies. Aim: To convert the static web pages online library into dynamic web pages using servlets and cookies. Program: Shopping page: <html> <head> <title> ONLINE BOOK STORES</title> </head> <body bgcolor="pink"> <FRAMESET ROWS="20%,*"> <FRAME NAME="A2" SCROLLING="YES" SRC="head.html"> </FRAMESET><H1 ALIGN="CENTER"><U><FONT COLOR="PURPLE">WELCOME TO ONLINE BOOK SHOPPING<ITALIC></ITALIC> </U></FONT></H1> <H2> <FONT COLOR="WHITE"></FONT></H2> <H3 ALIGN="CENTER"><A HREF="reg.html"><BR><BR> <FONT COLOR="black"><ITALIC>REGISTRATION FORM</FONT></ITALIC><BR><BR> <BR><BR><A HREF="user profile .html"><FONT COLOR="black"><ITALIC>USER PROFILE</FONT></ITALIC><BR> <BR><BR><A HREF="user login.html"><FONT COLOR="black"><ITALIC>USER LOGIN</FONT></ITALIC><BR> <BR><BR><A HREF="book catalog.html"><FONT COLOR="black"><ITALIC>BOOKS CATALOG</FONT></ITALIC><BR> <BR><BR><A HREF="confim.HTML"><FONT COLOR="black"><ITALIC>BOOKS CART</FONT></ITALIC><BR> <BR><BR><A HREF="payment.HTML"><FONT COLOR="black"><ITALIC>PAYMENT</H3></FONT></ITALIC><BR> </BODY> </HTML> Registration: <html> <head> <center><u><h1>Registration Form</h1></u></center> </head> <body> <fieldset width=300><legend class=heading>Registration Form</legend> <form actions="http://localhost:8080//servlet-examples//KiranUserProfile"> <pre class="reg"> First Name : <input type="text" size=30> Last Name : <input type="text" size=30> Age : <input type="text" size=30 onFocus="kirandisp()"> Email Id : <input type="email" size=30> Alternate Email Id Address Phone : <input type="email" size=30> : <textarea cols=50 rows=3></textarea> : <input type="text" size=30> Occupation : <input type="text" size=30> <input type="radio" name="agree" value="i agree">I Agree Terms & conditions <input type="radio" name="agree" value="i disagree">I DisAgree <input type="submit" value=submit> <input type="Reset" value=" reset "> </form> </fieldset> </body> </html> Sign in: <html> <head><center> <font size="6" color="Black" ><h1><u>User login.....</u><h1></font></center> </head> <form method="POST" ACTION="http://localhost:8080//servlet-examples//KiranPass"> <body bgcolor="0x1ff0f2"> <pre> Enter Name : <input type="text" name="name" size=15 > <br> Enter Password : <input type="password" name="pwd" size=15><br> <input type= Submit name=sbmt value="Login"> </pre> </form></body> </html> //servlet program import java.util.*; import java.io.*; import javax.servlet.*; import javax.servlet.http.*; public class KiranParameters1 extends HttpServlet { public void doGet(HttpServletRequest req,HttpServletResponse res)throws ServletException,IOException { res.setContentType("text/html"); PrintWriter out=res.getWriter(); String name=res.getParameter("email"); String pass=res.getParameter("password"); if(name.equals(name)&&pass.equals(pass)) { res.setHeader("Refresh", "5; URL=KiranBooksShopping.htm"); } else { res.setHeader("Refresh","5;URl=KiranUserLoginInvlid.htm"); } } public void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } } Books Catalog: <html> <head> </head> <body> <center><font color="red" size=7 face="Vivaldi"><b><i>Book Catlog</i></font></center></b> <table> <td><img src=java.jpg width=100></td><td><b>Java Complete <br>references</b> <ul><pre><li><font color=blue>Author :Gangadhar</font> <li><font color=blue>edition :2007</font> <li><font color=blue>price :450</font> <li><font color=blue>Publicher :Ideal publishers</pre></font></pre> </ul> <td><pre><b>add to cart</b> <img src="click.gif"></pre></td> </td> <tr> <td><img src="vbnet.gif" width=80></td><td><b>Visual Basics</b> <ul><pre><li><font color=blue>Author :Kiran</font> <li><font color=blue>edition :2007</font> <li><font color=blue>price :950</font> <li><font color=blue>Publicher :gangii publishers</pre></font></pre> </ul> <td><pre><b>add to cart</b> <img src="click.gif"></pre></td> </tr> <tr> <td><img src="web tech.gif" width=80></td><td><b>Web Technology & Designing</b> <ul><pre><li><font color=blue>Author :Kiran-Gangadhar</font> <li><font color=blue>edition :2007</font> <li><font color=blue>price :5950</font> <li><font color=blue>Publicher :jyothi publishers</pre></font></pre> </ul> <td><pre><b>add to cart</b> <img src="click.gif"></pre></td> </tr> <tr> <td><img src="quick.gif" width=80></td><td><b>Web Technology & Designing</b> <ul><pre><li><font color=blue>Author :Kiran-Gangadhar</font> <li><font color=blue>edition :2007</font> <li><font color=blue>price :5950</font> <li><font color=blue>Publicher :jyothi publishers</pre></font></pre> </ul> <td><pre><b>add to cart</b> <img src="click.gif"></pre></td> </tr> <tr> <td><img src="harry.jpg" width=80></td><td><b>Harry reference to java</b> <ul><pre><li><font color=blue>Author :Harry Potter</font> <li><font color=blue>edition :2007</font> <li><font color=blue>price :950</font> <li><font color=blue>Publicher :jyothi publishers</pre></font></pre> </ul> <td><pre><b>add to cart</b> <img src="click.gif"></pre></td> </tr> </table> </body> </html> //servlet program import java.util.*; import java.io.*; import javax.servlet.*; import javax.servlet.http.*; public class KiranParameters1 extends HttpServlet { public void doGet(HttpServletRequest req,HttpServletResponse res)throws ServletException,IOException { res.setContentType("text/html"); PrintWriter out=res.getWriter(); Enumeration ki=req.getParameterNames(); out.println("<html><body><br><center>Books Selected</center><br><table>"); while(ki.hasMoreElements()) { String name=""+ki.nextElement(); String value=req.getParameter(name); out.println("<td>"+name+" : "+value +"</td></tr>"); } out.println("</table>"); } } Output screens ASSIGNMENTS 1) Implement an HTML portal that offers: a main page describing the project and links to the other pages; a site map; three pages, each having a form, acting as a web interface for the web service http://www.random.org/: o integer generation form; o sequence generation form; o string generation form; a form to act as an interface for http://www.google.com/advanced_search; o it should contain at least 8 inputs, for the other provide default values by using hidden inputs; You should use: text fields for number and text inputs; radio buttons or drop down lists for enumerated or finite options; check boxes for on / off options; In each page include the link: http://validator.w3.org/check?uri=referer. It will help validate the page. A page is considered valid if: is validated by the W3C validator; gives the right parameters to the services. 2) First step: Create a database like XML (like the one in the example from above) file with: at least 10 record like elements (for example the link element); each record should have at least 4 attribute like elements (for example the name or uri element); each record should have at least 3 sub-records (for example I could extend the link elements to also contain multiple comment elements); Second step: Create an XSLT file -- that is used by your XML file -- to transform the database into a HTML file. Each information available in the XML file should be presented in the generated HTML. 3 ) Implement a simple web application that allows the user to manipulate a simple database. (For example you could implement an email address book or a bookmark manager.) The application should allow the user to: add entries; remove entries; update entries; search for entries; In order to accomplish this you will have to develop some static HTML files and servlets. The data should be kept in memory by using a collection (lists, maps, etc.) and nothing should be written to the disk. References : http://www.w3schools.com/ www.tizag.com/xmlTutorial http://www.apl.jhu.edu/~hall/java/Servlet-Tutorial/Servlet-TutorialCookies.html http://www.apl.jhu.edu/~hall/java/Servlet-Tutorial http://www.cse.iitb.ac.in/dbms/Data/Courses/DBIS/Software/servlets/servlet_tuto rial.html http://beta.wikiversity.org/wiki/Web_technologies_--_Laboratory_6_--_20072008_--_info.uvt.ro http://www.upriss.org.uk/awt/9103-Fa08.html CONTENT BEYOND SYLLABUS. Advanced Web Technology Covering the topics like with examples Introduction to PHP Formal models of XML schemas XML transformation languages JavaScript browser programming Web application programming frameworks Web services PHP is a powerful tool for making dynamic and interactive Web pages. PHP is the widely-used, free, and efficient alternative to competitors such as Microsoft's ASP. Example #1 Our first PHP script: hello.php <html> <head> <title>PHP Test</title> </head> <body> <?php echo '<p>Hello World</p>'; ?> </body> </html> Use your browser to access the file with your web server's URL, ending with the /hello.php file reference. When developing locally this URL will be something like http://localhost/hello.php or http://127.0.0.1/hello.php but this depends on the web server's configuration. If everything is configured correctly, this file will be parsed by PHP and the following output will be sent to your browser: <html> <head> <title>PHP Test</title> </head> <body> <p>Hello World</p> </body> </html> This program is extremely simple and you really did not need to use PHP to create a page like this. All it does is display: Hello World using the PHP echo() statement. Note that the file does not need to be executable or special in any way. The server finds out that this file needs to be interpreted by PHP because you used the ".php" extension, which the server is configured to pass on to PHP. Think of this as a normal HTML file which happens to have a set of special tags available to you that do a lot of interesting things.