WIT Lab Manual

BHEEMA INSTITUTE OF TECHNOLOGY & SCIENCE
Approved by AICTE, and Affiliated to JNTUA Ananthapur.
DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING
A Lab Manual
of
“WEB AND INTERNET TECHNOLOGIES LABORATORY”
B.Tech., III year I-Semester
LAB INCHARGE Approved & Reviewed by w.e.f Date
S VINOD KUMAR
V MALLESI
Dr. U. U VEERENDRA
DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING
A Lab Manual of “WEB AND INTERNET TECHNOLOGIES LABORATORY”
For the Academic Year 2018-19
(In accordance with JNTUA syllabus)
NAME OF THE STUDENT : ______________________________
REG No : ______________________________
SUBJECT : WEB AND INTERNET TECHNOLOGIES LABORATORY
SUBJECT CODE : 15A05609
SEMESTER : II
STREAM : COMPUTER SCIENCE ENGINEERING
TOTAL NO. OF EXPERIMENTS CONDUCTED:
TOTAL NO. OF EXPERIMENTS DID:
GRADE / MARKS AWARDED:
SIGNATURE OF LAB INSTRUCTOR

VISION OF THE DEPARTMENT
To deliver the qualitative, innovative and ethical computer science technocrats

who strive for the benefit of society.
MISSION OF THE DEPARTMENT
Nurturing the future leaders in academia, information technology, industry and

entrepreneurial pursuit, through a contemporary curriculum of theory and
application that develops the ability to solve problems individually and in teams.
Laboratory outcomes:
Course Objectives:
 To introduce client side scripting with Javascript and DHTML

 To introduce server side programming with Java servlets, JSP and PHP.
 To learn the basic web concepts and Internet protocols
After studying this course, students will be able to:
 Develop a static and dynamic webpage by the use of java script and DHTML
 Understand, analyze and apply the role of mark up languages like HTML,
DHTML, and XML in the workings of the web and web applications.
 Use JavaScript to control browser frames and windows.
 Design static pages in more organized format by using style sheets and
techniques like AJAX for making its content dynamic and Use cascading style
sheets to design web pages.
 Write a server side java application called Servlet,JSP to catch form data sent
from client, process it and store it on database.
 Understanding the impact of web designing in the current market place where
everyone use to prefer electronic medium for shopping, commerce, fund
transfer and even social life also.
ABOUT LAB
[Type text] Page 1

Hardware
There are 50 systems (ZEBRONICS) installed in this Lab. Their configurations
are as follows:
Processor : I3 PROCESSOR 6th Gen. with 3.70 GHz
RAM : 4 GB
Hard Disk : 500 GB
Monitor : 17” LCD Color Monitor
Mouse : Optical Mouse
Key Board : 105 MMX Key Board
Network Interface card : Present
Software
1 All systems are configured in DUAL BOOT mode i.e., Students can boot
from Windows 8 or Linux as per their lab requirement. This is very useful
for students because they are familiar with different Operating Systems so
that they can execute their programs in different programming
environments.
2 Microsoft-Office 2007 software tool.
Web & Internet Technologies Lab Page 2

GUIDELINES TO STUDENTS:
1 Equipment in the lab for the use of student community. Students need to
maintain a proper decorum in the computer lab. Students must use the
equipment with care. Any damage is caused is punishable.
2 Students are required to carry their observation / programs book with

completed exercises while entering the lab.
3 Students are supposed to occupy the machines allotted to them and are
not supposed to talk or make noise in the lab. The allocation is put up on
the lab notice board.
4 Lab can be used in free time / lunch hours by the students who need to use
the systems should take prior permission from the lab in-charge.
5 Lab records need to be submitted on or before date of submission.
 Students are not supposed to use floppy disks or any other external memories
(pen drives etc.).

PG. TEXT SIGNATURE
S DATE TITLE OF THE EXPIREMENT MARKS OF STAFF
NO. NOs. BOOK
To create a simple student bio-data
form using html5 . it should contain
the following name (text box),
address (multiline text box),gender
T3
(radio button 1-4
1 Page no
male,female),skill sets known
37:38
(check boxes – c,c++,java,C#etc),
extra curricular activities (text box),
nationality (combobox) ,submit and
reset button.
To create an html page with
different types of frames such as 5-7 T3
2
floating frame,navigation frame & Page no 39
mixed frame.
Design the webpage by applying T3
3 the different styles using inline, 8-10 Page no
external & internal style sheets. 453
Write a java script program to read T3
4 .XML file and display data in a neat 11-15 Page no
format. 512
To write a Javascript program to
T3
define a user defined function for 16-18
5 Page no
sorting the values in an array. Use
185:186
HTML5 for user interface.
To create an html page to T3
6 demonstrate exception handling in 19-21 Page no
javascript 422:423
Write a jsp servlet program to T3
7 implement the single text field 22-24 Page no
calculator. 440
Write a jsp servlet program to
demonstrate session handling using
T3
– url rewriting
8 Page no
--hidden formfield 25-26
442
--cookies
--sessions

To create a php program to
demonstrate the different 27
9 predefined function T3
in array, Math, Data & Regular Page no
Expression 351
Write a program in PHP for a simple T3
10 email processing with attachment 28-31 Page no
using forms 487
Write a program for PHP for a login
T3
script ; create a login database and
11 Page no
store 32-42
551
username and password
Write a program in PHP to add, T3
12 update and delete using student 43-48 Page no
database 673
Create a DTD to describe a library.
T3
Library has one or more books, 49-56
13 Page no
members and
523:565
staffs.
Create a DTD to describe a T3
14 Computer. A computer has 57-61 Page no
following details 523:565
Create a Schema to describe a
T3
Computer. Use the previous
15 Page no
question‘s details and 62-68
523:565
show an instance XML document.
TEXT BOOKS:
1. Beginning PHP and MySQL,3rd Edition , Jason Gilmore, Apress Publications (Dream tech.).
2. PHP 5 Recipes A problem Solution Approach Lee Babin, Nathan A Good, Frank M.Kromann
and Jon Stephens.
3. Deitel and Deitel and Nieto, ―Internet and World Wide Web - How to Program, Prentice
Hall,5th Edition,2011.
4. Herbert Schildt, ―Java-The Complete Reference, Eighth Edition, Mr Graw Hill Professional,
5. HTML and CSS design and build websites

1) Create a simple student bio-data form using HTML5.
It should contain the following name (text box), address (multiline text
box), gender (radio button male, female), skill sets known (check boxes – C, C++,
JAVA C# etc) extracurricular activities (text box), nationality (combo box) submit
and reset button.
Aim: To design a simple web page of student bio-data form using HTML5.
Procedure: Open NOTEPAD++ and create a file name (bio_data.html)
Source Code:
<html>
<body>
<table cellpadding="2" width="20%" bgcolor="Choice" align="center"
cellspacing="2">
<tr>
<td colspan=2>
<center><font size=4><b>Student Registration Form</b></font></center>
</td>
</tr>
<tr>
<td>Name</td>
<td><input type=text name=textnames id="textname" size="30"></td>
</tr>
<tr>
<td>Father Name</td>
<td><input type="text" name="fathername" id="fathername" size="30"></td>
</tr>
<tr>
<tr>
<td>Gender</td>
<td><input type="radio" name="gender" value="male" size="10">Male

<input type="radio" name="gender" value="Female" size="10">Female</td>
</tr>
</tr>
<tr>
<td>Email-Id</td>
<td><input type="text" name="emailid" id="emailid" size="30"></td>
</tr>
<tr>
<td>DOB</td>
<td><input type="text" name="dob" id="dob" size="30"></td>
</tr>
<tr>
<td>MobileNo</td>
<td><input type="text" name="mobileno" id="mobileno" size="30"></td>
</tr>
<tr>
<td>ADDRESS <br /><br /><br /></td>
<td><textarea name="Address" rows="4" cols="32"></textarea></td>
</tr>
<tr>
<td>State</td>
<td><select Name="State">
<option value="-1" selected>select..</option>
<option value="Andhra Pradesh">ANDHRA PRADESH</option>
<option value="Telangana">TELANGANA</option>
<option value="Karnata">KARNATAKA</option>
<option value="Tamilnadu">TAMILNADU</option>
<option value="New Delhi">NEW DELHI</option>
</select>
</td>
</tr>

<tr>
<td>Course</td>
<td><select name="Course">
<option value="-1" selected>select..</option>
<option value="B.Tech">B.TECH</option>
<option value="M.Tech">M.TECH</option>
<option value="MBA">MBA</option>
<option value="Diploma">DIPLOMA</option>
</select></td>
</tr>
<tr>
<td>SKILL SETS <br /><br /><br /></td>
<td>
C
<input type="checkbox" value="C" />
C++
<input type="checkbox" value="C++" />
JAVA
<input type="checkbox" value="JAVA" />
C#
<input type="checkbox" value="C#" />
<br />
Others
<input type="checkbox" value="Other">
<input type="text" maxlength="30" />
</td>
</tr>
<tr>
<td><input type="reset"></td>
<td colspan="2"><input type="submit" value="Submit Form" /></td>
</tr>
</table>
</body>
</html>

Output:

2) To create an html page with different types of frames such as floating frame,
navigation frame & mixed frame.
Aim: To design a multiple web pages with different types of frames using HTML5.
Procedure: Open NOTEPAD++ and create 1St File name (Mainpage.html), 2nd File
name (Frame.html), 3rd File name (Floatingframe.html), 4th File name
(Mixedframe.html), 5th File Name (navigationframe.html), 6th File Name
(pic.html) and 7th File name (video.html)
Source Code:
Mainpage.html
<html>
<body>
<a href="frames.html" target="two">navigation frame</a><br>
<a href="floatingframe.html" target="two">floating frame</a><br>
<a href="Noframe.html" target="two">no frame</a><br>
<a href="mixedframe.html" target="two">mixed frame</a><br>
</body>
</html>
Frame.html
<html>
<frameset cols="20%,35%,*" scrolling="no" noresize>
<frame name="one" src="MainPage.html"></frame>
<frame src="aa.gif"></frame>
<frame name="two" src="cc.gif"></frame>
</frameset>
</html>
Floatingframe.html
<html>
<body>
<p> Explanation: There is a problem with the page you are trying to reach and it
cannot be displayed.
Try the following: * Refresh page: Search for the page again by clicking the

Refresh
button. The timeout may have occurred due to Internet congestion.
* Check spelling: Check that you typed the Web page address correctly. The
address may have been mistyped.
* Access from a link: If there is a link to the page you are looking for, try accessing
the page from that link.
If you are still not able to view the requested page, try contacting you
<iframe src="bb.gif" height="225" width="500">
</iframe>
<iframe src="MainPage.html" height="50%" width="50%">
</iframe>
</body>
</html>
Mixedframe.html
<html>
<frameset cols="30%,*">
<frame src="pic.html"></frame>
<frameset rows="50%,*">
<frame src="video.html" autostart="true">
<frame src="Q3.html" >
</frameset>
</frameset>
</html>
navigationframe.html
<html>
<frameset cols="25%,*" scrolling="no" noresize>
<frame name="one" src="MainPage.html">
</frame>
<frame name="two" ></frame>
<frameset rows="30%,*">
<frame src="hulk.gif">
</frame>
</frameset>
</html>

pic.html
<html>
<body>
<img src="ghanendra.jpg" height="650" width="400">
</body>
</html>
video.html
<html>
<body bgcolor="aqua">
<embed src="aa.mp4" width="600" height="300" autostart="true">
</embed>
</body>
</html>
Output:-

3) Design the webpage by applying the different styles using inline, external &
internal style sheets.
Aim: To design web pages by applying the different styles using inline, external &
internal style sheets using HTML5.
Procedure: 1. Create an external style sheet named as “external_css.css” and

provide some styles for h2, hr, p & a tags.
2. Create an html file named as “Style_sheet.html”
a) Include the external style sheet with necessary tag.
b) Include the internal style sheet for body tags & also use class name, so that the
style can be applied for all tags.
c) Include a <p> tags with inline style sheet.
Inline CSS style consists set of rules in 4 part:
1. Selector (Element)
2. Style (Attribute)
3. Property and
4. Value
How to write Inline CSS Style
Selector is normally HTML element that element you want to assign CSS style.
And style is attribute to assign CSS property and set suitable value.

