[go: up one dir, main page]
Scribd
Upload
34 views30 pages

Web Programming - 231220 - 172353

The document describes several HTML and JavaScript coding exercises including designing web pages, adding images and links, creating a college website, generating a time table using CSS, converting text to uppercase, validating usernames and passwords, and using frames and events.

Uploaded by

Malathi
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
34 views30 pages

Web Programming - 231220 - 172353

The document describes several HTML and JavaScript coding exercises including designing web pages, adding images and links, creating a college website, generating a time table using CSS, converting text to uppercase, validating usernames and passwords, and using frames and events.

Uploaded by

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

PART-A

Ex.No :1 Design a HTML page Date:

AIM:
Design a HTML page describing your profile in one paragraph. Design in such a way that it has a
heading, a horizontal rule, three links and your photo. Also, write three HTML documents for the links.
Include facilities for forward, backward and HOME.
PROCEDURE:
The following tags are used.
TAG DESCRIPTION
<HTML> Defines an HTML document
<body> Defines the document’s body
<h1>to<h6> Defines header 1 to header6
<p> Defines a paragraph
<br> Inserts a single line break
<hr> Defines a horizontal rule
<!--> Defines a comment
<bgcolor> Defines the background color
<img src> It is used to add images in the web page
<href> It is used to make link with other web page
<title> Defines the document’s title

PROGRAM
First.html
<html>
<head><p align="center"><b>First Example</b></p>0
<hr></head>
<body>
<a href="a.html">First</a><br>
<a href="b.html">Second</a><br>
<a href="c.html">Third</a><br>
<p align="centre"><img src="Winter.jpg"></img></p>
<p>
Name :XYZ<br>
Address:South Street Nagercoil-1<br>
Phone No : 9999999999<br>
Father Name : xxx<br>
Nationality : Indian<br>
Date of Birth : 10/12/1990<br>
</p>
</html>
a.html
<html>
<head>First link</head><br>
<body>
<a href="First.html">Home</a><br>
<a href="b.html">Forward</a><br>
</body>
</html>
b.html
<html>
<head>Second link</head>
<body>
<br>
<a href="First.html">Home</a><br>
<a href="c.html">Forward</a><br>
<a href="a.html">Backward</a><br>
</body>
</html>
c.html
<html>
<head>Third link</head><br>
<body>
<a href="b.html">Backward</a><br>
<a href="First.html">Home</a><br>
</body>
</html>
Output:

Result:
Thus the web pages are created using anchor tag and executed successfully
Ex.No:2 Date:

1. DESIGN A HTML PAGE ABOUT COMPUTER LANGUAGE


AIM:
Design a HTML page about computer languages. List the languages. Each languages name is link.
Prepare separate HTML documents for each language and call them in the appropriate link.
PROCEDURE:
The following tags are used.
TAG DESCRIPTION
<HTML> Defines an HTML document
<body> Defines the document’s body
<h1>to<h6> Defines header 1 to header6
<p> Defines a paragraph
<br> Inserts a single line break
<hr> Defines a horizontal rule
<!--> Defines a comment
<bgcolor> Defines the background color
<img src> It is used to add images in the web page
<href> It is used to make link with other web page
<title> Defines the document’s title

PROGRAM:
second.html:
<html>
<head>
Language</head>
<body>
<br>
<a href="/friend1.html">Java</a><br>
<a href="/friend2.html">C</a><br>
<a href="/friend3.html">C++</a><br>
</body>
</html>
friend1.html:
<html>
<head></head>
<body>
<p>Java is a object oriented language</p>
<br>
<a href="second.html">Home</a><br>
</body>
</html>
friend2.html:
<html>
<head></head>
<body>
<p>C is a object oriented language</p>
<br>
<a href="second.html">Home</a><br>
</body>
</html>
friend3.html:
<html>
<head></head>
<body>
<p>C++ is a procedure as well as object oriented</p>
<br>
<a href="second.html">Home</a><br>
</body>
</html>

OUTPUT:

Result:
Thus the web pages are created with links and executed successfully
Ex.No3: Date:

2. WEBSITE FOR POLYTECHNIC


AIM:
Design a single page website for your polytechnic containing a description of the courses offered. It
should also contain some general information about the college such as its history, the campus, and
its unique features and so on. The site should be colored and each section should have a different
color.
PROCEDURE:
The following tags are used.
TAG DESCRIPTION
<HTML> Defines an HTML document
<body> Defines the document’s body
<h1>to<h6> Defines header 1 to header6
<p> Defines a paragraph
<br> Inserts a single line break
<hr> Defines a horizontal rule
<!--> Defines a comment
<bgcolor> Defines the background color
<img src> It is used to add images in the web page
<href> It is used to make link with other web page
<li> It is used to list the item
<ol> It is used to list the item with number as index
<ul> It is used to list the item with bullets as index
<title> Defines the document’s title
PROGRAM:
<html>
<head><a><p align="CENTER">GPT POLYTECHNIC COLLEGE</a></p>
</head>
<style>
h1{font-family:arial,sans;font-size=17;color:black}
h2{font-family:arial,sans;font-size=17;color:blue}
a{font-family:times new roman;font-size=30;color:red}
</style>
<body bgcolor="pink" text="yellow">
<h1><br>
<font color="brown"><center><u>HISTORY</u></center>
<p align="justify"> GPT INSTITUTE OF POLYTECHNIC was established in July 1958 by Sri S.N.N.
Sankaralinga Iyer, a well-known Philanthropist, missionary and Industrialist and Shri TS
Narayanaswamy, Industrialist and former Sheriff of Madras, who were the founders of The India
Cements Ltd.. <br>
</font>
<hr>
<p>Courses Offered</p>
<ul type="DISC">
<li>CIVIL</li>
<li>EEE</li>
<li>CSE</li>
<li>MECH</li>
<li>ECE</li>
</ul>
</h1>
<br>
<h2>
<p>Give the details for your college</p><br>
<font color="sky blue"><center><u>CAMPUS</u></center>
We have Library, Computer Center, Hostel, Canteen and Student service
Center inside the college.<br>
</font>
<hr>
<font color="Green">
<center><u>Contact details</u></center>
<br> Phone : 8888-888888888
<br> Website : gpt.edu.in
</font>
</h2>
</body>
</html>

OUTPUT:

Result:
Thus the college website is created with links and executed successfully
Ex.No:4 Date:
3. TIME TABLE USING CSS
AIM:
Write a program using CSS to create a time table for the class.
PROCEDURE:
1. Open a new file.
2. Write the basic HTML tags.
3. <style> used to change the font-type, size and color of the page.
4. <table> used to create table.
The following tags are present inside the table tags
i) <TR> used to create horizontal rows of cells.
ii) <TH> used to define the heading of cells in the table.
iii) <TD> used to define the data of each cells in the table.
5. Close the all tags.
PROGRAM: TIME TABLE USING CSS
<html>
<head>
<title>Time Table</title>
<style type="text/css">
h1{font-family:arial,helvita;font-size:16pt;color:red;}
body{font-family:times,serif;font-size:20pt;color:white;background:blue;}
h2{font-family:monospace,sans-serif;font-size:18pt;color:red;}
</style>
</head>
<body>
<table border="5">
<tr>
<td><h2>Hour/Days</h2></td>
<td><h2>Monday</h2></td>
<td><h2>Tuesday</h2></td>
<td><h2>Wednesday</h2></td>
<td><h2>Thursday</h2></td>
<td><h2>Friday</h2></td>
</tr>
<tr>
<td><h2>First</h2></td>
<h1><td>Tamil</td>
<td>English</td>
<td>Maths</td>
<td>Science</td>
<td>Social</td>
</h1>
</tr>
<tr>
<td><h2>Second</h2></td>
<h1>
<h1><td>English</td>
<td>Maths</td>
<td>Science</td>
<td>Social</td>
<td>Tamil</td>
</h1>
</tr>
<tr>
<td><h2>Third</h2></td>
<h1>
<h1><td>Maths</td>
<td>Science</td>
<td>Social</td>
<td>Tamil</td>
<td>English</td>
</h1>
</tr>
<tr>
<td><h2>Fourth</h2></td>
<h1>
<h1><td>Science</td>
<td>Social</td>
<td>Tamil</td>
<td>English</td>
<td>Maths</td>
</h1>
</tr>
<tr>
<td><h2>Fifth</h2></td>
<h1>
<h1><td>Social</td>
<td>Tamil</td>
<td>English</td>
<td>Maths</td>
<td>Science</td>
</h1>
</tr>
</table>
</body>
</html>
OUTPUT:
Result: Thus the timetable is created using CSS and executed successfully
Ex.No:5 Date:

5 CONVERTING TEXT TO UPPERCASE


