How to print in HTML using PHP a list of ul type items with 3 different types?

0

I have a table in MySQL called Plans with the fields:

Whatisatableofsubscriptionplansforawebsite,thefinaltemplateisasshowninthefollowingimage:

Where:

  • name=PlanName
  • op1=Firstadvantageoftheplan
  • op2=Secondadvantageoftheplan
  • op3=Thirdplanadvantage
  • price=planprice

IneedtoprintthisinformationfromthePlanstableinthisHTML,withthesamedesign(CSS)usingPHP.HereistheHTMLcodeofthispricelist,withoutthislinkonlyHTML:

<divclass="row">
                    <div class="col-md-4 col-sm-4 col-xs-12">
                        <div class="table_three">
                            <div class="price_table">
                                <div class="price_table_inner">
                                    <div class="price_header color_carrot">
                                        <h3>Iniciante</h3>
                                        <p>Para Vovós Cozinheiras Iniciantes</p>
                                        <div class="ribbon">HOT</div>
                                    </div>
                                    <div class="price color_carrot2">
                                        <h1>R$ 10,00</h1>
                                    </div>
                                    <div class="service_list">
                                        <ul>
                                            <li>10 créditos de anúncio</li>
                                            <li>Equivalente à 10 compras</li>
                                            <li>Não há validade de expiração dos créditos</li>
                                        </ul>
                                    </div>
                                    <form action="login.html" method="POST">
                                        <input type="submit" value="Investir Agora" name="buy" class="btn color_carrot3" />
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-4 col-xs-12">
                        <div class="table_three">
                            <div class="price_table">
                                <div class="price_table_inner">
                                    <div class="price_header color_amethyst">
                                        <h3>Intermediário</h3>
                                        <p>Para Vovós Cozinheiras já com clientela</p>
                                        <div class="ribbon">HOT</div>
                                    </div>
                                    <div class="price color_amethyst2">
                                        <h1>R$ 30,00</h1>
                                    </div>
                                    <div class="service_list">
                                        <ul>
                                            <li>30 créditos de anúncio</li>
                                            <li>Equivalente à 30 compras</li>
                                            <li>Não há validade de expiração dos créditos</li>
                                        </ul>
                                    </div>
                                    <form action="#" method="POST">
                                        <input type="submit" value="Investir Agora" name="buy" class="btn color_amethyst3" />
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-4 col-xs-12">
                        <div class="table_three">
                            <div class="price_table">
                                <div class="price_table_inner">
                                    <div class="price_header color_sunflower">
                                        <h3>Premium</h3>
                                        <p>Vovós Cozinheiras Premium</p>
                                        <div class="ribbon">HOT</div>
                                    </div>
                                    <div class="price color_sunflower2">
                                        <h1>R$ 99,00</h1>
                                    </div>
                                    <div class="service_list">
                                        <ul>
                                            <li>100 créditos de anúncio</li>
                                            <li>Equivalente à 100 compras</li>
                                            <li>Não há validade de expiração dos créditos</li>
                                        </ul>
                                    </div>
                                    <form action="#" method="POST">
                                        <input type="submit" value="Investir Agora" name="buy" class="btn color_sunflower3" />
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
    
asked by anonymous 10.06.2017 / 01:41

3 answers

1

I do not know what the difficulty would be, if you want to do it in the usual way, mixing PHP with HTML , use:

<div class="row">
    <?php

    $cores = ['carrot', 'amethyst', 'sunflower'];
    $index_cor = 0;

    $planos = mysqli_query($con, 'SELECT id, name, op1, op2, op3, price FROM plans');

    while (list($id, $name, $ops['0'], $ops['1'], $ops['2'], $price) = mysqli_fetch_array($planos, MYSQLI_NUM)) {

        ?>
        <div class="col-md-4 col-sm-4 col-xs-12">
            <div class="table_three">
                <div class="price_table">
                    <div class="price_table_inner">
                        <div class="price_header color_<?= $cores[$index_cor] ?>">
                            <h3><?= htmlentities($name, ENT_QUOTES | ENT_HTML5, 'UTF8') ?></h3>
                            <p>Para Vovós Cozinheiras Iniciantes</p>
                            <div class="ribbon">HOT</div>
                        </div>
                        <div class="price color_<?= $cores[$index_cor] ?>2">
                            <h1>
                                R$ <?= str_replace($price, '.', ',') ?></h1>
                        </div>
                        <div class="service_list">
                            <ul>
                                <?php
                                foreach ($ops as $op) {
                                    ?>
                                    <li><?= htmlentities($op, ENT_QUOTES | ENT_HTML5, 'UTF8'); ?></li>
                                    <?php
                                }
                                ?>
                            </ul>
                        </div>
                        <form action="login.html" method="POST">
                            <input type="hidden" value="<?= htmlentities($id, ENT_QUOTES | ENT_HTML5, 'UTF8') ?>"
                                   name="plano_selecionado">
                            <input type="submit" value="Investir Agora" name="buy"
                                   class="btn color_<?= $cores[$index_cor] ?>3"/>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <?php
        $index_cor++;
    }
    ?>
</div>

The phrase ( <p>Para Vovós Cozinheiras Iniciantes</p> ) is missing, this is fixed and there is no such information in the database.

    
10.06.2017 / 04:34
1

I've only done the first one to see how it would work, the rest you can do alone, my intention is not to do it for you, but it shows you how to do it.

<?php
    $select = "SELECT * FROM plans WHERE idplans=1";
    $verifica = mysqli_query($connect, $select) //Onde $connect é a conexão com banco de dados
    $row = mysqli_fetch_row($verifica); //Define as váriaveis
    $name = $row[1];
    $op1 = $row[2];
    $op2 = $row[3];
    $op3 = $row[4];
    $preço = $row[5]
?>
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-12">
   <div class="table_three">
      <div class="price_table">
         <div class="price_table_inner">
            <div class="price_header color_carrot">
               <?php echo "<h3>$name</h3>"; ?>
               <p>Para Vovós Cozinheiras Iniciantes</p>
               <div class="ribbon">HOT</div>
            </div>
            <div class="price color_carrot2">
               <?php echo "<h1>R$ 10,00</h1>";
            </div>
            <div class="service_list">
               <ul>
                  <?php echo "<li>$op1</li>
                  <li>$op2</li>
                  <li>$op3</li>"; ?>
               </ul>
            </div>
            <form action="login.html" method="POST">
               <input type="submit" value="Investir Agora" name="buy" class="btn color_carrot3" />
            </form>
         </div>
      </div>
   </div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
   <div class="table_three">
      <div class="price_table">
         <div class="price_table_inner">
            <div class="price_header color_amethyst">
               <h3>Intermediário</h3>
               <p>Para Vovós Cozinheiras já com clientela</p>
               <div class="ribbon">HOT</div>
            </div>
            <div class="price color_amethyst2">
               <h1>R$ 30,00</h1>
            </div>
            <div class="service_list">
               <ul>
                  <li>30 créditos de anúncio</li>
                  <li>Equivalente à 30 compras</li>
                  <li>Não há validade de expiração dos créditos</li>
               </ul>
            </div>
            <form action="#" method="POST">
               <input type="submit" value="Investir Agora" name="buy" class="btn color_amethyst3" />
            </form>
         </div>
      </div>
   </div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
   <div class="table_three">
      <div class="price_table">
         <div class="price_table_inner">
            <div class="price_header color_sunflower">
               <h3>Premium</h3>
               <p>Vovós Cozinheiras Premium</p>
               <div class="ribbon">HOT</div>
            </div>
            <div class="price color_sunflower2">
               <h1>R$ 99,00</h1>
            </div>
            <div class="service_list">
               <ul>
                  <li>100 créditos de anúncio</li>
                  <li>Equivalente à 100 compras</li>
                  <li>Não há validade de expiração dos créditos</li>
               </ul>
            </div>
            <form action="#" method="POST">
               <input type="submit" value="Investir Agora" name="buy" class="btn color_sunflower3" />
            </form>
         </div>
      </div>
   </div>
</div>
    
10.06.2017 / 02:45
0

The answer I marked as correct is perfect. Thanks @Inkeliz. As I use PDO connection I had to adapt, so just to add here to this post, it follows how I did using PDO connection:

   <div class="row">
                        <?php

                        $cores = ['carrot', 'amethyst', 'sunflower'];
                        $index_cor = 0;


                        $planos = $pdo->prepare("SELECT name, subtitle, op1, op2, op3, price, qty_credit FROM plans");
                        $planos->execute();



                        $resultado = $planos->fetchAll();

                   //     $linha = $planos->rowCount();




                    //    print("Deleted $linha rows.\n");

                        foreach($resultado as $mostra){
                            $name = addslashes(strip_tags($mostra['name']));
                            $subtitle = addslashes(strip_tags($mostra['subtitle']));  
                            $op1 = addslashes(strip_tags($mostra['op1']));   
                            $op2 = addslashes(strip_tags($mostra['op2']));
                            $op3 = addslashes(strip_tags($mostra['op3']));
                            $price = addslashes(strip_tags($mostra['price']));   
                            $qty_credit = addslashes(strip_tags($mostra['qty_credit']));   






                    ?>
                            <div class="col-md-4 col-sm-4 col-xs-12">
                                <div class="table_three">
                                    <div class="price_table">
                                        <div class="price_table_inner">
                                            <div class="price_header color_<?= $cores[$index_cor] ?>">
                                                <h3>
                                                    <?= $subtitle ?>
                                                </h3>
                                                <p>
                                                    <?= $op1 ?>
                                                </p>
                                                <div class="ribbon">HOT</div>
                                            </div>
                                            <div class="price color_<?= $cores[$index_cor] ?>2">
                                                <h1>R$
                                                    <?= $price ?>
                                                </h1>
                                            </div>
                                            <div class="service_list">
                                                <ul>
                                                    <li>
                                                        <?= $op1 ?>
                                                    </li>
                                                    <li>
                                                        <?= $op2 ?>
                                                    </li>
                                                    <li>
                                                        <?= $op3 ?>
                                                    </li>
                                                </ul>
                                            </div>
                                            <form action="#" method="POST">
                                                <input type="submit" value="Investir Agora" name="buy" class="btn color_<?= $cores[$index_cor] ?>3" /> 
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <?php
                                $index_cor++;

                        }

                            ?>
                    </div>            
    
12.06.2017 / 00:35