Scribd
Upload
9 views40 pages

HTML Form Validation with JavaScript

The document outlines the creation of a web form using HTML and JavaScript for validation, including fields for username, password, and education checkboxes. It specifies validation rules such as minimum username length, password format, and mandatory checkbox selection. Additionally, it describes the design of static web pages for an online bookstore, including a home page with frames and various other pages like login and registration.

Uploaded by

wagle045
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
9 views40 pages

HTML Form Validation with JavaScript

The document outlines the creation of a web form using HTML and JavaScript for validation, including fields for username, password, and education checkboxes. It specifies validation rules such as minimum username length, password format, and mandatory checkbox selection. Additionally, it describes the design of static web pages for an online bookstore, including a home page with frames and various other pages like login and registration.

Uploaded by

wagle045
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

LAB – 1

Question: Write HTML script for creating a form containing text box for username, password field for password
and checkbox for Education fields. Write a JavaScript function for validation of the form for all of the fields are
required. In addition, length of user should at least 4, the password should start with digit and end with #.

Aim: Create a HTML script that contain form including text box for username, password and checkbox for
Education fields. And also we will validate form using JavaScript with following conditions.

1. All fields are required.


2. The length of user should be at least 4 character.
3. Password should start with digit and end with #.

DESCRIPTION:

In this program, All the form is created using basic HTML tags.

PROGRAM:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Form With Validation</title>

<style>
body {
margin: 0;
padding: 0;
}

form {
max-width:400px;
margin:10% auto;
}

form input[type=text],
form input[type=password],
form input[type=submit]{
padding: 5px 10px;
display: block;
margin-top: 5px;
}
form > div{
margin-bottom:15px;
}

.education_fields > label{


margin-bottom: 5px;
}

</style>
</head>

<body>
<script>
const formValidator = (e) => {
const username = [Link]('username');
if([Link]().length < 4 ){
[Link] = "solid 1px red";
alert("Username Should Be at least 4 character.");
return false;
}

const password = [Link]('password');


if( ! [Link](/[0-9][a-zA-Z0-9]*[a-zA-Z0-9][$]/) ){
[Link] = 'solid 1px red';
alert("Password should start with digit and end with $.");
return false;
}

const education = [Link]('edu[]');


for(let i=0; i<[Link]; i++){
if( ! education[i].checked){
alert("Please Select Your educational field.");
return false;
}
}

return true;
}
</script>

<form onsubmit='return formValidator()' method="get">


<div class="form-group">
<label for="username">Username</label>
<input type="text" name="username" id="username">
</div>

<div class="form-group">
<label for="password">Password</label>
<input type="password" name="password" id="password">
</div>

<div class="education_fields">
<label>Education Fields:</label>
<div class="form-check">
<input class="form-check-input" name="edu[]" type="checkbox" value="csit"
<label class="form-check-label" for="csitCheckbox">CSIT</label>
</div>

<div class="form-check">
<input class="form-check-input" name="edu[]" type="checkbox" value="bca"
<label class="form-check-label" for="bcaCheckbox">BCA</label>
</div>

<div class="form-check">
<input class="form-check-input"name="edu[]" type="checkbox" value="bit"
<label class="form-check-label" for="bitCheckbox">BIT</label>
</div>
</div>

<input type="submit" value="Submit">


</form>
</body>

</html>

OUTPUT:
LAB – 2
Q. Design the following static web pages required for an online book store web site.
1) HOME PAGE: The static home page must contain three frames.
2) LOGIN PAGE:
3) CATOLOGUE PAGE: The catalogue page should contain the details of all the books available in the web
site in a table.
4) REGISTRATION PAGE:

Aim: Design the following static web pages required for online book store.
1. Home page:- the static home page must contain three pages
2. Top frame:- logo and college name and links to homepage, login page, registration page and catalogue
page
3. Left frame:- at least four links for navigation which will display the catalogue of
1) Respective links
4. Right frame:- the pages to links in the left frame must be loaded here initially it Contains the description
of the website.

DESCRIPTION:

In this program the entire web paged are created by using basic HTML tags. Home page is divided into 3 frames
by using <frameset> and <frame> tags. A frame is used to display a web page within a web page.

<frameset>:

▪ The <frameset> tag defines a frameset.


▪ The <frameset> element holds one or more <frame> elements.
▪ Each <frame> element can hold a separate document.
▪ The <frameset> element specifies HOW MANY columns or rows there will be in the
▪ frameset, and HOW MUCH percentage/pixels of space will occupy each of them.

<frame>:

▪ The <frame> tag defines one particular window (frame) within a <frameset>.
▪ Each <frame> in a <frameset> can have different attributes, such as border, scrolling, the ability to resize,
etc.
PROGRAM:

[Link]:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Book Store</title>
</head>

<frameset rows="15%,9%,76%" bordercolor="pink">


<frameset cols="20%,80%" bordercolor="red">
<frame src="[Link]" scrolling="no">
<frame src="[Link]">
</frameset>
<frame src="[Link]" name="f2" scrolling="no">
<frameset cols="15%,85%" bordercolor="red">
<frame src=" [Link]" name="f31">
<frame src="[Link]" name="f32">
</frameset>
</frameset>

</html>

[Link]:

<html>

<body>
<img src="[Link]">
</body>

</html>

[Link]:

<html>
<body>
<center<i> ONLINE BOOK STORE </i> </font></center>
</body>
</html>

[Link]:
<html>

<body>
<table width="100%">
<tr>
<td> <a href="[Link]" target="f32">Home </a></td>
<td> <a href="[Link]" target="f32">Login </a></td>
<td> <a href="[Link]" target="f32">Registration</a></td>
<td> <a href="[Link]" target="f32">Catalogue </a></td>
<td> <a href="[Link]" target="f32">Cart </a></td>
</tr>
</table>
</body>

</html>

[Link]:

<html>
<table cellspacing=15>
<tr>
<td> <a href="[Link]" target="f32">CSIT </a></td>
</tr>
<tr>
<td><a href="[Link]" target="f32"> BCA </a> </td>
</tr>
<tr>
<td><a href="[Link]" target="f32">CIVIL </a></td>
</tr>
</table>
</body>

</html>

[Link]:

<html>

<body>
<center> <u> ONLINE BOOK STORE </u></center>
<p>This website contains various books.
</body>

</html>
OUTPUT:
Lab – 3
Question: Write JavaScript to validate the following fields of the Registration page.

1. First Name (Name should contain alphabets and the length should not be less than 6 characters).
2. Password (Password should not be less than 6 characters length).
3. E-mail id (should not contain any invalid and must follow the standard pattern
name@[Link])
4. Mobile Number (Phone number should contain 10 digits only).
5. Last Name and Address (should not be Empty).

AIM: To validate the fields of registration page using JavaScript

DESCRIPTION:

In order to validate the fields of login and registration pages JavaScript is used. JavaScript is programming code
that can be inserted into HTML pages. JavaScript inserted into HTML pages, can be executed by all modern web
browsers. JavaScript is mainly used for validating the elements in a form submitted by the user. This JavaScript
code can react to user events.

PROGRAM:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration Page</title>

<style>
body {
margin: 0;
padding: 0;
}

form {
max-width:300px;
margin:5% auto;
}

form input{
padding: 5px 10px;
display: block;
margin-top: 5px;
width:100%;
}

form > div{


margin-bottom:15px;
}

.education_fields > label{


margin-bottom: 5px;
}

</style>
</head>

<body>
<script>
const formValidator = (e) => {
const fname = [Link]("fname").value;
const lname = [Link]("lname").value;
const email = [Link]("email").value;
const phone = [Link]("phone").value;
const address = [Link]("address").value;
const password = [Link]("password").value;

//validating first name


if(
[Link] < 6
|| ![Link](/^[a-zA-Z]+$/)
){
alert("First Name should be greater than 6 character and alphabet character
only.");
return false;
}

//validating password
if( [Link] < 6 ){
alert("Password should be greater than 6 character.");
return false;
}

//validating email
const emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
if( ! [Link]( emailExp ) ){
alert("Provide valid email address.");
return false;
}

//validating phone number


if( ! ([Link] == 10) ){
alert("Phone Number should be 10 digits only.");
return false;
}

//validating lastname
if( [Link] == 0 ){
alert("Last Name should not be empty.");
return false;
}

//validating address
if( [Link] == 0 ){
alert("Address should not be empty.");
return false;
}

return true;
}
</script>

<form onsubmit='return formValidator()' method="get">


<div class="form-group">
<label for="fname">First Name</label>
<input type="text" name="fname" id="fname">
</div>

<div class="form-group">
<label for="lname">Last Name</label>
<input type="text" name="lname" id="lname">
</div>

<div class="form-group">
<label for="email">Email</label>
<input type="email" name="email" id="email">
</div>

<div class="form-group">
<label for="phone">Phone Number</label>
<input type="number" name="phone" id="phone">
</div>

<div class="form-group">
<label for="address">Address</label>
<input type="text" name="address" id="address">
</div>

<div class="form-group">
<label for="password">Password</label>
<input type="password" name="password" id="password">
</div>
<input type="submit" value="Submit">
</form>
</body>

</html>

OUTPUT:
Lab – 4

Question: Develop and demonstrate the usage of inline, internal and external style
sheet using CSS.

AIM: Design a web page using CSS which includes the following:

1) Use different font styles


2) Control the repetition of image with background-repeat and no-repeat property
3) Define style for links as a: link, a: active, a: hover, a: visited
4) Add customized cursors for links.

DESCRIPTION:

CSS is used to set the style in web pages that contain HTML elements. It sets the background color, font-
size, font-family, color, … etc properties of elements on a web page.

There are three types of CSS which are given below:

1. Inline CSS
2. Internal CSS
3. External CSS

Inline CSS: Inline CSS contains the CSS property in the body section attached to the element is known as
inline CSS. This kind of style is specified within an HTML tag using the style attribute.

Internal CSS: This can be used when a single HTML document must be styled uniquely. It is defined in
the <head> section of the HTML page inside the <style> tag. Internal style sheets increase page load
times, that’s why many developers avoid such practice

External CSS: External CSS contains a separate CSS file that contains only style properties with the help
of tag attributes (For example class, id, heading, … etc). CSS property is written in a separate file with a
.css extension and should be linked to the HTML document using a link tag. This means that for each
element, style can be set only once and that will be applied across web pages. This is the widely used
and recommended CSS by developer.

PROGRAM:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Internal, External and Inline CSS</title>

<!-- EXTERNAL CSS -->


<link rel="stylesheet" href="[Link]">

<!-- INTERNAL CSS -->


<style>
.internal_container {
border: 1px solid red;
padding: 15px;
margin-top: 1rem;
}

.internal_title {
font-size: 18px;
font-family: monospace;
margin-bottom: 10px;
}

.internal_content {
font-size: 15px;
font-family: monospace;
}
</style>
</head>

<body>
<!-- INLINE CSS -->
<div style="border:1px solid blue; padding:15px;">
<div class="inline_title">INLINE CSS</div>

<p>This paragraph is notstyled.</p>


<p style="color:blue;text-align:center;"> This is styled paragraph using inline css.
</p>
</div>

<!-- INTERNAL CSS -->


<div class="internal_container">
<div class="internal_title">INTERNAL CSS</div>

<div class="internal_content">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sequi blanditiis delectus
minus aut nam nisi ipsam odio iusto, doloremque esse quas. In vel numquam enim quisquam illum
non sunt, quam tempora dolor! Officia voluptatibus quos mollitia veniam hic, tenetur ratione
vel corporis doloribus sint. Obcaecati quam possimusdistinctio error laborum?
</div>
</div>

<!-- EXTERNAL CSS -->


<div class="external_container">
<div class="external_title">EXTERNAL CSS</div>

<div class="external_content">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sequi blanditiis delectus
minus aut nam nisi ipsam odio iusto, doloremque esse quas. In vel numquam enim quisquam illum
non sunt, quam tempora dolor! Officia voluptatibus quos mollitia veniam hic, tenetur ratione
vel corporis doloribus sint. Obcaecati quam possimus distinctio error laborum?
</div>
</div>
</body>

</html>

OUTPUT:
Lab – 5

Question: Develop and demonstrate JavaScript with POP-UP boxes and functions for the following
problems:

• Input: Click on Display Date button using onclick( ) function


Output: Display date in the textbox
• Input: A number n obtained using prompt
Output: Factorial of n number using alert
• Input: A number n obtained using prompt
Output: A multiplication table of numbers from 1 to 10 of n using alert
• Input: A number n obtained using prompt and add another number using confirm
Output: Sum of the entire n numbers using alert

PROGRAM:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Date</title>

<style>
input{
width:100%;
padding: 5px 10px;
margin-bottom: 1rem;
}
</style>
<script>
function display() {
var x = "You have clicked";
var d = new Date();
var date = [Link]();
var month = [Link]();
month++;
var year = [Link]();
[Link]("dis").value = date + "/" + month + "/" + year;
}

function factorialcalc() {
let number = prompt("Enter a number to calculate factorial:", "Number must be
greater than 0");

if( number != null ){


if( ! isNaN( number ) ){
number = parseInt(number);
let factorial = 1;
for (i = 1; i <= number; i++) {
factorial = factorial * i;
}
alert("Factorial of " + number + " is " + factorial);
}else{
factorialcalc();
}
}
}

function multiplicationcalc(){
let number = prompt("Enter the value of n:", "Number must be greater than 1");

if( number != null ){


if( ! isNaN( number ) ){
number = parseInt(number);
let table = 'Table for Number ' + number + " is:\n\n";
for (i = 1; i <= 10; i++) {
table += number + " x " + i + " = " + number * i + "\n";
}
alert(table);
}else{
multiplicationcalc();
}
}
}

function sumcalc(){
alert("You're going to give me a list of numbers. I'm going to add them together
for you:");
let more = true;
let total = 0;

while( more ){
let number = prompt("Enter number:", "Number greater than 0");
if( number != null ){
if( ! isNaN( number ) ){
total += parseInt(number);
}
}

more = confirm("Add more number?");


}
alert("Sum of all numbers is: " + total);
}
</script>
</head>

<body>
<div style="max-width:300px;margin:10% auto;">
<input type="text" id="dis" /><br /><br />
<input type="button" value="Display Date" onclick="display()" />

<input type="button" value="Calculate Factorial" onclick="factorialcalc();">

<input type="button" value="Multiplication Table" onclick="multiplicationcalc();">

<input type=button value='sum of n numbers' onclick="sumcalc();">


</div>
</body>

</html>

OUTPUT:

Factorial Calculation:
Multiplication Table:

Sum of Numbers:
Lab – 6
Question: Write an HTML page that contains a selection box with a list of 5 countries. When the user
selects a country, its capital should be printed next in the list. Add CSS to customize the properties of the
font of the capital ( color, bold and font size).

PROGRAM:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>List of 5 countries</title>

<style>
.form {
max-width: 300px;
margin: 10% auto;
}

.form input,
.form select {
width: 100%;
padding: 5px 10px;
}

.form-group{
margin-bottom: 1rem;
}
</style>

<script>
const setCapital = () => {
const capital = [Link]("capital");
const country = [Link]("country");
[Link] = [Link];
}
</script>
</head>

<body>
<div class="form">
<div class="form-group">
<label>Capital City</label>
<input type="text" id="capital" disabled>
</div>

<div class="form-group">
<label>Country</label>
<select name="country" id="country" onchange="setCapital()">
<option value=""></option>
<option value="Kathmandu">Nepal</option>
<option value="New Dehli">India</option>
<option value="London">United Kingdom</option>
<option value="berlin">Germany</option>
<option value="Kabul">Afghanistan</option>
</select>
</div>
</div>
</body>

</html>

OUTPUT:
Lab – 7
Question: Create an XML document that contains 10 user’s information. Write a PHP Program, which
takes User Id as input and returns the user details by taking the user information from XML document
using DOM parser or SAX parser.

AIM:

Takes User Id as input and returns the user details using XML with DOM

PROGRAM:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>

<style>
* {
font-family: sans-serif;
}

form {
max-width: 500px;
margin: 5% auto;
}

form input {
width: 100%;
padding: 5px 10px;
margin-bottom: 1rem;
}

.result_container {
margin-top: 1rem;
}

.result_container>label {
font-weight: bold;
text-transform: uppercase;
margin-bottom: 1rem;
display: block;
}
table {
border-collapse: collapse;
width: 100%;
}

table td,
table th {
border: 1px solid #ddd;
padding: 12px;
}

table th {
padding: 12px 0;
}
</style>
</head>

<body>
<form method="post">
<div class="form-group">
<label>User ID:</label>
<input type="number" required name="userid" placeholder="User ID">
</div>

<input type="submit" value="Get User Details">

<div class="result_container">
<label>Result</label>
<table>
<thead>
<tr>
<th>Roll Number</th>
<th>First Name</th>
<th>Last Name</th>
<th>Address</th>
<th>Percentage</th>
</tr>
</thead>

<tbody>
<tr>
<?php
if( $_SERVER['REQUEST_METHOD'] == 'POST' ){
$userID = intval($_POST['userid']);
if( $userID > 0 ){
$xmlDoc = new DOMDocument();
$xmlDoc->load("[Link]");
$usersinfo = $xmlDoc->getElementsByTagName("usersinfo");
$users = $usersinfo->item(0)->getElementsByTagName('user');
$found = false;
foreach($users as $user){
$xmlId = $user->getElementsByTagName('userid')-
>item(0)->nodeValue;
if( $xmlId == $userID ){
$xmlFname = $user->getElementsByTagName('fname')-
>item(0)->nodeValue;
$xmlLname = $user->getElementsByTagName('lname')-
>item(0)->nodeValue;
$xmlAddress = $user-
>getElementsByTagName('address')->item(0)->nodeValue;
$xmlPer = $user->getElementsByTagName('per')-
>item(0)->nodeValue;
echo sprintf('<td>%d</td>
<td>%s</td>
<td>%s</td>
<td>%s</td>
<td>%s</td>', $xmlId, $xmlFname, $xmlLname,
$xmlAddress, $xmlPer);

$found = true;
break;
}
}

if( ! $found )
echo '<td colspan="5">No User with this ID.</td>';
}
}else{
echo '<td colspan="5">Please Provide user id to search.</td>';
}
?>
</tr>
</tbody>
</table>
</div>
</form>
</body>

</html>
OUTPUT:
LAB – 8
Question: Write an HTML page including any required JavaScript that takes a number from text field in
the range of 0 to 999 and shows it in words. It should not accept four and above digits, alphabets and
special characters.

AIM:

To convert number to words using JavaScript

PROGRAM:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Number to Words</title>

<style>
.form{
max-width: 400px;
margin: 10% auto;
}

.form input{
width:100%;
padding:5px 15px;
margin-bottom: 1rem;
}

#intoWords{
text-transform: capitalize;
font-weight: bold;
text-align: center;
margin-top: 1rem;
font-family: monospace;
font-size: 1rem;
}
</style>

<script>
let a = ['','one ','two ','three ','four ', 'five ','six ','seven ','eight ','nine
','ten ','eleven ','twelve ','thirteen ','fourteen ','fifteen ','sixteen ','seventeen
','eighteen ','nineteen '];
let b = ['', '','twenty','thirty','forty','fifty','sixty','seventy','eighty','ninety'];

function inWords (num) {


if ((num = [Link]()).length > 4) return 'overflow';
let n = ('00000' + num).substr(-5).match(/^(\d{2})(\d{1})(\d{2})$/);
if (!n) return; var str = '';
str += (n[1] != 0) ? (a[Number(n[1])] || b[n[1][0]] + ' ' + a[n[1][1]]) + 'thousand
' : '';
str += (n[2] != 0) ? (a[Number(n[2])] || b[n[2][0]] + ' ' + a[n[2][1]]) + 'hundred
' : '';
str += (n[3] != 0) ? ((str != '') ? 'and ' : '') + (a[Number(n[3])] || b[n[3][0]] +
' ' + a[n[3][1]]) + 'only ' : '';
return str;
}

function convertToWord() {
let number = [Link]("number").value;
if (isNaN(number)) {
alert("Enter numbers only.");
return false;
}

if ([Link] > 4) {
alert("Number should not be greater than 4 digits.");
return false;
}

[Link]("intoWords").innerText = inWords(number);
}
</script>
</head>

<body>
<div class="form">
<div class="form-group">
<label>Number</label>
<input type="number" id="number">
</div>

<input type="button" onclick="convertToWord()" value="Convert to Words">

<div id="intoWords"></div>
</div>
</body>

</html>
OUTPUT:
Lab – 9
Question: Write a jQuery to hide and show HTML elements with hide() and show() methods:

DESCRIPTION:

We can show and hide HTML elements using the jQuery show() and hide() methods.

The hide() method simply sets the inline style display:none; for the selected elements.
Conversely, the show() method restores the display properties of the matched set of elements to
whatever they initially were—typically block, inline, or inline-block—before the inline style
display:none; was applied to them.

PROGRAM:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Hide/Show Element using jQuery</title>
</head>
<body>
<p id="sampleparagraph">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsa
culpa quis veniam quidem ipsum doloremque a? Quae quos atque iusto, culpa laudantium nulla hic
temporibus eligendi ea!</p>
<button type="button" id="showHideParagraph">Show/Hide Paragraph</button>

<script src="[Link]
<script>
$("#showHideParagraph").click(function(){
const pEle = $("#sampleparagraph");
if( [Link](":hidden") ){
[Link]();
}else{
[Link]();
}
});
</script>
</body>
</html>

OUTPUT:
LAB – 10
Question: Write an XML and external DTD for a document. Document contains note as root element
and to, from, heading and body as child element.

DESCRIPTION:

DTD stands for Document Type Definition. It defines the legal building blocks of an XML document. It is
used to define document structure with a list of legal elements and attributes.

Its main purpose is to define the structure of an XML document. It contains a list of legal elements and
define the structure with the help of them.

PROGRAM:

[Link]:

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


<!DOCTYPE note SYSTEM "[Link]">
<note>
<to>Bipin Tiwari</to>
<from>Suresh Chand</from>
<heading>Reminder</heading>
<body>Don't forget to visit office!!</body>
</note>

[Link]:

<!ELEMENT note (to,from,heading,body)>


<!ELEMENT to (#PCDATA)>
<!ELEMENT from (#PCDATA)>
<!ELEMENT heading (#PCDATA)>
<!ELEMENT body (#PCDATA)>
LAB – 11
Question: Write an XML and external XML schema for document. Document contains note as root
element and to, from, heading and body as child element.

DESCRIPTION:

XML Schema is commonly known as XML Schema Definition (XSD). It is used to describe and validate
the structure and the content of XML data. XML schema defines the elements, attributes and data types.
Schema element supports Namespaces. It is similar to a database schema that describes the data in a
database.

PROGRAM:

[Link]:

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


<note
xmlns="[Link]
xmlns:xsi="[Link]
xsi:schemaLocation="[Link]">
<to>Bipin Tiwari</to>
<from>Suresh Chand</from>
<heading>Reminder</heading>
<body>Don't forget to visit office!!</body>
</note>

[Link]:

<?xml version="1.0"?>
<xs:schema xmlns:xs="[Link]
targetNamespace="[Link] xmlns="[Link]
elementFormDefault="qualified">

<xs:element name="note">
<xs:complexType>
<xs:sequence>
<xs:element name="to" type="xs:string"/>
<xs:element name="from" type="xs:string"/>
<xs:element name="heading" type="xs:string"/>
<xs:element name="body" type="xs:string"/>
</xs:sequence>
</xs:complexType>
</xs:element>

</xs:schema>
LAB – 12
Question: Retrieve Server Data with PHP using AJAX.

PROGRAM:

[Link]:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>

<style>
table {
border-collapse: collapse;
width: 100%;
}

table td,
table th {
border: 1px solid #ddd;
padding: 12px;
}

table th {
padding: 12px 0;
}

[Link] {
width: 500px;
margin: 5% auto;
}

#showData{
margin-bottom:1rem;
width:100%;
padding:10px;
}
</style>
</head>

<body>
<div class="form">
<button type="button" id="showData">Show Data</button>
<table>
<thead>
<tr>
<th>ID</th>
<td>Name</td>
<td>Email</td>
<td>Address</td>
</tr>
</thead>
<tbody>
<tr>
<td colspan="4">Click on button to get all the data from database.</td>
</tr>
</tbody>
</table>
</div>

<script src="[Link]
<script>
$(document).on('click', '#showData', function(e) {
$.ajax({
type: "GET",
url: "[Link]",
dataType: "html",
success: function(data) {
$("table > tbody").html(data);
}
});
});
</script>
</body>

</html>

[Link]:

<?php
error_reporting(0);
$hostname = "localhost";
$username = "root";
$password = "";
$databasename = "practical";

$conn = mysqli_connect($hostname, $username, $password,$databasename);


if (!$conn)
die("<tr><td colspan='4'>Unable to Connect database: " . mysqli_connect_error() .
"</td></tr>");

$query="SELECT * from users";


$exec=mysqli_query($conn, $query);
if( mysqli_num_rows($exec) > 0 ){
$output = '';
$rows = mysqli_fetch_all($exec, MYSQLI_ASSOC);
foreach( $rows as $row ){
$output .= sprintf('<tr>
<td>%d</td>
<td>%s</td>
<td>%s</td>
<td>%s</td>
</tr>', $row['id'], $row['name'], $row['email'], $row['address']);
}

die($output);
}

die("<tr><td colspan='4'>Doesn't have any data.</td></tr>");

OUTPUT:
LAB – 13
Question: Develop and demonstrate PHP Script for the following problems:

• Write a PHP Script to find out the sum of the individual digits.
• Write a PHP Script to check whether given number is Palindrome or not.
• Write a PHP Program to display current Date, Time and Delay.

PROGRAM:

Sum of Individual Digits:

<?php
$number = 567;
$sum = 0;
while($number > 0)
{
$r = $number % 10;
$sum += $r;
$number = $number / 10;
}
echo "Sum of Individual digits are: $sum";

Output:

Sum of Individual digits are: 18

Check number is palindrome or Not:

<?php
$number = 121;
$original = $number;
$reverse = 0;
while($number > 0)
{
$rem = $number % 10;
$reverse = $reverse * 10 + $rem;
$number = (int) ($number / 10);
}

if($original == $reverse)
echo "$reverse is a Palindrome";
else
echo "$reverse is not a Palindrome";

Output:
121 is a Palindrome

Display Today Date, Time and Day:

<?php
date_default_timezone_set ("Asia/Kathmandu");

echo "Date: ";


echo date("d/m/y");
echo "<br> Time: ";
echo date(" H:i:s A", time());
echo "<br> Day: ";
echo date("l");

Output:

Date: 11/03/23
Time: 14:29:25 PM
Day: Saturday
LAB – 14
Question: Implement the following web applications using PHP.

• A web application that takes a name as input and on submit it shows a hello page where name is
taken from the request. It shows the start time at the right top corner of the page and provides a
logout button. On clicking this button, it should show a logout page with Thank You message with
the duration of usage (hint: Use session to store name and time).
• A web application that takes name and age from an HTML page. If the age is less than 18, it
should send a page with “Hello <name>, you are not authorized to visit the site” message, where
<name> should be replaced with the entered name. Otherwise it should send “Welcome <name>
to this site” message.

PROGRAM

[Link]:

<?php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Application</title>

<style>
form{
max-width:400px;
margin:10% auto;
}

form input{
width: 100%;
padding: 5px 10px;
margin-bottom: 1rem;
}
</style>
</head>
<body>
<form action="[Link]" method="post">
<div class="form-group">
<label>Name</label>
<input type="text" name="name">
</div>

<input type="submit" value="Submit">


</form>
</body>
</html>

[Link]:

<?php
session_start();
date_default_timezone_set("Asia/Kathmandu");

$name = $_POST['name'];
$starttime = time();
$_SESSION['name'] = $_POST['name'];
$_SESSION['start'] = $starttime;

echo "<p align='right'>Session started at " . date("h:i:sa", $starttime) . "<br>";


echo "<form action='[Link]' method='post'>";
echo "<input type='submit' value='Logout'></p>";
echo "</form>";
echo "Hello " . $name;

[Link]:

<?php
session_start();
date_default_timezone_set("Asia/Kathmandu");
print "<p align='right'>Session started at " . date("h:i:sa",time()) . "</p><br>";
print "Thank you " . $_SESSION['name'];
$sessiontime = time() - $_SESSION['start'];
print "<br> Your session duration: " . $sessiontime . " seconds";
session_destroy();
?>
OUTPUT:

Question ii: A web application that takes name and age from an HTML page. If the age is less than 18, it
should send a page with “Hello <name>, you are not authorized to visit the site” message, where
<name> should be replaced with the entered name. Otherwise it should send “Welcome <name> to this
site” message.

PROGRAM:

Hello Suresh Chand, you are not authorized to visit the site
LAB - 15
Question: A web application that should contain a text box, selection list and radio button. Write a PHP
script to store data from the form into database using database connection and appropriate query.

PROGRAM:

[Link]:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Age Restriction</title>

<style>
form{
max-width:400px;
margin:10% auto;
}

form input{
width: 100%;
padding: 5px 10px;
margin-bottom: 1rem;
}
</style>
</head>
<body>
<form action="[Link]" method="post">
<div class="form-group">
<label>Name</label>
<input type="text" name="name">
</div>

<div class="form-group">
<label>Age</label>
<input type="text" name="age">
</div>

<input type="submit" value="Submit">


</form>
</body>
</html>
[Link]:

<?php
error_reporting(0);
$hostname = "localhost";
$username = "root";
$password = "";
$databasename = "practical";

$conn = mysqli_connect($hostname, $username, $password, $databasename);


if (!$conn)
die("<tr><td colspan='4'>Unable to Connect database: " . mysqli_connect_error() .
"</td></tr>");

$name = $_POST['name'];
$course = $_POST['course'];
$gender = $_POST['gender'];

$sql = "INSERT INTO user (name, course, gender) VALUES ('$name', '#course', '$gender')";
if( mysqli_query( $conn, $sql ) ){
echo "Inserted Successfully!!!";
}else{
echo "Unable to Insert into user.";
}

OUTPUT:

You might also like