AIM:
Write a Java script code that converts the entered text to uppercase.
PROCEDURE:
1. Open a new file.
2. Write the basic html tags.
3. <script> has the following steps
(i) Create and initialize string from variable.
(ii) Convert the string from lowercase to uppercase.
(iii) Display the output.
4. Terminate the program.
PROGRAM: CONVERTING TEXT TO UPPERCASE
<html>
<head>
<title>Lowercase to uppercase</title>
</head>
<body>
<script language="JavaScript">
var str=new String("hello")
var str1=str.toUpperCase();
document.write("The upper case String for "+str+" is "+str1);
</script>
</body>
</html>

OUTPUT:

Result:
Thus the Java script code that converts the entered text to uppercase is executed
Ex.No:6 Date:
6 VALIDATING USERNAME AND PASSWORD
AIM:
Write a Java script code to validate the username and password. The username and
password are stored in variables.
PROCEDURE:
1. Open a new file.
2. Write the basic html tags.
3. <script> has the following steps
(i) Get username and password to the variables user and pas respectively.
(ii) if((user==”aaa”)&&(pas==”bbb”))
document.write (“Login successfully”);
(iii) else
document.write(“Login failed”);
4. Terminate the program.
PROGRAM: VALIDATING USERNAME AND PASSWORD
<html>
<head>
<title>UserName Password</title>
</head>
<body>
<script language="javaScript">
var user=prompt("Enter username");
var pass=prompt("Enter password");
if((user=="aaa")&&(pass=="bbb"))
{
alert("Login successfully");
}
else
{
alert("Login failed");
}
</script>
</body>
</html>
OUTPUT:

Result:
Thus the Java script code to validate the username and password is executed successfully
Ex.No:7 Date:

7. FRAMES AND EVENTS


AIM:
Write a Java script code using frames and events (When a cursor moves over an object it should
display the specification of the object in another frame.
PROCEDURE:
1. Open a new file.
2. Write the basic html tags.
3. Divide the web pages into two frames using the <frameset> tag.
4. Whenever you point out on the button in first frame, the button caption will be
displayed on text box placed on the second frame.
5. Terminate the program.

PROGRAM: FRAMES AND EVENTS


Main.html
<html>
<head>
<title>Frames Values</title>
</head>
<FRAMESET cols="20%,80%">
<FRAME SRC="jex7a.html"name="left_frame">
<FRAME SRC="jex7b.html"name="right_frame">
</FRAMESET><noframes></noframes>
</html>
Jex7a.html
<html>
<head>
<title>JavaScript Example 13</title>
</head>
<body>
<form>
<p>
<INPUT type="button"value="What is cool?"
onMouseMove="parent.right_frame.document.form1.text1.value='What is cool?'">
</p>
<p>
<INPUT type="button"value="What is hot?"
onMouseMove="parent.right_frame.document.form1.text1.value='What is hot?'">
</p>
<p>&nbsp;</p>
</form>
</body>
</html>
Jex7b.html
<html>
<head>
<title>JavaScript Example 14</title>
</head>
<body>
<FORM name="form1">
<INPUT type="text"name="text1"size="25"value="">
</FORM>
</body>
</html>

OUTPUT:

Result:
Thus the Java script code using frames and events is processed and executed successfully.
Ex.No:8 Date:

8. BANNER ADVERTISEMENT

AIM:
Create a site containing banner advertisement at the top of the page. The ads are Changedevery
10 or 15 seconds.
PROCEDURE:
1. Open a new file.
2. Write a basic html tags.
3. Declare and initialize the array variable with images.
4. Declare and set the interval time for variable ‘delay’.
5. Using random function, images are displayed randomly at same interval.
6. Close all tags.

PROGRAM: BANNER ADVERTISEMENT


<html lang="en"> <head>
<script type="text/javascript">
var c=0
var s
function photoGallery()
{
if (c%4==0){
document.getElementById('photo-gallery').src = "1.gif";
}
if (c%4==1){
document.getElementById('photo-gallery').src = "2.gif";
}
if (c%4==2){
document.getElementById('photo-gallery').src = "3.gif";
}
if (c%4==3){
document.getElementById('photo-gallery').src = "4.gif";
}
c=c+1
s=setTimeout("photoGallery()",4000)
}
</script>

</head>
<body onLoad="photoGallery()">
<table border="1">
<tr>
<td><img src="1.gif" id="photo-gallery" width="600" height="100"></td>
</tr>
</table>
</body>
</html>
Output

Result:
Thus the banner advertisement web page is created and executed.
Ex.No:9 Date:

9.JQUERY PROGRAM FOR COUNT THE NUMBER

AIM:
To write a jquery program for count the number of milliseconds between the click events.

PROCEDURE:
1. Open a new file.
2. Write a basic html tags.
3. Insert Javascript tags.
4. Write Javascript click event
5. View the html in browser
6. Close the file.

Program:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="E://jq/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").click(function(event){
$("span").text(event.timeStamp);
});
});
</script>
</head>
<body>

<p>If you click on me, I will disappear.</p>


<p>Click me away!</p>
<p>Click me too!</p>
<p>The click event occurred <span style="color:red">unknown</span> milliseconds</p>
</body>
</html>

Output

Result:
Thus the jquery program for count the number of milliseconds between the click events is executed
Ex.No:10 Date:

JQUERY PROGRAM FOR ENABLE / DISABLE THE OBJECT

AIM:
To write a jquery program for enable or disable the elements on the web page.

PROCEDURE:
1. Open a new file.
2. Write a basic html tags.
3. Insert Javascript tags.
4. Write Javascript click event
5. Write show() and hide() function.
6. View the html in browser
7. Close the file.
Program:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="E://jq/jquery-1.8.0.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p>If you click on the "Hide" button, I will disappear.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>
Output:
Result:
Thus the jquery program for enable or disable the elements on the web page is executed
Ex.No:11 Date:
STRING FUNCTIONS
AIM:
To Write a PHP program to implement at least 05 string functions with description

PROCEDURE:
1. Open a new file save as dot php.
2. Write a basic html tags.
3. Insert PHP tags.
4. Write php String function.
5. Write strlen, strrev, str_split, trim, strtoupper, strtolower function.
6. View the php file in browser using localhost server helps.
7. Close the file.

Program:
<!DOCTYPE html>
<html>
<head>
<title>String Functions</title>
</head>
<body>
<?php
$str = "Hello World!";
// Prints 12 as output
echo strlen($str);
// Prints 13 in a new line
echo "<br>" . strlen("GeeksForGeeks");
echo "<br>";
echo strrev($str);
echo "<br>";
$str = " Raja .";
echo $str;
echo "<br>";
echo trim($str) . "<br>";
$str = "Raja";
print_r(str_split($str));
echo "<br>";
print_r(str_split($str, 3));

$str = "RaJa";
echo "<br>";
echo strtoupper($str)."<br>";
echo "<br>";
echo strtolower($str);
?>
</body>
</html>

Output:
12
13
!dlroW olleH
Raja .
Raja .
Array ( [0] => R [1] => a [2] => j [3] => a )
Array ( [0] => Raj [1] => a )
RAJA

raja

Result:
Thus the php program for string functions on the web page is executed
Ex.No:12 Date:
ARRAY SORT THE LIST
AIM:
To Create a PHP script which display the capital and country name from the given array.Sort
the list by the name of the country.

PROCEDURE:
1. Open a new file save as dot php.
2. Write a basic html tags.
3. Insert PHP tags.
4. Write php Array function and sort().
5. Using for each loops.
6. View the php file in browser using localhost server helps.
7. Close the file.

Program:
<!DOCTYPE html>
<html>
<head>
<title>Array Sort Functions</title>
</head>
<body>
<?php
$ceu = array( "Italy"=>"Rome"
,"Germany" => "Berlin", "Greece" => "Athens",
"Austria" => "Vienna", "India"=>"Delhi" ) ;
asort($ceu) ;
foreach($ceu as $country => $capital)
{
echo "The capital of $country is $capital"."\n" ;
}
?>
</body>
</html>

Output:
The capital of Greece is Athens
The capital of Germany is Berlin
The capital of India is Delhi
The capital of Italy is Rome
The capital of Austria is Vienna
Result:
Thus the php program for array Sort the list by the name of the country on the web page is executed
Ex.No:13 Date:
DATE AND TIME FUNCTIONS
AIM:
To Write a PHP program to implement Date and Time Functions.

PROCEDURE:
1. Open a new file save as dot php.
2. Write a basic html tags.
3. Insert PHP tags.
4. Write php date function.
5. Write display date("Y-m-d") and date("h:i:sa") function.
6. View the php file in browser using localhost server helps.
7. Close the file.

Program:
<!DOCTYPE html>
<html>
<head>
<title>Date Time Functions</title>
</head>
<body>
<?php
echo "Today's date is :";
$today = date("d/m/Y");
echo $today . "<br>";
$t=time();
echo($t . "<br>");
echo(date("Y-m-d",$t));
echo "<br> The time is " . date("h:i:sa");
?>
</body>
</html>

Output:
Today's date is :01/04/2022
1648796286
2022-04-01
The time is 08:58:06am

Result:
Thus the php program for Date and Time Functions on the web page is executed
Ex.No:14 Date:
INSERT AND DELETE DATA FROM DATABASE
AIM:
To Write a PHP script to display table with implementing Form Processing Controls of Insert
and Delete data from data base.

PROCEDURE:
1. Open a new 4 file save as dot php.
a. connection.php
b. index.php
c. insert.php
d. View.php
2. Write a basic html tags.
3. Connected to database mysqli_connect("localhost","root","","crud").
4. Index .php file to get username , email, age,
5. inser.php store all the data in to records table.
6. View.php file view all the user data.
7. Close the file.

Program:
connection.php
<?php
$con=mysqli_connect("localhost","root","","crud");
if(!$con) { die(" Connection Error "); }
?>

index.php

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" a href="CSS/bootstrap.css"/>
<title>Registration Form</title>
</head>
<body class="bg-dark">

<div class="container">
<div class="row">
<div class="col-lg-6 m-auto">
<div class="card mt-5">
<div class="card-title">
<h3 class="bg-success text-white text-center py-3"> Registration Form in PHP</h3>
</div>
<div class="card-body">

<form action="insert.php" method="post">


<input type="text" class="form-control mb-2" placeholder=" User Name "
name="name">
<input type="email" class="form-control mb-2" placeholder=" User Email "
name="email">
<input type="text" class="form-control mb-2" placeholder=" User Age "
name="age">
<button class="btn btn-primary" name="submit">Submit</button>
</form>

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

</body>
</html>

insert.php

<?php

require_once("connection.php");

if(isset($_POST['submit']))
{
if(empty($_POST['name']) || empty($_POST['email']) || empty($_POST['age']))
{
echo ' Please Fill in the Blanks ';
}
else
{
$UserName = $_POST['name'];
$UserEmail = $_POST['email'];
$UserAge = $_POST['age'];

$query = " insert into records (User_Name, User_Email,User_Age)


values('$UserName','$UserEmail','$UserAge')";
$result = mysqli_query($con,$query);

if($result)
{
header("location:view.php");
}
else
{
echo ' Please Check Your Query ';
}
}
}
else
{
header("location:index.php");
}

View.php

<?php

require_once("connection.php");
$query = " select * from records ";
$result = mysqli_query($con,$query);

?>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" a href="CSS/bootstrap.css"/>
<title>View Records</title>
</head>
<body class="bg-dark">

<div class="container">
<div class="row">
<div class="col m-auto">
<div class="card mt-5">
<table class="table table-bordered">
<tr>
<td> User ID </td>
<td> User Name </td>
<td> User Email </td>
<td> User Age </td>
<td> Edit </td>
<td> Delete </td>
</tr>

<?php
while($row=mysqli_fetch_assoc($result))
{
$UserID = $row['User_ID'];
$UserName = $row['User_Name'];
$UserEmail = $row['User_Email'];
$UserAge = $row['User_Age'];
?>
<tr>
<td><?php echo $UserID ?></td>
<td><?php echo $UserName ?></td>
<td><?php echo $UserEmail ?></td>
<td><?php echo $UserAge ?></td>
<td><a href="edit.php?GetID=<?php echo $UserID ?>">Edit</a></td>
<td><a href="delete.php?Del=<?php echo $UserID ?>">Delete</a></td>
</tr>
<?php
}
?>
</table>
</div>
</div>
</div>
</div>

</body>
</html>

Output:

Result:
Thus the php program for Insert and Delete data from database on the web page is executed
Ex.No:15 Date:
SIMPLE SHOPPING
AIM:
To Create a simple shopping - cart script using PHP and MySQL.

PROCEDURE:
1. Open a new file save as Cart.php.
2. Write a basic html tags.
3. Insert PHP tags.
4. Create connection to datebase.
5. Display all the product.
6. Add how many products to you want buy.
7. Products successfully added to cart.
8. View the php file in browser using localhost server helps.
9. Close the file.

Program:
CREATE DATABASE product_details;

<?php
session_start();
$database_name = "Product_details";
$con = mysqli_connect("localhost","root","",$database_name);

