I would like to know if there's a way to totally separate logic and HTML (without OOP or template engines for practice and learning purpose) in case of listing posts from database, currently, the code looks like that:
<!--TEMPLATE:-->
<?php require_once(HEAD); ?>
<body>
<?php require_once(HEADER); ?>
<?php require_once(BANNER); ?>
<!-- Main Content (S) -->
<main class="container">
<?php while($row = mysql_fetch_assoc($result)): ?>
$postImg = $row["post_img"];
$postAuthor = $row["post_author"];
$postTitle = $row["post_title"];
<div class="col">
<div class="card shadow-sm">
<img class="card-img-top" src="<?= $postImg ?>" alt="Card image cap">
<div class="card-body">
<p class="card-text">
<small class="text-muted"><a class="fw-bold" href=""><?= $postAuthor ?></a></small>
</p>
<h5 class="card-title mb-3"><?= $postTitle ?></h5>
<div class="d-flex justify-content-between">
</div>
</div>
</div>
</div>
<?php endwhile; ?>
</main>
<!-- Main Content (E) -->
<?php require_once(FOOTER); ?>
<?php require_once(JS_FILES); ?>
</body>
</html>
Variables: $postImg, $postAuthor, $postTitle are set with the data from the database.
Currently, the logic of listing posts happens in the same place as the HTML post template, I have an idea where I move this post HTML to a different template file and I use it in listPosts() function by including it on every iteration of the loop.
Main question: is there a way to leave this post HTML code in the current file and somehow loop it with all the result set rows?
The current approach is the good practice because that's how normally people uses PHP with HTML.
You have four options:
Either follow MVC architecture pattern
Use template engine
Keep your HTML only in separate php file and include in the logic file.
Your php file with logic but the response is provided to the AJAX call from
client side that will do the rendering part based on data ( Eg: JSON ).
Example for third option:
your database query script file: post.php
<!--TEMPLATE:-->
<?php require_once(HEAD); ?>
<body>
<?php require_once(HEADER); ?>
<?php require_once(BANNER); ?>
<!-- Main Content (S) -->
<main class="container">
<?php while($row = mysql_fetch_assoc($result)): ?>
$postImg = $row["post_img"];
$postAuthor = $row["post_author"];
$postTitle = $row["post_title"];
// include template
include 'postView.php';
<?php endwhile; ?>
</main>
<!-- Main Content (E) -->
<?php require_once(FOOTER); ?>
<?php require_once(JS_FILES); ?>
</body>
</html>
Your html file: postView.php
<div class="col">
<div class="card shadow-sm">
<img class="card-img-top" src="<?= $postImg ?>" alt="Card image cap">
<div class="card-body">
<p class="card-text">
<small class="text-muted"><a class="fw-bold" href=""><?= $postAuthor ?></a></small>
</p>
<h5 class="card-title mb-3"><?= $postTitle ?></h5>
<div class="d-flex justify-content-between"></div>
</div>
</div>
</div>
you can just create a signlePost.php file and put your html code in it like:
<div class="col">
<div class="card shadow-sm">
<img class="card-img-top" src="<?= $postImg ?>" alt="Card image cap">
<div class="card-body">
<p class="card-text">
<small class="text-muted"><a class="fw-bold" href=""><?= $postAuthor ?></a></small>
</p>
<h5 class="card-title mb-3"><?= $postTitle ?></h5>
<div class="d-flex justify-content-between">
</div>
</div>
</div>
</div>
then in your logic file use include or require like that:
<!--TEMPLATE:-->
<?php require_once(HEAD); ?>
<body>
<?php require_once(HEADER); ?>
<?php require_once(BANNER); ?>
<!-- Main Content (S) -->
<main class="container">
<?php while($row = mysql_fetch_assoc($result)): ?>
$postImg = $row["post_img"];
$postAuthor = $row["post_author"];
$postTitle = $row["post_title"];
include 'singlePost.php';
<?php endwhile; ?>
</main>
<!-- Main Content (E) -->
<?php require_once(FOOTER); ?>
<?php require_once(JS_FILES); ?>
</body>
</html>
but would be better if you use OOP to structurate your code for better
Related
I have a display_all_groups.php page that display a bootstrap card of all groups created by user. When users click on "View Group" hyperlink it will direct them to view_group.php
Here are my code
session_start();
require_once $_SERVER["DOCUMENT_ROOT"].'/mindspace/Business Services Layer/ManageGroupsController/GroupsController.php';
$std_id = $_SESSION['std_id'];
$group = new ManageGroupsController();
$data = $group->viewGroups($std_id);
?>
<div class="main-panel">
<div class="content-wrapper">
<div class="row">
<div class="col-12 grid-margin stretch-card">
<form method="post">
<?php
foreach($data as $row){
?>
<div class="card-body">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="../../template/images/banner.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title"><?=$row['group_name']?></h5>
<p class="card-text"></p>
<a class="btn btn-primary" href="view_group.php?group_id=<?=$row['group_id']?>">View Group</a>
</div>
</div>
</div>
</form>
<?php } ?>
</div>
</div>
</div>
</div>
When I try to click on the View Group button, it did not bring me to other page that I want it to. Please help, Im very new to PHP
It's hard to say exactly what the problem could be. First I would always check that $data is not empty. Then the keys are named correctly. I don't know the data object.
If everything is correct, then it should work. A small note: In the link there is still a simple quotation mark. You should delete that too.
<?= $row['group_id']?> >>>>**'**<<<< "
<?php session_start();
require_once $_SERVER["DOCUMENT_ROOT"] . '/mindspace/Business Services Layer/ManageGroupsController/GroupsController.php';
$std_id = $_SESSION['std_id'];
$group = new ManageGroupsController();
$data = $group->viewGroups($std_id);
?>
<div class="main-panel">
<div class="content-wrapper">
<div class="row">
<div class="col-12 grid-margin stretch-card">
<form method="post">
<?php
foreach ($data as $row) {
?>
<div class="card-body">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="../../template/images/banner.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title"><? echo $row['group_name']; ?></h5> <!-- Used echo -->
<p class="card-text"></p>
<a class="btn btn-primary" href="view_group.php?group_id=<? echo $row['group_id']; ?>">View Group</a> <!-- used echo, removed extra single quote -->
</div>
</div>
</div>
</form>
<?php } ?>
</div>
</div>
</div>
</div>
I had done a few changes in the code,
Used echo
Removed an additional single quote
enter image description hereWhen I use the_content in the code below, the text doesn't respect the container:
I've done this before and this never happened.
<?php $html = ghc_featured_image(get_the_ID());
//** $html[0] returns HTML **
//** $html[1] returns if the image exists **
echo $html[0];
?>
<main class="container">
<div class="row justify-content-center">
<div class="py-3 px-5 about-content border-rd bg-light <?php echo $html[1] ? 'col-md-8' : 'col-md-12 m-0' ?>">
<h1 class="text-center my-5 separator"> <?php the_title()?> </h1>
<?php the_content();?>
</div> <!-- col-md-8 -->
</div>
</main>
I'm using data from MySQL database and display looks like this:
I want 3 articles in one line. The pictures below are made with HTML and CSS.
This is my code:
while($row=mysqli_fetch_array($result))
{?>
<div class="container">
<div class="row padding">
<div class="col-md-4 col-xs-12">
<div class="card">
<img class="card-img-top" src="<?php echo UPLPATH . $row['slika']; ?>">
<div class="card-body">
<h6 class="card-title">« <?php echo $row['naslov']; ?> »</h4>
</div>
<p class="ispod"><?php echo $row['datum'];?> </p>
</div>
</div>
</div>
</div>
<?php }?>
This seems to be a nice point in your project to implement a template engine. There a couple out there. I really liked working with typo3 fluid, but back to your question...
For your existing code, you can end your php code, use html and just echo the php variables you need.
<?php
// ... some php stuff
?>
<div class="container">
/* some html stuff * /
<img class="malaSlika" src="<?php echo UPLPATH . $row['slika']; ?>">
/* some more html stuff */
/* <?= is short for <?php echo
<img class="malaSlika" src="<?= UPLPATH . $row['slika']; ?>">
</div>
<?php
// ... some more php stuff
As said, maybe a template engine would help this even further.
Edit: To add div class="row" it could be something like this.
<?php ... ?>
<div class="container">
<?php
$i = 0;
while($row=mysqli_fetch_array($result)) :
if($i % 3 == 0) : ?>
<div class="row padding">
<?php endif; ?>
<div class="col-md-4 col-xs-12">
<div class="card">
<img class="card-img-top" src="<?php echo UPLPATH . $row['slika']; ?>">
<div class="card-body">
<h6 class="card-title">« <?php echo $row['naslov']; ?> »</h4>
</div>
<p class="ispod"><?php echo $row['datum'];?> </p>
</div>
</div>
<?php if($i % 3 == 0) : ?>
</div>
<?php endif; ?>
<?php
$i++;
endwhile;
?>
</div>
It will always get ugly at some point I think. This is a quick solution. the modulo (%) devides by the number and returns the rest value. so $i modulo 3 return 0 at 0, 3, 6, 9, 12 etc. Meaning it will always add the "row padding" div.
Iam trying to get my web page to display all of my shop items in bootstrap 4 cards. 3 wide by however many deep ( i may add pagination another day )
I've got a php foreach loop which populates bootstrap4 cards perfectly. The trouble is they display vertically ( one on top of the other ) . ive tried class= columns which works on dummy divs but not when i integrate with my for each loop.
I ve tried everything regarding bootstrap docs but cant get the cards to display 3 wide and however many deep ( the foreach and the items control this. )
Should i be even using 'cards' or use something else. thx for your time
<div class="container">
<!-- $result = my php code using x-path to get results from xml query goes here. -->
<?php
foreach ( $result as $elements){
?>
<div class="row-fluid ">
<div class="col-sm-4 ">
<div class="card-columns-fluid">
<div class="card bg-light" style = "width: 22rem; " >
<img class="card-img-top" src=" <?php echo $elements->pictures->picture[2]->filename ; ?> " alt="Card image cap">
<div class="card-body">
<h5 class="card-title"><b><?php echo $elements->advert_heading ?></b></h5>
<p class="card-text"><b><?php echo $elements->price_text ?></b></p>
<p class="card-text"><?php echo $elements->bullet1 ?></p>
<p class="card-text"><?php echo $elements->bullet2 ?></p>
Full Details
</div></div></div></div>
<?php
}
}
?>
</div>
</div> <!--container close div -->
As stated, the .row-fluid should be outside of the loop :
<div class="container">
<div class="row-fluid ">
<!-- my php code which uses x-path to get results from xml query. -->
<?php foreach ( $result as $elements) : ?>
<div class="col-sm-4 ">
<div class="card-columns-fluid">
<div class="card bg-light" style = "width: 22rem; " >
<img class="card-img-top" src=" <?php echo $elements->pictures->picture[2]->filename ; ?> " alt="Card image cap">
<div class="card-body">
<h5 class="card-title"><b><?php echo $elements->advert_heading ?></b></h5>
<p class="card-text"><b><?php echo $elements->price_text ?></b></p>
<p class="card-text"><?php echo $elements->bullet1 ?></p>
<p class="card-text"><?php echo $elements->bullet2 ?></p>
Full Details
</div>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
</div> <!--container div -->
You need to move your <div class="row-fluid "> class outside of the foreach loop, otherwise it will create a new row for each class.
Also, as a comment has mentioned, you need to close all your divs correctly.
I have got a relatively simple PHP connection script to a table in my database. In this table I have a link path to my image files. I call the images using a statement like this:
$sql="SELECT * FROM table";
$result=mysql_query($sql);
and then call the image into the thumbnail with bootstrap like this:
<?php
while($rows=mysql_fetch_array($result)){
?>
<div class="container">
<div class="col-sm-8 col-md-4">
<div class="thumbnail">
<img src="<? echo $rows['image']; ?>" class="img-responsive">
<div class="caption">
<h3><? echo $rows['name']; ?></h3>
<p><? echo $rows['description']; ?></p>
<p>Open Project</p>
</div>
</div>
</div>
</div>
<?php
}
mysql_close();
?>
The pictures are correctly placed in a thumbnail, however the thumbnails are placed on a new row when it goes to the next record in the database. It should however have 3 thumbnails(3 database records) before going on to the next row.
Does anyone know how to fix this so I can have 3 thumbnails in a row?
Try to add the .row class:
<div class="container">
<div class="row">
<div class="col-sm-8 col-md-4">
...
</div>
</div>
</div>
Try this.
<div class="container">
<div class="col-sm-8 col-md-4">
<?php while($rows=mysql_fetch_array($result)){ ?>
<div class="thumbnail">
<img src="<? echo $rows['image']; ?>" class="img-responsive">
<div class="caption">
<h3><? echo $rows['name']; ?></h3>
<p>
<? echo $rows[ 'description']; ?>
</p>
<p>Open Project
</p>
</div>
<?php } mysql_close(); ?>
</div>
</div>
</div>
and add
.img-responsive{display:inline-block;}
to your css.
this should do it.