PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
J

Groeperen van items

Door Johan Steel op 12-05-2020 17:26 gewijzigd op 12-05-2020 17:52
4.549 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 -
16-05-2020 22:58
Een zicht op je HTML-broncode lijkt mij zinvoller. Je wilt juist weten hoe je layout opgebouwd wordt.
- Ariën -
16-05-2020 23:11
Ik zie niks...

;-)
Thomas van den Heuvel
16-05-2020 23:59
@Ariën bedoelt waarschijnlijk, hoe ziet de broncode van de uiteindelijke gegenereerde HTML-pagina er uit, mogelijk zit daar iets scheef qua opbouw.
J
Johan Steel
17-05-2020 11:10
Ah, excuus, verkeerd begrepen! Uiteindelijke gegenereerde HTML snijdt meer hout :-)

Hieronder de HTML. Ik heb wel wat diersoorten eruit gehaald, want een enorme bulk HTML code op de zondag ochtend wil ik jullie niet aan doen :-)


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
<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: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>
  </head>
     
 <body>
   <section class='container'>
          <div class='item2'>
                              <br>
                              Aholeholes
                              <hr>
                              </div>
                              <div class='item'>
                              <a href='images_normal/262.jpg'><img src='images/262.jpg' ></a><br>
                              <b>Strange-tailed flagtail</b><br>
                              </div></a><div class='item2'>
                              
			      <br>
                              Wrasses
                              <hr>
                              </div>
                              <div class='item'>
                              <a href='images_normal/6.jpg'><img src='images/6.jpg' ></a><br>
                              <b>Scale-rayed wrasse</b><br>
                              </div></a>
                              
			      <div class='item'>
                              <a href='images_normal/571.jpg'><img src='images/571.jpg' ></a><br>
                              <b>Klunzinger's wrasse</b><br>
                              </div></a>
                              
			      <div class='item'>
                              <a href='images_normal/590.jpg'><img src='images/590.jpg' ></a><br>
                              <b>Pearly razorfish</b><br>
                              </div></a></section>
</body>
</html>


Als ik zelf probeer te analyseren wat er mis gaat; de section sluit wel keurig na het laatste item, dus je zou verwachten dat de plaatjes worden ingesloten. Maar dat gebeurt dus niet. Wellicht heeft het iets met de hoogte (height) in .container te maken? Ik heb daar wel mee gespeeld, maar geen resultaat.

Voor de volledigheid ook nog even gevisualiseerd:



Ben benieuwd!

Groet,

Johan
Thomas van den Heuvel
17-05-2020 12:53 gewijzigd op 17-05-2020 12:54
Je piest sowieso naast de pot met de hyperlinks want deze zijn niet goed genest:
[color=#ff0000]<div class='item'>[/color][color=#00aa00]<a ...>[/color][color=#ff0000]</div>[/color][color=#00aa00]</a>[/color]

Een inline element (de <a> tag) kan ook nooit een block level element (de <div> tag) omvatten.

En dan nog een CSS-sidenote:
<div class='item2'>
<br>
Aholeholes
<hr>
</div>

Die <br> en <hr> zijn niet nodig, die zou je respectievelijk kunnen vervangen door een marge aan de bovenkant en een border aan de onderkant. Ook zou het wellicht beter zijn als je hier headers (of een ander semantisch equivalent element) voor gebruikt zodat het document een betere hiërarchische opbouw heeft.
J
Johan Steel
17-05-2020 15:35
Hi Thomas,

Dank voor je hulp weer! Ik heb bovenstaande tips doorgevoerd en ik moet zeggen, het ziet er allemaal weer beter uit. Alleen de headers moet ik nog even induiken.

Helaas is het probleem in mijn post hier niet mee opgelost. Dus wat dat betreft staat mijn vraag nog wel open.

Groet,

Johan
Milo S
19-05-2020 12:46
In je huidige code staat er een aantal zaken dubbel en door elkaar... Als ik de tip mag geven, probeer eens wat meer in te springen en op een nieuwe regel te beginnen. Al is het maar voor het overzicht. Hieronder een voorbeeld van wat ik denk dat jij bedoeld. Uiteindelijk heb ik niet veel veranderd van wat er in jou code staat en wel de opbouw die je wenst.
Elke sectie is een nieuw diersoort en elk item is een dier uit een groep dieren (soort). Dan zou je er nu mee weg moeten komen lijkt mij :).

Tip van de dag; kijk je code eens door om te zien of er niet items dubbel of op een verkeerde plek staan.


 <section class="container">
 	<header>
 		<h2>Diersoort</h2>
 	</header>
 	
 	<div class="item">
 		<a href="">
			<img src="">
			<b>Dier 1</b>
		</a>
	</div>
 </section>





        .container {
			width:1023px;
			min-height: 200px;
			
			margin: 0px auto;
			overflow: hidden;
          
			background: #FFFFFF;
         }
         	.container header {
         		width: 999px;
         		height: 60px;
         		
         		float: left;
         		margin: 0px 12px;
         		text-align: center;	
         		line-height: 30px;
         		
         		border-bottom: 1px solid #000000;
         	}
        div.item {
			width: 300px;
			height: 200px;
           
			margin: 20px;
			float: left;
			display: inline-block;  
			         
            		font-size: 13px;
            
			background-color: #00FF00;
		}
Jan Koehoorn
19-05-2020 20:13 

<?php
$animals = [
    ['species' => 'beer', 'name' => 'Allistair'],
    ['species' => 'beer', 'name' => 'Amos'],
    ['species' => 'beer', 'name' => 'Anthony'],
    ['species' => 'beer', 'name' => 'Armando'],
    ['species' => 'beer', 'name' => 'Colt'],
    ['species' => 'beer', 'name' => 'Deirdre'],
    ['species' => 'beer', 'name' => 'Griffin'],
    ['species' => 'beer', 'name' => 'Ian'],
    ['species' => 'beer', 'name' => 'Jelani'],
    ['species' => 'beer', 'name' => 'Jesse'],
    ['species' => 'beer', 'name' => 'Quamar'],
    ['species' => 'beer', 'name' => 'Quinn'],
    ['species' => 'beer', 'name' => 'Sage'],
    ['species' => 'dolfijn', 'name' => 'Alexander'],
    ['species' => 'dolfijn', 'name' => 'Chaim'],
    ['species' => 'dolfijn', 'name' => 'Colette'],
    ['species' => 'dolfijn', 'name' => 'Hayfa'],
    ['species' => 'dolfijn', 'name' => 'Ifeoma'],
    ['species' => 'dolfijn', 'name' => 'Maris'],
    ['species' => 'dolfijn', 'name' => 'Marny'],
    ['species' => 'dolfijn', 'name' => 'Oren'],
    ['species' => 'dolfijn', 'name' => 'Orson'],
    ['species' => 'dolfijn', 'name' => 'Preston'],
    ['species' => 'dolfijn', 'name' => 'Sara'],
    ['species' => 'dolfijn', 'name' => 'September'],
    ['species' => 'dolfijn', 'name' => 'Summer'],
    ['species' => 'giraf', 'name' => 'Chanda'],
    ['species' => 'giraf', 'name' => 'Malik'],
    ['species' => 'giraf', 'name' => 'Nell'],
    ['species' => 'krokodil', 'name' => 'Aidan'],
    ['species' => 'krokodil', 'name' => 'Alexander'],
    ['species' => 'krokodil', 'name' => 'Arden'],
    ['species' => 'krokodil', 'name' => 'Ashton'],
    ['species' => 'krokodil', 'name' => 'Ethan'],
    ['species' => 'krokodil', 'name' => 'Seth'],
    ['species' => 'leeuw', 'name' => 'Abra'],
    ['species' => 'leeuw', 'name' => 'Armand'],
    ['species' => 'leeuw', 'name' => 'Bethany'],
    ['species' => 'leeuw', 'name' => 'Damon'],
    ['species' => 'leeuw', 'name' => 'Darrel'],
    ['species' => 'leeuw', 'name' => 'Dora'],
    ['species' => 'leeuw', 'name' => 'Drew'],
    ['species' => 'leeuw', 'name' => 'Grace'],
    ['species' => 'leeuw', 'name' => 'Igor'],
    ['species' => 'leeuw', 'name' => 'Isabelle'],
    ['species' => 'leeuw', 'name' => 'Nayda'],
    ['species' => 'leeuw', 'name' => 'Sarah'],
    ['species' => 'leeuw', 'name' => 'Talon'],
    ['species' => 'olifant', 'name' => 'David'],
    ['species' => 'olifant', 'name' => 'Irene'],
    ['species' => 'olifant', 'name' => 'Josiah'],
    ['species' => 'olifant', 'name' => 'Kasimir'],
    ['species' => 'olifant', 'name' => 'Melvin'],
    ['species' => 'olifant', 'name' => 'Nina'],
    ['species' => 'olifant', 'name' => 'Rhea'],
    ['species' => 'olifant', 'name' => 'Sharon'],
    ['species' => 'olifant', 'name' => 'Vivien'],
    ['species' => 'olifant', 'name' => 'Zephr'],
    ['species' => 'slang', 'name' => 'Britanni'],
    ['species' => 'slang', 'name' => 'Byron'],
    ['species' => 'slang', 'name' => 'Camden'],
    ['species' => 'slang', 'name' => 'Catherine'],
    ['species' => 'slang', 'name' => 'Grant'],
    ['species' => 'slang', 'name' => 'Inez'],
    ['species' => 'slang', 'name' => 'Kyla'],
    ['species' => 'slang', 'name' => 'Lael'],
    ['species' => 'tijger', 'name' => 'Beck'],
    ['species' => 'tijger', 'name' => 'Brittany'],
    ['species' => 'tijger', 'name' => 'Caldwell'],
    ['species' => 'tijger', 'name' => 'Denise'],
    ['species' => 'tijger', 'name' => 'Eleanor'],
    ['species' => 'tijger', 'name' => 'Ivan'],
    ['species' => 'tijger', 'name' => 'Miriam'],
    ['species' => 'tijger', 'name' => 'Simon'],
    ['species' => 'tijger', 'name' => 'Winifred'],
    ['species' => 'vis', 'name' => 'Azalia'],
    ['species' => 'vis', 'name' => 'Bo'],
    ['species' => 'vis', 'name' => 'Brielle'],
    ['species' => 'vis', 'name' => 'Catherine'],
    ['species' => 'vis', 'name' => 'Gail'],
    ['species' => 'vis', 'name' => 'Jamal'],
    ['species' => 'vis', 'name' => 'Marshall'],
    ['species' => 'vis', 'name' => 'Nayda'],
    ['species' => 'vis', 'name' => 'Savannah'],
    ['species' => 'vis', 'name' => 'Shana'],
    ['species' => 'vis', 'name' => 'Shea'],
    ['species' => 'vis', 'name' => 'Solomon'],
    ['species' => 'vis', 'name' => 'Wynne'],
    ['species' => 'zebra', 'name' => 'Genevieve'],
    ['species' => 'zebra', 'name' => 'Gregory'],
    ['species' => 'zebra', 'name' => 'Irma'],
    ['species' => 'zebra', 'name' => 'Kennan'],
    ['species' => 'zebra', 'name' => 'Kessie'],
    ['species' => 'zebra', 'name' => 'Kevyn'],
    ['species' => 'zebra', 'name' => 'Minerva'],
    ['species' => 'zebra', 'name' => 'Simon'],
    ['species' => 'zebra', 'name' => 'Sloane'],
    ['species' => 'zebra', 'name' => 'Tiger'],
    ['species' => 'zebra', 'name' => 'Tyrone'],
    ['species' => 'zebra', 'name' => 'Willa'],
];
?>

