1. Create a database with name test
2. Create a table: tblProduct

CREATE TABLE `tblproduct` (

`id` int(8) NOT NULL,

`name` varchar(255) NOT NULL,

`code` varchar(255) NOT NULL,

`image` text NOT NULL,

`price` double(10,2) NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=latin1;

3. Configure the localhost connection: config.php

$con=mysqli_connect("localhost", "root","", "login");

if(mysqli_connect_errno()){

echo "Connection Fail".mysqli_connect_error();

}

?>

4. Create a CSS style file: style.css

body {

font-family: Arial;

color: #211a1a;

font-size: 0.9em;

}

#shopping-cart {

margin: 40px;

}

#product-grid {

margin: 40px;

}

#shopping-cart table {

width: 100%;

background-color: #F0F0F0;

}

#shopping-cart table td {

background-color: #FFFFFF;

}

.txt-heading {

color: #211a1a;

border-bottom: 1px solid #E0E0E0;

overflow: auto;

}

#btnEmpty {

background-color: #ffffff;

border: #d00000 1px solid;

padding: 5px 10px;

color: #d00000;

float: right;

text-decoration: none;

border-radius: 3px;

margin: 10px 0px;

}

.btnAddAction {

padding: 5px 10px;

margin-left: 5px;

background-color: #efefef;

border: #E0E0E0 1px solid;

color: #211a1a;

float: right;

text-decoration: none;

border-radius: 3px;

cursor: pointer;

}

#product-grid .txt-heading {

margin-bottom: 18px;

}

.product-item {

float: left;

background: #ffffff;

margin: 30px 30px 0px 0px;

border: #E0E0E0 1px solid;

}

.product-image {

height: 155px;

width: 250px;

background-color: #FFF;

}

.clear-float {

clear: both;

}

.demo-input-box {

border-radius: 2px;

border: #CCC 1px solid;

padding: 2px 1px;

}

.tbl-cart {

font-size: 0.9em;

}

.tbl-cart th {

font-weight: normal;

}

.product-title {

margin-bottom: 20px;

}

.product-price {

float:left;

}

.cart-action {

float: right;

}

.product-quantity {

padding: 5px 10px;

border-radius: 3px;

border: #E0E0E0 1px solid;

}

.product-tile-footer {

padding: 15px 15px 0px 15px;

overflow: auto;

}

.cart-item-image {

width: 30px;

height: 30px;

border-radius: 50%;

border: #E0E0E0 1px solid;

padding: 5px;

vertical-align: middle;

margin-right: 15px;

}

.no-records {

text-align: center;

clear: both;

margin: 38px 0px;

}

5. Create index page: index.php

Run the code in browser to see the output