Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Estou desenvolvendo um código para imobiliária mas não estou conseguindo fazer o pulo entre divs. Usando este código abaixo descaracteriza o layout da página pois o loop pega somente 1 <div class="events-grids"></div> e tem que ser dois sendo que no primeiro pega ids 1 2 3 e o segundo ids 456 e assim por diante. Na imagem penso vocês entenderem o que estou pedindo. Fui claro?
Código:
<div class="events">
<div class="container">
<?php
$conexao = bla bla bla
$banco = bla bla bla;
if (!$conexao) {
die("Connection failed: " . mysqli_connect_error());
}
$query = "SELECT * FROM imoveis";
$result = mysqli_query($conexao, $query);
if($result){
while($row = mysqli_fetch_array($result)){
$ref = $row["ref"];
.
.
?>
<div class="events-grids">
<div class="col-md-4 events-grid">
<div class="events-grid1 hvr-sweep-to-top">
<a href="imovel.php"><img src="images/6.jpg" alt=" " class="img-responsive" /></a>
<h4><a href="imovel.php"><?php echo "$bairro"; ?></a></h4>
<ul>
<li><a href="imovel.php"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span><?php echo "$cidade"; ?></a></li>
</ul>
<p>Quartos: <?php echo "$quartos"; ?> | Suites: <?php echo "$suites"; ?> | Banheiros: <?php echo "$banheiros"; ?> | Vagas: <?php echo "$vagas"; ?> | Condomínio: <?php echo "$condominio"; ?></p>
<h4><a href="imovel.php"><?php echo "$preco"; ?></a></h4>
</div>
</div>
<?php
}
}
?>
</div>
</div>
</div>
Isso daí não é mais PHP e sim CSS. O PHP só passa informação, quem controla o <div> é o HTML. Em termos de apresentação, a equipe mais conhecida é o Bootstrap. No portal deles, eu encontrei um código exemplo de preço, mais ou menos parecido com o seu layout, e adaptei o PHP no meio deles. O código ficou enorme, e só consegui colocar três imóveis na tela:
<!DOCTYPE html><html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><link rel="stylesheet" type="text/css" href="cid:css-ce6461f7-6874-4a99-9a14-5a00e5049f6e@mhtml.blink" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.104.2">
<title>Pricing example · Bootstrap v5.2</title>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/examples/pricing/">
<link href="https://getbootstrap.com/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<!-- Favicons -->
<link rel="apple-touch-icon" href="https://getbootstrap.com/docs/5.2/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="https://getbootstrap.com/docs/5.2/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="https://getbootstrap.com/docs/5.2/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
<link rel="manifest" href="https://getbootstrap.com/docs/5.2/assets/img/favicons/manifest.json">
<link rel="mask-icon" href="https://getbootstrap.com/docs/5.2/assets/img/favicons/safari-pinned-tab.svg" color="#712cf9">
<link rel="icon" href="https://getbootstrap.com/docs/5.2/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#712cf9">
<!-- Custom styles for this template -->
<link href="https://getbootstrap.com/docs/5.2/examples/pricing/pricing.css" rel="stylesheet">
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="check" viewBox="0 0 16 16">
<title>Check</title>
<path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"></path>
</symbol>
</svg>
<?php $mysqli=new mysqli("localhost","root","","astudy");
$query=$mysqli->query("select * from imoveis");$row=$query->fetch_assoc(); ?>
<div class="container py-3">
<main>
<div class="row row-cols-1 row-cols-md-3 mb-3 text-center">
<div class="col">
<div class="card mb-4 rounded-3 shadow-sm">
<div class="card-header py-3">
<h4 class="my-0 fw-normal"><img src=<?=$row['imagem']?> width=250 height=200></h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title"><?=$row['preço']?></h1>
<ul class="list-unstyled mt-3 mb-4">
<li><?=$row['quartos']?> quartos</li>
<li><?=$row['banheiros']?> banheiros</li>
<li><?=$row['vagas']?> vagas</li>
<li>Bairro <?=$row['bairro']?></li>
</ul>
<button type="button" class="w-100 btn btn-lg btn-outline-primary">Cidade <?=$row['cidade']?></button>
</div>
</div>
</div>
<?php $row=$query->fetch_assoc(); ?>
<div class="col">
<div class="card mb-4 rounded-3 shadow-sm">
<div class="card-header py-3">
<h4 class="my-0 fw-normal"><img src=<?=$row['imagem']?> width=250 height=200></h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title"><?=$row['preço']?></h1>
<ul class="list-unstyled mt-3 mb-4">
<li><?=$row['quartos']?> quartos</li>
<li><?=$row['banheiros']?> banheiros</li>
<li><?=$row['vagas']?> vagas</li>
<li>Bairro <?=$row['bairro']?></li>
</ul>
<button type="button" class="w-100 btn btn-lg btn-outline-primary">Cidade <?=$row['cidade']?></button>
</div>
</div>
</div>
<?php $row=$query->fetch_assoc(); ?>
<div class="col">
<div class="card mb-4 rounded-3 shadow-sm border-primary">
<div class="card-header py-3 text-bg-primary border-primary">
<h4 class="my-0 fw-normal"><img src=<?=$row['imagem']?> width=250 height=200></h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title"><?=$row['preço']?></h1>
<ul class="list-unstyled mt-3 mb-4">
<li><?=$row['quartos']?> quartos</li>
<li><?=$row['banheiros']?> banheiros</li>
<li><?=$row['vagas']?> vagas</li>
<li>Bairro <?=$row['bairro']?></li>
</ul>
</ul>
<button type="button" class="w-100 btn btn-lg btn-outline-primary">Cidade <?=$row['cidade']?></button>
</div>
</div>
</div>
</div>
</div>
</main>Estudando um pouco mais o Bootstrap, consegui reduzir bastante o código:
<!DOCTYPE html><html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://getbootstrap.com/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<div class="container py-3">
<div class='row row-cols-1 row-cols-md-3 mb-3 text-center'>
<?php $mysqli=new mysqli("localhost","root","","astudy");
$query=$mysqli->query("select * from imoveis");
for($icontador=1;$icontador<=3;$icontador++){
$row=$query->fetch_assoc(); ?>
<div class="col">
<div class="card mb-4 rounded-3 shadow-sm">
<div class="card-header py-3">
<h4 class="my-0 fw-normal"><img src=<?=$row['imagem']?> width=250 height=200></h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title"><?=$row['preço']?></h1>
<ul class="list-unstyled mt-3 mb-4">
<li><?=$row['quartos']?> quartos</li>
<li><?=$row['banheiros']?> banheiros</li>
<li><?=$row['vagas']?> vagas</li>
<li>Bairro <?=$row['bairro']?></li>
</ul>
<button type="button" class="w-100 btn btn-lg btn-outline-primary">Cidade <?=$row['cidade']?></button>
</div>
</div>
</div>
<?php } ?>>
22 horas atrás, tetsuo disse:
com array_chunck é possível quebrar um array em grupos de 3
Vou pesquisar a respeito. Agradecido!!!
>
22 horas atrás, tetsuo disse:
com array_chunck é possível quebrar um array em grupos de 3
Agradeço a dica. Vou pesquisar.
Eu fiz uma nova revisão no código original, o primeiro que foi postado. Ele não é completo, assim tomei a liberdade de alterar para poder testar aqui, e para a minha surpresa, tudo funciona, os imóveis são publicados na sequência. O único problema é o
<img src=images/6.jpg> - do jeito que foi escrito, todos os imóveis vão aparecer com a mesma imagem.
No seu código, você usou $bairro, e eu alterei para <?=$row["bairro"]?>, mas acredito que o problema não é esse. Eu acredito que o seu código está publicando os seis imóveis, mas usando a mesma foto, o que dá a impressão de que a informação está sendo repetida 6 vezes. A seguir o código que eu testei:
<!DOCTYPE html><html><head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head><body>
<div class="events">
<div class="container">
<?php
$conexao = new mysqli("localhost","root","","astudy");$query = "SELECT * FROM imoveis";
$result = mysqli_query($conexao, $query);
if($result){
while($row = mysqli_fetch_array($result)){
$ref = $row["ref"];
?>
<div class="events-grids">
<div class="col-md-4 events-grid">
<div class="events-grid1 hvr-sweep-to-top">
<a href="imovel.php"><img src="cinqueterre.jpg" alt=" " class="img-responsive" /></a>
<h4><a href="imovel.php"><?=$row["bairro"]?></a></h4>
<ul>
<li><a href="imovel.php"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span><?=$row['cidade']?></a></li>
</ul>
<p>Quartos: <?=$row["quartos"]?> | Suites: <?=$row["suites"]?> | Banheiros: <?=$row["banheiros"]?> | Vagas: <?=$row["vagas"]?> |
Condomínio: <?=$row["condominio"]?></p>
<h4><a href="imovel.php"><?=$row['preco']?></a></h4>
</div>
</div>
<?php } } ?>
</div>
</div>
</div>>
Em 23/11/2022 at 00:31, Frank K Hosaka disse:
Eu fiz uma nova revisão no código original, o primeiro que foi postado. Ele não é completo, assim tomei a liberdade de alterar para poder testar aqui, e para a minha surpresa, tudo funciona, os imóveis são publicados na sequência. O único problema é o
<img src=images/6.jpg> - do jeito que foi escrito, todos os imóveis vão aparecer com a mesma imagem.
No seu código, você usou $bairro, e eu alterei para <?=$row["bairro"]?>, mas acredito que o problema não é esse. Eu acredito que o seu código está publicando os seis imóveis, mas usando a mesma foto, o que dá a impressão de que a informação está sendo repetida 6 vezes. A seguir o código que eu testei:
<!DOCTYPE html><html><head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head><body>
<div class="events">
<div class="container">
<?php
$conexao = new mysqli("localhost","root","","astudy");$query = "SELECT * FROM imoveis";
$result = mysqli_query($conexao, $query);
if($result){
while($row = mysqli_fetch_array($result)){
$ref = $row["ref"];
?>
<div class="events-grids">
<div class="col-md-4 events-grid">
<div class="events-grid1 hvr-sweep-to-top">
<a href="imovel.php"><img src="cinqueterre.jpg" alt=" " class="img-responsive" /></a>
<h4><a href="imovel.php"><?=$row["bairro"]?></a></h4>
<ul>
<li><a href="imovel.php"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span><?=$row['cidade']?></a></li>
</ul>
<p>Quartos: <?=$row["quartos"]?> | Suites: <?=$row["suites"]?> | Banheiros: <?=$row["banheiros"]?> | Vagas: <?=$row["vagas"]?> |
Condomínio: <?=$row["condominio"]?></p>
<h4><a href="imovel.php"><?=$row['preco']?></a></h4>
</div>
</div>
<?php } } ?>
</div>
</div>
</div>
Agradecido0. Vou testar aqui e posto se funcionou.
com array_chunck é possível quebrar um array em grupos de 3