WDL Lab Manual As On 26 July PDF

Experiment No 1
Installation of WAMP Server

Aim: Installation and Setting of WAMP
Objective: To able to learn installation and Setting of WAMP
Scope: For developing interactive websites
Theory: WAMP is an acronym that traditionally stands for “Window, Apache, MySQL, and
PHP,” which is a common server configuration for a lot of web applications.
WAMP is a variation of LAMP for Windows systems and is often installed as a software bundle
(Apache, MySQL, and PHP). It is often used for web development and internal testing, but may
also be used to serve live websites.
The most important part of the WAMP package is Apache (or "Apache HTTP Server") which is
used run the web server within Windows. By running a local Apache web server on a Windows
machine, a web developer can test webpages in a web browser without publishing them live on
the Internet.
WAMP also includes MySQL and PHP, which are two of the most common technologies used
for creating dynamic websites. MySQL is a high-speed database, while PHP is a scripting
language that can be used to access data from the database. By installing these two components
locally, a developer can build and test a dynamic website before publishing it to a public web
server.
While Apache, MySQL, and PHP are open source components that can be installed
individually, they are usually installed together. One popular package is called "WampServer,"
which provides a user-friendly way to install and configure the "AMP" components on
Windows.
NOTE: The "P" in WAMP can also stand for either Perl or Python, which are other scripting
languages. The Mac version of LAMP is known as MAMP.
1. Download the WAMP Server

2. Simple steps for „Installation of WAMP Server‟. We need to download the WAMP server
Package .exe file from official WAMP server page. Choose file with Config of your
system.
after select your file, It‟ll ask following Popup can down load it directly.
Web Design Lab (CPL504) 1

3. Start Setup Wizard
You‟ll get below Setup Wizard window, when you Run WAMP server .exe file. It
shows config of WAMP. Click „Next‟ button to continue.
You should agree the license of Wamp Server before Installation of WAMP Server.

4. Select Destination and Icon
Here, you should select the Server Location. Most of the server installing into C
drive only. Me too installing into C drive. You can browse any other location and click
„Next‟.
And choose which icons you want.

In „Ready to Install‟ window, just click „Install‟ button.
Now wait up-to finish the installing.
In following window, just leave Default value and Click „Next‟.

Now Installation Process is almost done. Tic the Launch and Finish it.
5. Run WAMP Server.
Just double click the Wamp Server icon. You‟ll get following small icon in TaskBar.
First it‟s color is Red and change to Orange. At-last it goes to Green color. If green

color comes, Your WAMP server running successful.
Now see your WAMP server Home Page with following URL ‘http://localhost/’.
Now Installation of WAMP Server is finished.
Result:-
Conclusion:-
Industrial Applications :-
WAMP is the popular and industry wide accepted development environment that are been
preferred for open source web application development. These are preferred because of easy
syndication of operating systems, application server, programming language and the database to
develop an open source web application with desirable outcome, that too in optimal
development time.
References:
1. https://en.wikipedia.org/wiki/WampServer
2. https://make.wordpress.org/core/handbook/tutorials/installing-a-local-
server/wampserver/
Questionnaire
1. What is LAMP SERVER ?

2. Define WAMP SERVER ?
3. State MAMP SERVER ?
4. Explain XAMP SERVER ?
5. How does LAMP and WAMP differ?
6. What is setup file?
7. State client side scripting?
8. Explain server side scripting?
9. State the main difference between $message and $$message ?
10. How you will define a Session ?

Experiment No. 2
Web Page using HTML5

Title: Create simple web page using HTML5.
Objective: Objective of this module is to provide students an overview of the concepts Web
Technologies, and HTML.
Scope: Create interactive and elegant web pages using HTML 5
HTML
 HTML stands for Hyper Text Markup Language.

 HTML file is a text file containing small markup tags.
 The markup tags tell the web browser how to display the page.
 HTML file must have .htm or .html file extension.
 HTML file can be created using a simple text editor.
HTML Tags
 HTML tags are used to mark-up HTML elements.
 HTML tags are surrounded by angle brackets.
 HTML tags normally come in pair like <i> and </i>.
 The first tag in a pair is the start tag, and second tag is the end tag.
 The text between the start and end tags is the element content.
 HTML tags are not case sensitive.
 HTML Elements
 HTML documents are defined by HTML elements.
 An HTML element starts with a start tag.
 An HTML element ends with an end tag.
 The element content is text between the start and the end tag.
 Some HTML elements have empty content.
 Empty elements are closed in the start tag.
 HTML elements can have attributes.
HTML Attributes
 Attributes provide additional information about HTML elements.
 Attributes are always specified in the start tag of element.
 Attributes come in name/value pairs like : name=“value”.
 Example <p align=“right”> this tag defined right aligned paragraph.
General structure of HTML document
It consists of following sections :

 HTML Tag-This tag specifies that it is HTML document.
 HEAD Tag-This tag contains meta information about HTML page. External files can be
added to web page by importing in HEAD section.
 TITLE Tag-This tag is included in HEAD tag .The text between <title> and </title> will
be displayed in title bar of web page.
 BODY Tag-The content of web page is included in body tag.
 Example 1
<html>
<head>
<title>
Page title  This title is displayed on title bar of window
</title>
</head>
<body>
Page body  This is actual content of web page
</body >
</html>
Output :
Basic HTML tags

The most important tags in HTML are heading, paragraphs and line breaks.
Simple paragraphs
 HTML documents are divided into paragraphs.
 The paragraph element automatically creates some space before and after itself.
 Paragraphs are defined with the <P> tag.
 HTML automatically adds an extra blank line before and after a paragraph.
 Paragraph tag has one attribute align which specifies the alignment of the text within a
paragraph. It has value left, right, center.
Headings
 Headings are defined with the <h1> to <h6> tags.
 <h1> defines the largest heading and <h6> defies the smallest heading.
 Heading tag has one attribute align which specifies the alignment of the text within a
heading. It has value left, right, center, justify.
 Example 2
<html>
<body>
<h1>This is heading 1</h1>
</body>
</html>
Output
Line breaks
 The <br> tag is used when we want to end a line, but don‟t want to start a new paragraph.
 The <br> tag forces a line break wherever we place it.

 The <br> tag is an empty tag. It has no closing tag i.e. it is singular tag.
 Example : <p> This is <br> paragraph with <br> line break </p>.
Character/Text formatting tags
T EXT FORMATTING TAGS
<b> Defines bold text

<i> Defines italic text
<big> Defines big text
<small> Defines small text
<em> Define emphasized text
<sub> Defines subscripted text
<sup> Defines superscripted
text
<strong> Defines strong text
<strike> Strikeout text
<u> Underline text
<pre> Defines preformatted
text
 Example 3
<html>
<body>
<p><b>This text is bold</b></p>

<p><strong>This text is strong</strong></p>
<p><big>This text is big</big></p>
<p><em>This text is emphasized</em></p>
<p><i>This text is italic</i></p>
<p><small>This text is small</small></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>
<p>The example of subscript is H<sub> 2</sub>O and superscript is
10<sup>5</sup></p>
<pre>
This is
preformatted text.
It preserves both spaces
and line breaks.
</pre>
<u>this is underline text</u><br>
<strike>this text is strikeout text</strike>
</body>
</html>
Output
Citations, Quotations, and Definition Tags

Tag Description
<abbr> Defines an abbreviation
<acronym> Defines an acronym
<address> Defines contact information for the author/owner of a document
<bdo> Defines the text direction
<blockquote> Defines a long quotation
<q> Defines a short quotation
<cite> Defines a citation
<dfn> Defines a definition term
 Example 4
<html>
<body>
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in
1948.</p>
<p>Can I get this <acronym title="as soon as possible">ASAP</acronym>?</p>
<p>The title attribute is used to show the spelled-out version when holding the mouse
pointer over the acronym or abbreviation.</p>
</body>
</html>
Output
 Example 5
<html>
<body>
<p><b>In long quotation the browser inserts white space before and after a blockquote
element. It also insert margins.</b></p>
A long quotation example:
<blockquote>
This is a long quotation. This is a long quotation. This is a long quotation. This is a long
quotation. This is a long quotation.
</blockquote>
<p><b>In short quotation the browser inserts quotation marks around the short quotation
</b></p>
A short quotation example :
<q>This is a short quotation</q>
</body>
</html>
Output

HTML Comments
 The comments tag is used to insert a comment in HTML code. The web browser ignored
the comment. The comment helps the developer to explain the code and to edit the code.
 Syntax- 
Horizontal Rule
 The <hr> tag creates a horizontal line in an HTML page.

 The hr element can be used to separate content in an HTML page.
 The <hr> tag has three attributes such as align, width, size.
 Align attribute specifies the alignment of hr element.
 Size attribute specifies the height of hr element in pixel.
 Width attribute specifies the width of hr element in pixel.
 Example 6
<html>
<head>
<title>hr example</title>
</head>
<body>
The horizontal rule is used to separate two paragraph.
<p>This is some text.</p>
<hr align="left" size="5pixel" width="500pixel" />
<p>This is some text.</p>
</body>
</html>

Output
Font Tag
 The <font> tag specifies the font face, font size, and font colour of text.
 Font tag has three attributes size, colour and face.
 Size attribute specifies the size of text.
 Colour attribute specifies the colour of text.
 Face attribute specifies the font of text.
 Size attribute specifies the size of text.
 Example 7
<html>
<head>
<title>font example</title>
</head>
<body><b>FONT EXAMPLE</b><br><br>
<font size="3" color="red">This is some text in red color!</font><br><br>
<font size="2" face="comic sans ms" color="blue">This is some text in blue
color!</font><br><br>
<font face="verdana" color="green">This is some text in green color!</font>
</body>
</html>

Output
Background
 The <body> tag has three attributes bgcolor, background and text which specify the
background of web page.
 Bgcolor : The bgcolor attribute specifies the background color. The value of this attribute
can be hexadecimal number, RGB value or name of a color.
Ex. < body bgcolor = “rgb(100,100,100)” >
 Background : The background attribute sets an image as the background. The value of
this attribute is the URL of the image which we want to set as background.
<body background=“back.gif”>
 Text : The text attribute specifies the color of text.
<body text=“red”>
 Example 8
<html>
<head>
<title>body example</title>
</head>
<body background="C:\Documents and Settings\All Users\Documents\My
Pictures\Sample Pictures\Winter.jpg" text="green">
<b>This is example of background tag</b>
</body>
</html>
Output
HTML links
 HTML uses the < a > (anchor) tag to create a link to another document.
 An anchor can point to any resource on the web- a HTML page, an image, a sound file, a
movie.
 Hyperlink or only link will take us to a new page on clicking the link.
The syntax of creating an anchor- <a href = “url”> Text to be displayed </a>
 An anchor tag has following attributes :
o Href attribute : Href is hypertext reference. This attribute specifies the address of
the document which we want to link.
o Name attribute : The name attribute is used to create a link within document which
is called as named anchor. Name anchor is used to create link which directly point to
the specific section in document.
<a name=“label”> some text </a>
o Target attribute : The target attribute specifies location where the linked document
will get opened.
Ex. <a href=“www.google.com” target=“_blank”> Google Web Site </a>
o <noframes> tag : The <noframes> tag is used for browsers that do not handle
frames.
 Example 9(a)
<html>
<head>
<title>link example</title>
<body>
<a href=“page2.html”>
This is a link to page 2</a>
</body>
</html>
 Example 9(b)
<html>
<body>
<center>THIS IS PAGE 2...</center>
</body>
Output
Output (on clicking the link)
 Example 10
<html>
<head>
<title>link example</title>
</head>
<body>
<p>
<a href="#c8">See chapter 8</a></p>
<p> <b> Chapter 1</b> </p>
<p> This is chapter 1</p>
<p> This is chapter 4</p> <p> <b> Chapter 5</b> </p>
<a name="c8"><p><b>Chapter 8</b></p></a>
<p>This is chapter 8</p>
<p><b>Chapter 9</b></p>
</body>
</html>

Output
Explanation
In this example name attribute is used to create a bookmark inside an HTML document.
HTML Frames
 HTML frames allows us to display more than one HTML document in the same browser
window.
 Each HTML document is called a frame and each frame is independent of the others.
 We can use <frameset> and <frame> tag to create frame.
 We must include <frameset> tag instead of <body> tag.
 The frameset tag :
 The <frameset> tag defines how to divide the window into frames.
 The <frameset> tag defines a frameset.
 Each frameset defines a set of rows or columns.
 Cols-Specifies the number and size of columns in a frameset.
 Rows-Specifies the number and size of rows in a frameset.
 The values of the rows or columns indicate the amount of screen area each row or
column will occupy.
 The frame tag :
 The <frame> tag defines what HTML document to put into each frame.
 The src attribute specifies the URL of the file which we want to display.
 Scrolling attribute control the appearance of the scrollbar within each frame. It can
have three values such as yes, no, auto.
 We can resize frames by simply clicking and dragging the frame border. Noresize
attribute avoids this.
 Name : Specifies the name of a frame.
 Marginheight : Specifies the top and bottom margins of a frame.
 Marginwidth : Specifies the left and right margins of a frame.

 The disadvantages of frames are :
(i) The web developer has to keep track of more HTML documents.
(ii) It is difficult to print the entire page.
 Example 11(a)
<html>
<frameset cols=“25%,50%,25%”>
<frame src=“frame1.html” />
</frameset>
 Example 11(b)
<html>
<head>
<title>frame1</title>
</head>
<body>
<center><h1>THIS IS FRAME 1</h1></center>
</body>
</html>
 Example 11(C)
<html>
<head>
</head>
<body>
</body>
 Example 11(d)
<html>
<head>
</head>
<body>
</body>
Output


 Example 12
Output
<html>
<head>
<title>frame example</title>
</head>
<frameset rows="25%,75%">
<frame src="frame1.html" noresize="noresize" scrolling="no" />
<frameset cols="50%,50%">
<frame src="frame2.html" scrolling="yes"/>
<frame src="frame3.html" scrolling="no"/>
</frameset>
</frameset>
</html>

HTML Tables
 Tables are used to represent the information in tabular form.

 Tables are defined with the <table> tag.
 A table is divided into rows with the <tr> tag and each row is divided into data cells with
the <td> tag. The td stands for “table data” which represent the content of data cell.
 A data cell can contain text, images, lists, paragraphs, forms, table etc.
 <caption> tag defines table caption.
 <th> tag is used to define the heading of table.
 Border attribute of <table> tag specify border around table.
 Cell padding specifies the white space between the cell content and its border.
 Cell spacing specifies the distance between the cells.
 Colspan is used to span cells across more than one column.
 Rowspan is used to span cells across more than one row.
 Example 13
<html>
<body>
<table border=“2”>
<caption>Student Information </caption>
<tr>
<th>Roll Number </th>
<th>NAME </th>
</tr>
<tr>
<td>101 </td>
<td>Priyanka Kulkarni</td>
</tr>
<tr>
<td>102 </td>
<td>Prachi Malpure</td>
</tr>
<tr>
<td>103 </td>
<td>Vedashri Awati</td>
</tr>
</table>
</body>
</html>
Output
 Example 14
<html>
<head>
<title>table</title>
</head>
<body>
<table border="1" cellpadding="5" cellspacing="0" width="100%">
<tr>
<th rowspan="2">Persons</th>
<th colspan="2">Personal Information </th>
</tr>
<tr>
<td>Height</td>
<td>Weight</td>
</tr>
<tr>
<td>Tejas</td>
<td>125CM </td>
<td>34 </td>
</tr>
<tr>
<td>Sagar</td>
<td>175CM </td>
<td>75 </td>
</tr>
<tr>
<td>Mayuresh</td>
<td>135CM </td>
<td>40</td>
</tr>
</table>
</body>
</html>
Output
HTML List
List is used to sequentially arrange the items in web page.
 Inside a list item you can put text, line breaks, images, links, other lists, etc.
 In HTML, there are 3 types of lists.
 Unordered lists
 An unordered list is a list of items.
 The list items are marked with bullets.
 An unordered list starts with the <ul> tag. Each list item starts with te <li> tag.
 Ordered lists
 In ordered list, the items are marked with numbers.
 An ordered list starts with the <ol> tag.
 Definition lists
 A definition list is not a list of items. This is a list of terms and explanation of the
terms.

 A definition list starts with the <dl> tag. Each definition term starts with the <dt> tag
and each definition starts with the <dd> tag.
 <li>- tag defines a list item.
 The type attribute specifies which kind of bullet point will be used. It has value 1, i, I,
a, A, square, disc, circle.
 Value attribute specifies the number of a list item.
 Example 15
<html>
<body>
<h4>A Nested List:</h4>
<ul type=“square”>
<li>Coffee</li>
<li>Tea
<ol>
<li>Black tea</li>
<li>Green tea</li>
</ol>
</li>
<li>Milk</li>
</ul>
<h4>A Definition List:</h4>
Input Output Devices
<dl>
<dt>Mouse</dt>
<dd>It is input device</dd>
<dt>Printer</dt>
<dd>It is output device</dd>
</dl>
</body>
</html>
Output

HTML Images
 <img> tag is used to display image in web page.
 The image tag has following attributes :
 Src : it specifies the source of image.
 Width : It specifies the width of image in pixels.
 Height : It specifies the height of image in pixels.
 Alt : alternate description of the image.
 Align : Specifies the alignment of an image according to surrounding elements. It has
value top, bottom, left, right, middle.
 Hspace : Specifies the whitespace on left and right side of an image
 Vspace : Specifies the whitespace on top and bottom of an image
 Example 16
<html>
<body>
<img src=“ C:\Documents and Settings\All Users\Documents\My Pictures\Sample
Pictures\Sunset.jpg” height=100 width=300 align=“center”></img>
</body>
</html>
Output
Explanation
This program shows how to use an image as a link.

 Example 17
<html>
<body>
<p><b>Example of an image as link</b></p>
<p><b>This link point to a form</b></p>
<a href="formprogram.html">

<img src="E:\Users\Public\Pictures\Sample Pictures\Tulips.jpg" width="32" height="32"
/>
</a></p>
</body>
</html>
Output
HTML Forms
 HTML forms are used to pass data to a server.
 A form is an area that can contain form elements.
 Form elements are elements that allow user to enter information like text fields, text area
fields, radio buttons and checkboxes in a form.
 The most commonly used input types are :
 Text fields : Text fields are used when we want user to type letters, numbers in a
form. This is one-line input field.
Syntax : < input type = “text” name = “fname” >
 Password : The characters in a password field are masked.
Syntax : <input type=“password” name=“pwd”>
 Radio buttons : Radio buttons are used when we want the user to select one of a
limited number of choices. Only one option can be chose.
Syntax : < input type = “radio” name = “r1” value = “maruti800”> maruti800
 Checkboxes : Checkboxes are used when we want the user to select one or more
options of a limited number of choices.
Syntax : <input type = “checkbox” name = “bike”> I like a bike
 Text Area Box : Text area allows multiple line of input. It has two attributes rows
and cols. The attribute determine the number of rows and character columns in the
text area field.
Syntax : < texarea rows = 10 cols = 40 name = “t1” >

 Selection Box : The <select> tag is used to create a menu of items. The attribute
Name is the name assigned to the list.Size specifies the size of list. To add the item in
the list Option tag is used.
Syntax : <select name=“car” size=“2”>
<option>maruti800</option>
<option>tata sumo</option>
</select>
The form attribute : The following are the attributes of <form> tag :
1) Action attribute :
Specifies where to send the form-data when a form is submitted
2) Method attribute :
 Specifies how to send form-data.
 The method attribute can have either value get or post.
3) Enctype :
Specifies how form-data should be encoded before sending it to a server.

4) Name : Specifies the name for a form.
5) Target : Specifies where to open the action URL.
 Example 18
<html>
<body>
<p>Registration Form
<form name=“registration_form” action=“action.asp” method=“get”>
First name: <input type=“text” name=“FirstName” value=“first name” /><br /><br />
Last name: <input type=“text” name=“LastName” value=“last name” /><br /><br />
Gender<br><input type=“radio” name=“gender” value=“male” /> Male<br />
<input type=“radio” name=“ gender” value=“female” /> Female<br>
<input type=“submit” value=“Submit” />
</form>
</p>
<p>If we click the “Submit” button, the form-data will be sent to a page called
“action.asp”.</p>
</body>
</html>

Output
Example 19
<html>
<body>
<p>Personal InformationForm
<form name=“personal_form” action=“action.asp” method=“get”>
First name: <input type=“text” name=“FirstName” /><br /><br />
Middle name: <input type=“text” name=“FirstName” /><br /><br />
Last name: <input type=“text” name=“LastName” /><br/><br/>
Gender<br><input type="radio" name="gender" value="male" /> Male<br />
<input type="radio" name=" gender" value="female" /> Female<br>
Address
<p><textarea rows="5" cols="28" name="address"></textarea></p>
<p>Education<select name="edu'' size="2">
<option value="Graduate">Graduate</option>
<option value="UnderGraduate">UnderGraduate</option>
<option value="Doctor">Doctor</option>
</select></p>
<br /><br />
<p>
Hobbies<br>
<input type="checkbox" name="c1" value="reading"/>Reading
<input type="checkbox" name="c1" value="writing"/>Writing
<input type="checkbox" name="c1" value="sports"/>Sports

</p>
<input type="submit" value="Submit" />
</form>
</p>
</body>
</html>
Output
Result:-
Conclusion:-
Industrial Applications:- HTML5 has become the global web standard, used it to benefit
industrial application development. HTML5 A Powerful Tool for Mobile Application
Development
References:
1. www.nptelvideos.in
2. www.w3schools.com
3. http://spoken-tutorial.org
4. Robin Nixon, "Learning PHP, MySQL, JavaScript, CSS & HTML5" Third Edition,
O'REILLY,2014.

Questionnaire
1. What is HTML?
2. What are tags?
3. Do all HTML tags have end tag?
4. What is the difference between HTML elements and tags?
5. What is semantic HTML?
6. What is image map?
7. Does a hyperlink only apply to text?
8. What is a marquee?
9. How many tags can be used to separate section of texts?
10. What are empty elements?

Experiment No. 3
Web Page using CSS3 and HTML5

Title: Design and Implement Web page using CSS3 and HTML5
Objectives: In this module student will learn, defining a CSS and understanding its purpose
different syntax and types of CSS.
Scope: Design web pages and use CSS to control the layout pages.
Theory:
 CSS stands for cascading style sheets.
 Styles define how to display HTML elements.
 It allows developers to control the style and layout of multiple web pages at a time.
 CSS has complete control over the appearance of HTML elements. It can control text
colour, background colours, borders. It allows manipulation and decoration of text.
 Syntax
 The CSS syntax is made up of three parts :
(i) Selector (ii) Property (iii) Value
 Syntax
Selector {property : value ; …}
 The selector is normally the HTML tag we want to define.
 The property is the attribute we want to change.
 Each property can take a value.
 Examples
P {text - align : center ; color : green}
h1, h2, h3 {color : red}
 The style sheet can be of three types :
External style sheet
All the style properties can be collected and put together in a separate file which has
extension.CSS. This file can be then linked to HTML file so that styles will apply to various
elements. The linking of CSS file and HTML file is done by adding a <link> tag in the <head>
section.
Example 1
First style.html
<html>
<head>
<title> CSS example </title>
<link rel = “stylesheet” type =“text/css” href = “exp1.css” />
</head>
<body>
<h1> This is h1 heading in red color </h1>
<p> This is first paragraph with blue color </p>
</ body>
</html>
exp1.css
h1 {color : red ;}
p {color : blue ; font-family : sans-serif ;}
In this example rel attribute specifies we are linking a stylesheet and the href attribute
specifies the file containing the style sheet is “expl.css”.
Internal style sheets
The styles can be directly specified in the <head> section. An internal style sheet is used
when a single document has a unique style.
Example 2
<head>
<style>
p {color : red ;}
h1 {color : blue ;}
</ style>
</ head>
<body>
<h1> This is h1 heading in blue color </ h1>
<p> This is first paragraph with red color. This color has been set by using cascading style sheet
</p>
< / body>
< / html>
Inline style sheet :
In this method styles are specified with the tag itself.
Example 3
<p style = “color : cyan ; margin-right : 10 px”>
Result: -
Conclusion: -
Industrial Applications: -
CSS3 style definitions allows for the easy creation of a beautiful and responsive user interface
References:
O'REILLY,2014.
Questionnaire
1. What is CSS?
2. State advantages of using CSS?
3. Define the components of a CSS style?
4. What is type selector?
5. What is universal selector?
6. Explain class selector?
7. Can you make a class selector particular to an element type?
8. What is attribute selector?
9. How CSS style overriding works>
10. How to select all paragraph elements with a Lang attribute?

Experiment No. 4
Web Form using JavaScript and HTML 5

Title: Design web forms using JavaScript functions and use dynamic HTML page.
Objectives: In this lab student will learn how to define client side scripting and understand its
advantages and disadvantages. Embedding JavaScript code into HTML document using script
tag, and will understand dynamic HTML.
Scope: Create animation using JavaScript.
Theory:
What is JavaScript ?
 Java script was designed to add interactivity to HTML pages.
 A scripting language is a lightweight programming language.
 Java script is usually embedded directly into HTML pages.
 Java script is an interpreted language i.e. script can be executed without preliminary
compilation.
Functionality provided by JavaScript
 JavaScript provide a programming tool to HTML designers : HTML authors are
generally not programmers, but JavaScript is scripting language with a very simple syntax.
 JavaScript can put dynamic text into an HTML page : A JavaScript statement like this
: document.write (“<b>“ + name “</b>“) can write a varying text into an HTML page.
 JavaScript can react to events : A java script can be set to execute predefined code when
