Curso de PHP馃悩 y MySql馃惉 [45.- Colocar nuestros registros en una tabla de bootstrap ]

En este tutorial vamos a colocar nuestros registros de nuestra tabla de MySQL en una bonita tabla de bootstrap y ademas le agregaremos funciones de paginacion, busqueda y ordenacion de datos.

Ademas centraremos nuestras conexiones a la base de datos para todos los archivos de PHP que se conectan a la base de datos esten sincronizados.

Codigo: https://github.com/programadornovato/php/commit/e510555e71fe086cf9ab916bab5a627096baa097

<!doctype html>
<html lang="en">

<head>
    <title>Tutorial Mysql</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
    <script>
        $(document).ready(function() {
            $('#tablaAutos').DataTable();
        });
    </script>
</head>

<body>
    <?php
    ini_set("display_errors", 1);
    ini_set("display_startup_errors", 1);
    include_once "db_empresa.php";
    $conexion = mysqli_connect($db_host, $db_user, $db_pass, $db_database);
    if ($conexion == false) {
        die("Error de conexion a Mysql con el codigo: " . mysqli_connect_errno() .
            "<br>" . mysqli_connect_error());
    }
    $sql = "SELECT `marca`, `modelo`, `anio` FROM `autos`";
    $resultSet = mysqli_query($conexion, $sql);
    ?>
    <div class="container mt-5">
        <div class="row">
            <div class="col-12">
                <table class="table table-striped" id="tablaAutos">
                    <thead>
                        <tr>
                            <th scope="col">#</th>
                            <th scope="col">Marca</th>
                            <th scope="col">Model</th>
                            <th scope="col">A帽o</th>
                        </tr>
                    </thead>
                    <tbody>

                        <?php
                        $contador = 1;
                        while ($row = mysqli_fetch_row($resultSet)) {
                            ?>
                            <tr>
                                <th scope="row"><?php echo $contador; ?></th>
                                <td><?php echo $row[0]; ?></td>
                                <td><?php echo $row[1]; ?></td>
                                <td><?php echo $row[2]; ?></td>
                            </tr>
                        <?php
                            $contador++;
                        }
                        mysqli_close($conexion);
                        ?>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</body>

</html>

馃敆Jquery CDN: https://cdnjs.com/libraries/jquery/3.1.0
馃敆Tablas de bootstrap: https://getbootstrap.com/docs/4.4/content/tables/
馃敆Datatables instalacion: https://datatables.net/manual/installation
馃帵Sqlmap en Kali Linux: https://youtu.be/TRR5TWr-HFI
馃帵Mysql configurar una replicaci贸n maestro – esclavo 馃惉: https://www.youtube.com/watch?v=RY-EdBOJWEs

馃帵 Esta lista de reproducci贸n: https://www.youtube.com/playlist?list=PLCTD_CpMeEKS2Dvb-WNrAuDAXObB8GzJ0

Codigos en gdrive: https://drive.google.com/file/d/1tQwYvfL2jiUFc6beTWkOkGmXkq5zzFw2/view?usp=sharing
Gracias por apoyar este canal: https://www.patreon.com/programadornovato?fan_landing=true

馃敆 Facebook: https://facebook.com/ProgramadorNovatoOficial
馃敆 Twitter: https://twitter.com/programadornova
馃敆 Linkedin: https://www.linkedin.com/in/programadornovato/
馃敆 Instagram: https://www.instagram.com/programadornovato/

Deja un comentario

Tu direcci贸n de correo electr贸nico no ser谩 publicada. Los campos obligatorios est谩n marcados con *