How to use Bootstrap4 Timeline in PHP

Question

I am trying to use Bootstrap4 Timeline but am having problems working with database.

The Bootstrap Timeline is displayed alternately, that is, a record is positioned on the left, and the next on the right, according to the use of the class "Timeline-Inverted" na < li >.

If I do a "foreach ($Row as $key => $line)" and place an echo using the query result, all records will come from the same side. In order to alternate, one record must be < li > and the other must be < li class="Timeline-Inverted" >

How do I do this in consultation?

My code is like this:

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

Answer 1

Use an IF and ELSE by alternating the value of a variable, and within the IF and ELSE by alternating the class use, check for help:

<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

                }

            ?>

Answer 2

Guys got the answer to my problem:

After my query I made a fetchAll and then inside a foreach, I included an increment field called $Count and put together with the variables I wanted in the query. Then it went soft:

I opened a if and set the condition, if the field "autoincrement" $Count for PAR he uses the class < li class="Timeline" />. Otherwise, he wears it < li class="Timeline-Inverted />

My code went like this:

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

Answer 3

Webster, check this code separately, I simplified the loop with the example:

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

Proofread your code if it is OK, because the above test does the same as the previous answer in inserting the class or not inside the looping.