WT Manual
Uploaded by
utcm77WT Manual
Uploaded by
utcm77WEB TECHNOLOGY LAB VI SEM
DEPARTMENT OF INFORMATION TECHNOLGY
Web Technology
Lab Manual
Academic Year: Dec 2016 – May 2017
1 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
List of Exercises
Exercises Cycle – I
(1) STUDY OF HTML TAGS
(2) CREATION OF SEMESTER TIME TABLE USING HTML TAGS
(3) RESUME PREPARATION USING HTML TAGS
(4) CREATION OF INSTITUTIONAL WEBPAGE
(5) WEB PAGE DESIGN USING CSS
(6) ARITHMETIC OPERATION USING JAVASCRIPT
(7) BUILT-IN FUNCTION USING VB SCRIPT
Exercises Cycle – II
(8) CREATION OF APPLET TO DESIGN SMILEY
(9) CREATION OF THREADS USING JAVA
(10) ONE WAY CLIENT SERVER COMMUNICATION USING TCP
(11) WEB APPLICATION FOR REGISTRATION PROCESS USING JSP
(12) DYNAMIC WEB PAGE TO DISPLAY MOVIE LIST USING ASP.NET
(13) CREATION OF XML DOCUMENT TO DISPLAY CD CATALOG USING CSS
Content beyond Syllabus
(14) WEB APPLICATION TO ADD & DELETE ITEMS USING ANGULAR JS
(15) WEB APPLICATION TO PERFORM FORM VALIDATION USING ANGULAR JS
2 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
EX.NO: 1 STUDY OF HTML TAGS
AIM
To study the html tags.
HYPER TEXT MARKUP LANGUAGE (HTML):
HTML is a markup language that enables you to create attractive and interactive websites.
Every webpage you look at is written in a language called HTML
A markup language provides a way to describe the structure of a Web Page, specifying how text or
graphs are displayed on the web pages.
It enables you to present text in a readable format.
The markup language specifies the code for defining, processing and presenting the text on web
pages. These codes are called tags.
HTML EDITORS:
You can easily edit HTML files using a WYSIWYG (What You See Is What You Get) editor like
FrontPage or Dreamweaver
You want to be a skillful Web developer, we strongly recommend that you use a plain text editor to
learn your primer HTML.
HTML documents are text files made up of HTML elements.
HTML elements are defined using HTML tags.
FUNDAMENTAL OF HTML TAGS:
HTML tags are used to mark-up HTML elements.
HTML tags are surrounded by the two characters < and >.
The surrounding characters are called angle brackets.
HTML tags normally come in pairs like <b> and </b>.
The first tag in a pair is the start tag; the second tag is the end tag.
The text between the start and end tags is the element content.
HTML tags are not case sensitive; <b> means the same as <B>.
HTML elements have empty content.
EXAMPLE:
<!DOCTYPE HTML>
<html>
3 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
<head>
<title> THIS IS THE TITLE TAG </title>
<head>
<body>
This is the body of the document.
</body>
</html>
OUTPUT:
IDENTIFIYING THE BASIC STRUCTURE OF AN HTML PAGE
Some of the HTML tags, such as <head> and <body> are called structural tags as they create the
structure of a document and do not affect the appearance of the web page.
Every tag has some tags associated with it. This attributes modify the appearance or enhance the
functionality of the tags and are provides as name-value pairs.
An html page contains the following structural tags:
<!doctype html>
<html>
<head>
<body>
TAGS
I. < ! DOCTYPE HTML>
NAME : Document Type
SYNTAX : <! DOCTYPE HTML>
DESCRIPTION :
4 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
The < ! doctype> tag provides an instruction to the browser about the version of HTML
It should be the first tag in an HTML document. It does not have any end tags
II. <HTML>
NAME : html tag
SYNTAX :
<html>
…….
…….
</html>
DESCRIPTION :
The <html> tag specifies to the browser that a document is an html document.
The opening HTML tag, <HTML>, and the closing HTML tag, </HTML>, mark the
beginning and end of a web page.
It is the container tag which encloses the entire content of the web page.
III. <HEAD>
NAME : head tag
SYNTAX :
<head>
……
……
</head>
DESCRIPTION :
The <head> tag is contained within the <html> and </html> tags.
It is used to describe the header of the HTML document.
The header is the first section of an HTML document where the global settings for the
document, such as the web page title, file format and the last modified date, can be
defined.
IV. <BODY> TAG
NAME : body tag
SYNTAX :
<body>
……
……
5 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
</body>
DESCRIPTION:
The <body> tag sets the boundary for the content in the HTML document.
When the web page is displayed in a browser, users can see the content enclosed
within the opening <BODY> and closing </BODY> tags.
The HTML content that can be placed within the <body> tag includes text and
graphics to be displayed on the web page.
EXPLORING THE <HEAD> TAG:
The head section contains the <head> tag along with some other complex tags
The following tags are used in the <head> section of an HTML document
o <title>
o <base>
o <style>
o <link>
o <script>
I. <TITLE>
NAME : title tag
SYNTAX : <title> title of the page </title>
DESCRIPTION :
The <title> tag defines the title of the document that appears in the title bar of the
browser window. In addition, this title:
Displays a title for the page to be used in the search-engine results.
Provides a title for the page that will be added to favorites
An HTML document can have only one title. If a title is not provided, most web
browsers display the name of the html document has the default title of the web page.
EXAMPLE:
<head>
<title> title of the page </title>
</head>
6 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
II. <BASE>
NAME : base tag
SYNTAX : <base href=”location”>
DESCRIPTION :
The <base> tag specifies a base URL or address for all the related links on the page.
EXAMPLE:
<html>
<head>
<title> The BASE TAG </title>
<base href=”d:/Images/”>
</head>
<body>
<img src=”image.jpg”>
</body>
</html>
III. <STYLE>
NAME : title tag
SYNTAX : <title> title of the page </title>
DESCRIPTION :
The <style> tag defines the style information associated with the HTML document.
Using this element, you can specify the way the HTML elements should render in a
browser
The style tag provides various attributes like type and media
EXAMPLE:
<html>
<head>
<title> MY STYLES </title>
<style>
p{ font-style: italic;}
</style>
</head>
7 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
<body>
<p> My paragraph tag in the html document within the body tag</p>
</body>
</html>
Elements for the body section:
The body tags <BODY> …. </BODY> contain the actual page content.
All page’s text, images, forms links and other HTML come in the body block.
The body tag has 3 commonly used attributes
1. BGCOLOR- It specifies the background color for the page.
2. TEXT- It specifies the color of the text on the page.
3. LINK-It specifies the color of the hyperlink on the page.
HTML named colors:
Color values are represented in either hexadecimal numbers or color names. User can specify only 16
by names. It can specify any color by its hexadecimal values.
White - #FFFFFF
Yellow - #FFFF00
Red - #FF00FF
Green - #008000
Blue - #0000FF
Black - #000000
The default background, text and link colors for the web page are white, black and blue.
Comments in web pages:
Comments make the web page code more readable and documentation is eased.
Comments are enclosed within the comments tag <!- and --> and are simply ignored by the browsers.
Browsers simply interpret the comment begin tag and stop display until the end comment tag is
encountered.
Heading tags:
<H1>……</H1> - Level 1 Header
8 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
<H2>……</H2> - Level 2 Header
<H3>……</H3> - Level 3 Header
<H4>……</H4> - Level 4 Header
<H5>……</H5> - Level 5 Header
<H6>……</H6> - Level 6 Header
Heading in HTML are to be used like heading in Books and Newspapers. Headings divide sections of
text and improve page readability.
The above six levels of headings defined by HTML.
Text level elements:
  is used to insert a single blank space.
<BR> indicates the line break sometimes user might want to use is to separate text into paragraphs.
<P> - Paragraph tag. These tags add a blank line before and after the block they enclose. Two line
break tag can be used consecutively.
<B>…..</B> - Bold tag
<I>…..</I> - Italic tag
<U>…..</U> - Underline tag
It can effect as indicated in the modification of the font.
Example:
<HTML>
<HEAD>
<TITLE> Page with HTML Format tag </TITLE>
</HEAD>
<BODY>
<B> India is one of the developing country </B>
<BR>
<I> Web Technology </I>
<U> Internet Programming </U>
<P> Welcome Here
</BODY>
</HTML>
9 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
Lists tag:
The most commonly list are of 2 types
Ordered Lists (OL)
Unordered Lists (UL)
The ordered list tags <OL>……</OL> create ordered list item.
The unordered list tags <UL>……</UL> create unordered list item.
For each list item in the list, within either of these set of tag, user can use the listing tag (LI) – List
Item, this tag is used singly and does not have an end tag.
<HR> is used to draw a horizontal line on the web page requires only a single tag.
Definition List (DL) tag:
Definition list are also commonly used to display information in the form of definitions which have
common use to convey information to users.
A definition has three parts
Definition Term (DT)
Definition Data (DD)
Definition List (DL) tag. <DL>……</DL> - create a definition list.
Within these tags, user can use the definition term tag <DT> - for each list item term.
Definition data tag <DD> - for each list item’s data.
Both the <DT> and <DD> tag have no associated end tags.
Font tag:
<Font color = “Red” Face = “Times” size = 5>
All data displayed here is red in color and has the times font and the size is 5
</Font>
Anchor tag:
<a href = “location of the page”> </a>
It is used to hyperlink the web page.
10 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
The most important capability of the HTML is its ability to create hyperlinks to documents and make
the World Wide Web as a collection of linked documents.
The links are created using anchor <a>…..</a> element.
This element requires an attribute to mark the location of the object to get linked. The address of the
object is specified using href attribute.
The href attribute of the tag tells the browser to get another html document of the web.
Internal linking:
To create links to external documents. HTML has facilities to include internal links also by assigning a
location name to any individual point in an HTML document.
This location name can then be added to the page URL
For internal linking also, the anchor tag is used.
Syntax:
To create name the following tag is used
<a name=”location”> </a>
To refer to the location use
<a href = “#name”> text </a>
Embedding Images:
Images can be embedded into the web page. To add images as a background for the whole web page,
the following format is used,
<body background = “bg.gif”>
To include the image as a normal figure in the web page the <img> tag is used.
The image tag has the following attributes
src
height
width
border
align
alt
The src attribute is used to specify the location of the image, height and width, specify the size.
11 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
alt attribute which is provided for browsers that have images turned off or that cannot have images.
The value of alt attribute will appear on screen in the place of the images.
Example:
< img src = “url “ height = “144” border = “1” width = “200” alt = “An image is here”>
</img>
The other related tag is <map> which is used to create hot spots. The syntax is
<map name = “ “>
……
</map>
Example:
The following code creates a hot spot of rectangular shape and has the hyperlink in the coordinates
mentioned.
<map>
<area shape = “rect” cords =”23, 45, 56, 89” href = “source.html”>
</map>
Frames:
Frame layout is one in which the browser windows is broken into multiple region called frames.
Each frame contains different HTML documents.
The <frameset> tag is a container for frames and replaces the body tag. </frameset>
<frame> tag is used to place the contents into the frame.
Example:
<frameset rows = “value” cols = “value”>
The attribute rows – The window is to be divided in horizontal stripes.
The attribute cols – The window is to be divided in vertical stripes.
Example:
Divides the window into 2 regions in row wise
<frameset rows = “30%, 70%”>
12 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
The <frame> tag is used to place different HTML documents in each frame.
<frame src = “ “ frameborder = “0|1” name = “name” scrolling = “yes|no|auto”>
Other tags:
& – is used to insert an ampersand
The tag <del> is used to strike through text with a horizontal line.
The tag <sub> and <aup> are used to turn the text into subscript and superscript.
To draw a horizontal line in the web page <hr> tag is used. This tag has 3 attributes
width – to specify the width of the line
size – to specify the height of the line
noshade – eliminates the default shading effect and instead display the horizontal rule as a solid
color bar.
Tables:
This form tag is the HTMLs best way of arranging information in space and controlling layout
Table element to format a table
The various tag in table as
<table> …… </table>
The attributes is align = left, center, right
The other attributes is border = make a border around the table & its cells
1. The <tr> element (table row) inserts a row in the table.
2. The <td> element (table detail) inserts a cell within a row
3. The <th> element (table header) to add headings to the rows and columns of the table.
Example:
<table>
<tr>
<td> apples
<td> celery
</tr>
<tr>
<td> oranges
13 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
<td> carrots
</tr>
</table>
Output:
Apples Celery
oranges Carrots
<caption> tag is used to be added to row and column headings. By default it will be aligned in center
of a table
<border> is used for draw a border around the tables and the individual cells. Specify the border width
in pixels
Color can be added to tables by using the bgcolor = and bordercolor = attributes. These attributes are
available in the Table, <tr> and <td> elements; so user can apply colors to all the cell in a table,
selected rows and individual cells.
Example:
<table border = “1” cellspacing = “10%” cellpadding = “10%”>
Spanning rows:
The two types of attributes are
colspan – to span column
rowspan – to span rows
Example:
<table border = “2”>
<tr>
<th colspan = 3> Tic Tac Games </th>
</tr>
<tr>
<td> X </td>
<td> O </td>
<td> X </td>
14 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
</tr>
</table>
Example:
<table border = “2”>
<tr>
<th rowspan = 3> Tic Tac Games </th>
</tr>
<tr>
<td> X </td>
<td> O </td>
<td> X </td>
</tr>
</table>
The bgcolor = attribute sets the color used to fill the background of the cell before text and images are
drawn.
The border color = attribute sets the color of the borders drawn around the table, row or cell.
Control spacing within a table:
Cellspacing attribute determines the amount of space between two adjacent cells or between a side of a
cell and border of the table.
Cellpadding determines the amount of space between the content of cell and edge of the cell.
HTML Forms:
Form provides a way to prompt the user for information and to carry out the actions based on the
input.
A form consists of one or more input controls that the user uses to enter text and select choices.
Once the user provides the input, the form collects the data and sent it to a destination specified in the
form element.
To carry out the requested action, the server must have a script or other service that corresponds to the
destination.
A form can contain inputs like text fields, check boxes, passwords, radio-buttons, submit buttons and
reset buttons.
The <form> tag is used to create an HTML form.
15 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
<form>
……..
</form>
HTML forms are used to pass the data to the server.
Input Types:
1. Text Fields
2. Check Boxes
3. Password
4. Radio Button
5. Submit Button
6. Reset Button
7. Image Based Buttons
8. Scripted Buttons
The syntax is
<input type = “text | passwd” name =”name” value =”default_value” size=”field size”>
1. Text Fields:
<input type=”text”> defines a one line input field that a user can text into.
Example: <form>
First name: <input type=”text” name=”first name”>
Last name: <input type=”text” name=”last name”>
</form>
Output:
First name:
Last name:
The default width of a text field is 20 characters.
2. Password Field:
<input type=”password”> defines a password field.
Example: <form>
Password: <input type=”password” name=”pwd”>
16 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
</form>
Output:
Password:
The characters in a password field are masked (shown as asterisks or circles).
3. Radio Buttons:
<input type=”radio”> defines a radio button.
Radio buttons let a user to select only one of a limited number of choices.
Example:
<form>
Gender<input type=”radio” name=”gender” value=”male” checked> Male
Gender<input type=”radio” name=”gender” value=”female”> Female
</form>
Output:
Male
Female
4. Checkboxes:
<input type=”checkbox”> defines a checkbox.
Checkboxes let a user to select one or more options of a limited number of choices.
Example:
<form>
<input type=”checkbox” name=”vehicle” value=”bike”> Bike <br>
<input type=”checkbox” name=”vehicle” value=”car”> Car
</form>
Output:
Bike
Car
5. Submit Button:
17 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
<input type=”submit”> defines a submit button.
A submit button is used to send the form data to a server. The data is sent to the page specified in
the form’s action attribute.
The file defines in the action attribute usually does something with the receiving input.
<form name="input" action="html_form_action.asp" method="post">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
How the HTML code above looks in a browser:
Submit
Username:
Click the “submit” button, the browser will send your input to a page called “filename”.
6. Text Area:
This tag sets up a multiple line input text window.
Syntax:
<textarea name=”name” rows=”no of rows” cols=”no of cols” accesskey=”shortcut key”></textarea>
Example: Give the comments here <br>
<textarea name=”comments” rows=10 cols=20>
</textarea>
Output:
7. Selection List (<select>):
This form tag is used to set up a list of choices from which a user can select one or many.
The syntax is
<select name=”name”>
<option>…………</option>
<select>
Example:
<form name=”form1”>
Text<input type=”text” name=”textfield” size=20><br>
18 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
<select name=”select1”>
<option> Item1</option>
<option> Item2</option>
</select>
</form>
Output:
8. Image Button:
<input type=”image” src=” “ name=”submit” value=”submit”>
9. Filename:
<input type=”file” name=”filename” value=” “ size=25> Browse
Example:
Browse
The form tag can be used in the HTML code.
<form action=” filename“ method=”get | post” target=”response_frame”>
</form>
The method attribute is used to send the form data to the web server.
The default attribute value for the method is get which appends the data to the end of the processing
script URL.
If the method has the value post, then the data is sent to the web server as a separate transaction.
The value post is used when the form data is to be stored in a database or as a processing data in the
web server.
Example:
<html>
<head>
<title> Basic Form </title>
</head>
19 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
<body>
<center> <h1> Form Submission </h1> </center>
<form action=" " method="get">
Login Name: <input type="text" name="login" size=20> <br>
Password: <input type="password" name="pass" size=20> <br>
Birthdate: <input type="text" name="DOB" size=20> <br>
Gender: <input type="radio" name="gender" value="F" checked> Female
<input type="radio" name="gender" value="M"> Male <br> <br>
Department
<select name="dept">
<option> CSE</option>
<option> IT</option>
</select><br>
Give the comments here <br>
<textarea name="comments" rows=10 cols=20> </textarea>
<input type="button" value="check" OnClick="validate()"> <br>
<input type="submit" value="login" OnClick="submit()">
<input type="reset" value="clear" OnClick="clear">
</form>
</body>
</html>
20 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
OUTPUT
RESULT
Thus the basic HTML tags have been studied.
21 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
EX.NO:2 CREATION OF SEMESTER TIME TABLE USING HTML TAGS
AIM
To create a static web page for displaying Semester Time Table using table tag.
PROCEDURE
Step 1: Create a new html file with basic structural tags
Step 2: Under the <head> tag, define a <title> tag with the element contents as Time Table and close
the <title> and <head> tag
Step 3: Under the <body> tag, define the following:
I. Create a <h1> tag with the properties, face of arial black, align as center within the tag
<h1 face="arial black" align="center">
properties
II. Under the <h1> tag, declare <font> tag with the property color as Red within the tag
III. Give the element content for the <h1> tag is Time Table and close the <h1> tag
IV. Create <h2> tag with the properties, face as purple and align as center and style with color
as #3300FF within the tag
V. Give the element content for <h2> tag as THRID YEAR "B" TIME TABLE
And close the tag
VI. Create a <table> tag with the properties, border of 1, cellpadding as 15% and cellspacing as
0, align as center, style of color #3333FF and BGCOLOR as #66FF99
i. Within the table tag, create a row using <tr> tag with property specifying
BGCOLOR as GREY within the tag
ii. Within the <tr> tag, create a table head with <th> tag with the element content as
Time/Date
iii. Create 11 <th> tag to specify the times allotted for the subject
iv. Close the <tr> tag
v. Create another row <tr> tag, with one table head <th> tag with property BGCOLOR
as GREY and the element content as the Monday and create 11 column tags <td>
with the property, align as center and specify the subject for the time allotted for the
day as the element content
vi. For the fifth column specify the property as rowspan with the value as 6 and 7 th
column specify the property as columnspan with value 3
vii. Repeat the above steps v to schedule the timetable for the rest of the working days
and specify the columnspan wherever it is necessary like the lab sessions
viii. Close the <table> tag
22 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
Step 6: close all the structural tags
Step 7: Execute the web page
SOURCE CODE
timetable.html
<html>
<head>
<title>time table</title>
23 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
</head>
<body>
<h1 face="arial black" align="center">
<font color="red"> time table </font>
</h1>
<h2 face="purple" align="center" style="color:#3300ff">thrid year "b" time table </h2>
<table border="1" cellpadding="15%" cellspacing="0" align="center" style="color:#3333ff"
bgcolor="#66ff99">
<tr bgcolor="grey">
<th><b>time / <br> days</b></th>
<th>8.45a.m.
-09.35a.m.</th>
<th>09.35a.m.
-10.25a.m </th>
<th>10.25a.m.
-10.40a.m</th>
<th>10.40a.m.
-11.30p.m.</th>
<th>11.30p.m.
-12.20p.m.</th>
<th>12.20p.m.
-01.00p.m.</th>
<th>01.00p.m.
-01.50p.m.</th>
<th>01.50p.m.
-02.40p.m.</th>
<th>02.40p.m.
-02.55p.m.</th>
<th>02.55p.m.
-03.45p.m.</th>
<th>03.45p.m.
24 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
-04.35p.m.</th>
</tr>
<th bgcolor="grey"><b>monday</b></th>
<td align=center> ooad</td>
<td align="center">wt</td>
<td rowspan=2><b>break</b></center></td>
<td align="center">cn</td>
<td align="center">ai</td>
<td rowspan=6>
<center><b>l<br><br>u<br><br>n<br><br>c<br><br>h</center></b></td>
<td align="center">ict</td>
<td colspan=4><center><b> cn/wt/mini projectlab</center></b></td>
</tr>
<tr>
<th bgcolor="grey"><b>tuesday</b></th>
<td align="center">cn</td>
<td align="center">wt</td>
<td align="center">bi</td>
<td align="center">ooad</td>
<td align="center">ai</td>
<td align="center">wt</td>
<td align="center"><b>break</b></center></td>
<td>cn</td>
<td>ooad</td>
</tr>
<tr>
<th bgcolor="grey">wednesday</th>
<td align="center">ooad / test</td>
<td colspan=4><center><b>placement</b></center></td>
<td align="center">cn</td>
<td colspan=4><center><b>cn/wt/mini projectlab</center></b></td>
</tr>
25 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
<tr>
<th bgcolor="grey">thursday</th>
<td align="center">cn</td>
<td colspan=4><center><b>cn/wt/mini projectlab</center><b></td>
<td colspan=2><center>gp ii </center></td>
<td rowspan=3><b>break</b></td>
<td align="center">bi</td>
<td align="center">wt</td>
</tr>
<tr>
<th bgcolor="grey">friday</th>
<td align="center">cn / test</td>
<td align="center">wt</td>
<td rowspan=2><b><center>break</center></b></td>
<td align="center">ooad</td>
<td align="center">bi</td>
<td align="center">ict</td>
<td align="center">cn</td>
<td align="center">ooad</td>
<td align="center">ai</td>
</tr>
<tr>
<th bgcolor="grey">saturday</th>
<td align="center">wt</td>
<td align="center">cn</td>
<td align="center">ict</td>
<td align="center">wt</td>
<td align="center">ooad</td>
<td align="center">ai</td>
<td align="center">ooad</td>
<td align="center">cn</td>
26 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
</tr>
</table>
</b>
</font>
</body>
</html>
27 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
OUTPUT
RESULT
Thus the static web pages for semester time table have been created and the output is verified.
28 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
EX.NO:3 RESUME PREPARATION USING HTML TAGS
AIM
To create a static web page for resume preparation using HTML tags.
PROCEDURE:
Step 1: Create a new html file with basic structural tags
Step 2: Within the <head> tag, define a <title> tag with the element contents as Resume Preparation
and close both the <title> and <head> tag
Step 3: Within the <body> tag, define the following,
I. For the <body> tag specify the property as bgcolor as grey within the <body> tag
II. Use the <h1> tag with the properties as, face as cambria, size as 8, color as white and
align center and give the element content as Resume within the body tag and close the
<h1> tag
III. Insert an image using <img> tag and give the source of the image file using src element
and also the source for the alternative picture if no source is found using alt element
and specify the properties, align as right, height as 30% and width as 20% within the
tag
<img align="right" src="images.jpg" alt="pic" height="30%" width="20%">
IV. Use <br> tag for giving new line space
V. Use the <h2> tag with the properties, face as cambria, size as 6, color as white within
the tag and use to give necessary white spaces and give the element content as
SMVEC and close the tag
VI. Use the <div> tag with the property align as center, face as cambria and size as 4
within the tag and give the address, mail id and phone number as the element content
VII. Use the <hr> tag with the properties, size as 3 and color as red within the tag and use
the <dl> tag with properties, face as Cambria, size as 4 and color white and use the
<DT> tag and give the element content as Objective and close the <DT> tag
VIII. Use the <dd> tag with the properties, face cambria, size 4, and give the content for the
objective as the element content and close <dd> and <dl>
IX. Use <hr> tag with properties, size as 3 and color as red within in the tag, and use
<font> tag with the properties face as cambria size as 4 and color as white and specify
the element content as academic qualification and close the <font> tag
X. Use the <br> to give necessary breaks
XI. Use <table> tag to create a table with the properties, border as 3, cellpadding as 5,
cellspacing as 5, width as 80% align as center
29 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
XII. Use the <font> tag with the properties, face as cambria and size as 4 within the tag and
use <tr> to create a row and align it to center and use 6 <th> tags to specify the table
heads for the table and close the <tr> tag,
XIII. Use the <tr> tags and <td> tags to specify your educational qualifications
XIV. Close the <font> and the <table> tag
XV. Add all the skills like technical, area of interest, courses studied and achievement
XVI. Add your biodata with proper alignments by using and finally with declaration
XVII. Finally use div tag with the properties as size 4 and face cambria and give the element
content as signature and close the <div> tag and <h3> tag with align right property and
(smvec) as the element content and close the tag
Step 4: Close the structural tags that are open
Step 5: Execute the file
SOURCE CODE
Resume.html:
<html>
<head>
<title> RESUME PREPARATION</title>
</head>
<body bgcolor="grey">
<h1>
30 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
<font face="cambria" size="8" color="white">
<center> <u> RESUME </u> </center>
</font>
</h1>
<img align="right" src="images.jpg" alt="pic" height="30%" width="20%">
<br> <br> <br> <br> <br>
<h2> <font face="cambria" size="6" color="white"> SMVEC </font> </h2> <br>
<div align="right">
<font face="cambria" size="4">
Manakula Vinayagar Nagar,<br>
Madagadipet, <br>
Pondicherry.<br>
email : cse@smvec.ac.in<br>
Phone No : 1234567890
</font>
</div>
<hr size="3" color="red">
<DL>
<b>
<font face="Cambria" size="4" color="white">
<DT> OBJECTIVE :</DT>
</font>
</b>
<DD>
<font face="Cambria" size="4">
To get placed in a well reputed organisation,where i can upgrade my knowledge and
which provides opportunities to develop your organisation.
</font>
</DD>
<br>
31 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
</DL>
<hr size="3" color="red">
<b>
<font face="Cambria" size="4" color="white">
ACADEMIC QUALIFICATION:
</font>
</b>
<!---TABLE FOR ACADEMIC DETAILS--->
<br> <br>
<table border="3" cellpadding="5" cellspacing="5" width="80%" align="center" >
<font face="Cambria" size="4">
<tr align="center">
<th> Degree / Course </th>
<th> Name of the Institution </th>
<th> Affiliated / Name of the University </th>
<th> Month / Year of passing </th>
<th> Percentage / CGPA </th>
<th> Class </th>
</tr>
<tr align="center">
<th> B.Tech (CSE)</th>
<td> SMVEC </td>
<td> Pondicherry University</td>
<td> APRIL / 2016 </td>
<td> 9.55 </td>
<td> First Class with Distinction </td>
</tr>
<tr align="center">
<th> Diploma (CSE)</th>
32 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
<td> SMVPT </td>
<td> Pondicherry University </td>
<td> APRIL / 2013 </td>
<td> 8.22 </td>
<td> First Class </td>
</tr>
<tr align="center">
<th> H.Sc </th>
<td> John Dewey Matric Hr. Sec School</td>
<td> Tamilnadu State Board </td>
<td> March / 2011</td>
<td> 85% </td>
<td> First Class with Distinction </td>
</tr>
<tr align="center">
<th> SSLC </th>
<td> S.D.A Matric Hr. Sec School</td>
<td> Tamilnadu State Board </td>
<td> March / 2009 </td>
<td> 80% </td>
<td> First Class </td>
</tr>
</font>
</table>
<br>
<b>
<font face="Cambria" size="4" color="white">
TECHNICAL SKILLS:
</font>
</b>
33 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
<font face="Cambria" size="4">
<UL type="square">
<LI> Programming Language: C, C++,Java,C#
<LI> Software Packages: Windows MS Office, VB, Adobe
<LI> Database: SQL, Oracle
<LI> Networking: CCNA, CCNP
</UL>
</font>
<br>
<b>
<font face="Cambria" size="4" color="white">
AREA OF INTEREST:
</font>
</b>
<font face="Cambria" size="4">
<UL type="square">
<LI> Database Management Systems
<LI> Software Engineering
<LI> Data Structures
<LI> Object Oriented Programming Languages
</UL>
</font>
<br>
<b>
<font face="Cambria" size="4" color="white">
COURSES STUDIED:
</font>
</b>
<font face="Cambria" size="4">
<UL type="square">
34 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
<LI> Oracle Java Certified Programmer (OCJP)
<LI> Cisco Certified Network Associate (CCNA)
<LI> Cisco Certified Network Professional (CCNP)
<LI> Microsoft Certified Desktop Support Technician (MCDST)
</UL>
</font>
<br>
<b>
<font face="Cambria" size="4" color="white">
ACHIEVEMENTS :
</font>
</b>
<font face="Cambria" size="4">
<UL type="square">
<LI> Got the Silver Medal in U.G. Pondicherry University.
<LI> Got the Second Rank in Higher Secondary State Board Examination.
<LI> Got the First Rank in SSLC Board Examination.
</UL>
</font>
<br>
<b>
<font face="Cambria" size="4" color="white">
EXTRA-CURICULLAR ACTIVITIES:
</font>
</b>
<font face="Cambria" size="4">
<UL type="square">
<LI> Won the Inter-College Cricket Championship in Pondicherry University.
<LI> Won the Second Prize in Athletic events.
<LI> Participated various Competition like Foot-ball, Volley-ball.
35 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
</UL>
</font>
<br>
<b>
<font face="Cambria" size="4" color="white">
PERSONAL DETAILS:
</font>
</b>
<font size="4" face="cambria">
<UL type="square">
<LI> Father's Name : ABCD <br>
<LI> Mother's Name : ABCD <br>
<LI> Date of Birth :
07-06-1990 <br>
<LI>Gender
: Male <br>
<LI> Marital Status :
Unmarried / Married <br>
<LI> Languages Known : Hindi, English, Tamil <br>
<LI> Religion
: Hindu <br>
</font>
<br>
<center>
<font size="4" face="Cambria" color="white">
<b> <u> DECLARATION </u> </b>
</font>
</center>
<br>
<font size="4" align="center" face="Cambria" >
<center>
36 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
I hereby declare that the above furnished details are true to the best of my knowledge.
<br> <br>
</center>
</font>
<font size="4" face="Cambria">
<b> Place : </b> Puducherry. <br>
<b> Date :</b> 10.01.2014
</font>
<div align="right">
<font size="4" face="Cambria" >
<b> Signature, </b>
</font>
</div>
<font size="4" face="Cambria" >
<h3 align="right"> (SMVEC) </h3>
</font>
</body>
</html>
OUTPUT
37 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
38 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
RESULT
Thus static web page for Resume Preparation using HTML tags have been created and output is
verified.
39 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
EX.NO:4 CREATION OF INSTITUTIONAL WEBPAGE
AIM
To create a static web page for your own institution using HTML tags.
PROCEDURE
HOME PAGE
Step 1: Create an Html file using basic tags.
Step 2: Using the <title> tag give title to the page as SRI MANAKULA VINAYAGAR
ENGINEERING COLLEGE and close the <head> and <title> tag
Step 3: In the <body> session, do the following:
I. Use <div> tag with an id and properties, style = ” position: relative; width: 70%; margin-
top:0px margin-bottom: 0px;” within the <div> tag
II. Use another <div> tag with the properties, style="width:1100px; margin-top: 0px; margin-
left:50px; margin-right:150px;" within the <div> tag
III. Use another <div> tag with the properties, style="width:1100px; height:190px; float: left;
padding-left:10px;"
IV. Use <img> to insert the image having the source of the file and the properties, width=500
and height=150 within the tag
V. Use <nav> tag which has the navigation links and use anchor tag <a> with href to refer two
pages one is home and the other is about us and close the <nav> tag and one <div> tag
VI. Use another <div> tag with the properties, style="width: 1000px; height:830px; float: left;
padding-left:20px; border:1px solid red;"
VII. Use <h1> tag and give heading as OUR COLLEGE CAMPUS
VIII. Insert any four image of the college using <img> tag with the properties, width=190
height=160
IX. Use <article > tag and <p> and give some content about the college and close those tags
X. Then use <details> tag with <summary> tag giving the element content as DEPARTENTS
and close <summary> tag
XI. Use <ul> and <li> tag to list the departments and close the <details> tag
XII. Close the <div> tags
Step 4: Close the rest of the structural tags
Step 5: Execute the web page
ABOUTUS.HTML
40 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
Step 1: Create an Html file using basic tags.
Step 2: Using the <title> tag give title to the page as About Us and close the <head> and <title> tag
Step 3: In the <body> session, do the following:
I. Repeat the steps I, II, III, IV, V from the home.html
II. Use the <p> tag and give some content about the college for the element content and close
the<p> tag
Step 4: Close the rest of the structural tags
Step 5: Execute the webpage
41 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
SOURCE CODE
Home.html
<html>
<head>
<title>sri manakula vinayagar engineering college</title>
</head>
<body>
<div id="maindivcontainer" style="position: relative; width:70%; margin-top: 0px; margin-
bottom: 0px;">
<div style="width:1100px; margin-top: 0px; margin-left:50px; margin-right:150px;">
<div style="width:1100px; height:190px; float:left; padding-left:10px;">
<img src="images\images.png" width=500 height=150>
<nav id="toplink">
<a href="home.html">home</a>|
<a href="about.html">about us</a>
</nav>
</div>
<div style="width: 1000px; height:830px; float:left; padding-left:20px; border:1px
solid red;">
<h1>our college campus...</h1><bs>
<img src="images\images2.jpg" width=190 height=160></a>
<img src="images\download2.jpg" width=190 height=160></a>
<img src="images\images3.jpg" width=190 height=160></a>
<img src="images\download.jpg" width=190 height=160></a>
<img src="images\download1.jpg" width=190 height=160></a>
<br>
<br>
<br>
<article>
42 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
<p> our founder chairman shri. n. kesevan, a philanthropist and visionary, strongly
believes in empowering the society through education. he emphasizes upon the good quality
education at the gross root level, can only transform the dreams of our nation into a real entity.
also he had a deep concern for extending excellent services in the health care sector to the rural
mass and even to the untouched vulnerable section of the society thereby achieving the goal of
inclusive growth.</p>
<p>sri manakula vinayaga educational trust was formed with the avowed objective of
imparting quality technical education, especially to the weaker sections of society. </p>
</article>
<details>
<summary><b>departments</b></summary>
<ul>
<li>information technology
<li>computer science and engineering
<li> mechanical engineering
<li> electronics and communication engineering
<li> electrical and electronics engineering
<li> civil engineering
<li> ice
</details>
</div>
</div>
</body>
</html>
about.html
<html><head><title>about us page</title>
<link type="text/css" rel="stylesheet" href="externalstylesheet/homestylesheet.css" />
</head>
<body>
<div id="maindivcontainer" style="position: relative; width: 100%; margin-top: 0px; margin-bottom: 0px;">
<div style="width: 1100px; margin-top: 0px; margin-left: auto; margin-right:auto;">
43 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
<div style="width: 1100px; height:800px; float:left; padding-left:20px; background-color:white;
border:1px solid black;">
<img src="images\images.png" width=500 height=100></img>
<nav id="toplink">
<a href="home.html">home</a>|
<a href="about.html">about us</a>
</nav>
<br><br><br>
<p>
sri manakula vinayaga educational trust was formed with the avowed objective of imparting quality technical
education, especially to the weaker sections of society. to cherish this objective and to join hands with the
policy of the government of puducherry in enhancing technical education and also to meet the needs of our
nation, the trust established sri manakula vinayagar engineering college in the year 1999.
</p>
<p>
the institution has been approved by aicte, new delhi and affiliated to the pondicherry university, a central
university. it is the first institution in the puducherry union territory which got an iso 9001:2000 certification
and has been accredited by nba-aicte, new delhi. the college has been accredited by the naac with ‘a’ grade.
</p>
<p>
it is worthy to note that sri manakula vinayagar engineering college is the first engineering institution in the
entire union territory of puducherry which had obtained the naac accreditation that too with `a’ grade. within a
short span of time the institution has attained an enviable reputation by possessing all the hallmarks of a
premier institution in the pursuit of excellence.
</p></head>
</html>
44 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
OUTPUT
RESULT
Thus the static webpage for the college website has been designed and executed successfully
45 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
EX.NO:5 WEB PAGE DESIGN USING CSS
AIM
To design a static web page using Cascading Style Sheet (CSS).
PROCEDURE
INLINE CSS:
Step1: Create basic html tags.
Step2: In the <head> tag, define <title> tag as Inline Style Sheet and close both the tag
Step3: Within the <body> tag define the following tags
I. Use <p> tag with the element content as “This text does not have any style applied to it”
and close </p> tag.
II. Use <p> tag with the properties as, style = "font-size: 20pt" and the element content as
“This text has the <i>font-size</i> style applied to it, making it 20pt and close the </p> tag
III. Again use another <p> tag with the properties as, style = "font-size: 20pt; and color:
#0000ff" and element content as This text has the <i>font-size</i> and <i>color</i> styles
applied to it, making it 20pt. and blue and close the </p> tag along with the </body> tag
Step 4: Close the <html> tag.
INTERNAL CSS:
Step1: Create basic html tags.
Step 2: Under the <head> tag, do the following
I. Use the <title> tag and give the element content as Internal Style Sheet and close the
<title> tag
II. Use the <style> with the properties type as “text/css” and define the style for the
elements i, h1, p and for class special (for referring class use ‘.’ Operator infront of the
name of the class)
III. For i define the properties as background-color: #8000ff and color: white and for h1
define the properties as font-family: arial, sans-serif and for p define the properties as
font-size: 14pt and for class name special define the properties as color: blue and close
the <style> tag and <head> tag
Step 4: In the body tag define the following:
46 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
I. In <h1> tag give <class = "special"> decirbing the special color to be give to the text “Indra
Krishnamurthy Nooyi.” and close tag </h1>
II. Image is inserted using <img src="IndraNooyi.jpg" / with <height="200" width="200">
this is enclosed with the tags <center></center>.
III. Then <p></p> are given with descriptive text while another <p class=”special”></p>is also
give some description.
Step 5: Bothe the </body> and </html> tags are closed.
External CSS:
Step 1: Create basic html tags.
Step 2: In<head> tag define <title>Linking External Style Sheets</title>
also give the link to the external stylesheet by following
<link rel = "stylesheet" type = "text/css" href = "styles.css" />
finally close the </head>
Step 3: In <body> tag define the fol:lowing
I. In <h1> tag “Shopping list for Monday” is given where italics <i> tag is used for
“Monday”</i> and </h1> tag is closed.
II. <ul> unorder list tag is opened specifying certen items which are to be listed in <li> tag.
And both tags are closed,
III. <p> tag is used where a website is give under <a href = "http://www.food.com">Go to the
Grocery store</a>tags.
IV. Another <p> with some description is also closed.
Step 4: Close both </body> and </html> tags.
Step 5: In the external stylesheet whose file name is saved with the extension .css has
Definition for following a, a:hover, li i, ul and the classname classone
Step 6: the element a as the following properties text-decoration: none and a: hover has text-
decoration: underline; color: red; background-color: #ccffcc and li I has color: red; font-weight: bold;
background-color: #ffffff and ul as margin-left: 2cm and class name classone has text-decoration:
underline; margin-left: .5cm
Step 7: Save the file and run the application
47 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
SOURCE CODE
INLINE CSS:
<html>
<head>
<title>Inline Style Sheet </title>
</head>
<body>
<p>This text does not have any style applied to it.</p>
<!-- The style attribute allows you to declare -->
<!-- inline styles. Separate multiple styles -->
<!-- with a semicolon. -->
<p style = "font-size: 20pt">This text has the
<i>font-size</i> style applied to it, making it 20pt.
</p>
<p style = "font-size: 20pt; color: #0000ff">
This text has the <i>font-size</i> and
<i>color</i> styles applied to it, making it
20pt. and blue.</p>
</body>
</html>
Internal.html:
<html>
<head>
<title> Internal Style Sheets</title>
<!-- this begins the style sheet section -->
<style type = "text/css">
i
{
background-color: #8000ff;
color: white
}
h1
48 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
{
font-family: arial, sans-serif
}
p
{
font-size: 14pt
}
.special
{
color: blue
}
</style>
</head>
<body>
<!-- this class attribute applies the .special style -->
<h1 class = "special">Indra Krishnamurthy Nooyi.</h1>
<center>
<img src="IndraNooyi.jpg" height="200" width="200">
</center>
<p>
Indra Krishnamurthy Nooyi (born 28 October 1955) is an Indian-American business executive
and the current Chairman and Chief Executive Officer of PepsiCo, the second largest food and
beverage business in the world by net revenue. According to Forbes, she is consistently ranked
among World's 100 Most Powerful Women.
</p>
<p class = "special">
Nooyi was born in <i>Madras (presently Chennai)</i>, Tamil Nadu, India. She was educated at
Holy Angels Anglo Indian Higher Secondary School in Madras. She received a Bachelor's
degree in Physics, Chemistry and Mathematics from Madras Christian College in 1974
and a Post Graduate Diploma in Management (MBA) from Indian Institute of Management
Calcutta in 1976. Beginning her career in India, Nooyi held product manager positions at
Johnson & Johnson and textile firm Mettur Beardsell.She was admitted to Yale School of
49 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
Management in 1978 and earned a Master’s degree in Public and Private Management. While at
Yale, she completed her summer internship with Booz Allen Hamilton. Graduating in 1980,
Nooyi joined the Boston Consulting Group (BCG), and then held strategy positions at Motorola
and Asea Brown Boveri.
</p>
</body>
</html>
External.html:
<html>
<head>
<title>Linking External Style Sheets</title>
<link rel = "stylesheet" type = "text/css" href = "styles.css" />
</head>
<body>
<h1>Shopping list for <i>Monday</i>:</h1>
<ul>
<li>Milk</li>
<li>Bread
<ul>
<li>White bread</li>
<li>Rye bread</li>
<li>Whole wheat bread</li>
</ul>
</li>
<li>Rice</li>
<li>Potatoes</li>
<li>Pizza <i>with mushrooms</i></li>
</ul>
<p>
<a href = "http://www.food.com">Go to the Grocery store</a>
</p>
50 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
<p class = "classone">
Nooyi was born in <i>Madras (presently Chennai)</i>, Tamil Nadu, India. She was educated at Holy
Angels Anglo Indian Higher Secondary School in Madras.
</p>
</body>
</html>
Style.cs
a { text-decoration: none }
a:hover
{
text-decoration: underline;
color: red;
background-color: #ccffcc
}
li i
{
color: red;
font-weight: bold;
background-color: #ffffff
}
ul
{ margin-left: 2cm }
.classone
{
text-decoration: underline;
margin-left: .5cm }
51 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
OUTPUT:
Inline style sheet:
Internal style sheet:
52 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
External style sheet:
RESULT
Thus the static webpage using cascading style sheet have been created and output is verified.
53 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
EX.NO:6 ARITHMETIC OPERATION USING JAVASCRIPT
AIM
To create an arithmetic operation using JavaScript and Html tags.
PROCEDURE
Step 1: Create an Html file using basic tags.
Step 2: Under the <head> tag,
I. Give title to the web page using the <title> tag and close the <title> tag
II. Use the <script> tag to specify the type of script to be javascript by following:
<script type="text/javascript">
III. Under the script tag declare a function add and define the function with the following:
a. Declare 5 variables of type var where,
i. n1 -> to get the input from the window for getting number 1
ii. a -> to parse the input to int
iii. n2 -> to get the input from the window for getting number 2
iv. b -> to parse the input to int
v. c -> to store the result of the operation
b. Get the input for the first number and store it in n1 variable by the following
syntax :
n1=window.prompt("Enter the value of A","");
c. Parse the input from string to Interger by following syntax:
a=parseInt(n1);
d. Get the second number as input and store in the variable n2
e. Parse the input from string to integer
f. Add two numbers and store it in the variable c
g. Display the output in the output screen by the following
Alert (“Sum is ”+c);
IV. Declare another 3 functions for subtract, multiplication and division and repeat the above
steps again in each function definition
V. Close the <script> tag and close the <head> tag
Step 3: Under the <body> tag, do the following
I. Use the <center> tag and give the element content as ARITHMETIC OPERATION and
close the <center> tag
II. Use <br> tag to give necessary new line space
III. Use the <form> tag and do the following
a. Again open the <center> tag and create a button using <input> tag of type button
and give value as addition and add the property onclick to redirect the control to the
necessary function in this case add() function by the following
<input type="button" value=" ADDITION " onclick = "add()">
54 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
b. Create 3 other buttons by the above steps for different methods of subtract, multiply
and divide
IV. Close the <form> tag
Step 4: Close the rest of the structural tags
Step 5: Save the filename.html
Step 6: Execute the web page
55 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
SOURCE CODE
Arithmetic.html:
<html>
<head>
<title> Arithmetic operations </title>
<script type="text/javascript">
function add()
{
var a,b,c,n1,n2;
n1=window.prompt("Enter the value of A","");
a=parseInt(n1);
n2=window.prompt("Enter the value of B","");
b=parseInt(n2);
c=a+b;
alert("Sum is " + c);
}
function sub()
{
var a,b,c,n1,n2;
n1=window.prompt("Enter the value of A","");
a=parseInt(n1);
n2=window.prompt("Enter the value of B","");
b=parseInt(n2);
c=a-b;
alert("Difference is " + c);
}
function mul()
{
var a,b,c,n1,n2;
n1=window.prompt("Enter the value of A","");
a=parseInt(n1);
n2=window.prompt("Enter the value of B","");
56 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
b=parseInt(n2);
c=a*b;
alert("Product is " + c);
}
function div()
{
var a,b,c,n1,n2;
n1=window.prompt("Enter the value of A");
a=parseInt(n1);
n2=window.prompt("Enter the value of B","");
b=parseInt(n2);
c=a/b;
alert("Quotient is " + c);
}
</script>
</head>
<body>
<br>
<br>
<b><center> ARITHMETIC OPERATION </center></b>
<form>
<br>
<br>
<center>
<br>
<input type="button" value=" ADDITION " onclick = "add()">
<br>
<br>
<input type="button" value="SUBTRACT" onclick = "sub()">
<br>
<br>
<input type="button" value=" MULTIPLY " onclick = "mul()">
57 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
<br>
<br>
<input type="button" value=" DIVISION " onclick = "div()">
<br>
</center>
<br>
</form>
</body>
</html>
58 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
OUTPUT
RESULT
Thus the arithmetic operations have been created using java script and output is verified.
59 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
EX.NO:7 BUILT-IN FUNCTION USING VB SCRIPT
AIM
To create an website with built-in function using VB Script
PROCEDURE
Step 1: Create an html file with basic structural tags
Step 2: Under the <head> tag,
I. Give title to the web page using the <title> tag and close the <title> tag
II. Use the <script> tag to specify the type of script to be vbscript by following:
<script type="text/vbscript">
III. Under the script tag declare a function add and define the function with the following:
a.Use sub with function operation and parameter as a
b.Check for the value of a with else if condition statement
c.If a =1 then print the lower case of the string as result as follows:
msgbox("LowerCase of Given String is "&LCase(st.str.value))
d. If a=2 then print the uppercase of the string by using &Ucase(st.str.value), else if
a=3 then print length of the string using &len(st.str.value), else if a=4 print the
reverse of the string using reverse(), if a=5 print the current date and time using
Now command, if a=6 print the date using Date command, if a=7 then print the log
value using &Log(st.num.value), if a=8 then print sin value of the number using
sin(), if a=9 then print cos value of the number using cos() and if a=10 then print tan
value of the number using &tan() function
e. End the if using End IF command and also end the sub
IV.Close the <script> and <head> tag
Step 3: Under the <body> tag, do the following
I.Use the <form> tag with the name st
II.Use <h1> tag with the property to align center and element content as Built-In Functions in
VBScript and close <h1> tag
III.Use the <h2> tag and give element content as string finctions and close the <h2> tag
IV.Use <b> tag and give element content as Enter a string: and close the tag
V.Use <input> tag to create a text box by giving type as text and id as str
VI.Create 10 buttons for each functions using <input> tag and its properties like type, value and
onclick
Step 4: close the other structural tags and <form> tag
60 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
Step 5: Save and execute the file
61 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
SOURCE CODE
<html>
<head>
<title>Built-in Functions in VBScript</title>
<Script type="Text/vbscript">
sub operation(a)
if a=1 then
msgbox("LowerCase of Given String is "&LCase(st.str.value))
elseif a=2 then
msgbox("UpperCase of Given String is "&UCase(st.str.value))
elseif a=3 then
msgbox("Length of Given String is "&Len(st.str.value))
elseif a=4 then
msgbox("Reverse of Given String is "&StrReverse(st.str.value))
elseif a=5 then
msgbox(Now)
elseif a=6 then
msgbox(Date)
elseif a=7 then
msgbox("The Log value of the given Number is"&Log(st.num.value))
elseif a=8 then
msgbox("The Sin value of the given Number is"&Sin(st.num.value))
elseif a=9 then
msgbox("The Cos value of the given Number is"&Cos(st.num.value))
elseif a=10 then
msgbox("The Tan value of the given Number is"&Tan(st.num.value))
End if
End sub
</Script>
</head>
<body bgcolor=" Beige">
62 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
<form name="st">
<h1 align="center">Built-in Functions in VBScript</h1>
<h2>String Functions</h2>
<b>Enter a String:</b>
<input type="text" id="str"><br><br>
<input type=button value="Lower" onclick="operation(1)">
<input type=button value="Higher" onclick="operation(2)">
<input type=button value="Length" onclick="operation(3)">
<input type=button value="Reverse" onclick="operation(4)">
<br/><br/>
<h2>Date/Time Functions</h2>
<input type=button value="Date" onClick="operation(5)">
<input type=button value="Now" onClick="operation(6)">
<h2>Math Functions</h2>
<b>Enter a Number:</b>
<input type="text" id="num"><br><br>
<input type=button value="Log" onClick="operation(7)">
<input type=button value="Sin" onClick="operation(8)">
<input type=button value="Cos" onClick="operation(9)">
<input type=button value="Tan" onClick="operation(10)">
</form>
</body>
</html>
OUTPUT
63 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
RESULT
Thus the basic built-in function using VB Script has been successfully executed and verified
64 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
EX.NO:8 CREATION OF APPLET TO DESIGN SMILEY
AIM
To write a java program to design a Smiley using applet.
PROCEDURE:
Step 1: Import all the necessary packages
Step 2: Create a class Smile and extend the class applet
Step 3: Declare the function as paint with the parameters as Graphics g
Step 4: Then include the necessary shapes and add colors and include strings by the
following
g.fillArc(80,160,80,30,175,175);
g.setColor(Color.black);
g.drawString("SMILE",285,120);
Step 5: Give the height, width and colors in the parameters
Step 6: Save the file and execute the file
65 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
SOURCE CODE
import java.awt.*;
import java.applet.*;
/*<applet code="Smile.class"width=500 height=300></applet>*/
public class Smile extends Applet
{
public void paint(Graphics g)
{
g.setColor(Color.yellow);
g.fillOval(20,20,200,200);
g.setColor(Color.black);
g.fillOval(80,90,20,20);
g.fillOval(150,90,20,20);
g.setColor(Color.red);
g.fillOval(110,120,20,30);
g.setColor(Color.pink);
g.fillArc(80,160,80,30,175,175);
g.setColor(Color.black);
g.drawString("SMILE",285,120);
}
}
66 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
OUTPUT
RESULT
Thus the java program for creating smiley using applet has been executed and verified successfully
67 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
EX.NO:9 CREATION OF THREADS USING JAVA
AIM
To write a java program to run a thread program.
PROCEDURE
Step 1: create a class that inherits the interface runnable
Step 2: create an object for the thread class as mythread
Step 3: Use the constructor of the class and declare the following within the constructor
I. Initialize the obect by MYTHREAD = NEW THREAD(THIS, "MY RUNNABLE
THREAD");
II. Print the object of the thread by using println statement
III. Start the thread by using the following:
MYTHREAD.START();
Step 4: Declare a function run and using the exception handling print the count using for loop
Step 5: Within the for loop print the count and also use sleep() function
Step 6: In the catch block print the exception occurred
Step 7: Create another class and declare the main function within the class
Step 8: Create an object for the previous class as cnt
Step 9: Use the exception handling, within the try block use while loop with the condition as
cnt.mythread.isalive()
Step 10: Within the loop print any statement and use the sleep() function
Step 11: Within the catch block print the exception that occurred
Step 12: Print that the main thread is finished
Step 13: Save and run the program
68 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
SOURCE CODE
class count implements runnable
{
thread mythread ;
count()
{
mythread = new thread(this, "my runnable thread");
system.out.println("my thread created" + mythread);
mythread.start();
}
public void run()
{
try
{
for (int i=0 ;i<10;i++)
{
system.out.println("printing the count " + i);
thread.sleep(1000);
}
}
catch(interruptedexception e)
{
system.out.println("my thread interrupted");
}
system.out.println("mythread run is over" );
}
}
class runnableexample
{
public static void main(string args[])
{
69 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
count cnt = new count();
try
{
while(cnt.mythread.isalive())
{
system.out.println("main thread will be alive till the child thread is live");
thread.sleep(1500);
}
}
catch(interruptedexception e)
{
system.out.println("main thread interrupted");
}
system.out.println("main thread run is over" );
}
}
70 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
OUTPUT
RESULT
Thus the java program for counting numbers using thread has been executed and verified successfully
71 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
EX.NO:10 ONE WAY CLIENT SERVER COMMUNICATION USING TCP
AIM
To write a java program to implement one way client server communication using TCP.
PROCEDURE
CLIENT:
Step 1: Import all the necessary packages
Step 2: Create a class named TcpOneWayClient
Step 3: Within the class declare and define the main class with the exceptopn of IOException
Step 4: Create an object for socket by the following:
Socket sock=new Socket("portname",portnumber);
Step 5: Create an object for the datainputstream by the following:
DataInputStream dis=new DataInputStream(sock.getInputStream());
Step 6: Print that the connection is established Successfully and Listing to server
Step 7: Declare the variable str of datatype string
Str -> for getting the input from the server
Step 7: Use a while loop with the condition specified as true
Step 8: Within the loop assign str to the value which is received from the server by using readLine()
Step 9: Print the message received
Step 10: Use the if statement with the condition str.equals(“end”) then close the socket and leave the loop
using break;
72 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
SERVER:
Step 1: Import all the necessary packages
Step 2: Declare the class TcpOneWayChatServer
Step 3: Declare and define the main function with the exception as IOException
Step 4: Create an object for the server socket by following
ServerSocket servsock=new ServerSocket(portnumber);
Step 5: Create object for the socket that accepts the server socket object
Step 6: Create object for scanner for getting the input
Step 7: Create object for the printstream for the output by the following
PrintStream ps=new PrintStream(sock.getOutputStream());
Step 8: Print that the connection is established and the message can be sent now and enter end to stop the
communication
Step 9: Use the while loop with the condition true
Step 10: Within the loop get the input message to be passed using a string variable
Step 11: use the object of the printstream to pass the message to the client
Step 12: Use the if condition statement with the condition str.equals(“end”)
Step 13: If the condition get satisfies close the server socket and leave the loop using the break; s
statement
73 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
SOURCE CODE
CLIENT
import java.io.*;
import java.net.*;
class TcpOneWayChatClient
{
public static void main(String args[]) throws IOException
{
// Establishes connection to the specified IP and Port Number
Socket sock=new Socket("localHost",8000);
String str;
// Receives the messages from the server
DataInputStream dis=new DataInputStream(sock.getInputStream());
System.out.println("Connection established successfully!");
System.out.println("Listening for server...");
while(true)
{
// Reads the input from server
str=dis.readLine();
System.out.println("Message Received:"+str);
if (str.equals("end"))
{
//Close the socket
sock.close();
break;
}
}
}
}
74 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
SERVER
import java.io.*;
import java.net.*;
import java.util.*;
class TcpOneWayChatServer
{
public static void main(String a[])throws IOException
{
// Establishes connection to the specified IP and Port Number
ServerSocket servsock=new ServerSocket(8000);
// Opens the socket and binds the connection on the port number 8000
Socket sock=servsock.accept();
//DataInputStream dis=new DataInputStream(System.in);
Scanner s=new Scanner(System.in);
PrintStream ps=new PrintStream(sock.getOutputStream());
System.out.println("Connection established successfully!");
System.out.println("You can start sending messages now!");
System.out.println("Enter 'end' to quit");
while(true)
{
System.out.println("Enter message to send:"); // reads the input message string from the input device
String str=s.nextLine();
ps.println(str); //checks for end of message
if(str.equals("end"))
{
//Closes the socket
servsock.close();
break;
}
}
}
}
75 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
OUTPUT
SERVER:
CLIENT
RESULT
Thus the TCP one way communication program is executed and output is verified successfully.
76 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
EX.NO:11 WEB APPLICATION FOR REGISTRATION PROCESS USING JSP
AIM
To develop a web application for registration process using Java Server Page (JSP).
PROCEDURE
Step 1: Create a database and table using mysql with the following fields.
Rno -> int
Name -> varchar(20)
Password -> varchar(20)
Dept -> varchar(8)
Dob -> date
Contact -> bigint
Email -> varchar(25)
Step 2: Create a java web file using netbeans.
I. Steps to create the new project:
File->New Project->java web->web application->next->give the file name-> next
->select the server-> next-> finish
II. After creating the project index.html page will be created. In index.html create the front page of
your login by the following:
a. Under the <head> tag, use <title> tag to give title for the page and close both the tags
b. Under the <body> tag, use <form > tag with the property action which specify the login file
where the form should be redirected when the form is submitted
c. Create a table <table> tag with the properties border as 1 and width as 25%
d. Under the <table> tag create first row using <tr> and use 2 <td> tags to create two
columns one having element content as Enter the user Name and the other of the <input>
tag with the type, name for the input tag
e. Create another row and two coloums in which first column as the element name as Enter
Password and the other as the <input> tag with its properties name and its type
f. Create another row and two columns in which one as the button reset and the other has the
button submit using <input> tag and type as reset and submit respectively
g. Create another row which as the link to redirect to register page for the new users in which
link is made using <a> tag
h. Close the <form>, <body> and <html> tag
i. Now the home page has been designed
77 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
LOGIN PAGE:
Step 1: Create a JSP page by right click the project-> new-> jsp page and name the page
Step 2: Import the necessary packages by the following syntax: <%@page import="java.sql.*" %>
Step 3: Under the <head> tag give the title to the page within the <title> tag
Step 4: Under the <body> tag do the following:
I. Use the <form> tag with the property action which redirects the form to the update file when
the update button is clicked
II. The java code are embedded with the html code with the syntax <%..%>
III. Include the java code for the database connection as follows
Class.forName("com.mysql.jdbc.Driver");
Connection con =
DriverManager.getConnection( "jdbc:mysql://localhost:3306/details"
, "root", "root");
IV. Connect the mysql connector to the project under the library folder
V. Declare the variables str1, str2, selectQuery of the type string
i. Str1-> for getting the name
ii. Str2-> for getting password
VI. Get the parameters that are passed from the index page by the following syntax
request.getParameter("name");
VII. Likewise get the password too
VIII. Assign the selectQuery variable to the select query from the dbms
IX. Use the preparedstatement and create the object to it by the following
PreparedStatement ps = con.prepareStatement(selectQuery);
X. Store the result in the resultset by creating object for it and as follows
ResultSet rs = ps.executeQuery();
XI. Use the if condition with the condition rs.next to check if the user is valid or not
XII. If the condition satisfies then print that the user is valid and display all the details of the user
XIII. Else print invalid user and close all the unclosed tags
REGISTRATION PAGE:
I. Use the <title> tag to give the title to the page
II. Design the page using html page for getting all the input and store in the database
III. Use the insert query to store them in the database
IV. Use the PreparedStatement and create object and use setstring to set the values to the field
78 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
SOURCE CODE
LOGIN.JSP
<%@page contenttype="text/html" pageencoding="utf-8"%>
<%@page import="java.sql.*" %>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>my_details</title>
</head>
<body>
<form action="update.jsp">
<%
class.forname("com.mysql.jdbc.driver");
string str1=request.getparameter("name");
string str2=request.getparameter("password");
connection con = drivermanager.getconnection( "jdbc:mysql://localhost:3306/details", "root", "root");
string selectquery = "select * from login where name='"+str1+"'and password='"+str2+"'";
preparedstatement ps = con.preparestatement(selectquery);
resultset rs = ps.executequery();
if (rs.next())
{
out.print("<center><h1>welcome!!! you are a valid user</h1></center>");
}
else
{
out.print("<center><h1>you have entered a wrong password...</center></h1>");
}
%>
<center>
<table border="2" width="25%">
<tr>
79 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
<td>registration number:</td><td><input name="rno" type="text" value="<
%=rs.getint(1)%>"/></td>
</tr>
<tr>
<td>name:</td><td><input name="uname" type="text" value="<%=rs.getstring(2)%>"/></td>
</tr>
<tr>
<td>password:</td><td><input name="pwd" type="text" value="<%=rs.getstring(3)%>"/></td>
</tr>
<tr>
<td>department:</td><td><input name="dept" type="text" value="<%=rs.getstring(4)%>"/></td>
</tr>
<tr> <td>date of birth:</td><td><input name="dob" type="text" value="<%=rs.getstring(5)%>"/></td>
</tr>
<tr>
<td>contact:</td><td><input name="contact" type="text" value="<%=rs.getstring(6)%>"/></td>
</tr>
<tr>
<td>email:</td><td><input name="email" type="text" value="<%=rs.getstring(7)%>"/></td>
</tr>
</table></center>
<br><center> <input type="submit" value="update"></center>
</form>
</body>
</html>
REG.JSP
<%@page contenttype="text/html" pageencoding="utf-8"%>
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
80 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
<title>register</title>
</head>
<body>
<form action="registration.jsp" method="get">
<br><br><br><br><br> <center>
<table border="1" width="30%" cellpadding="5">
<tr>
<td>register number:</td>
<td><input type="text" name="rno" value="" /></td>
</tr>
<tr>
<td>name:</td>
<td><input type="text" name="name" value="" /></td>
</tr>
<tr>
<td>password:</td>
<td><input type="password" name="password" value="" /></td>
</tr>
<tr>
<td>department:</td>
<td><input type="text" name="dept" value="" /></td>
</tr>
<tr>
<td>date of birth:</td>
<td><input type="text" name="dob" value="" /></td>
</tr>
<tr>
<td>contact:</td>
<td><input type="text" name="contact" value="" /></td>
</tr>
<tr>
<td>email:</td>
81 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
<td><input type="text" name="email" value="" /></td>
</tr>
<tr><td><input type="submit" value="submit"/></td></tr>
</table>
</center>
</form>
</body>
</html>
REGISTRATION.JSP
<%@page contenttype="text/html" pageencoding="utf-8"%>
<%@ page import ="java.sql.*" %>
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>jsp page</title>
</head>
<body>
<%
class.forname("com.mysql.jdbc.driver");
connection con1 = drivermanager.getconnection( "jdbc:mysql://localhost:3306/details", "root", "root");
string rno=request.getparameter("rno");
string name=request.getparameter("name");
string password=request.getparameter("password");
string dept=request.getparameter("dept");
string dob=request.getparameter("dob");
string contact=request.getparameter("contact");
string email=request.getparameter("email");
string query="insert into login(rno,name,password,dept,dob,contact,email)values(?,?,?,?,?,?,?)";
preparedstatement ps=con1.preparestatement(query);
ps.setstring(1,rno);
ps.setstring(2,name);
82 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
ps.setstring(3,password);
ps.setstring(4,dept);
ps.setstring(5,dob);
ps.setstring(6,contact);
ps.setstring(7,email);
int updatequery=ps.executeupdate();
if(updatequery!=0)
{
response.sendredirect("index.html");
}
%>
</body>
</html>
UPDATE.JSP
<%@page contenttype="text/html" pageencoding="utf-8"%>
<%@ page import ="java.sql.*" %>
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>jsp page</title>
</head>
<body>
<%
class.forname("com.mysql.jdbc.driver");
connection con1 = drivermanager.getconnection( "jdbc:mysql://localhost:3306/details", "root", "root");
string rno=request.getparameter("rno");
string name=request.getparameter("name");
string password=request.getparameter("password");
string dept=request.getparameter("dept");
83 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
string dob=request.getparameter("dob");
string contact=request.getparameter("contact");
string email=request.getparameter("email");
string query="update login set dept='"+dept+"',dob='"+dob+"',contact='"+contact+"',email='"+email+"'
where rno='"+rno+"'";
preparedstatement ps=con1.preparestatement(query);
int updatequery=ps.executeupdate();
if(updatequery!=0)
{
response.sendredirect("index.html");
}
%>
</body>
</html>
INDEX.HTML
<html>
<head>
<title>loginpage</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<form action="login.jsp">
<br><br><br><br><br>
<center> <h1> login page </h1>
<table border="1" width="25%">
<tr> <td>enter user name:</td><td> <input type="text" name="name"> </td></tr>
<tr><td> enter password:</td><td> <input type="password" name="password"></td></tr>
<tr>
<td> <input type="reset"
value="reset"></td>
84 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
<td> <input type="submit"
value="login"></td>
</tr>
<tr><td>new user <a href="reg.jsp">register here!</a></td></tr>
</table>
</center>
</form>
</body>
</html>
85 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
OUTPUT
86 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
RESULT
Thus the web application for registration process using java server page has been designed executed and
verified successfully
87 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
EX.NO:12 DYNAMIC WEB PAGE TO DISPLAY MOVIE LIST USING ASP.NET
AIM
To implement a simple movie-listing web application that supports creating, editing, searching and
listing movies from a database using asp.net.
PROCEDURE
Step 1: Open the visual studio 2012 and create new web application by the following
under Visual C# - web Category:
File -> New project -> ASP.NET MVC 4
Step 2: Give the file name as MvcMovie and browse the location and create the project
Step 3: In the New ASP.NET MVC 4 Project dialog box, select Internet Application
Step 4: Leave Razor as the default view engine and click OK
Step 5: To add the model to the project do the following:
I. In Solution Explorer, right click the Models folder, select Add, and then select Class
II. Enter the class name "Movie" and add the following five properties to the class
a. ID-> to get the id -> int
b. Title-> to get the movie title -> string
c. ReleaseDate-> to get the date -> dateTime
d. Gerene -> to get the Gerene -> string
e. Price -> to get the price -> decimal
III. We'll use the Movie class to represent movies in a database. Each instance of a Movie
object will correspond to a row within a database table, and each property of the Movie
class will map to a column in the table.
IV. Add the following MovieDBContext class
Step 6: Open the application root Web.config file. (Not the Web.config file in the Views folder.)
Step 7: Add the connection string to the <connectionStrings> element in the Web.config file.
Step 8: Create a controller class and do the following
I. Right-click the Controllers folder and create a new MoviesController controller.
II. Select the following options:
a. Controller name: MoviesController. (This is the default.)
88 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
b. Template: MVC Controller with read/write actions and views, using Entity
Framework.
c. Model class: Movie (MvcMovie.Models).
d. Data context class: MovieDBContext (MvcMovie.Models).
e. Views: Razor (CSHTML). (The default.)
III. Click add and the necessary files and folders will be created
IV. Adding a SearchIndex action method to the existing MoviesController class. The
method will return a view that contains an HTML form.
V. The first line of the SearchIndex method creates the following LINQ query to select the
movies:
var movies = from m in db.Movies select m;
VI. If the searchString parameter contains a string, the movies query is modified to filter on
the value of the search string using the if condition
VII. Implement the SearchIndex view that will display the form to the user. Right-click
inside the SearchIndex method and then click Add View. In the Add View dialog box,
specify that you're going to pass a Movie object to the view template as its model class.
In the Scaffold template list, choose List, then click Add.
VIII. Save and run the project
89 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
SOURCE CODE
MODEL:
using System;
using System.Data.Entity;
namespace MvcMovie.Models
{
public class Movie
{
public int ID { get; set; }
public string Title { get; set; }
public DateTime ReleaseDate { get; set; }
public string Genre { get; set; }
public decimal Price { get; set; }
}
public class MovieDBContext : DbContext
{
public DbSet<Movie> Movies { get; set; }
}
}
CODE TO BE ADDED FOR THE CONNECTION TO DATABASE:
<connectionStrings>
<add name="DefaultConnection" connectionString="Data Source=(LocalDb)\v11.0;Initial
Catalog=aspnet-MvcMovie-2012213181139;Integrated Security=true"
providerName="System.Data.SqlClient" />
<add name="MovieDBContext" connectionString="Data
Source=(LocalDB)\v11.0;AttachDbFilename=|DataDirectory|\Movies.mdf;Integrat ed Security=True"
providerName="System.Data.SqlClient" />
</connectionStrings>
90 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
CONTROLLER CODE:
public ActionResult SearchIndex(string movieGenre, string searchString)
{
var GenreLst = new List<string>();
var GenreQry = from d in db.Movies
orderby d.Genre
select d.Genre;
GenreLst.AddRange(GenreQry.Distinct());
ViewBag.movieGenre = new SelectList(GenreLst);
var movies = from m in db.Movies select m;
if (!String.IsNullOrEmpty(searchString))
{
movies = movies.Where(s => s.Title.Contains(searchString));
}
if (string.IsNullOrEmpty(movieGenre))
return View(movies);
else
{
return View(movies.Where(x => x.Genre == movieGenre));
}
}
VIEW CODE:
@model IEnumerable<MvcMovie.Models.Movie>
@{ ViewBag.Title = "SearchIndex"; }
<h2>SearchIndex</h2>
<p> @Html.ActionLink("Create New", "Create")
@using (Html.BeginForm("SearchIndex","Movies",FormMethod.Get))
{
<p> Title: @Html.TextBox("SearchString")<br />
<input type="submit" value="Filter" />
</p>
}
91 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
</p>
<table>
<tr>
<th> Title </th>
<th> ReleaseDate </th>
<th> Genre </th>
<th> Price </th> <th></th>
</tr>
@foreach (var item in Model) {
<tr>
<td> @Html.DisplayFor(modelItem => item.Title) </td>
<td> @Html.DisplayFor(modelItem => item.ReleaseDate) </td>
<td> @Html.DisplayFor(modelItem => item.Genre) </td>
<td> @Html.DisplayFor(modelItem => item.Price) </td>
<td> @Html.ActionLink("Edit", "Edit", new { id=item.ID }) |
@Html.ActionLink("Details", "Details", new { id=item.ID }) |
@Html.ActionLink("Delete", "Delete", new { id=item.ID }) </td> </tr>
}
</table>
92 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
OUTPUT
RESULT
Thus the ASP.Net application for the movie listing has been executed and verified successfully
93 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
CREATION OF XML DOCUMENT TO DISPLAY CD CATALOG
EX.NO:13 USING CSS
AIM
To create XML document to display CD catalog using CSS tags.
PROCEDURE
1. Create the XML with Catalog as main tag and its child tag as CD
2. Inside CD tag add information such title, artist, country, company and price using the respective tags.
3. Create external CSS file to format the XML file
4. External CSS file contain the properties such as background color and formatting the all cd
information tags with necessary attributes.
5. Display the content using web browser
94 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
SOURCE CODE
Catalog.xml
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="cat.css"?>
<CATALOG>
<CD>
<TITLE>Empire Burlesque</TITLE>
<ARTIST>Bob Dylan</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1985</YEAR> </CD>
<CD>
<TITLE>For the good times</TITLE>
<ARTIST>Kenny Rogers</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Mucik Master</COMPANY>
<PRICE>8.70</PRICE>
<YEAR>1995</YEAR> </CD>
<CD>
<TITLE>Big Willie style</TITLE>
<ARTIST>Will Smith</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1997</YEAR> </CD>
<CD>
<TITLE>Unchain my heart</TITLE>
<ARTIST>Joe Cocker</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>EMI</COMPANY>
95 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
<PRICE>8.20</PRICE>
<YEAR>1987</YEAR> </CD>
</CATALOG>
cat.css
CATALOG { background-color: #ffffff; width: 100%;}
CD { display: block; margin-bottom: 30pt; margin-left: 0;}
TITLE { display: block; color: #ff0000; font-size: 20pt;}
ARTIST { display: block; color: #0000ff; font-size: 20pt;}
COUNTRY, PRICE, YEAR, COMPANY { display: block; color: #000000; margin-left: 20pt;
}
96 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
OUTPUT
XML file with DOM Structure
XML file with CSS Tags
RESULT
Thus the XML document to display CD catalog using CSS tags is created and verified successfully.
97 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
EX.NO:14 WEB APPLICATION TO ADD & DELETE ITEMS USING ANGULAR JS
AIM
To create an web application to display and remove shopping items using Angular JS.
PROCEDURE
Step 1. Getting Started:
Start by making an application called myShoppingList, and add a controller named myCtrl to it.
The controller adds an array named products to the current $scope.
In the HTML, we use the ng-repeat directive to display a list using the items in the array.
Step 2. Adding Items:
In the HTML, add a text field, and bind it to the application with the ng-model directive.
In the controller, make a function named addItem, and use the value of the addMe input field to add an
item to the products array.
Add a button, and give it an ng-click directive that will run the addItem function when the button is
clicked.
Step 3. Removing Items:
We also want to be able to remove items from the shopping list.
In the controller, make a function named removeItem, which takes the index of the item you want to
remove, as a parameter.
In the HTML, make a <span> element for each item, and give them an ng-click directive which calls
the removeItem function with the current $index.
SOURCE CODE
<!DOCTYPE html>
98 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
$scope.products = ["Milk", "Bread", "Cheese"];
$scope.addItem = function () {
$scope.products.push($scope.addMe);
}
$scope.removeItem = function (x) {
$scope.products.splice(x, 1);
}
});
</script>
<div ng-app="myShoppingList" ng-controller="myCtrl">
<ul>
<li ng-repeat="x in products">{{x}}<span ng-click="removeItem($index)">×</span></li>
</ul>
<input ng-model="addMe">
<button ng-click="addItem()">Add</button>
</div>
<p>Click the little x to remove an item from the shopping list.</p>
</body>
</html>
99 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
OUTPUT
RESULT
Thus the web application to display and remove shopping items using Angular JS is created and verified .
100 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
WEB APPLICATION TO PERFORM FORM VALIDATION USING
EX.NO:15 ANGULAR JS
AIM
To create an web application to perform form validation using Angular JS.
PROCEDURE
1. In HTML, the new directive will be referred to by using the attribute my-directive.
2. In the JavaScript we start by adding a new directive named myDirective.
3. you must use a camel case name, myDirective, but when invoking it, you must use - separated name, my-
directive.
4. Then, return an object where you specify that we require ngModel, which is the ngModelController.
5. Make a linking function which takes some arguments, where the fourth argument, mCtrl, is the
ngModelController,
6. Then specify a function, in this case named myValidation, which takes one argument, this argument is the
value of the input element.
7. Test if the value contains the letter "e", and set the validity of the model controller to either true or false.
8. At last, mCtrl.$parsers.push(myValidation); will add the myValidation function to an array of other
functions, which will be executed every time the input value changes.
$dirty One or more have been modified
$invalid The form content is not valid
101 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
SOURCE CODE
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<h2>Validation Example</h2>
<form ng-app="myApp" ng-controller="validateCtrl" name="myForm" novalidate>
<p>Username:<br>
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">Username is required.</span>
</span></p>
<p>Email:<br>
<input type="email" name="email" ng-model="email" required>
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">Email is required.</span>
<span ng-show="myForm.email.$error.email">Invalid email address.</span>
</span></p>
<p>
<input type="submit"ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
myForm.email.$dirty && myForm.email.$invalid">
</p></form><script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
$scope.user = 'John Doe';
$scope.email = 'john.doe@gmail.com';
});
</script></body></html>
102 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
OUTPUT
RESULT
Thus the web application to perform form validation using Angular JS is created and verified .
103 Department of Information Technology, SMVEC
You might also like
- Example: Mainpage - HTM Page1.htm Page2.htmNo ratings yetExample: Mainpage - HTM Page1.htm Page2.htm19 pages
- Basic Web Pages Tutorial - HTML & CSS Is HardNo ratings yetBasic Web Pages Tutorial - HTML & CSS Is Hard18 pages
- HTML Tutorials - I-Tech Software Education100% (1)HTML Tutorials - I-Tech Software Education50 pages
- Web Technology (CSC-353) : (Unit 3: XML)No ratings yetWeb Technology (CSC-353) : (Unit 3: XML)50 pages
- Introduction To HTML CSE-301 Web ProgrammingNo ratings yetIntroduction To HTML CSE-301 Web Programming68 pages
- Geethanjali College of Engineering and Technology100% (1)Geethanjali College of Engineering and Technology89 pages
- Measurement Scales For Scoring or Ranking Sets of Interrelated ItemsNo ratings yetMeasurement Scales For Scoring or Ranking Sets of Interrelated Items24 pages
- Course Objectives - Outcomes For Services MarketingNo ratings yetCourse Objectives - Outcomes For Services Marketing1 page
- Customer Perception With Motor Cycles PDFNo ratings yetCustomer Perception With Motor Cycles PDF6 pages
- A Study of Customer Satisfaction of Two Wheelers On YamahaNo ratings yetA Study of Customer Satisfaction of Two Wheelers On Yamaha12 pages
- "Green" Household Cleaning Products in The U.S.: Bathroom Cleaners, Laundry Care and Dish Detergents and Household CleanersNo ratings yet"Green" Household Cleaning Products in The U.S.: Bathroom Cleaners, Laundry Care and Dish Detergents and Household Cleaners12 pages
- High Frequency Voltage Controlled Ring Oscillators in Standard CMOSNo ratings yetHigh Frequency Voltage Controlled Ring Oscillators in Standard CMOS18 pages
- Implementation: Dear Sir Subject: SAP Business One ImplementationNo ratings yetImplementation: Dear Sir Subject: SAP Business One Implementation2 pages
- Spiral Model V - Model Big Bang Model: A Look at The Most Important and Popular SDLC ModelsNo ratings yetSpiral Model V - Model Big Bang Model: A Look at The Most Important and Popular SDLC Models37 pages
- MEC 322 (Control Systems & Instrumentations) : REV 2-2021-LICNo ratings yetMEC 322 (Control Systems & Instrumentations) : REV 2-2021-LIC8 pages
- FibreCo - NTP2 & 3 Desktop Study Report - Rev0No ratings yetFibreCo - NTP2 & 3 Desktop Study Report - Rev019 pages
- Specification Monitor Ad Notam Dfu 0133 006No ratings yetSpecification Monitor Ad Notam Dfu 0133 0063 pages
- Kobelco Service Bulletin Posting Notification: - Important InformationNo ratings yetKobelco Service Bulletin Posting Notification: - Important Information10 pages
- 2 MP PTZ Dome Network Camera: DS-2DF5286-AEL/DS-2DF5286-AE3No ratings yet2 MP PTZ Dome Network Camera: DS-2DF5286-AEL/DS-2DF5286-AE31 page
- Coping with Pressure Spikes in TransducersNo ratings yetCoping with Pressure Spikes in Transducers2 pages