Menu
I'm looking to filter these small divs on the given filters on top (AB Main Hall, AB Club, Huis 23).
I'm guessing this has to be done with a $_GET? Here's my code from what I now have.
<?php
$concert = [
[
"datum" => "20 FEB",
"naam" => "Kula Shakar",
"zaal" => "AB Club",
"image" => "https://img.discogs.com/Ub_IwvshvOIC1n-JL2x5mHHFfRg=/fit-in/300x300/filters:strip_icc():format(jpeg):mode_rgb():quality(40)/discogs-images/A-256590-1106988648.jpg.jpg"
],
[
"datum" => "25 FEB",
"naam" => "Black Box",
"zaal" => "AB Main Hall",
"image" => "http://highly-suspect.concertticketsq.com/images/performers/event/13-concert-tickets.jpg"
],
[
"datum" => "28 FEB",
"naam" => "Screening Pulp",
"zaal" => "Huis 23",
"image" => "https://dhzjvxyl79yzn.cloudfront.net/6/83626_0_layton-concert-hall.jpg"
],
[
"datum" => "4 JUN",
"naam" => "White Box",
"zaal" => "AB Club",
"image" => "data:image/jpeg;base64,/9IiIAIiIAIiIAIiIAIiIAAIiIAIiIAIiIAIiIAIiIAIiIAIiIAIiIA/9k="
]
];
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Concerten</title>
</head>
<body>
<a href="#">AB Main Hall</a>
<a href="#">AB Club</a>
<a href="#">Huis 23</a>
<?php foreach($concert as $concerten): ?>
<section class="container">
<p><?php echo $concerten['datum']; ?></p>
<p><?php echo $concerten['naam']; ?></p>
<h2><?php echo $concerten['zaal']; ?></h2>
<img src="<?php echo $concerten['image']; ?>"/>
</section>
<?php endforeach; ?>
<style>
.container {
border: 1px solid black;
margin: 50px 0px;
width: 300px;
}
p {
text-align: center;
}
</style>
</body>
</html>
The items are pulled out from arrays, for example here's the first one.
<?php
$concert = [
[
"datum" => "20 FEB",
"naam" => "Kula Shakar",
"zaal" => "AB Club",
"image" => "https://img.discogs.com/Ub_IwvshvOIC1n.jpg"
],
?>
899
If you are filtering the display using GET variables you could achieve your goal like this.
<?php
$concert = array(
array(
"datum" => "20 FEB",
"naam" => "Kula Shakar",
"zaal" => "AB Club",
"image" => "https://img.discogs.com/Ub_IwvshvOIC1n-JL2x5mHHFfRg=/fit-in/300x300/filters:strip_icc():format(jpeg):mode_rgb():quality(40)/discogs-images/A-256590-1106988648.jpg.jpg"
),
array(
"datum" => "25 FEB",
"naam" => "Black Box",
"zaal" => "AB Main Hall",
"image" => "http://highly-suspect.concertticketsq.com/images/performers/event/13-concert-tickets.jpg"
),
array(
"datum" => "28 FEB",
"naam" => "Screening Pulp",
"zaal" => "Huis 23",
"image" => "https://dhzjvxyl79yzn.cloudfront.net/6/83626_0_layton-concert-hall.jpg"
),
array(
"datum" => "4 JUN",
"naam" => "White Box",
"zaal" => "AB Club",
"image" => "data:image/jpeg;base64,/9IiIAIiIAIiIAIiIAIiIAAIiIAIiIAIiIAIiIAIiIAIiIAIiIAIiIA/9k="
)
);
/* create array of venues from above to use in generating menu */
$venues=array();
foreach( $concert as $arr )$venues[]=$arr['zaal'];
/* remove duplicates from array */
$venues=array_unique( $venues );
/* Add a new item to display all records */
$venues[]='All';
$club = isset( $_GET['zaal'] ) && in_array( $_GET['zaal'], $venues ) ? $_GET['zaal'] : false;
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Concerten</title>
<style>
.container {
border: 1px solid black;
margin: 50px 0px;
width: 300px;
}
p {
text-align: center;
}
</style>
</head>
<body>
<?php
/* display chosen club as title */
if( $club ) printf('<h1>%s</h1>',$club);
/* create the list of hyperlinks */
echo '<ul>';
array_walk( $venues, function( $club ){
printf( '<li><a href="?zaal=%s">%s</a></li>', $club, $club );
});
echo '</ul>';
foreach( $concert as $arr ){
/* display either selected club or all clubs */
if( $club && $club == $arr['zaal'] or $club=='All' ){
echo "
<section class='container'>
<p>{$arr['datum']}</p>
<p>{$arr['naam']}</p>
<h2>{$arr['zaal']}</h2>
<img src='{$arr['image']}' />
</section>";
}
}
?>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
