Groeperen van items

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Pagina: 1 2 volgende »

Johan Steel

Johan Steel

12/05/2020 17:26:27
Quote Anchor link
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:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<?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

Edit:
Code-tags geplaatst. Zie oko de opmaakcodes in de Veelgestelde vragen.
Tevens heb ik de topictitel aangepast naar iets wat duidelijker is.
Gewijzigd op 12/05/2020 17:52:57 door - Ariën -
 
PHP hulp

PHP hulp

27/11/2020 12:33:03
 
- Ariën -
Beheerder

- Ariën -

12/05/2020 17:52:10
Quote Anchor link
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.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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>
Gewijzigd op 12/05/2020 22:42:43 door - Ariën -
 
Thomas van den Heuvel

Thomas van den Heuvel

12/05/2020 18:26:53
Quote Anchor link
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).
Gewijzigd op 12/05/2020 18:28:01 door Thomas van den Heuvel
 
Johan Steel

Johan Steel

12/05/2020 22:38:28
Quote Anchor link
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:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
<?php
    include 'header.php';
      $sql = "SELECT * FROM dataset2 ORDER BY 'diersoort'";
      $result =  mysqli_query($conn, $sql);
      $queryResult = mysqli_num_rows($result);
      $previousItem= '';

?>

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
<html>
      <head>
        <title>Alle dieren</title>
      </head>
 <body>
 <table>

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?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>"
;
                   }

          ?>

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
</table>
</body>
</html>


Iemand die ziet waar het misgaat?

Thanks!

Johan
 
- Ariën -
Beheerder

- Ariën -

12/05/2020 22:42:02
Quote Anchor link
Diersoort is een veld. Dus haal die quotes eens weg in je query.
 
Johan Steel

Johan Steel

13/05/2020 11:43:48
Quote Anchor link
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:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<?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 -
Beheerder

- Ariën -

13/05/2020 12:22:24
Quote Anchor link
Kunnen we een voorbeeld zien? Of heb je een snippet op JSfiddle staan?
 
Johan Steel

Johan Steel

13/05/2020 21:27:47
Quote Anchor link
Hi Ariën,

Voorbeeld:

https://i.ibb.co/DGGk24f/Knipsel.jpg

Hopelijk is het duidelijk.

Groet,

Johan
Gewijzigd op 13/05/2020 21:30:06 door Johan Steel
 
- Ariën -
Beheerder

- Ariën -

13/05/2020 21:54:18
Quote Anchor link
Kijk eens naar float:left, of een flexbox?
 
Johan Steel

Johan Steel

13/05/2020 21:58:59
Quote Anchor link
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 -
Beheerder

- Ariën -

13/05/2020 22:11:12
Quote Anchor link
Laat anders eens een voorbeeld van je site zien, zodat we daarmee kunnen rommelen?
 
Johan Steel

Johan Steel

13/05/2020 22:27:52
Quote Anchor link
OK! Ik denk dat mijn eerdere post de situatie wel goed schetst, maar wellicht helpt het:

Voor de aanpassing:

https://i.ibb.co/WfKB86c/darters-voor.jpg

Na de aanpassing:

https://i.ibb.co/wcsTfRd/darters-na.jpg

Zou iets simpels moeten zijn, lijkt mij. Maar ik zie het niet :-)
 
- Ariën -
Beheerder

- Ariën -

13/05/2020 22:34:29
Quote Anchor link
Dit is een kwestie van de HTML-broncodes en eventueel de CSS vergelijken.
 
Thomas van den Heuvel

Thomas van den Heuvel

13/05/2020 22:54:35
Quote Anchor link
Een heleboel HTML-tags hebben een display attribuut. Deze heeft twee varianten: block of inline.

Zogenaamde "block level elementen" zullen, als je die achtereenvolgens achter elkaar zet in je broncode, altijd op een nieuwe regel getoond worden.

De "inline elementen" kunnen standaard naast elkaar gezet worden.

Het standaard display-gedrag kun je via CSS aanpassen die van deze default afwijkt (mogelijk enkele variaties of onlogische constructies daar gelaten).

Zowel <section> alsook <div> tags hebben standaard het block display-type, dus het is niet zo verwonderlijk dat deze onder elkaar worden gezet.

Wil je dit aanpassen (zodanig dat dit van het default gedrag afwijkt), dan zul je attributen als display en float -en mogelijk meer- expliciet moeten voorzien van niet-standaard waarden voor deze elementen via ofwel rechtstreekse stijldefinities (het style-attribuut), of wellicht beter, via een CSS-class.
Gewijzigd op 13/05/2020 22:55:49 door Thomas van den Heuvel
 
Johan Steel

Johan Steel

14/05/2020 10:17:52
Quote Anchor link
Hi,

Dank weer voor het meedenken! Het comment van Thomas klinkt plausibel, dus ik ben een beetje op onderzoek uit gegaan. Maar ik betwijfel toch of bijvoorbeeld de display op block staat. Is het niet default inline? Immers wanneer ik block wel in de code toevoeg, zie je duidelijk dat er daadwerkelijk nieuwe regels ontstaan:

https://ibb.co/82j1D7J

Groet,

JOhan
Gewijzigd op 14/05/2020 10:19:24 door - Ariën -
 
- Ariën -
Beheerder

- Ariën -

14/05/2020 10:33:10
Quote Anchor link
Je kan de stijlregels eenvoudig bekijken via de Element Inspector van je browser.
 
Adoptive Solution

Adoptive Solution

14/05/2020 10:56:17
Quote Anchor link
Op onderstaand adres kan je album code ophalen.
Met wat aanpassingen en het toevoegen van je eigen code (o.a de head_container en item kan je 1 op 1 toevoegen) krijg je het resultaat wat je wilt.

https://phppot.com/php/php-responsive-image-gallery-using-css-media-queries/

Een uitgebreider fotooalbum is dit :

https://www.jqueryscript.net/layout/Pinterest-Like-Dynamic-Responsive-Grid-Layout-Plugin-BlocksIt.html
 
Johan Steel

Johan Steel

14/05/2020 16:23:31
Quote Anchor link
Hi Adoptive Solution,

Dank voor de tip! Ik heb het uitgeprobeerd (de CSS opmaak in jouw link) lijkt wel weer een stapje verder, maar tegelijk ook weer een stapje terug. Ik denk dat het komt omdat er geen gebruik gemaakt wordt van sections. DIt is het resultaat (nog niet zoals ik het wil):

https://i.ibb.co/xhCHD5m/darters2.jpg

Groet,

Johan
 
Adoptive Solution

Adoptive Solution

14/05/2020 16:32:07
Quote Anchor link
Dan voeg je sections toe.

Hier resulttaat met je eigen code
https://ibb.co/xmbtH0d
 
Johan Steel

Johan Steel

14/05/2020 17:19:29
Quote Anchor link
THanks, jouw output is gelijk aan mijn laatste post.

Het idee is om de opmaak juist te behouden (na de diersoort aanpassing):

https://i.ibb.co/WfKB86c/darters-voor.jpg>

Dank voor je hulp!

Gr,

JOhan

Toevoeging op 14/05/2020 17:42:47:

Gents,

Het ziet er naar uit dat het gelukt is! Uiteindelijk zullen het twee verschillende (=andere opmaak) divjes worden in een section. Zodra ik de code definitief werkend heb, zal ik het posten.

Iedereen dank voor het meedenken, anders was het zeker niet gelukt!

Gr,

Johan
Gewijzigd op 14/05/2020 17:21:16 door Johan Steel
 
Johan Steel

Johan Steel

16/05/2020 22:42:36
Quote Anchor link
Iedereen bedankt voor de input, het is gelukt, hieronder de code. Uiteindelijk werkt 1 section met twee verschillende div classes het beste:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<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:1023px;
          margin: auto;
          background-color:white;
          font-family:Helvetica,arial;
          font-weight: normal;
         }

        div.item2 {
           width: 1000px;
           display: inline-block;
           margin: auto;
           background-color: white;
           font-size: 22px;
           }

        div.item{
            font-size: 13px;
            width: 300px;
            height: 200px;
            margin: 20px;
            float: left;
            }

        img{
            border-radius: 3%;
            }

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

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

    </style>


Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<body>
   <section class='container'>
          <?php
                 while($data= mysqli_fetch_assoc($result)){
                   {

                     if($previousItem != $data['diersoort'])
                        {

                        echo "<div class='item2'>
                              <br>
                              "
.$data['diersoort']."
                              <hr>
                              </div>"
;

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


                       echo "

                              <div class='item'>
                              <a href='images_normal/"
.$data['photo_id'].".jpg'><img src='images/".$data['photo_id'].".jpg' ></a><br>
                              <a href="
.$data['link']." target='_blank'>
                              <b>"
.$data['common_name']."</b><br>
                        
                              </div></a>"
;
          }
          }

          ?>

</section>
</body>


Enige wat nog wel een probleem is, is dat de laatste diersoort, buiten de section valt. Doordat de achtergrond van de section wit is, lijkt het laatste diersoort daar nu buiten te vallen:

https://i.ibb.co/PT6LPM6/wrasses.jpg

Ligt dit aan de php code?

THanks again,

Johan
Gewijzigd op 16/05/2020 23:07:39 door Johan Steel
 

Pagina: 1 2 volgende »



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.