Department of Computer Science & Engineering

Practical File

SUBJECT: WEB TECHNOLOGIES LAB

[BTCS 522-18]

B.Tech – 5th Semester

[Batch 2019-23]

CGC College of Engineering

Landran, Mohali-140307

Submitted To: Submitted By:

Mr. Shubham Sharma Harsh Jindal
Roll no: 1914282
Group – 5 ‘B’
Index
Exp. Page
Name of Experiment
No. No.
Configuration and administration Apache Web Server.
1
Develop an HTML page to demonstrate the use of basic
2
HTML tags, Link to different HTML page and also link within
a page, insertion of images and creation of tables.
Develop a registration form by using various form elements
3 like input box, text area, radio buttons, check boxes etc.
Design an HTML page by using the concept of internal,
4 inline, external style sheets.
Create an HTML file to implement the styles related to text,
5 fonts, links using cascading style sheets

6 Create an HTML file to implement the concept of

document object model using JavaScript
Create an HTML page including JavaScript that takes a
7 given set of integer numbers and shows them

after sorting in descending order.

8 Write a Javascript program that displays the positive

number, negative and zero number.
Create a PHP file to print any text using variable.
9

10 Demonstrate the use of Loops and arrays in PHP.

11 Create a PHP file using GET and POST methods.

A simple calculator web application that takes two numbers
12 and an operator (+, -, /, * and %) from

an HTML page and returns the result page with the

operation performed on the operands.
Implement login page contains the user name and the
13
password of the user to authenticate with
Session using PHP and MySQL.
A web application for implementation:
14
• The user is first served a login page which
takes user’s name and password. After
submitting the details the server checks these
values against the data from a database and
takes the following decisions.
 • If name and password matches, serves a
welcome page with user’s full name.
• If name matches and password doesn’t
match, then serves “password mismatch”
page

• If name is not found in the database, serves

a registration page, where user’s full name is
asked and on submitting the full name, it
stores, the login name, password and full
name in the database.

15 Demonstrate the use of Ajax and JSON Technologies in

programming examples
Demonstrate the use of web site designing tools such as
16.
Joomla, WordPress.
Implement at least one minor project using different
17.
technologies mentioned in theory of the subject.
Create Cookies and Generate Session in PHP
18.
Demonstrate the use of Functions in PHP
19.
 Experiment No -1
AIM: Configuration and administration of Apache web server.
SOLUTION:
XAMPP is the most popular software package which is used to set up a PHP development
environment for web services by providing all the required software components. During the
process of software deployment, most of the web servers use almost similar components, so
use of XAMPP provides easy transition from local server to live server. XAMPP is a AMP stack
which stands for Cross platform, Apache, MySQL, PHP, perl with some additional
administrative software tools such as PHPMyAdmin (for database access), FileZilla
FTP server, Mercury mail server and JSP Tomcat server. Other commonly known software
packages like XAMPP are WAMP, LAMP, and others.
The XAMPP server is used to test PHP pages. It works as local server. It contains a MySQL
database to manage or save data on a local server.
Advantages of XAMPP:
• It is free and easy to use and easily available for Windows, Linux and Mac OS .
• It is a beginner friendly solution package for full stack web development.
• It is a open source software package which gives a easy installation experience.
• It is very simple and lightweight to create set up for development, testing and deployment.
• It is a time-saver and provides several ways for managing configuration changes.
• It handles many administrative tasks like checking the status and security.
Software components of XAMPP:
• Apache plays the role of processing the HTTP request. It is the actual default web server
application. It is the most popular web servers maintained by Apache Software Foundation.
• MySQL The role of database management system in XAMPP is played by MySQL. It helps
to store and manage collected data very efficiently. It is an open-source and most popular.
• PHP is the server-side scripting language which stand for Hypertext Preprocessor. It is
embedded with HTML code which interacts with the webserver. It is an open-source and work
well with MySQL and has become a common choice for web developers.
• Perl is the high-level programming language designed for text editing which serves purpose
like web development and network programming.
STEPS FOR INSTALLATION:
Steps to install XAMPP on Windows:
• In the web browser, visit Apache Friends and download XAMPP installer.
• During the installation process, select the required components like MySQL, FileZilla ftp
server, PHP, phpMyAdmin or leave the default options and clic
k the Next button.
• Uncheck the Learn more about bitnami option and click Next button.

• Choose the root directory path to set up the htdocs folder for our applications. For example
‘C:\xampp’
 .
• Click the Allow access button to allow the XAMPP modules from the Windows firewall.

• After the installation process, click the Finish button of the XAMPP Setup wizard.
• Now the XAMPP icon is clearly visible on the right side of start menu. Show or Hide can be
set by using the control panel by clicking on the icon.

• To start Apache and MySql, just click on the Start button on the control panel.
Note: Suppose Apache is not starting, it means some other service is running at port 80. In
this case, stop the other service temporarily and restart it.
Making server request: Open your web browser and check whether the XAMPP service has
properly installed or not. Type in the URL: http://localhost. If you are able to see the default
page for XAMPP, you have successfully installed your XAMPP Server. To Check if PHP is
Working: All the website realted files are organized in a folder called htdocs and then run
index.php file by using http://localhost/index.php or http://localhost.
Note: For every new website or application, its always better to create a different folder inside
htdocs, to keep it organized and avoid confusion. For example, if we create a folder
geeksforgeeks and then create a file named as ‘helloWorld.php’. All the contents related to it
are put inside the folder ‘geeksforgeeks’. So the root ‘URL’ of the website will be
‘http://localhost/geeksforgeeks/’. So any home page is accessed by typing the root URL in the
browser. To see the output, just type ‘http://localhost/geeksforgeeks/helloWorld.php’.
Generally web servers look for index file (landing page) namely index.html or index.php in the
root of the website folder. Go to /xampp/htdocs/ folder and create a file with .php extension
(test.php) and type or copy the below code and save it.
filter_none
brightness_4
<?php
phpinfo();
?>
Now open your browser and go to “http://localhost/test.php” if you see the page same as below
then PHP has successfully installed. Note: In XAMPP, the configuration files of Apache,
MySQL, PHP are located in C:\ProgramFiles\xampp. For any configuration file changes, you
need to restart Apache and MySQL.
 Experiment No -2

Develop an HTML page to demonstrate the use of basic HTML tags, Link to different HTML
page and also link within a page, insertion of images and creation of tables.

Part -1 : Develop an HTML page to demonstrate the use of basic HTML tags.

Code :

<!DOCTYPE html>
<html>
<head>
<title> Geeks For Geeks Article </title>

</head>
<body>
<h1>Geeks For Geeks Article</h1>

<p>GeeksforGeeks.org was created with a goal in mind to provide well written, well
thought and well explained solutions for selected questions....Whether you want to learn
algorithms, data structures or it is the programming language on its own which interests you,
GeeksforGeeks has covered everything!</p>
<br>
</body>
</html>

Output :
Part – 2 : Link to different HTML page and also link within a page, insertion of images.

Code :
<!DOCTYPE html>
<html>
<head>
<title> Geeks For Geeks Article </title>
</head>
<body>
<h1>Geeks For Geeks Article</h1>
<img src="https://media.geeksforgeeks.org/wp-content/cdn-
uploads/20190710102234/download3.png" alt="GeeksforGeeks logo" width="300"
height="300">

<p>GeeksforGeeks.org was created with a goal in mind to provide well written, well
thought and well explained solutions for selected questions....Whether you want to learn
algorithms, data structures or it is the programming language on its own which interests you,
GeeksforGeeks has covered everything!</p>
<br>

<button onclick="document.location='https//www.geeksforgeeks.org">Geeks For Geeks

Portal Link .......CLICK HERE</button>
</body>
</html>
Output :
Part 3: Develop an HTML page to demonstrate the use of basic HTML tags, Link to different
HTML page and also link within a page, insertion of images and creation of tables.

Code :

<!--

Develop an HTML page to demonstrate the use of basic HTML tags, Link to different HTML
page and also link within a page, insertion of images and creation of tables.

Harsh Jindal

-->

<!DOCTYPE html>
<html>
<head>
<title> Geeks For Geeks Article </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){
background-color: #dddddd;
}
</style>
</head>
<body>
<h1>Geeks For Geeks Article</h1>
<img src="https://media.geeksforgeeks.org/wp-content/cdn-
uploads/20190710102234/download3.png" alt="GeeksforGeeks logo" width="300"
height="300">
 <p>GeeksforGeeks.org was created with a goal in mind to provide well written, well
thought and well explained solutions for selected questions....Whether you want to learn
algorithms, data structures or it is the programming language on its own which interests you,
GeeksforGeeks has covered everything!</p>
<br>
<h2>Company Wise Preparation Table</h2>

<table>
<tr>
<th>Company</th>
<th>Study Material</th>
<th>Level</th>
</tr>
<tr>
<td>Microsoft</td>
<td>Geeks For Geeks</td>
<td>Average</td>
</tr>
<tr>
<td>Facebook</td>
<td>Tutorial Point</td>
<td>Average</td>
</tr>
<tr>
<td>Google</td>
<td>Geeks For Geeks</td>
<td>Tough</td>
</tr>
<tr>
<td>Congizant</td>
<td>Geeks For Geeks</td>
<td>Easy</td>
</tr>
</table>
<button onclick="document.location='https//www.geeksforgeeks.org'">Geeks For Geeks
Portal Link .......CLICK HERE</button>
</body>
</html>

Output:
 Experiment No-3

Develop a registration form by using various form elements like input box, text area, radio
buttons, check boxes etc.

Code:
<!-- HARSH JINDAL 1914282 -->

<form>
<c><b> Harsh Jindal <b><c>
<table>
<tr>
<td>
<label for="uname">Name</label>
</td>
<td>
<input type="text" id="uname" name="username">
</td>
</tr>
<tr>
<td>
<label for="uemail">E-Mail</label>
</td>
<td>
<input type="text" id="uemail" name="useremail">
<button type="button">Check</button>
</td>
</tr>
<tr>
<td>
<label for="age">Age</label>
</td>
<td>
<input type="text" name="userage" id="age" size="2" maxlength="2">
</td>
</tr>
<tr>
<td>
<label for="pass">Password</label>
</td>
<td>
<input type="Password" id="pass">
</td>
</tr>
<tr>
<td>
<label for="res">Resume</label>
</td>
<td>
<input type="file" id="res">
</td>
</tr>
<tr>
<td>
<label>Hobbies</label>
</td>
<td>
<label>
<input type="checkbox" checked> Cricket
</label>
<label>
<input type="checkbox"> Football
</label>
</td>
</tr>
<tr>
<td>
<label>Gender</label>
</td>
<td>
<label>
<input type="radio" value="f" name="gender"> Female
</label>
<label>
<input type="radio" value="m" name="gender"> Male
</label>
</td>
<td>
<label for="city">City</label>
</td>
<td>
<select id="city" name="city">
<option disabled selected>----Choose City----</option>
<optgroup label="Metros">
<option>New Delhi</option>
<option>Mumbai</option>
<option>Channei</option>
<option>Kolkata</option>
 </optgroup>
</select>
</td>
</tr>
<tr>
<td>
<label>Address</label>
</td>
<td>
<textarea rows="4" cols="40"></textarea>
</td>
</tr>
<tr>
<td>
<input type="submit" value="Submit">
<input type="reset">
</td>
</tr>
</table>
</form>

Output :-
 Experiment No -4

Design an HTML page by using the concept of internal, inline, external style sheets.

Inline CSS
<!DOCTYPE html>
<html>
<head>
<title>Inline css</title>
</head>
<body>
<h1 style="color:Black;margin-left:20px;text-transform: uppercase; text-align: center;
background-color: yellow;">Today’s Update</h1>
</body>
</html>

Output-

Internal CSS
<!DOCTYPE html>
<html>
<head>
<style>
p{
color: black;
 background-color: yellow;
text-align: center;
font-weight: bold;
font-style: italic;
font-size: 50px
}
h1 {
color:black;
margin-left: 20px;
}
</style>
</head>
<body>

<p>Hello World!</p>
<p>These paragraphs are styled with CSS.</p>
<h1>This is my header tag</h1>
</body>
</html>

Output-

External CSS

HTML CODE-
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<title>external css</title>
</head>
<body>
<p id="col">This is my paragraph tag.</p>
<h1 id="hel">This is my header tag</h1>
</body>
</html>

Style CSS Code-

body
{
text-align: center;
background-color: yellow;
padding: 250px;
}
#hel {
color: red;
margin-left: 20px;
font-weight: bold;
font-style: italic;
}
#col {
text-shadow: 2px 2px pink;
text-transform: uppercase;
font-family: "Lucida Console", Courier, monospace;
font-weight: bold;
font-style: italic;
font-size: 30px;
}

Output-
 Experiment No – 5

Create an HTML file to implement the styles related to text, fonts, links using cascading style
sheets.

Code:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: yellow;
color: blue;
}

h1 {
background-color: Red;
color: white;
text-align: center;
}

p
{
text-shadow: 2px 2px red;
text-transform: uppercase;
font-family: "Lucida Console", Courier, monospace;
font-weight: bold;
font-style: italic;
font-size: 30px;
}

a:link {
color: red;;
font-weight: bold;
font-style: italic;
font-size: 30px;
}

a:visited {
color: green;
font-weight: bold;
font-style: italic;
font-size: 30px;
}
a:hover {
color: hotpink;
font-weight: bold;
font-style: italic;
font-size: 30px;
}

a:active {
color: blue;
font-weight: bold;
font-style: italic;
font-size: 30px;
}
</style>
<title>CSS PROPERTIES</title>
</head>
<body>
<h1>This Heading is Black with White Text</h1>
<p>This page has a grey background color and a blue text.</p>
<p>Another paragraph.</p>
<a href="https://www.javatpoint.com/html-tutorial" target="_blank">html tutorial</a>
</body>
</html>

Output-
 Experiment No - 6

Create an HTML file to implement the concept of document object model using JavaScript.

Code:
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-color: skyblue;
text-align: center;
color: red;
}
</style>
<title>DOM</title>
</head>
<body>
<h1>Using getElementByTagName() method......</h1>
<p>This is a pragraph</p>
<p>Here we are going to count total number of paragraphs by getElementByTagName()
method.</p>
<p>Paragraph counting Program in DOM</p>
<p>DOM STANDS FOR :-</p>
<p>DOCUMENT OBJECT MODEL</p>
<button onclick="countpara()">count paragraph</button>

<script>
function countpara(){
var totalpara=document.getElementsByTagName("p");
alert("total p tags are: "+totalpara.length);
}
</script>
</body>
</html>

Output-
 Experiment No – 7

Create an HTML page including JavaScript that takes a given set of integer numbers and shows
them after sorting in descending order.

Code:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Sort</h2>
<p>Click the buttonto sort the array in descending order.</p>
<button onclick="myFunction()">
Try it</button>
<p id="demo"></p>
<script>
var points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points;
function myFunction()
{
points.sort(function(a, b)
{
return (b -a)
});
document.getElementById("demo").innerHTML = points;}
</script>
</body>
</html>

Output-
Sorted-
 Experiment No – 8

Write a Javascript program that displays the positive number, negative and zero number.

Code:
<!DOCTYPE html>
<html>
<head>
<title>Javascipt Function..................</title>
</head>
<body style="background-color: yellow;">
<script type="text/javascript">
var x=prompt("Enter the number:");
if (x > 0)
{
document.write(x +" is a Positive Number");
}
else if (x < 0)
{
document.write(x +" is a Negative Number");
}
else
{
document.write(" Zero Number");l
}
</script>
</body>
</html>

Output-
 Experiment No -9
Create a PHP file to print any text using variable.

Code:
<!DOCTYPE html>
<html>
<body>
<?php
echo "<h2> Harsh Jindal 1914282 </h2>";
echo "Hello World!<br>";
echo "I'm about to learn PHP!<br>";
echo "This", "string", "was", "made", "with multiple parameters.";
?>
</body>
</html>

Output –
 Experiment No -10
Demonstrate the use of loops and arrays in PHP.
Code :-
<!DOCTYPE html>
<html>
<body>
<h3>Harsh Jindal 1914282</h3>
<?php
$x = 1;
while($x <= 5) {
echo "The number is: $x <br>";
$x++;
}
for ($i = 0; $i < 10; $i++){
$product = 10 * $i;
echo "The product of 10 * $i is $product <br/>";
}
?>
</body>
</html>

Output -
 Experiment No – 11

Create a PHP file using GET and POST methods.

Code :
<!DOCTYPE html>
<html>
<body>
<h3>Harsh Jindal 1914282</h3>
<form action="registration.php" method="get">
Name: <input type="text" name="name" /> Email:
<input type="text" name="email" />
<input type="submit" />
</form>
</body>
</html>

Output :-
 Experiment No -12
A simple calculator web application that takes two numbers and an operator (+, -, /, * and %)
from an HTML page and returns the result page with the operation performed on the operands.

Code :
Simplecalc.html

<html>
<head>
<title>Simple Calculator</title>
</head>
<body>
<h2 align="center">Simple Calculator</h2>
<form method="post" action="Simplecalc.php">
<table align="center">
<tr>
<td>Enter First Number : </td>
<td><input type="text" name="fnum"></input> </td>
</tr>
<tr>
<td>Enter Second Number : </td>
<td><input type="text" name="snum"></input> </td>
</tr>
<tr> <td> <br/> </td> </tr>
<tr>
<td colspan=2>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="submit" name="op" value="+"></input> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="submit" name="op" value="-"></input> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="submit" name="op" value="*"></input> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="submit" name="op" value="/"></input> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="submit" name="op" value="%"></input> </td>
</tr>
</table>
</form>
</body>
</html>

Simplecalc.php

<?php
$num1=$_POST["fnum"];
$num2=$_POST["snum"];
$op=$_POST["op"];
if($num1=="" or $num2=="")
{
echo "Please enter two numbers...";
}
else
{
echo "First Number is : ".$num1."<br/>";
echo "Second Number is : ".$num2."<br/>";
echo "Operator is : ".$op."<br/>";
if($op=="+")
{
$res=$num1+$num2;
echo "Additon is : ".$res;
}
if($op=="-")
{
$res=$num1-$num2;
echo "Subtraction is : ".$res;
}
if($op=="*")
{
$res=$num1*$num2;
echo "Multiplication is : ".$res;
}
if($op=="/")
{
$res=$num1/$num2;
echo "Division is : ".$res;
}
if($op=="%")
{
$res=$num1%$num2;
echo "Modulus is : ".$res;
}
}?>

Output :
 Experiment No -13
Implement login page contains the user name and the password of the user to authenticate with
Session using PHP and MySQL, also implement this with the help of PHP-Ajax.

index.html
First, we need to design the login form for the website user to interact with it. This login form is created
using html and also contains the empty field validation, which is written in JavaScript. The code for the
index.html file is given below:
<html>
2. <head>
3. <title>PHP login system</title>
4. // insert style.css file inside index.html
5. <link rel = "stylesheet" type = "text/css" href = "style.css">
6. </head>
7. <body>
8. <div id = "frm">
9. <h1>Login</h1>
10. <form name="f1" action = "authentication.php" onsubmit = "return validation()" method
= "POST">
11. <p>
12. <label> UserName: </label>
13. <input type = "text" id ="user" name = "user" />
14. </p>
15. <p>
16. <label> Password: </label>
17. <input type = "password" id ="pass" name = "pass" />
18. </p>
19. <p>
20. <input type = "submit" id = "btn" value = "Login" />
21. </p>
22. </form>
23. </div>
24. // validation for empty field
25. <script>
26. function validation()
27. {
28. var id=document.f1.user.value;
29. var ps=document.f1.pass.value;
30. if(id.length=="" && ps.length=="") {
31. alert("User Name and Password fields are empty");
32. return false;
33. }
34. else
35. {
36. if(id.length=="") {
37. alert("User Name is empty");
38. return false;
39. }
40. if (ps.length=="") {
41. alert("Password field is empty");
42. return false;
43. }
44. }
 45. }
46. </script>
47. </body>
48. </html>
After executing the above code on the browser, the login page will appear as below if it does not contain
style.css file.

style.css
Now, we will create style.css file to provide a more attractive view to the login form. The CSS code for
the style.css file is given below:
1. body{
2. background: #eee;
3. }
4. #frm{
5. border: solid gray 1px;
6. width:25%;
7. border-radius: 2px;
8. margin: 120px auto;
9. background: white;
10. padding: 50px;
11. }
12. #btn{
13. color: #fff;
14. background: #337ab7;
15. padding: 7px;
16. margin-left: 70%;
17. }
After including above CSS file in index.html, the login form will be like:
Database and Table Creation
Now, the next step is to create the database and the login table inside the database.
o Access the phpMyAdmin on the browser using localhost/phpmyadmin/ and create a
table in the database. Here we will create a database and table using GUI based
phpMyAdmin rather than queries execution.
o Click on New and enter the database name and then click on Create button.

o Now we will create a login table in the database. Create a table by name login in the database
which you have created earlier.
o Specify the column Name and their Type and Length in the table in which we will store
the username and password for the different users and save it by clicking on the save button.

o Click on the insert, from where we can insert the records in columns. So insert
the username and password here and click on Go button to save the record.
 connection.php
Next step is to do the connectivity of login form with the database which we have created in the previous
steps. We will create connection.php file for which code is given below:
1. <?php
2. $host = "localhost";
3. $user = "root";
4. $password = '';
5. $db_name = "javatpoint";
6.
7. $con = mysqli_connect($host, $user, $password, $db_name);
8. if(mysqli_connect_errno()) {
9. die("Failed to connect with MySQL: ". mysqli_connect_error());
10. }
11. ?>
authentication.php
Now, we have our database setup, so we can go with the authentication of the user. This file handles
the login form data that sent through the index.html file. It validates the data sent through the login
form, if the username and password match with the database, then the login will be successful otherwise
login will be failed.
1. <?php
2. include('connection.php');
3. $username = $_POST['user'];
4. $password = $_POST['pass'];
5.
6. //to prevent from mysqli injection
7. $username = stripcslashes($username);
8. $password = stripcslashes($password);
9. $username = mysqli_real_escape_string($con, $username);
10. $password = mysqli_real_escape_string($con, $password);
11.
12. $sql = "select *from login where username = '$username' and password = '$password'";
13. $result = mysqli_query($con, $sql);
14. $row = mysqli_fetch_array($result, MYSQLI_ASSOC);
15. $count = mysqli_num_rows($result);
16.
17. if($count == 1){
18. echo "<h1><center> Login successful </center></h1>";
19. }
20. else{
21. echo "<h1> Login failed. Invalid username or password.</h1>";
22. }
23. ?>
How to run the login form?
o To run the login form, open the xampp control panel and run the apache server and
PHP.
o Now, type localhost/xampp/folder name/file name in the browser and press Enter key.
o All setup is done now. Enter the username and password in the login form and click the
login button.
 o Here, we have inserted an incorrect username, so the user is unable to log in, and it will give
the login failed error.

Output:

o Now, we will provide correct value in the username and password. So, the user will be
successfully logged in. See in the below example.
Output
 Experiment No-14
A web application for implementation:
• The user is first served a login page which takes user’s name and password. After
submitting the details the server checks these values against the data from a
database and takes the following decisions.
• If name and password matches, serves a welcome page with user’s full name.
• If name matches and password doesn’t match, then serves “password mismatch”
page
• If name is not found in the database, serves a registration page, where user’s full
name is asked and on submitting the full name, it stores, the login name, password
and full name in database.

Index.html
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h1
{
font-family:comic sans ms;
font-size:48px;
color: red;
margin-top: 20%;
text-align: center;
}
a
{
float: right;
font-size: 20px;
font-family: forte;
}
body
{
background-color: black ;
margin: 250px
}
</style>
<title>Login Home Page..........</title>
<meta http-equiv="refresh" content="10; url=login13.php">
<meta charset="utf-8">
</head>
<body>
<h1>
Home Login Page
</h1>
 <a href="login13.php" >Open Login Page</a>

</body>
</html>

Index.php –

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
label{
color: yellow;
font-family: forte;
font-size: 15px;
}
.style1 {color: white ; font-size: 16px ; font-family: comic sans ms; text-
align: center; line-height: 23px ; letter-spacing: 1px}

.submit
{
background-color: maroon;
padding: 15px;
color: white;
font-family: comic sans ms;
font-size: 18px;
}
body
{
margin:200px;
}
#heading
{
color: red;
text-align: center;
font-family: forte;
}

</style>
<title>LOGIN PAGE....</title>
</head>
<body style="background-color: black">

<h1 id="heading">LOGIN PAGE..........</h1><hr>

<p class="style1">
Kindly fill the login details :
</p>
 <form name="myform" action="verify.php" method="POST">
<table border="5" cellspacing="10" cellpadding="10" style="margin-left:
auto;margin-right: auto;">
<tr>
<td> <label>User Name</label> </td>
<td> <input type="text" name="user" id="user" required> </td>
</tr>
<tr>
<td> <label>Password</label> </td>
<td> <input type="password" name="pass" id="pass"
required> </td>
</tr>
<tr>
<th colspan="2">
<input type="submit" name="sub" value="Login"
class="submit">
<input type="reset" name="res" value="Reset"
class="submit">
</th>
</tr>
<tr>
<th colspan="2">
<?php
if (isset($_GET['id']))
{
echo "<span style='color:red ; font-size:18px ; font-
family:comic sans ms'>" . $_GET['id'] . "</span>";
}
?>
</th>
</tr>
</table>

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

Verify.php

<?php
include "datacon.php";
session_start();
$username=$_POST['user'];
$userpassword=$_POST['pass'];

$qry="SELECT * FROM user_data where user='$username' and

password='$userpassword' ";

$re=mysqli_query($conn,$qry);
 $count=mysqli_num_rows($re);

if ($count>0)
{
$_SESSION['user_data']=$username;
header("Location:welcome.php");
}

else
{
header("Location:addrecord.php?id=Username is not existed please register
it..");
} ?>

Data Connectivity File

<?php
$server="localhost";
$user="root";
$password="";
$database="logindb";
$conn=mysqli_connect($server,$user,$password,$database);
if (!$conn) {
die("UNABLE TO CONNECT THE DATABASE...").mysqli_error($qry);

} ?>

Welcome.php

<?php
session_start();

ini_set('log_errors', 'On');
//Tell PHP to not display errors
ini_set('display_errors', 'Off');
//Set error_reporting to E_ALL
ini_set('error_reporting', E_ALL );
?>

<!DOCTYPE html>
<html>
<head>
<style type="text/css">

body
 {
background-color: black;
margin:60px;
}

p
{
color: red ;
font-family: forte ;
font-weight: bold;
font-size: 28px;
}

a{
color: yellow ;
font-size: 28px ;
font-family: comic sans ms ;
text-decoration:none;
}

a:hover
{
color: red ;
font-weight: bold;
}

#resume
{
color: white ;
font-family: Times New Roman ;
font-weight: bold;
font-size: 15px;
}

table,ul,li
{
color: white ;
font-family: Times New Roman ;
font-weight: bold;
font-size: 15px;
}

</style>
<title>Welcome Page</title>
</head>
<body>

<?php
 echo "<p>";
echo "Welcome ". $_SESSION['user_data'];
echo "<a href='logout.php' style='float:right;'> Sign Out </a>";
echo "</p>";
echo "<hr>";
?>

<fieldset>
<legend style="color: red;">RESUME</legend>

<h1 style="color:yellow; font-style: italic; text-align: center; font-

size:20px;"><u>RESUME</u></h1><br>

<p id="resume">
Manoj Kumar<br>

<h1 style="color:yellow; font-style: italic; background-color: grey;">EDUCATION

QUALIFICATION...</h1><br><br>
<table border="5" cellspacing="10" cellpadding="10" style="margin-left:
auto;margin-right: auto;">
<thead>
<th>YEAR</th>
<th>DEGREE</th>
<th>UNIVERSITY NAME</th>
<th>BOARD</th>
<th>PERCENTAGE</th>
</thead>
<tr>
<td>2018-2022</td>
<td>B.Tech- Computer Science Engineering</td>
<td>Chandigarh Group of Colleges</td>
<td>Punjab Technical University</td>
<td>73% (up to 4thsem)</td>
</tr>
<tr>
<td>2016-2018</td>
<td>Diploma</td>
<td>Thapar Poltechnique College (PUNBAJ)</td>
<td>HPBOSE</td>
<td>82%</td>
</tr>
<tr>
<td>2015-2016</td>
<td>Matric</td>
<td>Arya Senior Secondary Public School, Punjab</td>
<td>PSBE</td>
 <td>84%</td>
</tr>
</table><br>

<h1 style="color:yellow; font-style: italic; background-color:

grey;">INTERPERSONAL SKILLS...</h1>
<ul>
<li>Eager to work.</li>
<li>Ability to work in a team and set up the trust.</li>
<li>Calm and composed.</li>
<li>Team Player.</li>
<li>Friendly Nature towards everyone.</li>
</ul>

<h1 style="color:yellow; font-style: italic; background-color: grey;">EXTRA-

CURRICULAR ACTIVITIES...</h1>
<ul>
<li>Participated in every event of the college as coordinators such as Fresher’s
Party, Athletic meet (Department Coordinator), Independence Day Event, Red
Bull Event, and Army Day Event.</li>
<li>Participated in “Coding Ninja Coding Challenge” organized by Codeboom
Event.</li>
<li>Participated in “Debate- The Ozone Day” organized by Applied Science in
2018.</li>
<li>Visited multiple numbers of Industries from Chandigarh Group of Colleges to
gain knowledge about Industries.</li>
</ul>

<h1 style="color:yellow; font-style: italic; background-color:

grey;">HOBBIES...</h1>
<ul>
<li>Practice coding Regular.</li>
<li>Learn Something new from the browser.</li>
</ul>

<h1 style="color:yellow; font-style: italic; background-color:

grey;">INTERESTS...</h1>
<ul>
<li>Watching Movies.</li>
</ul>

<h1 style="color:yellow; font-style: italic; background-color: grey;">PERSONAL

INFORMATION...</h1><br>
<table border="5" cellspacing="10" cellpadding="10" style="margin-left:
auto;margin-right: auto;">
<tr>
<td>Date of Birth</td>
<td>08-May-2000</td>
 </tr>
<tr>
<td>Gender / Marital Status</td>
<td>Male / Single</td>
</tr>
<tr>
<td>Language Proficiency</td>
<td>English, Hindi</td>
</tr>
</table><br>

<h1 style="color:yellow; font-style: italic; background-color:

grey;">DECLARATION...</h1><br>
<i style="color: white; float: left;"> I do hereby declare that the above information
is true to the best of my knowledge. </i><br><br>
<b style="float: left; color: yellow; ">Name: Manoj Kumar</b>
<b style="float: right; color: yellow; ">Date: 30-07-2020</b>
<b style="float: left; color: yellow; ">Place: Mohali</b>

</p>

</fieldset>
</body>

</html>

Logout.php

<?php
session_start();

ini_set('log_errors', 'On');
//Tell PHP to not display errors
ini_set('display_errors', 'Off');
//Set error_reporting to E_ALL
ini_set('error_reporting', E_ALL );

if (session_destroy())
{
header("Location:login13.php?id=You have Successfully Logout");
}
?>

Add_verify.php

<?php
include 'datacon.php';
$userid=$_POST['userid'];
$username=$_POST['user'];
$userpassword=$_POST['pass'];

$qry="SELECT * from user_data where id='$userid'";

$res=mysqli_query($conn,$qry);

$count=mysqli_num_rows($res);

if ($count>0)
{
header("Location:login13.php?id=User Id Already Exists");
}
else
{
$qry1="INSERT into user_data (id,user,password) values
('$userid','$username','$userpassword')";
$res1=mysqli_query($conn,$qry1);
$count1=mysqli_affected_rows($conn);
if ($count1)
{
header("Location:login13.php?id=Record Added Successfully");
}
else
{
header("Location:addrecords.php?id=Unable to add the record");
}
}
?>

Addrecords.php

<?php
session_start();
?>

<!DOCTYPE html>
<html>
<head>
<title>REGISTER FORM</title>
<style type="text/css">

body {background-color: black ; margin: 80px}

 p {color: white ; font-family: forte ; font-weight: bold; ; font-size: 28px}

a {color: yellow ; font-size: 18px ; font-family: comic sans ms ; text-

decoration:none;}

a:hover {color: red ; font-weight: bold;}

.style1 {color: white ; font-size: 16px ; font-family: comic sans ms; text-align:
center; line-height: 23px ; letter-spacing: 1px}

ol {color: white ; font-size: 16px ; font-family: comic sans ms; text-align: justify;
line-height: 23px ; letter-spacing: 1px}

.submit {background-color: red ; color: white ; font-family: comic sans ms ;

font-size: 16px ; padding: 15px}

label {color: white ; font-size: 14px ; font-family: comic sans ms;}

#heading
{
color: red;
text-align: center;
font-family: forte;
}

label{
color: yellow;
font-family: forte;
font-size: 15px;
}
</style>
</head>
<body>
<h1 id="heading">REGISTRATION PAGE..........</h1>
<hr>
<p class="style1">
Kindly fill the register form :
</p>

<form action="add_verify.php" method="POST">

<table border="5" cellpadding="10" cellspacing="10" style="margin-right:
auto;margin-left: auto;">
<tr>
<td> <label>User Id</label> </td>
<td> <input type="text" name="userid" id="userid" required> </td>
</tr>
<tr>
<td> <label>User Name</label> </td>
 <td> <input type="text" name="user" id="user" required> </td>
</tr>
<tr>
<td> <label>Password</label> </td>
<td> <input type="password" name="pass" id="pass" required> </td>
</tr>
<tr>
<th colspan="2">
<input type="submit" value="Add Data" class="submit">
<input type="reset" value="Clear Data" class="submit">
</th>
</tr>
<tr>
<th colspan="2" style="color:red;font-size: 18px;font-family: forte">
<?php
if (isset($_GET['id']))
{
echo $_GET['id'];
}
?>
</th>
</tr>

</table>
</form>

</body>
</html>

Output:

HOME PAGE
LOGIN PAGE
AFTER LOGOUT AND BACK TO LOGIN PAGE

WELCOME PAGE
 Experiment No -15
Demonstrate the use of Ajax and JSON Technologies in programming Examples.
Code:
Exp15.html:-
<html>
<head>
<script>
function showHint(str) {
if (str.length == 0) {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("txtHint").innerHTML = this.responseText;
}
};
xmlhttp.open("GET", "gethint.php?q=" + str, true);
xmlhttp.send();
}
}
</script>
</head>
<body>

<p><b>Start typing a name in the input field below:</b></p>

<form>
First name: <input type="text" onkeyup="showHint(this.value)">
</form>
<p>Suggestions: <span id="txtHint"></span></p>
</body>
</html>

Gethint.php
<?php
$a[] = "Anna";
$a[] = "Brittany";
$a[] = "Cinderella";
$a[] = "Diana";
$a[] = "Eva";
$a[] = "Fiona";
$a[] = "Gunda";
$a[] = "Hege";
$a[] = "Inga";
$a[] = "Johanna";
$a[] = "Kitty";
$a[] = "Linda";
$a[] = "Nina";
$a[] = "Ophelia";
$a[] = "Petunia";
$a[] = "Amanda";
$a[] = "Raquel";
$a[] = "Cindy";
$a[] = "Doris";
$a[] = "Eve";
$a[] = "Evita";
$a[] = "Sunniva";
$a[] = "Tove";
$a[] = "Unni";
$a[] = "Violet";
$a[] = "Liza";
$a[] = "Elizabeth";
$a[] = "Ellen";
$a[] = "Wenche";
$a[] = "Vicky";

// get the q parameter from URL

$q = $_REQUEST["q"];

$hint = "";

// lookup all hints from array if $q is different from ""

if ($q !== "") {
$q = strtolower($q);
$len=strlen($q);
foreach($a as $name) {
if (stristr($q, substr($name, 0, $len))) {
if ($hint === "") {
$hint = $name;
} else {
$hint .= ", $name";
}
}
}
}

// Output "no suggestion" if no hint was found or output correct values

echo $hint === "" ? "no suggestion" : $hint;
?>
Output ;
 Experiment No – 16
AIM: Demonstrate the use of web site designing tools such as Joomla, WordPress.

Technology Used: Bootstrap

Bootstrap is a free and open-source framework directed at responsive, mobile-first front-end
web development. It contains CSS- and JavaScript-based design templates for typography,
forms, buttons, navigation, and other interface components.
Code:

Index
<!DOCTYPE html>
<head>
<title>Lifestyle Store</title>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="css/glyph.css" rel="stylesheet" type="text/css"/>
<link href="index.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="script/bootstrap.min.js"></script>
</head>

<body>
<!--NAVBAR-->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-
target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">Lifestyle Store</a>
</div>

<div class="collapse navbar-collapse" id="myNavbar">

<ul class="nav navbar-nav navbar-right">
<li><a href="signup.html"><span class="glyphicon glyphicon-
user"></span> Sign Up</a></li>
<li><a href="login.html"><span class="glyphicon glyphicon-log-
in"></span> Login</a></li>
</ul>
</div>
</div>
</nav>
<!--Content -->

<div class="content">
<br><br><br><br><br><br><br><br>
<div class="banner-image">
<div class="container">
 <div class="banner-content">
<p style="text-align: center;">&nbsp;&nbsp;&nbsp;&nbsp;
<a href="products.html"><button type="submit" name="submit"
class="btn btn-danger
btn-lg active">Shop Now</button></a>
</p>
</div>
</div>
</div>
</div>

<!--Footer -->
<div class="navbar navbar-inverse navbar-fixed-bottom"><p style="text-align: center; color: white;">Copyright
&copy; Lifestyle Store. All Rights Reserved | Contact Us: +91 90000 00000</p></div>
</body>
</html>

Sign Up

<!DOCTYPE html>
<html>
<head>
<title>Sign-Up</title>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="css/glyph.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="script/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-
target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
 </button>
<a href="#" class="navbar-brand">Lifestyle Store</a>
</div>

<div class="collapse navbar-collapse" id="myNavbar">

<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="signup.html"><span class="glyphicon
glyphicon-user"></span> Sign Up</a>
<li><a href="login.html"><span class="glyphicon glyphicon-log-
in"></span> Login</a>
</ul>
</div>
</div>
</nav>
<br><br><br><br><br>
<div class="container-fluid">
<div class="row">
<div class="col-lg-4 col-lg-offset-4 col-md-6 col-md-offset-3">
<h2>SIGN UP</h2>
<form>
<div class="form-group">
<input class="form-control" placeholder="Name" name="name" required = "true">
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Email" name="e-mail" required = "true">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password" name="password" required = "true">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Contact" name="contact" required = "true">
</div>
<div class="form-group">
<input class="form-control" placeholder="City" name="city" required = "true">
</div>
<div class="form-group">
<input class="form-control" placeholder="Address" name="address" required = "true">
</div>
<button type="submit" name="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
<div class="navbar navbar-inverse navbar-fixed-bottom"><p style="text-align: center; color: white;">Copyright
&copy; Lifestyle Store. All Rights Reserved | Contact Us: +91 90000 00000</p></div>
</body>
</html>
Log in

<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="css/glyph.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="script/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-
target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">Lifestyle Store</a>
</div>

<div class="collapse navbar-collapse" id="myNavbar">

<ul class="nav navbar-nav navbar-right">
<li><a href="signup.html"><span class="glyphicon glyphicon-
user"></span> Sign Up</a>
<li class="active"><a href="login.html"><span class="glyphicon
glyphicon-log-in"></span> Login</a>
</ul>
</div>
</div>
</nav>
<br><br><br><br><br><br>
<div class="container">
<div class="row">
<div class="col-xs-4 col-xs-offset-4">
<div class="panel panel-primary">
<div class="panel-heading">
<h4>LOGIN</h4>
</div>
<div class="panel-body">
<p><em style="color: #ff6666">Login to make a purchase</em></p>
<form>
<div class="form-group">
<input type="email" class="form-control" placeholder="Email" name="e-mail" required = "true">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password" name="password" required = "true">
</div>
<button type="submit" name="submit" class="btn btn-primary">Login</button><br><br>
</form><br/>
</div>
<div class="panel-footer"><p>Don't have an account? <a href="signup.html">Register</a></p></div>
</div>
</div>
</div>
</div>
<div class="navbar navbar-inverse navbar-fixed-bottom"><p style="text-align: center; color: white;">Copyright
&copy; Lifestyle Store. All Rights Reserved | Contact Us: +91 90000 00000</p></div>
</body>
</html>

Products

<!DOCTYPE html>
<html>
<head>
<title>Products</title>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="css/glyph.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="script/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-
target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">Lifestyle Store</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="cartpage.html"><span class="glyphicon glyphicon-
shopping-cart"></span> Cart</a><li><a href="settings.html"><span class="glyphicon glyphicon-user"></span>
Settings</a>
<li><a href="#"><span class="glyphicon glyphicon-log-
out"></span> Logout</a>
</ul>
</div>
</div>
</nav>
<br><br><br><br><br>
<div class="container">
<div class="jumbotron" style="background-color: #c7c9cd;">
<h1>Welcome to our Lifestyle Store!</h1>
<p>We have the best cameras, watches and shirts for you. No need to hunt around, we
have all in one place.</p>
</div>
<!-- ROW 1 -->
<div class="row">
<div class="col-md-3 col-sm-6">
<img src="img/5.jpg" class="img-thumbnail img-responsive">
<div style="text-align: center;">
<h3>Canon Eos</h3>
<p>Price: Rs. 36000.00</p>
<button type="submit" name="submit" class="btn btn-primary">Add to Cart</button>
</div>
</div>

<div class="col-md-3 col-sm-6">

<img src="img/2.jpg" class="img-thumbnail img-responsive">
<div style="text-align: center;">
<h3>Sony DSLR</h3>
<p>Price: Rs. 40000.00</p>
<button type="submit" name="submit" class="btn btn-primary">Add to Cart</button>
</div>
</div>

<div class="col-md-3 col-sm-6">

<img src="img/3.jpg" class="img-thumbnail img-responsive">
<div style="text-align: center;">
<h3>Sony DSLR</h3>
<p>Price: Rs. 50000.00</p>
<button type="submit" name="submit" class="btn btn-primary">Add to Cart</button>
</div>
</div>

<div class="col-md-3 col-sm-6">

<img src="img/4.jpg" class="img-thumbnail img-responsive">
<div style="text-align: center;">
<h3>Olympus DSLR</h3>
<p>Price: Rs. 80000.00</p>
<button type="submit" name="submit" class="btn btn-primary">Add to Cart</button>
</div>
</div>
</div>
<br><br>
<!-- ROW 2 -->
<div class="row">
<div class="col-md-3 col-sm-6">
<img src="img/9.jpg" class="img-thumbnail img-responsive">
<div style="text-align: center;">
<h3>Tital Model #301</h3>
<p>Price: Rs. 13000.00</p>
<button type="submit" name="submit" class="btn btn-primary">Add to Cart</button>
</div>
</div>

<div class="col-md-3 col-sm-6">

<img src="img/10.jpg" class="img-thumbnail img-responsive">
<div style="text-align: center;">
<h3>Titan Model #201</h3>
<p>Price: Rs. 3000.00</p>
<button type="submit" name="submit" class="btn btn-primary">Add to Cart</button>
</div>
</div>

<div class="col-md-3 col-sm-6">

<img src="img/11.jpg" class="img-thumbnail img-responsive">
<div style="text-align: center;">
<h3>HMT Milan</h3>
<p>Price: Rs. 8000.00</p>
<button type="submit" name="submit" class="btn btn-primary">Add to Cart</button>
</div>
</div>

<div class="col-md-3 col-sm-6">

<img src="img/12.jpg" class="img-thumbnail img-responsive">
<div style="text-align: center;">
<h3>Faber Luba #111</h3>
<p>Price: Rs. 18000.00</p>
<button type="submit" name="submit" class="btn btn-primary">Add to Cart</button>
</div>
</div>

</div>
<br><br>
<!-- ROW 3 -->
<div class="row">
<div class="col-md-3 col-sm-6">
<img src="img/8.jpg" class="img-thumbnail img-responsive">
<div style="text-align: center;">
<h3>H&W</h3>
<p>Price: Rs. 800.00</p>
<button type="submit" name="submit" class="btn btn-primary">Add to Cart</button>
</div>
</div>

<div class="col-md-3 col-sm-6">

<img src="img/6.jpg" class="img-thumbnail img-responsive">
<div style="text-align: center;">
<h3>Luis Phil</h3>
<p>Price: Rs. 1000.00</p>
<button type="submit" name="submit" class="btn btn-primary">Add to Cart</button>
</div>
</div>

<div class="col-md-3 col-sm-6">

<img src="img/13.jpg" class="img-thumbnail img-responsive">
<div style="text-align: center;">
<h3>John Zok</h3>
<p>Price: Rs. 1500.00</p>
<button type="submit" name="submit" class="btn btn-primary">Add to Cart</button>
</div>
</div>

<div class="col-md-3 col-sm-6">

<img src="img/14.jpg" class="img-thumbnail img-responsive">
<div style="text-align: center;">
<h3>Jhalsani</h3>
<p>Price: Rs. 13000.00</p>
<button type="submit" name="submit" class="btn btn-primary">Add to Cart</button>
</div>
</div>
</div>

</div>
<br><br><br>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div class="navbar navbar-inverse navbar-fixed-bottom"><p style="text-align: center; color: white;">Copyright
&copy; Lifestyle Store. All Rights Reserved | Contact Us: +91 90000 00000</p></div>
</body>
</html>

Settings

<!DOCTYPE html>
<html>
<head>
<title>Settings</title>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="css/glyph.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="script/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-
target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">Lifestyle Store</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="cartpage.html"><span class="glyphicon glyphicon-
shopping-cart"></span> Cart</a>
<li class="active"><a href="settings.html"><span class="glyphicon
glyphicon-user"></span> Settings</a>
<li><a href="#"><span class="glyphicon glyphicon-log-
out"></span> Logout</a>
</ul>
</div>
</div>
</nav>
<br><br><br><br><br><br>
<div class="container col-xs-offset-4">
<div class="row">
<div class="col-xs-4">
<h1>Change Password</h1>
<form>
<input type="text" class="form-control" name="password"
placeholder="Old Password"><br>
<input type="text" class="form-control" name="newpassword"
placeholder="New Password"><br>
<input type="text" class="form-control" name="" placeholder="Retype New
Password"><br>
<input type="button" name="Change" value="Change" class="btn btn-
default btn-primary">
</form>
</div>
</div>
</div>

<div class="navbar navbar-inverse navbar-fixed-bottom"><p style="text-align: center; color: white;">Copyright

&copy; Lifestyle Store. All Rights Reserved | Contact Us: +91 90000 00000</p></div>

</body>
</html>

Cart

<!DOCTYPE html>
<html>
<head>
<title>Cart</title>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="css/glyph.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="script/bootstrap.min.js"></script>
</head>
<body>
 <nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-
target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">Lifestyle Store</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="cartpage.html"><span
class="glyphicon glyphicon-shopping-cart"></span> Cart</a>
<li><a href="settings.html"><span class="glyphicon glyphicon-
user"></span> Settings</a>
<li><a href="#"><span class="glyphicon glyphicon-log-
out"></span> Logout</a>
</ul>
</div>
</div>
</nav>
<br><br><br><br><br><br>
<div class="container">
<table class="table table-striped col-xs-4">
<tbody>
<tr>
<th>Item Number</th>
<th>Item Name</th>
<th>Price</th>
<th></th>
</tr>
<tr>
<td>&nbsp;</td>
<td>Total</td>
<td>Rs 0/-</td>
<td><a href="success.html"><button type="submit"
name="submit" class="btn btn-primary">Confirm Order</button></a></td>
</tr>
</tbody>
</table>
</div>
<div class="navbar navbar-inverse navbar-fixed-bottom"><p style="text-align: center; color: white;">Copyright
&copy; Lifestyle Store. All Rights Reserved | Contact Us: +91 90000 00000</p></div>

</body>
</html>
Confirmation Page

<!DOCTYPE html>
<html>
<head>
<title>Success</title>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="css/glyph.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="script/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-4 col-xs-offset-4">
<br><br><br><br><br><br><br><br><br><br><br><br>
<p class="text-center" style="font-size:14px;">Your order is confirmed. Thank you for shopping
with us. <br><a href="products.html">Click here</a> to purchase any other item.</p>
</div>
</div>
</div>
<
</body>
</html>
 Experiment No -17
Implement at least one minor project using different technologies mentioned in theory of the
subject.
HTML CODE:

<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport" content="width=device-
width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="preconnect"
href="https://fonts.googleapis.com">
<link rel="preconnect"
href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Kai
sei+HarunoUmi:wght@700&display=swap"
rel="stylesheet">
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/font-
awesome/4.7.0/css/font-awesome.min.css">
<title>TSF HELPING HAND</title>
</head>

<body>

<!-- Home Section -->

<section class="home">
<nav>
<a href="index.html"><img
src="images/logo.jpg"></a>
<div class="navlink" id="navlinks">
<i class="fa fa-times"
onclick="hideMenu()"></i>
<ul>
<li>
<a
href="index.html">HOME</a>
</li>
<li>
 <a href="#aboutpage">ABOUT
US</a>
</li>
<li>
<a
href="#contactpage">CONTACT US</a>
</li>
<li>
<a
href="#donate">DONATE</a>
</li>

</ul>
</div>
<i class="fa fa-bars"
onclick="showMenu()"></i>
</nav>
<div class="text">
<p>Small efforts can make Big
change,</p>
<h1>Together To Help, for <br> The
Better World</h1>
<p style="padding-bottom: 65px;">We
believe that we can save more lifes with
you.<br>Your small contribution
means a lot!!!</p>

<a>
<form id="donate">
<form><script
src="https://checkout.razorpay.com/v1/payment-
button.js" data-
payment_button_id="pl_HxlkJigUVr4WJq" async>
</script> </form>
</form>
</a>

</div>
</section>

<!-- About Section -->

<section class="about" id="aboutpage">

<div class="texta">
<h1>About Us</h1>
 <p>The TSF Helping Hand is a leading
independent child organisation, which works in
many states of the country. It's
established in 2000.</p>
<p>We firmly believe that we can save
more lifes with you, which is why, we are fiercely
comminted to ensure
for child deserve the best chance
for a bright future, </p>
<p>we are proud to be the world's best
organisation.<br>By saving the future of young
one's.</p>
<p><b>Help us a Build Well</b></p>

</div>

</section>

<!-- Our mission -->

<section class="mission" id="missionpage">

<h1>Our Aim</h1>
<p>To inspire breakthroughs in the way the
world treats children, and come together to bring
immediate, and
long-lived change in their lives</p>
<div class="row">
<div class="mission-col">
<img src="images/aim1.jpg">
<div class="layer">
<h2>Our Responsibility</h2>
<p class="p1">To Enable people
to take responsibility for the situation of needy
child </p>
</div>
</div>
<div class="mission-col">
<img src="images/aim2.jpg">
<div class="layer">
<h2>Assemble potential</h2>
<p class="p1">Motivate child
to achieve their goal<br> and discover their
potential and help them
</p>
 </div>
</div>
<div class="mission-col">
<img src="images/aim3.jpg">
<div class="layer">
<h2>Serve For Children's</h2>
<p class="p1">Serve the every
child of this<br> nation and enables them
education facilities</p>
</div>
</div>
</div>
</section>

<!-- Contact section -->

<section class="contact" id="contactpage">
<h1>Contact Us</h1>
<form action="contact.php" method="POST">
<input type="text" class="contact-
text" name="name" placeholder="Enter your name"
required>
<input type="email" class="contact-
text" name="email" placeholder="Enter your email"
required>
<textarea rows="8" class="contact-
text" name="message" placeholder="Message"
required></textarea>
<button type="submit"
onclick="sub()" id="submit1"
class="hero-btn" name="submit"><b>SEND
MESSAGE</b></button>
</form>

</section>

<!-- Footer -->

<section class="footer">
<p style="color: rgb(2, 1,
1);">&copy;copyrights 2021 TSF HELPING HAND. All
rights reserved!<br> made by @ Harsh Jindal.</p>
<div class="icons">
<a><i class="fa fa-facebook"></i></a>
<a><i class="fa fa-twitter"></i></a>
<a><i class="fa fa-instagram"></i></a>
<a><i class="fa fa-linkedin"></i></a>
 </div>
</section>

<!-- Javascript section -->

<script src="main.js"> </script>

</body>
CSS CODE: </html>
*{
margin: 0;
padding: 0;
}
.home{

min-height: 100vh;
width: 100%;
background-size:
cover;
background-position:
center;
position: relative;
animation: animate
20s ease-in-out infinite;
}

/* This is animation
section */
@keyframes animate{
0%,100%{
background-
image:url(images/bg4.jpg)
;

}
25%{
background-
image:url(images/bg2.jpg)
;

}
50%{
background-
image:url(images/bg3.jpg)
;
}
75%{
 background-
image:url(images/bg1.jpg)
;
}

}
nav{
display: flex;
justify-content:
space-around;
align-items: center;

}
nav a img{
position: relative;
padding:10px;
}
nav img{
position: relative;
width: 70px;

}
.navlink{
flex:1;
text-align:right;
}
.navlink ul li {

list-style: none;
display: inline-
block;
padding: 25px 10px;
position: relative;
margin-right: 25px;

}
.navlink ul li a{
text-decoration:
none;
color: aliceblue;
font-size: 16px;
}
.navlink ul li a:hover{
color:aqua;
}
.navlink ul li a::after{
content: " ";
width: 0;
height: 2px;
background-color:
red;
display: block;
transition: 0.5s;
margin: auto;
}

.navlink ul li
a:hover::after{
width: 100%;

/* Text */
.text{
text-align: center;
margin-top: 12%;
color: rgb(253, 253,
253);
justify-content:
space-between;

}
.text p{
font-size: 20px;
padding: 20px 0px;

}
.text h1{
font-family: 'Kaisei
HarunoUmi', serif;
font-size: 35px;
}

.btn{

display: inline-
block;
color: rgb(5, 5, 5);
border-radius: 5px;
border: 2px solid
white;
 padding: 12px 34px;
margin-top: 30px;
font-size: 20px;
position: relative;
cursor: pointer;
background-color:
rgb(224, 224, 117);
}
.btn:hover{

text-decoration:
none;
/* box-shadow:1px 6px
rgb(207, 192, 192); */
transform:
scale(1.1);
}
nav .fa{
display: none;
}
@media(max-width:700px)
{
.navlink ul li{
padding: 10px
5px;
}
.navlink ul li a{
font-size: 15px;

}
.navlink{
position: fixed;
background:
rgb(72, 191, 196);
height: 100vh;
width: 150px;
top:0;
right:-150px;
text-align: left;
z-index: 1;
transition: 1s;
}
nav .fa{
display:inline-
block;
 color: rgb(248,
248, 248);
margin-top: 5px;
margin-right: -
40px;
font-size: 22px;
cursor: pointer;
margin-left: 10px;
}
nav a img{
margin-left: -78px;
}
.navlink ul{
margin-left:6px;
}
.text{
margin-top: 22%;

}
.text p{
font-size: 17px;
}
.text h1{
font-size: 22px;
}
}

/* About Us Section */

.about{
position: relative;
text-align: center;
margin-top: 8px;
padding: 10px;
min-height: 60vh;
background-image:
linear-
gradient(rgba(4,9,30,0.7)
,rgba(4,9,30,0.7));
background-size:
cover;
background-position:
center;
}
.about h1,p{
color: aliceblue;
 padding: 10px;
}
.texta{
margin-top: 40px;
font-size: 22px;
}
.about h1{
color:
blanchedalmond;
padding-bottom: 28px;

}
@media(max-width:700px){
.about p{
font-size: 17px;
}
}

/* Our Mission */

@media(max-width:700px)
{
.row{
flex-direction:
column;
}
.layer:hover p.p1{
bottom: 0;

@media(min-device-width:
701px) and (max-device-
width: 1030px) {
.layer:hover p.p1{
bottom: 0;
}
}
.row{
display: flex;
justify-content:
space-between;
}
.mission p{
color: black;
font-size: 18px;
padding: 30px 10px;
/* position:
relative; */
}
.mission h1{
font-size: 30px;
}
.mission
{
width: 80%;
margin: auto;
text-align: center;
padding-top: 50px;

}
.mission-col
{
flex-basis:32%;
border-radius: 10px;
margin-bottom: 30px;
position: relative;
overflow: hidden;
}
.mission-col img
{
height: 100%;
width: 100%;
display: block;
}
.layer
{
background:
transparent;
height: 100%;
width: 100%;
position: absolute;
top:0;
left: 0;
transition: 0.5s;
}
.layer:hover
{
 background: rgba(207,
80, 80, 0.7);
}
.layer h2{
transform:
translateX(-50%);
position: absolute;
width: 100%;
left: 50%;
bottom: 0;
font-weight: bold;
opacity:0;
transition: 0.3s;
}
.layer .p1{
transform:
translatex(-50%);
position: absolute;
width: 100%;
left: 50%;
bottom: 0;
font-weight: 30px;
opacity:0;
transition: 0.3s;
}
.layer:hover h2{
bottom: 69%;
opacity: 1;

}
.layer:hover .p1{
bottom: 30%;
opacity: 1;
margin-top: 20px;
font-size: 20px;
color: aliceblue;
}

/* Contact Section*/

.contact{
position: relative;
text-align: center;
margin-top: 8px;
 background-image:
url(images/contact.jpg);
background-position:
center;
background-size:
cover;
min-height: 65vh;
}
.contact h1{
color: antiquewhite;
text-align: center;
font-size: 35px;
padding-top:40px;
margin-bottom: 20px;
}
.contact-text{
display: block;
width: 50%;
border: 2px solid
black;
border-radius: 5px;
margin:10px auto;
padding: 12px 11px;
background-color:
rgb(225, 232, 238);

}
.hero-btn{
padding: 8px 8px;
color:white;
background-color:
transparent;
box-shadow: 5px 5px
wheat;
}
.hero-btn:hover{
color: rgb(21, 106,
180);
background-color:
aliceblue;
transform:
scale(1.1);
cursor: pointer;
}
@media(max-height:700px)
{
 .contact{
min-height: 70vh;
}
}
/* Footer Section */

.footer
{
width: 100%;
text-align: center;
padding: 20px 0 10px
0;
background-color:
aqua;
background-position:
center;
margin-top: 8px;
}
.footer p{
font-size: 18px;

}
.footer .fa{
font-size: 20px;
padding: 10px;
color: rgb(192, 37,
96);
}
.footer .fa:hover{
color: red;
cursor: pointer;
}

@media(max-width:700px)
{
.texta{
margin-top: 40px;
font-size: 18px;
}
}
PHP Code:
<?php
// $name="";
if (isset($_POST['submit'])) {
$name = $_POST['name'];
$visitor_email = $_POST['email'];
 $message = $_POST['message'];

$email_subject = 'New form submission';

$email_body = "User Name: $name.\n" . "User Email: $visitor_email.\n" .

"User message:$message .\n";

$headers = "From: [email protected]";

$to = '[email protected]';

mail($to, $email_subject, $email_body,$headers );

mail($visitor_email,$email_subject, $email_body);
header("Location: index.html");

}
else
{
echo "error ";
}

?>
JS CODE:
var navLink =
document.getElementById("navlinks");
function showMenu() {
navLink.style.right = "0";
}
function hideMenu() {
navLink.style.right = "-150px";
}

// var submit=document.getElementById("submit1");
function sub() {

alert("Your message has been sent

successfully!!!");
}
OUTPUT:
 Experiment No-18
AIM: Create Cookies and Generate Session in PHP.
Description:

PHP Cookies
Cookies, or browser cookies, are small pieces of data which the webserver asks the client's web
browser to store. Each request back to the webserver will include these pieces of data. The data
is organized as key/value pairs

PHP Sessions
Sessions are an alternative to cookies. A session is usually a file or database record which
contains the small pieces of data which the webserver wants to store for each user. Instead of
sending key/value pairs to the browser, these values are stored on the server, and only a
reference identifier ("session ID") is sent to the user's browser as a cookie. This session ID
needs to be a long and unique number. On each future request, the browser will send the session
ID as a cookie and the webserver will locate the corresponding session file to allow access to
the stored user data.

Code:
<?php
$cookie_name = "user";
$cookie_value = "Jasjit";
//Set a Cookie
setcookie($cookie_name, $cookie_value, time() + (15), "/");
//Start a Session
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<title>Cookies and Sessions</title>
</head>
<body>
<div style="border: 1px solid;">
<center>
<?php
if(!isset($_COOKIE[$cookie_name])) {
echo "Cookie named '" . $cookie_name . "' is not set!";
} else {
echo "Cookie '" . $cookie_name . "' is set!<br>";
echo "Value is: " . $_COOKIE[$cookie_name];
// Check if Cookies are enables
if(count($_COOKIE) > 0) {
echo "<br>Cookies are enabled.";
} else {
echo "<br>Cookies are disabled.";
}
}
// Set session variables
$_SESSION["name"] = "user";
$_SESSION["value"] = "Jasjit";
echo "<br>Session name is " . $_SESSION["name"] . ".<br>";
echo "Session value is " . $_SESSION["value"] . ".";

?>
</center>
</div>
</body>
</html>

OUTPUT:
 Experiment No-19

Aim:- Demonstrate the use of Functions in PHP.

(a) Create a function to calculate factorial of a number using for loop in php.
(b) Create a function with two argument to check which one is greater.

a) PHP CODE:

<!DOCTYPE html>
<html>
<body>
<?php
$num = 4;
$factorial = 1;
for ($x=$num; $x>=1; $x--)
{
$factorial = $factorial * $x;
}
echo "Factorial of $num is $factorial";
?>
</body>
</html>

OUTPUT:
Factorial of 4 is 24

b) PHP CODE:

<!DOCTYPE html>
<html>
<body>
<?php
function isGreater($num1,$num2) {
if($num1>$num2)
echo "$num1 is greater. <br>";
elseif($num1<$num2)
echo "$num2 is greater.";
else
echo "Both are equal";
}
isGreater(4,5);
?>
</body>
</html>

OUTPUT:
5 is greater