i need some help with one problem, i tried to make a card carousel getting data from my mysql database, all went well but the cards are displayed under each other not like it should be displayed in a carousel/slider, any ideas how could i fix this to show them in one line?
here is my code and a picture:
<?php
include_once 'includes/dbh.inc.php';
?>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<meta charset="utf-8">
<title>carusel</title>
</head>
<body>
<section class="container p-t-3">
<div class="row">
<div class="col-lg-12">
<h1>Bootstrap 4 Card Slider</h1>
</div>
</div>
</section>
<section class="carousel slide" data-ride="carousel" id="postsCarousel">
<div class="container">
<div class="row">
<div class="col-xs-12 text-md-right lead">
<a class="btn btn-outline-secondary prev" href="" title="go back"><i class="fa fa-lg fa-chevron-left"></i></a>
<a class="btn btn-outline-secondary next" href="" title="more"><i class="fa fa-lg fa-chevron-right"></i></a>
</div>
</div>
</div>
<div class="container p-t-0 m-t-2 carousel-inner">
<div class="row row-equal carousel-item active m-t-0">
<div class="col-md-4">
<?php
$sql = "SELECT * FROM users;";
$results = mysqli_query($conn, $sql);
$resultCheck = mysqli_num_rows($results);
if ($resultCheck > 0){
while ($row = mysqli_fetch_assoc($results)) { ?>
<div class="card" style="width: 18rem;">
<div class="card-img-top">
<img class="img-fluid" src="<?php echo $row['avatar']; ?>" alt="Carousel">
</div>
<div class="card-body">
<h5 class="card-title"><?php echo $row['user_first'].' '.$row['user_last']; ?></h5>
<p><?php echo $row['card_text_profil']; ?></p>
Profil site
</div>
</div>
<?php } ?>
<?php } ?>
</div>
</div>
</div>
</section>
</body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.13.0/umd/popper.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="js/scripts.js"></script>
</html>
You're closing 2 </div> inside the while loop, but they are being opened before the while loop, you need to add them to the beginning of the while loop.
Added a condition to check if it's the first element in the carousel, and if it is, add the active class as required per the documentation.
Initial active element required The .active class needs to be added to
one of the slides. Otherwise, the carousel will not be visible.
The code I suggest as an answer makes it a lot more readable, this makes it a lot easier to prevent problems of this nature. Indentation goes a long way to help you see clearly where a block/loop starts and where it ends.
Working minimal fiddle here.
Replace:
<div class="container p-t-0 m-t-2 carousel-inner">
<div class="row row-equal carousel-item active m-t-0">
<div class="col-md-4">
<?php
$sql = "SELECT * FROM users;";
$results = mysqli_query($conn, $sql);
$resultCheck = mysqli_num_rows($results);
if ($resultCheck > 0){
while ($row = mysqli_fetch_assoc($results)) {
//echo '<tr><th scope="row">'.$row['user_id'].'</th><td>'.$row['user_last']."</td><td>".$row['user_uid']."</td></tr>";
/*echo '<div class="card" style="width: 18rem;">';
echo '<img class="card-img-top" src="'.$row['avatar'].'" alt="Card image cap">';
echo '<div class="card-body">';
echo '<h5 class="card-title">'.$row['user_first'].' '.$row['user_last'].'</h5>';
echo '<p class="card-text">'.$row['card_text_profil'].'</p>';
echo 'Profil site';
echo '</div>';
echo '</div>';*/
echo '<div class="card" style="width: 18rem;">';
echo '<div class="card-img-top">';
echo '<img class="img-fluid" src="'.$row['avatar'].'" alt="Carousel">';
echo'</div>';
echo '<div class="card-body">';
echo '<h5 class="card-title">'.$row['user_first'].' '.$row['user_last'].'</h5>';
echo '<p class="card-text">'.$row['card_text_profil'].'</p>';
echo 'Profil site';
echo '</div>';
echo '</div>';
echo '</div>';
echo '</div>';
}
}
?>
</div>
With:
<div class="container p-t-0 m-t-2 carousel-inner">
<?php
$sql = "SELECT * FROM users;";
$i = 1;
$results = mysqli_query($conn, $sql);
$resultCheck = mysqli_num_rows($results);
if ($resultCheck > 0){
while ($row = mysqli_fetch_assoc($results)) { ?>
<?php if($i % 2 != 0): //add new slider every odd row ?>
<div class="row row-equal carousel-item <?php echo ($i == 1) ? "active" : ""; ?> m-t-0">
<?php endif; ?>
<div class="col-md-4">
<div class="card" style="width: 18rem;">
<div class="card-img-top">
<img class="img-fluid" src="<?php echo $row['avatar']; ?>" alt="Carousel">
</div>
<div class="card-body">
<h5 class="card-title"><?php echo $row['user_first'].' '.$row['user_last']; ?></h5>
<p><?php echo $row['card_text_profil']; ?></p>
Profil site
</div>
</div>
</div>
<?php if($i % 2 != 0): //add new slider every odd row ?>
</div>
<?php endif; ?>
<?php $i++; } ?>
<?php } ?>
</div>
what about this css files do you float the picture divs?
Related
I've made a website that displays all products with images. Now what I'm trying to figure out is, how to make the image clickable and when the image is clicked it displays the product information page? Thank you for your help! :)
This is my product.php page.
<?php
include_once 'includes/dbh.inc.php';
?>
<body>
<!--- featured products --->
<div class="small-container">
<div class="row row-2">
<h2 class="title"> Featured Products</h2>
<select>
<option>Default</option>
<option>By Price</option>
</select>
</div>
<div class="row">
<?php
$sql = "SELECT * FROM cakes;";
$result = mysqli_query($conn, $sql);
$resultCheck = mysqli_num_rows($result);
if ($resultCheck > 0 ) {
while ($row = mysqli_fetch_assoc($result)) {
?>
<div class="col-4">
<img src= <?php echo $row['image'];?>>
<h4><?php echo $row['name']; ?></h4>
<p>$<?php echo $row['price']; ?></p>
</div>
<?php
}
}
?>
</div>
</div>
</body>
Below is my database.
Edit this:
<div class="col-4">
<img src= <?php echo $row['image'];?>>
<h4><?php echo $row['name']; ?></h4>
<p>$<?php echo $row['price']; ?></p>
</div>
to this:
<div class="col-4">
<img src= <?php echo $row['image'];?>>
<h4><?php echo $row['name']; ?></h4>
<p>$<?php echo $row['price']; ?></p>
</div>
I am trying to add products dynamically from SQL database and using Bootstrap here but it shows my product on next line even if I am not using row the same result shown.
Here is my code and output.
include ("connection.php");
$sql = "select * from products";
$result = mysqli_query($con,$sql);
while ($row = $result->fetch_assoc())
{
?>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="card" style="width: 18rem;">
<img src="<?php echo $row['Pimage'] ?>" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title"><?php echo $row['Pname'] ?></h5>
<p class="card-text"><?php echo $row['Pdesc'] ?></p>
<P><?php echo $row['Pprice'] ?>PKR</P>
ADD To Cart
</div>
</div>
</div>
</div>
</div>
<?php
}
?>
You should do something like this
<div class="container">
<div class="row">
<?php
include ("connection.php");
$sql = "select * from products";
$result = mysqli_query($con,$sql);
while ($row = $result->fetch_assoc()){
?>
<div class="col-lg-3">
<div class="card" style="width: 18rem;">
<img src="<?php echo $row['Pimage'] ?>" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title"><?php echo $row['Pname'] ?></h5>
<p class="card-text"><?php echo $row['Pdesc'] ?></p>
<P><?php echo $row['Pprice'] ?>PKR</P>
ADD To Cart
</div>
</div>
</div>
<?php
}
?>
</div>
In that way you will have 4 columns of products
I am trying to get a mysql query of results to print out alongside each other, say 3 in a row and not one below the other.
I have tried stack overlow answers and I cannot find one that helps
<?php
include('db.php');
$results = mysqli_query($conn, "SELECT * FROM contacts");
if(isset($_GET['edit'])){
$id = $_GET['edit'];
$edit_state = true;
$rec =mysqli_query($db_connection, "SELECT * FROM contacts WHERE id=$id ");
$record = mysqli_fetch_array($rec);
$name = $record['name'];
$contact = $record['contact'];
$email = $record['email'];
$id =
$record['id'];
}?>
<div class="container">
<h1 class="my-4">Welcome to Modern Business</h1>
<!-- Marketing Icons Section -->
<?php while ($row = mysqli_fetch_array($results)){ ?>
<div class="row">
<div class="col-lg-4 mb-4">
<div class="card h-100">
<h4 class="card-header"><?php echo $row['name']; ?></h4>
<img class="img_size" src="images/dog2.jpg" alt="Card image top">
<div class="card-body">
<p class="card-text"><?php echo $row['contact']; ?></p>
</div>
<div class="card-footer">
Learn More
</div>
</div>
</div>
</div>
<?php } ?>
right now, the cards are printing out but not inline, one below the other. I would like them to print horizontally.
any help at all would be appreciated, I am new to php.
This is the wrong outcome, I want them beside each other
PHP code:
<?php
include('dbconn.php'); // include database connection
$output="";
$selQuery = "select * from tbl_name";
$exeQuery = mysqli_query($conn,$selQuery);
$output="<h2>Welcome to Modern Business
<div class='container'>
<div class='row'>";
while($row = mysqli_fetch_array($exeQuery)) {
$name = $row['name'];
$desciption = $row['desciption'];
$ephoto = $row['ephoto'];
$output.="<div class='col-sm-4'>
<h4 class='card-header'>$name</h4>
<img class='img_size' src='$ephoto' alt='Card image top'>
<p>$desciption</p>
<a href='#' class='btn btn-primary'>Learn More</a>
</div>";
}
$output.="</div></div></h2>";
echo $output;
?>
HTML markup including bootstrap links:
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
</html>
You need to put the while loop before the following div and end it when div ends.
<?php while($row=mysqli_fetch_array($results)){ ?>
<div class="card h-100">
<h4 class="card-header">
<?php echo $row['name']; ?></h4>
<img class="img_size" src="images/dog2.jpg" alt="Card image top">
<div class="card-body">
<p class="card-text"><?php echo $row['contact']; ?></p> </div>
<div class="card-footer">
<a href="#" class="btn btn-primary">
Learn More
</a>
</div>
</div>
<?php } ?>
Also replace col-lg-4 with col-lg-12
Try this and update me.
I imported a database in phpMyAdmin that contains articles. I want it to be regulated, to automatically post the image, title, and contents in the articles page. And to direct it to another page when clicked.
But when rendering the articles page, the second row has two columns offset. I think it's the content of the first 2 articles that's making the problem since I did another tables with few contents in it then it renders exactly the way I want(a row that contains 3 articles an no offset below it). I'm a newbie here, feel free to suggest if there's a better way. I genuinely appreciate it. Thank you!
<div class="blogs-2" id="blogs-2">
<div class="container">
<div class="row">
<div class="col-md-10">
<div class="row">
<?php
$sql = "SELECT * FROM news LIMIT 20";
$result= $DBcon->query($sql);
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
?>
<div class="col-md-4" style="margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0; ">
<div class="card card-plain card-blog" style="max-height:300px;float:left;">
<div class="card-image">
<a href="../news/article.php?id=<?php echo $row['id']; ?>">
<img class="img img-raised" src="<?php header("Content-type: image/png"); echo $row['featured_image'] ?>" style="max-height:300px;" />
</a>
</div>
<div class="card-content">
<h4 class="card-title">
<a href="../news/article.php?id=<?php echo $row['id']; ?>">
<?php echo $row['title']; ?>
</a>
</h4>
<p class="card-description" style="overflow: hidden;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;">
<?php echo $row['content']; ?>
</p>
<p class="card-description">
Read More
</p>
</div>
</div>
</div>
<?php
}
}
else {
echo "<p>No News Articles to Display</p>";
}
?>
</div>
</div>
<div class="col-md-2">
<h4 class="title">Recent News</h4>
<ul>
<?php
$sql = "SELECT * FROM news LIMIT 5";
$result= $DBcon->query($sql);
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
echo "<li style='list-style:none;color:black;padding-top:5px;padding-bottom:5px;'><a href='../news/article.php?id={$row['id']}'>" .$row['title']. "</a></li>";
}
}
else {
echo "<li style='list-style:none;'>No Recent News</li>";
}
?>
</ul>
</div>
</div><!--row-->
</div><!--container-->
</div><!--blogs-->
I have this following snippet:
<?php
if($people->num_rows >= 1) {
while($person = $people->fetch_object()) {
echo '
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="card card-user">
<div class="content">
<div class="author">
<a href="'.$system->getDomain()?>/user/<?=$person->id.'">
<img class="avatar" src="'.$system->getProfilePicture($person).'">
<h4 class="title">'.$system->getFirstName($person->full_name).', '.$person->age.'</h4>
</a>
</div>
<p class="text-center text-muted">
';
echo $person->city.$system->ifComma($person->city); echo ' '.$person->country.'
</p>
</div>
</div>
</div>
';
}
} else {
?>
however next to the actual age (after the closing H4 tag) I'd like to add a further function which shows the current online status of the user.
The code for this would be as follows:
<?php if($system->isOnline($profile->last_active)) { echo '<i class="online-status online"></i>'; } else { echo '<i class="online-status offline"></i>'; } ?>
What is the best way to combine this snippet (online status) with the statement above?
Some expert help would be greatly appreciated
Separate your HTML and PHP code and do it like the below. Your requirement is done using a single line ternary operator.
<?php
if($people->num_rows >= 1) {
while($person = $people->fetch_object()) { ?>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="card card-user">
<div class="content">
<div class="author">
<a href="<?php echo $system->getDomain().'/user/'.$person->id;?>">
<img class="avatar" src="<?php echo $system->getProfilePicture($person);?>">
<h4 class="title"><?php echo $system->getFirstName($person->full_name).', '.$person->age;?></h4>
<?php echo ($system->isOnline($profile->last_active)) ? '<i class="online-status online"></i>' : '<i class="online-status offline"></i>'; ?>
</a>
</div>
<p class="text-center text-muted">
<?php echo $person->city.$system->ifComma($person->city); echo ' '.$person->country;?>
</p>
</div>
</div>
</div>
<?php
}
}
?>