0

Estou tentando usar a timeline do Bootstrap4 mas estou tendo problemas em trabalhar com banco de dados.

A Timeline do Bootstrap é exibida alternadamente, ou seja, um registro se posiciona à esquerda, e o seguinte à direita, conforme a utilização da classe "timeline-inverted" na < li >.

Se eu fizer um "foreach ($row as $key => $linha)" e colocar um echo utilizando o resultado da consulta, todos os registros virão do mesmo lado. Para que venha alternado, um registro tem de ser < li > e o outro tem de ser < li class="timeline-inverted" >

Como faço isso na consulta?

Meu código está assim:

            <ul class="timeline">
<?php
                $sql = "SELECT 
                povos.pv, 
                povos.avatar 
                povos.content
                FROM povos 
                WHERE povos.regiao='1'";
                $res = $PDO->query($sql);
                $row = $res->fetchAll(PDO::FETCH_ASSOC);
                foreach ($row as $key => $linha) {

                $pv     = $linha['pv'];
                $avatar = $linha['avatar'];

?>              
                <li> // essa vem do lado esquerdo
                    <div class="timeline-badge"><i class="fa fa-check"></i>
                    </div>
                    <div class="timeline-panel">
                        <div class="timeline-heading">
                            <h4 class="timeline-title"><?php echo $pv; ?></h4>
                            <p><small class="text-muted"><i class="fa fa-clock-o"></i> <?php echo $avatar; ?></small>
                            </p>
                        </div>
                        <div class="timeline-body">
                        <p><?php echo $content; ?></p>
                        </div>
                    </div>
                </li>

                <?php

                    }

                ?>  
                <li class="timeline-inverted"> // Essa que eu não estou conseguindo fazer vir do lado direito...
                    <div class="timeline-badge warning"><i class="fa fa-credit-card"></i>
                    </div>
                    <div class="timeline-panel">
                        <div class="timeline-heading">
                            <h4 class="timeline-title">Lorem ipsum dolor</h4>
                        </div>
                        <div class="timeline-body">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolorem quibusdam, tenetur commodi provident cumque magni voluptatem libero, quis rerum. Fugiat esse debitis optio, tempore. Animi officiis alias, officia repellendus.</p>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium maiores odit qui est tempora eos, nostrum provident explicabo dignissimos debitis vel! Adipisci eius voluptates, ad aut recusandae minus eaque facere.</p>
                        </div>
                    </div>
                </li>   
            </ul>

Efeito desejado

3 Respostas 3

0

Usa um IF e ELSE alternando o valor de uma variável, e dentro do IF e ELSE alternando o uso da classe, confere se ajuda:

<ul class="timeline">
    <?php               
            $sql = "SELECT 
            povos.pv, 
            povos.avatar 
            povos.content
            FROM povos 
            WHERE povos.regiao='1'";
            $res = $PDO->query($sql);
            $row = $res->fetchAll(PDO::FETCH_ASSOC);
            foreach ($row as $key => $linha) {

            $pv     = $linha['pv'];
            $avatar = $linha['avatar'];

            ################################
            // Acrescenta uma variável para ajustar a classe "uma sim", "outra não".
            $liInverted = 0;

            if ( $liInverted == 0 ) {
                echo "<li>"; // Aqui exibe a LI de um lado.
                $liInverted = 1;
            } else {
                echo "<li class='timeline-inverted'>"; // Aqui exibe a LI do outro lado.
                $liInverted = 0;
            }
             ################################
            ?>              
                /* Aqui não precisa de LI, pois imprime no IF, ELSE acima!!! */

                <div class="timeline-badge"><i class="fa fa-check"></i>
                </div>
                <div class="timeline-panel">
                    <div class="timeline-heading">
                        <h4 class="timeline-title"><?php echo $pv; ?></h4>
                        <p><small class="text-muted"><i class="fa fa-clock-o"></i>
                        <?php echo $avatar; ?></small>
                        </p>
                    </div>
                    <div class="timeline-body">
                    <p><?php echo $content; ?></p>
                    </div>
                </div>
            </li>

            <?php

                }

            ?>
1
  • Eu usei o código, mas continua vindo tudo do lado esquerdo... Commented 12/01/2019 às 12:38
0

Webster, confere esse código isoladamente, simplifiquei o loop com o exemplo:

<?php
$row = array("A","B","C","D","E","F","G","H");
$inverte = 0;
foreach ( $row as $a => $b ) {
    echo $a . " - " . $b . "<br>";
    if( $inverte == 0 ) {
        echo "LI NORMAL<br>";
        $inverte = 1;
    } else {
        echo "LI INVERTIDA<br>";
        $inverte = 0;
    }
}
?>

Dá uma revisada no seu código se está OK, pois o teste acima faz o mesmo que a resposta anterior em inserir a classe ou não dentro do looping.

3
  • Obrigado pela resposta Eliseu, porém não estou compreendendo como posso alternar as classes de forma aleatória. Tentei fazer por campo chave par ou ímpar, mas como a ordenação é por data, nada me asseguraria de que os campos chaves viriam par e ímpar consecutivamente... Commented 20/01/2019 às 18:07
  • Desculpe a demora, agitado! Se o seu campo for tipo data você com certeza pode ordenar cronologicamente, aí parte do tipo de campo para armazenar a data, e a ordenação e a regra do seu SQL, aí é um post a parte.
    – ElvisP
    Commented 22/01/2019 às 15:08
  • Essa parte está tranquilo. Eu só não estou conseguindo alternar os < li >. Não consigo criar uma lógica para alternar os registros. Talvez se eu conseguisse numerar o resultado da query, eu poderia fazer um IF para registros pares (que viriam do lado esquerdo) e outro para registros ímpares (que viriam do lado direito. Mas não estou conseguindo fazer isso Commented 24/01/2019 às 12:03
0

Galera consegui a resposta para o meu problema:

Depois da minha query eu fiz um fetchAll e depois, dentro de um foreach, eu incluí um campo de incremento chamado $count e coloquei junto com as variáveis que eu queria na query. Aí depois foi mole:

Abrí um if e coloque a condição, se o campo de "autoincremento" $count for PAR ele usa a classe < li class="timeline" />. Do contrário, ele usa < li class="timeline-inverted />

Meu código ficou assim:

            <ul class="timeline">
<?php
                $sql = "SELECT 
                povos.id_povos, 
                povos.pv, 
                povos.avatar
                FROM povos 
                WHERE povos.regiao='1'
                ORDER BY povos.id_povos";


    $prepara    = $PDO->prepare($sql);
    $prepara->execute();
    $row        = $prepara->fetchAll(PDO::FETCH_ASSOC);


    foreach ($row as $key => $linha) {

    $i  = isset($i)?$i:"";
    if($i == 0){
        $i=1;
    } else {
        $i=$i+1;
    }
    $count      = $i+1; // Cria uma coluna de autoincremento na Query

    $pv         = $linha['pv'];
    $avatar     = $linha['avatar'];



    ################################

    if($count % 2 == 0){ // Se a coluna de auto incremento for par...


        echo "<li class='timeline'>"; // Aqui exibe a <li> do lado esquerdo.

?>
                    <div class="timeline-badge"><i class="fa fa-check"></i> <!--  Cria o "Badge" da timeline -->
                    </div>
                    <div class="timeline-panel"><!--  Cria o Painel logo em seguida do "Badge" -->
                        <div class="timeline-heading">
                            <h4 class="timeline-title"><?php echo $pv; ?></h4>
                            <p><small class="text-muted"><i class="fa fa-clock-o"></i> <img src="img/<?php echo $avatar; ?>" height="120" /></small>
                            </p>
                        </div>
                        <div class="timeline-body">
                        <p><?php echo $count; ?></p>
                        </div>
                    </div> <!-- ./ timline-panel -->
<?php

    }
    else
    {
        echo "<li class='timeline-inverted'>"; // Aqui exibe a <li> do lado direito.

?>
                    <div class="timeline-badge"><i class="fa fa-check"></i> <!--  Cria o "Badge" da timeline -->
                    </div>
                    <div class="timeline-panel"><!--  Cria o Painel logo em seguida do "Badge" -->
                        <div class="timeline-heading">
                            <h4 class="timeline-title"><?php echo $pv; ?></h4>
                            <p><small class="text-muted"><i class="fa fa-clock-o"></i> <img src="img/<?php echo $avatar; ?>" height="120"  /></small>
                            </p>
                        </div>
                        <div class="timeline-body">
                        <p><?php echo $count; ?></p>
                        </div>
                    </div> <!-- ./ timline-panel -->
<?php
} 


                ?>              


                </li>

                <?php

                    }

                ?>  
            </ul>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .