Scribd
Upload
13 views48 pages

U20cscj09 Implab Record

The document is a laboratory record for a Bachelor of Technology course in Internet and Mobile Programming at Bharath Institute of Science & Technology. It includes various programming exercises and projects, such as creating web pages using HTML, CSS, and XML, as well as implementing JavaScript for validation and AJAX functionalities. Each exercise outlines the aim, algorithm, and implementation details, demonstrating the practical skills acquired by the students during their coursework.

Uploaded by

pavankumar22239063
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
13 views48 pages

U20cscj09 Implab Record

The document is a laboratory record for a Bachelor of Technology course in Internet and Mobile Programming at Bharath Institute of Science & Technology. It includes various programming exercises and projects, such as creating web pages using HTML, CSS, and XML, as well as implementing JavaScript for validation and AJAX functionalities. Each exercise outlines the aim, algorithm, and implementation details, demonstrating the practical skills acquired by the students during their coursework.

Uploaded by

pavankumar22239063
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 48

BHARATH INSTITUTE OF SCIENCE & TECHNOLOGY

173,Agaram Road,Selaiyur,Chennai-600073,TamilNadu,India.

SCHOOL OF COMPUTING
Department of Computer Science & Engineering

BACHELOR OF TECHNOLOGY

COURSE CODE: U20CSCJ09

Internet and Mobile Programming

LABORATORY RECORD

Name of the Student:

Batch: 2020-2024 Year: III Term/Semester: VI Section:

Register No:

JUNE 2023
BHARATH INSTITUTE OF SCIENCE & TECHNOLOGY
173, Agaram Road,Selaiyur,Chennai-600073,TamilNadu,India.

Name:

Programme: Branch:

Year: Semester:

Register No:

Certified that this is the bonafide record of work done by the above student in the

..…………………………………………………………………………………………………………laboratory during the

…………………………………………. Semester in the Academic Year 2022-2023

Faculty In-charge Head of Department

Submitted for the practical Examination held on……………………………

Internal Examiner External Examiner


INDEX

S.NO DATE NAME OF THE PROGRAM PAGE NO SIGNATURE

Create a web page with the following using HTML


a. To embed a map in a web page
b. To fix the hot spots in that map
1 c. c. Show all the related information when the hot
spots are clicked

Create a web page with the following.


a. Cascading style sheets.
b. Embedded style sheets.
2 c. Inline style sheets. Use our college information for
the web pages.

Create and save an XML Schema document at the server,


which contains 10 users Information.
3

Write a Program, which takes user Id as an input and returns


the User details by taking the user information from the
4 XML document.

Validate the Registration, user login, user profile and


payment by credit card pages using JavaScript.
5

To Create DHTML Event Handling Program


a. Change Background Color On Mouse Click
6 b. Change The Font Color On Mouse Over
c. Change The Text On Mouse Double Click

To create a Simple Calculator program using PHP.


7

Explore the following application in AJAX:


a. To retrieve data from an TXT file.
8 b. To retrieve data from an TXT file.
c. To perform Get. and Post request

To develop a Simple Android Application that uses GUI


9 components, Font and Colors.
Write an application that draws Basic Graphical Primitives
10 on the screen.
Ex.No:1
Date: To Create a Web page using HTML tags

Aim:

To create a web page with the following using HTML


a. To embed a map in a web page.
b. To fix the hot spots in that map.
c. Show all the related information when the hot spots are clicked.

Algorithm:

1. Start the program.


2. Get the india map image and link it to the package.
3. Fix the hotspots in that image.
4. Map the reference of the hotspots in the image.
5. Mention the derived link.
6.Click the link to get the desired image.
7. Stop the program.

Implementation:

Main.html
<html>
<head>
<BODY bgcolor="#gop6876cgdt5564ss">
<img src ="indiamap.jpeg" usemap="indiamap" />
<map name=indiamap>
<AREA SHAPE="rect" COORDS="190,477,251,562"
HREF="tamilnadu.html"target="tamilnadu.html" ><AREA SHAPE="rect"
COORDS="158,477,195,564" HREF="kerala.html"target="kerala.html" >
<AREA SHAPE="rect" COORDS="217,378,238,472,350,361"
HREF="andhra.html"target="andhra.html" >
<AREA SHAPE="rect" COORDS="160,474,212,401,189,436"
HREF="karnataka.html"target="karnataka.html" >
<AREA SHAPE="rect" COORDS="137,382,219,311,129,331"
HREF="maharashtra.html"target="maharashtra.html" >
<AREA SHAPE="rect" COORDS="392,319,334,304,309,362,"
HREF="orissa.html"target="orissa.html" >
<AREA SHAPE="rect" COORDS="232,244,238,306,168,283"
HREF="madhayapradesh.html"target="madhayapradesh.html" >
</map></head></html>

Tamiladu.html
<html>
<head>
<body bgcolor="#fggbhjgdhg"/>
<center>
<h2>it is a tamilnadu,here maximum tamilan living and capital of tamilnadu is</h2>
<h1>chennai<h1>
</center></head>
<html>

Kerala.html
<html>
<head>
<body bgcolor="#7674dshddf"/>
<center>it is a kerala,here maximum malaiyalees living and capital of kerala is
<h1>Thiruvananthapuram</h1>
</center>
</head>
</html>

Karnataka.html
<html>
<head>
<body bgcolor="#7674dshddf"/>
<center>it is a karnataka,here maximum kannadam living and capital of karnataka is
<h1>Bangalore</h1>
</center>
</head>
</html>

Madhyapradesh.html
<html>
<head>
<body bgcolor="blue"/>
<center>it is a madhyapradesh,here maximum maratiyam living and capital of madhyapradeshis
<h1>BHOPAL</h1>
</center>
</head>
</html>

Maharastra.html
<html>
<head>
<body bgcolor="blue"/>
<center>it is a maharashtra,here maximum maratiyam living and capital of maharashtra is
<h1>Mumbai</h1>
</center>
</head>
</html>
Orissa.html
<html>
<head>
<body bgcolor="blue"/>
<center>
<h2>it is a orissa,here maximum oreya living and capital of orissa is</h2>
<h1>Bhubaneswar</h1>
</center>
</head>
</html>

Output:
Result:
Thus the Webpage has been created by using HTML language and verified Successfully.
Ex.No:2
Date: Create a Web Page Using HTML with CSS

Aim:

To write a webpage to create all types of cascading style sheets .

Algorithm:

1. Start the program.


2. Create a web page with framesets consisting two frames.
3. In the first frame include the links.
4. In the second frameset display the webpage of the link.
5. Create an external style sheets.
6. Create an inline and internal style and make a link to the external style sheet.
7. Stop the program.

Implementation:

Main.html
<html>
<head>
<title>Cascading Style Sheets</title>
</head>
<body alink="blue" vlink="brown">
<h1><u><b><font face="Monotype corsiva" color="red">
Different types of Cascading Style Sheets</font></b></u></h1>
<br />
<font face="Arial"size="6">
<a href ="inline.html" style="text-decoration :none;"> 1. Inline Style Sheet</a><br />
<a href ="embedded.html" style="text-decoration :none;"> 2. Embeded Style
Sheet</a><br />
<a href ="external.html" style="text-decoration :none;"> 3. External Style
Sheet</a><br />
<a href ="import.html" style="text-decoration :none;"> 4. Imported Style
Sheet</a><br /></font>
</body>
</html>

Inline.html
<html>
<head>
<title>Inline Style Sheet</title>
</head>
<body>
<ol class="decimal">
<h1 style="font-family :Monotype Corsiva ;background-color:antiquewhite ;"><li>
Inline Style Sheet</li></h1>
<h3>
<p style="text-indent :30pt;color:blue;font-family :arial;">
Inine Style is the style attached to one specific element.
The style is specified directly in the start tag as a value of the style attribute well apply
exclusively to this specific element occurrence.
</p></h3>
</ol>
</body>
</html>

Embedded.html
<html>
<head>
<title>Embeded Style Sheet</title>
<style type="text/css">
ol{list-style-type:decimal}
h1{text-align: left; background:antiquewhite;font-family:monotype corsiva;color:red}
h3{text-align: right; font-family:arial;color:blue}
</style>
</head>
<body>
<ol class="lroman"><h1>
<li>Embedded style sheet</li></h1>
<br />
Embedded style is the style attached to one specific document.
The information is specified as a content of the style element
inside the head element and wil apply to the entire documents.
</h3></ol>
</body>
</html>

External.html
<html>
<head>
<title>External Style Sheet</title>
<link rel=Stylesheet href="style1.css" type="text/css" />
</head>
<body>
<h1>1. External Style Sheet</h1><br />
<h3>
An external style sheet is a template documents/files
containing style info which can be linked with any number
of the documents. This is a very convenient way of formating
the entire site as well as restyling it by editing just one file</h3>
</body>
</html>

