Ss D

DISTRIBUTED COMPUTING LAB
Table of Contents
Sl.No. Name of the Experiment
Simple Web Page Creation Using Frames, List,

1.
Table’s
2. Client Side Form Validation using Jquery.
3. Semantic Elements in HTML
4. PHP and MySQL
5. JSON
6 JSON and PHP
7. AJAX and Database

Ex. No. 1 SIMPLE WEB PAGE CREATION USING
Date: FRAMES,LIST,TABELS
Aim:
To write a HTML code for designing a curriculum vitae with necessary tags.
Tags used:
<html> -it defines the whole document. It has a start tag <html> and an end tag
</html>.
<body> -it defines the document body. It has a start tag <body> and an end tag
</body>.
<title> - it specifies a title for the document.
<table > -An HTML table is defined with the <table> tag.
<tr> - Each table row is defined with the <tr> tag
<th> - A table header is defined with the <th> tag.
<td> - A table data/cell is defined with the <td> tag.
<ul> -HTML lists are defined with the <ul> (unordered/bullet list) .
<li> - it defines the list items.
<ol> - the <ol> (ordered/numbered list) tag.
<h1> - it defines a heading. It has a start tag <h1> and an end tag </h1>.
<a> - HTML links are defined with the <a> tag.
<br> - it is an empty element without a closing tag.
<marquee> -it is used for scrolling piece of text or image displayed either
horizontally across or vertically down your web page.
<frame> -it defines one particular window (frame) within a <frameset>.
Code:
1) Edu.html
<html>
<body>
<table style="width:10%" border=2>
<tr>
<th>Qualification</th>
<th>Institution</th>
<th>Percentage</th>
</tr>
<tr>
<td>10th</td>
<td>St. Josephs</td>
<td>90</td>
</tr>
<tr>
<td>12th/td>
<td>mk gandhi</td>
<td>94</td>
</tr>
</table>
</body>
</html>
2) Personal.html
<html>
<head>
<title> Personal Information </title>
</head>
<body>
<ul>
<li> Name : Sathyabama</li>
<li> email: sathyabama@gmail.com </li>
</ul>
<ol> <b> Hobbies </b>
<li> Listening Music</li>
<li> watching TV </li>
</ol>
</body>
</html>
3) f1.html
<html>
<head>
<title> f1.html </title>
</head>
<body>
<h2> Curriculum Vitae </h2>
<a href="personal.html" target="main"> Personal Information<br></a>
<a href="edu.html" target="main"> Educational Qualification<br> </a>
</body>
</html>
4) f2.html
<html>
<head>
<title> f2.html </title>
</head>
<body>
<h1> <marquee> < My Details > </marquee> </h1>
</body>
</html>
5) Main.html
<html>
<head>
<title> Frame tag </title>
</head>
<head>
<frameset cols="20,80">
<frame src="f1.html">
<frame src="f2.html" name="main">
</frameset>
</head>
</html>
Output:
Result:
Thus the webpage has been created successfully.

Ex. No. 2
CLIENT SIDE FORM VALIDATION USING JQUERY
Date:
Aim :
To perform client side validation using JQuery
Tags Used:
<html> - Defines a HTML document
<head> - Defines information about the document
<title> - Defines a title about the document
<p> - Defines a paragraph
<div> - Defines a division or section in a HTML document
<input> - Specifies an input field where the user can enter data
JQuery:
- JQuery is a Javascript Library
$ - Element selector which selects the elements based on the element
name
#id - Uses the ‘id’ attribute of a HTML tag to find the specific element
Click - Mouse event
Code:
<html>
<head>
<title>Client Side Validation using JQuery</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$('#psw').click('input',function() {
var error = 0;
var name = $('#name').val();
if (name == '') {
error = 1;
alert('Name cannot be empty');
}
if(error){
return false;
}else{
return true;
}
});
$('#mail').click('input',function() {
var error = 0;
var psw = $('#psw').val();
if (psw.length<=5) {
error = 1;
alert('Password should be atleast 6 in length');
}
if(error){
return false;
}else{
return true;
}
});
$('#contact_submit').click('input',function() {
var error = 0;
var mail = $('#mail').val();
var re = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-
]+)*$/;
var ismail=re.test(mail);
if (ismail) {alert(" Registration Successful");
}
else{
alert("invalid email");
return true;
}
});
});
</script>
</head>
<body>
<p> <label>REGISTRATION FORM</label>
<p> <label> Name: </label>
<input type='text' name='test_field' id='name' />
<p> <label> Password: </label>
<input type='text' name='password' id='psw' />
<p> <label> E-mail: </label>
<input type='text' name='E-mail' id='mail' />
<div id='contact_submit'>
<p><button type='submit'>Submit</button>
</div>
</body>
</html>
Output
Result:
Thus the client side form validation using JQuery has been executed successfully.
Ex. No. 3
SEMANTIC ELEMENTS IN HTML
Date:
Aim:
To write a HTML code for designing a web page using semantic elements.
Explanation:
 Semantic HTML is the use of HTML markup to reinforce the semantics, or

