Duvida sobre como criar um loop entre divs usando php

chinesedg · Novembro 20, 2022

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>

tetsuo · Novembro 21, 2022

com array_chunck é possível quebrar um array em grupos de 3

Frank K Hosaka · Novembro 22, 2022

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>

Frank K Hosaka · Novembro 22, 2022

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 } ?>

chinesedg · Novembro 22, 2022

22 horas atrás, tetsuo disse:

com array_chunck é possível quebrar um array em grupos de 3

Vou pesquisar a respeito. Agradecido!!!

chinesedg · Novembro 22, 2022

22 horas atrás, tetsuo disse:

com array_chunck é possível quebrar um array em grupos de 3

Agradeço a dica. Vou pesquisar.

Frank K Hosaka · Novembro 23, 2022

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");
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="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>

chinesedg · Novembro 24, 2022

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");
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="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.

Duvida sobre como criar um loop entre divs usando php

Recommended Posts

chinesedg 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

tetsuo 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Frank K Hosaka 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Frank K Hosaka 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

chinesedg 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

chinesedg 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Frank K Hosaka 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

chinesedg 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Crie uma conta ou entre para comentar

Criar uma conta

Entrar

Javascript - Calcular Valores Monetário em Tempo Real

JavaScript - Exibir logo dentro da Tabela html

PHP+Codeigniter - Implementar o Input CÓDIGO ou ID do Produto

Conteúdo Similar

Fóruns

Tempo Real

Informação importante