Import.html
<html>
<head><title>Imported Style Sheet</title>
<link rel= stylesheet href="style2.css" type="text/css">
</head>
<body>
<h1>1. Imported Style Sheet</h1>
<h3> Imported style sheet is a shet that can be imported to another sheet.
This alignes exacting one main sheet containing declarations that apply to
the whle site and partial sheets containing declarations that apply to specific
elements.</h3>
</body>
</html>

Style1.css
ol{list-style-type:decimal}
h1{text-align: left; background:antiquewhite;font-family:monotype corsiva;color:red}
h3{text-align: right; font-family:arial;color:blue}

Style2.css
ol{list-style-type:decimal}
h1{text-align: left; background:antiquewhite;font-family:monotype corsiva;color:red}
h3{text-align: right; font-family:times;color:blue}

Output:
Result:
Thus the web page is created using all styles of cascading style sheets successfully and the
output is also verified.
Ex.No:3
Date: Create a User Information Using XML Document

Aim:

To Create and save an XML document at the server, which contains 10 users Information.

Algorithm:

1. start the program


2. create a root tag student.
3. create a parent tag person details
4. Get the details of ten students such as id, name, city, Branch, year
5. save the file
6. Run the XML document
7. Stop the program.

Implementation:
Student.xml

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


<Student>
<PersonDetails>
<id>101</id>
<name>Anand</name>
<city>Madurai</city>
<Branch>CSE</Branch>
<Year>I</Year>
</PersonDetails>
<PersonDetails>
<id>102</id>
<name>Anu</name>
<city>Konam</city>
<Branch>CSE</Branch>
<Year>II</Year>
</PersonDetails>
<PersonDetails>
<id>103</id>
<name>Archana</name>
<city>Madurai</city>
<Branch>CSE</Branch>
<Year>I</Year>
</PersonDetails>
<PersonDetails>
<id>104</id>
<name>Monica</name>
<city>Nellai</city>
<Branch>CSE</Branch>
<Year>III</Year>
</PersonDetails>
<PersonDetails>
<id>105</id>
<name>Sundari</name>
<city>Salem</city>
<Branch>CSE</Branch>
<Year>III</Year>
</PersonDetails>
<PersonDetails>
<id>106</id>
<name>Kannan</name>
<city>Coimbatore</city>
<Branch>CSE</Branch>
<Year>III</Year>
</PersonDetails>
<PersonDetails>
<id>107</id>
<name>Naresh</name>
<city>Tiruchirappalli</city>
<Branch>CSE</Branch>
<Year>III</Year>
</PersonDetails>
<PersonDetails>
<id>108</id>
<name>Mani</name>
<city>Chennai</city>
<Branch>CSE</Branch>
<Year>III</Year>
</PersonDetails>
<PersonDetails>
<id>109</id>
<name>Gokul</name>
<city>Madurai</city>
<Branch>CSE</Branch>
<Year>III</Year>
</PersonDetails>
<PersonDetails>
<id>110</id>
<name>Joel</name>
<city>Chennai</city>
<Branch>CSE</Branch>
<Year>III</Year>
</PersonDetails>
</Student>
Output:

Result :

Thus the XML document has been created at the server side which contains 10 users
information.
Ex.No:4
Create a web page to fetch a student details from XML Document
Date:

Aim :

To create a Program, which takes user Id as an input and returns the User details by taking the user
information from the XML document.

Algorithm:

1. Create a XML document.


2. Get user id through the input tag.
3. Validate User Id on submit with JavaScript.
4. If User id Exits it displays details of student or alert to “enter Valid details”.
5. Save the file and run the program.
6. Stop the program.

Implementation:

