Web Lab Manual-CSE 2018-19

Web Technology Laboratory with Mini Project 15CSL77
1. OBJECTIVES:
On completion of this subject, the students will be able to :
1. Learn how to create a simple web page using html along with the usage of style sheets, lists,
creation or tables with borders, padding and colors.
2. To get acquainted with java script and how to embed java script in html code.
3. To get acquainted with java script procedures and usage of regular expressions in java
script.
4. To write functions in html, validate using regular expressions.
2. GENERIC SKILLS:
On completion of this subject students will be able to:
1. Students learn web concepts ,html and create web page.

2. Program basic functions in Java script and DHTML.
3. Use Java script and DHTML to create web pages with advanced interactivity.
4. Use variables, conditionals, and loops in Java script and DHTML programs.
5. Use Java script to control browser frames and windows.
6. Use Java script to create functional forms.
7. Use Cascading Style Sheets (CSS) to design web pages.
8. Use CSS to create web pages with specialized fonts and design elements.
3. SUBJECT OVERVIEW:
This course introduces advanced programming skills for website design. Dynamic content
development will be explored through state of the art programming languages for the creation of
interactive web sites. Students will create web pages that utilize the most current advances in web
development.
4. BREADTH OPTIONS:
This subject potentially can be taken as a breadth subject component for the following subjects like
java and j2ee and c #.
5. PREREQUISITES:
This lab require basic’s of any programming knowledge.
Summary:
In this web lab students can learn primary web programming skills such as basic knowledge about
HTML/CSS, client side scripting (using Java script & JQuery), server side scripting (using PHP
language) and also SQL-based database connectivity in PHP are considered. After it students can
create basic web programs using pure PHP. In this part after that all students have basic web
programming skills we concentrate on more advanced concepts like: OOPS in PHP, HTML5, CSS3
and Perl concepts some extended features.
Department of CSE, SVCE Page 1

WEB TECHNOLOGY LABORATORY WITH MINI PROJECT

[As per Choice Based Credit System (CBCS) scheme]
(Effective from the academic year 2016 -2017)
SEMESTER – VII
Subject Code 15CSL77 IA Marks 20
Number of Lecture Hours/Week 01I + 02P Exam Marks 80
Total Number of Lecture Hours 40 Exam Hours 03
1. Write a JavaScript to design a simple calculator to perform the following operations: sum,
product, difference and quotient.
2. Write a JavaScript that calculates the squares and cubes of the numbers from 0 to 10and
outputs HTML text that displays the resulting values in an HTML table format.
3. Write a JavaScript code that displays text “TEXT-GROWING” with increasing font size in
the interval of 100ms in RED COLOR, when the font size reaches 50pt it displays “TEXT-
SHRINKING” in BLUE color. Then the font size decreases to 5pt.
4. Develop and demonstrate a HTML5 file that includes JavaScript script that uses functions
for the following problems:
a) Parameter: A string
b) Output: The position in the string of the left-most vowel
c) Parameter: A number
d) Output: The number with its digits in the reverse order
5. Design an XML document to store information about a student in an engineering college

affiliated to VTU. The information must include USN, Name, and Name of the College,
Branch, Year of Joining, and email id. Make up sample data for 3students. Create a CSS
style sheet and use it to display the document.
6. Write a PHP program to keep track of the number of visitors visiting the web page and to
display this count of visitors, with proper headings.
7. Write a PHP program to display a digital clock which displays the current time of the server.

8. Write the PHP programs to do the following:
a) Implement simple calculator operations.
b) Find the transpose of a matrix.
c) Multiplication of two matrices.
d) Addition of two matrices.
9. Write a PHP program named states.py that declares a variable states with value “Mississippi
Alabama Texas Massachusetts Kansas". write a PHP program that does the following:
a) Search for a word in variable states that ends in xas. Store this word in element0 of a list
named states List.
b) Search for a word in states that begins with k and ends in s. Perform a case-insensitive
comparison. [Note: Passing re.Ias a second parameter to method compile performs a
case-insensitive comparison.] Store this word in element1of states List.
c) Search for a word in states that begins with M and ends in s. Store this word in element 2
of the list.
d) Search for a word in states that ends in a. Store this word in element 3 of the list.
10. Write a PHP program to sort the student records which are stored in the database using
selection sort.

Study Experiment / Project:

Develop a web application project using the languages and concepts learnt in the theory and
Exercises listed in part A with a good look and feel effects. You can use any web
technologies and frameworks and databases.
Note:
1. In the examination each student picks one question from part A.
2. A team of two or three students must develop the mini project. However
duringthe examination, each student must demonstrate the project individually.
3. The team must submit a brief project report (15-20 pages) that must include thefollowing:
a) Introduction
b) Requirement Analysis
c) Software Requirement Specification
d) Analysis and Design
e) Implementation
f) Testing
Course outcomes: The students should be able to:
 Design and develop dynamic web pages with good aesthetic sense of designingand
latest technical know-how's.
 Have a good understanding of Web Application Terminologies, Internet Toolsother

web services.
 Learn how to link and publish web sites
Conduction of Practical Examination:
1. All laboratory experiments from part A are to be included for practicalexamination.
2. Mini project has to be evaluated for 30 Marks.
3. Report should be prepared in a standard format prescribed for project work.
4. Students are allowed to pick one experiment from the lot.
5. Strictly follow the instructions as printed on the cover page of answer script.
6. Marks distribution:
a) Part A: Procedure + Conduction + Viva:10 + 35 +5 =50 Marks
b) Part B: Demonstration + Report + Viva voce = 15+10+05 = 30 Marks. Change of experiment
is allowed only once and marks allotted to the procedure part to be made zero.