Source Code:
File Name: Style_Sheet.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="external_style.css" />
<style type="text/css">
body
{
margin-left:200px;
background:#5d9ab2 url('img_tree.png') no-repeat top left;
}
.container
{
text-align:center;
}
.center_div
{
border:1px solid gray;
margin-left:auto;
margin-right:auto;
width:90%;
background-color:#d0f0f6;
text-align:left;
padding:8px;
}
</style>
</head>
<body>
<div class="container">
<div class="center_div">
<h1>Hello World!</h1>
<p>This example contains some advanced CSS methods you may not have learned
yet. But, we will explain these methods in a later chapter in the tutorial.</p>
</div>
</div>
<p style="border-style:dotted solid dashed double">This is some text in a
paragraph.</p>
<p style="border-style:dotted solid dashed">This is some text in a paragraph.</p>

<p style="border-style:dotted solid">This is some text in a paragraph.</p>
<p style="border-style:dotted">This is some text in a paragraph.</p>
<h2>This is a header </h2>
<hr />
<p>you can see that the style sheet formats the text</p>
</body>
</html>
File Name: external_style.css
<style>
h2 {color:maroon; font-size:20pt}
hr {color:navy}
p {font-size:11pt; margin-left: 15px}
a:link {color:green}
a:visited {color:yellow}
a:hover {color:black}
a:active {color:blue}
</style>
OUTPUT:

4) Write a java script program to read .XML file and display data in a neat format.
AIM: To design a java script program to read .XML file and display data in a neat
format.
Procedure:
Source Code:
library.xml
<?xml version="1.0"?>

<Library>
<List>
<code>1</code>
<BookName>Computer Architecture</BookName>
<Category>Computers</Category>
<Price>125.60</Price>
</List>
<List>
<code>2</code>
<BookName>Advanced Composite Materials</BookName>
<Category>Science</Category>
</List>
<List>
<code>3</code>
<BookName>Asp.Net 4 Blue Book</BookName>
<Category>Programming</Category>
</List>
<List>
<code>4</code>
<BookName>Stategies Unplugged</BookName>
</List>
<List>
<code>5</code>

<BookName>Teaching Science</BookName>
</List>
<List>
<code>6</code>
<BookName>Challenging Times</BookName>
<Category>Business</Category>
</List>
<List>
<code>7</code>
<BookName>Circuit Bending</BookName>
</List>
<List>
<code>8</code>
<BookName>Popular Science</BookName>
</List>
<List>
<code>9</code>
<BookName>ADOBE Premiere</BookName>
<Category>Computers</Category>
</List>
</Library>
Readxml.html
<html>
<head>
<title>Extract XML Data using JavaScript</title>
<style>
#books {
margin-left: 190px;
font:13px Arial;
width:582px;

text-align:center;
border:solid 1px #000;
overflow:hidden;
}
#books div {
width:180px;
text-align:left;
border:solid 1px #000;
margin:1px;
padding:2px 5px;
}
.col1 {
float:left;
clear:both;
}
.col2 {
float:left;
}
.col3 {
float:left;
}
</style>
<script src="readxml.js"></script>
</head>
<body>
<div id="books"></div>
</body>
</html>
readxml.js
var oXHR = window.XMLHttpRequest ? new XMLHttpRequest() : new

ActiveXObject('Microsoft.XMLHTTP');
function reportStatus() {
if (oXHR.readyState == 4) // REQUEST COMPLETED.

showTheList(this.responseXML); // ALL SET. NOW SHOW XML
DATA.
}
oXHR.onreadystatechange = reportStatus;
oXHR.open("GET", "library.xml", true);
// true = ASYNCHRONOUS REQUEST (DESIRABLE), false = SYNCHRONOUS
REQUEST.
oXHR.send();
function showTheList(xml) {
var divBooks = document.getElementById('books'); // THE PARENT

DIV.
var Book_List = xml.getElementsByTagName('List');
// THE XML TAG NAME.
for (var i = 0; i < Book_List.length; i++) {
// CREATE CHILD DIVS INSIDE THE PARENT DIV.

var divLeft = document.createElement('div');
divLeft.className = 'col1';
divLeft.innerHTML =
Book_List[i].getElementsByTagName("BookName")[0].childNodes[0].nodeV
alue;
var divRight = document.createElement('div');

divRight.className = 'col2';
divRight.innerHTML =
Book_List[i].getElementsByTagName("Category")[0].childNodes[0].nodeVal
ue;
var divR2 = document.createElement('div');

divR2.className = 'col3';
divR2.innerHTML =
Book_List[i].getElementsByTagName("Price")[0].childNodes[0].nodeValue;
// ADD THE CHILD TO THE PARENT DIV.

divBooks.appendChild(divLeft);

divBooks.appendChild(divRight);
divBooks.appendChild(divR2);
}
};
Output:

5) To write a JavaScript program to define a user defined function for sorting the
values in an array. Use HTML5 for user interface.
Aim: To create an JavaScript program to define a user defined function for sorting
the values in an array. Use HTML5 for user interface.
Procedure: Create an html page named as “Sorting.html”

1. within the script tag
a) Define a function called as “array_size()” to get the size of array.
b) Define a function called as “get_number()” to get numbers from user.
c) Define a function called as “Sorting ()” to sort the numbers.
2. within the body tag
Display the message to click the button & display a button to cll the “array_size()”
method.
“array_size()” method calls “get_number()” method which in turn calls the
“sorting()” method.
File Name: Sorting.html
<html>
<head>
<script type="text/javascript">
var num=0;
number=0;
var numarray=new Array();
function array_size()
{
num=prompt("Enter how many number to be sorted","000");
number=parseInt(num);
get_numbers();
}
function get_numbers()
{
if (number!=null && number!="")
{
for( i=0;i<number;i++)

{
n=prompt("Enter the number to be sorted","1");
numarray[i]=parseInt(n);
}
}
sorting()
}
function sorting()
{
document.writeln("<h1>Sorted Array<h1>");
document.writeln(numarray.sort(sortNumber));
}
function sortNumber(a,b )
{
return a - b;
}
</script>
</head>
<body>
<h1> Click the button to get the Number sorted</h1>
<input type="button" onclick="array_size()" value="Get Array Size" />
</body>
</html>

OUTPUT:

6) To create an html page to demonstrate exception handling in JavaScript
Procedure: Create an html page named as ―exception.html‖ and do the

