Scribd
Upload
109 views119 pages

SR - No. Experiment Page No. Date Marks Signature From To

The document describes two experiments related to designing webpages using HTML and CSS. The first experiment involves designing a webpage containing a time table and registration form using HTML tags like <table>, <tr>, <td>, <th>, rowspan, and colspan. The second experiment requires designing a registration form based on a given figure using HTML tags, CSS for styling, and including inputs, textarea, selects and a submit button.

Uploaded by

Jaxx xx
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
109 views119 pages

SR - No. Experiment Page No. Date Marks Signature From To

The document describes two experiments related to designing webpages using HTML and CSS. The first experiment involves designing a webpage containing a time table and registration form using HTML tags like <table>, <tr>, <td>, <th>, rowspan, and colspan. The second experiment requires designing a registration form based on a given figure using HTML tags, CSS for styling, and including inputs, textarea, selects and a submit button.

Uploaded by

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

Page No.

Sr.No. Experiment Date Marks Signature


From To

Design a webpage using an html that


1.
contains a time table and form for
Registration Page.
Design a web page with CSS
2. containing A) Relative, Absolute
positioning B) Margin and Padding
C) Pseudo class.
Design a table and list using Bootstrap
3. with CSS.

Write a program using the concept of


4. JavaScript.

5. Write PHP code to print the first 10


Fibonacci numbers.
Write a program using the concept of
6. PHP.

Write a program using the concept


7. of PHP.

Learning Login management with


8. session and cookies in PHP.

Develop a program in PHP and


9. JavaScript that demonstrate insert,
update and delete operation.

10. Create a form with validation using


AJAX and jQuery.

190020107101 Jaitr Page: - 1


EXPERIMENT NO: 1

TITLE: Designing a webpage using an html that contains a time table and form for
Registration Page.

OBJECTIVES: On completion of this experiment students will be able to…


● HTML TAGS
● TABLE TAG, ROWSPAN, COLSPAN
● Develop forms in html
● Understand action, methods (GET & POST).

THEORY:
HTML – HyperText Markup Language is basically divided into two portions head and
body. Headis used to preserve information for browsers and search engines like title, meta
tags etc. While the body part contains the things that you want to display to the user in terms
of a web page.

<HTML>
<HEAD>
Title, meta tags information goes here
</HEAD>
<BODY>
Display portion code goes here
</BODY>
</HTML>

HTML TABLES:
● A table is defined using the <table> element, and contains a number of table cells ( <td>,
for
―table data columns ) which are organized into table rows ( <tr>). The markup
(HTML code) for a table is always based on rows, never columns.
● Table cells which act as column headers or row headers should use the <th> (table
header)element.
● Table cells can be merged using the colspan and rowspan attributes.

CODE:

<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border="1" bordercolor="green" bgcolor="yellow">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>

190020107109 Jignesh Page: - 2


<td rowspan="2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan="3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>

Example for the registration page :

THEORY:

The <form> element

The <form> element is required to wrap around the form‘s content — without it
you don‘thave a web form. The <form> tag can have a few attributes.

NOTE: YOU CAN NOT NEST FORM INSIDE FORM

The <input> element

The <input> element defines an area where you can type or paste information.

The type attribute

<input type="text"> to specify that we want single line text input fields (the type
attribute is mandatory). Other type attributes values are password, radio, checkbox,

190020107109 Jignesh Page: - 3


email, phone etc

The name attribute

Every <input> element must also have a name attribute that you, the developer, specify.
The only exceptions to this rule are special cases where the value attribute is set to the
same value asthe type attribute, e.g., type="submit" or type="reset". The name attribute
is needed for the database or other data destination to uniquely identify that piece of
data.

The value attribute

Every <input> element should also have a value attribute. The value of this attribute
depends on the element it is used on. The field in the value will be displayed as it is
inside the text box.

<input type="submit">

Special <input> element with the attribute value="submit". Instead of rendering a text
box for input, the submit input will render a button that, when clicked, submits the
form‘s data to whatever target the form has specified.
When the submit button will be clicked, It will directly go to the path given in the form
action. The data transfer will be as per the method (GET or POST) you mentioned.

CODE:

<form action=ǁǁ method=ǁǁ>


Name: <input type="text" name="name" id="name" value="" /> Email:
<input type="text" name="email" id="email" value="" />
Comments: <textarea name="comments" id="comments" cols="25" rows="3"></textarea>
<input type="submit" value="submit" />
</form>

190020107109 Jignesh Page: - 4


1) Design a form for an online ticket booking system.

• PR-1-1.html

<!DOCTYPE html>
<head>
<title>PR-1</title>
<style>
body {
margin: 0;
padding: 0;
}
.container {
width: 80%;
height: auto;
margin: 25px auto;
padding: 2rem;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: #FEE2C5;
border-radius: 5px;
}
.title {
font-size: 1.5rem;
}
.form {
font-size: 1.2rem;
padding: 10px;
width: 65%;
}
.form input, .form textarea {
width: 100%;
margin: 15px 0;
}
.form select {
padding: 5px 10px;
margin-bottom: 15px;
background-color: #D7A86E;
border-radius: 4px;
}
.form button {
padding: 7px 15px;
background-color: #D7A86E;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="container">

190020107109 Jignesh Page: - 5


<div class="title">
<h2>Online Ticket Booking</h2>
</div>
<div class="form">
<label>Name</label><br>
<input type="text" /><br>
<label>Email</label><br>
<input type="text" /><br>
<label>Phone</label><br>
<input type="text" /><br>
<label>Address</label><br>
<textarea rows="3" columns="5"></textarea><br>
<label>Select Source : </label>
<select name="source">
<option>Ahmedabad</option>
<option>Surat</option>
<option>Gandhinagar</option>
<option>Mehasana</option>
<option>Rajkot</option>
</select><br>
<label>Select Destination : </label>
<select name="destination">
<option>Ahmedabad</option>
<option>Surat</option>
<option>Gandhinagar</option>
<option>Mehasana</option>
<option>Rajkot</option>
</select><br>
<button>Book Ticket</button>
</div>
</div>
</body>
</html>

Output: -

190020107109 Jignesh Page: - 6


190020107109 Jignesh Page: - 7
2) Design a Registration form using HTML on the basis of the below given figure.

• PR-1-2.html

<!DOCTYPE html>
<head>
<title>PR-1</title>
<style>
body {
margin: 0;
padding: 0;
}
.container {
width: 80%;
height: auto;
margin: 25px auto;
padding: 2rem;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: #FEE2C5;
border-radius: 5px;
}
.title {
font-size: 1.5rem;
}
.form {
font-size: 1.2rem;
padding: 10px;
width: 65%;
}
.form input, .form textarea {
width: 100%;
margin: 15px 0;
}
.form select {

190020107101 Jignesh Page: -8


padding: 5px 10px;
margin-bottom: 15px;
background-color: #D7A86E;
border-radius: 4px;
}
.form button {
padding: 7px 15px;
background-color: #D7A86E;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="container">
<div class="title">
<h2>Online Ticket Booking</h2>
</div>
<div class="form">
<label>Name</label><br>
<input type="text" /><br>
<label>Email</label><br>
<input type="text" /><br>
<label>Phone</label><br>
<input type="text" /><br>
<label>Address</label><br>
<textarea rows="3" columns="5"></textarea><br>
<label>Select Source : </label>
<select name="source">
<option>Ahmedabad</option>
<option>Surat</option>
<option>Gandhinagar</option>
<option>Mehasana</option>
<option>Rajkot</option>
</select><br>
<label>Select Destination : </label>
<select name="destination">
<option>Ahmedabad</option>
<option>Surat</option>
<option>Gandhinagar</option>
<option>Mehasana</option>
<option>Rajkot</option>
</select><br>
<button>Book Ticket</button>
</div>
</div>
</body>
</html>

Output: -

190020107101 Jignesh Page: -9


190020107101 Jignesh Page: -10
3) Create a replica of the below given figure, using HTML.

• PR-1-3.html

<!DOCTYPE html>
<head>
<title>PR-1</title>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid black;
text-align: center;
padding: 10px;
}
tr:nth-child(even) {
background-color: aqua;
}
tr:nth-child(odd) {
background-color: lawngreen;
}
</style>
</head>
<body>
<h3 style="background-color: rgb(183, 250, 117); text-align: center">
Jaitra Patel 200020107537(C.E) sem-6
</h3>
<h1 style="background-color: rgb(125, 250, 250); text-align: center">
Employee Data
</h1>
<table>
<tr>
<th>Employee Number</th>
<th>Employee Name</th>

190020107101 Jignesh Page: -11


<th>Employee Salary</th>
<th>Employee Image</th>
</tr>
<tr>
<td>9480254833</td>
<td>HARRY</td>
<td>15000</td>
<td>
<img
style="width: 100px; height: 120px"
src="https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcRruWFn0SxoT8sV9s13_u1Ez3YaUq5cPAWTxTAZLnCwJHwDP
UCwMW6vNl2flNrUTAorsRU&usqp=CAU"
/>
</td>
</tr>
<tr>
<td>9988548456</td>
<td>JOHN</td>
<td>19500</td>
<td>
<img
style="width: 100px; height: 120px"
src="https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcRruWFn0SxoT8sV9s13_u1Ez3YaUq5cPAWTxTAZLnCwJHwDP
UCwMW6vNl2flNrUTAorsRU&usqp=CAU"
/>
</td>
</tr>

<tr>
<td>8526475789</td>
<td>SMITH</td>
<td>20000</td>
<td>
<img
style="width: 100px; height: 120px"
src="https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcRruWFn0SxoT8sV9s13_u1Ez3YaUq5cPAWTxTAZLnCwJHwDP
UCwMW6vNl2flNrUTAorsRU&usqp=CAU"
/>
</td>
<tr>
<td>9411259101</td>
<td>ALEX</td>
<td>30000</td>
<td><img style="width:100px;height:120px;"
src="https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcRruWFn0SxoT8sV9s13_u1Ez3YaUq5cPAWTxTAZLnCwJHwDP
UCwMW6vNl2flNrUTAorsRU&usqp=CAU">
</td>

190020107101 Jignesh Page: -12


</tr>
</table>
</body>
</html>

Output: -

QUIZ:

1. What does HTML stand for?


Ans:- HyperText Markup Language.

2. What is the correct HTML element for inserting a line break?


Ans:- <br></br>

190020107101 Jignesh Page: -13


EVALUATION:

Involvement Understanding / Timely Completion Total


Problem solving
(4) (3) (10)
(3)

Signature with date:

190020107101 Jignesh Page: -14


EXPERIMENT NO: 2

TITLE: Designing a web page with CSS containing A) Relative, Absolute positioning B)
Margin and Padding C) Pseudo class

OBJECTIVES: On the completion of this experiment students will be able to…


● Use relative and absolute positioning
● Margin and padding concepts.
● Pseudo class concepts.

THEORY:

STATIC POSITIONING:

.static { position:
static;
}
<div class="static"> Write something here </static>

static is the default value. An element with position: static; is not positioned in any
special way.A static element is said to be not positioned and an element with its position
set to anything elseis said to be positioned.

RELATIVE POSITIONING:

.relative1 { position:
relative;
}
.relative2 { position:
relative;
top: -
20px;left:
20px;
background-color: white;width: 500px;
}
<div class="relative1">
relative behaves the same as static unless you add some extra properties.
</div>
<div class="relative2"> </div>

Setting the top, right, bottom, and left properties of a relatively-positioned element will
cause it to be adjusted away from its normal position. Other content will not be adjusted
to fit into any gap left by the element.

190020107101 Jignesh Page: -15


FIXED POSITIONING:

A fixed element is positioned relative to the viewport, which means it always stays in
the same place even if the page is scrolled. As with relatives, the top, right, bottom, and
left properties are used.

.fixed { position:
fixed; bottom: 0;
right: 0; width:
200px;
background-color: white;
}
<div class="fixed">
</div>

ABSOLUTE POSITIONING:

absolute is the trickiest position value. absolute behaves like fixed except relative to the
nearest positioned ancestor instead of relative to the viewport. If an absolutely-
positioned element has no positioned ancestors, it uses the document body, and still
moves along with page scrolling. Remember, a "positioned" element is one whose
position is anything except static.

.relative { position:
relative; width:
600px; height:
400px;
}
.absolute { position:
absolute;
top: 120px;
right: 0;
width:
300px;
height: 200px;
}
<div class="relative">
This element is relatively-positioned. If this element was position: static; its absolutely-
positioned child would escape and would be positioned relative to the document body.

<div class="absolute">
This element is absolutely-positioned. It's positioned relative to its parent.
</div>

190020107101 Jignesh Page: -16


CSS Margins

CSS margins are used to create space around the element. We can set the
different size ofmargins for individual sides(top, right, bottom, left).

Margin properties can have following values:

1. Length in cm, px, pt, etc.

2. Width % of the element.

3. Margin calculated by the browser: auto.

Syntax:

p{
border: 1px solid red; margin:
size }

1. If the margin property has 4 values:


margin: 40px 100px 120px 80px;
1. top = 40px
2. right = 100px
3. bottom = 120px
4. left = 80px

2. If the margin property has 3 values:

margin:40px
100px 120px;top
= 40px
right and
left = 100px
bottom =
120px
3. If the margin property has 2 values:

margin: 40px
100px; top and
bottom = 40px;
left and right =
100px;

4. If the margin property has 1 value:


margin: 40px;
top, right, bottom and left = 40px;

190020107101 Jignesh Page: -17


CSS Padding

CSS paddings are used to create space around the element, inside any defined border.
We can set different paddings for individual sides(top, right, bottom, left). It is important
to add border properties to implement padding properties.

Padding properties can have following values:


1. Length in cm, px, pt, etc.
2. Width % of the element.

NOTE : All the four cases will be the same as described in


themargin.

INTERNAL CSS:

<!DOCTYPE html>
<html>
<head>
<style> body {
background-color: linen;
}
h1 {
color: maroon; margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

EXTERNAL CSS:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

190020107101 Jignesh Page: -18


INLINE CSS:

<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>

190020107101 Jignesh Page: -19


1) Design a web page for a news site using an HTML Table that includes positioning, margin
and padding properties of CSS.

• PR-2-1.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<title>Jaitra's Personal Site</title>
<style>
body {
background-color: #eaf6f6;
}

hr {
border-color: grey;
border-style: none;
border-top-style: dotted;
border-width: 5px;
width: 5%;
}

h1 {
color: #66bfbf;
}

h3 {
color: #66bfbf;
}
</style>
</head>

<body>
<table cellspacing="20">
<tr>
<td>
<img
width="200"
height="200"
src="Images/circle-cropped-animoji-image.png"
alt="Earth Picture"
/>
</td>
<td>
<h1>Jaitra Patel</h1>
<p>
<em
>Just a student pursuing
<strong
><a href="https://en.wikipedia.org/wiki/Computer_engineering"

190020107101 Jignesh Page: -20


>Computer Engineering.</a
></strong
></em
>
</p>
<p>
I am just what good at studing and try to explain it to others and
try to make new thing using the skills that i learned from college
or Internet. I am an Android app and Web Developer. I love reading,
well not deep into it but i have read 6-7 books. i love coffee.
</p>
</td>
</tr>
</table>

<hr />
<h3>Education</h3>
<ul>
<li>SSC from TERF.</li>
<li>Computer Engineering, Diploma from L.J. Polytechinc.</li>
<li>Pursuing Degree in Computer Engineering from A.I.T</li>
</ul>
<hr />
<h3>Study Experience</h3>
<table cellspacing="10">
<thead>
<tr>
<th>Dates</th>
<th>Study</th>
</tr>
</thead>
<tbody>
<tr>
<td>2017-2020</td>
<td>Completed Diploma</td>
</tr>
<tr>
<td>2020-2023</td>
<td>Pursuing Degree</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
<hr />
<h3>Skills</h3>

<table cellspacing="10">
<tr>
<td>Android Development ⭐⭐⭐ </td>
<td>Photography ⭐⭐</td>
</tr>

190020107101 Jignesh Page: -21


<tr>
<td>Web Development ⭐⭐</td>
<td>Painting ⭐⭐ ⭐</td>
</tr>
</table>

<hr />
<a href="#">My Hobbies</a>
<a href="#">Contact Me</a>
</body>
</html>

Output: -

190020107101 Jignesh Page: -22


2) Design an HTML+CSS page to understand the concept of pseudo classes.

• PR-2-2.html

<!DOCTYPE html>
<head>
<title>PR-2</title>
<style>
h2 {
color: #BDD2B6;
}
.classEx {
color: #A2B29F;
}
#idEx {
color: #798777;
}
</style>
</head>
<body>
<h2 class="classEx">This is class selector</h2>
<h2 id="idEx">This is id selector</h2>
<h2>This is simple h2 tag selector</h2>
</body>
</html>

Output: -

190020107101 Jignesh Page: -23


3) Design html page using CSS that changes color of the table cells on mouse hover. It
should also change the colors of the links (default link/ link on mouse hover and
visited link)

• PR-2-3.html

<!DOCTYPE html>
<head>
<title>PR-2</title>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}

td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}

tr:nth-child(even):hover {
background-color: #FEFBE7;
}
tr:nth-child(odd):hover {
background-color: #F7ECDE;
}
a:link{
color: #B4E197;
}
a:hover{
color: #83BD75;
}
a:visited{
color: #4E944F;
}
</style>
</head>
<body>
<table>
<tr>
<th>Heading-1</th>
<th>Heading-2</th>
<th>Heading-3</th>
</tr>
<tr>
<td>Sample Data-1</td>
<td>Sample Data-2</td>
<td><a href="#">Sample Data-3</a></td>
</tr>

190020107101 Jignesh Page: -24


<tr>
<td>Sample Data-4</td>
<td>Sample Data-5</td>
<td><a href="#">Sample Data-6</a></td>
</tr>
<tr>
<td>Sample Data-7</td>
<td>Sample Data-8</td>
<td><a href="#">Sample Data-9</a></td>
</tr>
<tr>
<td>Sample Data-10</td>
<td>Sample Data-11</td>
<td><a href="#">Sample Data-12</a></td>
</tr>
<tr>
<td>Sample Data-13</td>
<td>Sample Data-14</td>
<td><a href="#">Sample Data-15</a></td>
</tr>
</table>
</body>
</html>

Output: -

190020107101 Jignesh Page: -25


QUIZ:

1. What does CSS stand for?


Ans: - Cascading Style Sheet.

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


Ans: - <style></style>

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


Ans: - color: color-name;

4. What is the default value of the position property?


Ans: - Static.

EVALUATION:

Involvement Understanding / Timely Completion Total


Problem solving
(4) (3) (10)
(3)

Signature with date:

190020107101 Jignesh Page: -26


EXPERIMENT NO: 3

TITLE: Design a table and list using Bootstrap with CSS.

OBJECTIVE: After completing this experiment students will be able to understand…


● CONCEPT OF BOOTSTRAP

THEORY: What is Bootstrap?

● Bootstrap is a free front-end framework for faster and easier web development
● Bootstrap includes HTML and CSS based design templates for typography,
forms, buttons, tables, navigation, modals, image carousels and many other, as
well as optional JavaScript plugins
● Bootstrap also gives you the ability to easily create responsive designs Example

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="jumbotron text-center">


<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<p>Lorem ipsum dolor..</p>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<p>Lorem ipsum dolor..</p>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<p>Lorem ipsum dolor..</p>
</div>
</div>
</div>

190020107101 Jignesh Page: -27


</body>
</html>

The following example shows the code for a basic Bootstrap page (with a full width
container):

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
</body>
</html>

190020107101 Jignesh Page: -28


1) Create a simple table with Bootstrap.

• PR-3-1.html

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Bootstrap Table Example</h2>
<table class="table">
<thead>
<tr>
<th>Heading-1</th>
<th>Heading-2</th>
<th>Heading-3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sample Data-1</td>
<td>Sample Data-2</td>
<td>Sample Data-3</td>
</tr>
<tr>
<td>Sample Data-4</td>
<td>Sample Data-5</td>
<td>Sample Data-6</td>
</tr>
<tr>
<td>Sample Data-7</td>
<td>Sample Data-8</td>
<td>Sample Data-9</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

190020107101 Jignesh Page: -29


Output: -

190020107101 Jignesh Page: -30


2) Create a list with Bootstrap.

• PR-3-2.html

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Bootstrap List Example</h2>
<ul class="list-group">
<li class="list-group-item active">Sample List Item-1</li>
<li class="list-group-item">Sample List Item-2</li>
<li class="list-group-item">Sample List Item-3</li>
<li class="list-group-item">Sample List Item-4</li>
<li class="list-group-item">Sample List Item-5</li>
</ul>
</div>
</body>
</html>

Output: -

190020107101 Jignesh Page: -31


3) Create buttons with Bootstrap.

• PR-3-3.html

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Bootstrap Button Example</h2>
<a class="btn btn-primary btn-lg" href="#" role="button">Link</a>
<button class="btn btn-primary btn-sm" type="submit">Button</button>
<button type="button" class="btn btn-lg btn-primary" disabled>Primary
button</button>
<input class="btn btn-primary btn-sm" type="submit" value="Submit">
<button type="button" class="btn btn-outline-light">Light</button>

</div>
</body>
</html>

Output: -

QUIZ:

1. If you want to have 3 equal columns in Bootstrap, which class would you use?
Ans: - .col Class.

2. What Bootstrap version should you use if you need to support IE9?
Ans: - Bootstrap 3.

190020107101 Jignesh Page: -32


EVALUATION:

Involvement Understanding / Timely Completion Total


Problem solving
(4) (3) (10)
(3)

Signature with date:

190020107101 Jignesh Page: -33


EXPERIMENT NO: 4

TITLE: Write a program using the concept of JavaScript.

OBJECTIVES: On the Completion of this experiment students will be able to…


● Javascript variable and output handling knowledge
● Decision making in javascript
● Know about how to validate fields of the form using javascript.

THEORY:

JAVASCRIPT

JavaScript is a cross-platform, object-oriented scripting language used to make webpages


interactive (e.g. having complex animations, clickable buttons, popup menus, etc.). There are
also more advanced server side versions of JavaScript such as Node.Js which allow you to
add more functionality to a website than simply downloading files (such as real time
collaboration between multiple computers). Inside a host environment (for example, a web
browser), JavaScript can be connected to the objects of its environment to provide
programmatic control over them.

JavaScript could be simply written at the head or body portion. Syntax:


<script type=ǁtext/javascriptǁ>
</script>
Variable Declaration:
var x = 10;
var y = ‗hello‘;
to print the message : document.write(‗message body‘)

<!DOCTYPE html>
<head>
<SCRIPT LANGUAGE="JavaScript">
function calculate(form) {
var num=parseInt(form.number.value); if (isNaN(num) || num < 0) {
form.result.value=(form.number.value + " is not a valid number! Try again!");
}
if (num == 1 || num == 2) { form.result.value=(num + " is prime!");
}
for (var i=2;i<num;i++) { if (num
% i == 0) { var prime="yes";
form.result.value=(num + " is not prime. It is divisible by " + i + "."); break;
}
if (num % i != 0) var prime="no";
}
if (prime == "no") form.result.value=(num + " is prime!");
}
</SCRIPT>
</head>
<body>

190020107101 Jignesh Page: -34


<center>
<form name=form>
<h2>Prime Number Calculator</h2><p> Please enter a number:<br>
<input type=text name=number size=7>
<input type=button value="Calculate" onClick="calculate(this.form)">
<P>
<input type=text name=result size=45 value="">
</form>
</center>
</body>
</html>

OUTPUT:

Validation Code:

Can not be blank:

function validateForm() {
var x = document.forms["myForm"]["fname"].value; if (x == "") {
alert("Name must be filled out"); return false;
}
}

<form name="myForm" action="/action_page.php" onsubmit="return validateForm()"


method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>

Password and Retype password must be same:

<script type="text/javascript"> function matchpass(){


var firstpassword=document.f1.password.value;
var secondpassword=document.f1.password2.value;

if(first password==second password){ return true;


}
else{
alert("password must be same!"); return false;
}

190020107101 Jignesh Page: -35


}
</script>
<form name="f1" action="register.jsp" onsubmit="return match pass()">
Password:<input type="password" name="password" /><br/>
Re-enter Password:<input type="password" name="password2"/><br/>
<input type="submit">
</form>

Form validation typically involves two functions:

1. Basic Validation: This warrants that all the mandatory fields are filled. It would
require just a loop through each field in the form and check for data.
2. Data Format Validation: Data validation checks the data for its correctness. Your
code must include appropriate logic to test the accuracy of data.
3. Empty field validation :

<form name="contact_form" method="post" action="/cgi-bin


in/articles/development/javascript/form-validation-with-javascript/contact_simple.cgi"
onsubmit="return validate_form ( );">

We have to create a function that returns whether validation is done or not ? function
validate_form ( )
{
valid = true;
if ( document.contact_form.contact_name.value == "" )
{
alert ( "Please fill in the 'Your Name' box." ); valid = false;
}

return valid;

Email Validation:

function check email()


{
var x=document.myform.email.value; var atposition=x.indexOf("@");
var dotposition=x.lastIndexOf(".");
if (atposition<1 || dotposition<atposition+2 || dotposition+2>=x.length){ alert("Please
enter a valid email address\n atpostion:"+atposition+"\n
dotposition:"+dotposition);
return false;
}
}

190020107101 Jignesh Page: -36


1) Perform complete form validation name, email, phone number, checkbox etc using
JavaScript.

• PR-4-1.html

<!DOCTYPE html>
<head>
<title>PR-4</title>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
background-color: #FAF5E4;
margin-left: 25%;
margin-top: 50px;
width: 50%;
box-shadow: 5px 5px 5px 5px #EEEEEE;
}
.display-start {
text-align: left;
margin: 7px 0 7px 40px;
}
.center {
text-align: center;
}
.inp {
margin: 5px;
}
.btn {
padding: 7px 15px;
background-color: #F8ECD1;
box-shadow: 2px 2px #EEEEEE;
}
</style>
</head>
<body>
<div class="container">
<div class="center">
<h2>Registration Validation</h2>
<input class="inp" type="text" placeholder="Name" id="name" />
<br>
<p id="name-error"></p>
<br>
<input class="inp" type="email" placeholder="Email" id="email" />
<br>
<p id="email-error"></p>
<br>
<input class="inp" type="tel" placeholder="Phone" id="phone"
maxlength="10"/>
<br>

190020107101 Jignesh Page: -37


<p id="phone-error"></p>
<br>
<div class="display-start">
<label class="hobbies-label">Hobbies</label><br>
<input type="checkbox" id="hobbies1" name="hobbies1"
value="Bike">
<label for="hobbies1"> Reading</label><br>
<input type="checkbox" id="hobbies2" name="hobbies2"
value="Car">
<label for="hobbies2"> Listening To Music</label><br>
<input type="checkbox" id="hobbies3" name="hobbies3"
value="Boat">
<label for="hobbies3"> Cycling</label><br>
<p id="check-error"></p>
</div>
<input type="button" name="submit" value="Login" class="btn inp"
id="check"/>
<br>
<p id="result"><strong></strong></p>
</div>
</div>
<script>

let btn = document.getElementById('check');

btn.addEventListener("click", function() {
let name = document.getElementById('name').value;
let phone = document.getElementById('phone').value;
let email = document.getElementById('email').value;

let check1 = document.getElementById('hobbies1');


let check2 = document.getElementById('hobbies2');
let check3 = document.getElementById('hobbies3');

let nameError = document.getElementById('name-error');


let emailError = document.getElementById('email-error');
let phoneError = document.getElementById('phone-error');
let checkError = document.getElementById('check-error');

let nameRegEx = /^[a-zA-Z ]+$/;


let phoneRegEx = /^[6-9]\d{9}$/;
let emailRegEx = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;

if(!check1.checked && !check2.checked && !check3.checked)


{
checkError.innerHTML = "Please select one checkbox...!"
}

if(name.length < 1 && email.length < 1 && phone.length < 1)


{
nameError.innerHTML = "Cannot be blank..!";

190020107101 Jignesh Page: -38


emailError.innerHTML = "Cannot be blank..!";
phoneError.innerHTML = "Cannot be blank..!";
}
else if(!emailRegEx.test(email) && !nameRegEx.test(name) &&
!phoneRegEx.test(phone))
{
nameError.innerHTML = "Enter a valid name..!";
emailError.innerHTML = "Enter a valid email address..!";
phoneError.innerHTML = "Enter a valid phone number";
} else {
result.innerHTML = "Registration Successfully...!"
nameError.innerHTML = "";
emailError.innerHTML = "";
phoneError.innerHTML = "";
}
});
</script>
</body>
</html>

Output: -

190020107101 Jignesh Page: -39


190020107101 Jignesh Page: -40
2) Design a login form using HTML & JavaScript with following validations on username
and password fields.

1. Password length must be 6 to 12 characters


2. Username should not start with _, @ or number.
3. Phone number must be 10 digit start with 6/7/8/9
4. All fields should not be blank.

• PR-4-2.html

<!DOCTYPE html>
<head>
<title>PR-4</title>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
background-color: #FAF5E4;
margin-left: 25%;
margin-top: 50px;
width: 50%;
box-shadow: 5px 5px 5px 5px #EEEEEE;
}
.display-div {
text-align: center;
}
.center {
text-align: center;
}
.inp {
margin: 5px;
}
.btn {
padding: 7px 15px;
background-color: #F8ECD1;
box-shadow: 2px 2px #EEEEEE;
}
</style>
</head>
<body>
<div class="container">
<div class="center">
<h2>Login</h2>
<input class="inp" type="text" placeholder="Username" id="uname" />
<br>
<p id="uname-error"></p>
<input class="inp" type="tel" placeholder="Phone" id="phone" />
<br>
<p id="phone-error"></p>
<input class="inp" type="text" placeholder="Password" id="pass" />

190020107101 Jignesh Page: -41


<br>
<p id="pass-error"></p>
<input type="button" name="submit" value="Login" class="btn inp"
id="check"/>
<br>
<p id="result"><strong></strong></p>
</div>
</div>
<script>

let btn = document.getElementById('check');


let result = document.getElementById('result');

let unameError = document.getElementById('uname-error');


let phoneError = document.getElementById('phone-error');
let passError = document.getElementById('pass-error');

btn.addEventListener("click", function() {
let uname = document.getElementById('uname').value;
let pass = document.getElementById('pass').value;
let phone = document.getElementById('phone').value;

let unameRegEx = /^[a-zA-Z]([._-]?[a-zA-Z0-9]+)*$/;


let phoneRegEx = /^[6-9]\d{9}$/;
let passRegEx = /^[A-Za-z]\w{6,12}$/;

if(pass.length < 1 && uname.length < 1 && phone.length < 1)


{
passError.innerHTML = "Cannot be blank..!";
unameError.innerHTML = "Cannot be blank..!";
phoneError.innerHTML = "Cannot be blank..!";
}
else if(!passRegEx.test(pass) && !unameRegEx.test(uname) &&
!phoneRegEx.test(phone))
{
passError.innerHTML = "Enter a valid password..!";
unameError.innerHTML = "Enter a valid username..!";
phoneError.innerHTML = "Enter a valid phone number";
} else {
result.innerHTML = "Login Successfully...!"
passError.innerHTML = "";
unameError.innerHTML = "";
phoneError.innerHTML = "";
}
});
</script>
</body>
</html>

Output: -

190020107101 Jignesh Page: -42


190020107101 Jignesh Page: -43
3) Write a javascript program that prints first n Fibonacci numbers. Here n will be inserted by
the user.

• PR-4-3.html

<!DOCTYPE html>
<head>
<title>PR-4</title>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
background-color: #FAF5E4;
margin-left: 25%;
margin-top: 50px;
width: 50%;
box-shadow: 5px 5px 5px 5px #EEEEEE;
}
.display-div {
text-align: center;
}
.center {
text-align: center;
}
.inp {
margin: 5px;
}
.btn {
padding: 7px 15px;
background-color: #F8ECD1;
box-shadow: 2px 2px #EEEEEE;
}
</style>
</head>
<body>
<div class="container">
<div class="center">
<h2>Fibonacci Number</h2>
<input class="inp" type="text" placeholder="Enter Number"
name="number" id="number" />
<br>
<input type="button" name="submit" value="Generate" class="btn inp"
id="check"/>
<br>
</div>
</div>
<script>

let btn = document.getElementById('check');

190020107101 Jignesh Page: -44


let n1 = 0 , n2 = 1, nextTerm;

btn.addEventListener("click", function() {
let num = Number(document.getElementById('number').value);
document.write("<strong>Fibonacci Series: </strong>");
for(let i = 1; i <= num; i++) {
document.write("<strong> " + n1 + " </strong>");
nextTerm = n1 + n2;
n1 = n2;
n2 = nextTerm;
}
});
</script>
</body>
</html>

Output: -

190020107101 Jignesh Page: -45


4) Write JavaScript code that displays the text “AHMEDABAD INSTITUTE OF
TECHNOLOGY” with increasing font size in interval of 50ms in blue color when font size
reaches to 50px it should stop.

• PR-4-4.html

<!DOCTYPE html>
<head>
<title>PR-4</title>
<style>
p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<p id="demo"></p>
<script>
var var1 = setInterval(inTimer, 1000);
var fs = 5;
var ids = document.getElementById("demo");
function inTimer() {
ids.innerHTML = "AHMEDABAD INSTITUTE OF TECHNOLOGY";
ids.setAttribute("style", "font-size: " + fs + "px; color: red");
fs += 5;
if (fs >= 50) {
clearInterval(var1);
var2 = setInterval(deTimer, 1000);
}
}
function deTimer() {
fs -= 5;
ids.innerHTML = "AHMEDABAD INSTITUTE OF TECHNOLOGY";
ids.setAttribute("style", "font-size: " + fs + "px; color: blue");
if (fs === 5) {
clearInterval(var2);
}
}
</script>
</body>
</html>

190020107101 Jignesh Page: -46


Output: -

190020107101 Jignesh Page: -47


5) Write a JavaScript program for lighting bulb using different colors as specified in the
below given image.

• PR-4-5.html

<!DOCTYPE html>
<body>
<img id="myImage" onclick="changeImage()" src="./images/pic_bulboff.gif"
width="100" height="180" alt="Example-images">

<p>Click the light bulb to turn on/off the light.</p>

<script>
function changeImage() {
var image = document.getElementById('myImage');
if (image.src.match("bulbon")) {
image.src = "./images/pic_bulboff.gif";
} else {
image.src = "./images/pic_bulbon.gif";
}
}
</script>

</body>
</html>

Output: -

190020107101 Jignesh Page: -48


QUIZ:

1. Inside which HTML element do we put the JavaScript?


Ans: - <script></script>

2. How do you write "Hello World" in an alert box?


Ans: - window.alert(‘Hello World’);

3. How do you create a function in JavaScript?


Ans: - Using function keyword. Eg.) function display(){console.log(“Hi”);}

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


Ans: - Using round() function.

5. Which operator is used to assign a value to a variable?


Ans: - “=”.

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

EVALUATION:

Involvement Understanding / Timely Completion Total


Problem solving
(4) (3) (10)
(3)

Signature with date:

190020107101 Jignesh Page: -49


EXPERIMENT NO: 5

TITLE: Write PHP code to print the first 10 Fibonacci numbers.

OBJECTIVES: On the completion of this experiment students will be able to…


● Know the syntax, variable declaration in PHP
● Loops and decision making controls
● How to run PHP code.

THEORY:

PHP : Introduction

PHP started out as a small open source project that evolved as more and more people found
out how useful it was. Rasmus Lerdorf unleashed the first version of PHP way back in 1994.

PHP is a recursive acronym for "PHP: Hypertext Preprocessor".

PHP is a server side scripting language that is embedded in HTML. It is used to manage
dynamic content, databases, session tracking, even build entire e-commerce sites.

It is integrated with a number of popular databases, including MySQL, PostgreSQL, Oracle,


Sybase, Informix, and Microsoft SQL Server.

Syntax:

<?php

?>
Variable declaration:

<?php
$a = ‗abc‘;
$b = 123;
echo $a; // Print variable value
echo ‗second variable :‘.$b; // concatenation with .
?>

190020107101 Jignesh Page: -50


1) Write a PHP program to print alphabet triangles.
A
ABA
ABCBA
ABCDCBA
ABCDEDCBA

• PR-5-1.php

<?php
$alpha = range('A', 'Z');
$k = 0;
for($i=0; $i<=4; $i++)
{
for($j=0; $j<=$i; $j++)
{
echo $alpha[$j];
}
for($k=$i-1; $k>=0; $k--)
{
echo $alpha[$k];
}
echo "<br>";
}
?>

Output: -

190020107101 Jignesh Page: -51


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

• PR-5-2.php

<!DOCTYPE html>
<head>
<title>PR-5</title>
</head>
<body>
<form method="post">
Enter the Number:<br>
<input type="number" name="number" id="number">
<input type="submit" name="submit" value="Submit" />
</form>
<?php
if($_POST)
{
$fact = 1;
$number = $_POST['number'];

for($i = 1; $i <= $number; $i++)


{
$fact = $fact * $i;
}
echo "Factorial of " . $number . " is " . $fact . "<br>";
}
?>

</body>
</html>

Output: -

190020107101 Jignesh Page: -52


3) Write a PHP program to check Armstrong numbers.

• PR-5-3.php

<!DOCTYPE html>
<head>
<title>PR-5</title>
</head>
<body>
<form method="post">
Enter the Number:<br>
<input type="number" name="number" id="number">
<input type="submit" name="submit" value="Submit" />
</form>
<?php
if($_POST)
{
$fact = 1;
$number = $_POST['number'];

function armstrongCheck($num)
{
$sum = 0;
$x = $num;

while($x != 0)
{
$rem = $x % 10;
$sum = $sum + ($rem * $rem * $rem);
$x = $x / 10;
}

if($num == $sum)
{
return 1;
}
return 0;
}
$flag = armstrongCheck($number);

if($flag == 1)
{
echo $number . " is an Armstrong number";
} else {
echo $number . " is not an Armstrong number";
}
}
?>

