Tabla Dinamica - PHP

UNIVERSIDAD TÉCNICA DE AMBATO
FACULTAD DE INGENIERÍA EN SISTEMAS, ELECTRÓNICA E INDUSTRIAL

CARRERA DE TELECOMUNICACIONES- Modulo: Comunicaciones Avanzadas
Docente: Ing Santiago Manzano
TABLA DINAMICA PHP
TABLA DINAMICA
1.- Para poder mostrar la información de nuestros datos desde la base de datos, crearemos un
archivo llamado tabla.php
2.- En nuestro archivo class.mysql.inc.php agregaremos la siguiente función para poder llamarla a
tabla con la sentencia de Mysql.
1. function listar1()
2. {
3. $bd = new class_mysql();
4. $sql = "SELECT * FROM datos";
5. return $bd->query( $sql );
6. }
3.- Para mostrar la información en una pagina utilizaremos tablas, el código que se utilizara es
básico para mostrar la información, además vamos a agregar botones, de modificar y Eliminar, y al
final un botón de Agregar nuevo, para insertar más valores, el código de tabla.php es:
1. <?php
2. include_once( $_SERVER['DOCUMENT_ROOT']."/config.inc.php" );
3. include_once(DIR_INC . "class.mysql.inc.php");
5. $respuesta=$bd->listar1();
6. ?>
7.
8. <h2>Tabla de Datos</h2>
9. <table border="1">
10. <tr>
11. <td>
12. Temperatura
13. </td>
14. <td>
15. Humedad
16. </td>
17. <td>
18. Distancia
19. </td>
20. </tr>
21. <?php
22. while($fila=mysqli_fetch_assoc($respuesta)){
23. echo "<tr>";
24. echo "<td>"; echo $fila['temperatura']; echo "</td>";
25. echo "<td>"; echo $fila['humedad']; echo "</td>";
26. echo "<td>"; echo $fila['distancia']; echo "<td>";
27. echo "<td> <a href='modificar.php?id=".$fila['id']."'><button type='button' class='btn bt
n-success'>Modificar</button> </a> </td>";
28. echo "<td> <a href='eliminar.php?id=".$fila['id']."''><button type='button' class='btn bt
n-danger'>Eliminar</button></a> </td>";
29. echo "</tr>";
30. } ?>
31. </table>
32.
33. <a href='formulario.html'><button type='button' class='btn btn-
success'>Agregar nuevo</button> </a>
Analizamos el código:
La línea 4 y 5 nos permitirá guardar las variables que tendremos de consultar cuando
llamemos al archivo class.mysql.inc.php, $respuesta, tomará todos los valores.
En la línea 22, $fila=mysqli_fetch_assoc($respuesta) permite recuperar una fila de resultado

como una matriz asociativa, por lo tanto, se encuentra en un while para que nos devuelva
todos los valores encontrados en la base de datos, con esto el while se detendrá cuando
termine de revisar todas las filas.
La línea 24,25 y 26 nos permite especificar que datos de la base de datos estamos recogiendo
para que pueda imprimir dentro de la tabla.
En la línea 27 y 28 tendremos el siguiente código para agregar botones dentro de la fila

correspondiente:
1. echo "<td> <a href='modificar.php?id=".$fila['id']."'><button type='button' class='btn btn-
success'>Modificar</button> </a> </td>";
2. echo "<td> <a href='eliminar.php?id=".$fila['id']."''><button type='button' class='btn btn-
danger'>Eliminar</button></a> </td>";
Cuando agregamos la etiqueta “a” para agregamos un enlace, agregaremos el archivo

modificar.php que lo crearemos posteriormente, aquí para poder especificar cual fila estemos
seleccionando, lo haremos a través del método GET escribiendo en el URL
<a href='modificar.php?id=".$fila['id']."'>, de esta manera se dirigirá al archivo y además enviara
el id único que tiene esa fila para modificarlo en la base de datos.
La línea 28 cumple con la misma función, pero en este caso con el archivo, eliminar.}
La línea 33 es un botón que nos regresara al formulario para agregar nuevos datos
Antes de programar estos dos documentos de modificar y eliminar, vamos a verificar que se
muestren los datos en las tablas.
4.- Enviaremos los datos a nuestro servidor:
5.- Si todo se realizó sin ningún error podremos ingresar a la pagina

http://www.avanzadaslemajohn3.com/tabla.php y se mostrara los datos de la tabla:
NOTA: Asegurarse que guardamos los archivos y que se suban de forma correcta y todos los
archivos necesarios, los errores suelen ocurrir cuando no subimos al servidor algún archivo
modificado, o muchas veces por errores de Syntaxis, además de siempre verificar dentro de
nuestro servidor los archivos.
6.- Si le damos clic en modificar o en eliminar podremos observar que nos enviara el siguiente
enlance:
Ya que el archivo no existe, pero podemos verificar en el id que el valor se está enviando.
7.- Crearemos el archivo modificar.php

8.- Dentro de class.mysql.inc.php agregaremos una nueva función
1. function listar($a)
2. {
4. $sql = "SELECT * FROM datos WHERE id='".$a."' ";
6. }
Seleccionaremos los datos de un id especifico que será llamado del botón modificar, en la
línea 1 podemos ver el dato que será recibido en la función cuando esta es llamada y luego
enviada a id para la sintaxis de Mysql.
9.- Ahora ingresaremos a modificar.php , el código que tendremos aquí es:
1. <?php
2. include_once( $_SERVER['DOCUMENT_ROOT'] . "/config.inc.php" );
4. $id=$_GET['id'];
6. $respuesta=$bd->listar($_GET['id']);
7. $fila=mysqli_fetch_assoc($respuesta);
8. ?>
9. <form action="modificar2.php" method="GET">
10. <table class="tabla">
11. <tr>
12. <td>ID</td>
13. <td><Input type="text" name="id" id="id" value="<?php echo $fila['id'] ?>"></
Input></td>
14. </tr>
15. <tr>
16. <td>Temperatura</td>
17. <td><Input type="text" name="temp" id="temp" value="<?php echo $fila['temper
atura'] ?>"></Input></td>
18. </tr>
19. <tr>
20. <td>Humedad</td>
21. <td><Input type="text" name="hum" id="hum" value="<?php echo $fila['distancia
'] ?>" ></Input></td>
22. </tr>
23. <tr>
24. <td>Distancia</td>
25. <td><Input type="text" name="dis" id="dis" value="<?php echo $fila['hume

dad'] ?>"></Input></td>
26. </tr>
27. <tr>
28. <td><button type="submit">Enviar y Guardar</button></td>
29. <td> <a href='tabla.php'><button type='button'>Salir</button></a> </td>
30. </tr>
31.
32. </table>
33.
34. </form>
Analizando el código tenemos que :
1. <?php
4. $id=$_GET['id'];
6. $respuesta=$bd->listar($_GET['id']);
7. $fila=mysqli_fetch_assoc($respuesta);
8. ?>
$id=$_GET['id'] Guardara el valor id enviado al hacer clic en el botón modificar.

$respuesta=$bd->listar($_GET['id'] Enviamos la variable id a la función para tomar los datos.
$fila=mysqli_fetch_assoc($respuesta) Recibimos los datos al hacer la consulta.
10.- Dentro del formulario creado agregaremos los siguientes atributos:

<form action="modificar2.php" method="GET">, modificar2.php ser una archivo que crearemos para
editar los datos, el método de obtención ser GET. Dentro de cada Input de la tabla creada:
<td><Input type="text" name="id" id="id" value="<?php echo $fila['id'] ?>"></Input></td> , en el
atributo value agregaremos el dato con el nombre de la columna correspondiente, tendremos lo
misma sintaxis para temperatura, distancia y humedad.
11.- Agregaremos los botones de Enviar y Guardar (que se dirigirá a modificar2.php) y el de Salir
que se dirección al archivo tabla.php.
<td><button type="submit">Enviar y Guardar</button></td>

<td> <a href='tabla.php'><button type='button'>Salir</button></a> </td>
12.- Guardaremos los archivos class.mysql.inc.php y modificar.php, subiremos los archivos al

servidor para verificar que están llegando correctamente.
13.- Verificamos aparte de tabla.php y daremos clic en modificar.

Como podemos observar los datos llegan de forma correcta
14.- Crearemos el archivo modificar2.php dentro de la carpeta, donde direccionaremos el botón

de Enviar y Guardar:
15.- Dentro de class.mysql.inc.php agregaremos una nueva función:
1. function cambiar($a,$b,$c,$d){
3. $sql = "UPDATE datos SET temperatura='".$a."', humedad='".$b."', distancia='".$c."' WHERE id
='".$d."' ";
5. }
Dentro de la sentencia sql enviaremos los datos con el id que tenemos en los inputs, los datos que
se encuentran en function cambiar($a,$b,$c,$d), serán los datos obtenido en GET de
modificar2.php.
Dentro de la variable $sql tendremos la sentencia de cambiar los datos con UPDATE (consultar
sentenicas Mysql), guardamos el archivo class.mysql.inc.php
16.- El código de modificar2.php:
1. <?php
5. $respuesta=$bd->cambiar($_GET['temp'], $_GET['hum'], $_GET['dis'], $_GET['id']);
6. ?>
7. <script type="text/javascript">
8. alert("datos enviados");
9. window.location.href='tabla.php';
10. </script>
En la línea 7 agregamos un Script que nos envia un mensaje de que los datos fueron enviados y
nos redirigirá al archivo tabla.php.
17.- Guardamos los archivos y los enviamos al servidor, verificando que todo se haya hecho
correctamente.
18.- Ingresaremos a “http://www.avanzadaslemajohn3.com/tabla.php” y modificaremos un

valore que tengamos:
19.- En esta pagina editaremos los valores y le daremos clic en enviar y guardar.
20.- Si todo se encuentra bien elaborado, vamos a tener la siguiente salida, y luego nos
retornara a la página tabla.php.
Con esto podremos modificar los datos de la tabla y por lo tanto los datos de la base de datos
21.- Creamos el archivo eliminar.php

22.- Dentro de class.mysql.inc.php agregaremos una nueva función:
1. function eliminar($d){
3. $sql = "DELETE FROM datos WHERE id='".$d."' ";
5. }
En este código recogeremos el valor de ID de la fila seleccionada y eliminaremos con la sentencia

en $sql = "DELETE FROM datos WHERE id='".$d."' ";
23.- Regresaremos al archivo eliminar.php y el código que colocaremos es:
1. <?php
4. $id=$_GET['id'];
6. $respuesta=$bd->eliminar($_GET['id'])
7. ?>
8. <script type="text/javascript">
9. alert("Datos eliminados correctamente");
10. window.location.href='index.php';
11. </script>
Al haber elaborado ya diferentes funciones, podremos darnos cuenta de lo que hace el código,
y al final un Script que nos verificara que el archivo ha sido eliminado correctamente:
24.- Guardamos y subimos todos los archivos al servidor:

25.- Ingresaremos a “http://www.avanzadaslemajohn3.com/tabla.php” y eliminaremos una

fila:
26.- Se nos enviara a la pagina tabla.php y podremos observar que los datos fueron eliminados
correctamente ya que ahora solo tendremos 3 filas:
De esta manera hemos creado una tabla dinámica donde podemos ingresar valores, editarlos
y eliminarlos, con una conexión en la base de datos:
NOTA: El diseño de las tablas y de los formularios lo puedes hacer media Bootstrap.

Tabla Dinamica - PHP

Cargado por

Información del documento

Título original

Derechos de autor

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Tabla Dinamica - PHP

Título original:

Cargado por

Copyright:

UNIVERSIDAD TÉCNICA DE AMBATO

FACULTAD DE INGENIERÍA EN SISTEMAS, ELECTRÓNICA E INDUSTRIAL

TABLA DINAMICA PHP

En la línea 22, $fila=mysqli_fetch_assoc($respuesta) permite recuperar una fila de resultado

En la línea 27 y 28 tendremos el siguiente código para agregar botones dentro de la fila

1. echo "<td> <a href='modificar.php?id=".$fila['id']."'><button type='button' class='btn btn-

success'>Modificar</button> </a> </td>";

2. echo "<td> <a href='eliminar.php?id=".$fila['id']."''><button type='button' class='btn btn-

Cuando agregamos la etiqueta “a” para agregamos un enlace, agregaremos el archivo

el id único que tiene esa fila para modificarlo en la base de datos.

4.- Enviaremos los datos a nuestro servidor:

5.- Si todo se realizó sin ningún error podremos ingresar a la pagina

7.- Crearemos el archivo modificar.php

8.- Dentro de class.mysql.inc.php agregaremos una nueva función

9.- Ahora ingresaremos a modificar.php , el código que tendremos aquí es:

25. <td><Input type="text" name="dis" id="dis" value="<?php echo $fila['hume

Analizando el código tenemos que :

$id=$_GET['id'] Guardara el valor id enviado al hacer clic en el botón modificar.

10.- Dentro del formulario creado agregaremos los siguientes atributos:

<td><button type="submit">Enviar y Guardar</button></td>

12.- Guardaremos los archivos class.mysql.inc.php y modificar.php, subiremos los archivos al

13.- Verificamos aparte de tabla.php y daremos clic en modificar.

Como podemos observar los datos llegan de forma correcta

14.- Crearemos el archivo modificar2.php dentro de la carpeta, donde direccionaremos el botón

15.- Dentro de class.mysql.inc.php agregaremos una nueva función:

16.- El código de modificar2.php:

18.- Ingresaremos a “http://www.avanzadaslemajohn3.com/tabla.php” y modificaremos un

21.- Creamos el archivo eliminar.php

22.- Dentro de class.mysql.inc.php agregaremos una nueva función:

En este código recogeremos el valor de ID de la fila seleccionada y eliminaremos con la sentencia

23.- Regresaremos al archivo eliminar.php y el código que colocaremos es:

24.- Guardamos y subimos todos los archivos al servidor:

25.- Ingresaremos a “http://www.avanzadaslemajohn3.com/tabla.php” y eliminaremos una

También podría gustarte