Sri Sukhmani Institute Of Engg &Technology,Derabassi

Sri Sukhmani Institute Of Engg &Technology,Derabassi

Department of Computer Science and Engineering

Vision of the Department

To develop proficient, research oriented and socially responsible professionals in the field of
Computer Science and Engineering.

Mission of the Department

M1: To strengthen the core competence in Computer Science and Engineering through effective
teaching learning methodologies.

M2: To provide research oriented environment in the area of Computer Science and Engineering
addressing the need of industry and society.

M3: To promote industrial interactions and hands-on experience on latest IT tools leading to
successful professional career.

M4: To facilitate the students with global exposure through international collaborations and
internships.

M5: To prepare students for placements, higher studies and entrepreneurship through pre
placement training programs.

Program Educational Objectives (PEOs)

Computer Science and Engineering graduates will be able to:

PEO1: Analyze and solve Computer Science and Engineering problems through acquired
knowledge in mathematical and engineering concepts.

PEO2: Excel in the field of computing technologies with usage of modern tools and
multidisciplinary approach, to succeed in diversified domains of industry and academia.

PEO3: Develop professional and ethical attitude, communication skills, and an ability to relate
computer engineering issues with societal needs.

PEO4: Adapt to new technologies and constantly upgrade skills with an attitude towards lifelong
learning.

PEO5: Exhibit technical and research abilities along with a zeal to lead and work in team
environment.

1|Page
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

INDEX

Sr. no Content Page no.

1 Course Objectives and outcomes

2 List of Experiments

3 Configuration and administration Apache Web Server.

4 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

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

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

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

8 Create an HTML file to implement the concept of document object model

using JavaScript

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

10 Write an HTML page including any required JavaScript that takes a number
from one text field in the range of 0 to 999 and shows it in another text field
in words. If the number is out of range, it should show “out of range” and if
it is not a number, it should show “not a number” message in the result box.

11 Create a PHP file to print any text using variable.

12 . Demonstrate the use of Loops and arrays in PHPInsertion at beginning

13. Create a PHP file using GET and POST methods.Deletion at beginning

14 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

15 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.

16 A web application for implementation:

2|Page
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

a. 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.

b. If name and password matches, serves a welcome page with user’s full
name.

c. If name matches and password doesn’t match, then serves “password

mismatch” page

d. 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 (hint: use session for storing
the submitted login name and password)

17 Demonstrate the use of Ajax and JSON Technologies in programming

examples.

18 Demonstrate the use of web site designing tools such as Joomla, WordPress

19 Implement at least one minor project using different technologies mentioned

in theory of the subject.

Experiments beyond syllabus

23 Create Cookies and Generate Session in PHP.

Demonstrate the use of Functions in PHP.
24
(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.

COURSE OUTCOMES

1. To learn the basic of HTML elements

2. To learn the basics of PHP Console.
3. To introduce Client side scripting with JavaScript and AJAX..
4. Demonstrate the use of web site designing tools such as Joomla, WordPress
5. Demonstrate the use of Loops and arrays in PHP
6. To understand the basic concept of CSS.

3|Page
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

List of Experiments

Sr. no Content Page no.

1 Configuration and administration Apache Web Server.

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

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

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

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

6 Create an HTML file to implement the concept of document object model

using JavaScript

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

8 Write an HTML page including any required JavaScript that takes a number
from one text field in the range of 0 to 999 and shows it in another text field
in words. If the number is out of range, it should show “out of range” and if
it is not a number, it should show “not a number” message in the result box.

9 Create a PHP file to print any text using variable.

10 . Demonstrate the use of Loops and arrays in PHPInsertion at beginning

11 Create a PHP file using GET and POST methods.Deletion at beginning

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

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.

14 A web application for implementation:

a. 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.

b. If name and password matches, serves a welcome page with user’s full

4|Page
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

name.

c. If name matches and password doesn’t match, then serves “password

mismatch” page

d. 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 (hint: use session for storing
the submitted login name and password)

15 Demonstrate the use of Ajax and JSON Technologies in programming

examples.

16 Demonstrate the use of web site designing tools such as Joomla, WordPress

17 Implement at least one minor project using different technologies mentioned

in theory of the subject.

Experiments beyond syllabus

18 Create Cookies and Generate Session in PHP.

Demonstrate the use of Functions in PHP.
19
(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.

5|Page
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

PRACTICAL – 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.

6|Page
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

• 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’

7|Page
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

.
• 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.

8|Page
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

• 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.

9|Page
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

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.

10 | P a g e
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

PRACTICAL – 2
Aim: Develop an HTML, page to demonstrate the use of basic HTML Tags, Links to different
HTML page and also link within a page, insertion of images and creation of tables.
Solution:

<!DOCTYPE html>
<!--Website for top 5 games for pc with specification-->
<html>
<head>
<title>Top 5 games for pc with specification </title>
</head>
<body background="gg.jpg";">
<table align="right";border="2px"height="50px"width="350px" >
<tr>

<td><a href="" target="_blank" style="background-color:black; color:white;

font-size:22px;">Home</a></td>
<td><a href="signup.html" target="_blank" style="background-color:black; color:white; font-
size:22px;">Sign up</a></td>
<td><a href="" target="_blank" style="background-color:black; color:white; font-size:22px;">Login
in</a><td>
<td><a href="" target="_blank" style="background-color:black; color:white; font-size:22px;">Contact
us</a></td>
</tr>
</table>
<div width="200px"height="200px"><img src="oo.png"
height="200px"width="200px"align="top"></div>

<center>
<h1 style="font-size:40px;"><b><i>Top 5 games for pc</i></b></h1>
<P><b style="font-size: 20px; color:navy"><i>Bringing game to Everyone LIfe</i></b><br>

</center>
<h2>Introduction to Gaming world.</h2>
<img src="signup2.jpg" align="left" alt="image of game" width="300" padding="10" height="150px"
border="3">
<p style="align-content: right; font-family:40px; border:1;">
<i>As something that started over half a century ago, is now one of the biggest industries in the world.
Gaming has taken the entertainment field by storm in such a way that no one could have ever imagined. It
has been so that the market for digital games grew 8 percent from 2014 to $61 billion, according to a new
report from gaming intelligence firm SuperData Research. This should give people an idea of how big this
industry has become. The first game had just a ball like figure bouncing between two platforms. Over the
last five decades, gaming has grown into a giant powerhouse of entertainment and self-perpetuating
revenue. We have come a long way as today, complete worlds have started to exist within machines that
have become more powerful and efficient than ever before. As Personal computers get more affordable,
more and more people are looking towards gaming as the preferred means of entertainment.</i></p><br>
<br><br><br>
<h3>games and Specification:</h3>

11 | P a g e
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

<h4>GTA:5</h4>
<img src="gta5.jpg" align="left" alt="image of game" width="300" padding="10" height="150px"
border="3">
<p style="align-content: right; font-family:40px; border:1;">
<p>The Grand Theft Auto series is a legend in gaming and it’s games have usually set high standards. It’s
latest game, Grand Theft Auto V is no different, offering a huge map as well as a wide variety of gameplay
mechanics that range from driving, shooting and flying. This time around, the game offers three sets of
protagonists. There is also a new online mode that lets players wreck havoc even after they are done with
the main storyline.</p><br><br><br><br>
<h4>RED DEAD REDEMPTION 2</h4>
<img src="red.jpg" align="left" alt="image of game" width="300" padding="10" height="150px"
border="3">
<p style="align-content: right; font-family:40px; border:1;">
<p>Like it’s GTA brethren, Red Dead Redemption 2 offers a huge open world with loads of things to do. It
also offers a deep and engaging narrative about, family, friends, betrayal and of course, redemption. Further,
the gameplay is slick and graphics are among the best available right now. It is the ultimate ‘cowboy
simulator’.</p><br><br><br><br><br><br>
<h4>THE ELDER SCROLLS V: SKYRIM</h4>
<img src="skyrim.jpg" align="left" alt="image of game" width="300" padding="10" height="150px"
border="3">
<p style="align-content: right; font-family:40px; border:1;">
<p>Bethesda is known for its massive RPG’s and Elder Scrolls V: Skyim took things to a whole new level.
The game offers a fantastic world that is filled with elves, magicians and dragons. However, the huge map is
filled with tons of things to discover and side quests to complete. So much so that you’ll most probably end
up getting side-tracked when playing the game.</p><br><br><br><br><br>
<h4>DOOM: ETERNAL</h4>
<img src="doom.jpeg" align="left" alt="image of game" width="300" padding="10" height="150px"
border="3">
<p style="align-content: right; font-family:40px; border:1;">
<p>Doom: Eternal takes the insane FPS action of Doom (2016) and cranks the craziness up a notch. The
game is as action packs as before, but this time around, it offers better traversal mechanics as well as tweaks
gameplay. Not to mention the heavy metal soundtrack that suits the game
perfectly.</p><br><br><br><br><br>
<h4>FORZA HORIZON 4</h4>
<img src="forza.jpg" align="left" alt="image of game" width="300" padding="10" height="150px"
border="3">
<p style="align-content: right; font-family:40px; border:1;">
<p>Forza Horizon 4 is a gorgeous racing game that is set in a fictitious version of Great Britain. The game
offers swathes of beautiful countryside compared with the narrow, twisting roads of cities to offer a mixed
gameplay. New to the series is seasons which change the gameplay a bit. So in winter, the track is covered
in snow, making for a tricker driving experience.</p><br><br><br><br><br><br>
<h4>SPECIFICATION:</h4>
<table border="2" cell-padding="40" cell-spacing="40"width="700"height="50" align="left">
<tr>
<th>sr no.</th>
<th>game</th>
<th>specification</th>

</tr>
<tr>
<td>1.</td>

12 | P a g e
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

<td>GTA5</td>
<td><ul>
<li>Operating System: Windows 7/8/8.1</li>
<li>CPU: Intel Core 2 Quad CPU Q6600 @ 2.40GHz (4 CPUs) / AMD Phenom 9850 Quad-Core Processor
(4 CPUs) @ 2.5GHz actually works on dual-core CPUs as well</li>
<li>Video Card: NVIDIA 9800 GT 1GB / AMD HD 4870 1GB (DX 10, 10.1, 11)</li>
<li>RAM: 6 GB</li>
<li>Setup Size: 63.5GB</li>
<li>Hard Disk Space: 65GB</li></ul</td>
</tr>
<tr>
<td>2.</td>
<td>RED DEAD REDEMPTION 2 </td>
<td><ul>
<li>OS: Windows 7 – Service Pack 1 (6.1. 7601)</li>
<li>Processor: Intel Core i5-2500K / AMD FX-6300.</li>
<li>Memory: 8GB.</li>
<li>Graphics Card: Nvidia GeForce GTX 770 2GB / AMD Radeon R9 280 3GB.</li>
<li>HDD Space: 150GB.</li></ul></td>
</tr>
<tr>
<td>3.</td>
<td>THE ELDER SCROLLS V: SKYRIM</td>
<td><ul><li>CPU: Dual Core 2.0GHz or equivalent processor.</li>
<li>RAM: 2GB.</li>
<li>GPU: Direct X 9.0c compliant video card with 512 MB of RAM.</li>
<li>DX: DX9.</li>
<li>OS: Windows 7/Vista/XP PC (32 or 64 bit)</li>
<li>Store: 6GB free HDD Space.</li>
<li>Sound: DirectX compatible sound card.</li>
<li>Network: Internet Access for Steam activation.</li></ul></td>
</tr>
<tr>
<td>4.</td>
<td>DOOM: ETERNAL</td>
<td><ul><li>64-bit Windows 10.</li>
<li>Intel Core i7-6700K or better, or AMD Ryzen 7 1800X or better.</li>
<li>8GB System RAM.</li>
<li>At least 50 GB hard drive space.</li>
<li>NVIDIA GeForce GTX 1080 (8GB), RTX 2060 (6GB) or AMD Radeon RX Vega56 (8GB) - For 60
FPS @ 1440p on High.<li></ul></td>
</tr>
<tr>
<td>5.</td>
<td>FORZA HORIZON 4</td>
<td><ul>
<li>OS:Xbox One, Windows 10 version 15063.0 or higher</li>
<li>Memory 8 GB</li>
<li>Video Memory:2 GB</li>
<li>Processor:Intel i3-4170 @ 3.7Ghz OR Intel i5 750 @ 2.67Ghz</li>
<li>Graphics:NVidia 650TI OR AMD R7 250x</li></ul></td>

13 | P a g e
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

</tr>

</table>
<br><br><br><br><br><br><br><br><br>

</html>

OUTPUT:

14 | P a g e
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

15 | P a g e
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

16 | P a g e
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

PRACTICAL 3

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

<html>
<head>
<script type="text/javascript" src="validate.js"></script>
</head>
<body>
<form action="#" name="StudentRegistration">
<center><font size=4><b>Student Registration Form</b></font></center>
Name
<input type="text" name="textnames" id="textname" size="30"><br><br>
Father Name
<input type=”text" name="fathername" id="fathername" size="30"><br><br>
Postal Address
<input type="text" name="paddress" id="paddress" size="30"><br><br>
Personal Address
<input type="text" name="personaladdress" id="personaladdress" size="30"><br><br>
Sex
<input type="radio" name="sex" value="male" size="10">Male
<input type="radio" name="sex" value="Female" size="10">Female<br><br>
City
<select name="City">
<option value="-1" selected>select..</option>
<option value="New Delhi">NEW DELHI</option>
<option value="Mumbai">MUMBAI</option>
<option value="Goa">GOA</option>
<option value="Patna">PATNA</option>
</select><br><br>
Course
<td><select name="Course">
<option value="-1" selected>select..</option>
<option value="B.Tech">B.TECH</option>
<option value="MCA">MCA</option>
<option value="MBA">MBA</option>
<option value="BCA">BCA</option>
</select><br><br>
District
17 | P a g e
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

<select name="District">
<option value="-1" selected>select..</option>
<option value="Nalanda">NALANDA</option>
<option value="UP">UP</option>
<option value="Goa">GOA</option>
<option value="Patna">PATNA</option>
</select><br><br>
State
<select Name="State">
<option value="-1" selected>select..</option>
<option value="New Delhi">NEW DELHI</option>
<option value="Mumbai">MUMBAI</option>
<option value="Goa">GOA</option>
<option value="Bihar">BIHAR</option>
</select><br><br>
PinCode
<input type="text" name="pincode" id="pincode" size="30"><br><br>
EmailId
<input type="text" name="emailid" id="emailid" size="30"><br><br>
DOB
<input type="text" name="dob" id="dob" size="30"><br><br>
MobileNo
<input type="text" name="mobileno" id="mobileno" size="30"><br><br>
<input type="reset">
<input type="submit" value="Submit Form" />
</form>
</body>
</html>

Output:

18 | P a g e
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

19 | P a g e
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

PRACTICAL -4
Aim:Design an HTML page by using the concept of internal , inline and external style sheets.

Solution:

//External CSS
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="mystyle.css">
</head>
<body>
<p>This is the first paragraph</p>
</body>
</html>
body{
background-color: lightblue;
}
h1
{
color: navy;
margin-left:20px;
}
Output:

//internal CSS
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-color:linen;

20 | P a g e
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

}
h1{
color: maroon;
margin-left:40px;
}
</style>
</head>
<body>
<h1>internal css</h1>
<p>The internal css</p>
</body>
</html>

Output:

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

Output:

21 | P a g e
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

PRACTICAL- 5
Aim: Create an HTML file to implement the styles related to text , fonts , links
using cascading style sheets

HTML Code:

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightgrey;
color: blue;
text-indent: 50px;
}
h1
{
background-color: black;
color: white;
text-align: center;
text-decoration: underline;
text-transform: uppercase;
text-shadow: 2px 2px red;
}
.serif
{
font-family: "Times New Roman", Times, serif;
}
.sansserif
{
font-family: Arial, Helvetica, sans-serif;
font-style: italic;
font-size: 20px;
}
.monospace
{

22 | P a g e
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

font-family: "Lucida Console", Courier, monospace;

}
a:link
{
color: red;
}
a:visited
{
color: green;
}
a:hover
{
color: hotpink;
}
a:active
{
color: blue;
}
</style>
</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>
<p class="serif">This is a paragraph, shown in the Times New Roman font.</p>
<p class="sansserif">This is a paragraph, shown in the Arial font.</p>
<p class="monospace">This is a paragraph, shown in the Lucida Console font.</p>
<p><b><a href="#" target="_blank">This is a link</a></b></p>
</body>
</html>

OUTPUT:

23 | P a g e
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

24 | P a g e
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

PRACTICAL-6
OBJECTIVE:Create an HTML file to implement the concept of document object model using
JavaScript.
Use getElementById Method and write in an element
Use getElementsTagName Method and Change color and add border to
the elements
Use getElementsByClassName Method and for one paragraph and
heading having same class name, change alignment
Use querySelectorAll Method and Create Table on Click

Solution:

1. Use getElementById Method and write in an element

<!DOCTYPE html>
<html>
<head>
<title>GET ELEMENT</title>
<style>
body{
background-color:rgb(122, 165, 127);
text-align: center;
font-size: 20px;
font-family:'Lucida Sans', 'Lucida Sans Regular';
color: #9b620c;
margin-top: 120px;
}
</style>
</head>
<body>
<h2>Finding HTML Elements by Id</h2>
<p id="intro">Nitin Gupta</p>
<p id="demo"></p>
<script>
var myElement = document.getElementById("intro");
document.getElementById("demo").innerHTML ="My Name is " + myElement.innerHTML;
</script>
</body>

25 | P a g e
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

</html>
Output:

2. Use getElementsTagName Method and Change color and add border to

the elements

<!DOCTYPE html>
<html>
<head>
<title>GET ELEMENT</title>
<style>
Body{ background-color:rgb(78, 36, 95);
text-align: center;
font-size: 20px;
font-family:'Lucida Sans', 'Lucida Sans Regular';
color: #cac2ce;
margin-top: 120px; }
</style>
</head>
<body>
<p>HERE IS NITIN GUPTA</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction()
{

26 | P a g e
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

var x = document.getElementsByTagName("p");
x[0].style.color = "red";
x[0].style.border = "dotted #0000FF";
}
</script>
</body>
</html>

OUTPUT:

27 | P a g e
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

3. Use getElementsByClassName Method and for one paragraph andheading having same
class name, change alignment

<!DOCTYPE html>
<html>
<head>
<title>GET ELEMENT</title>
<style>
body{
background-color:rgb(78, 36, 95);

text-align: center;
font-size: 20px;
font-family:'Lucida Sans', 'Lucida Sans Regular';
color: #cac2ce;
margin-top: 120px;
}
</style>
</head>
<body>
<h1 class="ab">HEADING</h1>
<p class="ab">HERE IS NITIN GUPTA</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
document.getElementsByClassName("ab")[0].style.fontSize = "100px";
document.getElementsByClassName("ab")[1].style.fontSize = "x-large";
document.getElementsByClassName("ab")[1].style.textAlign = "rigth";
document.getElementsByClassName("ab")[0].style.textAlign = "left";

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

Output:

28 | P a g e
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

29 | P a g e
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

PRACTICAL-7

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

HTML CODE:

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Sort</h2>
<p>Click the button to 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:

30 | P a g e
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

31 | P a g e
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

PRACTICAL-8
OBJECTIVE: Write an HTML page including any required JavaScript that takes a
number from one text field in the range of 0 to 999 and shows it in another text
field in words. If the number is out of range, it should show “out of range” and if it
is not a number, it should show “not a number” message in the result box

Solution:

HTML Code

<!DOCTYPE html>
<html>
<head>
<title>GET ELEMENT</title>
<style>
body{
background-color:rgb(78, 36, 95);

text-align: center;
font-size: 20px;
font-family:'Lucida Sans', 'Lucida Sans Regular';
color: #cac2ce;
margin-top: 120px;
}
</style>
</head>
<body>
<button onclick="myFunction()">CLICK ON A BUTTON TO INPUT A NUMBER</button>
<p id="a"></p>
<script>
function myFunction()
{
var num = prompt("Please enter your number", "0-999");
document.getElementById("a").innerHTML=num;
if(num>=0 && num<=999)
{
var res=num.toString().split("");
document.getElementById("a").innerHTML=res;

32 | P a g e
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

var s="";
var i;
for(i=0;i<res.length;i++)
{
if(res[i]=='0')
{
s=s+" zero";
}
else if(res[i]=='1')
{
s=s+" one";
}
else if(res[i]=='2')
{
s=s+" two";
}
else if(res[i]=='3')
{
s=s+" three";
}
else if(res[i]=='4')
{
s= s+" four";
}
else if(res[i]=='5')
{
s= "five"+s;
}
else if(res[i]=='6')
{
s= s+" six";
}
else if(res[i]=='7')
{
s= s+" seven";
}
else if(res[i]=='8')
{
s= s+" eigth";
}
33 | P a g e
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

else if(res[i]=='9')
{
s= s+" nine";
}
}
document.getElementById("a").innerHTML=s;
}
else if(num<=0 || num>=999)
{
document.getElementById("a").innerHTML="OUT OF RANGE";
}
else
{
document.getElementById("a").innerHTML="NOT A NUMBER";

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

OUTPUT:

34 | P a g e
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

35 | P a g e
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

36 | P a g e
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

PRACTICAL -9

Aim: Create a PHP file to print any text using variable.

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<?php
echo "<h2>PHP is Fun!</h2>";
echo "Hello world!<br>";
echo "I'm about to learn PHP!<br>";
echo "This ", "string ", "was ", "made ", "with multiple parameters.";
?>

</body>
</html>

Output:

37 | P a g e
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

PRACTICAL- 10
Aim: Demonstrate the use of conditional statements and Loops in PHP.

odd or even

<?php
function check($number)
{
if($number % 2==0)
{
echo "Even";
}
else
{
echo "odd";
}
}
$number=18;
check($number)
?>
Output:

vowel or consonant

<?php
$ch='r';
switch($ch)
{
case 'a':
echo "Character is vowel";
break;
case 'e':
echo "Character is vowel";

38 | P a g e
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

break;
case 'i':
echo "Character is vowel";
break;
case 'o':
echo "Character is vowel";
break;
case 'u':
echo "Character is vowel";
break;
default:
echo "Character is Consonant";
break;
}
?>
Output:

cube of integer

<?php
function cube($n)
{
$sum=0;
for($x=1; $x<=$n; $x++)
$sum=$x*$x*$x;
return $sum;
}
$n=7;
echo cube($n);
?>
Output:

39 | P a g e
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

right triangle

<?php
for ($i=0; $i<=5; $i++){
for ($j=1; $j<=$i; $j++){
echo $j;
}
echo "<br>";
}
?>
Output:

40 | P a g e
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

PRACTICAL-11
Aim:- Create a PHP file using GET and POST methods.
(a) Use two text boxes (Name, Email ID) and pass data using both methods
(b) Create a form with 5 different elements and pass data using both methods

a) GET METHOD

HTML CODE:

<html>
<body>
<form action="welcome.php" method="get">
Name: <input type="text" name="name"><br>
E-mail: <input type="text" name="email"><br>
<input type="submit">
</form>
</body>
</html>
PHP CODE:
<html>
<body>
Welcome <?php echo $_GET["name"]; ?><br>
Your email address is: <?php echo $_GET["email"]; ?>
</body>
</html>

OUTPUT:
Welcome Janvi
Your email address is [email protected]

POST METHOD

HTML CODE:

<html>
<body>
<form action="welcome.php" method="post">
Name: <input type="text" name="name"><br>
E-mail: <input type="text" name="email"><br>

41 | P a g e
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

<input type="submit">
</form>
</body>
</html>
PHP CODE:
<html>
<body>
Welcome <?php echo $_POST["name"]; ?><br>
Your email address is: <?php echo $_POST["email"]; ?>
</body>
</html>

OUTPUT:
Welcome Janvi
Your email address is [email protected]

b) POST METHOD
<!DOCTYPE HTML>
<html>
<head>
<style>
.error {color: #FF0000;}
</style>
</head>
<body>
<?php
// define variables and set to empty values
$nameErr = $emailErr = $genderErr = $websiteErr = "";
$name = $email = $gender = $comment = $website = "";
if ($_SERVER["REQUEST_METHOD"] == "POST") {
if (empty($_POST["name"])) {
$nameErr = "Name is required";
} else {
$name = test_input($_POST["name"]);

if (!preg_match("/^[a-zA-Z-' ]*$/",$name)) {
$nameErr = "Only letters and white space allowed";
}
}
if (empty($_POST["email"])) {
$emailErr = "Email is required";
42 | P a g e
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

} else {
$email = test_input($_POST["email"]);

if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
$emailErr = "Invalid email format";
}
}

if (empty($_POST["website"])) {
$website = "";
} else {
$website = test_input($_POST["website"]);

URL)
if (!preg_match("/\b(?:(?:https?|ftp):\/\/|www\.)[-a-z0-9+&@#\/%?=~_|!:,.;]*[-a-z0-
9+&@#\/%=~_|]/i",$website)) {
$websiteErr = "Invalid URL";
}
}
if (empty($_POST["comment"])) {
$comment = "";
} else {
$comment = test_input($_POST["comment"]);
}
if (empty($_POST["gender"])) {
$genderErr = "Gender is required";
} else {
$gender = test_input($_POST["gender"]);
}
}
function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
?>
<h2>PHP Form Validation Example</h2>
<p><span class="error">* required field</span></p>
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
Name: <input type="text" name="name" value="<?php echo $name;?>">
43 | P a g e
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

<span class="error">* <?php echo $nameErr;?></span>

<br><br>
E-mail: <input type="text" name="email" value="<?php echo $email;?>">
<span class="error">* <?php echo $emailErr;?></span>
<br><br>
Website: <input type="text" name="website" value="<?php echo $website;?>">
<span class="error"><?php echo $websiteErr;?></span>
<br><br>
Comment: <textarea name="comment" rows="5" cols="40"><?php echo $comment;?></te
xtarea>
<br><br>
Gender:
<input type="radio" name="gender"<?php if (isset($gender) &&
$gender=="female") echo "checked";?> value="female">Female
<input type="radio" name="gender"<?php if (isset($gender) &&
$gender=="male") echo "checked";?> value="male">Male
<input type="radio" name="gender"<?php if (isset($gender) &&
$gender=="other") echo "checked";?> value="other">Other
<span class="error">* <?php echo $genderErr;?></span>
<br><br>
<input type="submit" name="submit" value="Submit">
</form>
<?php
echo "<h2>Your Input:</h2>";
echo $name;
echo "<br>";
echo $email;
echo "<br>";
echo $website;
echo "<br>";
echo $comment;
echo "<br>";
echo $gender;
?>

</body>
</html>

Output:

44 | P a g e
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

45 | P a g e
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

PRACTICAL- 12

Aim: 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.

Solution:

HTML Code:
<html>
<head>
<script>
//function that display value
function dis(val)
{
document.getElementById("result").value+=val
}

//function that evaluates the digit and return result

function solve()
{
let x = document.getElementById("result").value
let y = eval(x)
document.getElementById("result").value = y
}

//function that clear the display

function clr()
{
document.getElementById("result").value = ""
}
</script>
<!-- for styling -->
<style>
.title{
margin-bottom: 10px;
text-align:center;
width: 210px;
color:green;

46 | P a g e
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

border: solid black 2px;

}

input[type="button"]
{
background-color:green;
color: black;
border: solid black 2px;
width:100%
}

input[type="text"]
{
background-color:white;
border: solid black 2px;
width:100%
}
</style>
</head>
<!-- create table -->
<body>
<div class = title >Calculator</div>
<table border="1">
<tr>
<td colspan="3"><input type="text" id="result"/></td>
<!-- clr() function will call clr to clear all value -->
<td><input type="button" value="c" onclick="clr()"/></td>
</tr>
<tr>
<!-- create button and assign value to each button -->
<!-- dis("1") will call function dis to display value -->
<td><input type="button" value="1" onclick="dis('1')"/></td>
<td><input type="button" value="2" onclick="dis('2')"/></td>
<td><input type="button" value="3" onclick="dis('3')"/></td>
<td><input type="button" value="/" onclick="dis('/')"/></td>
</tr>
<tr>
<td><input type="button" value="4" onclick="dis('4')"/></td>
<td><input type="button" value="5" onclick="dis('5')"/></td>
<td><input type="button" value="6" onclick="dis('6')"/></td>
<td><input type="button" value="-" onclick="dis('-')"/></td>
47 | P a g e
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

</tr>
<tr>
<td><input type="button" value="7" onclick="dis('7')"/></td>
<td><input type="button" value="8" onclick="dis('8')"/></td>
<td><input type="button" value="9" onclick="dis('9')"/></td>
<td><input type="button" value="+" onclick="dis('+')"/></td>
</tr>
<tr>
<td><input type="button" value="." onclick="dis('.')"/></td>
<td><input type="button" value="0" onclick="dis('0')"/></td>
<!-- solve function call function solve to evaluate value -->
<td><input type="button" value="=" onclick="solve()"/></td>
<td><input type="button" value="*" onclick="dis('*')"/></td>
</tr>
</table>
</body>
</html>

OUTPUT:

48 | P a g e
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

PRACTICAL- 13

AIM: 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.
<!DOCTYPE html>
<html>
<head>
<script>
function _(el) {
return document.getElementById(el);
}

function ajax_data(php_file, el, send_data) {

_(el).innerHTML = "Please wait..";
var hr = new XMLHttpRequest();
hr.open('POST', php_file, true);
hr.setRequestHelper("Content-type", "application/x-www-form-urlencoded");
hr.onreadystatechange = function () {
if (hr.readyState === 4 && hr.status === 200) {
_(el).innerHTML = hr.responseText;
}
};
hr.send(send_data);
}

function login_page() {
ajax_data('login-form.php', 'page', null);
}

