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/

Eugenio Chaparro

Compartir
Publicado por
Eugenio Chaparro

Entradas recientes

Ejercicio.- Adivinar un numero random en kotlin (Curso de Kotlin desde cero [34])

Ejercicio.- Adivinar un numero random en kotlin (Curso de Kotlin desde cero [34])

En este tutorial vamos a hacer un programa que: Generamos un n煤mero aleatorio entre 1…

5 meses hace

Probar nuestra app web desde nuestra maquina local con ngrok en ubuntu 16.04 鈽侊笍

Alguna vez has querido mostrar tu aplicaci贸n web en un dominio/subdominio o compartir un archivo,esto…

3 a帽os hace

Mi primer app de shopify ?

RequerimientosRubyRubyGemsBundlerDescarga la aplicaci贸n de ejemplo1.- Ya que debemos correr la aplicaci贸n en una url con…

3 a帽os hace

Instalar un entorno gr谩fico (xfce) en un servidor ubuntu 16.04 ?

En ocasiones tenemos la necesidad de tener un entorno grafico en un servidor por diferentes…

3 a帽os hace

Certbot error certificer “Client with the currently selected authenticator does not support any combination…”

Ultimamnte me di cuenta que al intentar certificar mis dominios certbot envia este error:Client with…

3 a帽os hace
hackear wifi con kali linux ?

hackear wifi con kali linux ?

Hoy en d铆a tenemos la fortuna de tener muchas redes a nuestro alrededor, no necesariamente…

3 a帽os hace