Login.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script type="text/javascript">
function Display()
{
if (window.XMLHttpRequest)
{
xmlhttp = new XMLHttpRequest();
}
xmlhttp.open("GET", "StudentDetails.xml", false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
var x = xmlDoc.getElementsByTagName("PersonDetails");
var key_id = document.getElementById("key").value;
for (i = 0; i < x.length; i++)
{
if (key_id.match(x[i].getElementsByTagName("id")[0].childNodes[0].nodeValue))
j = i;
}
document.write("<h3>User Details are...</h3><hr> Registeration ID=");
document.write(x[j].getElementsByTagName("id")[0].childNodes[0].nodeValue);
document.write("</br> Name=");
document.write(x[j].getElementsByTagName("name")[0].childNodes[0].nodeValue);
document.write("</br> City=");
document.write(x[j].getElementsByTagName("city")[0].childNodes[0].nodeValue);
document.write("</br> Branch=");
document.write(x[j].getElementsByTagName("Branch")[0].childNodes[0].nodeValue);
document.write("</br> Year=");
document.write(x[j].getElementsByTagName("Year")[0].childNodes[0].nodeValue);
document.write("</br> ");
}
</script>
<form name='myform'>
Enter ID:
<input type='text' id='key' /><br />
<input type='button' value='submit' onclick='Display()' />
</form>
</body>
</html>

Output:
Result:
Thus the program has been executed which takes user Id as an input and returns the User
details by taking the user information from the XML document.
Ex.No:5 To Validate the credit card Pages using Java Script
Date:

Aim:
Create a webpage to validate the Registration, user login, user profile and payment by
credit card pages using JavaScript.

Algorithm:

1. Start the Program.


2. Create JavaScript functions (one for each input field whose value is to validate) which check
whether a value submitted by user passes the validation.
3. All those functions are called from another function.
4. It sets the focus to the input field until the user supplies a valid value.
5. When the user does so, they may proceed and can supply value to the next available field.
6. The later JavaScript function created is called on the on submit event of the form
7. Stop the program.

Implementation:

Main.html
<html>
<frameset rows="25%,*">
<frame src="top.html" name="top" scrolling ="no" frameborder ="0">
<frameset cols="25%,75%">
<frame src="left.html" name="left" scrolling ="no" frameborder ="0">
<frame src="right.html" name="right" scrolling ="auto" frameborder ="0">
</frameset>
</frameset>
</html>

top.html
<html>
<body bgcolor="pink">
<br><br>
<marquee><h1 align=”center”><b><u>ONLINE BOOK STORAGE</u></b></h1></marquee>
</body>
</html>

Left.html
<html>
<body bgcolor="pink">
<h3>
<ul>
<li><a href="login.html" target="right"><font color="black"> LOGIN</font></a></li><br><br>
<li><a href="regform.html" target="right"><font color="black"> USER
PROFILE</font></a></li><br><br>
<li><a href="books.html" target="right"><font color="black"> BOOKS
CATALOG</font></a></li><br><br>
<li><a href="shop.html" target="right"><font color="black">
SHOPPINGCART</font></a></li><br><br>
<li><a href="pay.html" target="right"><font color="black"> PAYMENT</font></a></li><br><br>
<br><br>
</ul>
</body>
</html>

right.html

<html>
<body>
<br><br><br><br><br>
<h2 align="center">
<b><p> welcome to online book storage. Press login if you are having id otherwise press
registration.
</p></b></h2>
</body></html>

login.html
html>
<body>
<script>
function validateform(){
var name=document.myform.name.value;
var password=document.myform.password.value;
if (name==null || name==""){
alert("Name can't be blank");
return false;
}else if(password.length<6){
alert("Password must be at least 6 characters long.");
return false;
}
}
</script>
<body>
<form name="myform" method="post"
action="http://www.javatpoint.com/javascriptpages/valid.jsp" onsubmit="return validateform()" >
Name: <input type="text" name="name"><br/>
Password: <input type="password" name="password"><br/>
<input type="submit" value="register">
</form>
</body>
</html>

regform.html
<html>
<head>
<title>
Example of required attribute with input element
</title>
<style>
div
{
padding: 10px 0;
}
</style>
<head>
<body>
<form>
<div>
<label>Name</label>
<input type="text" placeholder="Enter Name" name="name" required>
</div>
<div>
<label> E-mail </label>
<input type="email" placeholder="Enter email ID" name="email" required>
</div>
<div>
<label> Mobile No. </label>
<input type="text" placeholder="Enter Your Mobile No." name="mobileno" required>
</div>
<div>
<label>Password</label>
<input type="password" placeholder="Enter Password" name="psw" required>
<br>
</div>
<button type="submit" VALUE="SUBMIT"> SUBMIT </button>
</form>
</body>
</html>

books.html

<!DOCTYPE html>
<html>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 5px;
}
</style>
<body>
<button type="button" onclick="loadXMLDoc()">Get my BOOK collection</button>
<br><br>
<table id="demo"></table>
<script>
function loadXMLDoc() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xmlhttp.open("GET", "book_catalog.xml", true);
xmlhttp.send();
}
function myFunction(xml) {
var i;
var xmlDoc = xml.responseXML;
var table = "<tr><th>AUTHOR</th><th>TITLE</th></tr></tr>";
var x = xmlDoc.getElementsByTagName("CD");

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


table += "<tr><td>" +
x[i].getElementsByTagName("AUTHOR")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
"</td></tr>";

}
document.getElementById("demo").innerHTML = table;
}
</script>
</body>
</html>

