Académique Documents
Professionnel Documents
Culture Documents
No:01 Date:09/06/10
AIM:
STUDY OF HTML
HTML stands for Hyper Text Markup Language HTML is not a programming language, it is a markup language A markup language is a set of markup tags HTML uses markup tags to describe web pages HTML documents contain HTML tags and plain text HTML documents are also called web pages
The purpose of a web browser (like Internet Explorer or Firefox) is to read HTML documents and display them as web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page. Creating an HTML Page: A web page is created using a language called, Hypertext Markup Language, better known as HTML Code. You can write your own coding within a plain text editor, such as Note Pad, or use an HTML editor, which will write the code for you. HTML codes, also referred to as HTML tags, are enclosed by the lesser than (<) and greater than (>) brackets and may be written in capital or lower case letters. The opening bracket is followed by an element, which is a browser command, and ends with the closing bracket. <fontsize=2> An element may also be followed by attributes, which are words describing the properties .
Attributes are only contained in the opening HTML tags to the right of the element and are separated by a space and followed by an equal (=) sign. The value follows the equal sign and is enclosed in quotes. <font size=2> Basic HTML Document Code Structure: Begin writing your HTML tags by creating your document's basic layout. Copy and paste this code into your text or HTML editor. .
<html> <head> <title>Your Page Title</title> </head> <body> This area will contain everything that will be visible through a web browser, such as text and graphics. All of the information will be HTML coded. For a complete list of HTML codes, tags and examples, see the HTML chart below. </body> </html> <html> - Begins your HTML document. <head> - Contains information about the page such as the TITLE, META tags for proper Search Engine indexing, STYLE tags, which determine the page layout, and JavaScript coding for special effects. <title> - The TITLE of your page. This will be visible in the title bar of the viewers browser.
</title> - Closes the HTML <title> tag. </head> - Closes the HTML <head> tag. <body> - This is where you will begin writing your document and placing your HTML codes. </body> - Closes the HTML <body> tag. </html> - Closes the <html> tag. HTML Tags Chart: Tag <!-<a <b> <big> <body> <br> Name Comment Anchor Bold big (text) Code Example <!--This can be viewed in the HTML part of a document--> <a href="http://www.domain.com/"> Visit Site</a> (hyperlink) <b>Example</b> <big>Example</big> Browser View Nothing will show Visit Site (hyperlink) Example Example Contents of your web page The contents of your web page The contents of your web page This will center your contents Definition Term Definition of the term Definition Term Definition of the term Definition Term Definition of the term Definition Term Definition of the term
body of <body>The content of your HTML HTML page</body> document line break The contents of your page<br>The contents of your page <center>This will center your contents</center>
<center> Center
<dd>
<dl> <dt>Definition Term</dt> definition <dd>Definition of the term</dd> description <dt>Definition Term</dt> <dd>Definition of the term</dd> </dl> <dl> <dt>Definition Term</dt> <dd>Definition of the term</dd> <dt>Definition Term</dt> <dd>Definition of the term</dd> </dl>
<dl>
definition list
<dt>
definition term
<dl> <dt>Definition Term</dt> <dd>Definition of the term</dd> <dt>Definition Term</dt> <dd>Definition of the term</dd> </dl>
Definition Term Definition of the term Definition Term Definition of the term
<em> <embed>
This is an <em>Example</em> of using This is an Example of using the emphasis tag the emphasis tag <embed src="yourfile.mid" width="100%" height="60" align="center"> <bgsound src="wonderfu.mid" autostart="false" loop="1" /> Music will begin playing when your page is loaded and will only play one time. A control panel will be displayed to enable your visitors to stop the music. Example
<embed>
embed object
<font>
Font
<form>
Form
<form action="mailto:you@yourdomain.com"> Name: <input name="Name" value="" Name: size="10"><br> Email: <input name="Email" value="" Email: size="10"><br> Submit <center><input type="submit"></center> </form> <h1>Heading 1 Example</h1> <h2>Heading 2 Example</h2> <h3>Heading 3 Example</h3>
heading of <head>Contains elements describing the HTML Nothing will show document</head> document horizontal <hr width="50%" size="3" /> rule Italic <i>Example</i> Contents of your web page Contents of your web page Example
<img>
Image
<img src="Earth.gif" width="41" height="41" border="0" alt="text describing the image" /> Example 1:
Image display
<input>
<form method=post action="/cgibin/example.cgi"> input field <input type="text" size="10" maxlength="30"> <input type="Submit" value="Submit"> </form> Example 1: <menu> <li type="disc">List item 1</li> <li type="circle">List item 2</li> <li type="square">List item 3</li> </MENU>
Submit
Example 1: List item 1 o List item 2 List item 3 Example 2: i. List item 1 ii. List item 2 iii. List item 3 iv. List item 4
<li>
list item
Example 2: <ol type="i"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> <li>List item 4</li> </ol>
<link>
Link
<head> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <menu> <li type="disc">List item 1</li> <li type="circle">List item 2</li> <li type="square">List item 3</li> </menu>
o
<menu> Menu
<ol>
ordered list Numbered <ol> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> <li>List item 4</li> </ol>
Numbered 1. List item 1 2. List item 2 3. List item 3 4. List item 4 Letters A. List item 1 B. List item 2
Letters <ol type="A"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> <li>List item 4</li> </ol> Capital Roman Numerals <ol type="I"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> <li>List item 4</li> </ol> <form method=post action="/cgibin/example.cgi"> <center> Select an option: <select> <option>option 1</option> <option selected>option 2</option> <option>option 3</option> <option>option 4</option> <option>option 5</option> <option>option 6</option> </select><br> </center> </form>
C. List item 3 D. List item 4 Capital Roman Numerals I. List item 1 II. List item 2 III. List item 3 IV. List item 4
<option>
listbox option
Select an option:
This is an example displaying the use of This is an example displaying the paragraph tag. <p> This will create a the use of the paragraph tag. line break and a space between lines. This will create a line break and a space between lines. Attributes: <p> paragraph Example 1:<br> <br> <p align="left"> This is an example<br> displaying the use<br> of the paragraph tag.<br> <br> small (text) <small>Example</small> Attributes: Example 1: This is an example displaying the use of the paragraph tag. Example
<small>
<strike> deleted text <strike>Example</strike> <strong> strong emphasis <strong>Example</strong> Example 1: <table border="4" cellpadding="2" cellspacing="2" width="100%"> <tr> <td>Column 1</td> <td>Column 2</td> </tr> </table>
Example Example
<table>
Table
<td>
<table border="2" cellpadding="2" cellspacing="2" width="100%"> <tr> table data <td>Column 1</td> <td>Column 2</td> </tr> </table> <div align="center"> <table> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> <tr> <td>Row 2</td> <td>Row 2</td> <td>Row 2</td> </tr> <tr> <td>Row 3</td> <td>Row 3</td> <td>Row 3</td> </tr> <tr> <td>Row 4</td> <td>Row 4</td> <td>Row 4</td> </tr> </table> </div>
Column 1 Column 2
Column Column Column 1 2 3 Row 2 Row 2 Row 2 Row 3 Row 3 Row 3 Row 4 Row 4 Row 4
<th>
table header
<title>
document <title>Title of your HTML page</title> Title of your web page will be
title <table border="2" cellpadding="2" cellspacing="2" width="100%"> <tr> <td>Column 1</td> <td>Column 2</td> </tr> </table> <tt>Example</tt>
<tr>
table row
<tt> <u>
Teletype
Example
Underline <u>Example</u> Example 1:<br> <br> <ul> <li>List item 1</li> <li>List item 2</li> </ul> <br> unordered Example 2:<br> list <ul type="disc"> <li>List item 1</li> <li>List item 2</li> <ul type="circle"> <li>List item 3</li> <li>List item 4</li> </ul> </ul>
Example
Example 1: List item 1 List item 2 Example 2: List item 1 List item 2 o List item 3 o List item 4
<ul>
RESULT: Thus the basics of HTML tags are studied and are verified.
Ex.No:02(a) Date:09/06/10
AIM:
To write a HTML program to locate a place in the given image and display its description.
ALGORITHM:
Step1: Start. Step2: Add html, head, and title and body tags. Step3: Use <img src> tag to import a new image by specifying its location. Step4: Use the tag methods <area shape=circle cords=*,*> to select the area in the map. Step5: Navigate to the city details page using <href> tag. Step6: Save the main program and subprogram in .html extension. Step7: Run the main program. Step8: Stop.
CODING: map.html
<html> <head> <title>INDIA MAP PROGRAM</title> <center><h1><u>LOCATE THE AREA IN THE MAP</U></h1></center></head> <body bgcolor="pink"> <img src="map-india-states.jpg" usemap="#map"> <map id="map"> <area shape="circle" coords="372,399,21" href="city.html" alt="madhya pradesh"> </map> </body> </html>
city.html <html> <head> <title>CITY DETAILS</title> </head> <body> The clicked are is ORISSA !!! </body> </html>
OUTPUT:
RESULT:
Thus an html program to locate a place in an image and view its description is created and executed.
FRAMES
ALGORITHM:
Step1: Start. Step2: Add html, head, and title and body tags. Step3: Use <frame set> tag to allocate a frame position in the web page. Step4: Use the tag methods <rows=50%, 50% cols=80%, 20%> to divide the webpage into four frames. Step5: Import image using in the first frame, a html document in the second. Step6: Add html document and a pdf file in the third and fourth frames. Step7: Run the main program. Step8: Stop.
CODING:
Christ.html: <html> <title>FRAMES </title> <frameset rows="50%,50%" cols="25%,25%" border=5 bordercolor=blue> <frame src="ccet4.jpg"> <frame src="course.html"> <frame src="tab.html"> <frame src="ITL.pdf"> </frameset> </html>
Course.html: <html> <head> <B><u><font size=4 font color=maroon> courses offered </u></B> <br> <br> <body> <li>Computer science engineering</li> <li>Information technology</li> <li>Electronics and communication engineering</li>
Tab.html: <html> <body><table> <table border="4" cellpadding="2" cellspacing="2" width="100%"> <tr> <td><B>DEPARTMENT</B></td> <td><B>HOD</B></td> </tr><tr> <td>CSE</td> <td>Baskarane</td> </tr><tr> <td>IT</td> <td>TamilSelvan</td></tr><tr> <td>ECE</td> <td>Somasundaram</td> </tr><tr> <td>EEE</td> <td>Siva</td> </tr> </table></body></html>
OUTPUT:
RESULT:
Thus a html page for frames is created and executed successfully.
Ex.No:03 Date:16/06/10
AIM:
COLLEGE WEBSITE
ALGORITHM:
Step1: Start Step2: Import necessary basic html tags and pictures. Step3: Create html pages for different pages like about us, gallery, home and department. Step4: Use <href> tag to navigate through the given pages on click. Step5: Use frames and table tags where ever necessary. Step6: Open the page in web browser and navigate. Step7: Stop.
CODING:
Page1.html: <html> <title>CHRIST COLLEGE OF ENGINEERING AND TECHNOLOGY</title> <body> <body bgcolor="grey"> <img src="ccet.jpg" width="1000" > <hr></hr><marquee>OUR PARTNERS <font color="orange"><img src="ccet18.jpg" width="100" height="50"> : <img src="ccet19.jpg" width="100" height="50"> :<img src="ccet20.jpg" width="100" height="50"> <img src="ccet21.jpg" width="100" height="50"> <img src="ccet22.jpg" width="100" height="50"></marquee><hr></hr> <pre><center><b><a href="Page1.html"><font size="5" font color="orange">Home</a> <a href="About.html"><font size="5" font color="orange">About Us</a> href="Page3.html"><font size="5" font color="orange">Departments</a> href="Gall.html"><font size="5" font color="orange">Gallaries</a> </b></center></pre> <hr></hr> <br> <img align="right" src="logo.jpg" width="200" height="250"> <font align="left" face="Comic Sans MS" color="blue" size="5" > Welcome To CCET </font> <br> <font size="4" face="timesnewroman"> <br> Sam Paul Educational trust under which Christ College of engineering and technology has been started, was established with the sole aim of providing quality engineering education matching with the global standards. A Christian Minority Trust with S.R. Sam Paul, a post graduate engineer from Anna University as the Founder Chairman, <a <a
(who is finished in research in the same field) and Dr. Mrs. Babitha Paul as the founder trustee. <form> <form name="Page3" action="http:\\localhost\Web Page\Page3.html" method="post"> </form> <body background=""> </body> </html> </font>
Page2.html: <html> <title></title> <body> <img align="left" img src="ccet4.jpg "> <br> <br> <br> <br><br> <br> <font align="centre" face="calibri" color="blue" size="5" > CCET DEPATRMENTS</font> </body> </html>
Page3.html: <html> <title></title> <head> <frameset> <frameset cols ="78%,22%"> <frame src="Page2.html" name="details"> <frame src="Page4.html"> </frameset> </head> </html>
Page4.html: <html> <title></title> <head> <body> <body background="NotifierBackground.jpg"> <ul> <pre> <li><B><H4><font color="blue">COMPUTER SCIENCE</H4></B></li> <b><a href="CSE.html" target="details">About us</a> <a href="s1.html" target="details">Students Details</a> <br><br>
<li><B>INFORMATION TECHNOLOGY</li><br> <a href="IT.html" target="details">About us</a> <a href="s2.html" target="details">Students Details</a> <li><B>ELECTRONICS COMMUNICATION</li><br> <a href="EC.html" target="details">About us</a> <a href="s3.html" target="details">Students Details</a> <LI><B>ELECTRIC & ELECTRONIC ENGG</LI><br> <a href="EEE.html" target="details">About us</a> <a href="s4.html" target="details">Students Details</a> </pre> </ul> </head> </html> Cse.html: <html> <title></title> <body> <PRE> <CENTER><h2><U>COMPUTER SCIENCE DEPARTMENT</U></H2> <img align="right" img src="ccet5.jpg"> <font align="left" face="times new roman" color="blue" size="5" > </body> </html>
It.html: <html> <title></title> <body> <PRE> <CENTER><h2><U>INFORMATION TECHNOLOGY DEPARTMENT</H2> <img align="right" img src="ccet7.jpg"> </body> </html>
Ec.html: <html> <title></title> <body> <PRE> <CENTER><h2><U>ELECTRONICS COMMUNICATION DEPARTMENT</H2> <img align="right" img src="ccet10.jpg"> </body> </html>
Eee.html: <html>
<title></title> <body> <PRE> <CENTER><h2><U>ELECTRICAL & ELECTRONICS DEPARTMENT</H2> <img align="right" img src="ccet12.jpg"> </body> </html>
Gall.html: <html> <title></title> <head> <body background="LoginDialogBackground.jpg"> <br><table border="3" CELLPADDING="15" CELLSPACING="5" WIDTH="50%"> <tr CLASS="TableRowColor"> <font color="red" size="5" ><b> PHOTO GALLERY.... </b> <hr width="1000"> <br> <br> <td> <img width="400" height="200" src="ccet13.jpg"> </td> <td> <img width="400" height="200" src="ccet15.jpg"> </td> <TR CLASS="TableRowColor"> <td> <img width="400" height="200" src="ccet16.jpg"></td> <td> <img width="400" height="200" src="ccet17.jpg"></td> </tr> </head> </html>
S1.html: <html> <title></title> <body> <PRE> <CENTER><h2><U>COMPUTER SCIENCE DEPARTMENT</U></H2> <CENTER><h2><U>Student Details</U></H2> <img src="ccet6.jpg" width="350" height="350"> <font align="left" face="calibri" color="Dark green" size="5" > <br> Number of Students: 350 Number of Sections: 2/year</font> </body> </html>
<CENTER><h2><U>Student Details</U></H2> <img src="ccet8.jpg" width="350" height="350"> <font align="left" face="calibri" color="Dark green" size="5" > <br> Number of Students: 350 Number of Sections: 2/year</font> </body> </html>
S3.html: <html> <title></title> <body> <PRE> <CENTER><h2><U>ELECTRONICS COMMUNICATION DEPARTMENT</U></H2> <CENTER><h2><U>Student Details</U></H2> <img src="ccet9.jpg" width="350" height="350"> <font align="left" face="calibri" color="Dark green" size="5" > <br> Number of Students: 350 Number of Sections: 2/year</font> </body> </html>
S4.html: <html> <title></title> <body> <PRE> <CENTER><h2><U>ELECTRIC & ELECTRONICS DEPARTMENT</U></H2> <CENTER><h2><U>Student Details</U></H2> <img src="ccet11.jpg" width="350" height="350"> <font align="left" face="calibri" color="Dark green" size="5" > <br> Number of Students: 350 Number of Sections: 2/year</font> </html>
OUTPUT:
RESULT:
Thus a static college website using the various HTML tags was designed and executed.
Ex.No:04 Date:30/06/10
AIM:
To study the basic concepts of scripting languages like VBScript and JavaScript. VBSCRIPT VBScript is a scripting language A scripting language is a lightweight programming language VBScript is a light version of Microsofts programming language Visual Basic. When a VBScript is inserted into a HTML document, the Internet Browser will read the HTML and interpret the VBScript. The VBScript can be executed immediately, or at a later event. VBScript Code in an HTML Document: <html> <head> </head> <body> <script type=vbscript> document.write(hello from VBScript!) </script> </body> </html> To insert a script in an HTML document, <script> tag is used. Use the type attribute to define the scripting language.
<script type = vbscript> VBScript: The command for writing some text on a page is document.write. document.write(Hello from VBScript!) Variable A variable is a container for information you want to store. A variables value can change during the script. You can refer to a variable by name to see its value or to change its value. In VBScript, all variables are of type variant that can store different types of data. Rules for Variable Names: Must begin with a letter Cannot contain a period (.) Cannot exceed 255 characters
Declaring Variables You can declare variables with the Dim, Public or the Private statement. Dim name name = some value Now you have created a variable. The name of the variable is name. Now you have also created a variable. The name of the variable is name. However, the last method is not a good practice, because you can misspell the variable name later in your script, and that can cause strange results when your script is running. This is because when you misspell for example the name variable to nime the script will automatically create a new variable called nime. To prevent your script from doing this you can use the Option Explicit statement. When you use this statement you will have to declare all your variables with the dim, public or private statement. Put the Option Explicit statement on the top of your script.
Array Variables The declaration of an array variables uses parentheses () following the variable name. dim names(2) The number shown in the parentheses is 2. We start at zero so this array contains 3 elements. Multiple dimensions are declared by separating the numbers in the parentheses with commas. dim table(4,6) Conditional Statements: In VBScript we have three conditional statements: If then else statement use this statement if you want to select one of two sets of lines to execute. If then elseif statement use this statement if you want to select one of many sets of lines to execute. Select case statement use this statement if you want to select one of many sets of lines to execute. If then else If i=10 then Msgbox Hello Else Msgbox goodbye
If payment=cash then Msgbox you are going to pay cash! Elseif payment = visa then Msgbox you are going to pay with visa Elseif payment = Amex then Msgbox you are going to pay with American Express Else Msgbox unknown method of payment End if
Select case
Select case payment Case cash Msgbox you are going to pay cash! Case visa Msgbox you are going to pay with visa Case amex Msgbox you are going to pay with American Express Case else Msgbox unknown method of payment
End select
Looping Statements
For Each Next statement runs statements for each item in a collection or each element of an array.
For Next
For i=1 to 10 Some code Next You can exit a For Next statement with the Exit for keyword.
For EachNext
A For Each Next loop repeats a block of code for each item in a collection, or for each element of an array. The For Each .Next statement looks almost identical to the For.Next statement. The difference is that you do not have to specify the number of items you want to loop through. Dim Names(2) Names(0)=Tove Names(1) = Jani Names(2)=Hege For Each x in names document.write(x &</br>) Next DoLoop
Do While i>10 Some code Loop Do Some code Loop while i>10 Do until i=10 Some code Loop Do
Some code Loop until i=10 Do until i=10 i=i-1 if i<10 then Exit do Loop
VBScript Procedures
We have two kinds of procedures: The Sub Procedure The Function Procedure. A Sub Procedure: It is a series of statements, enclosed by the Sub and End Sub statements. It can perform actions, but does not return a value. Sub mysub() Some statements End sub Or Sub mysub(argument 1, argument 2) Some statements End sub
A Function Procedure
It is a series of statements, enclosed by the Function and End function statements. It can perform actions and can return a value. It returns a value by assigning a value to its name. Function Myfunction() Some statemens Myfunction = some value End Function Or Function Myfunction (argument 1, argument 2) Some statemens Myfunction = some value End Function
Call a Sub or Function Procedure When you call a Function in your code, you do like this: name = findname() Here you call a function called findname,the function returns a value that will be stored in the variable name. When you call a Sub Procedure you can use the Call statement, like this: Call MyProc(argument) Or, you can omit the Call statement, like this: MyProc argument
Number 4.5,8.2,7
String Center,Ship! Any thing that has got methods and properties.
Variables: Variables can be created using var keyword. Var temp Var Onemoretemp, Strtemp Assigning values to variables Temp= 45 Onemoretemp = temp Strtemp = tempvalue Operators: Addition (+) Subtraction (-) Multiplication (*) Division (/) Modulus (%) String concatenation operator is Bit wise XOR (^) AND (&&) Shift Left (<<) OR (||) Shift Right Zero Fill (>>>) Bit wise AND (&)
Arrays
+ Pre-increment operator and postincrement operators (++) Pre- decrement and post decrement operators (--) NOT (!)
Shift Right with Sign (>>) Bit wise OR (|) Identity (===) Bit wise NOT (~) Non identity (!=)
Used o store multiple data, based on an index, in one storage structure The index starts from zero Var k = new Array(); Var t = new Array(rama,rahim,Robert,5,8); document.write(t[0]);
Data Type Conversions JavaScript is a dynamically typed language Var Answer = 42 Answer = Thanks for all the fish We can convert a number in to string and vice versa. parseInt method used to convert a string value, which is holding a number data type temp = parseInt(42); anoth = parseInt(54.35); str=+2500; str=+temp; Simply adding an empty quote to a number value will convert a number into string data type.
Sample JavaScript program Program to print Hello World in browser <html> <head> <title>Hello World</title> </head> <body> <script language = JavaScript> Document.write(Hello World); </script> </body> </html> User Interactivity through JavaScript Functions used to interact with the client alert() prompt() The alert method displays a dialog box in the browser with the text string passed as an argument. The prompt method is used to get some information from the user. It displays a prompt dialog box and captures the value entered by he user. We can store the value entered by the user in a variable.
<script language = JavaScript> alert(Welcome How was he day!); user=prompt(Enter your Name,Type urName);
document.write(Welcome to JavaScript world <br>); document.write(your name is :+user); </script> Decision Constructs Ifelse If (condition) { statements, if it is true } else { statements, if it is false } For Multiple Conditions if(condition) { Statements } else if(condition) { statements }
Switch.case
switch (type) { case type 1 : statement 1;break; case type 2 : statement 2;break; default: Default statement; }
Loops The while and for statements are used to execute a block of code for as long as a certain condition is valid while (expression) { statements } for (initialization; condition;increment/decrement) { one or more statements } The break statements is used to exit a loop such as from for or while blocks.
Function or methods Group of code that handles actions invoked by event handlers (more on this, later) or by simple statements. Reduces the writing of the code again and we can reuse the same
Two types built-in functions and user-defined functions. Built in functions functions which are already existing in the language itself. E.g., parseInt, alert, prompt etc., User defined functions written by the user to make our scripts scalable Syntax for a function is as follows. Function functionname(arg 1, arg 2..) { Body }
Confirm() Method Similar to the alert method Displays a dialog box and asks he user to proceed further or not. Returns either TRUE or FALSE based on the selection during the method call Method brings up a dialog box that prompts the user to select either o.k. or cancel, the first returning TRUE and the later, FALSE. Events & Event Handlers JavaScript is based on event-driven model Predetermined events and event handlers that deal with those events Event handlers fire those events whenever that event happens.
Events Blur: Occurs when the focus is removed Focus: Occurs when the user gives input or focus to an element in the form
Change: occurs when the user changes some value of a field. Click: Arises when the user clicks on a link or an element in the form. Double Click: Occurs when the user double clicks. Key Down: Occurs when the key makes its first contact. Key Up: When the contact with the key is released. Load: Occurs when the page is loaded. Unload: Occurs when the current window is cleared from view. Error: Occurs when there is a transfer error. Mouse Down: Occurs when the user presses any of the buttons of a mouse. Mouse Up: Occurs when the user releases the button. Mouse Over: Occurs whenever the cursor rolls into the rectangular space of the object in the screen. Mouse Out: occurs when the cursor is moved outsie the rectangle space. Submit: When the user submits a form of a page. Reset: Whenever the form is reset. Select: Occurs when the option is selected Resize: If the user resizes the window.
JavaScript Object Model Models HTML documents in a very consistent and intuitive way. Provides an interface to access, navigate and manipulate web page. DOM allows you to access and update the content, structure and style of a document. To provide more interactive cntent on the web.
DOM allows HTML to be manipulated dynamically. Each HTML tag can be accessed and manipulated via its ID and NAME attributes.
Each object has its own properties, methods and events. The Object Model allows you to navigate along the document tree,up and down, and to the sides. o You can use the child, parent and sibling relationships to go from a particular point to any other point on your page tree.
Model is divided into three sub groups. Language objects Form field objects Browser objects
Browser Objects
o image
o Button o Checkbox o Radio o Text o Reset o Text Area o Password o Select o Submit o Hidden Language Objects
RESULT:
Thus the javascript and vbscript languages are studied.
Ex.No:04(a)
Date:30/06/10 AIM:
To write a java script program for multiplication of two numbers.
ALGORITHM:
Step 1: Start the program. Step 2: Get the numbers using window prompt Step 3: Display the output of the given numbers. Step4: Stop the program.
PROGRAM CODE:
<html> <head> <script LANGUAGE="JavaScript"> var a; var b; var c; a=window.prompt("Enter the first number","0"); b=window.prompt("Enter the second number","0"); c=parseInt(a)*parseInt(b); document.write("Your 1st number is:"+a); document.write("<p>"); document.write("Your 2nd number is:"+b); document.write("<p>");
OUTPUT:
RESULT:
Thus a java script program for arithmetic operation using prompt is developed and executed successfully.
Ex.No:04(b) Date:07/07/10
ALERT WINDOW
AIM:
To develop html page with java script to display a alert window.
ALGORITHM:
Step1: Start Step2: Import basic html tags like <html>, <head>, <body>. Step3: Write the java script within the <head> tag. Step4: Use scripting language as javascript and an alert method with some message. Step5: Use a button which on click displays an alert window by calling a function
displaymessage(). Step6: Execute the page to display the alert window on button click. Step7: End.
CODING:
<html> <head> <script type="text/javascript"> function displaymessage() { alert("Hello World!"); } </script> </head> <body> <form> <input type="button" value="Click me!" onclick="displaymessage()" /> </form> <p>By pressing the button above, a function will be called. The function will alert a message.</p> </body> </html>
OUTPUT:
RESULT:
Thus a html program for alert window using javascript is developed and executed.
Ex.No:04(c)
SLIDE SHOW
Date:07/07/10 AIM:
To write a program to perform the slide show using java script.
ALGORITHM:
Step1: Create an array for pictures Step2: Store all pictures in that array and set time to 100 Step3: At regular time interval change the background of website using for loop Step4: Loop the available pictures again and again
PROGRAM CODE:
<script language="JavaScript"> var speed = 1000 var Pic = new Array() Pic[0] = 'Water lilies.jpg' Pic[1] = 'Blue hills.jpg' Pic[2] = 'Sunset.jpg' Pic[3] = 'Winter.jpg' var t var j = 0 var p = Pic.length var preLoad = new Array() for (i = 0; i < p; i++){ preLoad[i] = new Image()
preLoad[i].src = Pic[i] } function runBGSlideShow(){ if (document.body){ document.body.background = Pic[j]; j=j+1 if (j > (p-1)) j=0 t = setTimeout('runBGSlideShow()', speed) }} </script> <body onload="runBGSlideShow()"> <style> body{ background-repeat: no-repeat; background-position: 15 15;}</style>
OUTPUT:
RESULT:
Thus a java script program for pictures slide show is developed and output is verified.
Ex.No:04(d) Date:07/07/10
VISITORS COUNT
AIM:
To write a java script program to determine the number of visitors of a website.
ALGORITHM:
Step1: Include javascript as the scripting language. Step2: Create a function to increment number of visitors every time the site is visited. Step3: Declare a variable to get current date from the system.
Step4: Value of this variable is set as the count for visitors. Step5: Invoke this function every time the site gets visited with an increment in value of variable.
PROGRAM CODE:
<script language ="javascript"> function fakecounter(){ var decrease_increase=50000 var counterdate=new Date() var currenthits=counterdate.getTime().toString() currenthits=parseInt(currenthits.substring(2,currenthits.length-4))+decrease_increase document.write("You are visitor # <b>"+currenthits+"</b> to my site!") } fakecounter() </script> <br>
OUTPUT:
RESULT:
Thus a java script program for page counter is developed and executed successfully.
Ex.No:04(e)
BIRTHDAY CALCULATION
Date:07/07/10 AIM:
To write a javascript program to determine the birth day of a person .
ALGORITHM:
Step1: Include javascript as the scripting language. Step2: Arrays are declared to get the date, month and year in which the person was born. Step3: Day of birth is calculated using mathematical formulae. Step4: Computed day is displayed using a text field to the user.
PROGRAM CODE:
<script LANGUAGE="JavaScript"> function MakeArray(n) { this.length = n; for (var i = 1; i <=n; i++) { this[i] = 0; }} days = new MakeArray(7); days[0] = "Saturday" days[1] = "Sunday" days[2] = "Monday" days[3] = "Tuesday" days[4] = "Wednesday" days[5] = "Thursday" days[6] = "Friday" months = new MakeArray(12); months[1] = "January" months[2] = "February" months[3] = "March" months[4] = "April" months[5] = "May" months[6] = "June" months[7] = "July" months[8] = "August" months[9] = "September" months[10] = "October" months[11] = "November" months[12] = "December" function compute(form) { var val1 = parseInt(form.day.value, 10)
if ((val1 < 0) || (val1 > 31)) { alert("Day is out of range") } var val2 = parseInt(form.month.value, 10) if ((val2 < 0) || (val2 > 12)) { alert("Month is out of range") } var val2x = parseInt(form.month.value, 10) var val3 = parseInt(form.year.value, 10) if (val3 < 1900) { alert("You're that old!") } if (val2 == 1) { val2x = 13; val3 = val3-1 } if (val2 == 2) { val2x = 14; val3 = val3-1 } var val4 = parseInt(((val2x+1)*3)/5, 10) var val5 = parseInt(val3/4, 10) var val6 = parseInt(val3/100, 10) var val7 = parseInt(val3/400, 10) var val8 = val1+(val2x*2)+val4+val3+val5-val6+val7+2 var val9 = parseInt(val8/7, 10) var val0 = val8-(val9*7) form.result1.value = months[val2]+" "+form.day.value +", "+form.year.value form.result2.value = days[val0] } </script> <h3><i>On what day of the week were you born?</i></h3> <p>Enter your birthday</b> (then hit the "Update" button):</p> <form> <p>Numeric Month (1-12): <input TYPE="text" NAME="month" SIZE="2"></p><p>Day of Month (1-31): <input TYPE="text" NAME="day" SIZE="2"> </p> <p>Year (eg. 1960): <input TYPE="text" NAME="year" SIZE="4"> </p> <p><input TYPE="button" VALUE="Update" ONCLICK="compute(this.form)"><input TYPE="reset" VALUE="Clear"> </p> <p>Date of Birth: <input TYPE="text" NAME="result1" SIZE="18"> </p> <p>Day of Week: <input TYPE="text" NAME="result2" SIZE="18"> </p></form>
OUTPUT:
RESULT:
Thus a java script program for birth day calculation is developed and executed successfully.
To write a java program to implement two way communication using TCP ( Transmission Control Protocol).
ALGORITHM:
SERVER: 1. Start the program. 2. Import .net package and other packages. 3. Declare objects for ServerSocket, Socket and PrintStream to transfer server data. 4. Declare objects for Socket and DataInputStream to receive client data. 5. Using PrintStream transfer the data in OutputStream via a port. 6. Run a loop to send data from server until an end or exit string is transferred. 7. Using the same loop receive data from server and store it in a string using DataInputStream. 8. Print the string to display the server data and exit when an end or exit Message is encountered.
CLIENT:
1. Start the program. 2. Import .net package and other packages. 3. Declare objects for Socket, Socket and PrintStream to transfer the client data. 4. Declare objects for Socket and DataInputStream to receive server the data. 5. Using PrintStream transfer the data in OutputStream via a port. 6. Run a loop to send data from server until an end or exit string is transferred. 7. Using the same loop receive data from server and store it in a string using DataInputStream. 8. Print the string to display the server data and exit when an end or exit Message is encountered.
PROGRAM:
SERVER: import java.io.*; import java.net.*; import java.lang.*; class server { public static void main(String a[]) throws IOException { ServerSocket ss=new ServerSocket(8000); Socket s=ss.accept(); PrintStream dos=new PrintStream(s.getOutputStream()); DataInputStream in=new DataInputStream(System.in); DataInputStream inn=new DataInputStream(s.getInputStream()); while(true) { System.out.println("\n"); System.out.println("Msg Send :"); String str=in.readLine(); dos.println(str); if(str.equals("end")) { ss.close(); break; } String str1=inn.readLine(); System.out.println("\n"); System.out.println("Msg Received : " +str1); if(str1.equals("end")) { ss.close(); break; } } } } CLIENT:
import java.io.*; import java.net.*; import java.lang.*; class client { public static void main(String a[]) throws IOException { Socket s=new Socket("LocalHost",8000); DataInputStream in=new DataInputStream(s.getInputStream()); DataInputStream inn=new DataInputStream(System.in); PrintStream dos=new PrintStream(s.getOutputStream()); while(true) { String str=in.readLine(); System.out.println("\n"); System.out.println("Msg Received : " +str); if(str.equals("end")) { s.close(); break; } System.out.println("\n"); System.out.println("Msg Send : "); String str1=inn.readLine(); dos.println(str1); if(str1.equals("end")) { s.close(); break; } } } }
OUTPUT:
RESULT:
Thus a java program for TCP two way communications is developed and interpreted successfully.
Ex.No:05(b)
Date:14/07/10 AIM:
To write a program in java to perform two way message transfer using the User Datagram Protocol (UDP).
ALGORITHM:
SERVER: 1. Start the program. 2. Import .net and other necessary packages. 3. Declare objects for DatagramSocket and DatagramPacket to receive packet data from server. 4. Declare an object for InetAddress of the LocalHost. 5. Receive the client data using receive() method and store it to a string. 6. Run a loop and store the data in the string until the received message points end. 7. Print the string unless it encounters end. 8. Get user input in the same loop and send data until the user input points end. 9. Convert the user input into bytes and send the bytes using DatagramPacket and DatagramSocket. 10. If end is encountered, exit sending data and program.
CLIENT:
1. Start the program. 2. Import .net and other necessary packages. 3. Declare objects for DatagramSocket and DatagramPacket to receive packet data from server. 4. Declare an object for InetAddress of the LocalHost. 5. Receive the server data using receive() method and store it to a string. 6. Run a loop and store the data in the string until the received message points end. 7. Print the string unless it encounters end. 8. Get user input in the same loop and send data until the user input points end. 9. Convert the user input into bytes and send the bytes using DatagramPacket and DatagramSocket. 10. If end is encountered, exit sending data and program.
PROGRAM:
SENDER: import java.io.*; import java.net.*; class sender { public static void main(String args[])throws Exception { while(true) { DatagramSocket ds=new DatagramSocket(); BufferedReader br=new BufferedReader(new InputStreamReader(System.in)); System.out.print("Enter the message : "); String msg=br.readLine(); byte b[]=msg.getBytes(); InetAddress add=InetAddress.getLocalHost(); DatagramPacket dp=new DatagramPacket(b,b.length,add,1234); ds.send(dp); if(msg.equals("exit")) System.exit(0); byte b1[]=new byte[255]; DatagramPacket dp1=new DatagramPacket(b1,b1.length); ds.receive(dp1); String msg1=new String(dp1.getData()); System.out.println("Received Message : " +msg1); } } }
RECEIVER: import java.io.*; import java.net.*; class receiver { public static void main(String args[])throws IOException { DatagramSocket ds=new DatagramSocket(1234); byte b[]=new byte[255]; while(true) { DatagramPacket dp=new DatagramPacket(b,b.length); ds.receive(dp); String msg=new String(dp.getData()); System.out.println("Message received : " +msg); InetAddress add=dp.getAddress(); int port=dp.getPort(); System.out.print("Enter a line of text to send :"); BufferedReader br=new BufferedReader(new InputStreamReader(System.in)); String msg1=br.readLine(); byte b1[]=msg1.getBytes(); DatagramPacket dp1=new DatagramPacket(b1,b1.length,add,port); ds.send(dp1); if(msg1.equals("exit")) System.exit(0); } } }
OUTPUT:
RESULT:
Thus a java program for UDP two way communications is developed and interpreted successfully.
JDBC
To write a java program for connecting access database and perform simple operations.
ALGORITHM:
Step1: Start. Step2: Import sql and io packages. Step3: Create the jdbc driver using Class.for name method. Step4: Create a data source name manually using the database location and table name in the ODBC sources in control panel. Step5: Establish the database connection using DriverManager.getConnection() method, specifying the driver and data source name. Step6: Create object for BufferedReader method to get user input. Step7: Create objects for PreparedStatement, ResultSet for database operations. Step7: Display a menu option as below 1. insert 2. delete 3. view 4. quit Step8: Declare variables to get employee name, number and salary inputs from the user. Step9: Switch between the user options until 4 are pressed.
Step10: if choice=1 then Get user values for employee number, name and salary. Insert into the table using con.prepareStatement(insert into emp values(?,?,?)); Use setInt(var,field) to insert into the database. If choice=2 then Get the employee number from the user. Delete the record with the given number using con.prepareStatement("delete from employee where eno=?") Use ps.executeUpdate() to update the database deletion. If choice=3 then Use the ResultSet method to display the records in the table until no record is found. If choice=4 then exit Step11: End.
CODING:
import java.io.*; import java.sql.*; public class Jdb { public static void main(String args[]) { try { Class.forName("sun.jdbc.odbc.JdbcOdbcDriver"); Connection con = DriverManager.getConnection("jdbc:odbc:employee"); PreparedStatement ps = null; BufferedReader br = new BufferedReader(new InputStreamReader(System.in));
int ch; int eno; do { System.out.print("\n\n 1: Insert\t 2 : Delete\t 3 : View\t 4 : Quit"); System.out.print("\n\n Enter the Choice : "); ch= Integer.parseInt(br.readLine()); switch(ch) { case 1: { String ename; System.out.print("\n\n Enter the employee No : "); eno =Integer.parseInt(br.readLine()); System.out.print("\n\n Enter the employee Name : "); ename=br.readLine(); System.out.print("\n\n Enter the employee sal : "); float esal=Float.parseFloat(br.readLine()); ps= con.prepareStatement("insert into emp Values(?,?,?)");
case 2: { System.out.print("\n\n Enter the emp no : "); eno=Integer.parseInt(br.readLine()); ps=con.prepareStatement("delete from emp where eno=?"); ps.setInt(1,eno); ps.executeUpdate(); System.out.print("\nData deleted..."); break; } case 3: { ps=con.prepareStatement("select * from emp"); ResultSet rs = ps.executeQuery(); System.out.print("\n\n\t Employee No \t Employee Name \t Employee Sal\n"); System.out.print("\t----------------------------------------------"); while(rs.next()) System.out.print("\n\t"+rs.getInt(1)+"\t\t"+rs.getString(2)+"\t\t"+rs.getFloat(3)); break; }
case 4: System.exit(0); break; default : System.out.print("\n\n Invalid Choice....."); break; } }while(ch!=4); } catch(Exception e) { e.printStackTrace(); } } }
OUTPUT:
RESULT:
Thus a java program for jdbc connecting access database is developed and database operations are performed successfully.
MULTITHREADING
ALGORITHM:
Step3: Create two independent classes for thread A and for thread B that extends the abstract class Thread. Step4: Get the name in Thread A class and get the number in Thread B class. Step5: Set Thread sleep time for regular/delayed time display. Step6: Create objects for Thread A and Thread B in the main class. Step7: Run the Threads using start method. Step8: Compile and execute the program at regular/delayed time intervals to get the input and display the user input. The time delay in displaying the user input will be observed. Step8: Stop.
CODING:
import java.io.*;
public void run() { try { String s1; BufferedReader br=new BufferedReader(new InputStreamReader(System.in)); Thread.sleep(2000); System.out.println("Enter the name:"); s1=br.readLine(); Thread.sleep(20000); System.out.println("The name is:"+s1); } catch(Exception e) { System.out.println("Thread1 is being stopped"); } } }
{ int a;
BufferedReader br=new BufferedReader(new InputStreamReader(System.in)); Thread.sleep(5000); System.out.println("Enter the register number:"); a=Integer.parseInt(br.readLine()); Thread.sleep(10000); System.out.println("The register number is:"+a); } catch(Exception e) { System.out.println("Thread2 has been stopped"); } } }
class multithread { public static void main(String args[]) { ThreadA A1=new ThreadA(); ThreadB B1=new ThreadB(); A1.start();
B1.start(); } }
OUTPUT:
RESULT:
Thus a java program for multithreading is developed and executed successfully.
ALGORITHM:
Step1: Start. Step2: Create a class apl that extends Applet class and implements ActionListener class.
Step3: Declare objects for necessary buttons, textarea, and listbox. Step4: In the init() method define the buttons, list box and text area and add the objects to the applet window. Step5: In the ActionPrformed() method, perform the operational logic by getting the input of the button name by click event. Step6: Perform corresponding operation as per the button click. Step7: Finally in the paint() method, display the message and terminate. Step8: Save and compile the java program to get its class file. Step9: Write a html code with <applet> tag by specifying the <applet code> as the name of the compiled java program. Step10: Specify the dimensions of the applet window using height and width parameters. Step11: Save the file in .html format. Step12: In the console mode, run the applet program by AppletViewer <program name>.html. Step13: Specify the input and check for the appropriate output. Step14: Stop.
CODING:
Apl.java: import java.awt.*; import java.awt.event.*; import java.applet.*; public class apl extends Applet implements ActionListener { String msg="";
Button prim,fibo,faci,fact,reverse; TextField f1; List l1; TextArea t1; public void init() { prim = new Button("PRIME"); fibo = new Button("FIBONACCI"); fact = new Button("FACTORIAL"); reverse=new Button("PALINDROME"); Label l=new Label("ENTER THE NUMBER :"); f1= new TextField(30); l1=new List(); t1=new TextArea(2,35); add(prim); add(fibo); add(fact); add(reverse); add(l); add(f1); add(l1); add(t1); prim.addActionListener(this); fibo.addActionListener(this); fact.addActionListener(this); reverse.addActionListener(this); } public void actionPerformed(ActionEvent ae) { String str=ae.getActionCommand(); if(str.equals("PRIME")) { String m; int n; m=f1.getText(); n=Integer.parseInt(m); if(n==1 || n==2 || n==3 || n==5 || n==7) { t1.setText(n+ " is Prime "); } else if(n%2==0 || n%3==0 || n%5==0 || n%7==0) { t1.setText(n+ " is not Prime "); } else {
t1.setText(n+ " is Prime "); } } else if(str.equals("FIBONACCI")) { int i=-1,j=1,s,v,n; String m; m=f1.getText(); n=Integer.parseInt(m); for(v=1;v<=n;v++) { s=i+j; l1.addItem(" The Value is : " +s); i=j; j=s; } } else if(str.equals("FACTORIAL")) { int i,s=1,n; String m; m=f1.getText(); n=Integer.parseInt(m); for(i=1;i<=n;i++) { s=s*i; } t1.setText(" The Factorial of the Given Number is : "+s); } else { String m; int n,rev=0,rem; m=f1.getText(); n=Integer.parseInt(m); int p=n; while(n>0) { rem=n%10; rev=rev*10+rem; n=n/10; } if(rev==p) { t1.setText(p+ " is a Palindrome Number "); }
else { t1.setText(p+ " is Not a Palindrome Number "); } } } public void paint(Graphics g) { g.drawString(msg,6,100); } } Apl.html: <applet code=apl.class height="200" width="400"> </applet>
OUTPUT:
RESULT:
Thus a java program for arithmetic operation using applet is developed and its output is verified.
Ex.No:09
FILE MANIPULATION
Date:25/08/10 AIM:
ALGORITHM:
Step1: Start Step2: import io package. Step3: Declare a class for file manipulation and create BufferedReader to get user input. Step4: Declare objects for BufferedOutputStream, FileOutputStream to write data into a file. Step5: Declare objects for BufferedInputStream and FileInputStream to read the contents of a file. Step6: Get a file name from the user and create it in .txt extension and write the user content into it until the end of the file is reached indicated by@. Step7: Get the file name from the user that is to be evaluated. Step8: Read the contents of the file, and store each content in a temporary variable. Step9: Switch the variable for the content type ie. Vowel or consonant or lines or spacing. Step10: Increment the variables for spacing, number of lines, consonants and vowels by 1 when appropriate variable is encountered. Step11: Display the manipulated file content with the number of words, lines, consonants and vowels. Step12: Stop.
CODING:
import java.io.*; class file { public static void main(String args[])throws IOException { try { BufferedReader br=new BufferedReader(new InputStreamReader(System.in)); System.out.print("\nEnter the file name :"); String f=br.readLine(); FileOutputStream fos=new FileOutputStream(f+".txt",true); BufferedOutputStream bos=new BufferedOutputStream(fos,1024); char msg; int v=0,sp=0,c=0,l=1; while((msg=(char)br.read())!='@') bos.write(msg);
bos.close(); fos.close();
String fx=br.readLine(); System.out.print("\nEnter the file name to be read :"); String f1=br.readLine(); int imsg; FileInputStream fis = new FileInputStream(f1); BufferedInputStream bis = new BufferedInputStream(fis); while((imsg=bis.read())!=-1) { switch((char)imsg) { case 'a': v=v+1; break; case'e': v=v+1; break; case'i': v=v+1; break; case'o': v=v+1; break; case'u': v=v+1;
break; case ' ': sp=sp+1; break; case '\n': l=l+1; break; default : c=c+1; break; } } bis.close(); fis.close(); System.out.print("\nNumber of vowels:"+v); System.out.print("\nNumber of Consonants:"+c); System.out.print("\nNumber of spaces:"+sp); System.out.print("\nNumber of Lines:"+l); } catch(FileNotFoundException fe) { System.out.print("\nNo file...."); }
} }
OUTPUT:
RESULT:
Thus a java program for file manipulation is developed and executed successfully.
Ex.No:10 Date:01/09/10
USER LOGIN
AIM:
To develop a jsp page for user login.
ALGORITHM:
Step1: Start. Step2: Add two text boxes to get user name and password. Step3: Add a button to navigate to the next page on click. Step4: Use form action =nextform.jsp to navigate on click. Step5: Establish database connection in the next page to check user name and password. Step6: If user name and password matches, display successful else display login failed. Step7: End.
CODING:
import="java.util.*" import="javax.servlet.http.*" %> <form action="login2.jsp" method=post> <body> USER NAME: <INPUT type=text name=un SIZE=12> <br> PASSWORD: <INPUT type=password name=pwd SIZE=12> <br>
Login2.jsp: <%@ page import="java.sql.*" %> <%@ page import="java.io.*" %> <html> <body> <p> </p> <p align="center"><strong>LOGIN</strong></p> <% String user=request.getParameter("un"); int pass=Integer.parseInt(request.getParameter("pwd")); String name=""; int flag=0; Class.forName("sun.jdbc.odbc.JdbcOdbcDriver"); String db = "jdbc:odbc:Driver={Microsoft Access Driver
(*.mdb)};DBQ=d:\\login.mdb"; Connection cn = DriverManager.getConnection(db); Statement st= cn.createStatement(); ResultSet rs; rs=st.executeQuery("select * from login"); while(rs.next())
if (flag==1) { out.println("Login Successful !!!"); %> <br><br> <font size="6" face="comic sans ms" color="green"> <% out.println("Welcome " +name); } if(flag==0||pass=='\0') out.println("Invalid User..."); %> </p> </body> </html>
OUTPUT:
Login1.jsp:
Login2.jsp:
RESULT:
Thus a jsp program for user login is developed and executed successfully.
E-BOOKS PURCHASING
ALGORITHM:
Step1: Start. Step2: Add the basic html tag like <html>,<head>,<body>. Step3: Add check boxes with author names to select them. Step4: Add button to navigate to the next page after selecting author. Step5: Establish jdbc connection to access database information. Step6: Check in the list box and click query button to display a table containing the information about the selected author, book name, isbn number, price. Step7: Check in the table to select the preferred book. Step8: Add two buttons order and clear; click order to purchase the book. Step9: Navigate to the next page to get the purchase information on clicking the order button. Step10: Run the program in web browser. Step11: Stop.
CODING:
Book.jsp: <html> <head> <title>Book Query</title> </head> <body> <h1 align="center">Books Purchasing</h1> <h3>Choose Author(s):</h3> <form method="get"> <input type="checkbox" name="author" value="Thomas A Powel">Thomas A Powel <input type="checkbox" name="author" value="Silberschatz">Silberschatz <input type="checkbox" name="author" value="Ullman">Ullman <input type="submit" value="Query"> </form> <% String[] authors = request.getParameterValues("author"); if (authors != null) { %> <%@ page import = "java.sql.*" %> <%
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver"); String db = "jdbc:odbc:Driver={Microsoft Access Driver (*.mdb)};DBQ=d:\\book.mdb"; Connection cn = DriverManager.getConnection(db); Statement st = cn.createStatement(); String sqlStr = "SELECT * FROM books WHERE "; for (int i = 0; i < authors.length; i++ ) { sqlStr = sqlStr + "author = '" + authors[i] + "' "; if (i != authors.length - 1) { sqlStr += "OR "; } } sqlStr += "AND qty > 0 ORDER BY price DESC";
System.out.println("Query statement is " + sqlStr); ResultSet rs = st.executeQuery(sqlStr); int isbn; %> <hr> <form method="get" action="order.jsp"> <table border=1 cellpadding=5> <tr> <th>Order</th> <th>Author</th>
<th>Title</th> <th>Price</th> <th>Qty</th> <th>ISBN</th> </tr> <% while (rs.next()) { isbn = rs.getInt("isbn"); %> <tr> <td><input type="checkbox" name="isbn" value="<%= isbn %>"></td> <td><%= rs.getString("author") %></td> <td><%= rs.getString("title") %></td> <td>$<%= rs.getInt("price") %></td> <td><%= rs.getInt("qty") %></td> <td><%= isbn %></td> </tr> <% } %> </table> <br> <input type="submit" value="Order">
<input type="reset" value="Clear"> </form> <% rs.close(); st.close(); cn.close(); } %> <a href="<%= request.getRequestURI() %>"><h3>Back</h3></a> </body> </html>
Order.jsp: <html> <head> <title>Order Book</title> </head> <body> <h1>Thank you for ordering...</h1> <% String[] isbns = request.getParameterValues("isbn"); if (isbns != null) { %>
<%@ page import = "java.sql.*" %> <% } %> <a href="book.jsp"><h3>Back</h3></a> </body> </html>
OUTPUT:
Book.jsp:
Order.jsp:
RESULT:
Thus a jsp program for e-book purchasing is developed and executed successfully.
ALGORITHM:
Step1: Start Step2: In the index page, import the java packages lang, servlet and sql. Step3: Give the title for the page, add buttons, combo box for and their actions using html. Step4: Use jdbc steps for connecting a database with the jsp page. Step5: Using the select query, display the contents from the table in the combo box and
get the quantity from the user.. Step6: By using the form action, move to the next jsp page and also pass the selected item and quantity from the previous page to the current page using request.getParameter() method. Step7: In the next page ie process.jsp evaluate the selected item for its amount by comparing the received parameter with the database entry using preaparedStatement(). Step8: Validate the entries and display the bill by passing the parameters from process.jsp page to bill.jsp page using session attributes. Step9: Update the database for reduction of goods after being sold. Step10: Display the updated database content in view.jsp page. Step11: Stop.
CODING:
Index.jsp <%@ page import="java.io.*" import ="java.sql.*" import="java.lang.*" import="java.util.*" import="javax.servlet.http.*"%> <html> <head> INDEX
</head> <body > <center><H1>ORDER PROCESSING</H1></CENTER> <table border=10> <form action="process.jsp"> <% TreeSet ts=new TreeSet(); Class.forName("sun.jdbc.odbc.JdbcOdbcDriver"); String db = "jdbc:odbc:Driver={Microsoft Access Driver (*.mdb)};DBQ=d:\\order.mdb"; Connection con = DriverManager.getConnection(db); Statement st=con.createStatement(); ResultSet rs; rs=st.executeQuery("Select * from orpro"); while(rs.next()) { ts.add(rs.getString(1)); }
%> <CENTER><tr><td> SELECT YOUR PRODOUCT : <SELECT NAME="item" > <option>--select--</option> <%
Iterator s=ts.iterator(); while(s.hasNext()) {Object e=s.next();%> <OPTION value="<%=e%>"> <%=e%></OPTION> <%}%> </select> <br>
SELECT NO OF QUANTITY : <INPUT type=text name=qty SIZE=12> <br> <CENTER> <input type="submit" value="submit" name="next" > <input type="reset"value="Reset" name="reset" onClick="checkIt(event)"> <a href="view.jsp">view</a> </CENTER> </tr></td> </CENTER> </table> </form> </body> </head> </html> Process.jsp
<%
%>
<html><body><center> ***********************ORDER
PROCESSING*****************************</center> <br><br><br><br> <%Class.forName("sun.jdbc.odbc.JdbcOdbcDriver"); String db = "jdbc:odbc:Driver={Microsoft Access Driver (*.mdb)};DBQ=d:\\order.mdb"; Connection con = DriverManager.getConnection(db); Statement st=con.createStatement(); ResultSet rs; rs=st.executeQuery("select * from orpro where item='"+item+"'"); %> <table border=1 width="40%" aligh="center" valign="center"> <th>prodouctname</th> <th>unit price</th> <th>quantity</th> <th>total</th></tr> <%while(rs.next()) { <tr>
int qt=rs.getInt(2); int pr=rs.getInt(3); if(qt>qty1) { PreparedStatement ps; ps=con.prepareStatement("update orpro set qty=qty-'"+qty1+"' where item='"+item+"'");
//out.println("the name of the product is="+item); %> <%} } st.close(); con.close();%> </body></html> Bill.jsp <%@ page language="java" import="java.sql.*,java.util.*"%>
<%String item=(String) session.getAttribute("item"); int qty1=(Integer) session.getAttribute("qty1");%> <html><body > <p> </p> <p align="center"><strong>ORDER PROCESSING </strong></p> <p align="center">Bill for Purchase </p> <table width="473" border="0" align="center" celpadding="0" celspacing="0"> <tbody> <% Calendar calendar=Calendar.getInstance(); String date=calendar.get(calendar.DATE)+":"+calendar.get(calendar.MONTH)+":" +calendar.get(calendar.YEAR);%> <% String time=(calendar.get(calendar.HOUR))+":" +(calendar.get(calendar.MINUTE))+":"+(calendar.get(calendar.SECOND));
%> <tr> <th width="42"><div align="left"> <p>Date:</p> </div></th> <td width="261"><div align="left"><%=date%></div></td> <th width="52">Time:</th> <td width="100"><%=time%></td> </tr>
</tbody> </table> <table width="329" border="0" align="center" celpadding="0" celspacing="0"> <td height="34"> <center><br> <h3>Cash Bill</h3></CENTER> <% Class.forName("sun.jdbc.odbc.JdbcOdbcDriver"); String db = "jdbc:odbc:Driver={Microsoft Access Driver (*.mdb)};DBQ=d:\\order.mdb"; Statement st=con.createStatement(); ResultSet rs; rs=st.executeQuery("select * from orpro where item='"+item+"'"); %><table border=1 width="40%" aligh="center" valign="center"> <tr><th>prodouctname</th> <th>unit price</th> <th>quantity</th> <th>total</th></tr> <% while(rs.next()){ int qt=rs.getInt(2); int pr=rs.getInt(3); %> <tr>
<%}%></table> View.jsp
</body>
</html>
<%@ page language="java" import="java.sql.*"%> <html> <body> </center> <br><br><br><br> <% Class.forName("sun.jdbc.odbc.JdbcOdbcDriver"); String db = "jdbc:odbc:Driver={Microsoft Access Driver (*.mdb)};DBQ=d:\\order.mdb"; PreparedStatement ps=con.prepareStatement("select *from orpro"); ResultSet rs=ps.executeQuery();%> <table border=1 width="40%" aligh="center" valign="center"> <tr> <th>Prodouctname</th> <th>Quantity</th> <th>Unit price</th> </tr> <%while(rs.next()) { String item=rs.getString(1); int qt=rs.getInt(2); int pr=rs.getInt(3);%>
</body> </html>
OUTPUT:
Index.jsp:
Bill.jsp:
View.jsp
RESULT:
Thus a jsp program for order processing is developed and its output is verified successfully.