meaning, of the information in web pages and web applications rather than
merely to define its presentation.
 A semantic element clearly describes its meaning to both the browser and the
developer.
 Examples of non-semantic elements: <div> and <span> - Tells nothing about
its content.
 Examples of semantic elements: <form>, <table>, and <article> - Clearly
defines its content.
Tags used:
HTML5 offers new semantic elements to define different parts of a web page:
<article> - Specifies independent, self-contained content.
<aside> - Defines some content aside from the content it is placed in.
<figure> - An image and a caption can be grouped together.
<footer> - Specifies a footer for a document or section.
<header> - Specifies a header for a document or section.
<nav> - Defines a set of navigation links.
<section> - Defines section in a document.

Code:
<html>
<head>
<title>HTML5</title>
<style>
body {
font-family: Verdana,sans-serif;
font-size: 0.9em;
header, footer {
padding: 10px;
color: white;
background-color: black;
color:green;
section {
margin: 5px;
padding: 10px;
background-color: lightgrey;
color:blue;
article {
margin: 5px;
padding: 10px;
background-color: white;
color:red;
nav ul {
padding: 0;
</style>
</head>
<body>
<header>
<h1>Times Now</h1>
</header>
<nav>
<a href="news.html">ChennaiNow</a> |
<a href="sports.html">Sports</a> |
<a href="weather.html">Weather</a> |
</nav>
<section>
<h2>News Section</h2>
<article>
<h2>India</h2>
<p>India will overtake China as the most populous country by 2027: UN

report</p>
</article>
<figure>
<img src="C:\Users\placement\Desktop\population.jpg" alt="Population

Image" style="width:15%">
<figcaption>Fig.1 - Indian Population .</figcaption>
</figure>
<article>
<h2>News Article</h2>
<p>The UN report titled The World Population Prospects 2019: Highlights, the
world's population is getting older due to increasing life expectancy and falling
fertility levels.</p>
</article>
</section>
<footer>
<p>© 2019 Tuesday Times. All rights reserved.</p>
</footer>
</body>
</html>
Output :
Result:
Thus a web page has been designed using semantic elements successfully.
Ex. No. 4
PHP AND MYSQL
Date:
Aim:
To design an application to fetch information from a Mysql database and
display the records in a web page using PHP.
Procedure for Php with Mysql:
1. Create the database and then create table student in mysql with field
sname,regno,m1,m2
(a) Procedure to start xampp
Goto xampp control panel of xampp and start mysql and apache.
Goto cmd prompt in that
(i) Go to C:
(ii)Then cd xampp,cd mysql,cd bin
(iii) mysql -u root
(iv) create database sathyabama
(v) use sathyabama
(vi)create table student(sname varchar,regno int,m1 int,m2 int)
2. create the html file and php file.
3. create a folder in htdocs of xampp and store the above two files.
Procedure to Run:
1.Type http://localhost/folder name in explorer
Content of folder will be displayed
2. Click the html file and enter the data.
HTML CODE
<!DOCTYPE>
<html>
<head>
<script>
function myFunction() {
var m1 = Number(document.getElementById("m1").value);
var m2 = Number(document.getElementById("m2").value);
var avg =(m1+m2)/2;
document.getElementById("avg").value= avg;
}
</script>
</head>
<title>Student Details</title>
<link rel="stylesheet" type="text/css" href="style.css">
<body>
<div id="student1"><h3>Student Details</h3>
<form method="POST" action="http://localhost/dbcon/connect.php">
Rollno <br> <input id="no" name="no"></br></br>
Name <br> <input id="name" name="name"></br></br>
Mark1 <br> <input id="m1" name="m1"></br></br>
Mark2 <br> <input id="m2" name="m2"></br></br>
Average <br> <input id="avg" name="avg" onclick="myFunction()">
</br></br>
<input type="submit" id="submit" value="Submit">
<input type="reset" id="reset" value="Reset">
</form>
</div>
</body>
</html>
CSS CODE
#body-color
{
background-color:"#E6E6FA";
}
#student1
{
margin-top:150px;
margin-bottom:150px;
margin-right:150px;
margin-left:150px;
border:3px solid #a1a1a1;
padding:9px 35px;
background:#E6E6FA;
width:250px;
border-radius:20px;
box-shadow: 7px 7px 6px;
}
#submit{
border-radius:10px;
width:100px;
height:40px;
background:#EEAEAE;
font-weight:bold;
font-size:20px
}
#reset{
border-radius:10px;
width:100px;
height:40px;
background:#EEAEAE;
font-weight:bold;
font-size:20px
}
PHP CODE
<?php
$servername="localhost";
$user="root";
$password="";
$dbname = "stud";
$conn = new mysqli($servername, $user, $password,$dbname);
if ($conn -> connect_error)

{
die("Connection failed: " . $conn->connect_error);
}
echo "Connected successfully";
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$no= $_POST["no"];
$name = $_POST["name"];
$m1 = $_POST["m1"];
$m2 = $_POST["m2"];
$avg =($m1+$m2)/2;
}
$sql = "INSERT INTO st (rollno,name,mark1,mark2,average)

VALUES ('$no','$name','$m1','$m2','$avg')";
if ($conn->query($sql) === TRUE) {

echo "<br/><br/>New record created successfully";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
$conn->close();
?>
Output:
Result:
Thus an application to fetch information from a Mysql database was created and
the records were displayed in a web page using PHP successfully.
Ex. No. 5
JSON
Date:
Aim:
To access a JSON text and display it in the web page.
Explanation:
XAMPP
 XAMPP is a free and open source cross-platform web server solution

stack package developed by Apache.
 It Consists mainly of the Apache HTTP Server, MariaDB database
and interpreters for scripts written in the PHP and Perl programming
languages.
 Everything needed to set up a web server – server application (Apache),
database (MariaDB), and scripting language (PHP) – is included in an
extractable file. XAMPP is also cross-platform, which means it works equally
well on Linux, Mac and Windows.
htdocs:
 It is a folder with "permits public access”.

 The folder can be called in Linux systems: htdocs public_html www. In OSx
(Apple), this folder is called "Sites" in Windows Server called "WWWroot".
Steps:
1. Store the file with .html extension in htdocs

2. Start Apache Tomcat server
3. Open a browser
4. Execute the file with localhost://filename.html
Code:
<html>
<head>
<meta content="text/html; charset=utf-8">
<title>AJAX JSON by Javatpoint</title>
<script type="application/javascript">
function load()
{
var url = "http://date.jsontest.com/"; //use any url that have json data
var request;
if(window.XMLHttpRequest){
request=new XMLHttpRequest(); //for Chrome, mozilla etc
}
else if(window.ActiveXObject){
request=new ActiveXObject("Microsoft.XMLHTTP"); //for IE only
}
request.onreadystatechange = function(){
if (request.readyState == 4 )
{
var jsonObj = JSON.parse(request.responseText); //JSON.parse() returns
JSON object
document.getElementById("date").innerHTML = jsonObj.date;
document.getElementById("time").innerHTML = jsonObj.time;
document.getElementById("seconds").innerHTML= jsonObj.milliseconds_since_epoch;
}
}
request.open("GET", url, true);
request.send();
}
</script>
</head>
<body>
Date : <span id="date"></span><br/>
Time : <span id="time"></span><br/>
Seconds : <span id="seconds"></span><br/>
<br/>
<br/>
<button type="button" onclick="load()">VIEW </button>
</body>
</html>
OUTPUT:
Result:
Thus the content from JSON text file is retrieved and printed in the web page
successfully.
Ex. No. 6
JSON and PHP
Date:
Aim:
To create a record, store in JSON text and print in the web page using PHP.
Explanation:
XAMPP
 XAMPP is a free and open source cross-platform web server solution

stack package developed by Apache.
 It Consists mainly of the Apache HTTP Server, MariaDB database
and interpreters for scripts written in the PHP and Perl programming
languages.
 It is a simple, lightweight Apache distribution that makes it extremely easy for
developers to create a local web server for testing and deployment purposes.
 Everything needed to set up a web server – server application (Apache),
database (MariaDB), and scripting language (PHP) – is included in an
extractable file. XAMPP is also cross-platform, which means it works equally
well on Linux, Mac and Windows.
htdocs:
 It is a folder with "permits public access”.

 The folder can be called in Linux systems: htdocs public_html www. In OSx
(Apple), this folder is called "Sites" in Windows Server called "WWWroot".
PHP:
 PHP is a server scripting language, and a powerful tool for making dynamic
and interactive Web pages.
 PHP is a widely-used, free, and efficient alternative to competitors such as
Microsoft's ASP.
 JSON: JavaScript Object Notation.JSON is a syntax for storing and
exchanging data.JSON is text, written with JavaScript object notation.
Steps:
1. Store the file with .php extension in htdocs

2. Start Apache Tomcat server
3. Open a browser
4. Execute the file with localhost://filename.php
Code:
<?php
// Define recursive function to extract nested values
function printValues($arr) {
global $count;
global $values;
// Check input is an array
if(!is_array($arr)){
die("ERROR: Input is not an array");
}
/* Loop through array, if value is itself an array recursively call the function
else add the value found to the output items array, and increment counter by 1 for
each value found */
foreach($arr as $key=>$value){
if(is_array($value)){
printValues($value);
} else{
$values[] = $value;
$count++;
}
}
// Return total count and values found in array
return array('total' => $count, 'values' => $values);
}
// Assign JSON encoded string to a PHP variable
$json = '{
"Student": {
"name": "Sathyabama",
"Mobile": "1234567809",
"E-Mail": "xyz@gmail.com",
"City": "Chennai",
"Details": {
"Dept": "CSE", "Section": "A", "Gender": "Female"
}
}
}';
// Decode JSON data into PHP associative array format
echo "JSON and PHP";
echo"<br> <br>";
$arr = json_decode($json, true);
// Call the function and print all the values
echo "Contents of JSON Object";
echo"<br> <br>";
$result = printValues($arr);
echo implode("<br>", $result["values"]);

echo "<h3>" . $result["total"] . " value(s) found: </h3>";
echo "<hr>";
// Print a single value

echo "Name : ".$arr["Student"]["name"] . "<br>";
echo "Mobile : ".$arr["Student"]["Mobile"]. "<br>";
echo "Email : ".$arr["Student"]["E-Mail"]. "<br>";
echo "Dept : ".$arr["Student"]["Details"]["Dept"] . "<br>";
echo "Section : ".$arr["Student"]["Details"]["Section"] . "<br>";
echo "Gender : ".$arr["Student"]["Details"]["Gender"] . "<br>";
?>
Result:
Thus record has been created and stored in JSON text and printed in the web page
using PHP successfully.
Ex. No. 7
AJAX and DATABASE
Date:
Aim:
To design an application to fetch information from a database with AJAX.
Explanation:
AJAX = Asynchronous JavaScript And XML.
AJAX is not a programming language.
AJAX just uses a combination of:
 A browser built-in XMLHttpRequest object (to request data from a web server)
 JavaScript and HTML DOM (to display or use the data)
 The XMLHttpRequest object is used to exchange data with a server.

 To send a request to a server, we use the open() and send() methods of the
XMLHttpRequest object:
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
Methods:
onreadystatechange Defines a function to be called when the readyState property

changes
readyState Holds the status of the XMLHttpRequest.

0: request not initialized
1: server connection established
2: request received
3: processing request
4: request finished and response is ready
responseText Returns the response data as a string
responseXML Returns the response data as XML data
status Returns the status-number of a request

200: "OK"
403: "Forbidden"
404: "Not Found"
statusText Returns the status-text
For a complete list go to(e.g.
the "OK" or "Not Found")
Http Messages Reference
Steps:
1. Create files cd_catalog.xml and db.html in htdocs folder in Xampp control

panel
2. Start Tomcat in Xampp tool
3. In a browser, execute “ http://localhost/db.html”
Code:
“cd_catalog.xml”
<?xml version="1.0" encoding="UTF-8"?>

<CATALOG>
<BOOK>
<TITLE>Let us C</TITLE>
<ARTIST>Yashvant Kanethkar</ARTIST>
<COUNTRY>India</COUNTRY>
<COMPANY>BPB</COMPANY>
<PRICE>273</PRICE>
<YEAR>2016</YEAR>
</BOOK>
<BOOK>
<TITLE>Web Technologies</TITLE>
<ARTIST>Kogent</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>DreamTech</COMPANY>
<PRICE>599</PRICE>
<YEAR>2014</YEAR>
</BOOK>
<BOOK>
<TITLE>Compiler Design</TITLE>
<ARTIST>Aho Ullman</ARTIST>
<COUNTRY>India</COUNTRY>
<COMPANY>Narosa</COMPANY>
<PRICE>440</PRICE>
<YEAR>1995</YEAR>
</BOOK>
</CATALOG>
“Db.html”
<!DOCTYPE html>
<html>
<style>
table,th,td {
border : 1px solid black;
border-collapse: collapse;
}
th,td {
padding: 5px;
}
</style>
<body>
<h2> Asynchronous JavaScript And XML </h2>
<button type="button" onclick="loadDoc()">Get my Book collection</button>
<br><br>
<table id="demo"></table>
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("GET", "cd_catalog.xml", true);
xhttp.send();
}
function myFunction(xml) {
var i;
var xmlDoc = xml.responseXML;
var table="<tr><th>Artist</th><th>Title</th></tr>";
var x = xmlDoc.getElementsByTagName("BOOK");
for (i = 0; i <x.length; i++) {
table += "<tr><td>" +
x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
"</td></tr>";
}
document.getElementById("demo").innerHTML = table;
}
</script>
</body>
</html>
Output:
Result:
Thus an application has been developed to fetch information from the database
using AJAX successfully.

Ss D

Uploaded by

Document Information

Original Title

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

Ss D

Uploaded by

Copyright:

Available Formats

DISTRIBUTED COMPUTING LAB

Sl.No. Name of the Experiment

Simple Web Page Creation Using Frames, List,

2. Client Side Form Validation using Jquery.

3. Semantic Elements in HTML

4. PHP and MySQL

6 JSON and PHP

7. AJAX and Database

<title> - it specifies a title for the document.

<tr> - Each table row is defined with the <tr> tag

<th> - A table header is defined with the <th> tag.

<td> - A table data/cell is defined with the <td> tag.

<li> - it defines the list items.

<ol> - the <ol> (ordered/numbered list) tag.

<a> - HTML links are defined with the <a> tag.

<br> - it is an empty element without a closing tag.

<frame> -it defines one particular window (frame) within a <frameset>.

Thus the webpage has been created successfully.

To perform client side validation using JQuery

 Semantic HTML is the use of HTML markup to reinforce the semantics, or

<article> - Specifies independent, self-contained content.

<figure> - An image and a caption can be grouped together.

<footer> - Specifies a footer for a document or section.

<header> - Specifies a header for a document or section.

<nav> - Defines a set of navigation links.

<section> - Defines section in a document.

<p>India will overtake China as the most populous country by 2027: UN

<img src="C:\Users\placement\Desktop\population.jpg" alt="Population

<figcaption>Fig.1 - Indian Population .</figcaption>

<p>&copy; 2019 Tuesday Times. All rights reserved.</p>

Procedure for Php with Mysql:

(a) Procedure to start xampp

Goto cmd prompt in that

(ii)Then cd xampp,cd mysql,cd bin

(iii) mysql -u root

(iv) create database sathyabama

(v) use sathyabama

(vi)create table student(sname varchar,regno int,m1 int,m2 int)

2. create the html file and php file.

$conn = new mysqli($servername, $user, $password,$dbname);

if ($conn -> connect_error)

$sql = "INSERT INTO st (rollno,name,mark1,mark2,average)

if ($conn->query($sql) === TRUE) {

 XAMPP is a free and open source cross-platform web server solution

 It is a folder with "permits public access”.

1. Store the file with .html extension in htdocs

 XAMPP is a free and open source cross-platform web server solution

 It is a folder with "permits public access”.

1. Store the file with .php extension in htdocs

echo implode("<br>", $result["values"]);

// Print a single value

To design an application to fetch information from a database with AJAX.

AJAX = Asynchronous JavaScript And XML.

AJAX is not a programming language.

AJAX just uses a combination of:

 The XMLHttpRequest object is used to exchange data with a server.

onreadystatechange Defines a function to be called when the readyState property

readyState Holds the status of the XMLHttpRequest.

responseText Returns the response data as a string

responseXML Returns the response data as XML data

status Returns the status-number of a request

1. Create files cd_catalog.xml and db.html in htdocs folder in Xampp control

<?xml version="1.0" encoding="UTF-8"?>

<p>© 2019 Tuesday Times. All rights reserved.</p>