martes, 29 de noviembre de 2016

Mostrar datos y filtrarlos (Recargando página)

En este caso, mostraremos la información que hay en una base de datos, pero además filtraremos esta información, recargando la página, mas adelante veremos un ejemplo de como hacerlo sin recargar la página, es decir, utilizando ajax.

Para ver como mostrar la información desde una base de datos vea el ejemplo: "Como generar tabla dinámicamente con la base de datos"


 Ahora, vamos a dar la opción de mostrar usuarios casados o solteros.

Para esto, tenemos que poner en option->value, el nombre como aparece en la base de datos

Para ver funcionando este código acceda aquí

<?php 
include("config.php");
?>  


<h3>Filtrar por estado civil</h3>

<form method="get" action="">
    <select name="filtro">
        <option value="Casado">Casado</option>
        <option value="Soltero">Soltero</option>
    </select>
    
    <input type="submit" name="filtrar" value="Filtrar">
</form>




<table border="1">
    <tr>
        <td>Id Usuario</td>
        <td>Nombre y Apellido</td>
        <td>Edad</td>
        <td>Estado Civil</td>
    </tr>
    <?php
    if(isset($_GET['filtro']))
    {
        $sql = "SELECT * FROM usuarios where estado_civil = '".$_GET['filtro']."'";
    }
    else
    {
        $sql = $link, "SELECT * FROM usuarios";
    }
    $resul = mysqli_query($link, $sql);
    if(mysqli_num_rows($resul) > 0)
    {
        
        while($row = mysqli_fetch_array($resul))
        {
            echo "<tr>";
            echo "<td>".$row['id_usuario']."</td>";
            echo "<td>".$row['nombre']."</td>";
            echo "<td>".$row['edad']."</td>";
            echo "<td>".$row['estado_civil']."</td>";
            echo "</tr>";
        }
    } ?>
</table>


Si queremos que el "select box" se genere automáticamente desde la base de datos, valla a "Generar select box dinámico desde la base de datos"

Mostrar datos y filtrarlos (Sin recargar página)

En una entrada anterior, les mostré como filtrar una tabla que viene desde una base de datos, recargando la página.

Esto es mas sencillo de realizar pero puede ser incómodo sobre todo si hay muchos registros.

Ahora les mostraré como lo hago yo para filtrar entradas de la tabla, sin recargar página, usando ajax.

Para el caso ejemplo usaremos la siguiente base de datos:
nombre: usuarios


Primero, asignaré un id único a cada fila (<tr>) de la tabla, en este caso el id de la fila será el mismo que el id de usuario mas la palabra "tr_". 

Ya no es necesario abrir un tag <form> ya que le daremos al select box un id, así podemos acceder a su valor desde una función javascript usando jquery, la notación es: $("#id_objeto").val().

Luego, enviaremos con ajax, este valor a un archivo php que procesara el filtro y me enviará de vuelta los "id" de los registros que cumple con el filtro y mostraremos solo estos, y ocultaremos los que no cumplen.

Para que jQuery funcione en nuestra web, necesitamos incluir la librería, esto se hace con la siguiente linea:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Para hacer todo esto necesitamos 2 archivos, el que envía y muestra los datos y el que recibe y procesa por detrás.

El que envía y muestra los datos queda:


<?php 
include("config.php");
?>  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<h3>Filtrar por estado civil</h3>


    <select id="filtro">
        <option value="Casado">Casado</option>
        <option value="Soltero">Soltero</option>
    </select>
    <br><br>
    <input type="button" onclick="filtrar()" name="filtrar" value="Filtrar">




<br><br>
<table border="1">
    <tr>
        <td>Id Usuario</td>
        <td>Nombre y Apellido</td>
        <td>Edad</td>
        <td>Estado Civil</td>
    </tr>
    <?php
    $sql = mysqli_query($link, "SELECT * FROM usuarios");
    
    if(mysqli_num_rows($sql) > 0)
    {
        
        while($row = mysqli_fetch_array($sql))
        {
            echo "<tr id='tr_".$row['id_usuario']."'>";
            echo "<td>".$row['id_usuario']."</td>";
            echo "<td>".$row['nombre']."</td>";
            echo "<td>".$row['edad']."</td>";
            echo "<td>".$row['estado_civil']."</td>";
            echo "</tr>";
        }
    } ?>
</table>

<script>

function filtrar()
{
    //de esta forma se accede a un valor con jquery, en donde "filtro" es el id del input
    var filtro = $("#filtro").val();
    $.post(
        "filtrar.php",
        {
            fil: filtro
        },
        function(data, status)
        {
            if(status=='success')
            {
                console.log(data);
                var response = JSON.parse(data);
                if(response.mostrar.length != 0)
                {
                    
                    for(var y = 0; y < response.mostrar.length; y++)
                    {
                        $("#tr_"+response.mostrar[y]).slideDown();
                        $("#tr_"+response.ocultar[y]).slideUp();
                    }
                }
                else
                {
                    alert("No hay usuarios con ese filtro");
                }
            }
        }
    );
}