particular event occurs or something happens, for e.g. when a page has finished loading or
when a user clicks on an HTML element.
 JavaScript can read and write HTML elements : A Java script can read and change the
content of an HTML element.
 JavaScript can be used to validate data : A java script can be used to validate form data
before it is submitted to a server. This saves the server from additional processing.
 JavaScript can be used to create cookies : A Java script can be used to store and
retrieve information on the user‟s computer.
How and where to put the JavaScript ?
 We have to use <script > tag to insert JavaScript into HTML pages. Inside the <script> tag
we have to use the type attribute to define the scripting language.
 The <script type = “text/ javascript”> indicate the start of Java script and </script> tells
where the Java script ends.
 Example 1
<html>
<body>

<script type=“text/javascript”>
document.write(“Hello java script World!”);
</script>
</body>
</html>
 The document.write command is use for writing output to a page.
 By entering the document write command between the <script> and </script> tags, the
browser will recognize it as a Java script command and execute the code line. In this case
the browser will write Welcome to JavaScript to the page.
Output
JavaScript Form Validation

 JavaScript can be used to validate data in HTML forms before sending the form content to
a server.
Example 2
<html>
<head><script type=“text/javascript”>

</script></head>
<body><b>Registration Form</b>
<form name=“contact_form” method=“post”
action=“form_val.html”
onsubmit=“return validate_form ( );”>
<h1>Please Enter Your Name</h1>
<p>Your Name: <input type=“text” name=“name”></p>

<p>Your Age: <input type=“text” name=“age”></p>
<p>Your Email: <input type=“text” name=“email”></p>

<p>Your Gender:</p> <p>Male<input type=“radio” name=“gender” value=“male”></p>
<p>Female<input type=“radio” name=“gender” value=“male”></p>
</p>
<p><input type=“submit” name=“send” value=“Send Details”></p>
</fom></body></html>
Output
Result:-
Conclusion: -
Industrial Applications: -
Most common uses of java script are Validation, search boxes, animation, unload functions,
date/time, APIs, JSON files and much more. JavaScript allows you to create highly responsive
interfaces that improve the user experience and provide dynamic functionality, without having
to wait for the server to react and show another page.
References:
O'REILLY,2014.
Questionnaire
1. What is javaScript?
2. Enumerate the difference between java and javaScript?
3. What are javaScript types?
4. What is the use of isNAN function?
5. Between javaScript and an ASP Scipt, which is faster?
6. What is negative infinity?
7. Is it possible to break JavaScript code into several lines?
8. What are undeclared and undefined variables?
9. Write the code for adding new elements dynamically?
10. Define a prompt box?

Experiment No. 5
Web Form using JavaScript and jQuery

Aim : Write a program for Form validation/ event handling using jQuery
Objective: Students will be able to how to select, manipulate, animate, and extend a simple
Web page.
Scope: Create dynamic web pages and animations with
Theory :
JQuery, a popular open source JavaScript Library, provides many advanced and cross-browser
functions that can enhance your web applications.
Why Use JQuery Instead of Just Basic JavaScript?
JavaScript is a fairly low-level programming language. It does not provide advanced page
manipulation and decoration functions, and it provides nothing concerning animations.
Moreover, using direct JavaScript can cause issues related to browser incompatibilities. Those
issues have made many JavaScript applications difficult to code, resulting in high maintenance
costs.
JQuery aims to ease all these problems by providing a lightweight library that adds many
advanced and cross-browser functions to the standard language. In addition, there is a very
dynamic community that adds more-advanced components based on JQuery.
A modern Web application wouldn't be complete without some AJAX functionality. JQuery
provides functions for sending HTTP GET and POST requests, and it can work easily with the
JavaScript Object Notation (JSON) format we saw in the first article. This functionality enables
us to query the REST back end we coded in the first article.
Steps to install jQuery
JQuery is a JavaScript library, so installing it is just a matter of importing a script inside a Web
page. However, there are a few best practices to be aware of:
JQuery is available through several content delivery networks (CDN). Using those CDNs
instead of installing JQuery on your servers should provide significant performance and
bandwidth gains.
As with any static content, JQuery files should be served compressed. That's why there are two
versions of JQuery available: a minified (or “min”) version, which is small and efficient, and a
development version, which is easier to read and debug. For the rest of this article, we will use
the min version, which is enough for our needs.
JQuery files should be cached on the client side, so you should use the JQuery version number
in the file name.
1. Go to the download page to grab the latest version available.

2. Now put downloaded jquery-1.3.2.min.js file in a directory of your website, e.g. /jquery.
How to use jQuery library?
Now you can include jquery library in your HTML file as follows:
<html><head><title>The jQuery Example</title>
<script type="text/javascript"
src="/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
// you can add our javascript code here
</script>
</head><body>........</body></html>
Result:-
Conclusion:-
In SAP Portal applications and for animation
References:
O'REILLY,2014.
5. http://www.oracle.com/technetwork/java/intro-jquery-166845.html
6. http://jquery.com/
Questionnaire
1.What is jQuery?
2.How JavaScript and jQuery are different?
3. Is jQuery a library for client scripting or server scripting?
4. What is a CDN?
5. What are the Advantages of jQuery?
6. What are selectors in jQuery and how many types of selectors are there?
7. How do you check if an element is empty?
8. What is the use of jquery .each() function?
9. Which is the starting point of code execution in jQuery?
10. Is there any difference between body onload() and document.ready() function?

Experiment No.6
Web Page using PHP

Title:- Develop simple web page using PHP
Objective: This lab gives a basic introduction of to PHP and dynamic programming on the
server side.
Scope: Creating a server side script using PHP, decisions, looping
Theory:
1. Basic php Syntax
 PHP script can be placed anywhere in the document .A PHP script starts
with <?php and ends with ?>:
<?php
//PHP code goes here
?>
 The default file extension for PHP files is ".php". A PHP file normally contains
HTML tags, and some PHP scripting code. Below, we have an example of a simple
PHP file, with a PHP script that uses a built-in PHP function "echo" to output the
text "Hello World!" on a web page:
<h1>My first PHP page</h1>
<?php
echo "Hello World!";
?>
Comments in php
 A comment in PHP code is a line that is not read/executed as part of the program. Its
only purpose is to be read by someone who is editing the code!
 Comments are useful for:
 To let others understand what you are doing - Comments let other programmers
understand what you were doing in each step (if you work in a group)
 To remind yourself what you did - Most programmers have experienced coming
back to their own work a year or two later and having to re-figure out what they
did. Comments can remind you of what you were thinking when you wrote the
code
 PHP supports three ways of commenting:
<?php
// This is a single line comment
# This is also a single line comment
/*

This is a multiple lines comment block
that spans over more than
one line
*/
?>
</body>
</html>
2. PHP Case Sensitivity
 In PHP, all user-defined functions, classes, and keywords (e.g. if, else, while, echo,
etc.) are NOT case-sensitive. In the example below, all three echo statements below
are legal (and equal):
<?php
ECHO "Hello World!<br>";
echo "Hello World!<br>";
EcHo "Hello World!<br>";
?>
However; in PHP, all variables are case-sensitive.
In the example below, only the first statement will display the value of the $color
variable (this is because $color, $COLOR, and $coLOR are treated as three different
variables):
<?php
$color="red";
echo "My car is " . $color . "<br>";
echo "My house is " . $COLOR . "<br>";
echo "My boat is " . $coLOR . "<br>";
?>
>
3. PHP Variable
 As with algebra, PHP variables can be used to hold values (x=5) or expressions (z=x
+ y). A variable can have a short name (like x and y) or a more descriptive name
(age, carname, total_volume).
Rules for PHP variables:
 A variable starts with the $ sign, followed by the name of the variable
 A variable name must start with a letter or the underscore character
 A variable name cannot start with a number
 A variable name can only contain alpha-numeric characters and underscores (A-z, 0-
9, and _ )
 Variable names are case sensitive ($y and $Y are two different variables)
 Creating (Declaring) PHP Variables

 PHP has no command for declaring a variable.
 A variable is created the moment you first assign a value to it:
<?php
$txt="Hello world!";
$x=5;
$y=10.5;
?>
 PHP is a Loosely Type Language
 In the example above, notice that we did not have to tell PHP which data type the
variable is.
 PHP automatically converts the variable to the correct data type, depending on its
value.
 In other languages such as C, C++, and Java, the programmer must declare the
name and type of the variable before using it.
 PHP Variables Scope
In PHP, variables can be declared anywhere in the script. The scope of a variable is
the part of the script where the variable can be referenced/used. PHP has three
different variable scopes:
 local
 global
 static
 Local and Global Scope
 A variable declared outside a function has a GLOBAL SCOPE and can only
be accessed outside a function.
 A variable declared within a function has a LOCAL SCOPE and can only be
accessed within that function.
The following example tests variables with local and global scope:
<?php
$x=5; // global scope
function myTest() {
$y=10; // local scope
echo "<p>Test variables inside the function:</p>";
echo "Variable x is: $x";
echo "<br>";
echo "Variable y is: $y";
}
myTest();
echo "<p>Test variables outside the function:</p>";

echo "Variable x is: $x";
echo "<br>";
echo "Variable y is: $y";

?>
4. PHP echo and print Statements
 In PHP there are two basic ways to get output: echo and print.
There are some differences between echo and print:
 echo - can output one or more strings.

 print - can only output one string, and returns always 1. echo is marginally faster
compared to print as echo does not return any value.
 The Php Echo Statement: echo is a language construct, and can be used with or
without parentheses: echo or echo().
<?php
echo "<h2>PHP is fun!</h2>";
echo "Hello world!<br>";
echo "I'm about to learn PHP!<br>";
echo "This", " string", " was", " made", " with multiple prameters.";
$txt1="Learn PHP";
$txt2="W3Schools.com";
$cars=array("Volvo","BMW","Toyota");
echo $txt1;
echo "<br>";
echo "Study PHP at $txt2";
echo "My car is a {$cars[0]}";
?>
 The PHP print Statement : print is also a language construct, and can be used with
or without parentheses: print or print().
<?php
print "<h2>PHP is fun!</h2>";
print "Hello world!<br>";
print "I'm about to learn PHP!";
$txt1="Learn PHP";
$txt2="W3Schools.com";
print $txt1;
print "<br>";
print "Study PHP at $txt2";
print "My car is a {$cars[0]}";
?>
5. PHP Data Types
String, Integer, Floating point numbers, Boolean, Array.
 String
 A string is a sequence of characters, like "Hello world!".
 A string can be any text inside quotes. You can use single or double quotes:
<?php
$x = "Hello world!";
echo $x;
$x = 'Hello world!';?>
 Integers
An integer is a number without decimals. Rules for integers:
 An integer must have at least one digit (0-9)

 An integer cannot contain comma or blanks
 An integer must not have a decimal point
 An integer can be either positive or negative
 Integers can be specified in three formats: decimal (10-based), hexadecimal (16-
based - prefixed with 0x) or octal (8-based - prefixed with 0)
<?php
$x = 5985;
var_dump($x);
echo "<br>";
$x = -345; // negative number
var_dump($x);
echo "<br>";
$x = 0x8C; // hexadecimal number
var_dump($x);
echo "<br>";
$x = 047; // octal number
var_dump($x);
?>
 Floating Point Numbers
 A floating point number is a number with a decimal point or a number in

exponential form.
 In the following example we will test different numbers. The PHP var_dump()
function returns the data type and value of variables:
<?php
$x = 10.365;
var_dump($x);
echo "<br>";
$x = 2.4e3;
var_dump($x);
echo "<br>";
$x = 8E-5;
var_dump($x);
?>
 Booleans
Booleans can be either TRUE or FALSE. Booleans are often used in conditional
testing.
$x=true;
$y=false;
 PHP Arrays
 An array stores multiple values in one single variable. In the following example
we create an array, and then use the PHP var_dump() function to return the data
type and value of the array:
<?php
var_dump($cars);
?>
6. PHP String Functions
A string is a sequence of characters, like "Hello world!" we will look at some commonly
used functions to manipulate strings.
 PHP strlen() function
The strlen() function returns the length of a string, in characters. The example below
returns the length of the string "Hello world!":
<?php
echo strlen("Hello world!");
?>
The output of the code above will be: 12
 PHP Strpos() function
The strpos() function is used to search for a specified character or text within a string. If
a match is found, it will return the character position of the first match. If no match is
found, it will return FALSE.
The example below searches for the text "world" in the string "Hello world!":
<?php
echo strpos("Hello world!","world");
?>
The output of the code above will be: 6.
7. PHP Operators
Operator Name Example Result

+ Addition $x + $y Sum of $x and $y
- Subtraction $x - $y Difference of $x and
$y
* Multiplication $x * $y Product of $x and $y
/ Division $x / $y Quotient of $x and $y
% Modulus $x % $y Remainder of $x
divided by $y
PHP String Operators

. Concatenation $txt1 = "Hello" Now $txt2 contains "Hello
$txt2 = $txt1 . " world!"
world!"
.= Concatenation $txt1 = "Hello" Now $txt1 contains "Hello
assignment $txt1 .= " world!" world!"
PHP Increment / Decrement Operators
Operator Name Description

++$x Pre-increment Increments $x by one, then returns $x
$x++ Post-increment Returns $x, then increments $x by one
--$x Pre-decrement Decrements $x by one, then returns $x
$x-- Post-decrement Returns $x, then decrements $x by one
PHP Comparison Operators
The PHP comparison operators are used to compare two values (number or string):

== Equal $x == $y True if $x is equal to $y
=== Identical $x === True if $x is equal to $y,
$y and they are of the same
type
!= Not equal $x != $y True if $x is not equal to
$y
<> Not equal $x <> $y True if $x is not equal to
$y
!== Not identical $x !== True if $x is not equal to
$y $y, or they are not of the
same type

> Greater than $x > $y True if $x is greater than
$y
< Less than $x < $y True if $x is less than $y
>= Greater than $x >= $y True if $x is greater than
or equal to or equal to $y
<= Less than or $x <= $y True if $x is less than or
equal to equal to $y
PHP Logical Operators

and And $x and $y True if both $x and $y are true
or Or $x or $y True if either $x or $y is true
xor Xor $x xor $y True if either $x or $y is true, but
not both
&& And $x && True if both $x and $y are true
$y
|| Or $x || $y True if either $x or $y is true
! Not
8. if...else...elseif Statements
very often when you write code, you want to perform different actions for different
decisions. You can use conditional statements in your code to do this.
In PHP we have the following conditional statements:
 if statement - executes some code only if a specified condition is true
if (condition) {
code to be executed if condition is true;
}
 if...else statement - executes some code if a condition is true and another code if the
condition is false
if (condition) {
} else {
code to be executed if condition is false;
}
 if...elseif....else statement - selects one of several blocks of code to be executed
if (condition) {
} elseif (condition) {
} else {
code to be executed if condition is false;
}
 switch statement - selects one of many blocks of code to be executed
switch (n) {
case label1:
code to be executed if n=label1;
break;
case label2:
break;
case label3:
break;
...
default:
code to be executed if n is different from all labels;
}
9. PHP Loops
Often when you write code, you want the same block of code to run over and over again
in a row. Instead of adding several almost equal code-lines in a script, we can use loops
to perform a task like this.
In PHP, we have the following looping statements:
 while - loops through a block of code as long as the specified condition is true
while (condition is true) {

code to be executed;
}
 do...while - loops through a block of code once, and then repeats the loop as long
as the specified condition is true
do {
} while (condition is true);
 for - loops through a block of code a specified number of times
for (init counter; test counter; increment counter) {

}
 foreach - loops through a block of code for each element in an array
foreach ($array as $value) {

}

<?php
$colors = array("red","green","blue","yellow");
foreach ($colors as $value) {

echo "$value <br>";
}
?>
10. PHP 5 Functions
 PHP User Defined Functions
 Besides the built-in PHP functions, we can create our own functions.
 A function is a block of statements that can be used repeatedly in a program.
 A function will not execute immediately when a page loads.
 A function will be executed by a call to the function
function functionName() {
}
<?php
function writeMsg() {
echo "Hello world!";
}
writeMsg(); // call the function

?>
 PHP Function Arguments
 Information can be passed to functions through arguments. An argument is just
like a variable.
 Arguments are specified after the function name, inside the parentheses. You can
add as many arguments as you want, just seperate them with a comma.
 The following example has a function with one argument ($fname). When the
familyName() function is called, we also pass along a name (e.g. Jani), and the
name is used inside the function, which outputs several different first names, but
an equal last name:
<?php
function familyName($fname) {
echo "$fname Refsnes.<br>";
}
familyName("Jani");
familyName("Hege");
familyName("Stale");
familyName("Kai Jim");
familyName("Borge");
?>
11. PHP SESSION

When you are working with an application, you open it, do some changes and then
you close it. This is much like a Session. The computer knows who you are. It knows
when you start the application and when you end. But on the internet there is one
problem: the web server does not know who you are and what you do because the
HTTP address doesn't maintain state.
A PHP session solves this problem by allowing you to store user information on
the server for later use (i.e. username, shopping items, etc). However, session
information is temporary and will be deleted after the user has left the website. If you
need a permanent storage you may want to store the data in a database.
Sessions work by creating a unique id (UID) for each visitor and store variables
based on this UID. The UID is either stored in a cookie or is propagated in the URL.
Starting a PHP Session

Before you can store user information in your PHP session, you must first start up
the session. The session_start() function must appear BEFORE the <html> tag:
<?php session_start(); ?>
<html>
<body>
</body>
</html>
The code above will register the user's session with the server, allow you to start
saving user information, and assign a UID for that user's session.
Storing a Session Variable

The correct way to store and retrieve session variables is to use the PHP $_SESSION
variable:
<?php
session_start();
// store session data
$_SESSION['views']=1;
?>
<html>
<body>
<?php
//retrieve session data
echo "Pageviews=". $_SESSION['views'];
?>
</body>
</html>
Output: Pageviews=1
In the example below, we create a simple page-views counter. The isset() function
checks if the "views" variable has already been set. If "views" has been set, we can
increment our counter. If "views" doesn't exist, we create a "views" variable, and set
it to 1:

<?php
session_start();
if(isset($_SESSION['views']))
$_SESSION['views']=$_SESSION['views']+1;
else
$_SESSION['views']=1;
echo "Views=". $_SESSION['views'];
?>
Destroying a Session
If you wish to delete some session data, you can use the unset() or the
session_destroy() function. The unset() function is used to free the specified session
variable:
<?php
session_start();
if(isset($_SESSION['views']))
unset($_SESSION['views']);
?>
You can also completely destroy the session by calling the session_destroy()
function:
<?php
session_destroy();
?>
session_destroy() will reset your session and you will lose all your stored session
data.
Server-side scripting: It is a web server technology in which a user's request is fulfilled

by running a script directly on the web server to generate dynamic web pages. It is
usually used to provide interactive web sites that interface to databases or other data
stores. This is different from client-side scripting where scripts are run by the viewing
web browser, usually in JavaScript. The primary advantage to server-side scripting is the
ability to highly customize the response based on the user's requirements, access rights,
or queries into data stores.
From security point of view, server-side scripts are never visible to the browser as these
scripts are executes on the server and emit HTML corresponding to user's input to the
page.
When the server serves data in a commonly used manner, for example according to
the HTTP or FTP protocols, users may have their choice of a number of client programs
(most modern web browsers can request and receive data using both of those protocols).
In the case of more specialized applications, programmers may write their own server,
client, and communications protocol, that can only be used with one another.
Programs that run on a user's local computer without ever sending or receiving data over
a network are not considered clients, and so the operations of such programs would not
be considered client-side operations.

Example 1:Use HTML form to accept the two numbers N1 and N2 and using PHP
program display only prime numbers in between N1 and N2
<?php
$x = $_GET['prime'];
?>
<html>
<head>
<title>TEST</title>
</head>
<body>
<form method="GET" action="prime.php">
<input type="text" name="prime" />
<input type="submit" value="submit" />
<form>
<?php
for($j=1;$j<=$x;$j++){
$count = 0;
if(floor($j/2)*2 == $j/2*2){
//this will prevent the number 2 from outputting but 2 is a known prime so its ok
}
else{
for($i=1;$i<=$j;$i++){
$y = $j/$i;
$z = floor($j/$i);
if($y == $z){
$count+=1;
$array[$i] = $y;
}
}
}
Example 2. A web application that takes name and age from an HTML page. If the age
is less than 18, it should send a page with “hello <name>,and u are not authorized to
visit this site” otherwise it should send “welcome <name> to this site” message where
name should be replaced with the entered name otherwise it should send
welcome<name> to the site.
Form2.html
<form action='home.php'
method='post'> Login<br>
User name: <input type='text' name='name'><br>
age: <input type='text' name='age'><br>
<input type='submit'value='Login'>

home.php
<?php
$name = $_POST['name'];
$age = $_POST['age'];
if ($age < 18)
print "Hello " . $name . " you are not authorized to visit this site.";
else
print "Welcome " . $name . " to this site."
?>

Result:-
Conclusion:-
Industrial Applications :- PHP is a scripting language designed for developing dynamic web
pages. While its principal purpose was server-side scripting, it has grown to incorporate a
command line interface capability and can be used to develop client-side Graphical User
Interface (GUI) applications as well.
References:
O'REILLY,2014.
Questionnaire
1. What does PHP stand for?
2. PHP server scripts are surrounded by delimiters, which?
3. How do you write "Hello World" in PHP
4. All variables in PHP start with which symbol?
5. What is the correct way to end a PHP statement?
6. The PHP syntax is most similar to which programming language?

7. How do you get information from a form that is submitted using the "get" method?
8. When using the POST method, variables are displayed in the URL:
9. In PHP you can use both single quotes ( ' ' ) and double quotes ( "" ) for strings: is it true?
10. Is it true Include files must have the file extension ".inc"?

Experiment No .7
PHP with database connectivity MYSQL

Title:- Developed interactive web page using PHP with database connectivity MYSQL
Objective : This lab gives a basics of PHP and MySQL Database(both are the most popular
open source technologies)
Scope: To develop an interactive web based application
Theory:
PHP is a server scripting language, and a powerful tool for making dynamic and interactive Web pages.
A PHP script is executed on the server, and the plain HTML result is sent back to the browser.
A PHP script can be placed anywhere in the document.
A PHP script starts with <?php and ends with ?>:
<?php
// PHP code goes here
?>
The default file extension for PHP files is ".php".
A PHP file normally contains HTML tags, and some PHP scripting code.PHP statements end
with a semicolon (;).
● mysql_connect("Server name","Server Username","Server Password") - The syntax used

to connect to our XAMPP server. localhost or 127.0.0.1 is the name of the server. The default
username is root and no password for default.
● mysql_select_db("database name") - Selects the database to be used.
● or die('Message') - Displays the error message if the condition wasn't met.
● mysql_query('sql query') - does the SQL queries.
● mysql_fetch_array('query') - fetches all queries in the table to display or manipulate data.

It is placed in a while loop so that it would query all rows. Take note that only 1 row is queried
per loop that's why a while loop is necessary.
$row['row name'] - the value of the column in the current query. It is represented as an array.
In our case $row is the name of the variable for our row in the loop.
Steps:
1.Make the connection
2.Select the database

3. Perform the query on the table
4.Print out the data
5. Close the connection
Result:-
Conclusion:-
Digital Ad banners, where the PHP script can be used to retrieve a digital banner from the
database, which then selects a random banner from its table records and sends it back to the
calling script. The PHP script can also maintain a count of banner views and clicks from the
website. Internet forums or digital boards, which use PHP and MySQL to store and retrieve
user messages.
References:
O'REILLY,2014.
5. Mike Mcgrath, ―PHP & MySQL in easy Steps‖, Tata McGraw Hill, 2012.
Questionnaire
1. What is MySQL?
2. What is the advantage of MySQL?
3. How will you close a MySql database using PHP?
4. How can we communicates with MySQL server?
5. How can you connect to MySQL from PHP?
6. What is the use of mysql_query() function ?
7. How can we create a database using PHP and MySQL?
8. Explain phpMyAdmin?
9. How to repair a table in MySQL ?
10. What is a trigger and does MySQL support triggers ?

Experiment No. 8
Encode the data with XML

Title:- Develop XML web page using DTD, XSL
Objectives:
Objective is to learn about basics of XML and how it can be used to store information away
from the mechanism of processing or formatting of such data. Will also learn how to build
simple XML files and be able to manipulate and refer to them.
Scope: Encode the data with XML that allows the programs to share the data.
Theory:
XML (extensible Markup Language) is a markup language. XML is designed to store and
transport data. Xml was released in 1998. It was created to provide an easy to use and store self-
describing data. XML is not a replacement for HTML.XML is designed to be self-
descriptive.XML is designed to carry data, not to display data.XML tags are not predefined.
You must define your own tags.XML is platform independent and language independent. The
main benefit of xml is that you can use it to take data from a program like Microsoft SQL,
convert it into XML then share that XML with other programs and platforms. You can
communicate between two platforms which are generally very difficult. The main thing which
makes XML truly powerful is its international acceptance. Many corporation use XML
interfaces for databases, programming, office application mobile phones and more. It is due to
its platform independent feature.
Features and Advantages of XML:-
1) XML separates data from HTML
2) XML simplifies data sharing
3) XML simplifies data transport
4) XML simplifies Platform change
5) XML increases data availability
6) XML can be used to create new internet languages
The Difference between XML and HTML
XML and HTML were designed with different goals: XML was designed to carry data - with
focus on what data is HTML was designed to display data - with focus on how data looks XML
tags are not predefined like HTML tags. An XSL style sheet is, like with CSS, a file that
describes how to display an XML document of a given type. XSL shares the functionality and is
compatible with CSS2 (although it uses a different syntax). It also adds: A transformation
language for XML documents: XSLT.

Applications of XML
Although there are countless numbers of applications that use XML, here are a few examples of
the current platforms and applications that are making use of this technology:
 Cell Phones - XML data is sent to some cell phones. The data is then formatted by the
specification of the cell phone software designer to display text or images, and even to
play sounds!
 File Converters - Many applications have been written to convert existing documents
into the XML standard. An example is a PDF to XML converter.
 Voice XML - Converts XML documents into an audio format so that you can listen to an
XML document.
Example 1:- XML document with an internal DTD
An Internal DTD Declaration
If the DTD is declared inside the XML file, it must be wrapped inside the <!DOCTYPE>
definition:
XML document with an internal DTD
<?xml version="1.0"?>
<!DOCTYPE note[
<!ELEMENT note (to,from,heading,body)>
<!ELEMENT to (#PCDATA)>
<!ELEMENT from (#PCDATA)>
<!ELEMENT heading (#PCDATA)>
<!ELEMENT body (#PCDATA)>
]>
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend</body>
</note>
<!DOCTYPE note[
]>
<note>

<to>Tove</to>
<from>Jani</from>
<body>Don't forget me this weekend</body>
</note>
An External DTD Declaration
If the DTD is declared in an external file, the <!DOCTYPE> definition must

contain a reference to the DTD file:
XML document with a reference to an external DTD
XML document:
<!DOCTYPE note SYSTEM "note.dtd">
<note>
<to>Tove</to>
<from>Jani</from>
<body>Don't forget me this weekend!</body>
</note>
DTD file:
And here is the file "note.dtd", which contains the DTD:
The DTD above is interpreted like this:
 !DOCTYPE note defines that the root element of the document is note
 !ELEMENT note defines that the note element must contain the elements: "to, from,
heading, body"
 !ELEMENT to defines the to element to be of type "#PCDATA"
 !ELEMENT from defines the from element to be of type "#PCDATA"
 !ELEMENT heading defines the heading element to be of type "#PCDATA"
 !ELEMENT body defines the body element to be of type "#PCDATA"
#PCDATA means parse-able text data
Result:-

Conclusion:-
XML allows a standard way of searching, displaying, manipulating, and exchanging data on the
Web. It can also be used to identify, exchange, and process distributed data in different
applications.
References:
O'REILLY,2014.
Questionnaire
1. What is XML?
2. How XML is different from HTML?
3. What is the meaning of version in XML?
4. What are the benefits of XML?
5. Elaborate XML DOM?
6. State SAX in XML?
7. Explain XSNL?
8. What is a well formed XML document?
9. What is a valid XML document?
10. What is DTD?

Experiment No. 9
Web pages using Ajax and PHP
Aim :- Implement a Web pages using Ajax and PHP .
Objective : Students will be able to develop web pages using Ajax and PHP,
Scope: Use AJAX to create asynchronous, interactive web applications with the help of XML
HTML CSS and JavaScript
Theory: AJAX is about updating parts of a web page, without reloading the whole page.
What is AJAX?
AJAX = Asynchronous JavaScript and XML.
AJAX is a technique for creating fast and dynamic web pages.
AJAX allows web pages to be updated asynchronously by exchanging small amounts of data
with the server behind the scenes. This means that it is possible to update parts of a web page,
without reloading the whole page.
Classic web pages, (which do not use AJAX) must reload the entire page if the content should
change.
Examples of applications using AJAX: Google Maps, Gmail, Youtube, and Facebook tabs.
How AJAX Works

PHP
PHP is an acronym for "PHP: Hypertext Preprocessor"
 PHP is a widely-used, open source scripting language

 PHP scripts are executed on the server
 PHP is free to download and use
 PHP is an amazing and popular language!
 It is powerful enough to be at the core of the biggest blogging system on the web
(WordPress)! It is deep enough to run the largest social network (Facebook)!
It is also easy enough to be a beginner's first server side language!
What is a PHP File?
 PHP files can contain text, HTML, CSS, JavaScript, and PHP code
 PHP code are executed on the server, and the result is returned to the browser as plain
HTML
 PHP files have extension ".php"
What Can PHP Do?
 PHP can generate dynamic page content

 PHP can create, open, read, write, delete, and close files on the server
 PHP can collect form data
 PHP can send and receive cookies
 PHP can add, delete, modify data in your database
 PHP can be used to control user-access
 PHP can encrypt data
With PHP you are not limited to output HTML. You can output images, PDF files, and even
Flash movies. You can also output any text, such as XHTML and XML.
Result:-
Conclusion:-

The most recent development capturing the attention of the browser based application
developers is AJAX (Asynchronous JavaScript and XML). Integrating AJAX models into the
browser based GIS (Geographic Information Systems) Visualization Web Services systems.
References:
O'REILLY,2014.
5. Professional Rich Internet Applications: AJAX and Beyond, Dana Moore, Raymond Budd,
Edward Benson, Wiley publications.
6. https://ebooks-it.org/0470082801-ebook.htm
Questionnaire
1. What is Ajax?
2. Why Ajax is used?
3. What files need to install to use Ajax in Website?
4. What library are available to use the Ajax?
5. What Browsers support Ajax?
6. How we can send data to server using Ajax?
7. State advantage of AJax?
8. Explain the disadvantage of Ajax?
9. Define JSON?
10.What is Asynchronous in Ajax?

Experiment No. 10
Hosting and Domain Registration process.
Title: Hosting the website with Domain Registration process.
Objective: To learn the students after creation of website how to make it available online for
everyone.
Scope: The swelling wave of e-Commerce dominance fueling the need for organizations to
establish their online presence has led to the emergence of Web Designing as an important
organizational function
Theory:
After the website is created, the next step is to publish it. Publish in a website means making it
available online for everyone. To make a website available, you need to follow the following
steps.
Domain Name Registration Process
First you have to choose a domain name, then you need to submit your domain name
registration request to a registrar.
We need to submit the following information to the registrar:
 the desired domain name

 The name and contact information (including email address, physical address and
contact phone number) for the domain's registrant, administrative and billing contacts.
 the desired domain registration term
 payment information
Once after providing information to registrar, he will then initiate the domain name registration
process for you. The registrar will send your domain name request, and the contact and technical
information of the domain name to the registry.
The registry files the contact information for the Whois. The registry also adds your domain
zone files to the master servers. These master servers tell other servers on the Internet where
your website is stored.
Your domain is considered registered and ready-to-use when all information has been updated.
Web Hosting:
Web hosting is a service that allows organizations and individuals to post a website or web page
onto the Internet. A web host, or web hosting service provider, is a business that provides the
technologies and services needed for the website or webpage to be viewed in the Internet.
Websites are hosted, or stored, on special computers called servers.
When Internet users want to view your website, all they need to do is type your website address
or domain into their browser. Their computer will then connect to your server and your
webpages will be delivered to them through the browser.
Most hosting companies require that you own your domain in order to host with them. If you do
not have a domain, the hosting companies will help you purchase one.

There are various types of web hosting services available to host your website. Before signing
up for web hosting services, it is important to understand what kind of service your website
needs, the kind of server you or your business needs, your budget, and what type of services the
web host offers.
Hosting options available are:
 Website Builders
 Shared Hosting
 Dedicated Hosting
 Collocated Hosting
Uploading your Website:
A website can be uplaoded on a remote server in two ways:
1. Using an FTP Program

FTP is an Internet Protocol (like HTTP) that allows data files to be transferred from one
computer to another. Your web host will provide information about how to connect to your
site using FTP. Usually you use FTP software such as WS_FTP or FileZilla to connect to the
FTP server on your website. The address of the FTP server is usually ftp.yourwebsite.com
(where yourwebsite.com is the domain name).
Your host will also tell you the location where files should be uploaded. Your account will
probably have two main folders in the root directory – public_html and www. Your web
pages should be uploaded to the public_html folder. The www folder is a mirror folder
which allows people to find your site by using either www.yoursite.com or yoursite.com.
2. Using a hosting contol panel
Domain Name Registration Process

Step 1: Visithttp://www.freenom.com/en/index.html?lang=en
Step 2: Find A new Free Domain and check its availability

Step 3: once the subdomain Example(say MannatDoultani) is available select for the domain as shown
in screen short. Go for .tk(Suggestable) and checkout
Step 4: Select the Time Period & click on Continue

Step 5: Enter Your email and verify the same. You will get a verification link in mail inbox.
Step 6: Click on the verification link, you will get a profile page to be updated

Step 7: once done with profile agree to terms and services and Confirm the Order
Step 8: At the end you will get your order number

Thus Purchase of Domain Successfully done
WEB HOSTING
Step 1: Visit www.000webhost.com & choose a Free plan
Step 2: Sign up and enter the domain name you purchased from freenom & click on Get free hosting

Step 3: An email confirmation will be sent on your registered mail id. Kindly verify and you will get the
following screen. Click on “Manage Website XXXX”
Step 4: After you click on Manage website you will get following 3 options for building your website

Step 5: Take Example of Uploading A html Page you have already created. So select on Upload Own
Website. You will be directed to the following page
Step 6: Select Folder public_html and then select upload files icon on top right corner amongst the 8
icons given. You will get the following pop up message

Step 7: Select File to be uploaded from your PC and Upload
Step 8: it will be then shoen in public_html.

Step 9: once the files are uploaded go to the following page & click on Website link provide.
Note: Name your first file as index.html otherwise it will not display the website
Step 10: website will appear under Build Website statement just click you will be directed to your web
page.

How to upload website to Cpanel :
•Step 1 of 11
Log into the customer (cPanel) portal at https://[[IP Address]]:2083, Replacing [[IP Address]]
with the IP address for your server provided in your welcome email.
• Step 2 of 11

You will then be logged into the customer (cPanel) portal for the account you wish to upload the
files for.
 Step 3 of 11
In the Files section click on the File Manager icon.
 Step 4 of 11
Select the Web Root (public_html/www) option and press the Go button.


 Step 5 of 11
You will now see the File Manager screen.
 Step 6 of 11
Click on the Upload icon.
 Step 7 of 11
Press the Browse button to select the file you wish to upload.
 Step 8 of 11
Navigate to the file you wish to upload and press the Open button.
 Step 9 of 11

You will then see a status for the file upload.
 Step 10 of 11
When the upload is complete click on the link Back to /home/customer/public_html.
 Step 11 of 11
You will now see your uploaded file in your File Manager screen.
Then repeat steps 6 to 11 until you have uploaded all the required files.
Result:-
Conclusion:-
 Marketing
 Organaisation

 Indusrty
References:
4. https://www.123-reg.co.uk/support/servers/uploading-your-website-in-cpanel-guide/
5. https://www.thehostingwebsite.com/website-hosting-process/
6. https://mail.google.com/mail/u/0/#search/akasharunsahu%40gmail.com/164383b78965fb
fe?projector=1&messagePartId=0.2
Questionnaire
1. What is a Domain Name?

2. What are the different components of a domain name?
3. What is the difference between TLD's i.e. .com, .org and .net?
4. Who can register a Domain Name?
5. Who is a Registrant?
6. Who is a Registrar?
7. What is an IP address?
8. What is Domain Name System?
9. How can I change Domain Name Server?
10. Who can register a Domain Name?

Experiment No 11
Laravel Framework
Title: Design a Web application using Laravel Framework
Objective : Learner will be able to design a web application using a Laravel Framework
Scope: Develop more elegant and expressive web application following the model view
controller architectural pattern using Laravel.
Theory:
Laravel happens to be a very popular framework that is meant for developing PHP applications.
It comes across as a very clean and good framework for developing web applications.
Considering that developing applications should be a wonderful experience, Laravel is fairly
simple and allows for expressive syntax.
Also, another very good aspect of using Laravel is that it frees you from using spaghetti code.
Developers who have used Laravel always state that it brings forward three very important
qualities.
 Simple in nature – several functionalities that Laravel offers is very simple to grasp and
understand. If you love simple programming style, you‟d surely stick with Laravel.
 Fairly elegant – Even with very little configuration involved, Laravel‟s functions are
known to run seamlessly. It also relies on conventions specified in the industry that
allows or the prevention of code-bloating.
 Very well-documented – Laravel always offers updated and complete documentation.
The creator even updates the documentation before a new version is released. This
makes it pretty easy for people who are just learning the framework.
Making an application from scratch
Now that we just about have an idea about Laravel is, we shall go ahead and build a web
application. Here, we shall basically build an Instagram-like application, which will allow us to
post photos and also like and comment on them. Besides, you can also follow others.
How to install Laravel 5 with Xampp (Windows)
Requirements
1. Install Xampp on Windows

First of all, we need Xampp, so we can download it from the official page:
Download Xampp

2. Composer
After you've downloaded and installed Xampp, we need to install Composer.Composer is a PHP
package manager that is integrated with Laravel Framework. In Windows we can install it easy
going to the official page and download the installer.
Composer Download page
After You Have Downloaded Setup of Composer
Step 1: Allow Setup to Run
Step 2: Click Next
Step 3:you will get Command line PHP screen it will be automatically selected.
click Next
Step 4: Proxy URL Screen. No need to enter anything. Just Click Next.

Step 5: Kindly read the information on screen. It says either close all the terminals or loff
n log on your system after finishing installation for smooth working of composer
Step 6: composer installed successfully. Click On Finish
Install A Laravel Framework

We are prepared to install and configure a Laravel Framework. First of all, we have to
navigate to htdocs folder to install it and run this following command:
composer create-project laravel/laravel laravel "5.1.*"
Will start the installation of the Framework:
When it finishes, it will create following directory schema:

Finally, start our apache and MySql from Xampp control panel

Result:-
Conclusion:-
Industrial Applications :- Laravel has emerged as the most reliable framework as it offers unique
features and functionalities that can be used to create scalable web applications.
References:
3. 3.http://spoken-tutorial.org
4. https://laravel-news.com/your-first-laravel-application
5. https://www.codementor.io/magarrent/how-to-install-laravel-5-xampp-windows-du107u9ji
6. https://www.youtube.com/watch?v=1exF0kNKCvQ&t=222s
Questionnaire
1.What is Laravel ?
2. List some official packages provided by Laravel?
3. List out latest features of Laravel.
4. List out some benefits of Laravel over other Php frameworks.
5.What is composer ?
6. How to install laravel via composer ?
7. How to check laravel current version ?
8. What is Lumen?
9 What are Advantages of Laravel?
10 What are the feature of Laravel5.0?

WDL Lab Manual As On 26 July PDF

Загружено:

Сведения о документе

Исходное описание:

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

WDL Lab Manual As On 26 July PDF

Загружено:

Авторское право:

Доступные форматы

Experiment No 1

Installation of WAMP Server

Objective: To able to learn installation and Setting of WAMP

Scope: For developing interactive websites

1. Download the WAMP Server

Web Design Lab (CPL504) 1

Web Design Lab (CPL504) 2

And choose which icons you want.

Web Design Lab (CPL504) 3

Now wait up-to finish the installing.

In following window, just leave Default value and Click „Next‟.

Web Design Lab (CPL504) 4

5. Run WAMP Server.

Web Design Lab (CPL504) 5

Now Installation of WAMP Server is finished.

1. What is LAMP SERVER ?

Web Design Lab (CPL504) 6

Web Design Lab (CPL504) 7

Web Page using HTML5

 HTML stands for Hyper Text Markup Language.

Web Design Lab (CPL504) 8

Basic HTML tags

Web Design Lab (CPL504) 10

<b> Defines bold text

<p><b>This text is bold</b></p>

Citations, Quotations, and Definition Tags

Web Design Lab (CPL504) 13

 The <hr> tag creates a horizontal line in an HTML page.

Web Design Lab (CPL504) 14

Web Design Lab (CPL504) 15

Output (on clicking the link)

Web Design Lab (CPL504) 19

Web Design Lab (CPL504) 20

Web Design Lab (CPL504) 21

Web Design Lab (CPL504) 22

 Tables are used to represent the information in tabular form.

List is used to sequentially arrange the items in web page.

Web Design Lab (CPL504) 25

Web Design Lab (CPL504) 26

This program shows how to use an image as a link.

Web Design Lab (CPL504) 27

Web Design Lab (CPL504) 28

Specifies how form-data should be encoded before sending it to a server.

Web Design Lab (CPL504) 29

Web Design Lab (CPL504) 30

Web Design Lab (CPL504) 31

Web Design Lab (CPL504) 32

Web Page using CSS3 and HTML5

Web Design Lab (CPL504) 35

Web Form using JavaScript and HTML 5

Scope: Create animation using JavaScript.

Web Design Lab (CPL504) 36

JavaScript Form Validation

Web Design Lab (CPL504) 37

<p>Your Name: <input type=“text” name=“name”></p>

Web Design Lab (CPL504) 38

Web Design Lab (CPL504) 40

Web Form using JavaScript and jQuery

Scope: Create dynamic web pages and animations with

Why Use JQuery Instead of Just Basic JavaScript?

Steps to install jQuery

1. Go to the download page to grab the latest version available.