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.
Related
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
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.
Im making a website which is supposed to show records in a database including images. The texts show but the images won't. The problem lies within the tag.
<?php
while ($rows = $result->fetch_assoc()) {
?>
<div class="col-container">
<div class="row">
<div class="column">
<div class="card">
<img src="<?php echo $rows['Image'] ?>"/>
<div class="container">
<h2><?php echo $rows['PartijNaam'] ?></h2>
<p class="title"><?php echo $rows['Lijsttrekker'] ?></p>
<form action="information.php">
<p><input type="submit" class="button" href="information.php"></input></p>
</form>
</div>
</div>
</div>
</div>
<?php
}
?>
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.
In every loop I want to alternate the layout of my blocks, so it would be like this:
Loop 1: Left column image, right column text
Loop 2: Left column text, right column image
But so far all i'm managing so far is each block is on the same side or the first block is duplicated, here is my code so far:
Any help or a point in the right direction would be greatly appreciated
<?php $i = 0;
foreach ($homepageblocks as $block):
$i++; ?>
<div class="row">
<div class="container container-fluid">
<div class="col-md-6">
<h2><?php echo $block['title']; ?></h2>
<?php echo $block['content']; ?>
Read More
</div>
<div class="col-md-6 nopadding">
<img src="<?php echo '/uploads'.$img_path; ?>" alt="<?php echo $block['title']; ?>"/>
</div>
</div>
</div>
<?php if($i%2 == 0): ?>
<div class="row">
<div class="container container-fluid">
<div class="col-md-6 nopadding">
<img src="<?php echo '/uploads'.$img_path; ?>" alt="<?php echo $block['title']; ?>" />
</div>
<div class="col-md-6">
<h2><?php echo $block['title']; ?></h2>
<?php echo $block['content']; ?>
Read More
</div>
</div>
</div>
<?php endif; ?>
<?php endforeach; ?>
Add else branch to your if:
foreach ($homepageblocks as $block):
$i++;?>
<div class="row">
<div class="container container-fluid">
<?php
// one layout type
if($i%2 == 0):?>
<div class="col-md-6 nopadding">
<img src="<?php echo '/uploads'.$img_path; ?>" alt="<?php echo $block['title']; ?>" />
</div>
<div class="col-md-6">
<h2><?php echo $block['title']; ?></h2>
<?php echo $block['content']; ?>
Read More
</div>
<?php
// another layout type
else:?>
<div class="col-md-6">
<h2><?php echo $block['title']; ?></h2>
<?php echo $block['content']; ?>
Read More
</div>
<div class="col-md-6 nopadding">
<img src="<?php echo '/uploads'.$img_path; ?>" alt="<?php echo $block['title']; ?>"/>
</div>
<?php
endif;?>
</div>
</div>
<?php
endforeach; ?>