</script>


El archivo "filtrar.php" que es quien recibe el filtro y procesa la consulta queda:


<?php
include("config.php");

$filtro = $_POST['fil'];

$mostrar = array();
$ocultar = array();

$sql = mysqli_query($link, "select * from usuarios");
if( mysqli_num_rows($sql) > 0 )
{
    while( $row = mysqli_fetch_array($sql) )
    {
        
        if( $row['estado_civil'] == $filtro )
        {
            
            array_push( $mostrar, $row['id_usuario'] );
        }
        else
        {
            array_push( $ocultar, $row['id_usuario'] );
        }
    }
    $json = array("mostrar" => $mostrar, "ocultar" => $ocultar);
}
else
{
    $mostrar = "";
    $ocultar = "";
    $json = array("mostrar" => $mostrar, "ocultar" => $ocultar );
}
echo json_encode($json);

Para ver funcionando este código accede aquí


Gracias por leer ^^


Generar select box dinámico desde la base de datos

A veces necesitamos que los select box de un formulario se generen según lo que hay en la base de datos.

En este ejemplo veremos como hacer esto:

Imaginemos que queremos hacer un formulario donde se deba escoger un item desde una lista de Sucursales que tenemos de una tienda.

Para este ejemplo usaremos la siguiente base de datos con nombre: sucursales


El código para esto será:


<?php 
include("config.php");

$sql = mysqli_query($link, "select * from sucursales");

?>
<form name="elegir_sucursal" action="">
  <select name="sucursal">
        <?php
    while($row = mysqli_fetch_array($sql))
    { ?>
    <option value="<?=$row['id_sucursal']?>"> <?=$row['nombre_sucursal']?> </option>
    <?php } ?>
  </select>
</form>


Es  importante notar que podemos invocar código php entre medio de código html, y que también puedo usar la notación "<?=   ?>" para poner variables de php en tags html.

También es importante destacar que en el option-> value siempre debe ir el id único del objeto en la base de datos.

Siempre hay que recordar abrir y cerrar las secciones PHP que estarán embebidas dentro del código HTML, por ejemplo para cerrar la llave } se debe escribir <?php } ?>

Para ver este código funcionando ingresa aquí

Como conectarse con una base de datos

En este caso yo uso $mysqli_query y no $mysql_query, por lo tanto mostraré como se hace para usarlo con $mysqli



<?php

$dbhost = 'localhost';
$dbuser = 'arcanita';
$dbpass = 'clave';
$db = 'arcanita_bddprueba';


$link = mysqli_connect($dbhost,$dbuser,$dbpass,$db) or die("Error " . mysqli_error($link)); 

if (mysqli_connect_errno()) {
    printf("Falló la conexión: %s\n", mysqli_connect_error());
    exit();
}


Yo aconsejo poner esta configuración en un archivo .php y despues incluir este archivo en los demas lugares donde usaremos la base de datos.
Por ejemplo si el archivo de configuración se llama config.php, se debe incluir en los demas archvos de la siguiente forma
<?php
include("config.php");
?>

Esto lo hago así por que, si cambia la clave de la base de datos y tenemos la información de conexión en cada una de las páginas donde la usamos, tendremos que entrar a todas a cambiar la clave.

Gracias por leer ^^

lunes, 28 de noviembre de 2016

Generar tabla dinámicamente con la base de datos

A veces necesitamos mostrar el contenido de una base de datos en un sitio web, en este artículo aprenderemos a hacer esto.

Para este objetivo creare una tabla imaginaria (ustedes deben usar sus propios datos)

Nombre tabla: usuarios



Así quedará nuestro código (explicaciones van como comentarios en el mismo código)
<!--Primero hacemos la cabecera de la tabla-->
<table>
    <tr>
        <td>Id Usuario</td>
        <td>Nombre y Apellido</td>
        <td>Edad</td>
        <td>Estado Civil</td>
    </tr>
    <!--Incluímos código PHP dentro de HTML usando <?php ?> -->
    <?php
    //usaremos mysqli_query porque mysql_query esta por quedar obsoleto
    $sql = mysqli_query($link, "SELECT * FROM usuarios");
    //comprobamos que existan registros en la tabla
    if(mysqli_num_rows($sql) > 0)
    {
        //Metemos los registros en un arreglo llamado $row
        while($row = mysqli_fetch_array($sql))
        {
            echo "<tr>";
            echo "<td>".$row['id_usuario']."</td>";
            echo "<td>".$row['nombre']."</td>";
            echo "<td>".$row['edad']."</td>";
            echo "<td>".$row['estado_civil']."</td>";
            echo "</tr>";
        }
    } ?>
</table>


En el caso ejemplo falta la conexión a la base de datos, que puedes ver aquí como hacerlo. Para ver funcionando este ejemplo haz click aquí