1

I have written a really simple php page that populate a database. I now want to fetch this data in another php page and that is ok. What I would like to achive is: when I add another row into the database, I would like the html to create a new card, and not add the information in the same card. I am not sure I understand how this can be achived. Do I have to use php templates like smarty or anybody can point me how could I proceed?

Look like this

This is how it look when I add second raw: This is how it look when I add second raw:

While what i want to achive should look like While what i want to achive should look like

Here is the HTML code I use with the PHP code:

 <section class="tm-section-3 tm-section-mb" id="tm-section-3">
            <div class="row">
            <div class="col-md-6 tm-mb-sm-4 tm-2col-l">
            <div class="image">
            <img src="img/tm-img-1.jpg" class="img-fluid" />
            </div>
            <div class="tm-box-3">
            <h2>
            <?php if (mysqli_num_rows($result) > 0) {
            ?>
            <table>
            <?php
            include_once '../scripts/connection.php';
            $result = mysqli_query($link,"SELECT 
            domain,subdomain,topic,topictitle,topictext FROM newpage");
            $i=0;
            while($row = mysqli_fetch_array($result)) {
            ?>
            <tr>
            <td><?php echo $row["domain"]; ?></td>
            </tr>
            <tr>
            <td><?php echo $row["subdomain"]; ?></td>
            </tr>
            <tr>
            <td><?php echo $row["topic"]; ?></td>
            </tr>
            <tr>
            <td><h4><?php echo $row["topictitle"]; ?></h4></td>
            </tr>
            <tr>
             <td><h5><?php echo $row["topictext"]; ?></h5></td>
             </tr>
           <?php
                $i++;
                }
                ?>
                </table>
                 <?php
                }
                else{
                    echo "No result found";
                }
                ?>
        </h2>
        <p> 
        </p>
        <div class="text-center">
        <a href="#tm-section-5" class="btn btn-big">Details</a>
        </div>
            </div>
            </div>
            </div>
            </section>

This is how i send the code to the db:

        <?php
    
    include("connection.php");
    
    $domain = mysqli_real_escape_string($link, $_POST['domain']);
    $subdomain = mysqli_real_escape_string($link, $_POST['subdomain']);
    $topic = mysqli_real_escape_string($link, $_POST['topic']);
    $topictitle = mysqli_real_escape_string($link, $_POST['topictitle']);
    $topictext = mysqli_real_escape_string($link, $_POST['topictext']);
    
    
 $sql = "INSERT INTO newpage (domain,subdomain,topic,topictitle,topictext) VALUES ('$domain','$subdomain','$topic','$topictitle','$topictext')";
    
 $result = mysqli_query($link, $sql);
    
        // if query fails stop script and echo error
 if( $result === false)
 {
 echo "ERROR: Could not able to execute $sql. " . mysqli_error($link);
 exit;
  }
    
  $sql = "INSERT INTO menu (item) VALUES ('$domain')";
    
  $result = mysqli_query($link, $sql);
    
  // if query fails stop script and echo error
  if( $result === false)
 {
 echo "ERROR: Could not able to execute $sql. " . mysqli_error($link);
 exit;
  }
    
header("location:../scripts/add-new-page-script-end.php");
    
 exit;
    
echo "You'll never see this";
    
    ?>

interface to send data to db

Here the code that works even the style is bad. But logically is correct:

<div class="col-md-6 tm-mb-sm-4 tm-2col-l">
<?php 
include_once '../scripts/connection.php'; $result = mysqli_query($link,"SELECT domain,subdomain,topic,topictitle,topictext FROM newpage"); foreach($result as $row){
?>   
<div class="image">
<img src="img/tm-img-1.jpg" class="img-fluid" />
</div>
<div class="tm-box-3">    
<h1><?php echo $row['domain']; ?></h1>
<h2><?php echo $row['subdomain']; ?></h2>
<h3><span><?php echo $row['topic']; ?></span></h3>
<h4> <span><?php echo $row['topictitle']; ?></span></h4>
<p><?php echo $row['topictext']; ?></p>
<div class="text-center">
<a href="#tm-section-5" class="btn btn-medium">Details</a>
</div>
</div>
<?php
}
?>
</div>

Result after code correction

6
  • Your loop accross the the DB rows is to low down in your HTML. You need to print the HTML structure of your card with the values inside the loop. It's just a matter of moving a bit of HTML into the loop. Something like foreach ($rows as $i => $row) { print "<div class=\"card\" id=\"card-$i\">\n"; /* print all the field values, the button, etc*/ print "</div>\n"; } Commented Apr 1, 2022 at 10:21
  • Oh you mean instead of wrapping the php inside the HTML, I should do the opposite? Commented Apr 1, 2022 at 10:26
  • @victorsvensson understood it and posted an answer explaining it in detail. Just don't forget to sanitize data before printing it, as I mentionned in my comment on his answer. Commented Apr 1, 2022 at 10:30
  • Isnt the code sanitazed when i send data to the db? (i have addedd code now on how I do it), I apprecciate comments if its wrong or can be done in a better way Commented Apr 1, 2022 at 10:44
  • No because mysqli_real_escape_string() is used here to avoid SQL injection. By the way, using PDO and prepared statements would be better, I think. This will not protect you from someone typing <script>alert('xss')</script> into a field of your form. If you print it in the HTML without htmlspecialchars() you'll see the JS getting executed! Commented Apr 1, 2022 at 12:04

2 Answers 2

1

It currently looks like you have something like this:

<div class="card">
  <img src="..." />
  <?php 
    foreach($result as $row){
      ?> 
        <h1><?php echo $row['domain-name']; ?></h1>
        <h2><?php echo $row['sub-domain-name']; ?></h2>
        <span><?php echo $row['topic-text-title']; ?></span>
        <p><?php echo $row['text-of-topic']; ?></p>
      <?php
    }
  ?>
  <button>Details</button>
</div>

If you instead put the foreach loop outside of the card div then it will make a new card for each result, something like this:

<?php 
    foreach($result as $row){
      ?> 
        <div class="card">
          <img src="..." />
          <h1><?php echo $row['domain-name']; ?></h1>
          <h2><?php echo $row['sub-domain-name']; ?></h2>
          <span><?php echo $row['topic-text-title']; ?></span>
          <p><?php echo $row['text-of-topic']; ?></p>
          
          <button>Details</button>
        </div>

      <?php
    }
  ?>
Sign up to request clarification or add additional context in comments.

2 Comments

Yes, it's what I mentionned in my comment. Just don't forget to sanitize the row values if not you could inject some HTML and worse, some JavaScript, leading to attacks such as XSS: print htmlspecialchars($row['domain_name']);
I rewrote the code based on the one I had. It seems working except the cards appears one above each other, but i guess this is about styling in css or find the right bootstrap grid. Thanks for the help. I posted the code I wrote if anyone might need
1

Assuming that your are not using any framework. In raw php context you could do something like this:

 <div>
     <?php foreach($arr as $item): ?>
           <div>
               <img src="...">
               <h1><?php echo $item->domain_name; ?></h1>
               <h2><?php echo $item->subdomain_name; ?></h2>
               <h3><?php echo $item->topic; ?></h3>
               <h4><?php echo $item->topic_text_title; ?></h4>
               <h5><?php echo $item->text_pf_topic; ?></h5>
           </div>
    <?php endforeach; ?>
 </div>

3 Comments

I am not using any php framework but the HTML uses bootstrap. Do you suggest to use a PHP framwork in order to make this job easy?
It depends on your use case, if you are developing a big application I would suggest to use a framework, but if you are new to php and trying to learn than it is good to practice as your are doing. Also the fact that Frameworks usually have their templating markup (Example: "blade" from laravel). If this answer helped you, kindly accept it. Thanks
No is not a big application. My goal was to write myself a webapplication to take notes while Iam learning things online. So I made an interface to send text to the database, and I thought about visualize them in another page. Almost like making an automatic website out of the notes you ara taking.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.