Generate HTML code with PHP automatically, after data pull in MySql - php

Question

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?
This is how it look when I add second raw:
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">
Details
</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";
?>
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">
Details
</div>
</div>
<?php
}
?>
</div>

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

Answer 2

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>