Book_catalog.xml

<CATALOG>
<CD>
<TITLE>The Complete Reference JAVA</TITLE>
<AUTHOR>Herbert Schildt</AUTHOR>
<PRICE>10.90</PRICE>
</CD>
<CD>
<TITLE>Algorithms to Live By</TITLE>
<AUTHOR>Brian Christian</AUTHOR>
<PRICE>9.90</PRICE>
</CD>
<CD>
<TITLE>Structure and Interpretation of Computer Programs</TITLE>
<AUTHOR>Gerald Jay Sussman</AUTHOR>
<PRICE>9.90</PRICE>
</CD>
<CD>
<TITLE>Clean Code: A Handbook of Agile Software</TITLE>
<AUTHOR>Robert C. Martin</AUTHOR>
<PRICE>10.20</PRICE>
</CD>
<CD>
<TITLE>Code Complete: A Practical Handbook of Software Construction</TITLE>
<AUTHOR>Thomas. H. Cormen</AUTHOR>
<PRICE>9.90</PRICE>
</CD>
<CD>
<TITLE>Introduction to Algorithm</TITLE>
<AUTHOR>Bee Gees</AUTHOR>
<PRICE>10.90</PRICE>
</CD>
<CD>
<TITLE>The C Programming Language</TITLE>
<AUTHOR>Brian W. Kernighan</AUTHOR>
<PRICE>8.10</PRICE>
</CD>
<CD>
<TITLE>The Soul of a New Machine </TITLE>
<AUTHOR>Tracy Kidder</AUTHOR>
<PRICE>8.50</PRICE>
</CD>
<CD>
<TITLE>Design Patterns: Elements of Reusable objects Or iented Software </TITLE>
<AUTHOR>Erich Gamma, John Vlissides, Richard Helm</AUTHOR>
<PRICE>10.80</PRICE>
</CD>
<CD>
<TITLE>The Computer Networking: A Top-Down Approach</TITLE>
<AUTHOR>James F. Kurose and Keith W. Ross</AUTHOR>
<PRICE>8.70</PRICE>
</CD>
<CD>
<TITLE>The Artificial Intelligence: A Modern Approach</TITLE>
<AUTHOR>Stuart Russell</AUTHOR>
<PRICE>10.90</PRICE>
</CD>
</CATALOG>

Shop.html
<h1>Shopping Cart</h1>
</script>
<div class="shopping-cart">
<div class="column-labels">
<label class="product-image">Image</label>
<label class="product-details">Product</label>
<label class="product-price">Price</label>
<label class="product-quantity">Quantity</label>
<label class="product-removal">Remove</label>
<label class="product-line-price">Total</label>
</div>
<div class="product">
<div class="product-image">
<img src="/images.jpg" alt="Cloud computing" width="240" height="300">
</div>
<div class="product-details">
<div class="product-title">Cloud Computing</div>
<p class="product-description">The best book for Cloud Computing</p>
</div>
<div class="product-price">BOOK PRICE 181.99</div>
<div class="product-quantity">
<input type="number" value="2" min="1">
</div>
<div class="product-line-price">MRP 225.98</div>
</div>
<div class="product">
<div class="product-image">
<img src="/image.jpg" alt="Cloud computing" width="240" height="300">
</div>
<div class="product-details">
<div class="product-title">C Programmingd</div>
<p class="product-description">Book for C programming.</p>
</div>
<div class="product-price">BOOK PRICE245.99</div>
<div class="product-quantity">
<input type="number" value="1" min="1">
</div>
<div class="product-line-price">MRP 265.99</div>
</div>
<div class="product-add">
<button onclick="myFunction()">Add to Cart</button>
<script>
function myFunction() {
alert("Items added to cart");
}
</script>
</div>

Pay.html
<h1>Shopping Cart</h1>
</script>
<div class="shopping-cart">
<div class="column-labels">
<label class="product-image">Image</label>
<label class="product-details">Product</label>
<label class="product-price">Price</label>
<label class="product-quantity">Quantity</label>
<label class="product-removal">Remove</label>
<label class="product-line-price">Total</label>
</div>
<div class="product">
<div class="product-image">
<img src="/images.jpg" alt="Cloud computing" width="240" height="300">
</div>
<div class="product-details">
<div class="product-title">Cloud Computing</div>
<p class="product-description">The best book for Cloud Computing</p>
</div>
<div class="product-price">BOOK PRICE 181.99</div>
<div class="product-quantity">
<input type="number" value="2" min="1">
</div>
<div class="product-line-price">MRP 225.98</div>
</div>
<div class="product">
<div class="product-image">
<img src="/image.jpg" alt="Cloud computing" width="240" height="300">
</div>
<div class="product-details">
<div class="product-title">C Programmingd</div>
<p class="product-description">Book for C programming.</p>
</div>
<div class="product-price">BOOK PRICE245.99</div>
<div class="product-quantity">
<input type="number" value="1" min="1">
</div>
<div class="product-line-price">MRP 265.99</div>
</div>
<div class="product-add">
<button onclick="myFunction()">Add to Cart</button>
<script>
function myFunction() {
alert("Items added to cart");
}
</script>
</div>
Output:
Result:
Thus the webpage has been created to validate the Registration, user login, user profile and
payment by credit card pages using JavaScript.
Ex.No:6 To create DHTML Event Handling
Date:

Aim :

To Create Dhtml Event Handling Program


 Change Background Color On Mouse Click
 Change The Font Color On Mouse Over
 Change The Text On Mouse Double Click

Algorihm:

1. Start the Program.


2. Create JavaScript functions to change the background color on button click.
3. Create JavaScript functions to change the font color to red on mouse over.
4. Create JavaScript functions to change the text on mouse on double click.
5. Save the program as .html and execute the same in the browser.
6. Stop the program.

Implementation:

<!DOCTYPE html>
<html>
<head>
<title>Mouse Events</title>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "This is the Output of ondblclick Mouse Event";
document.getElementById("demo").style.color = "red";
document.getElementById("demo").style.fontWeight = 'bold'
}
</script>
</head>
<body>
<center>
<h2>Select the Background Color</h2>
<button onclick="document.body.style.backgroundColor='violet'">Violet</button>
<button onclick="document.body.style.backgroundColor='yellow'">Yellow</button>
<button onclick="document.body.style.backgroundColor='skyblue'">Skyblue</button>
<button onclick="document.body.style.backgroundColor='white'">White</button>
<br><br>
<span onmouseover="style.color='red';style.fontWeight = 'bold'" onmouseout="style.color='black';
style.fontWeight = 'normal'">Mouse over this text</span>
<p ondblclick="myFunction()">Double click on this paragraph line to trigger a ondblclick Mouse
Event</p>
<p id="demo"></p>
</center>
</body>
</html>
Output:
Result:
Thus the Dhtml Event Handling Program, To Change Background Color On Mouse
Click,To Change The Font Color On Mouse Over and To Change The Text On Mouse Double Click
has been Created and executed.
Ex.No:7 To create a Simple Calculator program using PHP
Date:

Aim:

To create a Simple Calculator program using PHP.

Algorithm :

1. start the program.


2. Given the first number & Second number
3. we have given a operator’s add, sub ,mul, div
4. Then we have to give the input type & submit button to get the answer
5. when we are clicking the submit button we can get the result
6. stop the program.

Implementation:

<!DOCTYPE html>
<head>
<title>Simple Calculator Program in PHP - Tutorials Class</title>
</head>
<?php
$first_num = $_POST['first_num'];
$second_num = $_POST['second_num'];
$operator = $_POST['operator'];
$result = '';
if (is_numeric($first_num) && is_numeric($second_num)) {
switch ($operator) {
case "Add":
$result = $first_num + $second_num;
break;
case "Subtract":
$result = $first_num - $second_num;
break;
case "Multiply":
$result = $first_num * $second_num;
break;
case "Divide":
$result = $first_num / $second_num;
}
}

?>

<body>
<div id="page-wrap">
<h1>PHP - Simple Calculator Program</h1>
<form action="" method="post" id="quiz-form">
<p>
<input type="number" name="first_num" id="first_num" required="required" value="<?php echo
$first_num; ?>" /><b>First Number</b>
</p>
<p>
<input type="number" name="second_num" id="second_num" required="required" value="<?php
echo $second_num; ?>" /><b>Second Number</b>
</p>
<p>
<input readonly="readonly" name="result" value="<?php echo $result; ?>"><b>Result</b>
</p>
<input type="submit" name="operator" value="Add" />
<input type="submit" name="operator" value="Subtract" />
<input type="submit" name="operator" value="Multiply" />
<input type="submit" name="operator" value="Divide" />
</form>
</div>
</body>
</html>

