Groeperen van items

Door Johan Steel op 12-05-2020 17:26 gewijzigd op 12-05-2020 17:52

4.548 views

Gents,

Jullie hebben mij al erg geholpen in andere topics, hopelijk lukt het nu weer. Ik probeer een image gallery op te zetten en tot nu toe lukt dat aardig. Ik heb een pagina waar gebruikers een diersoort kunnen kiezen bijvoorbeeld 'kat', 'paard', 'hond'. Vervolgens wordt vanuit de database alle dieren van die diersoort uitgespuugd. Dit werkt (danzij jullie) goed!

Wat ik nu graag zou willen is de complete verzameling aan dieren in 1 overzicht laten uitspugen. Opzich is dat geen probleem, ook dat lukt. Maar ik zou ze graag per diersoort groeperen. Ik denk zelf aan een section per diersoort, en dan een kopje om welk diersoort het gaat. De code die ik nu heb en het totaal overzicht uitspuugt:


<?php
    include 'header.php';
      $sql1 = "SELECT * FROM dataset2";
      $result1 =  mysqli_query($conn, $sql1);
      $queryResult1 = mysqli_num_rows($result1);

?>
<html>
      <head>
        <title>Alle dieren</title>
         
      </head>
  <p style="font-size:40px" >Alle dieren</p>
 <body>

  <?php
  if($queryResult1 > 0) echo
  "<section class='head_container'>
  <p>($queryResult1)</p>
  </section>";
  ?>

 <section class="container">
          <?php
                if($queryResult1 > 0){
                 while($row = mysqli_fetch_assoc($result1)){
                       echo "
                              <div class='item'>
                              <a href='images_normal/".$row['photo_id'].".jpg'><img 
                              src='images/".$row['photo_id'].".jpg' width='300' height='169'></a><br>
                              <a href=".$row['link']." target='_blank'>
                              <b>".$row['common_name']."</b><br>
                              <i>(".$row['full_name'].")</i><br>
                              ".$row['country'].", ".$row['area'].", ".$row['year_photo']."</a>
                              </div>";

          }
          }

          ?>

</section>
</body>
</html>

Wellicht kan iemand mij op weg helpen?

Thanks!

Johan

- Ariën -

12-05-2020 17:52 gewijzigd op 12-05-2020 22:42

Gebruik ORDER BY diersoort in je query. en verwerk dit in je query.
Zodra er een andere diersoort wordt getoond (begint bij een lege string) dan komt er een tussenrij met de diersoort.


<table>
<?php
$result = mysqli_query($conn, $sql);
$previousItem = '';

while($data = mysqli_fetch_assoc($result))
{
  if( $previousItem != $data['categorie'] )
  {
    echo '<tr><td>'.$data['categorie'] ).'</td></tr>';
    $previousItem = $data['categorie'];
  }

  echo '<tr>
           <td>'.$data['content'].'</td>
        </tr>';
}
?>
</table>

Thomas van den Heuvel

12-05-2020 18:26 gewijzigd op 12-05-2020 18:28

Wellicht bedoel ORDER BY?

En misschien is het een beter idee om uit te denken hoe je je pagina's organiseert, en daar dan een technische implementatie bij maakt.

Scheid het ontwerp (design) en de bouw (techniek).

Johan Steel

12-05-2020 22:38

Hi All,

Dank voor de hulp! Ik denk dat ik weer een stapje verder ben. Ik heb de code van Ariën gebruikt en de output was slechts 1 diersoort en 1 naam. (terwijl er tientallen diersoorten zijn en ook meerdere namen per diersoort). Hierna de tip van Thomas gebruikt "ORDER BY" ipv "GROUP BY" en waarempel, meer output :-).

Thing is, het lijkt een soort van random output (ik kan iig geen patroon/structuur ontdekken). Wat er gebeurt is dat de diersoorten verschillende keren uitgespuugd worden. Dus bijvoorbeeld:
'Paard', 'Linda', 'Saskia',
'Kat', 'Toby', '
'Paard', 'Paula'
'hond', 'Floris', 'Jan', 'Klaas'
'Paard', 'Hendrik'

Afijn, zoals je ziet in het voorbeeld, is het lastig om te bepalen waar het mis gaat?

Dit is de code:

<?php
include 'header.php';
$sql = "SELECT * FROM dataset2 ORDER BY 'diersoort'";
$result = mysqli_query($conn, $sql);
$queryResult = mysqli_num_rows($result);
$previousItem= '';

?>


<html>
      <head>
        <title>Alle dieren</title>
      </head>
 <body>
 <table>

<?php
while($data = mysqli_fetch_assoc($result))
{
if($previousItem != $data['diersoort'])
{
echo "<tr>
<td><b><br>".$data['diersoort']."</td></b>
</tr>";

$previousItem = $data['diersoort'];
}

echo"<tr>
<td>".$data['common_name']."</td>
</tr>";
}
?>


</table>
</body>
</html>

Iemand die ziet waar het misgaat?

Thanks!

Johan

- Ariën -

12-05-2020 22:42

Diersoort is een veld. Dus haal die quotes eens weg in je query.

Johan Steel

13-05-2020 11:43

Hi Ariën,

Goed gezien! Dit was het probleem.. Blijkbaar heb ik een issue met quotes ;-)..

De output klopt nu. Echter de opmaak is wat anders geworden. Voor de "alle diersoorten" aanpassing werden alle afbeeldingen keurig verdeeld over het grid, nu wordt alles naar links uitgelijnd. Dit is de code:


<?php
include 'header.php';
  $sql = "SELECT * FROM dataset2 ORDER BY diersoort";
  $result =  mysqli_query($conn, $sql);
  $queryResult = mysqli_num_rows($result);
  $previousItem= '';

?>
<html>
      <head>
        <title>Alle dieren</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
              body
              {
                text-align:center;
                background-color: #EEEEEE;
                font-family: font-family: medium-content-sans-serif-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;;
              }
              .container{
                width:1000px;
                height:100%;
                margin: auto;
                background-color:white;
                font-family:Helvetica,arial;
                font-weight: normal;
                text-decoration: none;

                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
                justify-items: center;
                grid-gap: 0px;
                grid-row-gap: 0px;
               }

                .head_container{
                  width:1000px;
                  height:20px;
                  margin: auto;
                  text-align: center;
                  background-color:white;
                  font-family:font-family: medium-content-sans-serif-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;;
                  font-weight: normal;
                  font-size: 30px;
                 }
                .item{
                  font-family:Helvetica,arial,;
                  font-weight: normal;
                  text-decoration: none;
                  font-size: 14px;
                  width: 300px;
                  height: 200px;
                  margin: 18px;
                  }
                  img {
                    border-radius: 3%;
                  }

                  a{
                    text-decoration:none;
                    color: inherit;
                  }

      @media only screen and (max-width: 70em) {
      .container{
        width: 98%;
      }
      .head_container{
        width: 98%;
       }

        }

    </style>
  </head>
  <p style="font-size:40px" >Alle dieren</p>
 <body>
          <?php

                 while($data= mysqli_fetch_assoc($result)){
                   {
                     if($previousItem != $data['diersoort'])
                        {
                        echo "<section class='head_container'>
                              ".$data['diersoort']."
                              </section>";

                        $previousItem = $data['diersoort'];
                        }

                       echo "
                              <section class='container'>
                              <div class='item'>
                              <a href='images_normal/".$data['photo_id'].".jpg'><img src='images/".$data['photo_id'].".jpg' width='300' height='169'></a><br>
                              <a href=".$data['link']." target='_blank'>
                              <b>".$data['common_name']."</b><br>
                              <i>(".$data['full_name'].")</i><br>
                              ".$data['country'].", ".$data['area'].", ".$data['year']."</a>
                              </div></section>";
          }
          }
          ?>
</body>
</html>

Iemand die ziet wat er misgaat? Ik probeer twee secties te creeeren een kop met diersoort en de plaatjes en namen daaronder.

Groet,

Johan

- Ariën -

13-05-2020 12:22

Kunnen we een voorbeeld zien? Of heb je een snippet op JSfiddle staan?

Johan Steel

13-05-2020 21:27 gewijzigd op 13-05-2020 21:30

Hi Ariën,

Voorbeeld:

Hopelijk is het duidelijk.

Groet,

Johan

- Ariën -

13-05-2020 21:54

Kijk eens naar float:left, of een flexbox?

Johan Steel

13-05-2020 21:58

Thanks voor de suggestie! Het ging mij vooral om de HTML code in de php echo, wellicht dat daar iets anders moet. Want in de CSS heb ik niks veranderd en voor de aanpassing ging het wel goed. Ik dacht wellicht heeft het met de section/items te maken.

Ik ga dan toch maar even in de css proberen..

Gr,

Johan

- Ariën -

13-05-2020 22:11

Laat anders eens een voorbeeld van je site zien, zodat we daarmee kunnen rommelen?

Reageren

Inloggen om te reageren