Wednesday 21 April 2021

AJAX Web Application for Reading Data from XML

cdcatalog.xml

<?xml version="1.0" encoding="UTF-8"?>
<CATALOG>
<CD>
<TITLE>Empire Burlesque</TITLE>
<ARTIST>Bob Dylan</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1985</YEAR>
</CD>
<CD>
<TITLE>Hide your heart</TITLE>
<ARTIST>Bonnie Tyler</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>CBS Records</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1988</YEAR>
</CD>
<CD>
<TITLE>Greatest Hits</TITLE>
<ARTIST>Dolly Parton</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>RCA</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1982</YEAR>
</CD>
</CATALOG>

readxml.html

<!DOCTYPE html>

<html>

<head>

function loadDoc()

{

xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function()

{

if (this.readyState == 4 && this.status == 200)

{

var xmlDoc = xhttp.responseXML;

var table="<table border='1'><tr><th>Title</th><th>Price</th><th>Year</th></tr>";

var x = xmlDoc.getElementsByTagName("CD");

for (i = 0; i <x.lenght; i++)

{

table += "<tr><td>" +

x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +

"</td><td>" +

x[i].getElementsByTagName("PRICE")[0].childNodes[0].nodeValue +

"</td><td>"+

x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue +

"</td></tr>"

}

table+="</table>";

document.getElementById("demo").innerHTML = table;

}

};

xhttp.open("GET", "cdcatalog.xml", true);

xhttp.send();

}

</script>

</head>

<h1>Reading XML Data</h1>

</body>

</html>

AJAX Web Applications with Database Access

Cricket Score Display using AJAX

score.html

<!DOCTYPE html>
<html>
<head>
<script>
function viewScore()
{
request=new XMLHttpRequest();
request.open("GET","dbaccess.php",true);
request.send();
try
{
request.onreadystatechange=function()
{
if(request.readyState==4 & request.status=200)
{
document.getElementById('score').innerHTML=request.responseText;
}
};

}
catch(e)
{
alert("Unable to connect to server");
}
}
setInterval(viewScore,1000);
</script>
</head>
<body>
<h1>Retrive data from database using AJAX</h1>
<div id="score"><h2></h2></div>
</body>
</html>

dbaccess.php

<?php

// Create connection

$conn = new mysqli("localhost","abcd","1234", "test");

// Check connection

if ($conn->connect_error)

{

die("Connection failed:".$conn->connect_error);

}

$sql = "SELECT * FROM IPL";

$result = $conn->query($sql);

if ($result->num_rows > 0)