Output :

Result :
Thus the Simple Calculator program using PHP is executed & verified successfully.
Ex.No:8 To Explore the application using AJAX
Date:

Aim:
To Explore the application for Searching in real time with live searches, Getting the answer
with auto complete using AJAX.

Algorithm:
1. Start the program.
2. Create an XMLHttpRequest to retrieve data from an TXT file.
3. Create an XMLHttpRequest to retrieve data from an XML file.
4. Both XMLHttpRequest to retrieve data from an TXT , XML file are sending the
request to server.
5. TXT, XML File are waiting the request After getting the
request it will be started.
6. Stop the program.

Implementation:

a.Create an XMLHttpRequest to retrieve data from an TXT file.

Ajaxtext.html

<!DOCTYPE html>
<html>
<body>
<div id="demo">
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>
<script>
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("demo").innerHTML =
this.responseText;
}
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
}
</script>
</body>
</html>

Ajaz_infor.txt

AJAX

AJAX is not a programming language.


AJAX is a technique for accessing web servers from a web page.

AJAX stands for Asynchronous JavaScript And XML.


b.Create an XMLHttpRequest to retrieve data from an XML file.
Ajaxphp.html

<!DOCTYPE html>
<html>
<body>
<h2>Retrieve data from XML file</h2>
<p><b>Status:</b><span id="A1"></span></p>
<p><b>Status text:</b><span id="A2"></span></p>
<p><b>Response:</b><span id="A3"></span></p>
<button onclick="loadDoc('book.xml')">Get XML data</button>
<script>
function loadDoc(url) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById('A1').innerHTML = xhttp.status;
document.getElementById('A2').innerHTML = xhttp.statusText;
document.getElementById('A3').innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", url, true);
xhttp.send();
}
</script>
</body>
</html>

Book.xml

<?xml version="1.0" encoding="UTF-8"?> <?xmlstylesheet type="text/xsl" href="example.xsl"?>


<library_details>
<library>
<Bookname>Web Technology</Bookname>
<Author>Robet Roy</Author>
<Publisher>Technical</Publisher>
<Edition>7th</Edition>
<Price>650</Price>
</library>
<library>
<Bookname>Software Engineering</Bookname>
<Author>Ugrasen Suman</Author>
<Publisher>Technical</Publisher>
<Edition>8th</Edition>
<Price>450</Price>
</library>
<library>
<library>
<Bookname>Computer Networks</Bookname>
<Author>Forouzan</Author>
<Publisher>Technical</Publisher>
<Edition>7th</Edition>
<Price>500</Price>
</library>
<library>
</library_details>
c. Create a javascrip in Ajax to send and retrieve the request and response

Ajax_get.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Ajax POST</title>
<script>
function postComment() {
// Creating the XMLHttpRequest object
var request = new XMLHttpRequest();

// Instantiating the request object


request.open("POST", "confirmation.php", true);

// Defining event listener for readystatechange event


request.onreadystatechange = function() {
// Check if the request is compete and was successful
if(this.readyState === 4 && this.status === 200) {
// Inserting the response from server into an HTML element
document.getElementById("result").innerHTML = this.responseText;
}
};
// Retrieving the form data
var myForm = document.getElementById("myForm");
var formData = new FormData(myForm);
// Sending the request to the server
request.send(formData);
}
</script>
</head>
<body>
<form id="myForm">
<label>Name:</label>
<div><input type="text" name="name"></div>
<br>
<label>Comment:</label>
<div><textarea name="comment"></textarea></div>
<p><button type="button" onclick="postComment()">Post Comment</button></p>
</form>
<div id="result">
<p>Content of the result DIV box will be replaced by the server response</p>
</div>
</body>
</html>

confirmation.php

<?php
if($_SERVER["REQUEST_METHOD"] == "POST") {
$name = htmlspecialchars(trim($_POST["name"]));
$comment = htmlspecialchars(trim($_POST["comment"]));

// Check if form fields values are empty


if(!empty($name) && !empty($comment)) {
echo "<p>Hi, <b>$name</b>. Your comment has been received successfully.<p>";
echo "<p>Here's the comment that you've entered: <b>$comment</b></p>";
} else {
echo "<p>Please fill all the fields in the form!</p>";
}
} else {
echo "<p>Something went wrong. Please try again.</p>";
}
?>
Output:

Result:
Thus the XMLHttpRequest to retrieve data from an TXT file & XML file is executed &
verified successfully.
Ex.No:9 Create a android program to insert android Logo image and print
Date: “Hello World” below the image.

Aim:
To create an android program to load an image and print “Welcome to Android
Programming”.

Algorithm:

1. Open android flamingo and create new project.


2. Select our project in the project explorer.
3. select the required layout.
4. Type the code for activity_main.xml
5. Choose the relative layout and change its properties.
6. Screen layout can be viewed by clicking graphics layout tab.
7. Override On Create() function
8. Create Image view and initialize its using id of some components used in
the xml program.
9. Save the program and Run the program.
10. Output can be viewed in the android emulator.

Implementation:

<ImageView
android:id="@+id/Android_Logo"
android:layout_width="240dp"
android:layout_height="236dp"
android:src="@drawable/android_logo"
app:layout_constraintBottom_toTopOf="@+id/textView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.497"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

<TextView
android:id="@+id/textView"
android:layout_width="139dp"
android:layout_height="48dp"
android:text="Hello World!"
android:textSize="25dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.513" />
Output:

Result:
Thus the android program to load an image and print “Welcome to Android Programming”
was executed and verified.
Ex.No:10 Create an android program to send data to one activity to another
Date: activity.

Aim:
To create an android program to send data to one activity to another activity.

Algorithm:
1. Open android flamingo and create new project.
2. Select our project in the project explorer.
3. select the required layout.
4. Type the code for activity_main.xml
5. Choose the relative layout and change its properties.
6. Screen layout can be viewed by clicking graphics layout tab.
7. Override On Create() function
8. Create Imageview and initialize its using id of some components used in
the xml program.
9. Save the program and Run the program.
10. Output can be viewed in the android emulator.

Implementation:

Activity_main.xml:
<EditText
android:id="@+id/Name"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:hint="Enter your Name"
android:textSize="25dp"
app:layout_constraintBottom_toTopOf="@+id/login_btn"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.495"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.264" />

<EditText
android:id="@+id/Regno"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:layout_marginTop="64dp"
android:hint="Register Number"
android:textSize="25dp"
app:layout_constraintBottom_toTopOf="@+id/login_btn"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.495"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/Name"
app:layout_constraintVertical_bias="0.0" />
<Button
android:id="@+id/login_btn"
android:layout_width="150dp"
android:layout_height="55dp"
android:layout_marginTop="36dp"
android:text="Submit"
android:textSize="25dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.498"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.559" />

Activity_main2.xml:
<TextView
android:id="@+id/received_name"
android:layout_width="300dp"
android:layout_height="40dp"
android:layout_marginTop="156dp"
android:text="Name: "
android:textSize="20dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.495"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

<TextView
android:id="@+id/received_regno"
android:layout_width="300dp"
android:layout_height="40dp"
android:layout_marginTop="248dp"
android:text="RegNo: "
android:textSize="20dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.495"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

MainActivity.java:
package com.example.myapplication;

import androidx.appcompat.app.AppCompatActivity;
import android.content.Intent;
import android.os.Bundle;
import android.widget.Button;
import android.widget.EditText;

public class MainActivity extends AppCompatActivity {


@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

Button login_button;
EditText name;
EditText regno;

login_button = findViewById(R.id.login_btn);
name = findViewById(R.id.Name);
regno = findViewById(R.id.Regno);

login_button.setOnClickListener(v -> {

String str = name.getText().toString();


String str1 = regno.getText().toString();

Intent intent = new Intent(getApplicationContext(), MainActivity2.class);


intent.putExtra("message_key", str);
intent.putExtra("message_key1", str1);
startActivity(intent);
});
}
}

MainActivity2.java:
package com.example.myapplication;

import androidx.appcompat.app.AppCompatActivity;
import android.content.Intent;
import android.os.Bundle;
import android.widget.TextView;

public class MainActivity2 extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main2);

TextView receiver_name;
TextView receiver_regno;

receiver_name = findViewById(R.id.received_name);
receiver_regno = findViewById(R.id.received_regno);

Intent intent = getIntent();


String str = intent.getStringExtra("message_key");
String str1 = intent.getStringExtra("message_key1");

receiver_name.setText("Name: " + str);


receiver_regno.setText("Register Number: " + str1);
}
}

Output:

Result:
Thus the an android program to send data to one activity to another activity has been
done successfully.

You might also like