Member Avatar for ernest_5

I want to display records from my database in div and in a grid format using php. I want to set it to display 3 items in a row and then create another row and then display another 3 items continuously until the set limit but unfortunately only one item is showing. Seems there is something wrong with the php code somewhere which i don't know. Please someone should help me figure it out. The code is below

<?php
//for image upload

session_start();
$_SESSION['message']="";

$mysqli = new mysqli('localhost', 'root', '','auction');
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$item_name = $mysqli->real_escape_string($_POST['item_name']);
$item_description = $mysqli->real_escape_string($_POST['item_description']);
$item_image_path = $mysqli->real_escape_string('Images/item_img/'.$_FILES['item_image']['name']);

//make sure file is of image type
if (preg_match("!image!", $_FILES['item_image']['type'])) {
    if (copy($_FILES['item_image']['tmp_name'], $item_image_path)) {
        $_SESSION['item_name'] = $item_name;
        $_SESSION['item_description'] = $item_description;  
        $_SESSION['item_image'] = $item_image_path;
        $sql = "INSERT INTO items (item_name, item_image, item_description)
                VALUES('$item_name', '$item_image_path','$item_description')";
        if ($mysqli->query($sql) === true) {
            $_SESSION['message'] = "Item Upload Successful!";
        } 
        else {
            $_SESSION['message'] = "file upload failed";
        }

    }
    else{
        $_SESSION['message'] = "file copying failed";
        }
}
     else {
    $_SESSION['message'] = "please upload gif, jpg, png";
}

}

?> <?php
$result = $mysqli->query("SELECT * FROM items ORDER BY rand() LIMIT 10")
or die($mysqli->error);

?> <html> <head> <title>Upload item</title> <link rel="StyleSheet" href="Bootstrap/css/bootstrap.main.css"> <link rel="StyleSheet" href="Bootstrap/css/bootstrap.min.css"> <link rel="StyleSheet" href="style.css"> <!--for countdown timer--> <script>
var seconds = 60*60;
function secondPassed() {
var minutes = Math.round((seconds - 30)/60);
var remainingSeconds = seconds % 60;
if (remainingSeconds < 10) {
    remainingSeconds = "0" + remainingSeconds;  
}
document.getElementById('countdown').innerHTML = minutes + ":" + remainingSeconds;
if (seconds == 0) {
    clearInterval(countdownTimer);
    document.getElementById('countdown').innerHTML = "Buzz Buzz";
} else {
    seconds--;
}
}

var countdownTimer = setInterval('secondPassed()', 1000);
</script> </head> <body> <div> <!--to display records from database--> <div class = "row c-head mar-pad"> <?php
            $A=0;
                while ($auction = $result->fetch_assoc()):?> <?php
                if ($A%3==0):?> <div class = ""> <h4><?=$auction['item_name']?></h4> <img src='<?=$auction['item_image']?>' class='img-responsive'> <span id="countdown" class="timer">how</span> <button class ="c-button" name ='bid'>Bid Now!</button> </div> <?php $A++;?> <?php endif;?> <?php endwhile;?> </div> <!--for file upload form--> <form class="form-horizontal" role="form" action="auction_upload.php" method="POST" enctype="multipart/form-data"> <h1><?=$_SESSION['message']?></h1> <div class=" form-group"> <label class="control-label col-sm-2">Item Name:</label> <div class="col-sm-8"> <INPUT type="text" class="form-control" name="item_name" required/> </div> </div> <div class="form-group"> <label class="control-label col-sm-2">Item Image:</label> <div class="col-sm-8"> <INPUT type="file" class="form-control" name="item_image" accept="image/*" required/> </div> </div> <div class="form-group"> <label class="control-label col-sm-2">Item Description:</label> <div class="col-sm-8"> <textarea class="form-control" name="item_description" required>
  • 2 Contributors
  • 6 Replies
  • 2K Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by ernest_5
Member Avatar for AndrisP

$A need to incremented after endif; but print whatever

<?php
    $A=0;
    while ($auction = $result->fetch_assoc()):
        if ($A%3==0): ?><br/><?php endif;
        $A++;
        ?>
        <div style="float:left;">
            <h4><?=$auction['item_name']?></h4>
            <img src="<?=$auction['item_image']?>" class="img-responsive">
            <span id="countdown" class="timer">how</span>
            <button class="c-button" name='bid'>Bid Now!</button>
        </div><?php
    endwhile;
?>
Edited by AndrisP
commented: Increment +1. +12
Member Avatar for ernest_5

it's displaying multiple items in a grid form quite ok but just two in a row and in an uneven form. i guess it's because of the CSS float attribute which can float only two items in a row. I want to display more than one item in a row...say 4 items in a row. Please how can i fix this?

Edited by ernest_5
Member Avatar for AndrisP

Define in css float:left; sizes max-width and max-height
use it class instead of style="float:left;"

Edited by AndrisP
Member Avatar for ernest_5

i tried it but it still didn't work.

Member Avatar for AndrisP

decrease max-width

Member Avatar for ernest_5

It works! Though the sizes are uneven even as i have defined them. I guess i have to continue tweaking them. Thanks so very much.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.