En este artículo, vamos a construir una aplicación web de tienda de comestibles usando PHP con MySQL. En esta aplicación podemos agregar artículos de abarrotes por su nombre, cantidad, estado (pendiente, comprado, no disponible) y fecha. Podemos ver, eliminar y actualizar esos elementos. Habrá una función de filtrado de fechas en la que podremos ver los artículos de comestibles según las fechas.
Prerrequisitos: servidor XAMPP , conceptos básicos de HTML , CSS , Bootstrap , PHP y MySQL
Seguiremos los siguientes pasos para construir esta aplicación.
Paso 1: Abra el Panel de control de XAMPP e inicie los servicios de Apache y MySQL. En la carpeta XAMPP, vaya a la carpeta htdocs y cree una carpeta llamada project1 . Mantendremos todos los archivos en la carpeta project1 . Dentro de esta carpeta, habrá cinco archivos ( add.php , connect.php , delete.php , index.php , update.php ) y una carpeta llamada css dentro de la cual estará un archivo llamado style.css .
Paso 2: Vaya a localhost/phpMyAdmin y cree una base de datos llamada Groovedb . Debajo de eso, haga una tabla llamada «comestiblestb» con 5 columnas. Las columnas son Id (clave principal), Item_name, Item_Quantity, Item_status y Date. El modo de incremento automático debe estar activado para la columna Id. Finalmente, la estructura de la tabla debe verse como se muestra en la imagen dada.
Paso 3: Abra el editor de su elección. Cree un archivo llamado connect.php y codifique las siguientes líneas.
connect.php
<?php
$con=mysqli_connect("localhost","root","","grocerydb");
if(!$con)
{
die("cannot connect to server");
}
?>
Esta página está hecha para conectar nuestra página PHP con la base de datos “grocerydb”. Después de conectarse con esta base de datos, el objeto de conexión se devuelve a la variable $con. Si no se establece la conexión, se mostrará el mensaje «no se puede conectar al servidor».
Paso 4: Cree otro archivo llamado add.php y codifique las siguientes líneas.
add.php
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8">
<title>Add List</title>
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<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>
Esta página está hecha para insertar los datos de los artículos de comestibles del formulario HTML en la tabla «grocerytb» en la base de datos «grocerydb». El formulario html contiene el nombre del artículo, la cantidad del artículo, el estado del artículo y los valores de fecha que debe ingresar el usuario. Hemos establecido el valor de la opción como 0, 1 y 2 para Pendiente, Comprado y No disponible (para el estado del artículo), respectivamente. Cuando se hace clic en un botón, incluimos el archivo “connect.php” para conectar la página con la base de datos. Luego, buscamos todos los datos ingresados por el usuario y los insertamos en la tabla «grocerytb». Si los valores se ingresan con éxito en la tabla, la página se moverá a «index.php», lo que permitirá al usuario ver los elementos ingresados hasta el momento (o los elementos que están en la tabla a partir de ahora). Cree un archivo «style.css» dentro de la carpeta css y codifique lo siguiente.
style.css
@import url(
'https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&display=swap');
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;
}
El archivo «add.php» debería verse como se muestra en la imagen dada.
Paso 5: Cree otro archivo llamado index.php y codifique las siguientes líneas.
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=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<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>
Nuevamente estamos incluyendo «connect.php» para conectar la página con la base de datos. Luego, estamos obteniendo todos los datos de la tabla usando una función llamada mysqli_fetch_array() y mostrándolos en la página. Para cada elemento, hay un enlace de eliminación y actualización. Usando el enlace Agregar artículo en la parte superior, la página se moverá nuevamente a «add.php» desde donde el usuario puede agregar nuevamente artículos comestibles a la base de datos. También estamos agregando una función de filtrado de fechas en esta página. Cuando un usuario ingresa una fecha y hace clic en el botón de filtro, todos los datos de los artículos de abarrotes se mostrarán de acuerdo con la fecha ingresada. Por ahora, nuestra tabla «grocerytb» se ve como se muestra en la imagen dada.
Después de pasar al archivo «index.php», la página se verá como se muestra en la imagen dada.
Después de ingresar una fecha 14/01/2021, la página se verá como se muestra en la imagen dada.
Paso 6: Cree otro archivo llamado update.php y codifique las siguientes líneas.
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=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<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>
En “index.php”, buscamos los Id de cada elemento. En “update.php”, el usuario puede editar cualquier dato. Para ese artículo, estamos obteniendo la identificación y los datos del artículo actualizado. Luego, estamos ejecutando una consulta de actualización a través de la cual los elementos se actualizan. Después de actualizar los elementos, la página se moverá a «index.php». Aquí, estamos actualizando el valor de Item_name llamado piña e Id que tiene 6. Estamos actualizando Item_Quantity de 1 a 2 y Item_status de Pendiente a No disponible. Después de eso, la página se verá como se muestra en la imagen dada.
Después de actualizar, index.php se verá así.
La tabla actualizada se verá así.
Paso 7: Cree otro archivo llamado delete.php y codifique las siguientes líneas.
delete.php
<?php
include("connect.php");
$id = $_GET['id'];
$q = "delete from grocerytb where Id = $id ";
mysqli_query($con,$q);
?>
En «index.php», buscamos los ID de cada elemento para que podamos eliminar cualquier dato. Para el elemento que se va a eliminar, buscamos la identificación en «delete.php». Luego, estamos ejecutando una consulta de eliminación a través de la cual se eliminará el registro del elemento seleccionado. Estamos eliminando el artículo que tiene Id 6 y Item_name como piña. Después de eliminarlo, la página se verá como se muestra en la imagen dada.
Y, la mesa se verá así.
Enlace del código fuente : https://github.com/anshu37/grocery-php-project
Publicación traducida automáticamente
Artículo escrito por anshu1997mishra y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA