Groeperen van items
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)
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
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>
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.
Tevens heb ik de topictitel aangepast naar iets wat duidelijker is.
Gewijzigd op 12/05/2020 17:52:57 door - Ariën -
Zodra er een andere diersoort wordt getoond (begint bij een lege string) dan komt er een tussenrij met de diersoort.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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>
<?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 -
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
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)
1
2
3
4
5
6
7
8
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= '';
?>
include 'header.php';
$sql = "SELECT * FROM dataset2 ORDER BY 'diersoort'";
$result = mysqli_query($conn, $sql);
$queryResult = mysqli_num_rows($result);
$previousItem= '';
?>
Code (php)
1
2
3
4
5
6
2
3
4
5
6
<html>
<head>
<title>Alle dieren</title>
</head>
<body>
<table>
<head>
<title>Alle dieren</title>
</head>
<body>
<table>
Code (php)
Code (php)
1
2
3
2
3
</table>
</body>
</html>
</body>
</html>
Iemand die ziet waar het misgaat?
Thanks!
Johan
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)
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
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>
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
Voorbeeld:
Hopelijk is het duidelijk.
Groet,
Johan
Gewijzigd op 13/05/2020 21:30:06 door Johan Steel
Ik ga dan toch maar even in de css proberen..
Gr,
Johan
Voor de aanpassing:
Na de aanpassing:
Zou iets simpels moeten zijn, lijkt mij. Maar ik zie het niet :-)
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
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 -
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
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):
Groet,
Johan
Het idee is om de opmaak juist te behouden (na de diersoort aanpassing):
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
Code (php)
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
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>
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)
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
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>
<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:
Ligt dit aan de php code?
THanks again,
Johan
Gewijzigd op 16/05/2020 23:07:39 door Johan Steel