{

// output data of each row

while($row = $result->fetch_assoc())

{

echo "Score:".$row["score"]."/".$row["wicket"]." Overs:".$row["over"];

}

else

{

echo "0 results";

}

$conn->close();

Friday 26 February 2021

Storing Data into a Database

STEPS FOR STORING DATA INTO DATABASE

Step:1 Create table (Eg. student) in database(eg:test)

Step:2 Create client side webpage(insert.html) for getting data from users and store into D:\xampp\htdocs folder.

<!DOCTYPE html>
<html>
<head>
<title>Store Data into Database</title>
<style>
h1,div
{
text-align:center;
}
#sds-header
{
color:white;
height:50px;
width:100%;
background-color:green;
font-size:25px;
padding-top:15px;
}
#sds-form
{
color:blue;
height:550px;
width:100%;
background-color:yellow;
font-size:25px;
padding-top:25px;
}
</style>
</head>
<body>
<div id="sds-header">
Student Database System
</div>
<div id="sds-form">
<form name="myform" action="insertdb.php" method="get">
<input type="text" name="uroll" placeholder="Roll Number"><br><br>
<input type="text" name="uname" placeholder="Name"><br><br>
<input type="text" name="uage" placeholder="Age"><br><br>
<input type="text" name="udept" placeholder="Department"><br><br>
<input type="submit" value="Insert">
</form>
</div>
</body>
</html>

Step:3 Create an another webpage(insertdb.php) in D:\xampp\htdocs folder using PHP for collecting data from previous page and storing those data into a table(eg. student) present in the database(eg. test).

<?php

$rollno=$_GET['uroll'];

$name=$_GET['uname'];

$age=$_GET['uage'];

$dept=$_GET['udept'];

// Create connection

$conn = new mysqli("localhost", "siva", "123", "test");

// Check connection

if ($conn->connect_error)

{

die("Connection failed:" . $conn->connect_error);

}

$sql = "INSERT INTO STUDENT VALUES('$rollno','$name','$age','$dept')";

if(mysqli_query($conn, $sql))

{

echo "Records inserted successfully.";

}

else

{

echo "ERROR: Could not execute $sql. " . mysqli_error($conn);

}

$conn->close();

Step:4 Run the first page http://localhost/insert.html

Step:5 Enter details in the form and click insert

Step:6 Now you will see the following screen after successful insertion.

THANK YOU

Thursday 25 February 2021

USERNAME PASSWORD VERIFICATION USING PHP AND MYSQL

LOGIN FORM VERIFICATION USING DATABASE

Step:1 Create login page(login.html) in \xampp\htdocs folderusing the following HTML code

<!DOCTYPE html>
<html>
<head>
<title>Login Form</title>
<style>
h1,div
{
text-align:center;
}
</style>
</head>
<body>
<h1>Login</h1>
<div>
<form name="myform" action="dbselect.php" method="post">
User Name:<input type="text" name="uname"><br><br>
Password:<input type="password" name="pass"><br><br>
<input type="submit" value="Login">
</form>
</div>
</body>
</html>

Step:2 Create a following PHP file(dbselect.php) to verify username and password using database data

<?php

$uname=$_POST['uname'];
$pass=$_POST['pass'];
$status=0;
// Create connection
$conn = new mysqli("localhost", "siva", "123", "test");
// Check connection
if ($conn->connect_error)
{
die("Connection failed:" . $conn->connect_error);
}
$sql = "SELECT * FROM login";
$result = $conn->query($sql);
if ($result->num_rows > 0)
{
while($row = $result->fetch_assoc())
{
if(!strcmp($row["username"],$uname)&&!strcmp($row["password"],$pass))
{
$status=1;
break;
}
}
}
else
{
echo "No Records Found";
}
if($status==1)
{
// 301 Moved Permanently
header("Location: http://localhost/welcome.php", true, 301);
exit();
}
//echo "Login Succes";
else
echo "Login Failed";
$conn->close();
?>

Step:3 Save this file with name dbselect.php or any other name with .php extension in the same folder (\xampp\htdocs\). Ensure this filename and filename given action attribute of the login form is same.

Step:4 Run login.html file as follows from your web browser

http://localhost/login.html

Step:5 Type username and password available in the database. The login records available in the database as follows

Step:6 Now you will see the following page

THANK YOU

Wednesday 24 February 2021

Creating Table in XAMPP-PHP-MySQL Database

Create a table in PHP-MySQL database

Note: Install XAMPP PHP Web Server in your machine

Step-1: Type http://localhost/phpmyadmin/ in address bar of your browser

Step:2: From the left side bar, click any one database(Eg: test)

Step:3 Below the create table, type table name(eg:user) and specify number of columns(Eg.2), then click Go button.

Step:4 Enter table column names, type and length as follows, then click save.

Step:5 Now you will see the following screen.

Step:6 Click the SQL Tab and then INSERT button and run the insert query as follows for inserting username and password for two users as follows

INSERT INTO `users`(`username`, `password`) VALUES ("abc","123456")

Step:7 Now you will see the following screen after successful insertion

Step:8 Now click table name(Eg:users) from left side, you will see the following screen will show all records present in the table.

THANK YOU

Tuesday 23 February 2021

Installing PHP Server - XAMPP in Windows

Installing XAMPP in Windows OS

Go to this link "https://www.apachefriends.org/download.html"
Choose latest xampp version for windows

After clicking exe file will be downloaded in your machine
Right click on the downloaded file and click run as administrator

Click Next

Again click Next

Now, Change folder from "C:\" drive to "D:\" drive or any other

Click Next

Click Next

Click Next

Click Next, now installation will start

After installation, click XAMPP Control Panel from windows menu and Start the Apache, MySQL and Tomcat Module

Now, type "localhost" in the browser address bar and you will see the following screen:

Now create a simple php file(example: test.php) in the notepad and save the file in "D:\xampp\htdocs folder"

Now in the web browser address bar type "localhost/test.php" and see output as follows:

test.php

<?php

echo "Welcome to php";

Thank you

Monday 22 February 2021

Installing Apache Tomcat Web Server

Prerequisite:

Install JDK latest verision

Steps for Installing Apache Tomcat Web Server

Go to Apache Foundation Home page using http://tomcat.apache.org

Choose latest version from left side of the page
Go to binary distribution section
Click 32-bit/64-bit Windows Service Installer (pgp, sha512)

Open the file from downloaded folder
Right click on it and click run as administrator
Change the folder location to some other drive from c drive
Click install
Launch after installation
Test the installation by typing localhost:8080 in the browser address bar.

INTERNET PROGRAMMING LABORAOTORY PROGRAMS

EX.01 EMBEDDING MAP

Aim:

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.

Procedure:

Download a map image from internet and save the image with map.jpg
Create a webpage using html by embedding map image using <img> tag
Identify positions on the map using paint application for creating hotspots
Create hotspots on the map images using <map> tag
Create web pages for each hotspots
Run the application

Coding:

map.html

<!DOCTYPE html>

<html>

<head>

<title>INDIA MAP</title>

</head>

<body>

<img src="india.jpg" alt="India-map" usemap="#indiamap">

<map name="indiamap">

<area coords="336,987,50" shape="circle" href="tn.html">

<area coords="261,975,50" shape="circle" href="kr.html">

<area coords="362,792,50" shape="circle" href="an.html">

<area coords="247,644,50" shape="circle" href="ma.html">

</map>

</body>

</html>


kl.html


<!DOCTYPE html>
<html>
<head>
<title>KERALA MAP</title>
</head>
<body>
``<h1> WELCOME TO KERALA MAP</h1>
    <img src="kl.jpg" >
</body>
</html>


tn.html


<!DOCTYPE html>
<html>
            <head>
                                 <title>TAMIL NADU MAP</title>
            </head>
            <body>
                            ``<h1> WELCOME TO TAMILNADU MAP</h1>
                                 <img src="tnmap.jpg" >
            </body>
</html>



Output:

IMPLEMENTATION OF CSS TYPES

Aim:

Create a web page with the following.

a) Cascading style sheets.

b) Embedded style sheets.

c) Inline style sheets. Use our college information for the web pages.

Procedure:

Create a webpage using html from displaying college information
Create external css file for styling few tags
Link the external css using <link> tag
Embed a style sheet in a web page using <style> tag
Add inline css using style attribute
Run the application

Program:

home.html

<!DOCTYPE html>

<html>

<head>

<title>CSS Types</title>

{

font-family:arial;

color:blue;

}

{

text-align:center;

}

{

font-sise:14pt;

font-family:verdana

}

</style>

</head>

<body>

<h1>

ABC Institute of Technology

</h1>

<h5>

Approved by AICTE, Affiliated to Anna University

</h5>

<li><a href="#">About us</a></li>

<li><a href="#">Department</a></li>

<li><a href="#">Facilities</a></li>

<li><a href="#">Contact us</a></li>

</ul>

<hr>

<h2>About Institution:</h2>

<p>

ABC Institue of Technology was established in the 1995 with five undergraduate

engineering courses.

</p>

<h2 style="color:blue;">Course Offered: </h2>

<p>

<ul>

<li>B.E.-CIVIL</li>

</ul>

</p>

<h2>Contact:</h2>

<p>mailtoabc@abc.ac.in</p>

</body>

</html>

ext.css

body

{

background-color: #f0e68c;

}

{

font-family:arial;

color:green;

text-align:center;

}

{

font-family:arial;

color:red;

left:20px

}

ul.menu {

list-style-type: none;

margin: 0;

padding: 0;

overflow: hidden;

background-color: #333;

}

ul.menu li {

float: left;

}

li a {

display: block;

color: white;

text-align: center;

padding: 14px 16px;

text-decoration: none;

}

li a:hover {

background-color: yellow;

color:blue;

}

Output

Sunday 21 February 2021

IP UNIT-2 TWO MAKRS WITH ANSWERS

What is JavaScript?

JavaScript is a lightweight, interpreted programming language with object-oriented capabilities that allows you to build interactivity into otherwise static HTML pages. JavaScript is a client-side as well as server side scripting language that can be inserted into HTML pages and is understood by web browsers.

What are the data types supported by JavaScript?

The data types supported by JavaScript are:

Undefined
Null
Boolean
String
Symbol
Number
Object

What are the features of JavaScript?

Following are the features of JavaScript:

It is a lightweight, interpreted programming language.
It is designed for creating network-centric applications.
It is complementary to and integrated with Java.
It is an open and cross-platform scripting language.

Is JavaScript a case-sensitive language?

Yes, JavaScript is a case sensitive language. The language keywords, variables, function names, and any other identifiers must always be typed with a consistent capitalization of letters.

What are the advantages of JavaScript?

Following are the advantages of using JavaScript −

Less server interaction − You can validate user input before sending the page off to the server. This saves server traffic, which means less load on your server.
Immediate feedback to the visitors − They don’t have to wait for a page reload to see if they have forgotten to enter something.
Increased interactivity − You can create interfaces that react when the user hovers over them with a mouse or activates them via the keyboard.
Richer interfaces − You can use JavaScript to include such items as drag-and-drop components and sliders to give a Rich Interface to your site visitors.

How can you create an object in JavaScript?

JavaScript supports Object concept very well. You can create an object using the object literal as follows −

varemp = {
name: "Daniel",
age: 23
};

How can you create an Array in JavaScript?

You can define arrays using the array literal as follows-

var x = [];
var y = [1, 2, 3, 4, 5];

What are the scopes of a variable in JavaScript?

The scope of a variable is the region of your program in which it is defined. JavaScript variable will have only two scopes.

Global Variables − A global variable has global scope which means it is visible everywhere in your JavaScript code.
Local Variables − A local variable will be visible only within a function where it is defined. Function parameters are always local to that function.

What is the purpose of ‘this’ operator in JavaScript?

The JavaScript this keyword refers to the object it belongs to. This has different values depending on where it is used. In a method, this refers to the owner object and in a function, this refers to the global object.

What is Callback?

A callback is a plain JavaScript function passed to some method as an argument or option. It is a function that is to be executed after another function has finished executing, hence the name ‘call back‘.

How to create a cookie using JavaScript?

The simplest way to create a cookie is to assign a string value to the document. Cookie object, which looks like this-

document.cookie = "key1 = value1; key2 = value2; expires = date";

In how many ways a JavaScript code can be involved in an HTML file?

There are 3 different ways in which a JavaScript code can be involved in an HTML file:

Inline
Internal
External

What are the ways to define a variable in JavaScript?

The three possible ways of defining a variable in JavaScript are:

Var – The JavaScript variables statement is used to declare a variable and, optionally, we can initialize the value of that variable. Example: var a =10; Variable declarations are processed before the execution of the code.
Const – The idea of const functions is not allow them to modify the object on which they are called. When a function is declared as const, it can be called on any type of object.

Let – It is a signal that the variable may be reassigned, such as a counter in a loop, or a value swap in an algorithm. It also signals that the variable will be used only in the block it’s defined in.

What is a Typed language?

Typed Language is in which the values are associated with values and not with variables. It is of two types:

Dynamically: in this, the variable can hold multiple types; like in JS a variable can take number, chars.
Statically: in this, the variable can hold only one type, like in Java a variable declared of string can take only set of characters and nothing else.

What is the difference between window & document in JavaScript?

Window	Document
JavaScript window is a global object which holds variables, functions, history, location.	The document also comes under the window and can be considered as the property of the window.

What is NaN in JavaScript?

NaN is a short form of Not a Number. Since NaN always compares unequal to any number, including NaN, it is usually used to indicate an error condition for a function that should return a valid number. When a string or something else is being converted into a number and that cannot be done, then we get to see NaN.

What is the DOM?

The Document Object Model (DOM) is a programming interface for HTML and XML documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as nodes and objects.

API = DOM + JavaScript

List out the various methods of Document object.

write(“string”): writes the given string on the document.
getElementById(): returns the element having the given id value.
getElementsByName(): returns all the elements having the given name value.
getElementsByTagName(): returns all the elements having the given tag name.
getElementsByClassName(): returns all the elements having the given class name.

How exceptions are handled in javascript?

By the help of try/catch block, we can handle exceptions in JavaScript. JavaScript supports try, catch, finally and throw keywords for exception handling.

What are the javascript built-in objects?

JavaScript has several built-in or core language objects. These built-in objects are available regardless of window content and operate independently of whatever page your browser has loaded.

Mention the methods of Date object.

Date() - Returns today's date and time
getDate() - Returns the day of the month for the specified date
getDay() - Returns the day of the week for the specified date
getFullYear() - Returns the year of the specified date
getHours() - Returns the hour in the specified date according to local time.
getMilliseconds() - Returns the milliseconds in the specified date according to local time.

What are regular expressions in javascript?

Regular expressions are patterns used to match character combinations in strings. In JavaScript, regular expressions are also objects. These patterns are used with the exec() and test() methods of RegExp, and with the match(), matchAll(), replace(), search(), and split() methods of String.

How is javascript used for validation?

JavaScript provides a way to validate form's data on the client's computer before sending it to the web server. Form validation generally performs two functions.

Basic Validation − First of all, the form must be checked to make sure all the mandatory fields are filled in. It would require just a loop through each field in the form and check for data.
Data Format Validation − Secondly, the data that is entered must be checked for correct form and value. Your code must include appropriate logic to test correctness of data.

What is an event?

JavaScript's interaction with HTML is handled through events that occur when the user or the browser manipulates a page. Events are a part of the Document Object Model (DOM) Level 3 and every HTML element contains a set of events which can trigger JavaScript Code.

What is DHTML?

Dynamic HTML, or DHTML, is a collection of technologies used together to create interactive and animated websites by using a combination of a static markup language (such as HTML), a client-side scripting language (such as JavaScript), a presentation definition language (such as CSS), and the Document Object Model (DOM).

What is JSON?

JSON is the abbreviation of JavaScript Object Notation. It is one of the simplest data interchange format. It is also independent of programming language and platform. Its lightweight text-based structure makes it easily readable by a human. It is derived from JavaScript for presenting simple data in the form of key-value pairs.

What is meant by JSON objects?

An object is defined as a set of key-value pairs. A JSON starts with a left brace “{“ and ends with another right brace “}”. Every key is followed by a colon “:” and the key-value pairs are separated from each other by using a comma “,”. So, basically, JSON object is a collection of keys along with their values arranged in a pre-specified JSON format.

What is the extension of the JSON file?

A JSON file has an extension of “.json”. Being in a text-based format, a JSON file can be viewed or edited using any text editor like notepad or notepad++.

What are the advantages and features of JSON?

Easy to use and fast nature. JSON syntax offers easy parsing of data and even faster implementation. The light-weight structure of JSON allows it to respond at a much faster rate.
Compatible with numerous operating systems and browsers. This allows JSON schema to be attuned to many platforms without requiring any extra effort to make sure its compatibility with another platform.
Supports a wide range of data types including integers, double, String, Boolean, etc.

What are the limitations of JSON?

As the data gets complex with several nested or hierarchical structures, it becomes complex for human readability.
JSON is not suitable for handling very complex large data.
JSON doesn’t have support for handling multimedia formats such as rich text or images.
It doesn’t support comments.

What are the uses of JSON?

JSON is mainly used for data interchange between two systems.
JSON is prominently used for transmission of serialized data over a network connection between two systems.
APIs and web services use JSON to format and transfer data.
JSON can be used in combination with most of the modern programming languages.
JSON can be used with JavaScript applications such as browser plugins and websites.
JSON can be used to read data from the web server and display data on the web pages.

Explain JSON syntax rules?

There are several rules that describe the structure of the JSON. They are:

Data inside a JSON is arranged in Key value pair. The left side represents the key and the data on the right side represents value. Both key and value are separated by a colon “:”.
Each set of key-value pair is separated from the other pair by using a comma “,”.
Curly braces define the JSON objects. Left curly brace “{“ represents the start of the object and right curly brace “}” represents the end of an object.
Arrays are defined inside a JSON object by using square brackets “[ ]”.

What are the advantages of JSON over XML?

JSON is lighter and faster than the XML.
JSON has object types but XML doesn’t define objects as types. JSON has different object type for a different set of data such as string, integer, Boolean, array, etc. All XML objects are categorized as just one data type, i.e. string.
JSON data can be easily accessed as a JSON object using JavaScript. On the other hand, the XML data need to be parsed and allocated to the variables using APIs. Getting value out of a JSON is as easy as reading an object from your JavaScript programming.

Name the browsers that support JSON format?

Support for JSON is included in almost all the new versions of the browsers. Internet Explorer, Chrome, Safari, Mozilla Firefox, etc. all support JSON format.

WEB DESIGN

Pages

Wednesday 21 April 2021

AJAX Web Application for Reading Data from XML

AJAX Web Applications with Database Access

Friday 26 February 2021

Storing Data into a Database

STEPS FOR STORING DATA INTO DATABASE

THANK YOU

Thursday 25 February 2021

USERNAME PASSWORD VERIFICATION USING PHP AND MYSQL

LOGIN FORM VERIFICATION USING DATABASE

THANK YOU

Wednesday 24 February 2021

Creating Table in XAMPP-PHP-MySQL Database

Create a table in PHP-MySQL database

Tuesday 23 February 2021

Installing PHP Server - XAMPP in Windows

Thank you

Monday 22 February 2021

Installing Apache Tomcat Web Server

Prerequisite:

Steps for Installing Apache Tomcat Web Server

INTERNET PROGRAMMING LABORAOTORY PROGRAMS

EX.01 EMBEDDING MAP

Aim:

Procedure:

Coding:

map.html

Output:

IMPLEMENTATION OF CSS TYPES

Aim:

Procedure:

Program:

Sunday 21 February 2021

IP UNIT-2 TWO MAKRS WITH ANSWERS