</body>
</html>

190020107101 Jignesh Page: -53


Output: -

190020107101 Jignesh Page: -54


4) Write a PHP program to check palindrome numbers.

• PR-5-4.php

<!DOCTYPE html>
<head>
<title>PR-5</title>
</head>
<body>
<form method="post">
Enter the Number:<br>
<input type="number" name="number" id="number">
<input type="submit" name="submit" value="Submit" />
</form>
<?php
if($_POST)
{
$fact = 1;
$number = $_POST['number'];

function palindromeCheck($num)
{
$sum = 0;
$x = $num;

while(floor($x))
{
$rem = $x % 10;
$sum = $sum * 10 + $rem;
$x = $x / 10;
}

return $sum;
}
$palindrome = palindromeCheck($number);

if($palindrome == $number)
{
echo $number . " is an Palindrome number";
} else {
echo $number . " is not an Palindrome number";
}
}
?>

</body>
</html>

190020107101 Jignesh Page: -55


Output: -

190020107101 Jignesh Page: -56


5) Write a PHP script for login authentication.

• PR-5-5.php

<!DOCTYPE html>
<head>
<title>PR-5</title>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
background-color: #FAF5E4;
margin-left: 25%;
margin-top: 50px;
width: 50%;
box-shadow: 5px 5px 5px 5px #EEEEEE;
}
.display-div {
text-align: center;
}
form {
text-align: center;
}
.inp {
margin: 5px;
}
.btn {
padding: 7px 15px;
background-color: #F8ECD1;
box-shadow: 2px 2px #EEEEEE;
}
</style>
</head>
<body>
<div class="container">
<form method="POST">
<h2>Login User</h2>
<input class="inp" type="text" placeholder="Username" name="uname"
/>
<br>
<input class="inp" type="text" placeholder="Password" name="pass"
/>
<br>
<input type="submit" name="submit" value="Register" class="btn inp"
/>
</form>
</div>
<?php
if($_POST)
{

190020107101 Jignesh Page: -57


if($_POST['uname'] == 'jaitra' && $_POST['pass'] == '12345')
{
echo '<script>alert("Login Successfully...!")</script>';
} else {
echo '<script>alert("Invalid Login Details...!")</script>';
}
}
?>
</body>
</html>

Output: -

190020107101 Jignesh Page: -58


190020107101 Jignesh Page: -59
6) Design an html form which takes username and password from user and validate against
stored username and password in file.

• PR-5-6.php

<!DOCTYPE html>
<head>
<title>PR-5</title>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
background-color: #FAF5E4;
margin-left: 25%;
margin-top: 50px;
width: 50%;
box-shadow: 5px 5px 5px 5px #EEEEEE;
}
.display-div {
text-align: center;
}
form {
text-align: center;
}
.inp {
margin: 5px;
}
.btn {
padding: 7px 15px;
background-color: #F8ECD1;
box-shadow: 2px 2px #EEEEEE;
}
</style>
</head>
<body>
<div class="container">
<form method="POST">
<h2>Login User</h2>
<input class="inp" type="text" placeholder="Username" name="uname"
/>
<br>
<input class="inp" type="text" placeholder="Password" name="pass"
/>
<br>
<input type="submit" name="submit" value="Register" class="btn inp"
/>
</form>
</div>
<?php
if($_POST)

190020107101 Jignesh Page: -60


{
$myfile = fopen("login.txt", "r") or die("Unable to open file!");
$loginCheck = fread($myfile, filesize('login.txt'));
if($_POST['uname'] == $loginCheck && $_POST['pass'] == '12345')
{
echo '<script>alert("Login Successfully...!")</script>';
} else {
echo '<script>alert("Invalid Login Details...!")</script>';
}
}
?>
</body>
</html>

Output: -

190020107101 Jignesh Page: -61


190020107101 Jignesh Page: -62
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.

• PR-5-7.php

<!DOCTYPE html>
<head>
<title>PR-5</title>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
background-color: #FAF5E4;
margin-left: 25%;
margin-top: 50px;
width: 50%;
box-shadow: 5px 5px 5px 5px #EEEEEE;
}
.display-div {
text-align: center;
}
form {
text-align: center;
}
.inp {
margin: 5px;
}
.btn {
padding: 7px 15px;
background-color: #F8ECD1;
box-shadow: 2px 2px #EEEEEE;
}
</style>
</head>
<body>
<div class="container">
<form method="POST">
<h2>Date Difference</h2>
<input class="inp" type="date" placeholder="Enter date 1"
name="date1" />
<br>
<input class="inp" type="date" placeholder="Enter date 2"
name="date2" />
<br>
<input type="submit" name="submit" value="GIve Difference"
class="btn inp" />
</form>
</div>
<?php
if($_POST)

190020107101 Jignesh Page: -63


{
$date1 = $_POST['date1'];
$date2 = $_POST['date2'];

$dateDiff = strtotime($date2) - strtotime($date1);


$dateDiff = abs(round($dateDiff / 86400));

if($dateDiff % 2 == 0)
{
?>
<script>document.body.style.backgroundColor =
"#C4DDFF";</script>
<?php
} else {
?>
<script>document.body.style.backgroundColor =
"#FF6B6B";</script>
<?php
}
}
?>
</body>
</html>

Output: -

190020107101 Jignesh Page: -64


QUIZ:
1 All variables in PHP start with which symbol?
Ans: - <?php #PHP code ?>
2 PHP files have a default file extension of
Ans: - “.php”.

EVALUATION:

Involvement Understanding / Timely Completion Total


Problem solving
(4) (3) (10)
(3)

Signature with date:

190020107101 Jignesh Page: -65


EXPERIMENT NO: 6

TITLE: Write a program using the concept of PHP.

OBJECTIVE: On the Completion of this experiment students will be able to…


● File handling in PHP

THEORY:

PHP readfile() Function

The readfile() function reads a file and writes it to the output buffer.
Assume we have a text file called "webdictionary.txt", stored on the server, that looks like
this: AJAX = Asynchronous JavaScript and XML
CSS = Cascading Style Sheets
HTML = HyperText Markup Language
PHP = PHP Hypertext Preprocessor
SQL = Structured Query Language
SVG = Scalable Vector Graphics
XML = EXtensible Markup Language

The readfile() function is useful if all you want to do is open up a file and read its contents.

PHP Open File - fopen().

A better method to open files is with the fopen() function. This function gives you more
options than the readfile() function.

The first parameter of fopen() contains the name of the file to be opened and the second
parameter specifies in which mode the file should be opened. The following example also
generates a message if the fopen() function is unable to open the specified file:

<?php
$myfile = fopen("webdictionary.txt", "r") or die("Unable to open file!"); echo
fread($myfile,file size("webdictionary.txt"));
fclose($myfile);
?>

190020107101 Jignesh Page: -66


1) Login Page(Without Database take username “admin” and Password “admin123”).

• PR-6-1.php

<!DOCTYPE>
<html xml:lang>
<head>
<title>Login Page</title>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
background-color: #FAF5E4;
margin-left: 25%;
margin-top: 50px;
width: 50%;
box-shadow: 5px 5px 5px 5px #EEEEEE;
}
form {
text-align: center;
}
.inp {
margin: 5px;
}
.btn {
padding: 7px 15px;
background-color: #F8ECD1;
box-shadow: 2px 2px #EEEEEE;
}
</style>
</head>
<body>
<div class="container">
<form method="POST">
<h2>Login</h2>
<input class="inp uname" type="text" />
<br>
<input class="inp pass" type="text" />
<br>
<button class="inp btn login" type="button">Login</button>
</form>
</div>
<script>
let uname = document.querySelector(".uname");
let pass = document.querySelector(".pass");
let btn = document.querySelector(".login");

btn.addEventListener('click', function(){
console.log(uname.value, pass.uname)
if(uname.value === "admin" && pass.value === "admin123")

190020107101 Jignesh Page: -67


{
alert("Login Successfully...!");
}
else
{
alert("Invalid Login Details...!");
}
})
</script>
</body>
</html>

Output: -

190020107101 Jignesh Page: -68


190020107101 Jignesh Page: -69
2) Create a web page which shows use of include & require (Include txt file using include
and require statement).

• PR-6-2.php

<!DOCTYPE>
<html xml:lang>
<head>
<title>PR-6</title>
<style>
.header {
overflow: hidden;
background-color: #D5D5D5;
padding: 20px 10px;
}

.header a {
float: left;
color: black;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}

.header a.logo {
font-size: 25px;
font-weight: bold;
}

.header a:hover {
background-color: #ddd;
color: black;
}

.header a.active {
background-color: dodgerblue;
color: white;
}

.header-right {
float: right;
}

.footer-padding {
padding-bottom: 60px;
}

.footer {

190020107101 Jignesh Page: -70


position: absolute;
text-align: center;
bottom: 0;
width: 100%;
height: 60px;
background-color: #D5D5D5;
}

.footer p {
margin-top: 25px;
font-size: 18px;
color: #fff;
}

</style>
</head>
<body>
<?php require "header.html"?>
<h1>Example of include</h1>
<?php require "footer.html"?>
</body>
</html>

Output: -

190020107101 Jignesh Page: -71


3) Create a web page which show use of all file handling functions (readfile(), fopen(),
fread(), fclose(), fgets(), feof(), fgetc(), fwrite()).

• PR-6-3.php

<!DOCTYPE>
<html xml:lang>
<head>
<title>PHP fgets() Example</title>
</head>
<body>
<form method="POST">
Enter String1 : <input type="text" name="str"> <br/>
Enter String2 : <input type="text" name="str1"> <br/> <br/>
<input type="submit" name="Submit1" value="Write File">
<input type="submit" name="Submit2" value="Read File - gets()">
</form>
<?php
if(isset($_POST['Submit1'])) {
$myfile = fopen("abc.txt", "a");
$text = $_POST["str"]. PHP_EOL . $_POST["str1"];
fwrite($myfile, $text);
fclose($myfile);
echo "file created !!";
}
if(isset($_POST['Submit2'])) {
$file=fopen("abc.txt","r");
$readfile=fgets($file);
echo $readfile;
fclose($file);
}
?>
</body>
</html>

Output: -

190020107101 Jignesh Page: -72


4) Create a webpage through which the admin can upload a photo of employee and pdf of
Aadhar card with following constraints
a. Photo in jpeg or png format only and having size < 200kb.
b. Aadhar Card in pdf only.

• PR-6-4.php

<!DOCTYPE>
<html xml:lang>
<head>
<title>PR-6</title>
<style></style>
</head>
<body>
<div class="container">
<form method="POST" enctype = "multipart/form-data">
<label>Select Image File:</label>
<input type="file" name="image"><br>
<label>Select PDF File:</label>
<input type="file" name="pdf"><br>
<input type="submit" name="submit" value="Upload">
</form>
<?php
if(isset($_POST['submit']))
{
$fileInfo = $_FILES['pdf']['tmp_name'];
$imageInfo = $_FILES['image']['tmp_name'];
$imageSize = filesize($imageInfo);

$allowedFileType = array('pdf');
$allowedImageType = array('jpeg', 'png');

$fileExtension = pathinfo($_FILES['pdf']['tmp_name']);
$imageExtension = pathinfo($_FILES['image']['tmp_name']);

if(in_array($fileExtension, $allowedFileType) &&


in_array($imageExtension, $allowedImageType) && $imageSize < 20000)
{
echo "File Uploaded";
}
else
{
echo "Error File should only be in 'jpeg', 'png, and 'pdf' for
Aadhar Card and image size should be less than 200kb...!";
}
}
?>
</div>
</body>
</html>

190020107101 Jignesh Page: -73


Output: -

EVALUATION:

Involvement Understanding / Timely Completion Total


Problem solving
(4) (3) (10)
(3)

Signature with date:

190020107101 Jignesh Page: -74


EXPERIMENT NO: 7

TITLE: Write a program using the concept of PHP.

OBJECTIVE: On the Completion of this experiment students will be able to…


● Exception handling in PHP

THEORY:
What is an Exception?

An exception is an object that describes an error or unexpected behaviour of a PHP script.


Exceptions are thrown by many PHP functions and classes.
User defined functions and classes can also throw exceptions.

Exceptions are a good way to stop a function when it comes across data that it cannot use.
Throwing an Exception
The throw statement allows a user defined function or method to throw an exception. When
an exception is thrown, the code following it will not be executed.

If an exception is not caught, a fatal error will occur with an "Uncaught Exception" message.
Lets try to throw an exception without catching it:
Example

<?php

function divide($dividend, $divisor) {


if($divisor == 0) {
throw new Exception("Division by zero");
}
retrun $dividend / $divisor;
}

echo divide(5, 0);


?>

The try...catch Statement

To avoid the error from the example above, we can use the try...catch statement to catch
exceptions and continue the process.

Syntax

try {

code that can throw exceptions

} catch(Exception $e) {

190020107101 Jignesh Page: -75


code that runs when an exception is caught

The try...catch...finally Statement

The try...catch...finally statement can be used to catch exceptions. Code in the finally block
will always run regardless of whether an exception was caught. If finally is present, the catch
block is optional.

Syntax

try {

code that can throw exceptions

} catch(Exception $e) {

code that runs when an exception is caught

} finally {

code that always runs regardless of whether an exception was caught

190020107101 Jignesh Page: -76


1) Use try…catch to show a message when an exception is thrown.

• PR-7.php

<?php
function checkNum($number) {
if($number>1) {
throw new Exception("Value must be 1 or below");
}
return true;
}

try {
checkNum(2);

echo 'If you see this, the number is 1 or below';


}

catch(Exception $e) {
echo 'Message: ' .$e->getMessage();
}
?>

Output: -

EVALUATION:

Involvement Understanding / Timely Completion Total


Problem solving
(4) (3) (10)
(3)

Signature with date:

190020107101 Jignesh Page: -77


EXPERIMENT NO: 8

TITLE: Learning Login management with session and cookies in PHP.

OBJECTIVES: On completion of this experiment students will be able to…


• Understanding the concept of sessions
• Understanding the concepts of cookies.

THEORY :

What is a Session?

● A session is a global variable stored on the server.


● Each session is assigned a unique id which is used to retrieve stored values.
● Whenever a session is created, a cookie containing the unique session id is stored on
the user’s computer and returned with every request to the server. If the client browser
does not support cookies, the unique php session id is displayed in the URL
● Sessions have the capacity to store relatively large data compared to cookies.

CREATING SESSION :

<?php
session_start(); //start the PHP_session function if(isset($_SESSION['page_count']))
{
$_SESSION['page_count'] += 1;
}
else
{
$_SESSION['page_count'] = 1;
}
echo 'You are visitor number ' . $_SESSION['page_count'];

?>

DESTROYING SESSION :

<?php

session_destroy(); //destroy entire session

?>

190020107101 Jignesh Page: -78


<?php

unset($_SESSION['product']); //destroy product session item

?>

Why and when to use Cookies?.

● Personalizing the user experience – this is achieved by allowing users to select their
preferences.

● The pages requested that follow are personalized based on the set preferences in the
cookies.

● Tracking the pages visited by a user

SET COOKIE :
<?php

setcookie(cookie_name, cookie_value, [expiry_time], [cookie_path], [domain],[secure],


[httponly]);

?>

RETRIVE VALUE :
<?php
print_r($_COOKIE); //output the contents of the cookie array variable
?>

DELETE COOKIE:
<?php

setcookie("user_name", "AIT",time() - 360,'/');

?>

190020107101 Jignesh Page: -79


1) Perform keep me logged checkbox checked using cookie.

• PR-8-1.php

<!DOCTYPE html>
<head>
<title>PR-8</title>
</head>
<body>
<div class="container">
<form method="POST">
Username = <input type="text" name="uname"
<?php if(isset($_SESSION['uname'])) {echo "Welcome " .
$_SESSION['uname'];}?>
/><br>
<input type="checkbox" name="check" />remeber me<br>
<input type="submit" value="Create Session" name="btn"/>
</form>

<?php
if(isset($_POST['check']))
{
$_SESSION['uname'] = $_POST["uname"];
echo "Hello " . $_POST['uname'];
}
?>
</div>
</body>
</html>

Output: -

190020107101 Jignesh Page: -80


190020107101 Jignesh Page: -81
2) Write a PHP script for setting and retrieving your name and email address using cookies.

• PR-8-2.php

<?php
session_start();
?>
<!DOCTYPE html>
<head>
<title>PR-8-6</title>
</head>
<body>
<?php
$_SESSION['session'] = "Jaitra";
echo "Session Variable Is Set...";
?>
<br>
<?php
echo "Value is :- " . $_SESSION['session'];
?>
<br>
<?php
echo "Before Updating Session Variable...";
$_SESSION['session'] = "200020107537";
?>
<br>
<?php
echo "After Updating Session Variable...";
?>
<br>
<?php
echo "Latest Value :- " . $_SESSION['session'];
?>
<br>
<?php
echo "Removing session variable...";
session_unset();
?>
<br>
<?php
echo "Destroying Session...";
session_destroy();
?>
</body>
</html>

190020107101 Jignesh Page: -82


Output: -

190020107101 Jignesh Page: -83


3) Perform login to logout session handling. Non logged in users cannot accept the page.

• PR-8-3.php

<?php
session_start();
if(isset($_SESSION['login']))
{
header("Location: PR-8-3-2.php");
exit();
}
?>
<!DOCTYPE>
<html xml:lang>
<head>
<title>Login Page</title>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
background-color: #FAF5E4;
margin-left: 25%;
margin-top: 50px;
width: 50%;
box-shadow: 5px 5px 5px 5px #EEEEEE;
}
form {
text-align: center;
}
.inp {
margin: 5px;
}
.btn {
padding: 7px 15px;
background-color: #F8ECD1;
box-shadow: 2px 2px #EEEEEE;
}
</style>
</head>
<body>
<div class="container">
<form method="get">
<h2>Login</h2>
<input class="inp uname" type="text" placeholder="Username"
name="uname" />
<br>
<input class="inp pass" type="text" placeholder="Password"
name="password" />
<br>
<input type="submit" name="submit" value="Login" class="btn inp" />

190020107101 Jignesh Page: -84


</form>
</div>
<?php
if(!isset($_SESSION['login']) && isset($_GET['uname']))
{
$_SESSION['login'] = $_GET['uname'];
header("Location: PR-8-3-2.php");
exit();
}
?>
</body>
</html>

• PR-8-3-2.php

<?php
session_start();
?>
<!DOCTYPE>
<html xml:lang>
<head>
<title>Login Page</title>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
background-color: #FAF5E4;
margin-left: 25%;
margin-top: 50px;
width: 50%;
box-shadow: 5px 5px 5px 5px #EEEEEE;
}
form {
text-align: center;
}
.inp {
margin: 5px;
}
.btn {
padding: 7px 15px;
background-color: #F8ECD1;
box-shadow: 2px 2px #EEEEEE;
}
</style>
</head>
<body>
<div class="container">
<form method="POST">

190020107101 Jignesh Page: -85


<h2>Welcome <?php echo $_SESSION['login'] ?></h2>
<input type="submit" name="submit" value="Logout" class="btn inp"
/>
</form>
<?php
if(isset($_SESSION['login']) && isset($_POST['submit']))
{
session_unset();
header("Location: PR-8-3.php");
}
?>
</div>
</body>
</html>

Output: -

190020107101 Jignesh Page: -86


190020107101 Jignesh Page: -87
4) Write a PHP program to greet the user based on time.

• PR-8-4.php

<?php
date_default_timezone_set("Indian/Maldives");
$time = date("H");
if($time < "12")
{
echo "Good Morning 🌅";
} else if($time >= "12" && $time <= "17")
{
echo "Good Afternoon 🌞";
} else if($time >= "17" && $time <= "19")
{
echo "Good Evening 🌅";
} else {
echo "Good Night 🌑";
}
?>

Output: -

190020107101 Jignesh Page: -88


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

• PR-8-5.php

<!DOCTYPE>
<html xml:lang>
<head>
<title>PR-6</title>
<style></style>
</head>
<body>
<div class="container">
<form method="POST" enctype = "multipart/form-data">
<label>Select PDF File:</label>
<input type="file" name="upload" id="upload"><br>
<input type="submit" name="submit" value="Upload">
</form>
<?php
if(isset($_POST['submit']))
{
$fileInfo = $_FILES['upload']['name'];

$allowedFileType = array('pdf');

$file_ext=strtolower(end(explode('.',$_FILES['upload']['name'])));

$fileSize = $_FILES['upload']['size'];

if(in_array($file_ext, $allowedFileType))
{
?>
<ul>
<li>Sent file: <?php echo "File Name :- " . $fileInfo; ?>
<li>File size: <?php echo "File Size :- " . $fileSize; ?>
<li>File type: <?php echo "File Extension :- " . $file_ext;
?>
</ul>
<?php
}
else
{
echo "Error File should only be in 'pdf'...!";
}
}
?>
</div>
</body>
</html>

190020107101 Jignesh Page: -89


Output: -

190020107101 Jignesh Page: -90


190020107101 Jignesh Page: -91
6) Create a web page which shows the use of session(create, retrieve, modify, delete and
destroy session variable).

• PR-8-6.php

<?php
session_start();
?>
<!DOCTYPE html>
<head>
<title>PR-8-6</title>
</head>
<body>
<?php
$_SESSION['session'] = "Jaitra";
echo "Session Variable Is Set...";
?>
<br>
<?php
echo "Value is :- " . $_SESSION['session'];
?>
<br>
<?php
echo "Before Updating Session Variable...";
$_SESSION['session'] = "200020107537";
?>
<br>
<?php
echo "After Updating Session Variable...";
?>
<br>
<?php
echo "Latest Value :- " . $_SESSION['session'];
?>
<br>
<?php
echo "Removing session variable...";
session_unset();
?>
<br>
<?php
echo "Destroying Session...";
session_destroy();
?>
</body>
</html>

190020107101 Jignesh Page: -92


Output: -

QUIZ:

1. How do you create a cookie in PHP?


Ans: - Using setcookie() function.

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


Ans: - Using this we can access the session variable.

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


Ans: - 30 seconds.

EVALUATION:

Involvement Understanding / Timely Completion Total


Problem solving
(4) (3) (10)
(3)

Signature with date:

190020107101 Jignesh Page: -93


EXPERIMENT NO: 9

TITLE: Develop a program in PHP & JavaScript that demonstrate insert, update & delete
operation.

OBJECTIVES: On completion of this experiment students will be able to…


• PHP CRUD OPERATION
• DATABASE QUERIES

THEORY:

How to Set Up a Database Connection


- mysqli_connect function, which is used to set up a connection with the MySQL back-end.

<?php
$connection_obj = mysqli_connect("{MYSQL_HOSTNAME}",
"{MYSQL_USERNAME}", "{MYSQL_PASSWORD}", "{MYSQL_DATABASE}");
?>

How to Select a Database


- You can use the mysqli_select_db function to select a database to work with.

<?php
mysqli_select_db($connection_obj, "{MYSQL_DATABASE}");
?>

How to run any query ( it could be delete query / select or update )

<?php
$query = "write your query here";

// run the insert query mysqli_query($connection_obj, $query);

?>

190020107101 Jignesh Page: -94


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

• PR-9-1.php

<?php

?>
<!DOCTYPE html>
<head>
<title>PR-9</title>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
background-color: #FAF5E4;
margin-left: 25%;
margin-top: 50px;
width: 50%;
box-shadow: 5px 5px 5px 5px #EEEEEE;
}
.display-div {
text-align: center;
}
form {
text-align: center;
}
.inp {
margin: 5px;
}
.btn {
padding: 7px 15px;
background-color: #F8ECD1;
box-shadow: 2px 2px #EEEEEE;
}
</style>
</head>
<body>
<div class="container">
<form method="POST" action="PR-9-1-INSERT.php">
<h2>Register User</h2>
<input class="inp" type="text" placeholder="User ID" name="uid" />
<br>
<input class="inp" type="text" placeholder="Name" name="name" />
<br>
<input class="inp" type="tel" placeholder="Phone" name="phone" />
<br>
<input class="inp" type="text" placeholder="Password" name="pass"
/>
<br>

190020107101 Jignesh Page: -95


<input type="submit" name="submit" value="Register" class="btn inp"
/>
</form>
</div>
<br>
<div class="container">
<form method="POST" action="PR-9-1-UPDATE.php">
<h2>Update User</h2>
<input class="inp" type="text" placeholder="User ID" name="uid" />
<br>
<input class="inp" type="text" placeholder="Name" name="name" />
<br>
<input class="inp" type="tel" placeholder="Phone" name="phone" />
<br>
<input class="inp" type="text" placeholder="Password" name="pass"
/>
<br>
<input type="submit" name="submit" value="Update" class="btn inp"
/>
</form>
</div>
<br>
<div class="container">
<form method="POST" action="PR-9-1-DELETE.php">
<h2>Delete User</h2>
<input class="inp" type="text" placeholder="User ID" name="uid" />
<br>
<input type="submit" name="submit" value="Delete" class="btn inp"
/>
</form>
</div>
<br>
<div class="container">
<div class="display-div">
<h2>User Data</h2>
<?php

$servername = "localhost";
$username = "root";
$password = "";
$dbname = "web_programming";

$conn = mysqli_connect($servername, $username, $password,


$dbname);

if ($conn === false) {


die("Connection failed: " . mysqli_connect_error());
}

$sql = "SELECT * FROM userDB";


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

190020107101 Jignesh Page: -96


if($result->num_rows > 0)
{
while($row = mysqli_fetch_assoc($result))
{
?>
<ul>
<li>U_ID : - <?php echo $row["u_id"]?></li>
<li>Name : - <?php echo $row["name"]?></li>
<li>Phone : - <?php echo $row["phone"]?></li>
<li>Password : - <?php echo
$row["password"]?></li>
</ul>
<?php
}
}

mysqli_close($conn);
?>
</div>
</div>
</body>
</html>

• PR-9-1-INSERT.php

<?php

$servername = "localhost";
$username = "root";
$password = "";
$dbname = "web_programming";

$conn = mysqli_connect($servername, $username, $password, $dbname);

if ($conn === false) {


die("Connection failed: " . mysqli_connect_error());
}

if(isset($_POST['submit']))
{
$u_id = (int)$_REQUEST['uid'];
$u_name = $_REQUEST['name'];
$u_phone = (int)$_REQUEST['phone'];
$u_pass = $_REQUEST['pass'];

$sql = "INSERT INTO userDB VALUES ('$u_id', '$u_name', '$u_phone',


'$u_pass')";

if(mysqli_query($conn, $sql))
{

190020107101 Jignesh Page: -97


echo '<script>alert("Recored Successfully Inserted")</script>';
header("refresh:2; url=PR-9-1.php");
} else {
echo 'ERROR: -' . mysqli_error($conn);
}
}

mysqli_close($conn);
?>

• PR-9-1-UPDATE.php

<?php

$servername = "localhost";
$username = "root";
$password = "";
$dbname = "web_programming";

$conn = mysqli_connect($servername, $username, $password, $dbname);

if ($conn === false) {


die("Connection failed: " . mysqli_connect_error());
}

if(isset($_POST['submit']))
{
$u_id = (int)$_REQUEST['uid'];
$u_name = $_REQUEST['name'];
$u_phone = (int)$_REQUEST['phone'];
$u_pass = $_REQUEST['pass'];

$sql = "UPDATE userDB SET phone='$u_phone',


name='$u_name',password='$u_pass' WHERE u_id='$u_id'";

if(mysqli_query($conn, $sql))
{
echo '<script>alert("Recored Successfully Updated")</script>';
header("refresh:2; url=PR-9-1.php");
} else {
echo 'ERROR: -' . mysqli_error($conn);
}
}

mysqli_close($conn);
?>

190020107101 Jignesh Page: -98


• PR-9-1-DELETE.php

<?php

$servername = "localhost";
$username = "root";
$password = "";
$dbname = "web_programming";

$conn = mysqli_connect($servername, $username, $password, $dbname);

if ($conn === false) {


die("Connection failed: " . mysqli_connect_error());
}

if(isset($_POST['submit']))
{
$u_id = (int)$_REQUEST['uid'];

$sql = "DELETE FROM userDB WHERE u_id='$u_id'";

if(mysqli_query($conn, $sql))
{
echo '<script>alert("Recored Successfully Deleted")</script>';
header("refresh:2; url=PR-9-1.php");
} else {
echo 'ERROR: -' . mysqli_error($conn);
}
}

mysqli_close($conn);
?>

Output: -

190020107101 Jignesh Page: -99


190020107101 Jignesh Page: -100
190020107101 Jignesh Page: -101
190020107101 Jignesh Page: -102
190020107101 Jignesh Page: -103
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.

• PR-9-2.php

<?php

?>
<!DOCTYPE html>
<head>
<title>PR-9</title>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
background-color: #FAF5E4;
margin-left: 25%;
margin-top: 50px;
width: 50%;
box-shadow: 5px 5px 5px 5px #EEEEEE;
}
.display-div {
text-align: center;
}
form {
text-align: center;
}
.inp {
margin: 5px;
}
.btn {
padding: 7px 15px;
background-color: #F8ECD1;
box-shadow: 2px 2px #EEEEEE;
}
</style>
</head>
<body>
<div class="container">
<form method="POST">
<h2>Login User</h2>
<input class="inp" type="text" placeholder="Username" name="uname"
/>
<br>
<input class="inp" type="text" placeholder="Password" name="pass"
/>
<br>
<input type="submit" name="submit" value="Login" class="btn inp" />
</form>
</div>

190020107101 Jignesh Page: -104


<?php

$servername = "localhost";
$username = "root";
$password = "";
$dbname = "web_programming";

$conn = mysqli_connect($servername, $username, $password, $dbname);

if ($conn === false) {


die("Connection failed: " . mysqli_connect_error());
}

if(isset($_POST['submit']))
{

$u_name = $_REQUEST['uname'];
$u_pass = $_REQUEST['pass'];

$sql = "SELECT * FROM login_table where username='$u_name' AND


password='$u_pass'";
$result = $conn->query($sql);

if($result->num_rows > 0)
{
echo '<script>alert("Login Successfully...!")</script>';
} else {
echo '<script>alert("Invalid Login Details...!")</script>';
}
}
mysqli_close($conn);
?>
</div>
</body>
</html>

Output: -

190020107101 Jignesh Page: -105


QUIZ:

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


Ans: - Yes we can run several versions of php.

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


Ans: - Yes using echo with parenthesis we can pass more than 1 arguments.

190020107101 Jignesh Page: -106


EVALUATION:

Involvement Understanding / Timely Completion Total


Problem solving
(4) (3) (10)
(3)

Signature with date:

190020107101 Jignesh Page: -107


EXPERIMENT NO: 10

TITLE: Create a form with validation using AJAX and jQuery.

OBJECTIVES: On completion of this experiment students will be able to…


• Understanding the concepts of AJAX and jQuery

THEORY:

What is AJAX?

AJAX = Asynchronous JavaScript and XML.

In short, AJAX is about loading data in the background and displaying it on the webpage,
without reloading the whole page.

Examples of applications using AJAX: Gmail, Google Maps, Youtube, and Facebook tabs.
What is jQuery?
jQuery is a lightweight, "write less, do more", JavaScript library.

The purpose of jQuery is to make it much easier to use JavaScript on your website.

jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish,
and wraps them into methods that you can call with a single line of code.

jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and
DOM manipulation.

The jQuery library contains the following features:

• DOM manipulation
• CSS manipulation
• HTML event methods
• Effects and animations
• AJAX
• Utilities

What About jQuery and AJAX?

jQuery provides several methods for AJAX functionality.

190020107101 Jignesh Page: -108


With the jQuery AJAX methods, you can request text, HTML, XML, or JSON from a remote
server using both HTTP Get and HTTP Post - And you can load the external data directly
into the selected HTML elements of your web page!

Simple HTML Form Submit

<form action="path/to/server/script" method="post" id="my_form">


<label>Name</label>
<input type="text" name="name" />
<label>Email</label>
<input type="email" name="email" />
<label>Website</label>
<input type="url" name="website" />
<input type="submit" name="submit" value="Submit Form" />
<div id="server-results"><!-- For server results --></div>
</form>

The jQuery snippets below demonstrate different ways to make Ajax requests.

$("#my_form").submit(function(event){ event.preventDefault(); //prevent default action


var post_url = $(this).attr("action"); //get form action url
var request_method = $(this).attr("method"); //get form GET/POST method var form_data =
$(this).serialize(); //Encode form elements for submission

$.ajax({
url : post_url,
type: request_method,
da
ta : form_data
}).done(function(response){ //
$("#server-results").html(response);
});
});

The .serialize() method serializes a form input to a query string that could be sent using Ajax.

HTML Multipart/form-data Form Submit

$("#my_form").submit(function(event){ event.preventDefault(); //prevent default action


var post_url = $(this).attr("action"); //get form action url
var request_method = $(this).attr("method"); //get form GET/POST method var
form_data = new FormData(this); //Creates new FormData object
$.ajax({

190020107101 Jignesh Page: -109


url : post_url,
type: request_method, data : form_data,
contentType: false, cache: false, processData:false
}).done(function(response){ //
$("#server-results").html(response);
});
});

190020107101 Jignesh Page: -110


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

• PR-10-1.php

<!DOCTYPE html>
<head>
<title>PR-10</title>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
background-color: #FAF5E4;
margin-left: 25%;
margin-top: 50px;
width: 50%;
box-shadow: 5px 5px 5px 5px #EEEEEE;
}
.display-div {
text-align: center;
}
form {
text-align: center;
}
.inp {
margin: 5px;
}
.btn {
padding: 7px 15px;
background-color: #F8ECD1;
box-shadow: 2px 2px #EEEEEE;
}
</style>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("form").on("submit", function(event) {
event.preventDefault();

let formValues = $(this).serialize();

$.post("PR-10-1-2.php", formValues, function(data) {


$("#result").html(data);
});
});
});
</script>
</head>
<body>
<div class="container">

190020107101 Jignesh Page: -111


<form>
<h2>Register User</h2>
<input class="inp" type="text" placeholder="Username" name="uname"
/>
<br>
<input class="inp" type="email" placeholder="Email" name="email" />
<br>
<input class="inp" type="tel" placeholder="Phone" name="phone"
minlength="10" maxlength="10"/>
<br>
<input class="inp" type="text" placeholder="Password" name="pass"
/>
<br>
<input type="submit" name="submit" value="Register" class="btn inp"
/>
</form>
</div>
<div class="container" id="result"></div>
</div>
</body>
</html>

• PR-10-1-2.php

<?php
$uname = $_POST['uname'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$pass = $_POST['pass'];

$unameRegEx = '/^[A-Za-z][A-Za-z0-9]{5,31}$/';
$phoneRegEx = '/^[6-9]\d{9}$/';
$passRegEx = '/^.{6,}$/';

if (filter_var($email, FILTER_VALIDATE_EMAIL) && preg_match($unameRegEx,


$uname) && preg_match($phoneRegEx, $phone) && preg_match($passRegEx, $pass))
{
?>
<h3>Form Validation Successfull...!</h3>
<?php
} else {
?>
<h3>Form Validation Unsuccessfull...! Please Retry with valid
inputs...</h3><br>
<?php
}
?>

Output: -

190020107101 Jignesh Page: -112


190020107101 Jignesh Page: -113
190020107101 Jignesh Page: -114
2) It is possible to use jQuery together with AJAX?

• PR-10-2.php

<!DOCTYPE html>
<head>
<title>PR-10</title>
<style>
@import url("https://fonts.googleapis.com/css?family=Open+Sans");

body {
font-family: "Open Sans";
font-size: 14px;
}
.container {
display: flex;
justify-content: start;
align-items: center;
background-color: #FAF5E4;
margin: 25px auto;
width: 500px;
padding: 20px;
box-shadow: 5px 5px 5px 5px #EEEEEE;
}
form label {
border: 0;
margin-bottom: 3px;
display: block;
width: 100%;
}
form .error {
color: #ff0000;
}
form .inp {
border-radius: 4px;
display: block;
width: 100%;
margin: 5px 0;
height: 25px;
line-height: 25px;
background: #fff;
color: #000;
padding: 0 6px;
box-sizing: border-box;
}
.btn {
border-radius: 4px;
margin-top: 5px;
padding: 7px 15px;
background-color: #F8ECD1;
box-shadow: 2px 2px #EEEEEE;

190020107101 Jignesh Page: -115


}
</style>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script
src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></sc
ript>
<script>
$(document).ready(function() {
$('form[id="form"]').validate({
rules: {
uname: 'required',
email: {
required: true,
email: true,
maxlength: 25,
},
phone: {
required: true,
number: true,
minlength: 10,
maxlength: 10
},
pass: 'required',
minlength: 6,
maxlength: 10
},
messages: {
uname: 'This field is required',
email: 'Enter a valid email',
phone: 'Enter a valid phone number',
pass: 'Enter a valid password having length of 6 character'
},
submitHandler: function(form) {
form.submit();
}
});
});
</script>
</head>
<body>
<div class="container">
<form method="POST" id="form">
<h2>Validate User</h2>
<label for="uname">Username</label>
<input class="inp" type="text" name="uname"/>
<br>
<label for="uname">Email</label>
<input class="inp" type="email"name="email"/>
<br>
<label for="uname">Phone</label>

190020107101 Jignesh Page: -116


<input class="inp" type="tel" name="phone" minlength="10"
maxlength="10"/>
<br>
<label for="uname">Password</label>
<input class="inp" type="text" name="pass" />
<br>
<button type="submit" class="btn">Validate</button>
</form>
</div>
</body>
</html>

Output: -

190020107101 Jignesh Page: -117


QUIZ:

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


Ans: - jQuery is client side library.

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


Ans: - Yes.

190020107101 Jignesh Page: -118


EVALUATION:

Involvement Understanding / Timely Completion Total


Problem solving
(4) (3) (10)
(3)

Signature with date:

190020107101 Jignesh Page: -119

You might also like