En muchos escenarios, es posible que necesitemos crear una entrada desplegable que pueda mostrar todas las opciones de acuerdo con el estado actual de la base de datos. Esta forma de entrada se usa muchas veces en la vida real y los siguientes ejemplos pueden ayudar a entender lo mismo.
- Un conjunto de estudiantes que tienen números de registro únicos.
- Un conjunto de nombres de sucursales y sus ID de sucursales.
- Una lista de categorías a las que debe pertenecer un producto en particular.
En este artículo, crearemos un menú desplegable con una lista de categorías a las que debe pertenecer un producto en particular.
Enfoque: en cada uno de estos ejemplos, si usamos un menú desplegable que obtiene datos de la base de datos, el usuario podrá ingresar datos con mayor precisión y la interfaz de usuario será más fácil de usar.
Necesitamos lo siguiente
- Una base de datos con una tabla de categorías y otra tabla de productos con clave foránea al ID de la categoría a la que pertenece el producto en particular.
- Formulario HTML que acepta los datos.
Pasos:
Creación de base de datos:
- Encienda Apache y MySQL desde el panel de control de XAMPP.
Haga clic en los botones «Inicio»
- Cree una base de datos «example_store» haciendo clic en el botón nuevo .
Haga clic en el botón «nuevo» para crear una nueva base de datos
- Introduzca el nombre de la base de datos y haga clic en «Crear».
Cree una nueva base de datos con el nombre «example_store»
- Haga clic en la pestaña SQL y pegue el siguiente código y haga clic en «IR».
Para ejecutar SQL y preparar la base de datos
consultas mysql:
-- Table structure for table `category` CREATE TABLE `category` ( `Category_ID` int(11) NOT NULL, `Category_Name` varchar(255) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; -- Dumping data for table `category` INSERT INTO `category` (`Category_ID`, `Category_Name`) VALUES (1, 'Category A '), (2, 'Category B'); -- Table structure for table `product` CREATE TABLE `product` ( `Product_ID` int(11) NOT NULL, `product_name` varchar(255) NOT NULL, `category_id` int(11) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; -- Dumping data for table `product` INSERT INTO `product` (`Product_ID`, `product_name`, `category_id`) VALUES (1, 'Product A1', 1), (2, 'Product A2', 1), (3, 'Product B1', 2); -- Primary Key Constraints ALTER TABLE `category` ADD PRIMARY KEY (`Category_ID`); ALTER TABLE `product` ADD PRIMARY KEY (`Product_ID`), ADD KEY `Category_constraint` (`category_id`); -- AUTO_INCREMENT for table `category` ALTER TABLE `category` MODIFY `Category_ID` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=3; -- AUTO_INCREMENT for table `product` ALTER TABLE `product` MODIFY `Product_ID` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4; -- Foreign Key Constraints ALTER TABLE `product` ADD CONSTRAINT `Category_constraint` FOREIGN KEY (`category_id`) REFERENCES `category` (`Category_ID`) ON DELETE CASCADE ON UPDATE CASCADE;
Ejemplo: creamos un archivo PHP en una carpeta llamada «example_store» en htdocs y creamos la siguiente página web form.php a la que se puede acceder en un navegador en «localhost/example_store/form.php».
PHP
<?php
// Connect to database
$con = mysqli_connect("localhost","root","","example_store");
// mysqli_connect("servername","username","password","database_name")
// Get all the categories from category table
$sql = "SELECT * FROM `category`";
$all_categories = mysqli_query($con,$sql);
// The following code checks if the submit button is clicked
// and inserts the data in the database accordingly
if(isset($_POST['submit']))
{
// Store the Product name in a "name" variable
$name = mysqli_real_escape_string($con,$_POST['Product_name']);
// Store the Category ID in a "id" variable
$id = mysqli_real_escape_string($con,$_POST['Category']);
// Creating an insert query using SQL syntax and
// storing it in a variable.
$sql_insert =
"INSERT INTO `product`(`product_name`, `category_id`)
VALUES ('$name','$id')";
// The following code attempts to execute the SQL query
// if the query executes with no errors
// a javascript alert message is displayed
// which says the data is inserted successfully
if(mysqli_query($con,$sql_insert))
{
echo '<script>alert("Product added successfully")</script>';
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
</head>
<body>
<form method="POST">
<label>Name of Product:</label>
<input type="text" name="Product_name" required><br>
<label>Select a Category</label>
<select name="Category">
<?php
// use a while loop to fetch data
// from the $all_categories variable
// and individually display as an option
while ($category = mysqli_fetch_array(
$all_categories,MYSQLI_ASSOC)):;
?>
<option value="<?php echo $category["Category_ID"];
// The value we usually set is the primary key
?>">
<?php echo $category["Category_Name"];
// To show the category name to the user
?>
</option>
<?php
endwhile;
// While loop must be terminated
?>
</select>
<br>
<input type="submit" value="submit" name="submit">
</form>
<br>
</body>
</html>
Producción:
- Actualmente, el menú desplegable muestra solo la categoría A y la categoría B. Si agregamos algunas categorías más en la base de datos, las mostraremos en el menú desplegable. Después de insertar más valores en la categoría Tabla.
Al insertar la categoría C y la categoría D
- Al recargar la página web
REcargando la página web
- Inserción de un nuevo Producto : Podemos insertar un producto C1 de la siguiente manera.
Insertar un nuevo producto
- Recibimos un mensaje de alerta y el producto de la tabla se actualiza
Después de enviar el formulario
Publicación traducida automáticamente
Artículo escrito por arshdeepdgreat y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA