Scribd
Upload
31 views

web-tech-practical (1)-1-24

Uploaded by

MD EMAT HAIDER
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
31 views

web-tech-practical (1)-1-24

Uploaded by

MD EMAT HAIDER
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 24

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 = document.getElementById('username');
if(username.value.trim().length < 4 ){
username.style.border = "solid 1px red";
alert("Username Should Be at least 4 character.");
return false;
}

const password = document.getElementById('password');


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

const education = document.getElementsByName('edu[]');


for(let i=0; i<education.length; 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:

home.html:

<!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="logo.html" scrolling="no">
<frame src="title.html">
</frameset>
<frame src="menu.html" name="f2" scrolling="no">
<frameset cols="15%,85%" bordercolor="red">
<frame src=" branches.html" name="f31">
<frame src="homedes.html" name="f32">
</frameset>
</frameset>

</html>

logo.html:

<html>

<body>
<img src="logo.png">
</body>

</html>

title.html:

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

menu.html:
<html>

<body>
<table width="100%">
<tr>
<td> <a href="homedes.html" target="f32">Home </a></td>
<td> <a href="login.html" target="f32">Login </a></td>
<td> <a href="registration.html" target="f32">Registration</a></td>
<td> <a href="catalogue.html" target="f32">Catalogue </a></td>
<td> <a href="cart.html" target="f32">Cart </a></td>
</tr>
</table>
</body>

</html>

branches.html:

<html>
<table cellspacing=15>
<tr>
<td> <a href="csit.html" target="f32">CSIT </a></td>
</tr>
<tr>
<td><a href="bca.html" target="f32"> BCA </a> </td>
</tr>
<tr>
<td><a href="civil.html" target="f32">CIVIL </a></td>
</tr>
</table>
</body>

</html>

homedes.html:

<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
[email protected])
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 = document.getElementById("fname").value;
const lname = document.getElementById("lname").value;
const email = document.getElementById("email").value;
const phone = document.getElementById("phone").value;
const address = document.getElementById("address").value;
const password = document.getElementById("password").value;

//validating first name


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

//validating password
if( password.length < 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( ! email.match( emailExp ) ){
alert("Provide valid email address.");
return false;
}

//validating phone number


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

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

//validating address
if( address.length == 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="style.css">

<!-- 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 = d.getDate();
var month = d.getMonth();
month++;
var year = d.getFullYear();
document.getElementById("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 = document.getElementById("capital");
const country = document.getElementById("country");
capital.value = country.value;
}
</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("user.xml");
$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:

You might also like