<!DOCTYPE html>
<html>
<head>
    <title>PHPHulp</title>
    <style>
        .grid__container { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; margin: 10px; padding: 40px; border: 1px solid #ccc; border-radius: 10px;}
        .grid__item { border: 1px solid tomato; border-radius: 5px; padding: 20px; }
    </style>
</head>
<body>

    <?php $species_prev = null;?>

    <?php foreach ($animals as $animal): ?>
        <?php if ($species_prev !== $animal['species']): ?>
            <?php if ($species_prev): ?>
                </div>
            <?php endif;?>

            <div class="grid__container">

            <?php $species_prev = $animal['species'];?>
        <?php endif;?>
                <div class="grid__item">
                    <?=$animal['species'];?>
                    <?=$animal['name'];?>
                </div>
    <?php endforeach;?>

    </div>

</body>
</html>
J
Johan Steel
19-05-2020 21:51
Gents,

Dank weer voor het meedenken en ook voorde code!

@Milo, jouw code werkt erg prettig, ik heb het toegepast en het probleem is opgelost. Enige nadeel is wel dat de bottom-border nu niet meer centreert, omdat float: left;. Is daar nog een nette oplossing voor te bedenken ipv een nieuwe <div> creeeren?

@Jan, ik ben nog een beginner in PHP, dus ik heb je code nog niet helemaal begrepen. Maar het lijkt erop dat $animals statisch is en vooraf ingegeven moet worden? Dit is niet echt handig, omdat de content dynamisch is. Maargoed,wellicht begrijp ik de code niet goed.

@alle lezers, mochten jullie een soortgelijk probleem hebben, ik heb deze vraag ook op een HTML forum geplaatst (aangezien hier de focus toch een beetje op PHP moet blijven). Het probleem zit hem in de 'clearing space' :

https://web.archive.org/web/20160524140725/http://css-discuss.incutio.com/wiki/Clearing_Space

Groet,

Johan

Reageren

Inloggen om te reageren