Hola a todos, en este tutorial les enseñaremos como a crear un Formulario de actualización de productos usando PHP . Este es un sencillo tutorial, pero muy útil, en donde se actualiza los productos y la cantidad de cada dato del producto. Aquí está el script de muestra que te mostraré.
Antes de comenzar:
primero tiene que descargar e instalar XAMPP o cualquier servidor local que ejecute scripts PHP. Aquí está el enlace para el servidor XAMPP https://www.apachefriends.org/es/index.html
Una vez hayas instalado xampp, debes abrir el navegador web y colocar en la barra de direcciones así: http://localhost/phpmyadmin/, esto abrirá el gestor de bases de datos phpMyAdmin, ahora procede a crear una base de datos, para este ejemplo la hemos nombrado “test_updprod”
Una vez creada la base de datos debes dirigirte a la pestaña “Importar”, luego buscar el archivo “updateprod” que se encuentra dentro del directorio root de nuestro proyecto principal, luego procederemos con la importación de datos.
Creación de la conexión de la base de datos
Hemos nombrado al archivo que se encarga de conectar a la base de datos como: connection.php, simplemente copia y pega el código proporcionado a continuación.
<?php
$DB_HOST="localhost";
$DB_NAME= "test_updprod";
$DB_USER= "root";
$DB_PASS= "";
# conectare la base de datos
$con=@mysqli_connect($DB_HOST, $DB_USER, $DB_PASS, $DB_NAME);
if(!$con){
die("imposible conectarse: ".mysqli_error($con));
}
if (@mysqli_connect_errno()) {
die("Connect failed: ".mysqli_connect_errno()." : ". mysqli_connect_error());
}
?>
La interfaz principal
Aquí es donde se listan los datos previamente almacenados en la base de datos, simplemente copia y pega el código proporcionado a continuación. Nombraremos al archivo index.php
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Formulario para actualizar productos | Ejemplo</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="css/table.css" />
<link href="css/custom-theme/jquery-ui-1.10.0.custom.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="assets/css/bootstrap.min.css" type="text/css"/>
<link rel="stylesheet" type="text/css" href="media/css/demo_table.css" />
<script src="media/js/jquery.js" type="text/javascript"></script>
<script src="media/js/jquery.dataTables.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$('#dtable').dataTable();
})
</script>
</head>
<body>
<div id="container2">
<div class="form_head" align="center"><h1>LISTA DE PRODUCTOS</h1></div><br>
<div class="control-group">
<table name="booklist" id="dtable" width="900">
<thead>
<th>ID</th>
<th>Nombre del producto</th>
<th>Categoría del producto</th>
<th>Stock</th>
<th>Acciones</th>
</thead>
<tbody>
<?php
include "connection.php";
$q="select * from tblprod order by prod_id asc";
$result = mysqli_query($con,$q);
while($rs=mysqli_fetch_array($result)){
$prid=$rs['prod_id'];
$prname=$rs['prod_name'];
$categ=$rs['prod_ctry'];
$qty=$rs['prod_qty'];
echo "<tr class='tb1'>";
echo "<td>".$prid."</td>";
echo "<td>".$prname."</td>";
echo "<td>".$categ."</td>";
echo "<td>".$qty."</td>";
echo "<td> <a href='edit.php?id=$prid' id='popedit'>Editar</a></td>";
echo "</tr>";
}
?>
<tbody>
</table>
</div>
</div>
</body>
</html>
Formulario para actualizar los productos
Para actualizar un registro, solamente debes pulsar sobre el botón llamado editar que se despliega en el archivo creado anteriormente, nos llevara al archivo llamado «edit.php», el código es mostrado a continuación
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Formulario para actualizar productos | Ejemplo</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" href="assets/css/bootstrap.min.css" type="text/css"/>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery-ui-1.9.2.custom.min.js"></script>
<script src="js/myjquery.js"></script>
</head>
<body>
<?php
include "connection.php";
$prid=$_GET['id'];
$q = "select * from tblprod where prod_id='$prid'";
$result=mysqli_query($con,$q);
while($rs=mysqli_fetch_array($result)){
$prid=$rs['prod_id'];
$prtitle=$rs['prod_name'];
$prctry=$rs['prod_ctry'];
$prqty=$rs['prod_qty'];
}
$fctgry="select * from category";
$result=mysqli_query($con,$fctgry);
?>
<div id="container">
<div class="form_head" align="center">Actualizar producto</div><br>
<form method="post" action="process.php">
<label class="control-label">ID :</label>
<div class="controls">
<input type="text" name="eprodid" placeholder="Product ID" id="eprodid" value="<?php echo $prid;?>"/>
</div>
<label class="control-label">Nombre del producto :</label>
<div class="controls">
<input type="text" name="eprodname" placeholder="Product Title" id="eprodname" value="<?php echo $prtitle;?>"/>
</div>
<label class="control-label">Categoría :</label>
<div class="controls">
<select name="ecategory" id="ecategory">
<option><?php echo $prctry; ?></option>
<?php
while($rs=mysqli_fetch_array($result)){
$categ=$rs['category'];
echo "<option>".$categ."</option>";
}
?>
</select>
</div>
<label class="control-label">Stock :</label>
<div class="controls">
<input type="text" name="equantity" placeholder="Number of Products to add" id="equantity" value="<?php echo $prqty; ?>"/>
</div>
<div class="controls">
<button id="btn" class="btn btn-primary">Actualizar</button>
</div>
</form>
</div><br /><br /><br />
</body>
</html>
El script de actualización
El archivo process.php, es el encargado de actualizar los registros con los datos que se reciben desde el formulario edit.php. El código es mostrado a continuación.
<!DOCTYPE html>
<html>
<head>
<title>Formulario para actualizar productos | Ejemplo</title>
</head>
<style type="text/css">
body{
background:#3B5998;
}
</style>
<body>
<?php
include 'connection.php';
function edit_product($id,$prid,$prname,$prctry,$prqty){
global $con;
$q="update tblprod set prod_id='$prid', prod_name='$prname',prod_ctry='$prctry',prod_qty='$prqty' where prod_id='$prid'";
if(mysqli_query($con,$q)){
echo "<script language='javascript'>
alert('PRODUCTO ACTUALIZADO SATISFACTORIAMENTE');
window.location = 'index.php';
</script>";
}
else{
echo "<script language='javascript'>
alert('Error no se pudo actualizar');
window.location = 'edit.php';
</script>";
}
}
if(isset($_POST['eprodid'],$_POST['eprodname'],$_POST['ecategory'],$_POST['equantity'])){
$prid=$_POST['eprodid'];
$prname=$_POST['eprodname'];
$prctry=$_POST['ecategory'];
$prqty=$_POST['equantity'];
edit_product('',$prid,$prname,$prctry,$prqty);
}
?>
</body>
</html>
Cabe mencionar que para el desarrollo de este tutorial también se ha hecho uso del plugins datatables de jQuery, ademas hemos hecho uso de Framework CSS Bootstrap. Todos los archivos fuentes utilizados en este tutorial los podrás descargar a continuación.
DESCARGARA ARCHIVOS
