Создайте веб-приложение продуктового магазина, используя PHP с MySQL
В этой статье мы собираемся создать веб-приложение продуктового магазина, используя PHP с MySQL. В этом приложении мы можем добавлять продукты по их названию, количеству, статусу (в ожидании, куплено, недоступно) и дате. Мы можем просматривать, удалять и обновлять эти элементы. Будет функция фильтрации по дате, где мы сможем просматривать продукты в соответствии с датами.
Предварительные требования: сервер XAMPP, базовые понятия HTML, CSS, Bootstrap, PHP и MySQL.
Мы выполним следующие шаги, чтобы создать это приложение.
Шаг 1. Откройте панель управления XAMPP и запустите службы Apache и MySQL. В папке XAMPP перейдите в папку htdocs и создайте папку с именем project1 . Мы будем хранить все файлы в папке project1 . Внутри этой папки будет пять файлов ( add.php , connect.php , delete.php , index.php , update.php ) и одна папка с именем css, внутри которой будет файл с именем style.css .
Шаг 2: Перейдите в localhost/phpMyAdmin и создайте базу данных с именем productdb . Под этим создайте таблицу с именем producttb с 5 столбцами. Столбцы: Id (первичный ключ), Item_name, Item_Quantity, Item_status и Date. Для столбца Id должен быть включен режим автоинкремента. Наконец, структура таблицы должна выглядеть так, как показано на данном изображении.
Шаг 3: Откройте редактор по вашему выбору. Создайте файл с именем connect.php и закодируйте следующие строки.
connect.php
<?php $con=mysqli_connect("localhost","root","","grocerydb"); if(!$con) { die("cannot connect to server"); } ?> |
Эта страница создана для подключения нашей PHP-страницы к базе данных «grocerydb». После подключения к этой базе данных объект подключения возвращается в переменную $con. Если соединение не установлено, появится сообщение «невозможно подключиться к серверу».
Шаг 4: Создайте еще один файл с именем add.php и введите следующие строки.
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"); } // if(!mysqli_query($con,$q)) // { // echo "Value Not Inserted"; // } // else // { // echo "Value Inserted"; // } ?></body> </html> |
Эта страница предназначена для вставки данных продуктовых товаров из HTML-формы в таблицу «grocerytb» в базе данных «grocerydb». HTML-форма содержит значения «Имя товара», «Количество товара», «Статус товара» и «Дата», которые должны быть введены пользователем. Мы установили значение параметра как 0, 1 и 2 для «Ожидание», «Куплено» и «Недоступно» (для статуса товара) соответственно. Когда кнопка нажата, мы подключаем файл «connect.php», чтобы связать страницу с базой данных. Затем мы извлекаем все данные, введенные пользователем, и вставляем их в таблицу «grocerytb». Если значения успешно введены в таблицу, страница переместится на «index.php», что позволит пользователю просмотреть элементы, введенные до сих пор (или элементы, которые находятся в таблице на данный момент). Создайте файл «style.css» внутри папки css и напишите следующий код.
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;} |
Файл «add.php» должен выглядеть так, как показано на данном изображении.
Шаг 5: Создайте еще один файл с именем index.php и введите следующие строки.
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> |