I want to display data using json on 2 different pages. instructors.php for the list, and instructor-detail.php for the details of each instructor.
I have created a data file for json, which I am confused about how to fetch data every I click the instructor's photo.
I give this example from the application that I made.
and this is my instructors.php code
<body>
<main>
<section id="instructors">
<div class="container">
<div class="row">
<div class="col col-3">
<a href="#" class="card-leader" data-id="0">
<div class="image">
<img src="<?= $base_url ?>assets/img/packleaders/shiqeen.jpg" class="img-fluid">
</div>
<div class="content">
<div class="name">Shiqeen</div>
<div class="initial">S</div>
</div>
</a>
</div>
<div class="col col-3">
<a href="#" class="card-leader" data-id="1">
<div class="image">
<img src="<?= $base_url ?>assets/img/packleaders/mandy.jpg" class="img-fluid">
</div>
<div class="content">
<div class="name">Mandy</div>
<div class="initial">M</div>
</div>
</a>
</div>
<div class="col col-3">
<a href="#" class="card-leader" data-id="2">
<div class="image">
<img src="<?= $base_url ?>assets/img/packleaders/hannah.jpg" class="img-fluid">
</div>
<div class="content">
<div class="name">Hannah</div>
<div class="initial">H</div>
</div>
</a>
</div>
<div class="col col-3">
<a href="packleader.php" class="card-leader">
<div class="image">
<img src="<?= $base_url ?>assets/img/packleaders/bebe.jpg" class="img-fluid">
</div>
<div class="content">
<div class="name">Bebe</div>
<div class="initial">B</div>
</div>
</a>
</div>
</div>
</div>
</section>
</main>
<?php
include 'footer.php';
?>
<script>
$('.card-leader').on('click', function(event) {
event.preventDefault();
/* Act on the event */
let get_id = $(this).data('id');
window.location.href = "<?= base_url(); ?>instructor-detail.php" + '?id=' + get_id;
});
</script>
</body>
</html>
and this is my instructor-detail.php code
<main>
<?php
$data = file_get_contents("http://cru68.test/assets/js/data-instructor.json");
$data = json_decode($data, TRUE);
echo $data[0]['image'];
?>
<section id="packleader">
<div class="container-fluid custom-container">
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-6 video">
<div class="main-video d-flex-justify-content-center">
<div class="content-video">
<img src="assets/img/packleaders/packleaders-video-sample.jpg" alt="" class="img-fluid">
</div>
</div>
</div>
<div class="col-12 col-sm-12 col-md-12 col-lg-6 ">
<div class="biography">
<legend class="title"><?= $data[0]['name']; ?></legend>
<div class="text">
<?= $data[0]['description']; ?>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire