Image gallery &PHP
Graag zou ik van jullie kennis gebruik maken. Ik probeer een image gallery op te zetten en ben al behoorlijk ver gekomen (al zeg ik hetzelf :-)). Gelukkig is er een hoop te vinden op het internet omtrent dit onderwerp.
Maargoed, toch loop ik helaas vast en mijn hoop is dat iemand van het forum mij kan helpen. Ik probeer in een tabel 3 plaatjes per rij weer te geven en dat lukt ook. Het probleem is dat het dezelfde plaatjes zijn :-(. De rij die hieronder ontstaat, laat wel een nieuw plaatje zien, maar spuugt deze ook weer drie keer uit. En zo gaat het door, totdat het zoekresultaat volledig is uitgespuugt. Mijn vraag: hoe zorg ik er in onderstaande code voor dat er drie unieke plaatjes per rij worden weergegeven?
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
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
<?php
if(isset($_POST['submit-search'])){
$morph1=$_POST['morph1'];
$sql1 = "SELECT * FROM dataset2 WHERE morph LIKE '$morph1'ORDER BY full_name ASC ";
$result1 = mysqli_query($conn, $sql1);
$queryResult1 = mysqli_num_rows($result1);
if($queryResult1 > 0){
while($row = mysqli_fetch_assoc($result1)){
echo"
<div><tr><td>
<img src='images/".$row['photo_id'].".jpg'><br>
<b>".$row['common_name']."</b><br>
<i>(".$row['full_name'].")</i><br>
</td></div>
<div><td>
<img src='images/".$row['photo_id'].".jpg'><br>
<b>".$row['common_name']."</b><br>
<i>(".$row['full_name'].")</i><br>
</td></div>
<div><td>
<img src='images/".$row['photo_id'].".jpg'><br>
<b>".$row['common_name']."</b><br>
<i>(".$row['full_name'].")</i><br>
</td></tr></div>";
}
}
}
?>
if(isset($_POST['submit-search'])){
$morph1=$_POST['morph1'];
$sql1 = "SELECT * FROM dataset2 WHERE morph LIKE '$morph1'ORDER BY full_name ASC ";
$result1 = mysqli_query($conn, $sql1);
$queryResult1 = mysqli_num_rows($result1);
if($queryResult1 > 0){
while($row = mysqli_fetch_assoc($result1)){
echo"
<div><tr><td>
<img src='images/".$row['photo_id'].".jpg'><br>
<b>".$row['common_name']."</b><br>
<i>(".$row['full_name'].")</i><br>
</td></div>
<div><td>
<img src='images/".$row['photo_id'].".jpg'><br>
<b>".$row['common_name']."</b><br>
<i>(".$row['full_name'].")</i><br>
</td></div>
<div><td>
<img src='images/".$row['photo_id'].".jpg'><br>
<b>".$row['common_name']."</b><br>
<i>(".$row['full_name'].")</i><br>
</td></tr></div>";
}
}
}
?>
Alvast bedankt!
Johan
Nummer 1 is dat jou script vatbaar is voor injection.
Nummer 2 is dat je $row['photo_id'] er ook 3x in zet wat door het gebruik van je While dan ook vermenigvuldigd wordt tot deze op het einde is gekomen.
Bij je query kan je limit gebruiken waardoor je het resultaat begrenst op 3.
$sql1 = "SELECT * FROM dataset2 WHERE morph LIKE '$morph1'ORDER BY full_name ASC LIMIT 3 ";
Dan krijg je
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
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
<?php
if(isset($_POST['submit-search'])){
// Eerst user input controleren anders injection
$morph1=$_POST['morph1'];
$sql1 = "SELECT * FROM dataset2 WHERE morph LIKE '$morph1'ORDER BY full_name ASC LIMIT 3 ";
$result1 = mysqli_query($conn, $sql1);
$queryResult1 = mysqli_num_rows($result1);
if($queryResult1 > 0){
while($row = mysqli_fetch_assoc($result1)){
echo"
<div>
<tr>
<td>
<img src='images/".$row['photo_id'].".jpg'>
<b>".$row['common_name']."</b> \r\n
<i>(".$row['full_name'].")</i> \r\n
</td>
</tr>
</div>
";
}
}
}
?>
if(isset($_POST['submit-search'])){
// Eerst user input controleren anders injection
$morph1=$_POST['morph1'];
$sql1 = "SELECT * FROM dataset2 WHERE morph LIKE '$morph1'ORDER BY full_name ASC LIMIT 3 ";
$result1 = mysqli_query($conn, $sql1);
$queryResult1 = mysqli_num_rows($result1);
if($queryResult1 > 0){
while($row = mysqli_fetch_assoc($result1)){
echo"
<div>
<tr>
<td>
<img src='images/".$row['photo_id'].".jpg'>
<b>".$row['common_name']."</b> \r\n
<i>(".$row['full_name'].")</i> \r\n
</td>
</tr>
</div>
";
}
}
}
?>
En indien je de gegevens niet telkens in een nieuwe div wil tonen kan het ook zo
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
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
<?php
if(isset($_POST['submit-search'])){
// Eerst user input controleren anders injection
$morph1=$_POST['morph1'];
$sql1 = "SELECT * FROM dataset2 WHERE morph LIKE '$morph1'ORDER BY full_name ASC LIMIT 3 ";
$result1 = mysqli_query($conn, $sql1);
$queryResult1 = mysqli_num_rows($result1);
if($queryResult1 > 0){
while($row = mysqli_fetch_assoc($result1)){
$MijndatabaseGegevens[]=$row;
}
echo'<div>';
foreach($MijndatabaseGegevens as $item){
echo"
<tr>
<td>
<img src='images/".$item['photo_id'].".jpg'>
<b>".$item['common_name']."</b> \r\n
<i>(".$item['full_name'].")</i> \r\n
</td>
</tr>
";
}
echo'</div>';
}
}
?>
if(isset($_POST['submit-search'])){
// Eerst user input controleren anders injection
$morph1=$_POST['morph1'];
$sql1 = "SELECT * FROM dataset2 WHERE morph LIKE '$morph1'ORDER BY full_name ASC LIMIT 3 ";
$result1 = mysqli_query($conn, $sql1);
$queryResult1 = mysqli_num_rows($result1);
if($queryResult1 > 0){
while($row = mysqli_fetch_assoc($result1)){
$MijndatabaseGegevens[]=$row;
}
echo'<div>';
foreach($MijndatabaseGegevens as $item){
echo"
<tr>
<td>
<img src='images/".$item['photo_id'].".jpg'>
<b>".$item['common_name']."</b> \r\n
<i>(".$item['full_name'].")</i> \r\n
</td>
</tr>
";
}
echo'</div>';
}
}
?>
Gewijzigd op 28/04/2020 23:05:13 door Bart Smulders
Pas je HTML in de loop aan om een enkel item te tonen. Met de modulo-operator kan je kijken of het aantal deelbaar is door drie, zodat je dan een nieuwe rij kan starten.
Overigens hoef je geen tabellen te gebruiken. CSS is krachtig genoeg om te bereiken wat je wilt. Voornamelijk is 'flexbox' het magische woord.
- Ariën - op 28/04/2020 22:58:38:
Met de modulo-operator kan je kijken of het aantal deelbaar is door drie, zodat je dan een nieuwe rij kan starten.
Of gewoon wat divjes floaten in een container?
- Ariën - op 28/04/2020 22:58:38:
Overigens hoef je geen tabellen te gebruiken. CSS is krachtig genoeg om te bereiken wat je wilt. Voornamelijk is 'flexbox' het magische woord.
Of dat dus inderdaad.
Dank voor jullie snelle antwoord!
@Bart, scherp je opmerking over injection, thanks! Het limieteren van de query werkt, echter aangezien de resultaten variabel zijn en veelal meer dan 3, niet toepasbaar in dit geval.
@Ariën, Flexbox was de gouden tip! Veel dank.
@Thomas, dank voor het meedenken.
Nu verder stoeien met de layout en flexbox.
Groet,
Johan
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
.container{
width:60%;
height:100%;
margin-left: auto;
margin-right: auto;
background-color:white;
font-size: 13px;
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-evenly;
}
</style>
</head>
<section class="container">
<?php
if(isset($_POST['submit-search'])){
$morph1=$_POST['morph1'];
$sql1 = "SELECT * FROM dataset2 WHERE morph LIKE '$morph1'ORDER BY full_name ASC ";
$result1 = mysqli_query($conn, $sql1);
$queryResult1 = mysqli_num_rows($result1);
if($queryResult1 > 0){
while($row = mysqli_fetch_assoc($result1)){
echo" <div>
<img src='images/".$row['photo_id'].".jpg'><br>
<b>".$row['common_name']."</b><br>
<i>(".$row['full_name'].")</i><br>
</div>";
}
}
}
?>
</section>
</body>
</html>
width:60%;
height:100%;
margin-left: auto;
margin-right: auto;
background-color:white;
font-size: 13px;
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-evenly;
}
</style>
</head>
<section class="container">
<?php
if(isset($_POST['submit-search'])){
$morph1=$_POST['morph1'];
$sql1 = "SELECT * FROM dataset2 WHERE morph LIKE '$morph1'ORDER BY full_name ASC ";
$result1 = mysqli_query($conn, $sql1);
$queryResult1 = mysqli_num_rows($result1);
if($queryResult1 > 0){
while($row = mysqli_fetch_assoc($result1)){
echo" <div>
<img src='images/".$row['photo_id'].".jpg'><br>
<b>".$row['common_name']."</b><br>
<i>(".$row['full_name'].")</i><br>
</div>";
}
}
}
?>
</section>
</body>
</html>
Toevoeging op 29/04/2020 22:33:01:
Nog even terugkomend op bovenstaande code, weet iemand misschien waarom de HTML code in de <div> niet goed werkt? De <br> werkt wel, maar alles is vet? Een class attribute in het <div> element maken werkt helaas ook niet (wat wel handig zou zijn voor de image gallery). Wat doe ik verkeerd?
Groet, Johan
Gewijzigd op 12/05/2020 17:02:15 door - Ariën -
Geen idee waarom je output vetgedrukt is. Ik denk dat je een overrulende styling hebt?
Dank voor je reactie! Inmiddels heb ik bovenstaand zelf uitgevogeld, het probleem zat hem in de haakjes ' ipv ". Echt zo`n beginners dingetje, zal niet nogmaals gebeuren :-)
Wat betreft de injectie, dank voor de tip. Ik wil eerst de code werkend hebben en ga daarna met de veiligheid aan de slag.
Ik heb nog wel een andere vraag, maar om een hele lange draad met verschillende topics te voorkomen, zal ik een nieuwe openen.
Groet,
JOhan
Doe dat dan liever direct of zet het hoog op je lijst.
Hoe meer je niet beveiligd hebt, hoe zeerder het doet als je iets vergeet.
Gewijzigd op 12/05/2020 17:26:23 door - Ariën -