if (isset($_POST["add"])){
if (isset($_SESSION["cart"])){
$item_array_id = array_column($_SESSION["cart"],"product_id");
if (!in_array($_GET["id"],$item_array_id)){
$count = count($_SESSION["cart"]);
$item_array = array(
'product_id' => $_GET["id"],
'item_name' => $_POST["hidden_name"],
'product_price' => $_POST["hidden_price"],
'item_quantity' => $_POST["quantity"],
);
$_SESSION["cart"][$count] = $item_array;
echo '<script>window.location="Cart.php"</script>';
}else{
echo '<script>alert("Product is already Added to Cart")</script>';
echo '<script>window.location="Cart.php"</script>';
}
}else{
$item_array = array(
'product_id' => $_GET["id"],
'item_name' => $_POST["hidden_name"],
'product_price' => $_POST["hidden_price"],
'item_quantity' => $_POST["quantity"],
);
$_SESSION["cart"][0] = $item_array;
}
}

if (isset($_GET["action"])){
if ($_GET["action"] == "delete"){
foreach ($_SESSION["cart"] as $keys => $value){
if ($value["product_id"] == $_GET["id"]){
unset($_SESSION["cart"][$keys]);
echo '<script>alert("Product has been Removed...!")</script>';
echo '<script>window.location="Cart.php"</script>';
}
}
}
}
?>

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0,
minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Shopping Cart</title>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-
BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-
Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
<style>
@import url('https://fonts.googleapis.com/css?family=Titillium+Web');

*{
font-family: 'Titillium Web', sans-serif;
}
.product{
border: 1px solid #eaeaec;
margin: -1px 19px 3px -1px;
padding: 10px;
text-align: center;
background-color: #efefef;
}
table, th, tr{
text-align: center;
}
.title2{
text-align: center;
color: #66afe9;
background-color: #efefef;
padding: 2%;
}
h2{
text-align: center;
color: #66afe9;
background-color: #efefef;
padding: 2%;
}
table th{
background-color: #efefef;
}
</style>
</head>
<body>

<div class="container" style="width: 65%">


<h2>Shopping Cart</h2>
<?php
$query = "SELECT * FROM product ORDER BY id ASC ";
$result = mysqli_query($con,$query);
if(mysqli_num_rows($result) > 0) {
while ($row = mysqli_fetch_array($result)) {

?>
<div class="col-md-3">

<form method="post" action="Cart.php?action=add&id=<?php echo $row["id"]; ?>">

<div class="product">
<img src="<?php echo $row["image"]; ?>" class="img-responsive">
<h5 class="text-info"><?php echo $row["pname"]; ?></h5>
<h5 class="text-danger"><?php echo $row["price"]; ?></h5>
<input type="text" name="quantity" class="form-control" value="1">
<input type="hidden" name="hidden_name" value="<?php echo $row["pname"];
?>">
<input type="hidden" name="hidden_price" value="<?php echo $row["price"];
?>">
<input type="submit" name="add" style="margin-top: 5px;" class="btn btn-
success"
value="Add to Cart">
</div>
</form>
</div>
<?php
}
}
?>

<div style="clear: both"></div>


<h3 class="title2">Shopping Cart Details</h3>
<div class="table-responsive">
<table class="table table-bordered">
<tr>
<th width="30%">Product Name</th>
<th width="10%">Quantity</th>
<th width="13%">Price Details</th>
<th width="10%">Total Price</th>
<th width="17%">Remove Item</th>
</tr>

<?php
if(!empty($_SESSION["cart"])){
$total = 0;
foreach ($_SESSION["cart"] as $key => $value) {
?>
<tr>
<td><?php echo $value["item_name"]; ?></td>
<td><?php echo $value["item_quantity"]; ?></td>
<td>$ <?php echo $value["product_price"]; ?></td>
<td>
$ <?php echo number_format($value["item_quantity"] * $value["product_price"],
2); ?></td>
<td><a href="Cart.php?action=delete&id=<?php echo $value["product_id"];
?>"><span
class="text-danger">Remove Item</span></a></td>

</tr>
<?php
$total = $total + ($value["item_quantity"] * $value["product_price"]);
}
?>
<tr>
<td colspan="3" align="right">Total</td>
<th align="right">$ <?php echo number_format($total, 2); ?></th>
<td></td>
</tr>
<?php
}
?>
</table>
</div>
</div>
</body>
</html>
Output:
Result:
Thus the php program for simple shopping on the web page is executed

You might also like