Build a Grocery Store Web App using PHP with MySQL
Last Updated :
28 Mar, 2023
In this article, we are going to build a Grocery Store Web Application using PHP with MySQL. In this application, we can add grocery items by their name, quantity, status (pending, bought, not available), and date. We can view, delete and update those items. There will be a date filtering feature where we can view the grocery items according to the dates.
Prerequisites: XAMPP Server, Basic Concepts of HTML, CSS, Bootstrap, PHP, and MySQL
We will follow the following steps to build this application.
Step-1: Open XAMPP Control Panel and start Apache and MySQL services. In XAMPP folder, go to htdocs folder and create a folder named project1. We will keep all the files in project1 folder. Inside this folder, there will be five files (add.php, connect.php, delete.php, index.php, update.php) and one folder called css inside which a file called style.css will be there.
Step-2: Go to localhost/phpMyAdmin and create a database called grocerydb. Under that, make a table called grocerytb with 5 columns. The columns are Id (primary key), Item_name, Item_Quantity, Item_status, and Date. The auto-increment mode should be on for the Id column. Finally, the table structure should look like shown in the given image.
Step-3: Open the editor of your choice. Make a file named connect.php and code the following lines.
connect.php
<?php
$con=mysqli_connect("localhost","root","","grocerydb");
if(!$con)
{
die("cannot connect to server");
}
?>
|
This page is made to connect our PHP page with the database “grocerydb”. After connecting with this database, the connection object is returned to $con variable. If connection is not established, “cannot connect to server” message will be displayed.
Step-4: Create another file named add.php and code the following lines.
add.php
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8">
<title>Add List</title>
<link rel="stylesheet" href=
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container mt-5">
<h1>Add Grocery List</h1>
<form action="add.php" method="POST">
<div class="form-group">
<label>Item name</label>
<input type="text"
class="form-control"
placeholder="Item name"
name="iname" />
</div>
<div class="form-group">
<label>Item quantity</label>
<input type="text"
class="form-control"
placeholder="Item quantity"
name="iqty" />
</div>
<div class="form-group">
<label>Item status</label>
<select class="form-control"
name="istatus">
<option value="0">
PENDING
</option>
<option value="1">
BOUGHT
</option>
<option value="2">
NOT AVAILABLE
</option>
</select>
</div>
<div class="form-group">
<label>Date</label>
<input type="date"
class="form-control"
placeholder="Date"
name="idate">
</div>
<div class="form-group">
<input type="submit"
value="Add"
class="btn btn-danger"
name="btn">
</div>
</form>
</div>
<?php
if(isset($_POST["btn"])) {
include("connect.php");
$item_name=$_POST['iname'];
$item_qty=$_POST['iqty'];
$item_status=$_POST['istatus'];
$date=$_POST['idate'];
$q="insert into grocerytb(Item_name,
Item_Quantity,Item_status,Date)
values('$item_name',$item_qty,
'$item_status','$date')";
mysqli_query($con,$q);
header("location:index.php");
}
?>
</body>
</html>
|
This page is made to insert the grocery items data from HTML form to the “grocerytb” table in the “grocerydb” database. The html form contains the Item name, Item Quantity, Item status, and Date values which are to be entered by the user. We have set the option value as 0, 1, and 2 for Pending, Bought, and Not Available (for item status) respectively. When a button is clicked, we include the file “connect.php” to connect the page with the database. Then, we are fetching all the data entered by the user and inserting them into the “grocerytb” table. If the values are entered successfully in the table, the page will move to “index.php” which will enable the user to view the items entered so far (or the items which are in the table as of now). Create a “style.css” file inside css folder and code the following.
style.css
@import url(
body {
font-family: 'Poppins', sans-serif;
font-weight: 300;
background-color: beige;
}
h1, h2, h3, h4, h5 {
font-family: 'Poppins', sans-serif;
font-weight: 700;
}
|
The “add.php” file should look like shown in the given image.
Step-5: Make another file named index.php and code the following lines.
index.php
<?php
include("connect.php");
if (isset($_POST['btn'])) {
$date=$_POST['idate'];
$q="select * from grocerytb where Date='$date'";
$query=mysqli_query($con,$q);
}
else {
$q= "select * from grocerytb";
$query=mysqli_query($con,$q);
}
?>
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8">
<title>View List</title>
<link rel="stylesheet" href=
<link rel="stylesheet"
href="css/style.css">
</head>
<body>
<div class="container mt-5">
<!-- top -->
<div class="row">
<div class="col-lg-8">
<h1>View Grocery List</h1>
<a href="add.php">Add Item</a>
</div>
<div class="col-lg-4">
<div class="row">
<div class="col-lg-8">
<!-- Date Filtering-->
<form method="post" action="">
<input type="date"
class="form-control"
name="idate">
<div class="col-lg-4"
method="post">
<input type="submit"
class="btn btn-danger float-right"
name="btn" value="filter">
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Grocery Cards -->
<div class="row mt-4">
<?php
while ($qq=mysqli_fetch_array($query))
{
?>
<div class="col-lg-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">
<?php echo $qq['Item_name']; ?>
</h5>
<h6 class="card-subtitle mb-2 text-muted">
<?php echo
$qq['Item_Quantity']; ?>
</h6>
<?php
if($qq['Item_status'] == 0) {
?>
<p class="text-info">PENDING</p>
<?php
} else if($qq['Item_status'] == 1) {
?>
<p class="text-success">BOUGHT</p>
<?php } else { ?>
<p class="text-danger">NOT AVAILABLE</p>
<?php } ?>
<a href=
"delete.php?id=<?php echo $qq['Id']; ?>"
class="card-link">
Delete
</a>
<a href=
"update.php?id=<?php echo $qq['Id']; ?>"
class="card-link">
Update
</a>
</div>
</div><br>
</div>
<?php
}
?>
</div>
</div>
</body>
</html>
|
We are again including “connect.php” to connect the page with the database. Then, we are fetching all the data from the table using a function called mysqli_fetch_array() and displaying them on the page. For every item, there is a delete and update link. Using Add Item link on the top, the page will again move to “add.php” from where the user can again add grocery items to the database. We are also adding a date filtering feature on this page. When a user enters a date and clicks on the filter button, all the grocery items data will be displayed according to the date entered. For now, our “grocerytb” table looks like shown in the given image.
After moving to “index.php” file, the page will look like shown in the given image.
After entering a date 01/14/2021, the page will look like shown in the given image.
Step-6: Make another file named update.php and code the following lines.
update.php
<?php
include("connect.php");
if(isset($_POST['btn']))
{
$item_name=$_POST['iname'];
$item_qty=$_POST['iqty'];
$istatus=$_POST['istatus'];
$date=$_POST['idate'];
$id = $_GET['id'];
$q= "update grocerytb set Item_name='$item_name', Item_Quantity='$item_qty',
Item_status='$istatus', Date='$date' where Id=$id";
$query=mysqli_query($con,$q);
header('location:index.php');
}
else if(isset($_GET['id']))
{
$q = "SELECT * FROM grocerytb WHERE Id='".$_GET['id']."'";
$query=mysqli_query($con,$q);
$res= mysqli_fetch_array($query);
}
?>
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8">
<title>Update List</title>
<link rel="stylesheet" href=
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container mt-5">
<h1>Update Grocery List</h1>
<form method="post">
<div class="form-group">
<label>Item name</label>
<input type="text"
class="form-control"
name="iname"
placeholder="Item name"
value=
"<?php echo $res['Item_name'];?>" />
</div>
<div class="form-group">
<label>Item quantity</label>
<input type="text"
class="form-control"
name="iqty"
placeholder="Item quantity"
value="<?php echo $res['Item_Quantity'];?>" />
</div>
<div class="form-group">
<label>Item status</label>
<select class="form-control"
name="istatus">
<?php
if($res['Item_status'] == 0) {
?>
<option value="0" selected>PENDING</option>
<option value="1">BOUGHT</option>
<option value="2">NOT AVAILABLE</option>
<?php } else if($res['Item_status'] == 1) { ?>
<option value="0">PENDING</option>
<option value="1" selected>BOUGHT</option>
<option value="2">NOT AVAILABLE</option>
<?php } else if($res['Item_status'] == 2) { ?>
<option value="0">PENDING</option>
<option value="1">BOUGHT</option>
<option value="2" selected>NOT AVAILABLE</option>
<?php
}
?>
</select>
</div>
<div class="form-group">
<label>Date</label>
<input type="date" class="form-control"
name="idate" placeholder="Date"
value="<?php echo $res['Date']?>">
</div>
<div class="form-group">
<input type="submit" value="Update"
name="btn" class="btn btn-danger">
</div>
</form>
</div>
</body>
</html>
|
In “index.php”, we fetched the Id’s of every item. In “update.php”, the user can edit any data. For that item, we are fetching the id and the updated item’s data. Then, we are running an update query through which items are getting updated. After the items are updated, the page will move to “index.php”. Here, we are updating the value of Item_name called pineapple and Id having 6. We are updating its Item_Quantity from 1 to 2 and Item_status from Pending to Not available. After that, the page will look like shown in the given image.
After updating, index.php will look like this.
The updated table will look like this.
Step-7: Make another file named delete.php and code the following lines.
delete.php
<?php
include("connect.php");
$id = $_GET['id'];
$q = "delete from grocerytb where Id = $id ";
mysqli_query($con,$q);
?>
|
In “index.php”, we fetched the Id’s of every item so that we can delete any data. For the item which is to be deleted, we are fetching the id in the “delete.php”. Then, we are running a delete query through which the selected item’s record will get deleted. We are deleting the Item having Id 6 and Item_name as pineapple. After deleting it, the page will look like shown in the given image.
And, the table will look like this.
Source Code Link– https://github.com/anshu37/grocery-php-project
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...