function validFName(fld) {

var illegalChars = /\W/; // allow letters, numbers, and underscores

if ((fld.value.length < 4) || (fld.value.length > 15)) {
_('name_error').innerHTML = "Name 5 - 15 characters";
return false;
}else if (illegalChars.test(fld.value)) {
_('name_error').innerHTML = "Yout type illegal characters";
return false;
}
else{
_('name_error').innerHTML = "<img src='ok.png'>";

49 | P a g e
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

return true;
}

function validate_email(fld) {
with (fld)
{
apos = value.indexOf("@");
dotpos = value.lastIndexOf(".");
if (apos < 1 || dotpos - apos < 2) {
_('email_error').innerHTML = "Please type valid email address";
return false;
} else {
_('email_error').innerHTML = "<img src='ok.png'>";
return true;
}
}
}

function valid_msg(fld) {

var illegalChars = /\W /; // allow letters, numbers, and underscores

if ((fld.value.length < 14) || (fld.value.length > 100)) {
_('msg_error').innerHTML = "Message 15 - 100 characters";
return false;
}else if (illegalChars.test(fld.value)) {
_('name_error').innerHTML = "Yout type illegal characters";
return false;
}
else{
_('msg_error').innerHTML = "<img src='ok.png'>";

}
return true;
}

function login() {
var username = $('#username').val();
var password = $('#password').val();
$.ajax({
type: 'POST',
url: 'login.php',
data: {
username: username,
password: password

50 | P a g e
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

},
success: function (response) {
$('#login-response').html(response);
if (response === "login") {
$('#login-response').html("Please Wait Redirecting...");
setTimeout(function () {
window.location = "welcome.php";
}, 5000);
}
}
});

}
</script>
</head>
<body>

<form class="contact-form" action="login.php" method="POST">

<fieldset>
<legend>AJAX Login Form</legend>

<div id="login-response" class="response_error"></div>

<div>
<span id="login-response"></span>
</div>

<div>
<label for="name">Username</label>
<input type="text" name="username" id="username" placeholder="username">
</div>

<div>
<label for="email">Password</label>
<input type="password" name="password" id="password" placeholder="Password">
</div>

<div>

<input type="submit" value="Login" onmousedown="login();">

</div>

</fieldset>
</form>

</body>

51 | P a g e
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

</html>

Login

<?php
$conn = new mysqli("localhost", "root", "","estore");
session_start();
if (isset($_POST['username'])) {
$username = $_POST['username'];
$password = $_POST['password'];
$query="select name password from signin where name = '$username' and password = '$password' ";
$result=mysqli_query($conn, $query);
$row=mysqli_fetch_array($result);

if(mysqli_num_rows($result)==1)
{
$_SESSION['user'] = $username;
echo "Login Successful";
} else {
echo "Username and Password is incorrect";
}
}
?>

Output:

Login Form

Confirmation Message

52 | P a g e
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

PRACTICAL-14

AIM:A web Application for Implementation:

Solution:

inc/dbcon.php

<?php
$server ="localhost";
$user="root";
$password="";
$db="e_learning";

$con=mysqli_connect($server,$user,$password,$db);

if($con){

}
else{

}
?>

inc/style.php

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

*{
margin:0; padding:0; font-family:'Muli' , sans-serif; box-sizing:border-box;
}

.divider-text{
position: relative;
text-align:center;
margin-top: 15px;

53 | P a g e
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

margin-bottom: 15px;
}
.divider-text span{
padding: 7px;
font-size: 12px;
position: relative;
z-index: 2;
}
.divider-text: after{
content:"";
position: absolute;
width: 100%;
border-bottom: 1px solid #ddd;
top: 55%;
left:0;
z-index: 1;
}
.btn-facebook{
background-color: #405D9D !important;
color:#fff!important;
}
.btn-gmail{
background-color: #ea4335 !important;
color:#fff !important;
}
</style>
<body>
</body>
</html>

inc/links.php

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-
awesome.min.css" />
<link href="https://fonts.googleapis.com/css?family=Muli&display=swap" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

54 | P a g e
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></
script>
<script src="https://maxcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

regis.php

<?php
session_start();
ob_start();
?>

<!DOCTYPE html>
<html>
<head>
<title>Registeration | E-Learning</title>
<?php include 'inc/style.php' ?>
<?php include 'inc/links.php' ?>
</head>
<body>

<?php
include 'inc/dbcon.php';
if(isset($_POST['submit'])){
$username = mysqli_real_escape_string($con,$_POST['username']);
$email =mysqli_real_escape_string($con,$_POST['email']);
$mobile = mysqli_real_escape_string($con,$_POST['mobile']);
$password =mysqli_real_escape_string($con,$_POST['password']);
$cpassword = mysqli_real_escape_string($con,$_POST['cpassword']);

$pass=password_hash($password,PASSWORD_BCRYPT);
$cpass=password_hash($cpassword,PASSWORD_BCRYPT);
$emailquery="select * from registeration where email='$email'";
$query=mysqli_query($con,$emailquery);
$emailcount=mysqli_num_rows($query);
if($emailcount>0)
{
echo "Email already exists";
}
else{
if($password === $cpassword)
{
55 | P a g e
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

$insertquery="insert into registeration (username,email,mobile,password,cpassword)

values('$username','$email','$mobile','$pass','$cpass')";
$iquery=mysqli_query($con,$insertquery);
if($iquery)
{

echo ("Inserted Successfully");

?>
<script>
location.replace("login.php");
</script>
<?php

}
else{

echo("Not Inserted Successfully");

}
}

else{
echo ("Password are not matching");
}
}
}
?>
<div class="card bg-light">
<article class="card-body mx-auto" style="max-width: 400px;">
<h4 class="card-title mt-3 text-center">Create Account</h4>
<p class="text-center">Get Started with your Free Account</p>
<p>
<a href="" class="btn btn-block btn-gmail"><i class="fa fa-google"></i> Login via Gmail</a>
<a href="" class="btn btn-block btn-facebook"><i class="fa fa-facebook"></i> Login via
Facebook</a>
</p>
<p class="divider-text">
<span class="bg-light">OR</span>
</p>
<form action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="POST">
<div class="form-group input-group">
56 | P a g e
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-user"></i></span>
</div>
<input name="username" class="form-control" placeholder="Full Name" type="text" required>
</div>
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-envelope"></i></span>
</div>
<input name="email" class="form-control" placeholder="Email Address" type="email"
required>
</div>
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-phone"></i></span>
</div>
<input name="mobile" class="form-control" placeholder="Phone number" type="number"
required>
</div>
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-lock"></i></span>
</div>
<input name="password" class="form-control" placeholder="Create Password" type="password"
required>
</div>
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-lock"></i></span>
</div>
<input name="cpassword" class="form-control" placeholder="Repeat Password"
type="password" required>
</div>

<div class="form-group">
<button type="submit" name="submit" class="btn btn-primary btn-block"> Create Account
</button>
</div>
<p class="text-center"> Have an account? <a href="login.php">Log In</a></p>
<br>
</form>
57 | P a g e
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

</article>
</div>
</div>
</div>
</div>

</body>
</html>

login.php

<?php
session_start();
?>

<!DOCTYPE html>
<html>
<head>
<title>Login | E-Learning</title>
<?php include 'inc/style.php' ?>
<?php include 'inc/links.php' ?>
</head>
<body>
<?php
include 'inc/dbcon.php';
if(isset($_POST['submit'])){
$email=$_POST['email'];
$password =$_POST['password'];

$email_search ="select * from registeration where email='$email' ";

$query= mysqli_query($con,$email_search);
$email_count=mysqli_num_rows($query);
if($email_count){
$email_pass=mysqli_fetch_assoc($query);
$pass=$email_pass['password'];
$_SESSION['username']=$email_pass['username'];
$pass_decode = password_verify($password,$pass);
if($pass_decode){
?>
<script>
location.replace("index.php");
58 | P a g e
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

</script>
<?php
}
else{
?>
<script>
alert("Password incorrect");
</script>
<?php
}
}
else{
?>
<script>
alert("Invalid Email");
</script>
<?php
}
}
?>

<div class="card bg-light">

<article class="card-title mx-auto" style="max-width: 400px;">
<h4 class="card-title mt-3 text-center">Login through</h4>
<p class="text-center">Get started with your Free Account</p>
<p>
<a href="" class="btn btn-block btn-gmail"><i class="fa fa-google"></i> Login via Gmail</a>
<a href="" class="btn btn-block btn-facebook"><i class="fa fa-facebook-f"></i> Login via
Facebook </a>
</p>
<p class="divider-text">
<span class="bg-light">OR</span>
</p>

<form action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="POST">

<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-user"></i></span>
</div>
<input name="email" class="form-control" placeholder="Enter Email" type="email">
</div>
59 | P a g e
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

<div class="form-group input-group">

<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-lock"></i></span>
</div>
<input name="password" class="form-control" placeholder="Create Password" type="password"
required>
</div>

<div class="form-group">
<button type="submit" name="submit" class="btn btn-primary btn-block"> Log In </button>
</div>
<p class="text-center"> Forgot Password? Don't Worry <a href="recover_email.php">Click
Here</a></p>
<p class="text-center"> Don't have an account? <a href="regis.php">Sign up</a></p>
<br><br><br><br><br><br>

</form>
</article>
</div>

</body>
</html>
index.php

<?php
session_start();

if (!isset($_SESSION['username'])) {
header('location:login.php');
exit();
}
?>

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1>User Details</h1>
60 | P a g e
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

<h4><a href="index.php">Hello!
<?php
include('inc/dbcon.php');
$query=mysqli_query($con,"SELECT * FROM `registeration` WHERE
username='".$_SESSION['username']."'");
$row=mysqli_fetch_array($query);
echo 'Admin '.$row['username'].'';
?>
</a></h4>
</div>
</body>
</html>

61 | P a g e
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

62 | P a g e
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

PRACTICAL -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>

63 | P a g e
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

<!--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"/>
64 | P a g e
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

<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">

65 | P a g e
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

<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>
66 | P a g e
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

<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>

67 | P a g e
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

</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>
68 | P a g e
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

</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>

69 | P a g e
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

</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>

70 | P a g e
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

<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>

71 | P a g e
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

</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>
72 | P a g e
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

</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>

73 | P a g e
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

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>

74 | P a g e
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

</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>

75 | P a g e
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

<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>

76 | P a g e
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

Practical-17
Minor Project
Overview- It is a webpage named as tindog for meeting dogs nearby .In this
project I have used html with some bootstrap and external source the snippets and
code is given below:-
HTML file:-
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
<meta charset="utf-8">
<title>Tindog By Honey</title>
<link rel="shortcut icon" href="dog.ico">
<!-- bootstrapcdn -->
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-
JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9
UJ0Z" crossorigin="anonymous">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-
Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/
dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-

KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/
GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7
fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVd
AyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<link rel="stylesheet" href="css\styles.css">

77 | P a g e
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

<!-- googlefonts -->

<link href="https://fonts.googleapis.com/css2?
family=Montserrat:wght@900&family=Ubuntu:wght@500&display=swap"
rel="stylesheet">
<!-- fontawesome -->
<script src="https://kit.fontawesome.com/3abea29ba2.js"
crossorigin="anonymous"></script>

</head>

<body>
<section id="title">
<div class="container-fluid">

<nav class="navbar navbar-expand-lg navbar-dark">

<a class="navbar-brand" href="">Tindog</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-
expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#copyright-item">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#pricing">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#copyright">Download</a>
</li>
</ul>
</div>
</nav>
<!--title-->
<div class="row">

78 | P a g e
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

<div class="col-lg-6">

<h1>meet new and intresting dogs nearby</h1>

<button type="button" class="btn btn-dark btn-lg download-button"
name="button"><i class="fab fa-apple"></i> Download</button>
<button type="button" class="btn btn-outline-light btn-lg download-button"
name="button"><i class="fab fa-google-play"></i> Download</button>
</div>
<div class="col-lg-6">
<img class="title-image" src="images\iphone6.png" alt="iphonemockup">

</div>
</div>
</div>
</section>
<section id="features">
<div class="row">
<div class="feature-box col-lg-4">
<i class=" icon fas fa-check-circle fa-4x"></i>

<h3>EASY TO USE</h3>
<p>easy to use even your dog could do it.</p>

</div>
<div class="feature-box col-lg-4">
<i class="icon fas fa-bullseye fa-4x"></i>
<h3>ELITE CLIENTELE</h3>
<p>we have all the dogs ,the greatest dogs</p>
</div>
<div class="feature-box col-lg-4">
<i class="icon fas fa-heart fa-4x"></i>

<h3>GUARANTEED TO WORK</h3>

<p>find the love of your dog's life or money back.</p>

</div>
</div>

79 | P a g e
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

</section>
<section id="testimonials">

<div id="testimonial-carousel" class="carousel slide" data-ride="slide">

<div class="carousel-inner">
<div class="carousel-item active">
<h2>I no longer have to sniff other dogs for love.I have found the hottest dogi on
Tindog.Woof.</h2>
<img class="testimonial-image" src="images\dog-img.jpg" alt="dog-img">
<em>pebbler,New York</em>
</div>
<div class="carousel-item">
<h2>I no longer have to sniff other dogs for love.I have found the hottest dogi on
Tindog.Woof.</h2>
<img class="testimonial-image" src="images\dog-img.jpg" alt="dog-img">
<em>ronaldo ,Germany</em>
</div>
<div class="carousel-item">
<h2>I no longer have to sniff other dogs for love.I have found the hottest dogi on
Tindog.Woof.</h2>
<img class="testimonial-image" src="images\dog-img.jpg" alt="dog-img">
<em>coco,Paris</em>
</div>
</div>
<a class="carousel-control-prev" href="#testimonial-carousel" role="button" data-
slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href=" #testimonial-carousel" role="button" data-
slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

</section>
<!-- press -->
<section id="press">
80 | P a g e
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

<img class="press-logo" src="images\TechCrunch.png" alt="tc-logo">

<img class="press-logo" src="images\tnw.png" alt="tnw-logo">
<img class="press-logo" src="images\bizinsider.png" alt="bizinsider-logo">
<img class="press-logo" src="images\mashable.png" alt="mashable-logo">

</section>
<!-- pricing -->
<section id="pricing">
<h2>A Plan for Every Dog's Needs</h2>
<p>Simple and Affordable Price Plans for you And your Dog.</p>
<div class="row">
<div class=" pricing-column col-lg-4 col-md-6">
<div class="card">
<div class="card-header">
<h3>chihuahua</h3>
</div>
<div class="card-body">
<h2>Free</h2>
<p>5 Matches per day.</p>
<p>10 Messages per day</p>
<p>unlimited App Usage.</p>
<button class="btn btn-outline-dark btn-lg btn-block" type="button"
name="button">Sign Up</button>

</div>
</div>
</div>

<div class="pricing-column col-lg-4 col-md-6">

<div class="card">
<div class="card-header">
<h3>Labrador</h3>
</div>
<div class="card-body">
<h2>$49/mo</h2>
<p>Unlimited Matches.</p>
<p>Unlimited Days</p>
<p>unlimited App Usage.</p>
<button class="btn btn-dark btn-lg btn-block" type="button" name="button">Sign
Up</button>
81 | P a g e
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

</div>
</div>
</div>
<div class="pricing-column col-lg-4">
<div class="card">
<div class="card-header">
<h3>Mastiff</h3>
</div>
<div class="card-body">

<h2>$99/mo</h2>
<p>Priority Listing</p>
<p>Unlimited Matches.</p>
<p>Unlimited Days</p>
<p>unlimited App Usage</p>
<button class="btn btn-dark btn-lg btn-block" type="button" name="button">Sign
Up</button>
</div>

</div>

</div>
</div>

</section>
<!-- copyright -->
<section id="copyright">
<h2>Find True Love of Your Dog's Life Today</h2>
<button type="button" class="btn btn-dark download-button" name="button"><i
class="fab fa-apple"></i> Download</button>
<button type="button" class="btn btn-outline-light download-button"
name="button"><i class="fab fa-google-play"></i> Download</button>

</section>
<section id="copyright-item">
<i class="item fab fa-facebook "></i>
<i class="item fab fa-twitter "></i>
82 | P a g e
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

<i class="item fab fa-instagram "></i>

<i class="item far fa-envelope "></i>
<p id="tagline">©copyright 2020 Tindog</p>
</section>

</body>

</html>
CSS file:-
body{
font-family: 'Montserrat', sans-serif;
}
#title{

background-color: #ff4688;
color: #fff;
}
h1{
font-family: 'Montserrat', sans-serif;
font-size: 3.5em;
line-height: 1.5;
}
h2{
font-size: 2.8rem;
line-height: 1.5;
}
h3{
font-family: 'Montserrat';
font-size:1.2em;
}
p{
font-family:'Montserrat-light';
font-size: 1.3em;
color:#8f8f8f;
}
.container-fluid{
padding:3% 15% 7%;
}
/* naviagtionbar */

83 | P a g e
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

.navbar{
padding:0 0 4.5rem;
}
.navbar-brand{
font-family:'Ubuntu';
font-size:2.5em;
font-weight: bold;

}
.nav-item{
padding:0 18px;
}
.nav-link{
font-family: 'Montserrat-light';
font-size: 1.2rem;

}
/* downloadbutton */
.download-button{
margin:5% 3% 5% 0;
}
/* titleimage */
.title-image{
margin:auto;
right:30%;
width:60%;
transform:rotate(25deg);
position: absolute;
}
/* featues-section */
#features{

background-color: #fff;
position: relative;
z-index: 1;
padding:7% 15% 7%;
}
.feature-box{
text-align:center;
padding:5%;
84 | P a g e
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

}
.icon{
color:#ef8172;
margin-bottom: 1rem;
}
.icon:hover{
color:#ff4688;

}
#testimonials{
text-align: center;
background-color:#ef8172;
color:#fff;
}
.testimonial-image{
width: 10%;
border-radius: 100%;
margin:20px;

}
#press{
background-color: #ef8172;
text-align: center;
padding-bottom:7%;
}
.press-logo{
width:15%;
margin:20px 20px 50px;

}
.carousel-item{
padding:7% 15%;

#pricing{
text-align:center;
85 | P a g e
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

padding:100px;
}
.pricing-column{
padding: 3% 2%;
}
@media (max-width:1028px){
#title{
text-align: center;
}

.title-image{
transform:rotate(0);
position:static;
}
}
#copyright{

background-color: #ff4c68;
color:#fff;
text-align: center;
padding:7% 25%;
}
#copyright-item {
padding:2%;
background-color: #fff;
text-align: center;
}
.item{
margin:2px;
padding:5px;
}
#tagline{
letter-spacing: 1px;
font-size: 1rem;
}

Output:-

86 | P a g e
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

87 | P a g e
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

88 | P a g e
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

89 | P a g e
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

PRACTICAL-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.";

90 | P a g e
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

} 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

91 | P a g e
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

PRACTICAL-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";
}

92 | P a g e
 Sri Sukhmani Institute Of Engg &Technology,Derabassi

isGreater(4,5);
?>
</body>
</html>

OUTPUT:
5 is greater

93 | P a g e