following.
i. within the script tag write code to handle exception
a) Define a method RunTest() to get any string values(str) from the user and call
the method Areletters(str).
b) In Areletters(str) method check whether str contain only alphabets (a-z, AZ), if
not throw exception.
c) Define a exception method Input Exception (str) to handle the exception
thrown by the above method.
ii. Within the body tag define a script tag to call Runtest() method define.
Source Code:
<html>
<head>
<script type="text/javascript" language="javascript">
function InputException(msg)
{
this.val = msg;
this.toString = function()
{
return "Input Exception is = "+this.val;
}
}
function AreLetters(msg)
{
var input = msg;
var re = new RegExp("[^a-zA-Z]");
if(input.match(re))
{
oops = new InputException(input);

throw oops;
}
else
{
document.write("<br>"+input);
}
}
function RunTest()
{
var input = prompt("type something","");
try{
AreLetters(input);
}
catch(e){
document.write("<br>exception occured and caught"+e.toString());
}
document.write("<h1>Exception Handling</h1>");
}
</script>
</head>
<body>
<script language="javascript" type="text/javascript">
RunTest();
</script>
</body>
</html>
OUTPUT:

7) Write a jsp servlet program to implement the single text field calculator
Source Code:
File Name: Calculator.html
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Calculator</title>
</head><h1><center>Basic Calculator</center></h1></head>
<body>
<center>
<form action="Calculator.jsp" method="get">
<label for="num1><b>Number 1</b></label>
<input type="text" name="num1"><br><br>
<label for="num2><b>Number 2</b></label>
<input type="text" name="num2"><br><br>
<input type="radio" name ="r1" value="add">+
<input type="radio" name ="r1" value="sub">-<br>
<input type="radio" name ="r1" value="mul">*
<input type="radio" name ="r1" value="div">/<br><br>
<input type="submit" value="Submit">
</center>
</form>
</body>
</html>
File Name: Calculator.jsp

<html>
<title>Calculator</title>
<head></head>
<body>
<%@page language="java" %>
<%
int num1=Integer.parseInt(request.getParameter("num1"));
int num2=Integer.parseInt(request.getParameter("num2"));
String operation=request.getParameter("r1");
if(operation.equals("add"))
{
int add=num1+num2;
out.println("addition is" +add);
}
else if(operation.equals("sub")){ Output:
int sub=num1-num2;
out.println("subtraction is" +sub);
}
else if(operation.equals("mul")){
int sub=num1*num2;
out.println("Multiplication is" +mul);
}
else if(operation.equals("div")){
int div=num1/num2;
if(num1>=num2)
out.println("Division is" +div);

else
out.println("The Division cannot be performed");
}
%></body></html>
8) Write a jsp servlet program to demonstrate session handling using
– url rewriting
--hidden formfield
--cookies
--sessions
Source Code:
File Name: index.html
<form action="servlet1">
Name:<input type="text" name="userName"/><br/>
<input type="submit" value="go"/>
</form>
FirstServlet.java
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class FirstServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response){
try{
response.setContentType("text/html");
PrintWriter out = response.getWriter();
String n=request.getParameter("userName");
out.print("Welcome "+n);
//appending the username in the query string

out.print("<a href='servlet2?uname="+n+"'>visit</a>");
out.close();
}catch(Exception e){System.out.println(e);}
}

}
SecondServlet.java
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class SecondServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
try{
response.setContentType("text/html");
PrintWriter out = response.getWriter();
//getting value from the query string
String n=request.getParameter("uname");
out.print("Hello "+n);
out.close();
} catch (Exception e){System.out.println(e);}
}
}
Output:

9) To create a php program to demonstrate the different predefined function in
array, Math, Data & Regular Expression.
The HTML form with file upload box

10) Write a program in PHP for a simple email processing with attachment
using forms
The code for an HTML form with a file upload box is given below. User can click on
the ‘Browse’ button to select the file from his/her local machine.
<form method="POST"name="email_form_with_php"
action="php-form-action.php"enctype="multipart/form-data">
<label for='name'>Name: </label>

<input type="text" name="name" >
<label for='email'>Email: </label>
<input type="text" name="email" >
<label for='message'>Message:</label>
<textarea name="message"></textarea>
<label for='uploaded_file'>Select A File To Upload:</label>
<input type="file"name="uploaded_file">
<input type="submit" value="Submit" name='submit'>
</form>
The form will look like this:
Please note that we have added:

"enctype="multipart/form-data"
while defining the <form> tag. This is to tell the browser that this form will be
used to upload files. Then we have added the “name” and “email” fields to collect
the user info. The third form field is the file upload box.
<input type="file" name="uploaded_file">
On hitting the “Submit” button, the form data along with the file data is posted to
the script pointed to by the ‘action’ attribute of the form.
Getting the uploaded file in the PHP script
In the PHP script, we will first validate the submission and if the validation
succeeds, we will send the submission by email.
We can access the uploaded file and its different attributes by using the $_FILES
array. This array will contain the name, size, path and other attributes of the
uploaded file. The code below gets the name, type and size of the uploaded file:
//Get the uploaded file information

$name_of_uploaded_file =
basename($_FILES['uploaded_file']['name']);
//get the file extension of the file
$type_of_uploaded_file =
substr($name_of_uploaded_file,
strrpos($name_of_uploaded_file, '.') + 1);
$size_of_uploaded_file =
$_FILES["uploaded_file"]["size"]/1024;//size in KBs
The code above is getting the different attributes of the uploaded file from the
$_FILES[] array.
Validating the size and extension of the uploaded file
Suppose we don’t want to allow files greater than the size of 100KB and we only
want to allow image files to be uploaded. The validation code goes like this:
//Settings
$max_allowed_file_size = 100; // size in KB
$allowed_extensions = array("jpg", "jpeg", "gif", "bmp");
//Validations
if($size_of_uploaded_file > $max_allowed_file_size )
{
$errors .= "\n Size of file should be less than $max_allowed_file_size";
}
//------ Validate the file extension -----

$allowed_ext = false;
for($i=0; $i<sizeof($allowed_extensions); $i++)
{
if(strcasecmp($allowed_extensions[$i],$type_of_uploaded_file) == 0)
{
$allowed_ext = true;
}
}
if(!$allowed_ext)
{
$errors .= "\n The uploaded file is not supported file type. "." Only the following
file types are supported: ".implode(',',$allowed_extensions);
}
In the above code we are validating the file size and type. We have the maximum
allowed file ($max_allowed_file_size) size set to 100KB. The $allowed_extensions
array cotains the file extensions of all allowed file types.

The validation code checks to see whether the file extension matches any of the
extensions in the $allowed_extensions array.
If there are errors found in the validation, the error is displayed. Else we proceed
with sending the email.
Copy the uploaded file
Now, its time to send the uploaded file with the user message to the recipient’s
email address.
First of all we shall copy the file to a folder on the server.
//copy the temp. uploaded file to uploads folder
$path_of_uploaded_file = $upload_folder . $name_of_uploaded_file;
$tmp_path = $_FILES["uploaded_file"]["tmp_name"];
if(is_uploaded_file($tmp_path))
{
if(!copy($tmp_path,$path_of_uploaded_file))
{
$errors .= '\n error while copying the uploaded file';
}
}
This code copies the uploaded file to the ‘uploads’ folder. You can change the
uploads folder by updating $upload_folder.
Please make sure that “uploads” folder has “777” permissions.
Sending the Email
The next step is to compose and send the email. We will use the Pear library for
composing and sending the email. ( see the Pear installation instructions below )
The pear classes PEAR::Mail and PEAR::Mail_Mime are used for sending the email
with the attachment.
First, we need to include the pear library files for these classes.
include_once('Mail.php');
include_once('Mail_Mime/mime.php');
The code below composes and sends the email
$message = new Mail_mime();
$message->setTXTBody($text);
$message->addAttachment($path_of_uploaded_file);
$body = $message->get();
$extraheaders = array("From"=>$from, "Subject"=>$subject,"Reply-
To"=>$visitor_email);
$headers = $message->headers($extraheaders);
$mail = Mail::factory("mail");
$mail->send($to, $headers, $body);

Mail_mime() class helps in composing a MIME message. In the code above, a
Mail_mime object is created, the text body is updated ( $message-
>setTXTBody($text); ) and the attachment is added ( $message-
>addAttachment(file) )
The MIME encoded message is then sent using the Mail class.
The sample PHP upload form
Click here to download php-email-form-attachment.zip
The download contains a complete PHP upload form that sends the uploaded by
email.
How to Install the PEAR Library
In this article we used the PEAR::Mail and PEAR::Mail_Mime classes to send the
email with attachment. Before using these classes, you need to install the PEAR
package on your server. It is beyond the scope of this tutorial to discuss the
installation of PEAR. But, I want to give you a quick tip. Get the PEAR installer
script from
http://pear.php.net/go-pear
Save the file as “pear-installer.php”. Upload this file to your server in any
directory. Then run this file from your browser, like this:
http://www.yourdomain.com/pear-installer.php
This display the web interface to install the PEAR on your website. The interface
shows detailed instructions. After Pear is installed, search and install packages
“mail” and “mail_mime”.

11) Write a program for PHP for a login script ; create a login database and
store username and password
Procedure: How to create a Login page with PHP and MySQL
In this article we will discuss how we can design a sign-in webpage for our website
with PHP and MySQL and how to retrieve a record from the database.
Introduction
It’s easy to use PHP with MySQL to create it. But for these kind of webpages we
need to use form validation on our webpages, if anyone use JavaScript so it’s well
and good because JavaScript is a very good technique to use and solve Form
Validation problems. But we will directly go to our work just create a simple Sign-
in page to make you understand the concept of Sign-in webpage in this article.
Requirements for Sign-In webpage:

 HTML
 CSS
 PHP
 MySQL
 Xampp/Wamp server
Using HTML to design the Sign-In webpage:
First of all we need to design the Sign-In webpage. Commonly what we see on a
Sign-In webpage. There is username and password form boxes and a button to
sign in to the profile page of user. And also sometimes we saw CAPTCHA which is
used to identify the user on the webpage during the wrong entries of the Sign-In
webpage. There is also an easy method to put CAPTCHA on a webpage. But now
in this article we will just learn how to design a Sign-In webpage. Let’s start…
Source Code:
//login.html
<html>
<head>
<title>login page</title>
</head>

<body>
<center>
<br><br>
<br><br><br>
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
Username:<br /><input type="text" name="username" size="20" /><br />
Password:<br /><input type="password" name="pswd" SIZE="20" /><br />
<input type="submit" value="Login" />
</form>
</center>
</body>
</html>
//index.php
<?php
session_start();
if (! isset($_SESSION['name'])) {
if (isset($_POST['username'])){
$username = $_POST['username'];
$pswd = $_POST['pswd'];
$conn=pg_connect("host=localhost dbname=corporate user=root

password=") or die(pg_last_error($conn));
$query = "SELECT name FROM users WHERE username='$username' AND

pswd='$pswd'";
$result = pg_query($conn, $query);
if (pg_num_rows($result) == 1){
$_SESSION['name'] = pg_fetch_result($result,0,'name');
$_SESSION['username'] = pg_fetch_result($result,0,'username');
echo "You're logged in. Feel free to return at a later time.";
}
} else {
include "login.html";

}
} else {
$name = $_SESSION['name'];
echo "Welcome back, $name!";
}
?>
Note: The Execution completes with the above tag and next pages are just for
the information purpose only, it’s not meant for the execution purpose.
Listing 1: Sign-In.html
<!DOCTYPE HTML>
<html>
<head>
<title>Sign-In</title>
<link rel="stylesheet" type="text/css" href="style-sign.css">
</head>
<body id="body-color">
<div id="Sign-In">
<fieldset style="width:30%"><legend>LOG-IN HERE</legend>
<form method="POST" action="connectivity.php">
User <br><input type="text" name="user" size="40"><br>
Password <br><input type="password" name="pass" size="40"><br>
<input id="button" type="submit" name="submit" value="Log-In">
</form>
</fieldset>
</div>
</body>
</html>

Figure 1: Output of the Sign-in Webpage
In Figure 1 you can see the output of the Listing 1. But there is a problem, as we
used the fieldset tag and the fieldset tag size is being a problem on this page. So
we should change the width of the fieldset tag size. I have a simple way to use the
Inline Style of CSS to get rid from this problem. Let’s see the inline CSS style code.
Listing 2: Inline CSS Style
<fieldset style="width:30%"><legend>LOG-IN HERE</legend>

So let’s we check the output of the sign-in.html webpage after writing the inline
CSS style in the fieldset tag as you can see it in the Listing 2. As I told you that it’s
an easy way to use Inline Style. We can use it from the external file by giving an ID
name for the fieldset tag. But the easiest way is to use Inline Style in this kind of
situations to handle them. And we should commonly find easiest ways to get rid
from the problems.
Figure 2: Output of the Sign-in Webpage with updated size of fieldset tag
Description of sign-in webpage:
As you can see in the Listing 1 and 2 we used such a good Html tags to design a
simple log-in form. We used legend tag with fieldset tag to use texts on the upper
side of the form. And in the form we used method POST. And action to send data
to another webpage. Which will be PHP Programmed webpage, I named it
connectivity.php. And there is one new thing as type that is password. The

functionality of type password is to don’t show the text what we will enter in the
password box. Instead of password texts or characters it will show bold dots like
?.
Why we are using POST not GET method:
We are using POST method because it is secure. If we use GET method our data
will not private. POST is commonly being used for these kind of webpages, due to
its security. And when we are dealing with our ID and Password, so we should be
alert from the hackers. Because the GET is being used in Phishing webpages, by
which people are making fool the internet users to get their personal ID and
Password.
Using CSS on Sign-in.html webpage:
Now it’s time to use CSS style on the webpage to create some attraction. We can
use many kind of styles. But the good thing is that which matches to this page. For
this we will use many CSS Styles, so I think the better way is use an external file
and link it to the sing-in.html webpage. Let’s start…
Listing 3: style.css
/*CSS File For Sign-In webpage*/

#body-color{
background-color:#6699CC;
}
#Sign-In{
margin-top:150px;
margin-bottom:150px;
margin-right:150px;
margin-left:450px;
border:3px solid #a1a1a1;
padding:9px 35px;
background:#8000CC;
width:400px;
border-radius:20px;
box-shadow: 7px 7px 6px;
}
#button{

border-radius:10px;
width:100px;
height:40px;
background:#FF00FF;
font-weight:bold;
font-size:20px
}
Description of style.css
We used three ids in the external CSS style webpage. One we used for the body,
we identified it by the body-color name, and we applied CSS styles on it. In the
next one, we used for the div tag and we identified it by Sign-In in the CSS styles
webpage. In the last we used an ID for button and we applied CSS styles on it.
There are some new CSS styles as font-weight, font-size which all about to font
(text).
Figure 3: Sign-in webpage after applying CSS Style (linking the style.css webpage)
As you can see the change on the sign-in.html webpage after linking the style.css
webpage. And we used some good colors on tags to create it more attractive.
From these kind of webpages we know the importance of CSS Styles. As you can
see the Figure 1, how it was looking and how it is looking now? We should use
different type of CSS styles on our webpages. To create them attractive and more
beautiful.

Using PHP and MySQL to get Log In user Profile page:
As we can see the Figure 3 now it’s fully ready to log in by entering the user name
and password. But before we enter any data to this webpage on Figure 3. We
should create two pages. One profile page and other ID and password validation.
For checking or validating the ID and Password we need to save ID and Password
to the database, for this we need two more things as a database and a table. So
let’s create a database and then a table.
Listing 4: creating table
CREATE TABLE UserName
(
UserNameID int(9) NOT NULL auto_increment,
userName VARCHAR(40) NOT NULL,
pass VARCHAR(40) NOT NULL,
PRIMARY KEY(UserNameID)
);
NOTE: As we didn’t create the Sign-Up page so we should insert data to the
UserName table and then we enter that data from the sign-in.html page to
connect with user profile page.
Listing 5: Inserting data to the table UserName:
INSERT INTO
UserName (userName, pass)
VALUES
("mrbool","mrbool123");
So we completed the requirements of the database. Now we are going create a
PHP programing file. In which we will get the data and check it if the ID and
Password are available in the database and entered correct then the user will be
able to online to the user profile page.
Listing 6: connectivity.php
<?php
define('DB_HOST', 'localhost');
define('DB_NAME', 'practice');
define('DB_USER','root');
define('DB_PASSWORD','');

$con=mysql_connect(DB_HOST,DB_USER,DB_PASSWORD) or die("Failed to
connect to MySQL: " . mysql_error());
$db=mysql_select_db(DB_NAME,$con) or die("Failed to connect to MySQL: " .
mysql_error());
/*
$ID = $_POST['user'];
$Password = $_POST['pass'];
*/
function SignIn()
{
session_start(); //starting the session for user profile page
if(!empty($_POST['user'])) //checking the 'user' name which is from Sign-In.html,
is it empty or have some text
{
$query = mysql_query("SELECT * FROM UserName where userName =
'$_POST[user]' AND pass = '$_POST[pass]'") or die(mysql_error());
$row = mysql_fetch_array($query) or die(mysql_error());
if(!empty($row['userName']) AND !empty($row['pass']))
{
$_SESSION['userName'] = $row['pass'];
echo "SUCCESSFULLY LOGIN TO USER PROFILE PAGE...";
}
else
{
echo "SORRY... YOU ENTERD WRONG ID AND PASSWORD...
PLEASE RETRY...";
}
}
}
if(isset($_POST['submit']))
{
SignIn();
}
?>

Figure 4: Taking input from user as the user’s ID and Password to get log-in
As you can see at this stage the webpage of sign-in.html is working well. Because
we need a webpage which takes input from user’s ID and Password, and the main
thing it should not show the user’s Password which he is giving input at the
getting log-in time. When we entered the correct user’s ID and Password then
press Log-in button to get log in.

Output:

12) Write a program in PHP to add, update and delete using student
database
Procedure:
<html>
<head>
<title>Registration Page</title>
<script type="text/javascript">
function validate()
{
var c1=new RegExp("^[\\w]{6}$");
var c2=new RegExp("^[\\w]{6}$");
var c3=new RegExp("^[\\w]+@[\\w]+.com$");
var c4=new RegExp("^[\\d]{10}$");
var name=document.form1.uname.value;
var pwd=document.form1.password.value;
var email=document.form1.email.value;
var phone=document.form1.phnum.value;
var error="";
var f=false;
if(!name.match(c1))
{
error += "Username should be minimum of six characters\n";
f=true;
}
if(!pwd.match(c2))
{
error += "Password should be minimum of six characters\n";
f=true;
}
if(!email.match(c3))
{
error += "Email should be of format uname@domain.com\n";
f=true;
}
if(!phone.match(c4))

{
error += "Phone number should be of 10 digits\n";
f=true;
}
if(f == true)
{
window.alert(error);
f=false;
}
else
{
document.write("<CENTER><B><U>USER PROFILE</U></B></CENTER>"+
"</br><b>User Name:</b>"+document.form1.uname.value+
"</br><b>E-mail:</b>"+document.form1.email.value+
"</br><b>Phone:</b>"+document.form1.phnum.value+
"</br><b>Gender:</b>"+document.form1.gender.value+
"</br><b>DOB:</b>"+document.form1.day.value+"-"+
document.form1.month.value +"-"+ document.form1.year.value+
"</br></br></br><a href=login.html>HOME</a>"
);
}
}
</script>
</head>
<body bgcolor="#0FF5F2">
<form name="form1" method="post" action="registration.php">
<font color="red" face="arial black" size="5">
<center><u>REGISTRATION FORM</u></center>
</font>
<table align="center" cellspacing=10 cellpadding=5>
<tr>
<td>USERNAME:</td>
<td><input type="text" name="uname"></td>
<td></td>
<td></td>
</tr>

<tr>
<td>PASSWORD:</td>
<td><input type="password" name="password"></td>
<td></td>
<td></td>
</tr>
<tr>
<td>E-Mail ID:</td>
<td><input type="text" name="email"></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Phone Number:</td>
<td><input type="text" name="phnum"></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Gender:</td>
<td><input type="radio" name="gender" value="male" checked>Male</td>
<td><input type="radio" name="gender" value="female">Female</td>
<td></td>
<td></td>
</tr>
<tr>
<td>Date of Birth:</td>
<td>Day:
<select name="day">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>

<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select>
</td>
<td>Month:
<select name="month">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
</td>

<td>Year:
<select name="year">
<option>2001</option>
</select>
</td>
</tr>
<tr>
<td>Languages:</td>
<td><input type="checkbox" name="lgroup" value="english"
checked>English</td>
<td><input type="checkbox" name="lgroup" value="hindi">Hindi</td>
<td><input type="checkbox" name="lgroup" value="telugu">Telugu</td>
<td></td>
<td></td>
</tr>
<tr>
<td>Address:</td>
<td><textarea rows=5 cols=20></textarea></td>
<td></td>
<td></td>
</tr>
<tr></tr><tr></tr>
<tr>
<td></td>
<td><input type="submit" value="submit" onClick="validate()"></td>
<td><input type="reset" value="reset"></td>
</table>
</form>

</body>
</html>

13) Create a DTD to describe a library. Library has one or more books,
members and staffs.
 Each book has BookID(Attribute), Title, one or more Authors, Publisher
Year of Publication, ISBN and Price.
 Each Member has MemeberID(Attribute), Name, Address, Phone number.
 Each Staff has StaffID(Attribute), Name, Address, Phone number.
 Each Author has AuthorID(Attribute), Name, Address, Phone number.
 Each Publisher has PublisherID(Attribute), Name, Address, Phone number.
 Use it in a XML document.
Source Code:
Config.php
<?php
$con=mysql_connect('localhost','root',''); //Database Connections
$db=mysql_select_db('student',$con); // Database Name
?>
Index.php
<?php
include('config.php'); // Database Config
/* Add Student Detail Php */
if(isset($_POST['add'])) // Check form submit or not
{
$name=$_POST['name'];
$gender=$_POST['gender'];
$department=$_POST['dept'];
$terms=$_POST['terms'];
// Check all fields are empty or not if empty return error message
if($name=='' && $gender=='' && $department=='')

{
// Assign Messge variable
$msg="All fields are mandatary.Please fill It";
}
else
{
$query="INSERT INTO
`student_detail`(name,gender,department,terms)values('$name','$gender','$dep
artment','$terms')";
$result=mysql_query($query);
if($result)
{
$msg="Student Detail Successfully Added"; // Success Message
echo '<meta http-equiv="refresh" content="0;manage-
studentdetail.php?msg='.$msg.'" />';
}
}
}
?>
<h2><?php echo $msg ?></h2>
<table align="center" width="400px" cellpadding="5" cellspacing="5"

bgcolor="#E6E6E6" border="1" rules="all">
<tr>
<td><a href="index.php">Add Student</a></td>
<td><a href="manage-studentdetail.php">Manage Student</a></td>
</tr>
</table>


<h3 align="center">Add Student Detail</h3>
<form method="post" action="<?php $_SERVER['PHP_SELF']?>">
<table align="center" width="500px" cellpadding="5" cellspacing="5">
<tr>
<td>Name:</td>
<td><input type="text" name="name" /></td>
</tr>
<tr>
<td>Gender:</td>

<td>
<input type="radio" name="gender" value="Male" />Male
<input type="radio" name="gender" value="Female" />Female
</td>
</tr>
<tr>
<td>Department:</td>
<td>
<select name="dept">
<option value="" selected="selected">Select Department</option>
<option value="CSE">CSE</option>
<option value="EEE">EEE</option>
<option value="ECE">ECE</option>
<option value="MECH">MECH</option>
</select>
</td>
</tr>
<tr>
<td>Hobby:</td>
<td>
<input type="checkbox" name="terms" value="Yes"/>
Accept Terms and conditions
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" name="add" value="Add student" /></td>
</table>
</form>
Edit-studentdetails.php
<?php
/* Update Student Detail Php */
if(isset($_POST['uid'])) // Get id
{
$name=$_POST['name'];

$gender=$_POST['gender'];
$department=$_POST['dept'];
$terms=$_POST['terms'];
if($name=='' && $gender=='' && $department=='') // Check all fields are empty
or not if empty return error message
{
$msg="All fields are mandatary.Please fill It"; // Assign Messge variable
}
else
{
$query="UPdate `student_detail` SET
name='$name',gender='$gender',department='$department',terms='$terms'";
if($result)
{
$msg="Student Detail Updated"; // Success Message
echo '<meta http-equiv="refresh" content="0;manage-
studentdetail.php?msg='.$msg.'" />';
}
}
}
?>
<?php
$eid=$_GET['id'];
$getdata=mysql_query("SELECT * FROM `student_detail` WHERE id='$eid'");
$row=mysql_fetch_array($getdata);
?>
<h2><?php echo $msg ?></h2>


<form method="post" action="<?php $_SERVER['PHP_SELF']?>">

<table align="center" width="500px" cellpadding="5" cellspacing="5">
<tr>

<td>Name:</td>
<td><input type="text" name="name" value="<?php echo $row['name']?>"
/</td>
</tr>
<tr>
<td>Gender:</td>
<td>
<input type="radio" name="gender" value="Male" <?php
if($row['gender']=='Male') {?> checked="checked" <? } ?> />Male
<input type="radio" name="gender" value="Female" <?php echo
$row['gender']?>
<?php if($row['gender']=='Female') {?> checked="checked" <? } ?> />Female
</td>
</tr>
<tr>
<td>Department:</td>
<td>
<select name="dept">
<option value="CSE" <?php if($row['department']=='CSE') {?>
selected="selected" <? } ?>>CSE</option>
<option value="EEE" <?php if($row['department']=='EEE') {?>
selected="selected" <? } ?>>EEE</option>
<option value="ECE" <?php if($row['department']=='ECE') {?>
selected="selected" <? } ?>>ECE</option>
<option value="MECH" <?php if($row['department']=='MECH') {?>
selected="selected" <? } ?>>MECH</option>
</select>
</td>
</tr>
<tr>
<td>Terms:</td>
<td>
<input type="checkbox" name="terms" value="Yes" <?php echo
$row['terms']?><?php if($row['terms']=='Yes') {?> checked="checked"
<? } ?>/>Accept Terms and conditions
</td>
</tr>
<tr>
<td colspan="2" align="center">

<input type="hidden" name="uid" value="<?php echo $eid ?>" />
<input type="submit" name="update" value="Update" /></td>
</table>
</form>
Manage-students.php
<?php
/* Delete Student Detail Php */
if(isset($_GET['did'])) // Get Id
{
$did=$_GET['did'];
$query="DELETE FROM `student_detail` WHERE id='$did'";
if($result)
{
$msg="Student Detail Deleted Successfully "; // Success Message
}
}
?>
<?php
if(isset($_GET['msg']))
{
?>
<h2 align="center"><?php echo $_GET['msg'] // Message From Edit Page?></h2>
<?
}
?>
<h2 align="center"><?php echo $msg ?></h2>

bgcolor="#E6E6E6" border="1" rules="all">
<tr>
<td><a href="index.php">Add Student</a></td>
<td><a href="manage-studentdetail.php">Manage Student</a></td>
</tr>
</table>


border="1px" rules="all">
<tr>
<td>S.no</td>
<td>Name</td>
<td>Gender</td>
<td>Department</td>
<td>Terms</td>
<td>Edit</td>
<td>Delete</td>
</tr>
<?php
$i=1;
$getdata=mysql_query("SELECT * FROM `student_detail`");
while($row=mysql_fetch_array($getdata))
{
?>
<tr>
<td><?php echo $i ?></td>
<td><?php echo $row['name'];?></td>
<td>
<?php echo $row['gender'];?>
</td>
<td><?php echo $row['department'];?></td>
<td>
<?php echo $row['terms'];?>
</td>
<td><a href="edit-studentdetail.php?id=<?php echo $row['id']?>">Edit</a></td>
<td><a href="manage-studentdetail.php?did=<?php echo
$row['id']?>">Delete</a></td>
</tr>
<?
$i++;
}
?>
</table>

Output:

14)

