php46

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/

Ads Blocker Image Powered by Code Help Pro

Ads Blocker Detected!!!

En Programador Novato vivimos de los anuncios, hemos detectado que está utilizando extensiones para bloquear anuncios. Ayudanos deshabilitando tu bloqueador de anuncios. :)