How to print an HTML using PHP a <ul> list of items with 3 different types?

Asked

Viewed 1,380 times

0

I have a Mysql table called Plans with the fields:

Campos da Tabela Plans

Which is a table of subscription plans of a website, the final template is as shown in the following image:

Resultado final desejado

Where:

  • name = Name of Plan
  • op1 = First advantage of the plan
  • op2 = Second advantage of the plan
  • op3 = Third advantage of the plan
  • price = plan price

I need to print this information from the Plans table in this HTML, with the same design (CSS) using PHP. Follow the HTML code of this price table, without this link only HTML:

  <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">
                                        <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>
php mysql css html5

3 answers

1

I made only the first so you see how it would work, the rest you can do alone, my purpose is not to do for you and it shows you how to do.

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

1


I don’t know what the difficulty would be if I wanted to do it the usual way, mixing PHP with HTML, utilize:

<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 is missing (<p>Para Vovós Cozinheiras Iniciantes</p>), this is fixed and there is in the database that information.

  • The difficulty is that I want to keep the different colors for each print.

  • I’ll try here and mark if it worked....

  • 1

    I hadn’t really noticed that, but it’s easy to do.

  • 1

    I edited to change the color in each "block".

  • My connection uses $Pdo = new PDO and is giving the error " Warning: mysqli_query() expects Parameter 1 to be mysqli, Object Given in C: wamp64 www temp loja_cook.php on line 109" which is in " $planes = mysqli_query($Pdo, $query);"... I don’t know what error this @Inkeliz is

  • 1

    If you use PDO you cannot use mysqli_, use the equivalent of PDO, which is $PDO->query() and the like.

  • How can I pick the selected item from the button?

  • 1

    You can take the $id and create a input of the kind hidden and get this on the other page, I edited for that, anyway.

Show 3 more comments

0

The answer I marked as correct is perfect. Thank you @Inkeliz. How I use PDO connection I had to adapt, so just to add here to this post, follows as 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>

Browser other questions tagged php mysql css html5

You are not signed in. Login or sign up in order to post.