Curso de PHP馃悩 y MySql馃惉 [46.- Colocar nuestros registros en cards de bootstrap ]

En este tutorial vamos a colocar nuestros registros de nuestra tabla de MySQL en los cards que nos proporciona bootstrap y ademas los aremos responsiver para monitores, tablets y mobil.

Para lograr esto tendremo que agregar columnas a nuestra tabla asi:
alter table add column imagen varchar (50);

Y actualizaremos regitros y agregaremos otros con esta consulta:

UPDATE autos SET imagen='model3.jpg' WHERE modelo='Model 3';
UPDATE autos SET imagen='modelY.jpg' WHERE modelo='Model Y';
UPDATE autos SET imagen='modelX.jpg' WHERE modelo='Model X';
INSERT INTO autos(marca, modelo, anio, imagen) VALUES ('Tesla','Model S',2020,'modelS.jpg');
INSERT INTO autos(marca, modelo, anio, imagen) VALUES ('Tesla','Roadster',2020,'roadster.jpg');
INSERT INTO autos(marca, modelo, anio, imagen) VALUES ('Tesla','CyberTruck',2020,'cybertruck.jpg');

Codigo: https://github.com/programadornovato/php/commit/84a9bbc9f59fb8890b683e831740e3a52a27c349

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

<head>
    <title>Tutorial Lista Autos</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">
</head>
<body>
    <div class="container mt-3">
        <div class="row">

            <?php
            include_once "db_empresa.php";
            $conexion = mysqli_connect($db_host, $db_user, $db_pass, $db_database);
            if ($conexion != true) {
                die("Error de conexion " . mysqli_connect_error());
            }
            $sql = "SELECT `marca`, `modelo`, `anio`, `imagen` FROM `autos`";
            $resultSet = mysqli_query($conexion, $sql);
            while ($row = mysqli_fetch_row($resultSet)) {
                ?>
                <div class="col-lg-4 col-md-6 col-sm-12">
                    <div class="card">
                        <img src="images/<?php echo $row[3]; ?>" class="card-img-top" alt="...">
                        <div class="card-body">
                            <h5 class="card-title"><?php echo $row[0] . " " . $row[1]; ?></h5>
                            <p class="card-text">
                                A帽o:<?php echo $row[2]; ?>
                            </p>
                            <a href="#" class="btn btn-primary">Go somewhere</a>
                        </div>
                    </div>
                </div>
            <?php
            }
            ?>
        </div>
    </div>
</body>

</html>

馃帵 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 *