Introduction HTML
This lab is intended to give the students a sound knowledge in the Web side programming.
Before going in to the details of the lab, the pre-requisites are the basic knowledge in HTML,
XHTML, CSS, XML, JavaScript, Perl, PHP and MySql. Let’s look at some of these topics in brief
now.
Basics of HTML: -
Hyper Text Markup Language (HTML) is a mark up language developed by the W3C people.
This can be used as an interface for working our programs. We submit all our requests in the HTML
form. It is basically a markup language which describes how the documents are to be formatted.
HTML has two basic entities, the “Tags” (Formatting commands) and the strings within the tags
called as the “Directives”. Most of the tags have the following syntax: - <something> that indicates
the beginning of the tag and a </something> that indicates the end of the tag.
NOTE:
 Tags can either be in lower case or upper case, i.e. there is no difference between <html> and
<HTML>
 The order in which parameters of the tag are given is not significant since each of these
parameters is named.
One major frustration that comes with using HTML is that it does not provide any structure to Web
Pages. It also mixes the content with the formatting.
HTML Essentials
An HTML file should be written in the following format and should be saved with .html or .htm file
extension
<html>
<body>
<head>
<title> New Page </title>
</head>
TYPE YOUR TEXT HERE

</body>
</html>
The “New Page” title comes on the top of the Browser Window.
Basic HTML Tags: -
To create a text box

<input type=text name=T1 size=20>
To create a Normal Button

<input type=button name=B4 value=GO>

To create a Submit Button

<input type=submit name=B1 size=20>
To create a Reset Button

<input type=reset name=T1 size=20>
To create a Radio Button

<input type=radio value=V1 checked name=R1>
To create a Check box

<input type=checkbox name=C1 value=ON >
To create a Form
<form method=[GET/POST] action=[url]>
<input type=submit value=Submit name=B1>
<input type=reset value=Reset name="B2">
</form>
To create a Text Area

<textarea rows=2 name=S1 cols=20></textarea>
To create a Drop down Menu
<select size=1 name=D1></select>
To create a Hyper Link

<a href=http://localhost: 8080/a.htm>BACK </a>
To create a Marquee (The Marquee tag ensures that the text scrolls horizontally across the screen. It
is usually used by Advertisement sites to catch the user’s attention. Although they sound and look
cool, it is preferred to avoid using too much of theses since they can be tiring and confusing to the
users eye especially if the scroll speed is set too high)
<marquee align=middle>Type your text here</marquee>
To give Background color

<body bgcolor=green>…</body>
(The basics colours can be given literally here. For a more elaborate set if colours, Hex code of the
colours can be given. Refer to the possible ranges of the Hex codes in a HTML Book)
More Miscellaneous Tags: -
1) <h#>……..</h#> - where ‘#’ is a number ranging from 1-6. This is used to set the text size.
2) <pre> - Preformatted text, ensures that the text appears exactly the way it appears in the
HTML code thereby preserving the white spaces as well.
3) <br> - Inserts a “New line” character (similar to ‘\n’).
4) To Draw a Horizontal Line (Horizontal Ruler):
<hr size=4 width=”50 %”>
5) < b > - Bold, < I > - Italics
6) Tables:
<table>
<caption> Your Caption here </caption> [Optional Tag]
<tr>
<th> Row 1, Col 1 </th> [th implies Table Header]
<th> Row 2, Col 2 </th>
</tr>
<tr>
<td> Table Definition here </td>
<td> …………………….. </td>
</tr>
</table>
7) Comments:
< ! - - Your Comments here - - >
8) Background Images:
<body background = “pathname/abc.gif”>
…………………….
</body>
Before we move on further, we need to know how the web exactly works.
Example of a simple HTML page
Below is an example of a very simple page:
This is the code used to make the page:
<html>
<head>
<title>your title here</title>
</head>

<body bgcolor="ffffff">
<center><img src="clouds.jpg" align="bottom"> </center>
<hr>
<a href="http://somegreatsite.com">link name</a>
is a link to another nifty site
<h1>this is a header</h1>
<h2>this is a medium header</h2>
send me mail at <a href="mailto:[email protected]">
[email protected]</a>.
<p> this is a new paragraph!
<p> <b>this is a new paragraph!</b>
<br> <b><i>this is a new sentence without a paragraph break, in bold italics.</i></b>
<hr>
</body>
</html>
How does the Web work?

The Web is usually accessed through a browser. Based on the client request, the server delivers
information. The type of data that the server sends back to the client could be a simple plain text
(HTML), images, Java Applets (More about Applets later!) etc. this data can be obtained and
delivered in three ways.
 Serving Static Data – The server does not do any kind of the processing. It merely obtains the
data present on its local hard disk and sends it back to the client.
 Serving Dynamic Data – The Server does some processing in this case like executing a
program and then outputs the result of the program back to the client as a response.
 Serving Content with Embedded HTML – Here, an executable code is present with the
HTML file. It’s not quite static or dynamic.
Basics of CGI: -
CGI stands for Common Gateway Interface. It is a part of the web server that can communicate with
other programs running on the server. With CGI, the web server can call up a program, while passing

user-specific data to the program. The program then processes that data and the server passes the
program’s response back to the web browser.
Submit a form Call CGI

Client Request Server Application
CGI pgms response response
Gateways are programs or scripts used to access information that is not directly readable by the
client.
Basics of Perl: -
Perl is a platform-independent scripting language that stands for Practical Extraction and Reporting
Language. Perl basically originated as a Text Processing Language and was meant to manage and
manipulate a database of text files.
Essential Features of Perl: -
 It is an object-oriented language.
 Its syntax is C – like.
 Perl is free format – white space can be scattered about to make the code more readable.
 All statements must end with a ‘;’.
 Variables in Perl do not have to be declared but can be used.
 Built in functions can be invoked with or without parentheses.
 Perl scripts are stored as Text files. When executed, the source text file is first compiled into
a “Byte Code”, an intermediate form, not text or binary. Perl then interprets the byte code,
executing it.
 Anything that comes after a ‘#’ symbol is treated as a Comment except the Interpreter line or
the Shebang line.
Basics of MySQL: -
MySQL is an Open source Standard Query Language (SQL) database that is fast, reliable, easy to
use and suitable for applications of any size. MySQL can be integrated into Perl programs by using
the Perl DBI (Database Independent Interface) module. DBI is an API that allows Perl to connect
and query a number of SQL Databases such as MYSQL, Oracle, Sybase etc.
For some of the programs in the Lab course, the MySQL database is to be used. For that, the MySQL
Server is to be started. The following steps are to be performed in the same sequence on the Linux
shell to start the server and create the database along with the table.
To Start MySQL Server:

# mysql
mysql> create database svce;

mysql> show databases;
mysql> use svce;
mysql> create table employee (
name varchar(25),
age int
);
mysql> insert into employee values (“e1”,21);

mysql> insert into employee values (“e2”,22);
mysql> exit;
#.....(The MySQL server is now started and a database along with a table called “employee” is
ready for use).
Let us examine each of these steps in detail now.
Apache Http Server:

The web server we are using here is Apache Http Server. It is freely downloadable from the site
www.apache.org. Once you have downloaded the installer, double click on that and install it in to
your system. Then go to start menu  programs Apache HTTP Server Control Apache Server.
Then click on start to start your server. Then open an Internet explorer and type http://localhost:80/.
The port number 80 is optional in the URL. If you have successfully installed the server then you
will get a screen shown below:
CSS
To make a style sheet file, we need to create another empty text file. You can choose “New” from
the File menu in the editor, to create an empty window. Then cut and paste everything that is inside
the <style> element from the HTML file into the new window. Here <style> and </style> belong to
HTML, not to CSS.

Example:
body {
padding-left: 11em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
ul.navbar {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 1em;
width: 9em }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
There are three ways to apply CSS to HTML: Inline, internal, and external.
 Inline
Inline styles are plonked straight into the HTML tags using the style attribute.
They look something like this:

<p style="color: red">text</p>
This will make that specific paragraph red.
The best-practice approach is that the HTML should be a stand-alone, presentation free document,
and so in-line styles should be avoided wherever possible.
 Internal
Embedded, or internal, styles are used for the whole page. Inside the head element, the style tags
surround all of the styles for the page.
<!DOCTYPE html>
<html>
<head>
<title>CSS Example</title>
<style>
p{
color: red;
}
a{
color: blue;
}
</style>
This will make all of the paragraphs in the page red and all of the links blue.
External
External styles are used for the whole, multiple-page website. There is a separate CSS file, which
will simply look something like:
p{
color: red;
}
a{
color: blue;
}
If this file is saved as “style.css” in the same directory as your HTML page then it can be linked to in
the HTML like this:
<!DOCTYPE html>
<html>
<head>
<title>CSS Example</title>
<link rel="stylesheet" href="style.css">
...
Apply
To apply the css file, so start a fresh new file with your text-editor and save the blank document as
“style.css” in the same directory as your HTML file.
Now change your HTML file so that it starts something like this:
<!DOCTYPE html>
<html>
<head>
<title>My first web page</title>
<link rel="stylesheet" href="style.css">
</head>
...
Save the HTML file.
External CSS Style: External style sheets are having more than one page that needs the same style.
Most websites today use multiple pages, and they should share a common style sheet to keep
consistency.
The code shows how easily this is done:
<!DOCTYPE html>
<html lang = "en-US">

<head>
<meta charset = "UTF-8">
<title>SecondPage.html</title>
<link rel = "stylesheet"
type = "text/css"
href = "myStyle.css" />
</head>
<body>
<h1>Second Page</h1>
<p>
This page uses the same style as
<a href = "externalStyle.html">externalStyle.html</a>.
</p>
</body>
</html>
How to specify an external link
To use the <link> tag to specify an external style sheet, follow these steps:
1. Define the style sheet.
External style sheets are very similar to the ones you already know. Just put all the styles in a
separate text document without the <style> and </style> tags.
2. Create a link element in the HTML page’s head area to define the link between the HTML
and CSS pages.
My link element looks like this:
<link rel = "stylesheet"
type = "text/css"
href = "myStyle.css" />
3. Set the link’s relationship by setting the rel = “stylesheet” attribute.
Honestly, style sheet is almost the only relationship you’ll ever use, so this should become
automatic.
4. Specify the type of style by setting type = “text/css“.
5. Determine the location of the style sheet with the href attribute.
JavaScript
JavaScript often abbreviated as "JS", is a high-level, dynamic, untyped, and interpreted run-time
language. It has been standardized in the ECMAScript language specification. Alongside HTML and
CSS, JavaScript is one of the three core technologies of World Wide Web content production; the
majority of websites employ it, and all modern Web browsers support it without the need for plug-
ins. JavaScript is prototype-based with first-class functions, making it a multi-paradigm language,

supporting object-oriented, imperative, and functional programming styles. It has an API for working
with text, arrays, dates and regular expressions, but does not include any I/O, such as networking,
storage, or graphics facilities, relying for these upon the host environment in which it is embedded.
JavaScript is also used in environments that are not Web-based, such as PDF documents, site-
specific browsers, and desktop widgets. Newer and faster JavaScript virtual machines (VMs) and
platforms built upon them have also increased the popularity of JavaScript for server-side Web
applications. On the client side, developers have traditionally implemented JavaScript as an
interpreted language, but more recent browsers perform just-in-time compilation. Programmers also
use JavaScript in video-game development, in crafting desktop and mobile applications, and in
server-side network programming with run-time environments such as Node.js.
Example: add2.html
<script>
var num1, num2, sum
num1 = prompt("Enter first number")
num2 = prompt("Enter second number")
sum = parseInt(num1) + parseInt(num2) // "+" means "add"
alert("Sum = " + sum) // "+" means combine into a string
</script>
Example of a standards-conforming Web page containing JavaScript and the DOM:

<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<button id="hellobutton">Hello</button>
<script>
document.getElementById('hellobutton').onclick = function() {
alert('Hello world!'); // Show a dialog
var myTextNode = document.createTextNode('Some new words.');
document.body.appendChild(myTextNode); // Append "Some new words" to the page
};
</script>
</body>
</html>
How to Make a Website:
It requires 3 Simple Steps: 1. Choose a website building platform

2. Choose a domain name (www.) and host
3. Setup, design and tweak your website
1. Choose Your Website Platform
Before start worrying about colour schemes and domain names, have to decide what platform we’re
going to build our website with.
“Platform” means?
Back in 2004, in web development, most sites were built using HTML (code), CSS and even Flash.
These took a lot of time to learn and were tricky to master. In 2016, content management systems
(CMS) like WordPress have made creating a website accessible to everyone.
To put simply, a content management system (or website building platform) is a user-friendly
platform for building websites and managing our own online content, instead of using a bunch of
loose HTML pages.
2. Find a Domain Name and Host
To get a new website online, it needs two things:
 A domain name (a web address like sitename.com)

 Hosting (a service that connects the site to the internet)
The WordPress platform itself is free, but a domain name and hosting will cost around $3 – $5 a
month.
 If we’re making a website for your business, domain name should match our company name.
For example: OurCompanyName.com
 If we’re planning to set up a website for ourselves, then MyName.com can be a great option.
Installing WordPress
There are two possible ways to install WordPress, one MUCH easier than the other.
1. TO CREATE A WEBSITE WITH WORDPRESS (OR JOOMLA & DRUPAL), USE ONE

CLICK INSTALLATION:
Almost every reliable and well-established hosting company has integrated 1-click-installation for
WordPress, which makes getting going a snap.
Here are the steps we should follow (should be similar/same on all the major web hosting
companies):
1. Log in to your hosting account.

2. Go to your control panel.
3. Look for the “WordPress” or “Website” icon.
4. Choose the domain where you want to install your website.
5. Click the “Install Now” button and you will get access to your new WordPress website.
2. MANUAL INSTALL (if needed)

Installing WordPress Manually
 Choosing a Theme/Template for the site

After the successful installation of WordPress to the domain, select the themes or template for the
site.
 Log into your WordPress dashboard
 Select access free theme

 Install your new theme
 How to add content and create new pages?
After the theme installation, next we have create and add the content.
 Adding and editing pages
1. Look along the sidebar in the WordPress Dashboard for “Pages” -> “Add New”.
2. Once we have clicked, will find a screen that looks a lot like, just like Microsoft Word. Add text,
images and more to build the page of our choice, then save it.
 Adding pages to the menu
If we want our new page to be linked to in our navigation bar,
1. Save any changes we’ve made to the page by clicking “Update”
2. Click “Appearance” -> “Menus” in the sidebar of the WordPress Dashboard
3. Find the page we created and add it to the list by clicking the checkbox next to it and then “Add to
Menu”.

 Adding and editing posts

If we want to add a blog to our website, we can use different categories and posts. Example, want to
create a category named “Blog”. To do so, simply add it to your menu and start making posts.
Here’s what we need to do:
a. Create a new category by going to “Posts -> Categories”
OR
b. Create a blog post by going to “Posts -> Add New”. Once we’ve finished writing our blog post,
we need to add the right category for it.
Once we’ve created our category, simply add it to the menu.
 Changing Your Title and Tagline

Page titles explain to searchers what our website is about, and they’re also a big part of how search
engines determine your rankings, so we have to be sure they’ve got the keywords we want to target
in them (but in a natural way, written for real people).
Should use a unique title on every page of our site. For example, my site’s title is “How to Make a
Website”.
Taglines are added at the end of titles across every page. My site’s tagline is “Step by Step Guide”
In order to change the title and tagline on our website, go to “Settings -> General” and fill in the
form below:
Disabling Comments for Posts & Pages

Here’s how to shut comments off on WordPress pages:
1. While you are writing a new page, click “Screen Options” in the top right corner.
2. Click the “Discussion” box. The “Allow Comments” box will appear at the bottom.
3. Untick “Allow comments”
 Want to disable comments on every new page by default?
1. Go to “Settings -> Discussion” and untick “Allow people to post comments on new articles”
Setting Up a Static Front Page

A static page is a page that doesn’t change. Unlike a blog, where the first new article will show up at
the top every time, a “static” page will show the same content every time someone comes to the site
– like a home page we’ve designed.
To set up a static front page:

1. Go to “Settings -> Reading”
2. Choose a static page that has created. “Front Page” denotes our home page, “Posts page” is the
front page of our blog. If you don’t choose a static page on our own, WordPress will take our latest
posts and start showing them on our homepage.
 Editing sidebar
Most WordPress themes have a sidebar on the right side (in some cases it’s on the left).
If we want to get rid of the sidebar or edit out items you do not need like “Categories”, “Meta” and
“Archives”, which are usually pointless, here’s how:
1. Go to “Appearance -> Widgets” in the WordPress Dashboard.
2. From here, we can use drag and drop to add different “boxes” to our sidebar, or remove the items
we don’t want.
There’s also a “HTML box” – a text box where we can use HTML code.
 Installing Plugins to Get More out of WordPress
What is a plugin?
“Plugins” are extensions that are built to expand WordPress’ capabilities, adding features and
functions to your site that don’t come built-in.
They’re shortcuts to getting your site to do what you want to, without having to build the feature
from scratch. We can use plugins to do everything from adding photo galleries and submission forms
to optimizing our website and creating an online store.
How do I install a new Plugin?
To start installing plugins, go to “Plugins -> Add New” and simply start searching.
Keep in mind that there are over 25,000 different FREE plugins, so you’ve got a LOT to choose
from!
Installation is easy – once we find a plugin, just click “Install”.
Steps to execute Programs 6 to 10
 Login as root
 Open the terminal

 Enter su
 Password:admin123
 cd /var/www/cgi-bin
 mkdir html or md html (if html directory not created)
 vi filename.php
 press I (insert mode) and type the programs and press Esc shift : wq (to save)
 service httpd start;
 chmod 777 filename.php
 php filename.php (to compile)
 Open the Mozilla Web browser and type http://localhost/cgi-bin/filename.php and The
output of the program will be displayed.
To create Database: Open 2 terminal

 In terminal 1 for DB connection: Enter su and Password:admin123
 Service mysqld start;
 Mysql – if it is denied
 Type : go mysql –u root –p and password : admin123
 Create database ise; and use ise;
 Create table student(usn varchar(20), Name varchar(20), address varcahr(20));
 Insert into student values(‘1’,’aa’,’abc’);
 Add some more values like this.
 In terminal 2 for php program and html
 Enter su and Password:admin123
 cd /var/www/cgi-bin
 vi filename.php
 service httpd start;
 service httpd status;
 chmod 777 filename.php
 php filename.php
 Open the Mozilla Web browser and type http://localhost/cgi-bin/filename.php and The
output of the program will be displayed.
1. Write a JavaScript to design a simple calculator to perform the

following operations: sum, product, difference and quotient.
program1.html
<!DOCTYPE
HTML> <html>
<head>

<style>
table, td, th
{
border: 1px solid
black; width: 33%;
text-align: center;
background-color:
DarkGray; border-
collapse:collapse;
}
table { margin: auto; }
input { text-
align:right; }
</style>
<script type="text/javascript">
function calc(clicked_id)
{
Varval1= parseFloat(document.getElementById("value1").value);
varval2 = parseFloat(document.getElementById("value2").value);
if(isNaN(val1)||isNaN(val2))
alert("ENTER VALID
NUMBER");
else if(clicked_id=="add")
document.getElementById("answer").value=val1+val2
; else if(clicked_id=="sub")
document.getElementById("answer").value=val1-
val2; else if(clicked_id=="mul")
document.getElementById("answer").value=val1*val2;
else if(clicked_id=="div")
document.getElementById("answer").value=val1/val2;
}
function cls()
{
value1.value="0";

value2.value="0";
answer.value="";
}
</script>
</head>
<body>
<table>
<tr><th colspan="4"> SIMPLE CALCULATOR </th></tr>
<tr><td>value1</td><td><input type="text" id="value1" value="0"/></td>
<td>value2</td><td><input type="text" id="value2" value="0"/>
</td></tr> <tr><td><input type="button" value="Addition" id = "add"
onclick="calc(this.id)"/></td>
<td><input type="button" value="Subtraction" id =
"sub" onclick="calc(this.id)"/></td>
<td><input type="button" value="Multiplication" id =
"mul" onclick="calc(this.id)"/></td>
<td><input type="button" value="Division" id
="div" onclick="calc(this.id)"/></td></tr>
<tr><td>Answer:</td><td> <input type="text" id="answer"
value="" disabled/></td>
<td colspan="2"><input type="button" value="CLEAR ALL"
onclick="cls()"/></td> </tr>
</table>
</body>
</html>
OUTPUT:

Test Cases :
Test Input
Expected Output Obtained Output Remarks
No. Parameters
Addition =74.95 Addition =74.95

value1=50.56 Subtraction =26.17 Subtraction =26.17
1. PASS
value2=24.39 Multiplication=1233.1584 Multiplication=1233.1584
Division=2.072980729807298 Division=2.072980729807298
Addition =45 Addition =45

value1= 0 Subtraction =-45 Subtraction =-45
2. PASS
value2= 45 Multiplication=0 Multiplication=0
Division=0 Division=0

value1= 45 Subtraction =45 Subtraction =45
3. PASS
Division=Infinity Division=Infinity
value1 = abc
4. ENTER VALID NUMBER ENTER VALID NUMBER PASS
value2 = 23
value1 = 50
5 ENTER VALID NUMBER ENTER VALID NUMBER PASS
value2 =xyz
2. Write a JavaScript that calculates the squares and cubes of the numbers from 0
to 10 and outputs HTML text that displays the resulting values in an HTML table
format.
program2.html
<!DOCTYPE
HTML> <html>
<head>

<style>
table,tr, td
{
border: solid
black; width:
33%; text-align:
center;
border-collapse: collapse;
background-
color:lightblue;
}
</style>
<script>
document.write( "<table><tr><thcolspan='3'> NUMBERS FROM 0 TO 10
WITH THEIR SQUARES AND CUBES </th></tr>" );
document.write( "<tr><td>Number</td><td>Square</td><td>Cube</td></tr>" );
for(var n=0; n<=10; n++)
{
document.write( "<tr><td>" + n + "</td><td>" + n*n + "</td><td>" +
n*n*n + "</td></tr>" ) ;
}
document.write( "</table>" )
; </script>
</head>
</html>
OUTPUT:

3. Write a JavaScript code that displays text “TEXT-GROWING” with increasing

font size in the interval of 100ms in RED COLOR, when the font size reaches
50pt it displays “TEXT-SHRINKING” in BLUE color. Then the font

size decreases to 5pt.
program3.html
<!DOCTYPE
HTML> <html>
<head>

<style>
p{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<p
id="demo"></p>
<script>
var var1 = setInterval(inTimer,
1000); var fs = 5;
var ids = document.getElementById("demo");
function inTimer() {
ids.innerHTML = 'TEXT GROWING';
ids.setAttribute('style', "font-size: " + fs + "px; color:
red"); fs += 5;
if(fs >= 50 )
{ clearInterval(var1
);
var2 = setInterval(deTimer, 1000);
}
}
function deTimer()
{ fs -= 5;
ids.innerHTML = 'TEXT SHRINKING';
ids.setAttribute('style', "font-size: " + fs + "px; color:
blue"); if(fs === 5 ){
clearInterval(var2);
}
}
</script>

</body>
</html>
OUTPUT:
TEXT SHRINKING
4. Develop and demonstrate a HTML5 file that includes JavaScript script that
uses functions for the following problems:
a) Parameter: A string
b) Output: The position in the string of the left-most vowel
c) Parameter: A number
d) Output: The number with its digits in the reverse order
program4.html
<!DOCTYPEHTML>

<html>
<body>
<script type="text/javascript">
var str = prompt("Enter the
Input",""); if(!(isNaN(str)))
{
var
num,rev=0,remainder;
num = parseInt(str);
while(num!=0) {
remainder = num%10; num
= parseInt(num/10); rev =
rev * 10 + remainder;
}
alert("Reverse of "+str+" is "+rev);
}
else
{
str = str.toUpperCase();
for(var i = 0; i < str.length; i++)
{ var chr = str.charAt(i);
if(chr == 'A' || chr == 'E' || chr == 'I' || chr == 'O' || chr == 'U')break;
}
if( i < str.length )
alert("The position of the left most vowel is "+(i+1));
else
alert("No vowel found in the entered string");
}
</script>
</body>
</html>
OUTPUT:

Test Cases :
Test
Input Parameters Expected Output Obtained Output Remarks
No.
1. 123 Reverse of 123 is 321 Reverse of 123 is 321 PASS
The position of the left The position of the left

1. VIDYANAGAR PASS
most vowel is 2 most vowel is 2
No vowel found in the No vowel found in the
2. SKY PASS
entered string entered string
The position of the left The position of the left

3. MNKTO most vowel is 5 most vowel is 5 PASS
5. Design an XML document to store information about a student in an engineering

college affiliated to VTU. The information must include USN, Name, and Name of
the College, Branch, Year of Joining, and email id. Make up sample data for 3
students. Create a CSS style sheet and use it to display the document.
program5.xml
<?xml-stylesheet type="text/css" href="5.css" ?
> <!DOCTYPE HTML>
<html>
<head>
<h1> STUDENTS DESCRIPTION </h1>

</head>
<students>
<student>
<USN>USN : 1VE15IS001</USN>
<name>NAME : ANANYA</name>
<college>COLLEGE : SVCE</college>
<branch>BRANCH : Information Science and Engineering</branch>
<year>YEAR : 2017</year>
<e-mail>E-Mail : [email protected]</e-mail>
</student>
<student>
<name>NAME : ANVITHA</name>
<branch>BRANCH : Information Science and Engineering</branch>
</student>
<student>
<name>NAME : ARPITHA</name>
<branch>BRANCH : Information Science and Engineering

</branch>
</student>
</students>
</html>
program5.css
student{
display:block; margin-top:10px; color:Navy;
}
USN{
display:block; margin-left:10px;font-size:14pt; color:Red;

}
name{
display:block; margin-left:20px;font-size:14pt; color:Blue;
}
college{
display:block; margin-left:20px;font-size:12pt; color:Maroon;
}
branch{
display:block; margin-left:20px;font-size:12pt; color:Purple;
}
year{
display:block; margin-left:20px;font-size:14pt; color:Green;
}
e-mail{
display:block; margin-left:20px;font-size:12pt; color:Blue;
}
OUTPUT:

6. Write a PHP program to keep track of the number of visitors visiting the web

page and to display this count of visitors, with proper headings.

program6.php
<?php
print "<h3> REFRESH PAGE
</h3>"; $name="counter.txt";
$file = fopen($name,"r");
$hits= fscanf($file,"%d");
fclose($file);
$hits[0]++;
$file = fopen($name,"w");
fprintf($file,"%d",$hits[0]);
fclose($file);
print "Total number of views: ".$hits[0];

?>
Output:
REFRESH PAGE
Total number of views: 10
7. Write a PHP program to display a digital clock which displays the current time
of the server.

program7.php
<!DOCTYPE
HTML> <html>
<head>
<meta http-equiv="refresh"
content="1"/> <style>
p{
color:white; font-
size:90px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
body{background-
color:black;} </style>
<p> <?php echo date(" h: i : s A");?> </p>
</head>
</html>
OUTPUT:
8. Write the PHP programs to do the following:

a) Implement simple calculator operations.

b) Find the transpose of a matrix.

c) Multiplication of two matrices.
d) Addition of two matrices.
program8a.php
<html>
<head>
<style>
table, td, th
{
border: 1px solid
black; width: 35%;
text-align: center;
background-color:
DarkGray;
}

input,p { text-
align:right; }
</style>
</head>
<body>
<form method="post">
<table>
<caption><h2> SIMPLE CALCULATOR </h2></caption>> <tr><td>First
Number:</td><td><input type="text" name="num1" /></td>
<td rowspan="2"><input type="submit" name="submit"
value="calculate"></td></tr>
<tr><td>Second Number:</td><td><input type="text"
name="num2"/></td></tr>
</form>
<?php
if(isset($_POST['submit'])) // it checks if the input submit is filled
{
$num1 = $_POST['num1'];
$num2 = $_POST['num2'];

if(is_numeric($num1) andis_numeric($num1) )
{
echo "<tr><td> Addition :</td><td><p>".($num1+$num2)."</p></td>"; echo
"<tr><td> Subtraction :</td><td><p> ".($num1-$num2)."</p></td>"; echo
"<tr><td> Multiplication :</td><td><p>".($num1*$num2)."</p></td>"; echo
"<tr><td>Division :</td><td><p> ".($num1/$num2)."</p></td>";
echo "</table>";
}
else
{
echo"<script type='text/javascript' > alert(' ENTER
VALID NUMBER');</script>";
}
}
?>
</body>
</html>
OUTPUT:
Test Cases:
Test Input
Expected Output Obtained Output Remarks
No. Parameters

