0

¡Hola! Vengo por aquí a preguntar cómo podría modificar una tabla HTML con PHP para que modificase la tabla de la base de datos.

De momento el código que tengo para mostrar la base de datos en una tabla es este, si se puede implementar en él sería genial.

La idea es que se pueda modificar la tabla dando sólo click en ella, sea editable, modificarlo y que se pueda mandar a la base de datos con un Update. Supongo que se debería hacer con JS o jQuery, pero no tengo mucha idea de mezclar jQuery con PHP.

<?php
    include("config.php");
    if(empty($_SESSION['user'])) 
    {
        header("Location: index.php");
        die("Redirecting to index.php"); 
    }

    $consulta = $_POST['buscador'];


?>
<!doctype html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <title>4tickets Soft</title>



    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <script src="assets/bootstrap.min.js"></script>
    <link href="assets/bootstrap.min.css" rel="stylesheet" media="screen">
    <style type="text/css">
        body { background: url(assets/bglight.png); }
        .hero-unit { background-color: #fff; }
        .center { display: block; margin: 0 auto; }
    </style>
</head>

<body>

<div class="navbar navbar-fixed-top navbar-inverse">
  <div class="navbar-inner">
    <div class="container">
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <a class="brand">4tickets Soft</a>
      <div class="nav-collapse">
        <ul class="nav pull-right">
          <li><a href="register.php">Registrar cliente</a></li>
          <li><a href="info.php">Info clientes</a></li>
          <li class="divider-vertical"></li>
          <li><a href="logout.php">Desconectarse</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

<div class="container hero-unit">
        <div id="buscador">
            <label>Usuario</label><form method="post" action="" name="formulario" onSubmit="return validarForm(this)">
                <input type="text" name="palabra" size="31" maxlength="255" value="" placeholder="Buscar usuario"/>
                <input type="submit" name="buscar" value="Buscar" />
            </form>
        </div>
        <div>
<?php
$con=mysqli_connect("localhost","root","root","4tickets");
// Chec k connection
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}

$result = mysqli_query($con,"SELECT username, email, entidad, nombre, apellidos, idioma, telefono, url_web, comentarios FROM users");

echo "<table border='1' width='100%'>";

$i = 0;
while($row = $result->fetch_assoc())
{
    if ($i == 0) {
      $i++;
      echo "<tr>";
      foreach ($row as $key => $value) {
        echo "<th>" . $key . "</th>";
      }
      echo "</tr>";
    }
    echo "<tr>";
    foreach ($row as $value) {
      echo "<td>" . $value . "</td>";
    }
    echo "</tr>";
}
echo "</table>";

mysqli_close($con);
?>


        </div>
  </div></p>
</div>

<script type="text/javascript">
    function validarForm(formulario) 
    {
        if(formulario.palabra.value.length==0) 
        { //¿Tiene 0 caracteres?
            formulario.palabra.focus();  // Damos el foco al control
            alert('Debes rellenar este campo'); //Mostramos el mensaje
            return false; 
         } //devolvemos el foco  
         return true; //Si ha llegado hasta aquí, es que todo es correcto 
     }   
</script>
</body>
<script>
$(document).ready(function(){

        $("#manuals").click(function(){
            $("#manualsDown").toggle();
        });
});
</script>
</html>

Agradezco la ayuda de antemano. John.

1 respuesta 1

1

Deberías ir aprendiendo JavaScript, no aprendas jQuery en primer orden, porque no entenderás del todo como funciona JavaScript.

Lo primero que debes tener es tu API en PHP que haga las operaciones en la base de datos. Por ejemplo, usando el ORM Doctrine:

product-api.php

function createProduct() {
    $product = new Product();
    $product->name = $_POST["name"];
    $product->price = $_POST["price"];
    $product->stock = $_ṔOST["stock"];
    $product->category = $_POST["category"];
    $em->persist($product);
    $em->flush(); // hacer los cambios inmediatamente
}

// update, delete, select

En el ejemplo anterior se hace una inserción de un nuevo producto. Aquí debes hacer los updates, deletes (soft o hard), etc.

Una vez que ya tienes tu API lista, lo que tienes que hacer es preparar tu código JavaScript para que se pueda comunicar con tu API. Por ejemplo, para actualizar un registro en una tabla.

Lo primero que debemos hacer es hacer las celdas editables. Esto se logra añadiendo el atributo contenteditable en las etiquetas <td>, además cada columna debe en la etiqueta su nombre:

<td contenteditable col="nom_prod"><?= $producto->name ?>

Lo segundo es identificar el evento en el que queremos que se guarden los cambios físicamente. En este caso, sería el blur.

[].forEach.call(dataCells, (cell) -> (
  cell.addEventListener('blur', updateProduct)
));

function updateProduct(e) {
  let target = e.target;
  let column = target.getAttribute('col');
  let content = target.textContent;
  let id = target.parentNode.firstChild.textContent;

  fetch(`/product-api.php?action=update&id=${id}`, {
    method: 'post',
    body: { column, content },
    'Content-Type': 'application/json'
  })
  .then(res => {
    // éxito
  })
  .catch(err => {
    // mostrar un error
  });

Lo primero que hacemos es obtener el elemento que desencadenó el evento blur. Luego, obtenemos el nombre de la columna, el contenido de la celda y el id de esa fila (por eso subimos un nivel con .parentNode para alcanzar el <tr) que viene a ser el del producto. Finalmente hacemos una petición AJAX, pasando como parámetro en la URL la acción y el ID del registro sobre el cual se ejecutará la acción, y como cuerpo, la columna y el nuevo valor.

En product-api.php podrías tener algo así:

$action = $_GET["action"];

switch($action) {
    case "update": updateProduct();
    ...
}

...

function updateProduct() {
    $id = $_GET["id"];
    $column = $_GET["column"];
    $newValue = $_GET["content];

    // consulta, con todas las codiciones
    $query = "UPDATE product SET {$column} = ? WHERE id = ?";
    // preparar la consulta y ejecutarla
}

Conclusión

Este es una manera, hay otras que puedes deducir por tu cuenta. Te recomiendo que cuando tengas suficiente experiencia en estos lenguajes, empieces a utilizar frameworks como Laravel y Angular, React o Vue que sin duda te facilitan el trabajo enormemente.

1
  • Muchísimas gracias, Mitsu! El lunes me pongo sin duda! el 17 sep. 2016 a las 9:10

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.