Scribd
Upload
79 views

WEB PROGRAMMING PRACTICAL Ap

The document describes creating different HTML forms and elements. It includes code to create a college timetable using HTML table tags, a registration form with various input fields, and a sign up and sign in form. It also includes CSS code to add styling and questions about HTML forms and elements.

Uploaded by

Saiyed mo sadab
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
79 views

WEB PROGRAMMING PRACTICAL Ap

The document describes creating different HTML forms and elements. It includes code to create a college timetable using HTML table tags, a registration form with various input fields, and a sign up and sign in form. It also includes CSS code to add styling and questions about HTML forms and elements.

Uploaded by

Saiyed mo sadab
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 57

PRACTICAL No: 1

EXERCISE:
1. Make your college time table using HTML table.

<!DOCTYPE html>
<html lang="en">
<head>
<title>College Timetable</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: center;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>

<h2>College Timetable</h2>

<table>
<tr>
<th>Time/Day</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
</tr>
<tr>
<td>8:00 - 9:30</td>
<td>web programming </td>
<td>toc</td>
<td>AJP</td>
<td>M$I</td>
<td>IPDC</td>

NAME- SAIYED MOHAMMADSADAB


ENROLMENT: 211260107010
</tr>
<tr>
<td>9:30 - 11:00</td>
<td>AJP</td>
<td>IOT</td>
<td>M$I</td>
<td>WEB PROGRAMING</td>
<td>TOC</td>
</tr>
<tr>
<td>11:00 - 12:30</td>
<td>AJP</td>
<td>WEB PROGRAMMING</td>
<td>TOC</td>
<td>IPDC</td>
<td>AJP</td>
</tr>
<tr>
<td>12:30 - 2:00</td>
<td colspan="5">Lunch Break</td>

</tr>
<tr>
<td>2:00 - 3:30</td>
<td>TOC</td>
<td>IPDC</td>
<td>WEBPROGRAMMING</td>
<td>IOT</td>
<td>IOT</td>
</tr>
</table>

</body>
</html>

OUT PUT:

NAME- SAIYED MOHAMMADSADAB


ENROLMENT: 211260107010
QUIZ:
1. What does HTML stand for?

HTML stands for Hypertext Markup Language. It is the standard markup language
used for creating web pages and web applications

2. How is document type initialized in HTML5.0?

In HTML5.0, the document type declaration, also known as the DOCTYPE


declaration, is initialized as follows:
<!DOCTYPE html>

3. Which HTML tag is used to make a text bold?

The HTML tag used to make text bold is the <strong> tag.
Example:
<p>This is <strong>bold</strong> text.</p>

4. Which HTML tag is used to make an un-ordered list?

The HTML tag used to create an unordered list is the <ul> tag.
example:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
5. Which character indicates closing of a tag?
The character that indicates the closing of an HTML tag is the forward slash (/). It is used
right after the tag name to mark the end of the tag. For example:
<p>This is a paragraph.</p>

NAME- SAIYED MOHAMMADSADAB


ENROLMENT: 211260107010
NAME- SAIYED MOHAMMADSADAB
ENROLMENT: 211260107010
PRACTICAL NO - 2
Exercise:
1. Create a Registration Form.
Code:

<html>
<head>
<title>Registration Form</title>
<style> body{ background-color:powderblue;
</style>
</head>
<body
<h2>Registration From</h2>
<form>
<lable>Enter full Name:</lable>
<input type="text" id="fname"> <br><br>
<lable>Email id:</lable>
<input type="text" id="fname"> <br><br>
<lable>password:</lable>
<input type="password" id="fname"> <br><br>
<label for="date"> Enter Birth date:-</label>
<input type="date" id="date"> <br> <br>
<label for"text"> Gender:-</label>
<label for="text">Male</label>
<input type—"radio" id="male" value—"Male">
<label for="text">Female</label>
<input type="radio" id="female" value="Female">
<label for="text">Others</label>
<input type="radio" id="others" value="Others">
<br><br>
<input type="submit">
<input type="reset">
</from>
</body>
</html>

NAME- SAIYED MOHAMMADSADAB


ENROLMENT: 211260107010
OUTPUT:

Registration From
Enter full Name:

Email id:

password:

Enter Birth date:- dd-mm-yyyy

Gender:- Male Female O Others O

2. Create a Sign-up Form.


Code:

html> <html>
<head> <title>Registration Form</title>
<style> body { background-
color:powderblue;

<style>
</head>

<body>

<form>
<center>
<h2>Sign-up From</h2> <lable>Enter full
Name:</lable> <input type="text"
id="fname"> <br><br>
<lable>Email id:</lable>
<input type="text" id="fname"> <br><br>
<lable>password:</lable>

NAME- SAIYED MOHAMMADSADAB


ENROLMENT: 211260107010
<input type="password" id="fname"> <br><br>
<lable>confirm password</lable>
<input type="password">
<br><br>
<input type="submit">

</body>

</html>

3. Create a Sign-in Form.

Code:

<html>
<head>
<title>Registration Form</title>
<style> body {
background-
color:powderblue;</style
> </head><body>

NAME- SAIYED MOHAMMADSADAB


ENROLMENT: 211260107010
<form>
<center>
<h2>Sign-in From</h2>
<lable>Username:</lable> <input type—"text"
id="fname"> <br><br> <lable>password:</lable>
<input type="password" id="fname"> <br> <h6
style="color:red; ">forgot password?</h6>
<input type="submit"></html>

•3 Quiz:
1. How do you add a text area to a form?
To add a text area to a form in HTML, the <textarea> element is used.

<form>
<label for="message">Message:</label>
<textarea id="message" name="message" rows= "4 " cols="50"></textarea> </form>

2. What attribute do you set to limit the number of letters in a text field?
To limit the number of characters in a text field in HTML, the maxlength attribute is used.

<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username" maxlength="20">

NAME- SAIYED MOHAMMADSADAB


ENROLMENT: 211260107010
</form>

PRACTICAL - 3
Exercise:

l. Design a webpage for a NEWS site using an HTML tag DIV that includes positioning
margin and padding properties of CSS.

Code:
html>
<html lang="en">
<head>
< title>Breaking News</title>
<style> body { padding: 10px;
margin: 10px; border: 2px
solid black; display: flex;
flex-wrap: wrap;

. cl { text-align: center;
color: red; border: 5px
outset red; width:
100%;

. news-item { flex: 1; margin: 3px; max-width: calc (50% 2Øpx) ; / * Set maximum width
to 50% of the container minus margins * /

. red-button {
background-color: red;
color: white; padding:
10px 20px; border:
none; border-radius:
5px; text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
< / style>
</head>
<hl class='
<div class="news-item">
<img src="https://tse4.mm.bing.net/th?id=OIP.7-

NAME- SAIYED MOHAMMADSADAB


ENROLMENT: 211260107010
Heavy <span style="color:red; ">Rainfa11</span> in south Delhi, Lorem ipsum dolor sit
<br>amet, consectetur adipisicing el it . . <b> we are live click to join. . .</b></p>
<button class="red-button">LIVE</button>
</div>

<div class="news-item">
<img
src="https://tse1.mm.bing.net/th?id=OIP.300RpMSht1uHbewpVdKuwHaE8&pid=Api&P=0&h=1
8Ø" alt="Accident" width="75%" height="60%">
<p><span style="color:red; ">15th Accident in the last 3 days</span> in south Delhi, Lorem<br> ipsum
dolor sit amet, consectetur adipisicing el it . .
<button type="button">know more. .</button> </div>

<div class="news-item">
<img src="https://tse4.mm.bing.net/th?id=OIP.7-

">Rainfa11</span> in south
Delhi, Lorem ipsum dolor sit amet, consectetur adipisicing elit. .
<button type="button">know more. .</button> </div>

< / html >

Output:

BREAKING NEWS

Heavy Rainfall in south Delhi, Lorem ipsum dolor sit Heavy Rainfall in south Delhi, Lorem ipsum dolor sit amet, amet, consectetur adipisicing elit... 15th Accident in the
last 3 days in south Delhi, Lorem consectetur adipisicing elit... ipsum dolor sit amet, consectetur adipisicing elit...
we are live click to join.„ know more..
know more..

LIVE

2. Creating hovering effect using HTML CSS.


<html lang="en">
<head>

<meta charset="UTF-8"> <meta name="viewport"


content="width=device-width, initial-scale=1.O">

NAME- SAIYED MOHAMMADSADAB


ENROLMENT: 211260107010
<title>Hover Effect</title>
<style>
/ * CSS for the hover effect */
.box { width: 200px; height: 200px;
background-color: blue; transition:
background-color 0.3s ease;

/ * Change background color on hover */


.box:hover { background-
color: red;

</style>
</head>

<!-- HTML for the hover effect -->

Try Hovering

<div class="box"></div>

</html>

Output:

Try Hovering Try Hovering

(before) (after)
3. table cell and link hover effect
<html
<head>
<meta charset="UTF-8">

NAME- SAIYED MOHAMMADSADAB


ENROLMENT: 211260107010
<meta name="viewport" content="width=device-width,
<title>Hover Effects</title>
<style> table { border-
collapse: collapse; width:
100%;
table, th, td { border: Ipx
solid black; padding:
8px;
td:hover { background-color:
lightgray;
a.hover-effect:hover {
color: red;
</style>
</head>
<table>
<tr>
<td>HTML</td>

<td>JS</td>
<tr>
<td>SQL</td>
<td>React</td>
<td>Nodejs</td>
<tr>
<td>Mongodb</td>
<td>Oracle</td>
<td>Expressjs</td>
</table>

href="#" class="hover-effect">Hover Over Me</a></p>


</html>

Output:

HTML css JS

SQL React Nodejs

Mongodb Oracle Expressjs


Quiz:-

NAME- SAIYED MOHAMMADSADAB


ENROLMENT: 211260107010
1. What does CSS stand for?

CSS stands for Cascading Style Sheets.

2. Which HTML tag is used to define an internal style sheet?

The section of an HTML document.

3. Which CSS property is used to change the text color of an element?


The CSS property used to change the text color of an element is color. You can use this property to specify the
color of text content within an HTML element.
color: blue;
/* Sets the text color of paragraphs to blue */

NAME- SAIYED MOHAMMADSADAB


ENROLMENT: 211260107010
NAME- SAIYED MOHAMMADSADAB
ENROLMENT: 211260107010
PRACTICAL - 4

•• Exercise:

1. Create basic Table with bootstrap.

<html
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.O">
<title>Bootstrap Table</title>
<!-- Bootstrap CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<bodp
<div class="container">
<h2>Simple Bootstrap Table</h2>
<table class="table">
<thead>

<th scope="col">lD</th>
<th scope="col">Name</th>
<th scope="col">Age</th>

</thead>

<tr>
<th scope="row">l</th>
<td>John Doe</td>
<td>30</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jane Smith</td>
<td>25</td>
</tr>
<tr>
<th scope="row">3</th>
<td>James Johnson</td>
<td>40</td>
</tr>

</table>

</html>

NAME- SAIYED MOHAMMADSADAB


ENROLMENT: 211260107010
Output:

Simple Bootstrap Table


ID Name Age
1 John Doe 30
2 Jane Smith 25
3 James Johnson 40

2. Create List with bootstrap.

html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width,

<title>Bootstrap List</title>

<!-- Bootstrap CSS -->


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">

</head>

<div class="container">

<h2>Bootstrap List</h2>

<ul class="list-group">

<li class="list-group-item">ltem 1</li>


<li class="list-group-item">ltem 2</li>
<li class="list-group-item">ltem 3</li>
<li class--"list-group-item">ltem 4</li>
<li class="list-group-item">ltem 5</li>
</ul>

</html>

NAME- SAIYED MOHAMMADSADAB


ENROLMENT: 211260107010
Output:

Bootstrap List
Item I
Item 2
Item 3
Item 4
Item 5

3. Create Button with bootstrap.

html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.O">

<title>Bootstrap Button</title>

<!-- Bootstrap CSS -->


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">

</head>

<div class="container">

<h2>Bootstrap Button</h2>

<button type="button" class="btn btn-primary">Primary Button</button>

</html>

NAME- SAIYED MOHAMMADSADAB


ENROLMENT: 211260107010
Output:

Bootstrap Button
Primary Button
1. Bootstrap 3 is mobile first?

Yes, Bootstrap 3 was designed with a "mobile-first" approach, meaning it prioritizes


styling for smaller screens like mobile devices and then scales up for larger screens like
desktops.

2. Which class provide a responsive fixed width container?


In Bootstrap 3, the class .container provides a responsive fixed-width container.

3. Which class provide a full width container, spanning the entire width of viewport?
In Bootstrap 3, the class .container-fluid provides a full-width container, spanning the
entire width of the viewport.

4. The bootstrap grid system is based on how many columns?


The Bootstrap grid system is based on 12 columns.

5. Which class adds zebra strips to a table


In Bootstrap 3, the class .table-striped adds zebra striping to a table, which means it
applies alternating background colors to rows to enhance readability.

NAME- SAIYED MOHAMMADSADAB


ENROLMENT: 211260107010
PRACTICAL - 5
Exercise :
1. Write a JavaScript program that prints first n Fibonacci numbers. Here n will be inserted by
the user.
Ans:
<html>
<head>
<title> Fibonacci Series in JavaScript </title>
</head>
<bodp <script> var nl = O, n2 = 1, next num, i; var num = parselnt
(prompt (" Enter the limit for Fibonacci Series ")); document.write(
"Fibonacci Series: "); for ( i = 1; i num; i++){ document.write (" <br> "
+ nl); next num = nl + n2; nl = n2; n2 = next num;

</scri

</html>

C G) File I C:/Users/Admin/Desktop/fibonacci.html
Fibonacci Series:
o
2. Write JavaScript code that displays the text "SAL Education Campus" with increasing
font size in interval of 50ms in blue color. When font size reaches to 50px it should
stop. Ans:
<html>
<body style="background-color:#9EDDFF";>
<center>
<div id="h"></div> <script> var v = 0, f =
1,t="SAL Education Campus",color; function a()

v+=5,color="blue"; document.getElementByld("h").innerHTML = "<hl


style=\"font-size: margin: Opx; color : "+color+"\"><b> "+t+"</b></hl>";
f = O, t="SAL Education Campus";
c(); function c()

setTimeout(a,100);

c();
</script>
</center>

</html>
SAL Education Campus

NAME- SAIYED MOHAMMADSADAB


ENROLMENT: 211260107010
3. Write a JavaScript function to check whether a given value is an valid url or not. Ans:
html>

<head>
<title>URL Validation</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
</head>
<body>
<center>
<h3> URL Validator</h3>
<input type="text" id="urllnput" placeholder="Enter a URL">
<button onclick="checkURL()">Check URL</button>
id="result"></p>
</center>
<script> function
isValidURL(url) {
// Regular expression for a simple URL pattern (http/https/ftp/ftps)
const urlPattern = /A (https? I ftp I ftps):\/\/\S+$/i;
return urlPattern.test(url);

function checkURL() { const inputURL =


const
resultElement = document.getElementByld( I result');

if (isValidURL(inputURL)) {
resultElement.innerText = "Valid URL";
} else { resultElement.innerText = "Invalid
URL";

</script>

</html>

URL Validator

Valid URL

4. Write a JavaScript program that work as a trim function (string) using regular
expression. Ans:
html>

NAME- SAIYED MOHAMMADSADAB


ENROLMENT: 211260107010
<html>
<head>
<title>Custom String Trim</title>
</head>

<center>
<h2>Trim Function</h2>
<input type="text" id="inputString" placeholder="Enter a string with spaces">
<button onclick="trimString()">Trim</button>
id="trimmedResult"></p>
</center>
<script> function
customTrim(inputString) {
// Use a regular expression to remove leading and trailing whitespace return
I \S+$/g,

function trimString() { const inputElement = document.getElementByld( I


inputString'); const trimmedResultElement =
document.getElementByld('trimmedResult'); const inputString =
inputElement.value; const trimmedString = customTrim(inputString);
trimmedResultElement.innerText = trimmedString;

</script>

</html>

Trim Function

Rohit Sharma

5. Write a JavaScript function to check whether a given value is IP value or not. Ans:
html>

<head>
<title>lP Address Validator</title>
<script> function validatelP() { var ipAddress =
document.getElementByld('ipAddress').value;

var pnode=document.getElementByld("res"); if
(ipPattern.test(ipAddress)) {
pnode.textContent="lP Address is Valid. ";

NAME- SAIYED MOHAMMADSADAB


ENROLMENT: 211260107010
} else { pnode.textContent="lP Address is
Invalid.";

</script>
</head>

<center>
<h1>lP Address Validator</hl>
<form>
<label for="ipAddress">Enter IP Address:</label>
<input type="text" id="ipAddress" name="ipAddress" required>
<button type="button" onclick="validatelP()">Validate</button>
</form> id="res"></p>
</center>
</body>
</html>

IP Address Validator
Enter IPAddress: 192.188.455.255
Address is

Quiz:
1. Inside which HTML element do we put the JavaScript?
Ans: JavaScript code is placed inside the <script> element in HTML.

2. How do you write "Hello World" in an alert box? Ans: To display "Hello World" in an alert box
use syntax World");

3. How do you create a function in JavaScript?


Ans: A function in JavaScript is created using the 'function s keyword, like this: function
myFunction() {}.

4. How do you round the number 7.25, to the nearest integer?


Ans: To round 7.25 to the nearest integer, you can use Math.round(7.25);

5. Which operator is used to assign a value to a variable? Ans: The assignment operator in
JavaScript is z.

6. Is JavaScript case-sensitive?
Ans: Yes, JavaScript is case-sensitive.

NAME- SAIYED MOHAMMADSADAB


ENROLMENT: 211260107010
PRACTICAL - 6
Exercise:
1. Perform complete form validation name, email, phone number, checkbox etc using
JavaScript.
Ans:
<html>
<head>
<title>Validation form</title>
</head>
<body>
<center style="border:2px solid black; padding:20px; width:500px; margin: 100px
450px;">
<h2>Validation Form</h2>
<form id="myForm" onsubmit="return validateForm()">
<div style="padding: 10px;">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<div id="nameError"></div>
</div>
<div style="padding: IOpx;">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<div id="emailError"></div>
</div>
<div style—"padding: 10px;">
<label for="phone">Phone:</label>
<input type—"tel" id—"phone" name—"phone">
<div id="phoneError"></div>
</div>
<div style="padding: IOpx;">
<input type="checkbox" id="checkbox" name="checkbox">
<label for="checkbox">Agree with terms and conditions.</label>
<div id="checkboxError"></div>
</div>
<button type="submit">Submit</button>
</form>
</center> <script> function validateForm() { var name =
document.getElementById('name').value; var email =
document.getElementById('email').value; var phone =
document.getElementById('phone').value; var checkbox =
document.getElementById('checkbox').checked; var nameError —
document.getElementById('nameError'); var emailError =
document.getElementById('emailError'); var phoneError =
document.getElementById('phoneError'); var checkboxError =
document.getElementById('checkboxError'); var isValid = true; if

NAME- SAIYED MOHAMMADSADAB


ENROLMENT: 211260107010
(name == ") { nameError.innerText = 'Name is required.'; isValid
false;
} else { nameError.innerText
—

if (email emailError.innerText 'Email


is required.'; isValid = false;
} else if (!/\S+@\S+\.\S+/.test(email)) {
emailError.innerText = 'Email is invalid.',
isValid = false; } else { emailError.innerText
—

if (phone phoneError.innerText — 'Phone


number is required.'; isValid = false; } else if
{ phoneError.innerText =
'Phone number is invalid.'; isValid = false; } else {
phoneError.innerText

if (!checkbox) { checkboxError.innerText = 'Checkbox must


be checked.' , isValid = false; } else {
checkboxError.innerText —

return isValid;

</script>
</body>
</html>

Output:

Validation Form
Name: John

Please include an in the email address. •johnl 234' is missing an


C) Agree with terms and conditions-
Submit

2. Design a login form using HTML & JavaScript with following validations on
• username and password fields.
• Password length must be 6 to 12 characters
• Username should not start with _, @ or number. • Phone number must be 10 digit
start with 6/7/8/9
Ans:

NAME- SAIYED MOHAMMADSADAB


ENROLMENT: 211260107010
<html
<head>
<title>Login Form</title>
<script> function validateForm() { var username =
document.getElementById("username").value; var password —
document.getElementById("password").value; var phoneNumber
= document.getElementById("phone").value; var
A
usernamePattern = / [a-zA-Z] [a-zA-Z0-9] * $1; var
passwordPattern = JA. {6, 12} $1; var phonePattern {9}
$1;

if { alert("Username is invalid. It
should not start with @, , or a number."); return false;

if (!password.match(passwordPattern)) {
alert("Password must be 6 to 12 characters long.
"); return false;

if (!phoneNumber.match(phonePattern)) { alert("Phone number is invalid. It


must be 10 digits and start with 6, 7, 8, or return false;

</script>
</head>
<body>
<center style="border:2px solid black; padding:20px; width:500px; margin: 100px
450px;
<h2>Login Form</h2>
<form onsubmit="return validateForm()">

<div style="padding: 10px;">


<label for="username">Username:</label>
<input type="text" id="username" name="username" required><br>

<div style="padding: 10px;">


<label for="password">Password:</label>
<input type="password" id="password" name—"password" required><br>
</div>
<div style="padding: IOpx;">
<label for="phone">Phone No</label>
<input type="text" id="phone" name="phone" required><br>
</div>

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


</form>
</center>

NAME- SAIYED MOHAMMADSADAB


ENROLMENT: 211260107010
</body>
</html>

Output :
X Login Form

ons%20(1),html

This page says


Phone number is invalid. It must be 10 digits and start with 6, 7, 8, or 9.

Login Form OK

Usemame:

Password:

PhoneNo
Login

Quiz:
1. How to use external JavaScript file?
Ans: To use an external JavaScript file:
Create a js file with your JavaScript code.
Link it in your HTML with <script src="filename.js"> </script>
You can now use the JavaScript functions and variables in your HTML.
2. What is the working of timers in JavaScript?
Ans: Timers in JavaScript are functions that schedule code execution at specific times
or intervals. setTimeout runs code once after a delay setlnterval runs code repeatedly
at regular intervals, and requestAnimationFrame is used for smooth animations.

3. How can you convert the string of any data base to an integer in Javascript?
Ans: You can convert a string to an integer in javascript using parselnt() or Number().

4. What are the different data types present in JavaScript?


Ans: JavaScript has two main data type categories:
Primitive Data Types:
Number
String
Boolean
Undefined
Null
Symbol (ES6)

NAME- SAIYED MOHAMMADSADAB


ENROLMENT: 211260107010
Biglnt (ESII)

Reference Data Types: e


Object
Array
Function

These data types cover the essentials for working with JavaScript.

5. Explain Implicit type coercion in JavaScript.


Ans: Implicit type coercion in JavaScript is the automatic conversion of data types
during operations. For example, JavaScript can convert between strings and numbers
or evaluate truthiness. This can lead to unexpected behavior, so be cautious and use
strict equality (==) to avoid it.

NAME- SAIYED MOHAMMADSADAB


ENROLMENT: 211260107010
NAME- SAIYED MOHAMMADSADAB
ENROLMENT: 211260107010
PRACTICAL - 7
Exercise :
1. Write a PHP program to print alphabet triangles.

ABA
ABCBA ABCDCBA Ans :
<?php
$height = 4; // Change the height of the triangle as needed for ($i — 0; $i

< $height; $i++) {

for ($j = $height - $i; $j > 1; $j--) { echo

for ($j 0; $j <= $i; $j++) { echo chr(65 + $j);

for ($j $i - 1; $j 0; $j--) { echo chr(65 + $j);

echo "<br>"; echo PHP EOL ;

Output:

ABA
ABCBA ABCDCBA

2. Write a PHP program to print the factorial of a number.


Ans:

<?php function factorial($n) { if($n


0) { return 1;
} else { return $n * factorial($n - 1);

$number = 5;

if ($number < 0) { echo "Factorial is not defined for negative


numbers." ,
NAME- SAIYED MOHAMMADSADAB
ENROLMENT: 211260107010
} else {
$result = factorial($number); echo "Factorial of
$number is $result";

Output:

Factorial of 5 is 120

3. Write a PHP program to check Armstrong numbers

Ans:

function isArmstrongNumber($number) {

$numStr = (string)$number;
$numDigits = strlen($numStr);

$sum — 0;
for ($i = 0; $i < $numDigits; $i++) {
$digit — (int)$numStr[$i];
$sum += pow($digit, $numDigits);

if($sum — $number) { return true;


} else { return false;

$numberl = 153;
$number2 370; $number3 = 371;

if (isArmstrongNumber($numberl)) { echo $numberl . " is an


Armstrong number.\n.<br>";
} else { echo $numberl is not an Armstrong number.\n.<br>";

NAME- SAIYED MOHAMMADSADAB


ENROLMENT: 211260107010
if (isArmstrongNumber($number2)) { echo $number2 . " is an
Armstrong number.\n.<br>";
} else { echo $number2 . " is not an Armstrong number.\n.<br>";

if (isArmstrongNumber($number3)) { echo $number3 is an


Armstrong number.\n.<br>";
} else { echo $number3 . is not an Armstrong number.\n.<br>";

153 is an Armstrong number. .


370 is an Armstrong number.
371 is an Armstrong number.
4. Write a PHP program to check palindrome numbers.

Ans:

<?php function isPalindrome($number) {


$originalNumber = $number; $reverseNumber = 0;

while ($number > 0) {


$remainder = $number % 10;
$reverseNumber = $reverseNumber * 10 + $remainder;
$number = (int)($number / 10);

if ($originalNumber == $reverseNumber) { return true; // It's a


palindrome
} else { return false;

$numberl = 121;
$number2 = 12321; $number3 — 45678;

if (isPalindrome($number1)) { echo $numberl is a palindrome


number.\n.<br>";
} else { echo $numberl . is not a palindrome number.\n.<br>";

if (isPalindrome($number2)) { echo $number2 . " is a palindrome


number.\n.<br>";
} else { echo $number2 . " is not a palindrome number.\n.<br>";

NAME- SAIYED MOHAMMADSADAB


ENROLMENT: 211260107010
if (isPalindrome($number3)) { echo $number3 is a palindrome
number.\n.<br>";
} else { echo $number3 . is not a palindrome number.\n.<br>";

121 is a palindrome number.


12321 is a palindrome number.
45678 is not a palindrome number. .
5. Write a PHP script for login authentication.
Ans:
<?php
$valid username = "username";
$valid_password "password";
$username — $password
$error =

if METHOD"] "POST") {

$username — $ POST["username"]; $password = $ POST["password"]; if ($username


$valid username && $password — $valid_password) {

header("Location: secure_page.php"); exit();


} else {

$error — "Invalid username or password. Please try again." ,


html>
<html>
<head>
<title>Login Page</title>
</head>
<body>
<h2>Login</h2>
<form echo $ SELF"]•
<label for="username">Username:</label>
<input type="text" id="username" name="username" value="<?php echo $username;
?>" required><br><br>

<label f0F"password">Password:</label>
<input type="password" id="password" name="password" required><br><br>

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


</form>

NAME- SAIYED MOHAMMADSADAB


ENROLMENT: 211260107010
<p style="color: red;"><?php echo $error; ?></p>
</body>
</html>
Login page

C CD localhosVanswerS.php

Login
Username:

password:

Login

Invalid username or password. Please try again.

6. Design an html form which takes username and password from user and validate
against stored username and password in file.

Ans:

Index.html

html>
<html>
<head>
<title>Login Form</title>
</head>
<body>
<h2>Login Form</h2>
<form action="validate.php" method="post">

<label for="username">Username:</label>
<input type="text" id="username" name="username" required><br><br>

<label for="password">Password:</label>
<input type="password" id="password" name="password" required><br><br>

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


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

validate.php

NAME- SAIYED MOHAMMADSADAB


ENROLMENT: 211260107010
<?php

$credentials file = 'credentials.txt';

if METHOD"] "POST") {
$username — $ POST ["username"];
$password = $ POST ["password"];

$stored_credentials = flle($credentials file,


FILE IGNORE NEW LINES I FILE SKIP EMPTY LINES);

if ($stored_credentials !== false) { foreach ($stored_credentials as $line) {


list($stored_username, $stored_password) = explode(':', $line); if ($username
— $stored username && $password
$stored_password) {

echo "Login successful! " • exit();

echo "Invalid username or password. Please try again. ",


Login Form

C C) localhost,ftndex.html

Login Form
Username: shailendra

Password:

Login

localhost/validate.php

C (D localhost/validate.php Login

successful!

NAME- SAIYED MOHAMMADSADAB


ENROLMENT: 211260107010
7. Write a php code to calculate the number of days between to two input dates if the
difference is even number then render background color as blue or red.

Ans:
<?php
$startDate = isset($_POST['start date']) ? $ POST['start_date'] : null;
$endDate isset($ POST['end date']) ? $ : null;
$backgroundColor if ($startDate &&

$endDate) { $startTimestamp =

strtotime($startDate); $endTimestamp

strtotime($endDate);

if ($startTimestamp !== false && $endTimestamp !—= false) {


$differenceInDays = round(($endTimestamp - $startTimestamp) / (60 * 60 * 24));

// Check if the difference in days is even or odd if


($differenceInDays % 2
$backgroundColor — 'blue';
} else {
$backgroundColor — 'red';

html>
<html>
<head>
<title>Date Difference</title>
</head>
<body>
<h2>Calculate Date Difference</h2>
<form method="post" action="<?php echo $ SERVER['PHP SELF']; ?>">
<label for="start date">Start Date:</label>
<input type="date" id="start date" name="start date" required><br><br>

<label for="end date">End Date:</label>


<input type—"date" id="end date" name—"end date" required><br><br>

<input type—"submit" value="Calculate">


</form>

<?php if ($backgroundColor): ?>


NAME- SAIYED MOHAMMADSADAB
ENROLMENT: 211260107010
<div style="background-color: <?php echo $backgroundColor; padding: 10px;
margin-top: 20px;">
<?php echo "Difference in days: $differenceInDays; ?>

<?php endif;

</html>

Calculate Date Difference


Start Date: 20-10-2023 6

End Date:

Calculate

Calculate Date Difference


Start Date: 10-10-2023

End Date:

Calculate

Quiz :
1. All variables in PHP start with which symbol?
In PHP, all variables start with the dollar symbol ($) symbol.

NAME- SAIYED MOHAMMADSADAB


ENROLMENT: 211260107010
PRACTICAL - 8
EXERCISE:
1. Perform keep me logged checkbox checked using cookie.
->INPUT:
Login.html
< ! DOCTYPE html >
<html>
<head>
< title>Login</tit1e>
</head>
< body>
<h2>Login</h2>
< form method="post" action=" login .
< label ">Username : < / label >
< input type=" text" id="username " name—
I'username" required><br><br>
< label for="password">Password:</IabeI>
< input type="password" id="password" sword"
required><br><br>
< input type=" checkbox" id=" keep me logged" name="
keep me logged" >
< label for="keep me logged" >Keep me logged in</

< input type=" submit"


< / form>
</body> </html>
Login.php: < ?php if ($ SERVER ["REQUEST METHOD"] - -
"POST")
$username $ POST [ "username
$password $ POST ["password"] ;
$keepMeLogged isset ($ POST ["keep me logged"] )
$ POST "keep me logged" ] " on "
if ($username "Virat" & & $password
"12345678" )
// Authentication is successful if
($keepMeLogged) {
// Set a cookie to remember the user setcookie
("username" , $ username , time ( ) * 60 * 24 * 30,
setcookie ( "password" , $password, time ( )
* 60 * 24 * 30 ,
// Redirect to a secure page or user dashboard
header ("Location: page 1 .php") • exit ( ) ;
// Invalid username or password echo "
Invalid username or password.
Please try again. "
else { echo 'Invalid username or password. Please try
again. " ;
Pagel.php: < ?php if (isset ($ COOKIE [
"username"] ) && isset ( $ COOKIE ["password"] )
)

NAME- SAIYED MOHAMMADSADAB


ENROLMENT: 211260107010
$username $ COOKIE ["username"] $password = $
COOKIE ["password"]
echo "Welcome back, $username ! " •
header ("Location: login. html ") ; exit ( )
;
Output :
(i)
localhost/php-practice/loggedln.html C O localhost/php-practice/pagel
.php
Login Velcome back, Ihrat!

Username: Virat

Password:

Keep me logged in
Login

2. Write a php script for setting and retrieving your name and email address using cookies.
->INPUT:

set cookies.html
< ! DOCTYPE html >
<html>
<head>
< title>Set
</head>
<body>
<h2>Set Name and Email</h2>
< form method="post" action=" set set .php">
< label for=" name " >Name : < / label >
< input " " name " name=" name " required><br><br>

< label for=" email ">EmaiI


< input " id=" email" name=" email " required><br><br>

< input type=" submit" value="Set Cookies < / form>

</body> < / html >

show_cookies.php

< ! DOCTYPE html >

<head>
< title>Set Cookies</title>
</head>
<body>
<h2>Set Name and Email</h2>
< form method="post" action=" set set .php">
< label for=" name " >Name : < / label >
< input type=" text" id=" name" name=" name " required><br><br>
NAME- SAIYED MOHAMMADSADAB
ENROLMENT: 211260107010
< label for=" email ">EmaiI
<input type="text" id=" email" name=" email " required><br><br>

< input type=" submit" value=" Set Cookies < / form>

</body> </html>

setset.php
< ?php if ($ SERVER ["REQUEST METHOD"] - " POST" )
$ name = $ POST ["name"] ;
$ email S POST ["email"] ;
// Set cookies to store name and email setcookie ("user name" ,
$name, time ( ) + 60 * 60 * 24 * 30,

setcookie ("user email" , $ email, time ( ) + 60 * 60 * 24 *


30,
// Redirect to a page that displays the stored information header (
"Location: show cookies .php") ; exit () ;

Output :
f.- (D localhost/set-cookies/set_cookies.html
Set Name and Email
ame: Virat

Set
Cookies

3.Perform login to logout session handling. None logged in users can not access the page.

->INPUT:

Login.html

NAME- SAIYED MOHAMMADSADAB


ENROLMENT: 211260107010
< ! DOCTYPE html >
<html>
<head>
< title>Login</tit1e>
</head>
<body>
<h2>Login</h2>
< form method="post" action=" loginphp .php">
< label for="username ">Username : < / label>
<input type=" text" id="username" " required><br><br>

< label for="pas sword " >Password : < / label >


< input type="password" id="password" name="password"
required><br><br>

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


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

dashboard. php

<?php session start ( ) ;

if ( !isset ($ SESSION [ 'user' ] ) ) header


( "Location: login . php") ; exit ( ) ;

$username = $ SESSION [ 'user' ] •

< ! DOCTYPE html >

<head>
< title>Dashboard</titIe>
</head>
<body>
<h2>We1come, <?php echo $username; ?>!</h2>
<p>This is the dashboard. Only logged—in users can access this page.</p>
<a href=" logout .
</body> < / html >

logout . php :
< ?php session start ( ) ;

// Unset all of the session variables session unset (


) ;

// Destroy the session session destroy()


;
// Redirect to the login page after logging out header
("Location: login . php") ; exit ( ) ;

Loginphp . php :
< ?php session start () ;

NAME- SAIYED MOHAMMADSADAB


ENROLMENT: 211260107010
Check if the user is already logged in if (isset
($ SESSION C ' user' ] ) ) header ( "Location :
dashboard . php") ; exit () ;

if ($ SERVER [ 'REQUEST METHOD' ] - 'POST' )


$username = $ POST [ 'username' ] ;
$password = $ POST [ 'password' ] ;

// Replace this with your actual authentication logic if ($username


'virat' && $password — ' 12345678 ' ) $ SESSION [ 'user' ] - $username;
// Set a session variable to mark the user as logged in header
("Location: dashboard.php") ; exit ( ) ;

$error = " Invalid username or password. Please try again. " ;

Output :

(D localhost,/loggedout/login.html

Login
Username: virat

password:
Login

C O localhost/loggedout/dashboard.php

Welcome, virat!
This is the dashboard. Only logged-m users can access
this page.

4.Write a php program to greet the user based on time.

->INPUT:

< ?php date default timezone set ("Asia/ Kolkata") ;

NAME- SAIYED MOHAMMADSADAB


ENROLMENT: 211260107010
$currentHour = date ("G") ;

if ($currentHour >= 5 && $currentHour < 12) {


$greeting = "Good morning" ; elseif ($currentHour >= 12 &&
$currentHour < 18) $greeting — "Good afternoon" ; elseif
($currentHour >= 18 && $currentHour < 24)
$greeting = "Good evening" ;

$greeting = "Good night" ;

< ! DOCTYPE html >


<html>
<head>
< title>Greeting</tit1e>
</head>
<body>
<h2><?php echo $greeting; User ! </h2>
</body>
< / html >
Output :
Greeting

localhost/time.php

Good afternoon, User!

5.Write a php code to upload file on server and display file details on the page (ex. file name,
extension,file size)

->INPUT:

Index . html

< ! DOCTYPE html >


< html >
<head>
< title>FiIe
</head>
<body>
<h2>Up10ad a File</h2>
< form php" method="post" enctype= "mul t i
part / fo rm—data " >
NAME- SAIYED MOHAMMADSADAB
ENROLMENT: 211260107010
< input type=" file" name=" fileToUp10ad" id="
fileToUp10ad" required><br><br>
< input type=" submit " value="Up10ad File" >
< / form>
< / body>
< / html >

Upload. php

< ?php if ($ SERVER ["REQUEST METHOD"] " POST" isset


($ FILES ["fileToUpIoad"] ) )
$ file — $ FILES ["fileToUp10ad"] ;

$file name $ file [ "name " ] ;


$ file temp — $ file ["tmp name"] ;
$file size $ file [ " size"] ;
$ file extension = path info ( $ file name,
PATHINFO EXTENSION) ;

$upload directory — "uploads/" ,


$unique file name — uniqid ( )
$ file extension;
$ file destination — $upload directory
$unique file name;

if (move uploaded file ( $ file temp, $ file


destination) )
echo "File uploaded successfully! <br>" ;
echo "File name : $ file name
echo "File extension: $ file extension
"<br>" ;
echo "File size: $ file size bytes
else { " ;
echo "File upload failed. "
Output :
File Upload

C G) localhost/index.html CD

Upload a File

Choose File WD Practic...116010.docx


Upload File
Q) ENG 17•.50

Type here to search 23-10-2023


localhowupload.php
o x

NAME- SAIYED MOHAMMADSADAB


ENROLMENT: 211260107010
(D localhost/upload.php
+
File uploaded successfully! CD

File name: WD Practical 7


File .221263116010.docx extension: docx size:
File 783391 bytes p

1 r.50
@ Q)) ENG
Type here to search 23-10-2023

6. Create a web page which shows the use of Session. (Create, Retrieve, Modify Delete and Destroy
Session Variables)

->INPUT:

< ?php session start ( ) ;

if (isset ($ POST set Session' ] ) )


$ SESSION [ 'user' ] $ POST [ 'username' ]

if (isset ($ POST 'modifySession' ] )


$ SESSIÖN[ 'user' ] - ' Modi f i ed User' ;

if (isset ($ POST [ deleteSession' ] )


unset ($ SESSION [ 'user' ] ) ;

if(isset ($ POST [ ' destroySession '


session destroy() ;
session start ( ) ;
$sessionData = isset ($ SESSION [ 'user' ] )
SESSION [ 'user' ] ' Session variable is not set. '

< ! DOCTYPE html >


< html >
<head>
< title>Session Example</title>
</head>
<body>
<h2>Session Example</h2>

NAME- SAIYED MOHAMMADSADAB


ENROLMENT: 211260107010
< form method="post">
< label for="username " >Username : < / label >
< input type="text" id="username" name="username ">
< input type=" submit" name=" set Session" value=" Set
Session" >
< input type=" submit" name= "modi fySess ion " value="Modify
Session ">
< input type=" submit " name=" deleteSession " value="DeIete
Session" >
< input type=" submit" name=" destroySession " value="Destroy
Session" >
< / fo rm>

<p>Session Data: <?php echo $sessionData;


< / body> < / html
>

Output :

Session Example
Username: Set Session Modify Session Delete Session Destroy Session
Session Data: shailendra

p Type here to search n 44

QUIZ:

1. How do you create a cookie in PHP?


To create a cookie in PHP, use the function with parameters for the cookie name, value,
expiration time, and path.

2. What is the purpose of $_SESSION [l?


SESSIONR is used to store and manage session data in PHP.

3. What is the default execution time set in set_time_limit()?


The default execution time set in is

NAME- SAIYED MOHAMMADSADAB


ENROLMENT: 211260107010
NAME- SAIYED MOHAMMADSADAB
ENROLMENT: 211260107010
PRACTICAL - 9
EXERCISE:

1. Perform complete user registration i.e. signup, display, update and delete in php.

->INPUT:
regi s tration . php

< ?php session start ( ) ;

if (isset ($ POST [ 'register' ] ) )


$ username $ POST [ 'username' ] ;
$ email $ POST [ ;
$password = $ POST [ 'password' ] • $ SESSION

[ 'user' ] - $ username;

header ( "Location : profile .php") ; exit () ;

< ! DOCTYPE html >


<html>
<head>
< title>User Registration</title>
</head>
<body>
<h2>Sign up</h2>
< form method="post" action=" registration .
<label for=" username " >Username : < /
< input label > type="text"
required><br><br> name="username "

<label
< input for=" email " >EmaiI : < /
required><br><br> label > type=" email" name="
email "
< input
required><br><br> for="password " >Pas sword : < /
label > type="password"
< inputname="password"
value=" Register" >
< / fo rm>
</body> type=" submit" name=" register"
< / html >
Profile . php
< ?php session start ( ) ; if ( !isset ($
SESSION [ 'user' ] ) ) header ( "Location :
registration .php") ; exit () ;

$user — $ SESSION [ 'user' ] ;

< ! DOCTYPE html >


NAME- SAIYED MOHAMMADSADAB
ENROLMENT: 211260107010
<html>
<head>
< title>User
</head>
<body>
<h2>We1come, <?php echo $user; ? > !
<p>This is your user profile.</p>
</body> < / html >

Output:

Sign up
Username: virat

Email: [email protected]

Password:
Register

C G) localhost/registration/profile.php

Welcome, virat!
This is your user profile.

2. Write a php code to check whether the given username is already in the "login_tbl" table or not and
display an appropriate message. ->INPUT:

< ?php
$ servername = " local host" ;
$username = "root" ;
$password — $database —

// Create a connection to the database


$connection = mysqli connect ($servername, $ username,
$password, $database) ;

Check the database connection if ( ! $connection) { die


("Connection failed: mysqli connect error ( ) ) ;

if ($ SERVER [ "REQUEST METHOD"] - "POST") $ input


username — $ POSTC 'username'] ;

NAME- SAIYED MOHAMMADSADAB


ENROLMENT: 211260107010
// Query to check if the username exists in the database
$ query - "SELECT * FROM login tbl WHERE username ' $ input
username ' " ;
$ result = mysqli query ($connection, $query) ;

if ($result && mysqli num rows ($result) > 0)


$message — "Username ' $ input username ' is already in use. "

$message — " Username $ input username is available. "

// Close the database connection mysqli close


($connection) ;

< ! DOCTYPE html >


<html>
<head>
< title>Check Username</title>
</head>
<body>
<h2>Check Username
< form method="post" action="<?php echo
$ SERVER ['PH? SELF' ] ;
< label for=" username " >Username : < / label >
< input type="text" id="username" name="username "
required><br><br>
< input type=" submit" value="Check Username" >
< / form>
?php if (isset ($message) ) echo $message; ?></p>
< / body>
< / html >

< input type=" submit" name=" register" value="Register">


< / fo rm>
< / body> </html>

Output :

NAME- SAIYED MOHAMMADSADAB


ENROLMENT: 211260107010
G) localhost/check_username.php

Check Username Availability


Username:
Check Username
Username 'rohit' is available.

here to search lg22


Type 23-10-2023

3. Write a PHP Calculator class which will accept two values as arguments, then add them, subtract
them, multiply them together, or divide them on request

->INPUT:

< ?php class Calculator { private


$valuel; private $vaIue2;

public function construct ($valuel, $va1ue2)


$this—>valuel $valuel; $ this—
>va1ue2 $vaIue2 ;

public function add ( ) return $this—>valuel + $ this—


>vaIue2;

public function subtract ( ) return $ this—>valuel —


public function multiply ( ) return
$this—>valuel * $this—>vaIue2;

public function divide ( ) if ($this—>va1ue2 return


"Division by zero is 0) not allowed. " ;

return $ this—>valuel / $ this—>vaIue2;

/ / Usage
$calculator — new Calculator (10, 5 ) ;

echo " Addition : $calculator—>add ( ) echo " Subtraction :


$calculator—>subtract ( ) echo "Multiplication: "

"<br>" ; echo "Division :


NAME- SAIYED MOHAMMADSADAB
ENROLMENT: 211260107010
Output :

locath0WCakulator.php

CD
(D localhost/Calculator.php

Addition: 15
Subtraction: 5
Multiplication: 50
Division: 2

Type here to search 23-10-2023

QUIZ:

1. Can I run several versions of PHP at the same time?


Yes, by configuring your web server and using tools like FastCGl or containers, you can run multiple PHP versions
simultaneously on the same server.

2. Can echo in php accept more than 1 parameter?


No, in PHP can only accept one argument at a time.

3. What is the actually used PHP version?


The actually used PHP version can vary depending on the server and configuration. You can determine the
specific PHP version by creating a PHP file with s phpinfo()' and accessing it through a web browser.

4. How do you execute a PHP script from the command line?


To execute a PHP script from the command line, use the command 'php your_script.php', replacing
'your_script.php' with the actual script filename.

5. What is the main difference between require() and require_once()?


'require()' can include a file multiple times, while ensures a file is included only once to prevent
duplication.

6. How is it possible to set an infinite execution time for PHP script?


You can set an infinite execution time for a PHP script using but it's not recommended
for production environments due to potential issues and security concerns.

NAME- SAIYED MOHAMMADSADAB


ENROLMENT: 211260107010
NAME- SAIYED MOHAMMADSADAB
ENROLMENT: 211260107010
PRACTICAL - 10
EXERCISE:

1. Create your own jQuery AJAX form having a submit button with validation feature

Code :
Index.html

html>
<html>
<head>
<title>jQuery AJAX Form</title>
<script src="https://code.jquery.com/jquery-3.6.O.min.js"></script>
<script src="script.js"></script> </head>

<h2>jQuery AJAX Form</h2>


<form id="myForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br><br>

<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>

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


</form>
<div id="response"></div>

</html>

Script.js

$(document).ready(function() {
$('#myForm').submit(function(e) {
e.preventDefault();

// Client-side validation (you should use more robust validation in production) var
name = var email = $('#email').val();

if (!name I l !email) { fill in all


fields."); return;
// AJAX request to handle form submission
NAME- SAIYED MOHAMMADSADAB
ENROLMENT: 211260107010
$.ajax({ type: 'POST', url: 'process.php' data:
$(this).serialize(), success: function(response)
{
$(l#response').html(response);

Output :
jQueryAJAX Form

(D

localhosundex.html jQuery AJAX Form

Name:

Email: [email protected]

Submit

2. Write a code to validate user input using jQUERY.

Code :
Index.html

html>
<html>
<head>
<title>Email Validation</title>
<script src=" https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<h2>Email Validation</h2>
<input type="text" id="emaillnput" placeholder="Enter your email">
<button id="validateButton">Validate</button> id="validationMessage"></p>
</body>
</html>
Script.js

$(document).ready(function() {
$('#validateButton').click(function() { var email =

NAME- SAIYED MOHAMMADSADAB


ENROLMENT: 211260107010
if (isValidEmail(email)) {
$('#validationMessage').text('Valid email address.');
} else { email address. l );

function isValidEmail(email) { var emailPattern = /A [a-zA-Z0-9.


return emailPattern.test(email);

Output :
EmailValidation

C) localhost/lndex.html

Email Validation

Valid email address.

p
3. Write a code of jQuery AJAXload content of selected element from a file.

Code :

html>
<html>
<head>
<title>Load Content with jQuerY</title>
<script src="https://code.jquery.com/jquery-3.6.O.min.js"></script> <script >
$(document).ready(function() {
$('#contentSelector').change(function() { var selectedFile =
$(this).val();
$('#loadedContent').load(selectedFile);

</script>
</head>

<h2>Load Content with jQuery</h2>


<select id="contentSelector">

NAME- SAIYED MOHAMMADSADAB


ENROLMENT: 211260107010
<option value="content1.html">Content l</option>
<option value="content2.html">Content 2</option>
</select>
<div id="loadedContent">
</html>
Output :

Load Content with jQuery


v

QUIZ:

1. Is jQuery a library for client scripting or server scripting?


jQuery is a client-side scripting library, not for server-side scripting.

2. Is it possible to use jQuery together with AJAX?


Yes, jQuery can be used with AJAX to simplify and enhance the process of making asynchronous
requests to a server.

3. What are the real web applications of AJAX currently running in the market? AJAX is used in real
web applications for features like dynamic content loading, real-time updates on social media,
web-based email, e-commerce, maps, collaboration tools, weather apps, and online chat. These
applications leverage AJAX to provide a seamless and interactive user experience.

4. What are the technologies used by AJAX?


AJAX combines JavaScript (JS), XMLHttpRequest (XHR), the Document Object Model (DOM), HTML,
CSS, JSON or XML, and server-side technologies to enable asynchronous data retrieval and
dynamic updates on web pages.

5. What are the features of jQuery?


Key features of jQuery include DOM manipulation, event handling, AJAX support, animations,
cross-browser compatibility, plugins, chaining, AJAX promises, simplification of common
tasks, extensibility, compact size, documentation, and a large community.

NAME- SAIYED MOHAMMADSADAB


ENROLMENT: 211260107010
NAME- SAIYED MOHAMMADSADAB
ENROLMENT: 211260107010

You might also like