Avatar billede nolsen89 Juniormester
06. juni 2016 - 11:27 Der er 9 kommentarer og
1 løsning

php mysqli bygget ind i et bootstrap grid system??

hej eksperter.
jeg har et lille problem med en query select, som jeg ønsker og sætte ind i et bootstrap grid system.
men jeg ønsker og ta 12 rows fra min database også dele dem op i 3 grid rows med 4 resultater i hver grid row

illustration:

//gridrow1----------------------------------------------------
resultat (1) - resultat (2) - resultat (3) - resultat (4)

//gridrow2----------------------------------------------------
resultat (5) - resultat (6) - resultat (7) - resultat (8)

//gridrow3----------------------------------------------------
resultat (9) - resultat (10) - resultat (11) - resultat (12)

og der skal selvfølgelig være bootstrap effect alt efter om det er stor eller lille skærm..
håber i forstår hvad jeg mener..

jeg har denne kode pt, men hvergang den skifter linje så bliver gridet kastet rundt på omkring på siden.


<!-- Blog Entries Column -->
    <div class="col-md-9">
       
        <!-- Blog Post -->
        <?php
       
        $query = "SELECT * FROM posts ORDER BY post_id DESC";
        $select_all_posts_query = mysqli_query($connection, $query);
       
        while($row = mysqli_fetch_assoc($select_all_posts_query)){
            $post_id = $row['post_id'];
            $post_title = $row['post_title'];
            $post_author = $row['post_author'];
            $post_date = $row['post_date'];
            $post_image = $row['post_image'];
            $post_content = substr($row['post_content'],0,200);
            $post_status = $row['post_status'];
           
            if($post_status == 'Published'){
            ?>
        <div class="col-md-3">
        <h3>
            <a href="post.php?p_id=<? echo $post_id ?>"><? echo $post_title ?></a>
        </h3>
        <p><? echo $post_date ?></p>
        <a href="post.php?p_id=<? echo $post_id ?>">
        <? if($post_image){echo "<hr><img class='img-responsive' src='images/", $post_image ,"' width='200'>";} ?>
        </a>
        <hr>
        </div>
        <?php
            }
        }
        ?>

    </div>
06. juni 2016 - 12:05 #1
Du skal altid have en <div class="row"> rundt om dine columns. Hvis alt indhold i hver col har samme højde behøves du ikke selv at dele det op i flere rows.


<div class="row">
<div class="col-md-3>Element 1.1</div>
<div class="col-md-3>Element 1.2</div>
<div class="col-md-3>Element 1.3</div>
<div class="col-md-3>Element 1.4</div>
<div class="col-md-3>Element 2.1</div>
<div class="col-md-3>Element 2.2</div>
<div class="col-md-3>Element 2.3</div>
<div class="col-md-3>Element 2.4</div>
</div>

Ovenstående giver 2 rækker med 4 elementer
06. juni 2016 - 12:23 #2
Her er et komplet eksempel:

<!DOCTYPE html>
<html>
<head>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
          integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"
          integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

</head>

<body>
<div class="container">

    <div class="row">
        <div class="col-md-3">Element 1.1</div>
        <div class="col-md-3">Element 1.2</div>
        <div class="col-md-3">Element 1.3</div>
        <div class="col-md-3">Element 1.4</div>
        <div class="col-md-3">Element 2.1</div>
        <div class="col-md-3">Element 2.2</div>
        <div class="col-md-3">Element 2.3</div>
        <div class="col-md-3">Element 2.4</div>
    </div>
</div>


<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
        integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
        crossorigin="anonymous"></script>


</body>


</html>
Avatar billede nolsen89 Juniormester
06. juni 2016 - 14:01 #3
du glemmer bare php mysql queryèn, plus at mine column ikke har sammen højde..
06. juni 2016 - 14:31 #4
For at løse det med højden kan du jo indsætte "</div><div class='row'>" imellem hver 4 element du udskriver med queryen.

Hvad du lige bruger til at generer din html med(statisk html, php, jsp, asp osv.) er sådan set ligegyldigt. Blot du sikre dig at det bliver den rette html.

Jeg har nu beskrevet dig et løsningsforslag, og så syntes jeg selv du skal gøre et forsøg på at gennemføre det ;-)
06. juni 2016 - 14:33 #5
Evt. kom med et opdateret eksempel hvor du har forsøgt at løse problemet.
Avatar billede nolsen89 Juniormester
06. juni 2016 - 14:41 #6
sådan nu har jeg gjordt som du sagde og det ser godt ud, men som du kan se så er det rigtig meget kode og alt for mange $queryèr til og gøre en og samme ting..

det må vel kunne gøres på en bedre måde, så man ikke tager alt trafikken til databasen???

<!-- Blog Post -->
        <div class="row">
        <?php
       
        $query = "SELECT * FROM posts ORDER BY post_id DESC LIMIT 1, 4 ";
        $select_all_posts_query = mysqli_query($connection, $query);
       
        while($row = mysqli_fetch_assoc($select_all_posts_query)){
            $post_id = $row['post_id'];
            $post_title = $row['post_title'];
            $post_author = $row['post_author'];
            $post_date = $row['post_date'];
            $post_image = $row['post_image'];
            $post_content = substr($row['post_content'],0,200);
            $post_status = $row['post_status'];
           
            if($post_status == 'Published'){
            ?>
        <div class="col-xs-3">
        <h3>
            <a href="post.php?p_id=<? echo $post_id ?>"><? echo $post_title ?></a>
        </h3>
        <p><? echo $post_date ?></p>
        <a href="post.php?p_id=<? echo $post_id ?>">
        <? if($post_image){echo "<hr><img class='img-responsive' src='images/", $post_image ,"' width='200'>";} ?>
        </a>
        <hr>
        </div>
        <?php
            }
        }
        ?>

    </div>
    <div class="row">
        <?php
       
        $query = "SELECT * FROM posts ORDER BY post_id DESC LIMIT 5, 8 ";
        $select_all_posts_query = mysqli_query($connection, $query);
       
        while($row = mysqli_fetch_assoc($select_all_posts_query)){
            $post_id = $row['post_id'];
            $post_title = $row['post_title'];
            $post_author = $row['post_author'];
            $post_date = $row['post_date'];
            $post_image = $row['post_image'];
            $post_content = substr($row['post_content'],0,200);
            $post_status = $row['post_status'];
           
            if($post_status == 'Published'){
            ?>
        <div class="col-xs-3">
        <h3>
            <a href="post.php?p_id=<? echo $post_id ?>"><? echo $post_title ?></a>
        </h3>
        <p><? echo $post_date ?></p>
        <a href="post.php?p_id=<? echo $post_id ?>">
        <? if($post_image){echo "<hr><img class='img-responsive' src='images/", $post_image ,"' width='200'>";} ?>
        </a>
        <hr>
        </div>
        <?php
            }
        }
        ?>

    </div>
    <div class="row">
        <?php
       
        $query = "SELECT * FROM posts ORDER BY post_id DESC LIMIT 9, 12 ";
        $select_all_posts_query = mysqli_query($connection, $query);
       
        while($row = mysqli_fetch_assoc($select_all_posts_query)){
            $post_id = $row['post_id'];
            $post_title = $row['post_title'];
            $post_author = $row['post_author'];
            $post_date = $row['post_date'];
            $post_image = $row['post_image'];
            $post_content = substr($row['post_content'],0,200);
            $post_status = $row['post_status'];
           
            if($post_status == 'Published'){
            ?>
        <div class="col-xs-3">
        <h3>
            <a href="post.php?p_id=<? echo $post_id ?>"><? echo $post_title ?></a>
        </h3>
        <p><? echo $post_date ?></p>
        <a href="post.php?p_id=<? echo $post_id ?>">
        <? if($post_image){echo "<hr><img class='img-responsive' src='images/", $post_image ,"' width='200'>";} ?>
        </a>
        <hr>
        </div>
        <?php
            }
        }
        ?>

    </div>
06. juni 2016 - 14:52 #7
Ja, du skal kun have queryen én gang

<div class='row'><
<?php (din query) ?>
</div>

Derudover skal du så tilrette queryen koden så du har en $counter der tæller én op ($counter++) pr. elementer du udskriver. Når den counter så når til 4 skal du udskrive </div><div class='row'> for at afslutte en række og starte på en nye.
Avatar billede Slater Ekspert
06. juni 2016 - 15:18 #8
Bare et lille tip, men det er nemmere at bruge modulus end at starte counteren forfra.

F.eks.:

$counter = 0;

// loop
if ($counter++ % 4 == 0)
    echo 'Ny row her';

echo 'Udskriv cols her';

// loop end
07. juni 2016 - 09:14 #9
Er du kommet videre eller har du brug for mere hjælp?
Avatar billede nolsen89 Juniormester
09. juni 2016 - 20:29 #10
fandt en løsning på stackoverflow.com
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester