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/
