Scribd
Upload
18 views48 pages

Lab PDF 2

Uploaded by

Sakkthi Prabha
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
18 views48 pages

Lab PDF 2

Uploaded by

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

LABORATORY

OBJECTIVE:
 To understand the basics of HTML

 To design website using JavaScript, CSS and PHP

LIST OF EXPERIMENTS/EXERCISES

1. Design a simple web page using basic HTML tags.

2. Design a web page using HTML and CSS properties

3. Design a responsive web page using Bootstrap framework.

4. Design a web page for signup and login validation form using
JavaScript and PHP.

5. Create a database connectivity using PHP, MySQL and


host the website in the server.

COURSE OUTCOMES:

On completion of the course, the students will be able to

 Design and host an interactive dynamic website.


TABLE OF CONTENTS

EXP.
LIST OF EXPERIMENTS
NO.

1. DESIGN A SIMPLE WEB PAGE USING BASIC


HTML TAGS

2. DESIGN A WEB PAGE USING HTML AND


CSS PROPERTIES

3. DESIGN A RESPONSIVE WEB PAGE USING BOOTSTRAP


FRAMEWORK

4. DESIGN A WEB PAGE FOR SIGNUP AND LOGIN VALIDATION FORM


USING JAVASCRIPT AND PHP.

CREATE A DATABASE CONNECTIVITY USING PHP, MYSQL AND


5.
HOST THE WEBSITE IN THE SERVER.
Exp. Maximum Marks
Title of the Experiment Signature
No. marks(50) awarded(50)

Design a simple web page using basic


1. 20
HTML tags and CSS properties
Design a responsive web page using Bootstrap
2. 15
framework
Design a web page for signup and login
3. 15
validation form using JavaScript and PHP.
Average

Course Faculty HOD


Day 1:
DESIGN A WEB PAGE USING BASIC HTML TAGS

Aim:
To design a web page using the basic HTML tags

Description:

HTML Tag Description


<!DOCTYPE> Defines the document type
<html> Defines an HTML document
<head> Defines information about the document
<title> Defines a title for the document
<body> Defines the document's body
Attributes
background - background image for a document
bgcolor: background color of a document
<h1> to <h6> Defines HTML headings
<mark> highlight parts of text
<p> Defines a paragraph
<a> Defines a hyperlink, which is used to link from one page to another.
Attributes
href - URL of the page the link goes to
name - name of an anchor tag
target - where to open the linked document. Possible values are blank,
parent, self, top
<br> Inserts a single line break
<hr> Defines a thematic change in the content
<!--...--> Defines a comment
<img> defines an image
Attributes
align - alignment of an image according to surrounding elements. The
possible values are top, bottom, middle, left right
alt - an alternate text for an image
border - width of the border around an image
height - height of an image
hspace - whitespace on left and right side of an image
src - URL of an image
vspace - whitespace on top and bottom of an image
width - width of an image
<ol> Defines an ordered list
‗type‘ attribute for <ol> tag to specify the type of numbering
Following are the possible options .By default, it is a number.
<ol type = "1"> - Default-Case Numerals.
<ol type = "I"> - Upper-Case Numerals.
<ol type = "i"> - Lower-Case Numerals.
<ol type = "A"> - Upper-Case Letters.
<ol type = "a"> - Lower-Case Letters.

‗start‘ attribute for <ol> tag to specify the starting point of numbering
<ol type = "1" start = "4"> - Numerals starts with 4.
<ol type = "I" start = "4"> - Numerals starts with IV.
<ol type = "i" start = "4"> - Numerals starts with iv.
<ol type = "a" start = "4"> - Letters starts with d.
<ol type = "A" start = "4"> - Letters starts with D.

<li> Defines a list item


<ul> Defines an unordered list
‗type‘ attribute for <ul> tag to specify the type of bullet. Following are
the possible options. By default, it is a disc.
<ul type = "square">
<ul type = "disc">
<ul type = "circle">

<dl> Defines a description list


<dt> Defines a term/name in a description list
<dd> Describes each term/name
<table> Defines a table
Attributes:
align - the alignment of a table according to surrounding text
(left/center/right)
bgcolor - the background color for a table
border - borders around the table and the table‘s cells
cellpadding- space between the cell wall and the cell content
cellspacing- space between cells
colspan - number of columns a table cell should span
rowspan - number of rows a table cell should span
width - width of a table (pixels or %)
<caption> Defines a table caption
<th> Defines a header cell in a table

<tr> Defines a row in a table


<td> Defines a cell in a table
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table
Program:
Simple HTML Page
</html>
<!DOCTYPE html>
<html>
<body>
<h1> Welcome to KEC</h1>
<p> Innovation Lab</p>
<i> Creating an Website on KEC MINI MART</i>
<p> <a href="2.html">Click here to Explore</a></p>
</body>
</html>

Output:
Program:
Simple HTML WebPage

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body bgcolor="#DAF7A6">
<strong><center><font color="#6D2819" size="15" face="Curlz MT"><i>Welcome to KEC MINI
MART</i></font></strong>
<p><img src="2.jfif" height="180" width="400" alt="grocery"/></p></center>
<strong><font color="#4A235A " size="5" face="Algerian"><ol>
<li>Coffee</li>
<li>Sugar</li>
<li>Tea</li>
</ol></font>
<font color="#A04000 " size="5" face="Algerian"><ul>
<li>Pumpkin</li>
<li>Drumstick</li>
<li>Ladies Finger</li>
</ul></font>
<font color="#212F3D" size="5" face="Algerian"><table bgcolor="#35A175">
<tr><th>Items</th><th>Quantity</th><th>Rate</th></tr>
<tr><td>Oil</td><td>1 kg</td><td>Rs.95</td></tr>
<tr><td>Mustard</td><td>1 kg</td><td>Rs.35</td></tr>
<tr><td>Wheat Flour</td><td>1 kg</td><td>Rs.150</td></tr>
</table></font></strong>
<strong><center><font color="#061B75 " size="5" face="Algerian"><form>
Username:<input type="text" name="username" placeholder="Enter your Username">
<p>Password:<input type="password" id="password" name="password" placeholder="Enter your
Password"/></p>
<input type="submit" value="Submit">
</form></font></strong>
<strong><font color="#DE3163 " size="5" face="Algerian"><a href="3.php"><p>Create a styling
Website</a></center></font></strong>
</body> </html>
Output:

Result:
Thus a web page has been designed using the basic HTML Tags.
Day 2:
DESIGN A WEB PAGE USING HTML AND CSS PROPERTIES

Aim:
To design a web page by applying different types of CSS properties.

Description:

CSS
CSS stands for Cascading Style Sheets, which describes how HTML elements are to be
displayed on screen, paper, or in other media. It defines styles for web pages, including the design,
layout and variations in display for different devices.

CSS Syntax
A CSS rule-set consists of a selector and a declaration block:

 The selector points to the HTML element you want to style.


 The declaration block contains one or more declarations separated by semicolons.
 Each declaration includes a CSS property name and a value, separated by a colon.

CSS Selectors Select HTML elements according to its id, class, type, attribute etc.
Element Selector Selects the HTML element by name.
Id Selector Selects the id attribute of an HTML element to select a specific element. An
id is always unique within the page so it is chosen to select a single, unique.
It is written with the hash character (#), followed by the id of the element
Class Selector selects HTML elements with a specific class attribute. It is used with a
period (.) character followed by the class name. A class name should not be
started with a number.
Universal used as a wildcard character. It selects all the elements on the pages.
Selector
Group Selector Select all the elements with the same style definitions. Grouping selector is
used to minimize the code. Commas are used to separate each selector in
grouping.
There are three ways to associate styles with HTML document.
1. Inline style sheet
2. Embedded style sheet / Internal style sheet
3. External style sheet
Inline style sheet
Use style attribute of any HTML element to define style rules. These rules will be applied to that
element only.
<h1 style ="color:pink"> This is inline CSS </h1>

Embedded style sheet/Internal style sheet


CSS rules to be available inside of <style> element and this tag is placed inside the <head>...</head>
tags. Rules defined using this syntax will be applied to all the elements available in the document.
<head>
<style type="text/css" >
h1{
color: pink;
}
</style>
</head>

External style sheet


The <link> element can be used to include an external stylesheet file in the HTML document.
An external style sheet is a separate text file with .css extension and it contains all the Style rules. This
can be used to apply similar styles to multiple documents with <link> element.
mystyle.css
h1, h2, h3 {
color: red;
…
}
mystyle.css linked in head part of the any HTML document as follows:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

CSS
Values Description
Properties
static, relative, fixed Specifies the type of positioning method used for an
position
absolute, sticky element.
visible, hidden, scroll Add scrollbars when the content of an element is too
overflow
auto big to fit in the specified area.
float left, right, inherit, none Used for positioning and formatting content
none, block, inline
display specifies how an element is displayed
inline-block

list-style-
none specifies the type of list item marker
type
Specifies the stack order of an element.
z-index number Element with greater stack order is always in front
of an element with a lower stack order
padding-top
padding-right
padding generate space around an element's content
padding-bottom
padding-left
dotted, dashed, solid Specify the style, width, and color of an element's
border
none Border

CSS
Description
Selector
:hover specifies mouse over link
:link specifies unvisited link
:visited specifies visited link
:active specifies selected link

Program:
Simple HTML program using CSS properties

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KEC MINI MART</title>
<style>
/*Header Section */
.header{
background-image: url("rice.jpg");
padding: 10px;
text-align: center;
font-family: Curlz MT;
color: white;
font-size: 100px;
}
.topnav {
overflow: hidden;
background-image: linear-gradient(#F4D03F, #85C1E9);
padding: 10px;
}
/*Navigation Bar */
/* Style the topnav links */
.topnav a {
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
font-family:Bodoni MT;
text-decoration: none;
font-family: Curlz MT;
font-size: 20px;
}
/* Change color on hover */
.topnav a:hover {
background-color: #58D68D;
color: rgb(15, 37, 13);
}
/* row 1 */
div.gallery {
margin: 5px;
border: 3px groove #ccc;
float: left;
width: 300px;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
div.desc {
padding: 15px;
text-align: center;
}
/* row 2 */
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 30%;
padding: 10px;
}
/* Clear floats after the columns */
.row::after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width:600px) {
.column {
width: 100%;
}
}
/* Form section */
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}

input[type=submit] {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}
.fff {
justify-content: center;
display: flex;
border-radius: 5px;
background-color: #82E0AA ;
padding: 20px;
font-family: Algerian;
font-size: 20px;
}
img {
float: center;
}
ol {
background: #117A65;
padding: 20px;
font-family: Algerian;
}
ol li {
background: #CCD1D1;
color: black;
padding: 5px;
margin-left: 10px;
font-family: Algerian;
}
ul {
background: #3399ff;
padding: 20px;
font-family: Algerian;
}
ul li {
background: #cce5ff;
color: darkblue;
margin: 2px;
}
a:link{
color:white;
font-family: Curlz MT;
font-size: 40px;
}
a:hover{
color:yellowgreen;
font-family: Curlz MT;
font-size: 40px;
}
table{
width: 100%;
border: 1px solid;
font-family: Algerian;
}
th, td {
border: 1px solid;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {background-color: #f2f2f2;}

.footer {
background-color: #D1F2EB ;
text-align: center;
}
</style>
</head>
<body>
<div class="header">
<i>Welcome to KEC MINI MART</i>
</div>
<div class="topnav">
<a href="#">Home</a>
<a href="#">Products</a>
<a href="#">Buy</a>
</div>
<div class="row">
<div class="column">
<div class="gallery">
<img src="cereal.jpg" alt="cereal" width="600" height="400">
<div class="desc">Cereal and Pulses are healthy</div>
</div>
</div>
<div class="column">
<div class="gallery">
<img src="11.jfif" alt="vegetables" width="600" height="400">
<div class="desc">Straight from the farm</div>
</div>
</div>
<div class="column">
<div class="gallery">
<img src="dairy.jfif" alt="dairy" width="600" height="400">
<div class="desc">Fresh Dairy Products</div>
</div>
</div>
</div>
<div class="row">
<div class="column">
<h2>Groceries</h2>
<ol>
<li class="fo1">Wheat</li>
<li class="fo1">Groundnut</li>
<li class="fo1">Oats</li>
</ol>
</div>
<div class="column">
<h2>Vegetables</h2>
<ul>
<li>Cauliflower</li>
<li>Green Chilly</li>
<li>Baby Corn</li>
</ul>
</div>
<div class="column">
<h2>Dairy Products</h2>
<table>
<tr><th>Items</th><th>Quantity</th><th>Rate</th></tr>
<tr><td>Milk</td><td>1 kg</td><td>Rs.100</td></tr>
<tr><td>Cheese</td><td>1 kg</td><td>Rs.200</td></tr>
<tr><td>Butter</td><td>1 kg</td><td>Rs.80</td></tr>
</table>
</div>
</div>
<div class="fff">
<form>
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your name..">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Your last name..">

<label for="country">Country</label>
<select id="country" name="country">
<option value="australia">Australia</option>
<option value="canada">Canada</option>
<option value="usa">USA</option>
</select>
<input type="submit" value="Submit">
</form>
</div>
<div class="footer">
<a href="4.php"><p>Click to view next page</a>
<a href="3.php"><p>Back</a>
</div>
</div>
</body>
</html>

Output:

Result:
Thus a web page is designed by applying CSS properties.
Day 3:

DESIGN A RESPONSIVE WEB PAGE USING BOOTSRAP


FRAMEWORK

Aim:
To design a responsive web page using Bootstrap Framework.

Description:
Page Structure Elements

HTML5 introduces several new page-structure elements that meaningfully identify areas of the page as
headers, footers, articles, navigation areas, asides, figures and more. The page structure elements
provided by HTML5 are:

 header
 section
 article
 aside
 navbar
 figure and figcaption
 meter
 mark
 wbr
 summary and details
 footer

I. header Element

The header element creates a header for this page that contains both text and graphics. The header
element can be used multiple times on a page and can include HTML headings, navigation, images and
logos and more. For an example, see the top of the front page of your favorite newspaper. time
Element

The time element which does not need to be enclosed in a header, enables you to identify a date (as we
do here), a time or both.

II. nav Element

The nav element groups navigation links. In this example, we used the heading Recent Publications
and created a ul element with seven li elements that link to the corresponding web pages for each
book.
III. figure Element and figcaption Element

The figure element describes a figure (such as an image, chart or table) in the document so that it could
be moved to the side of the page or to another page. The figure element does not include any styling,
but you can style the element using CSS. The figcaption element provides a caption for the image in
the figure element.

IV. article Element

The article element describes standalone content that could potentially be used or distributed
elsewhere, such as a news article, forum post or blog entry. You can nest article elements. For
example, you might have reader comments about a magazine nested as an article within the magazine
article.

V. summary Element and details Element

The summary element (line 92) displays a right-pointing arrow next to a summary or caption when the
document is rendered in a browser (Fig. 3.19). When clicked, the arrow points downward and reveals
the content in the details element (lines 91–125).

VI. section Element

The section element describes a section of a document, usually with a heading for each section—these
elements can be nested. For example, you could have a section element for a book, then nested
sections for each chapter name in the book. In this example, we broke the document into three
sections—the first is Recent Publications (lines 21–43). The section element may also be nested in an
article.

VII. aside Element

The aside element describes content that‘s related to the surrounding content (such as an article) but is
somewhat separate from the flow of the text. For example, an aside in a news story might include some
background history. A print advertisement might include an aside with product testimonials from
users.
Basic Layout of a Web Page with Page Structure Elements

Program:
Program using Bootstrap classes:
<!DOCTYPE html>
<html lang="en">
<head>
<title>KEC MINI MART</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-
awesome.min.css"> <!--social media plugins-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<style>
.fff {
justify-content: center;
display: flex;
border-radius: 5px;
}
.fakeimg {
height: 200px;
background: #aaa;
}
.fa-instagram {
color: rgb(16, 14, 14);
width: 100%;
}
.fa {
padding: 15px;
font-size: 30px;
width: 30px;
text-align: center;
text-decoration: none;
margin: 2px 1px;
}
.fa:hover {
opacity: 0.7;
}
.img-fluid{
height: 250px;
width: 400px;
}

.container-fluid img {vertical-align: middle;}

.container-fluid .content {
background-image: url("blue.jpg");
background-repeat: no-repeat;
background-size: cover;
padding: 50px;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="content">
<div class="p-9 text-white text-center">
<h1>KEC MINI MART</h1>
<p>Shop and Buy at your door step</p>
</div>
</div>
</div>

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">


<div class="container-fluid">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="4.php">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="5.php">Sign In</a>
</li>
<li class="nav-item">
<a class="nav-link" href="6.php">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="3.php">Back</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="text" placeholder="Search">
<button class="btn btn-primary" type="button">Search</button>
</form>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-xl-3">
<img src="2.jfif" class="img-fluid">
<h3 class="mt-5">New at our Store</h3>
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Special Bucket List Festvie Offer</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Chocolate</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sweets</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Caramel nuts</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Gulam jamun</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">White Chocolate</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Laddu</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Chips</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Marshmallows</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Honey cake</a>
</li>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dairy
Products
</button>
<ul class="dropdown-menu">
<li>Cheese</li>
<li>Butter</li>
<li>Ghee</li>
<li>Milk</li>
</ul>
</div>
</ul>
</div>
<div class="col-xl-6">
<h2 class="mt-5 p-3 bg-info text-white rounded">Dairy Fresh</h2>
<h5>Avail your special offers</h5>
<center><img src="egg.jpg" class="img-fluid1" width="600" height="240"></center>
<h2 class="mt-5 p-3 bg-info text-white rounded">Straight from the farm</h2>
<h5>Fresh Fruits and Vegetables</h5>
<center><img src="got.jpg" class="img-fluid2" width="600" height="240"></center>
</div>
<div class="col-xl-3">
<h2 class="mt-5 p-3 bg-primary text-white rounded">Add to cart</h2>
<p>Rice-1kg-Rs.100</p>
<p>Sugar-1kg-Rs.100</p>
<p>Salt-1kg-Rs.100</p>
<p>Coffee-1kg-Rs.100</p>
<p>Dal-1kg-Rs.100</p>
<strong><h5>Spicy Masala</h5></strong>
<img src="spices.jfif" class="img-fluid3" width="450" height="200">
<strong><h5>Nuts</h5></strong>
<img src="nuts.jfif" class="img-fluid4" width="450" height="200">
</div>
</div>
</div>
<div class="container-fluid">
<div class="content">
<div class="p-9 text-white text-center">
<p>Contact</p>
<p>Phone:29899489230</p>
<p>Thanks for shopping</p>
<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>
<a href="#" class="fa fa-instagram"></a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Output:

Result:
Thus a web page has been designed using Bootstrap framework
Day 4:

DESIGN A WEB PAGE FOR SIGNUP AND LOGIN VALIDATION FORM


USING JAVASCRIPT AND PHP.
Aim:
To design a web page for sign up and login validation form using JavaScript and PHP.

Description:
Tag Description
<form> The <form> tag is used to create an HTML form for user input.
The <form> element can contain one or more of the following form elements:
 <input>, <textarea>, <button>, <select>, <option>, <optgroup>, <fieldset>,
<label>, <output>
<input> The <input> tag specifies an input field where the user can enter data.
Attribute Value Description
type Button, Specifies the type <input> element to display
checkbox,
color, date
datetime-
local, email,
file, hidden,
image,
month,
number,
password,
radio, range
reset, search
submit, tel,
text, time, url,
Week
align left, right,
top, middle, Specifies the alignment of an image input
bottom (only for type="image")
autocomplete on, off Specifies whether an <input> element should
have autocomplete enabled
autofocus Autofocus Specifies that an <input> element should
automatically get focus when the page loads
height Pixels Specifies the height of an <input> element
(only for type="image")
max Number Specifies the maximum value for an <input>
Date element
maxlength Number Specifies the maximum number of characters
allowed in an <input> element
min number Specifies a minimum value for an <input>
date element
multiple Multiple Specifies that a user can enter more than one
value in an <input> element
name Text Specifies the name of an <input> element
placeholder Text Specifies a short hint that describes the
expected value of an <input> element
required Required Specifies that an input field must be filled out
before submitting the form
size Number Specifies the width, in characters, of an
<input> element
value Text Specifies the value of an <input> element

width Pixels Specifies the width of an <input> element


(only for type="image")

<select> The <select> element is used to create a drop-down list.


<option> The <option> tags inside the <select> element define the available options in the list.

<textarea> The <textarea> tag defines a multi-line text input control.


Attribute Value Description
cols number Specifies the visible width of a text area
rows number Specifies the visible height of a text area

<button> The <button> tag defines a clickable button.


Attribute Value Description
type button
reset Specifies the type of button
submit
value text Specifies an initial value for the button

Forms are used in webpages for the user to enter their required details that are further sent to the server for
processing. The data entered into a form needs to be in the right format and certain fields need to be filled in
order to effectively use the submitted form. JavaScript is used to validate the form.
Program:
Validation form for Sign Up page:
<?php // server scripting language(used on the server side)
$registered=0; //variable to check success or failure
$userexsists=0;
if($_SERVER['REQUEST_METHOD']=='POST'){ //uisng request method and to perform post operation
include 'server.php'; // uses the include statement to include all the files
$name=$_POST['name'];
$password=$_POST['password'];

//$con=new mysqli('localhost','root','','login');
//if($con){
// $sql="INSERT INTO data (email,password)
//VALUES ('$email', '$password')";
// $result=mysqli_query($con,$sql);
// if($result){
// echo "Data inserted successfully";
// }else{
// die(mysqli_error($con));
//}
//}
//else{
// die(mysqli_error($con));
// }

$sql="SELECT * FROM data WHERE name='$name'";

$result=mysqli_query($con,$sql);
if($result){
$num=mysqli_num_rows($result); //It is generally used to check if data is present in the database or not
if($num>0){
//echo "User already exist";
$userexsists=1;
}else{

$sql="INSERT INTO data (name,password)


VALUES ('$name','$password')";
$result=mysqli_query($con,$sql);
if($result){
//echo "Registered successfully";
$registered=1;
}else{
die(mysqli_error($con));
}
}
}
}

?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5 Website Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-
awesome.min.css"> <!--social media plugins-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script>
function formValidation() {
let x = document.forms["form2"]["name"].value;
if (x == "") { //if the field is empty
alert("Name must be filled out");
return false;
}
}
function newFunction(){
document.getElementById("Form2").reset(); // used to access the id
}
</script>
<style>
.mb-3.success input,.form-control.error input{
border-width:2px;
border-color: green;
}
h2{
text-align:center;
}
div.formstyle{
margin: 8px;
border: 1px solid rgb(17, 16, 16);
padding-inline: 50px;
box-shadow: 0 2px 10px black;
padding: 20px;;
}
.fakeimg {
height: 200px;
background: #aaa;
}
.fa-twitter {
/* background: #ee0805;*/
color: rgb(16, 14, 14);
width: 100%;
}
.fa-facebook {
/* background: #ee0805;*/
color: rgb(16, 14, 14);
width: 100%;
}
.fa-instagram {
/* background: #ee0805;*/
color: rgb(16, 14, 14);
width: 100%;
}
.fa {
padding: 15px;
font-size: 30px;
width: 30px;
text-align: center;
text-decoration: none;
margin: 2px 1px;
}

.fa:hover {
opacity: 0.7;
}

.bg {
background: "bg.jpg";
}

.container-fluid img {vertical-align: middle;}

.container-fluid .content {
background-image: url("blue.jpg");
background-repeat: no-repeat;
background-size: cover;
padding: 50px;
}
</style>
</head>
<body>
<?php
if($userexsists){
echo '<div class="alert alert-danger alert-dismissible fade show" role="alert">
<strong>Error</strong> User already exist.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>';
}
?>
<?php
if($registered){
echo '<div class="alert alert-success alert-dismissible fade show" role="alert">
<strong>Congrats</strong> You are successfully Signed In.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>';
}
?>
<!-- header -->
<div class="container-fluid">
<div class="content">
<div class="p-9 text-white text-center">
<h1>KEC MINI MART</h1>
<p>Shop and Buy at your door step</p>
</div>
</div>
</div>

<!--navbar-->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="4.php">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="5.php">Sign In</a>
</li>
<li class="nav-item">
<a class="nav-link" href="6.php">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="3.php">Back</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="text" placeholder="Search">
<button class="btn btn-primary" type="button">Search</button>
</form>
</div>
</nav>

<div class="container mt-3">


<div class="row justify-content-md-center">

<!-- SignIn form2-->

<div class="col-xl-6">
<div class="formstyle">
<strong><font color="#6D2819" size="15" face="Curlz MT"><h2>Sign In</h2>
<form action="5.php" method="post" id="Form2" name="form2" onSubmit="return formValidation()">

<!--Name-->
<div class="mb-3">
<label for="name">Name:</label>
<input type="name" name="name" class="form-control" id="name" placeholder="Enter the name">
</div>

<!--Password-->
<div class="mb-3">
<label for="password">Password:</label>
<input type="password" name="password" class="form-control" id="password" placeholder="Enter password">
</div>

<div class="text-center">
<button type="submit" class="btn btn-primary" value="Submit">Submit</button>

<button type="button" class="btn btn-warning" onclick="newFunction()" value="Reset">Reset</button>


</div>
</font></strong></form>
</div>
</div>
</div>
</div>

<!-- Footer -->


<div class="container-fluid">
<div class="content">
<div class="p-9 text-white text-center">
<p>Contact</p>
<p>Phone:29899489230</p>
<p>Thanks for shopping</p>
<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>
<a href="#" class="fa fa-instagram"></a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Output:

Sign In Page:

Program:
Validation form for Login page:
<?php
$logged=0;
$invalid=0;
if($_SERVER['REQUEST_METHOD']=='POST'){
include 'server.php';
$name=$_POST['name'];
$password=$_POST['password'];

$sql="SELECT * FROM data WHERE name='$name' AND password='$password'";

$result=mysqli_query($con,$sql);
if($result){
$num=mysqli_num_rows($result);
if($num>0){
//echo "Login Successful";
$logged=1;
session_start(); //no need to login again a session method is started with this function
$_SESSION['name']=$name;
header('location:sign.php');
}
else{
//echo "Invalid Data";
$invalid=1;
}
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5 Website Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-
awesome.min.css"> <!--social media plugins-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script>
function formValidation() {
let x = document.forms["form1"]["name"].value;
if (x == "") {
alert("Fill in the details");
return false;
}
}
function newFunction(){
document.getElementById("Form1").reset();
}
</script>
<style>
.mb-3.success input,.form-control.error input{
border-width:2px;
border-color: green;
}
h2{
text-align:center;
}
div.formstyle{
margin: 8px;
border: 1px solid rgb(17, 16, 16);
padding-inline: 50px;
box-shadow: 0 2px 10px black;
padding: 20px;;
}
.fakeimg {
height: 200px;
background: #aaa;
}
.fa-twitter {
/* background: #ee0805;*/
color: rgb(16, 14, 14);
width: 100%;
}
.fa-facebook {
/* background: #ee0805;*/
color: rgb(16, 14, 14);
width: 100%;
}
.fa-instagram {
/* background: #ee0805;*/
color: rgb(16, 14, 14);
width: 100%;
}
.fa {
padding: 15px;
font-size: 30px;
width: 30px;
text-align: center;
text-decoration: none;
margin: 2px 1px;
}

.fa:hover {
opacity: 0.7;
}

.bg {
background: "bg.jpg";
}
.container-fluid img {vertical-align: middle;}
.container-fluid .content {
background-image: url("blue.jpg");
background-repeat: no-repeat;
background-size: cover;
padding: 50px;
}
</style>
</head>
<body>
<?php
if($invalid){
echo '<div class="alert alert-danger alert-dismissible fade show" role="alert">
<strong>Error</strong> Invalid Credentials.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>';
}
?>

<?php
if($logged){
echo '<div class="alert alert-success alert-dismissible fade show" role="alert">
<strong>Congrats</strong> You are successfully Logged In.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>';
}
?>
<!-- header -->
<div class="container-fluid">
<div class="content">
<div class="p-9 text-white text-center">
<h1>KEC MINI MART</h1>
<p>Shop and Buy at your door step</p>
</div>
</div>
</div>

<!--navbar-->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="4.php">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="5.php">Sign In</a>
</li>
<li class="nav-item">
<a class="nav-link" href="5.php">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="3.php">Back</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="text" placeholder="Search">
<button class="btn btn-primary" type="button">Search</button>
</form>
</div>
</nav>
<!-- login form-->
<div class="container mt-3">
<div class="row justify-content-md-center">
<div class="col-xl-6">
<div class="formstyle">
<strong><font color="#6D2819" size="15" face="Curlz MT"><h2>Login</h2>
<form action="6.php" method="post" id="Form1" name="form1" onSubmit="return formValidation()">
<!--Name-->
<div class="mb-3">
<label for="name">Name:</label>
<input type="name" class="form-control" id="name" placeholder="Enter the Name" name="name">
</div>
<!--Password-->
<div class="mb-3">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="password" placeholder="Enter password"
name="password">
</div>
</div>
<div class="text-center">
<button type="submit" class="btn btn-primary">Login</button>
<button type="button" class="btn btn-warning" onclick="newFunction()" value="Reset">Reset</button>
</div>
</font></strong></form>
</div>
</div>
</div>
</div>
<!-- Footer -->

<div class="container-fluid">
<div class="content">
<div class="p-9 text-white text-center">
<p>Contact</p>
<p>Phone:29899489230</p>
<p>Thanks for shopping</p>
<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>
<a href="#" class="fa fa-instagram"></a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Output:
Login Page:

Successful data transfer to Data Base:


Form Validation

Result:
Thus a sign up and login page has been created and the information in the form has been validated
using JavaScript and PHP.
Day: 5
DESIGN A WEBSITE WITH DATABASE CONNECTIVITY
USING PHP, MYSQL AND HOST THE WEBSITE IN THE SERVER

Aim:
To develop a Website to maintain the Database using PHP, MYSQL and deploy in the Server.

Description:

 <style> - Define style information for an HTMLdocument.


 <?php ?>-php start and endtag
 Extract()-Imports variables into the local symbol table from an array
 Die() - Prints a message and exits the currentscript
 Mysql_connect()-Open a connection to MYSQLserver
 Mysql_querry() –Execute the given querry and return theresult
 Mysql_error() -Returns the last error description for the most recent functioncall
 Mysql_fetch_row()-Fetches one row from aresult-set
 Mysql_close()-Terminate the connection to mysqlserver

Program:

PHP program to connect with the Database ('server.php')

<?php
$HOSTNAME='localhost';
$USERNAME='root';
$PASSWORD='';
$DATABASE='login';

$con=mysqli_connect($HOSTNAME,$USERNAME,$PASSWORD,$DATABASE);
if($con){
echo "Connection successful";
}
else{
die(mysqli_error($con));
}
?>
<?php // server scripting language(used on the server side)
$success=0; //variable to check success or failure
$user=0;
if($_SERVER['REQUEST_METHOD']=='POST'){ //uisng request method and perform post operation
include 'connect.php';
$name=$_POST['name'];
$password=$_POST['password'];

$sql="SELECT * FROM data WHERE name='$name'";

$result=mysqli_query($con,$sql);
if($result){
$num=mysqli_num_rows($result);
if($num>0){
// echo "User already exist";
$user=1;
}else{

$sql="INSERT INTO data (name,password)


VALUES ('$name', '$password')";
$result=mysqli_query($con,$sql);
if($result){
//echo "Registered successfully";
$success=1;
}else{
die(mysqli_error($con));
}
}
}
}
?>

Program:
Users Validated Account of login page
<?php
session_start();
if(!isset($_SESSION['name'])){
header('location:6.php');
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>KEC MINI MART</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-
awesome.min.css"> <!--social media plugins-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<style>
.fff {
justify-content: center;
display: flex;
border-radius: 5px;
}
.fakeimg {
height: 200px;
background: #aaa;
}
.fa-instagram {
color: rgb(16, 14, 14);
width: 100%;
}
.fa {
padding: 15px;
font-size: 30px;
width: 30px;
text-align: center;
text-decoration: none;
margin: 2px 1px;
}
.fa:hover {
opacity: 0.7;
}
.img-fluid{
height: 250px;
width: 400px;
}

.container-fluid img {vertical-align: middle;}

.container-fluid .content {
background-image: url("blue.jpg");
background-repeat: no-repeat;
background-size: cover;
padding: 50px;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="content">
<div class="p-9 text-white text-center">
<h1>KEC MINI MART</h1>
<p>Shop and Buy at your door step</p>
</div>
</div>
</div>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="4.php">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="5.php">Sign In</a>
</li>
<li class="nav-item">
<a class="nav-link" href="6.php">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="3.php">Back</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="text" placeholder="Search">
<button class="btn btn-primary" type="button">Search</button>
</form>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-xl-3">
<img src="2.jfif" class="img-fluid">
<h3 class="mt-5">Welcome
<?php echo $_SESSION['name'];
?>
</h3>
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Special Bucket List Festvie Offer</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Chocolate</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sweets</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Caramel nuts</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Gulam jamun</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">White Chocolate</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Laddu</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Chips</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Marshmallows</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Honey cake</a>
</li>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dairy
Products
</button>
<ul class="dropdown-menu">
<li>Cheese</li>
<li>Butter</li>
<li>Ghee</li>
<li>Milk</li>
</ul>
</div>
</ul>
</div>
<div class="col-xl-6">
<h2 class="mt-5 p-3 bg-info text-white rounded">Dairy Fresh</h2>
<h5>Avail your special offers</h5>
<center><img src="egg.jpg" class="img-fluid1" width="600" height="240"></center>
<h2 class="mt-5 p-3 bg-info text-white rounded">Straight from the farm</h2>
<h5>Fresh Fruits and Vegetables</h5>
<center><img src="got.jpg" class="img-fluid2" width="600" height="240"></center>
</div>
<div class="col-xl-3">
<h2 class="mt-5 p-3 bg-primary text-white rounded">Add to cart</h2>
<p>Rice-1kg-Rs.100</p>
<p>Sugar-1kg-Rs.100</p>
<p>Salt-1kg-Rs.100</p>
<p>Coffee-1kg-Rs.100</p>
<p>Dal-1kg-Rs.100</p>
<strong><h5>Spicy Masala</h5></strong>
<img src="spices.jfif" class="img-fluid3" width="450" height="200">
<strong><h5>Nuts</h5></strong>
<img src="nuts.jfif" class="img-fluid4" width="450" height="200">
</div>
</div>
</div>
<div class="container-fluid">
<div class="content">
<div class="p-9 text-white text-center">
<p>Contact</p>
<p>Phone:29899489230</p>
<p>Thanks for shopping</p>
<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>
<a href="#" class="fa fa-instagram"></a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Procedure for creating Database:
 Database connectivity in localhost
o Goto-> http://localhost/phpmyadmin

 Creating a Database: New->database name-> Create


 Creating Database table-> table name->Number of Columns-> Save

Output:
Execution of the code in localhost using Xampp server
Xampp server
Web hosting of the Website
 Install WinSCP-> Open -> (Client side)Upload File.
 Login with Username and Password.
 View in wp.kongu.edu/ ~webpage name

Result:
Thus a Database was created using MySql and connectivity was established using PHP and deployed
in the server successfully.

You might also like