WIT Lab Manual

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

WIT Lab Manual

Caricato da

Copyright:

Formati disponibili

BHEEMA INSTITUTE OF TECHNOLOGY & SCIENCE

Approved by AICTE, and Affiliated to JNTUA Ananthapur.

DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING

“WEB AND INTERNET TECHNOLOGIES LABORATORY”

B.Tech., III year I-Semester

LAB INCHARGE Approved & Reviewed by w.e.f Date

A Lab Manual of “WEB AND INTERNET TECHNOLOGIES LABORATORY”

For the Academic Year 2018-19

(In accordance with JNTUA syllabus)

NAME OF THE STUDENT : ______________________________

SUBJECT : WEB AND INTERNET TECHNOLOGIES LABORATORY

SUBJECT CODE : 15A05609

STREAM : COMPUTER SCIENCE ENGINEERING

TOTAL NO. OF EXPERIMENTS CONDUCTED:

TOTAL NO. OF EXPERIMENTS DID:

GRADE / MARKS AWARDED:

SIGNATURE OF LAB INSTRUCTOR

To deliver the qualitative, innovative and ethical computer science technocrats

MISSION OF THE DEPARTMENT

Nurturing the future leaders in academia, information technology, industry and

 To introduce client side scripting with Javascript and DHTML

After studying this course, students will be able to:

 Use JavaScript to control browser frames and windows.

[Type text] Page 1

Web & Internet Technologies Lab Page 2

2 Students are required to carry their observation / programs book with

5 Lab records need to be submitted on or before date of submission.

Web & Internet Technologies Lab Page 3

Web & Internet Technologies Lab Page 4

5. HTML and CSS design and build websites

Web & Internet Technologies Lab Page 5

Procedure: Open NOTEPAD++ and create a file name (bio_data.html)

Web & Internet Technologies Lab Page 1

Web & Internet Technologies Lab Page 2

Web & Internet Technologies Lab Page 3

Web & Internet Technologies Lab Page 4

Web & Internet Technologies Lab Page 5

Web & Internet Technologies Lab Page 6

Web & Internet Technologies Lab Page 7

Procedure: 1. Create an external style sheet named as “external_css.css” and

2. Create an html file named as “Style_sheet.html”

a) Include the external style sheet with necessary tag.

c) Include a <p> tags with inline style sheet.

Inline CSS style consists set of rules in 4 part:

How to write Inline CSS Style

Web & Internet Technologies Lab Page 8

Web & Internet Technologies Lab Page 9

Web & Internet Technologies Lab Page 10

Web & Internet Technologies Lab Page 11

Web & Internet Technologies Lab Page 12

var oXHR = window.XMLHttpRequest ? new XMLHttpRequest() : new

Web & Internet Technologies Lab Page 13

var divBooks = document.getElementById('books'); // THE PARENT

for (var i = 0; i < Book_List.length; i++) {

// CREATE CHILD DIVS INSIDE THE PARENT DIV.

var divRight = document.createElement('div');

var divR2 = document.createElement('div');

// ADD THE CHILD TO THE PARENT DIV.

Web & Internet Technologies Lab Page 14

Web & Internet Technologies Lab Page 15

Procedure: Create an html page named as “Sorting.html”

File Name: Sorting.html

Web & Internet Technologies Lab Page 16

/CSS File For Sign-In webpage/