Addition =74.95 Addition =74.95

value1=50.56 Subtraction =26.17 Subtraction =26.17
1. PASS
value2=24.39 Multiplication=1233.1584 Multiplication=1233.1584
Division=2.072980729807298 Division=2.072980729807298

value1= 0 Subtraction =-45 Subtraction =-45
2. PASS
Division=0 Division=0

value1= 45 Subtraction =45 Subtraction =45
3. PASS
Division=Infinity Division=Infinity
value1 = abc
4. ENTER VALID NUMBER ENTER VALID NUMBER PASS
value2 = 23
value1 = 50
5 ENTER VALID NUMBER ENTER VALID NUMBER PASS
value2 =xyz
Program8b.php
<?php
$a =
array(array(1,2,3),array(4,5,6),array(7,8,9));
$b =
array(array(7,8,9),array(4,5,6),array(1,2,3));
$m=count($a);
$n=count($a[2])
; $p=count($b);
$q=count($b[2])
;
echo "the first matrix :"."<br/>"; for

($row = 0; $row < $m; $row++) {
for ($col = 0; $col < $n; $col+
+) echo " ".$a[$row][$col];
echo "<br/>";
}
echo "the second matrix :"."<br/>";

for ($row = 0; $row < $p; $row++) {
for ($col = 0; $col < $q; $col+
+) echo " ".$b[$row]
[$col];
echo "<br/>";
}
echo "the transpose for the first matrix is:"."<br/>";

for ($row = 0; $row < $m; $row++) {
for ($col = 0; $col < $n; $col+
+) echo " ".$a[$col]
[$row];
echo "<br/>";
}
if(($m===$p) and ($n===$q)) {
echo "the addition of matrices is:"."<br/>";
for ($row = 0; $row < 3; $row++) {
for ($col = 0; $col < 3; $col++)
echo " ".$a[$row][$col]+$b[$row][$col]." ";

echo "<br/>";
}
}
if($n===$p){
echo " The multiplication of matrices:
<br/>"; $result=array();
for ($i=0; $i < $m; $i++)
{ for($j=0; $j < $q; $j+
+){
$result[$i][$j] = 0;
for($k=0; $k < $n;$k++)
$result[$i][$j] += $a[$i][$k] * $b[$k][$j];
}
}
for ($row = 0; $row < $m; $row++)
{ for ($col = 0; $col < $q; $col+
+)
echo " ".$result[$row]
[$col]; echo "<br/>";
}
}
?>
OUTPUT:
The first matrix: 1 2 3

456
789
The second
matrix:
789
456
123
The transpose of the first

matrix:
147
258
369
The addition of matrices

is: 8 10 12
8 10 12
8 10 12
The multiplication of
matrices:
18 24 30
54 69 84
90 114 138
9. Write a PHP program named states.py that declares a variable states with value
"Mississippi Alabama Texas Massachusetts Kansas". write a PHP program
that does the following:
a) Search for a word in variable states that ends in xas. Store this word
in element 0 of a list named statesList.
b) Search for a word in states that begins with k and ends in s. Perform a
case-insensitive comparison. [Note: Passing re.Ias a second parameter to

method compile performs a case-insensitive comparison.] Store this

word in element1 of statesList.
c) Search for a word in states that begins with M and ends in s. Store
this word in element 2 of the list.
d) Search for a word in states that ends in a. Store this word in element 3
of the list.
program9.php
<?php
$states = "Mississippi Alabama Texas MassachusettsKansas";
$statesArray = [];
$states1 = explode(' ',$states); echo
"Original Array :<br>";
foreach ( $states1 as $i => $value )
print("STATES[$i]=$value<br>");
foreach($states1 as $state) {
if(preg_match( '/xas$/',($state)))
$statesArray[0] = ($state);
}
foreach($states1 as $state)
{ if(preg_match('/^k.*s$/i',
($state))) $statesArray[1] =
($state);
}
{ if(preg_match('/^M.*s$/',
($state);
}
{ if(preg_match('/a$/',
($state);
}
echo "<br><br>Resultant Array :<br>";
foreach ( $statesArray as $array =>
$value )

print("STATES[$array]=$value<br>");
?>
OUTPUT:
10. Write a PHP program to sort the student records which are stored in
the database using selection sort.
Goto Mysql and then type
create database weblab;
use weblab;
create table student(usnvarchar(10),name varchar(20),address varchar(20));
program10.php
<!DOCTYPE
html> <html>
<body>
<style>
table, td, th
{
border: 1px solid
black; width: 33%;
text-align: center;
border-collapse:collapse;
background-
color:lightblue;
}
table { margin:
auto; } </style>
<?php
$servername =
"localhost"; $username =
"root"; $password =
"root"; $dbname =
"weblab"; $a=[];
// Create connection
// Opens a new connection to the MySQL server
$conn = mysqli_connect($servername, $username, $password, $dbname);

// Check connection and return an error description from the last
connection error, if any
if ($conn->connect_error)
die("Connection failed: " . $conn->connect_error);
$sql = "SELECT * FROM student";

// performs a query against the
database $result = $conn->query($sql);
echo "<br>";
echo "<center> BEFORE SORTING </center>";
echo "<table border='2'>";

echo "<tr>";
echo
"<th>USN</th><th>NAME</th><th>Address</th></tr>"; if
($result->num_rows> 0)
{
// output data of each row and fetches a result row as an
associative array
while($row = $result->fetch_assoc())
{ echo "<tr>";
echo "<td>". $row["usn"]."</td>";
echo "<td>". $row["name"]."</td>";
echo "<td>". $row["addr"]."</td></tr>";
array_push($a,$row["usn"]);
}
}
else
echo "Table isEmpty";
echo "</table>";
$n=count($a);
$b=$a;
for ( $i = 0 ; $i< ($n - 1) ; $i++ )
{
$pos= $i;
for ( $j = $i + 1 ; $j < $n ; $j++ )
{ if ( $a[$pos] > $a[$j] )
$pos= $j;
}
if ( $pos!= $i )
{ $temp=$a[$i];
$a[$i] = $a[$pos];
$a[$pos] = $temp;
}
}
$c=[];
$d=[]
;
$result = $conn->query($sql);

if ($result->num_rows> 0)// output data of each row

{
while($row = $result->fetch_assoc())
{ for($i=0;$i<$n;$i++) {
if($row["usn"]== $a[$i])
{ $c[$i]=$row["name"
];
$d[$i]=$row["addr"];
}
}
}
}
echo "<br>";
echo "<center> AFTER SORTING <center>";
echo "<table border='2'>";
echo "<tr>";
echo
"<th>USN</th><th>NAME</th><th>Address</th></tr>";
for($i=0;$i<$n;$i++) {
echo "<tr>";
echo "<td>". $a[$i]."</td>";
echo "<td>". $c[$i]."</td>";
echo "<td>". $d[$i]."</td></tr>";
}
echo
"</table>";
$conn->close();
?>
</body>
</html>
OUTPUT:

VIVA QUESTIONS
1) What protocol is used by all computer connections to the Internet?
2) Describe the purpose of the five most commonly used HTTP methods?
3) What is the purpose of the Accept field in an HTTP request?
4) What response header field is most often required?
5) What important capability is lacking in a markup language?
6) Where is PHP code interpreted?
7) In what ways is PHP similar to Java Script?

8) Which programming languages are used in Ajax applications?
9) What are the differences between the JPEG and GIF image formats?
10) What are the two required attributes of an <img /> tag?
11) What is the default size of a text control’s text box?
12) What is the difference in behavior between a group of checkbox buttons and a group of radio
buttons?
13) What is specified when the border attribute of a <table> tag is set to “border”?
14) What is the purpose of the cols-pan attribute of the <th> tag?
15) What is the purpose of external style sheets?
16) What attributes are required in a link to an external style sheet?
17) What is the format of an inline style sheet?
18) What is the format of a document-level style sheet, and where does it appear?
19) Why must background images be chosen with care?
20) What are the possible values for the text-align property?
21) What purpose does the text-indent property serve?
22) What are the three ways color property values can be specified?
23) What value does typeof return for an object operand?
24) What is the usual end-of-line punctuation for the string operand to document. write?
25) What is the usual end-of-line punctuation for the string operand to alert?

Web Lab Manual-CSE 2018-19

Uploaded by

Copyright:

Available Formats

Web Lab Manual-CSE 2018-19

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Lab Manual-CSE 2018-19

Uploaded by

Copyright:

Available Formats

Web Technology Laboratory with Mini Project 15CSL77

1. Students learn web concepts ,html and create web page.

Department of CSE, SVCE Page 1

WEB TECHNOLOGY LABORATORY WITH MINI PROJECT

Number of Lecture Hours/Week 01I + 02P Exam Marks 80

Total Number of Lecture Hours 40 Exam Hours 03

b) Output: The position in the string of the left-most vowel

d) Output: The number with its digits in the reverse order

5. Design an XML document to store information about a student in an engineering college

Department of CSE, SVCE Page 2

8. Write the PHP programs to do the following:

a) Implement simple calculator operations.

b) Find the transpose of a matrix.

c) Multiplication of two matrices.

d) Addition of two matrices.

Department of CSE, SVCE Page 3

Study Experiment / Project:

 Have a good understanding of Web Application Terminologies, Internet Toolsother

Department of CSE, SVCE Page 4

TYPE YOUR TEXT HERE

Basic HTML Tags: -

To create a text box

To create a Normal Button

Department of CSE, SVCE Page 5

To create a Submit Button

To create a Reset Button

To create a Radio Button

To create a Check box

<input type=submit value=Submit name=B1>

<input type=reset value=Reset name="B2">

To create a Text Area

To create a Hyper Link

To give Background color

More Miscellaneous Tags: -

Example of a simple HTML page

Below is an example of a very simple page:

This is the code used to make the page:

<title>your title here</title>

Department of CSE, SVCE Page 7

<center><img src="clouds.jpg" align="bottom"> </center>

<a href="http://somegreatsite.com">link name</a>

is a link to another nifty site

<h2>this is a medium header</h2>

send me mail at <a href="mailto:[email protected]">

<p> this is a new paragraph!

<p> <b>this is a new paragraph!</b>

<br> <b><i>this is a new sentence without a paragraph break, in bold italics.</i></b>

How does the Web work?

Department of CSE, SVCE Page 8

Submit a form Call CGI

CGI pgms response response

Essential Features of Perl: -

 Its syntax is C – like.

 All statements must end with a ‘;’.

 Variables in Perl do not have to be declared but can be used.

 Built in functions can be invoked with or without parentheses.

To Start MySQL Server:

Department of CSE, SVCE Page 9

mysql> create database svce;