Dimateri sebelumnya kita telah berhasil menampilkan detail data place, seperti
title, description, address dan lain-lain. Tetapi masih ada yang
kurang, yaitu menampilkan informasi gambar yang terkait dengan data place tersebut. Dan karena
gambar yang dimiliki data place bisa lebih dari satu, maka untuk menampilkannya kita butuh
menggunakan perulangan.
Dan untuk menampilkan gambar lebih dari satu, maka kita akan tampilkan dalam bentuk slider. Dengan tujuan hasil yang ditampilkan lebih interaktif dan bagus. Dan kita akan menggunakan package tambahan yang sudah pernah kita install di langkah-langkah awal. Jadi kita tinggal menggunakannya saja di dalam view/component ini.
Silahkan buka file src/pages/web/places/Show.jsx, kemudian ubah semua kode-nya
menjadi seperti berikut ini :
//import hook react
import React, { useEffect, useState, } from "react";
//import react router dom
import { Link, useParams } from "react-router-dom";
//import layout web
import LayoutWeb from "../../../layouts/Web";
//import BASE URL API
import Api from "../../../api";
//import imageGallery
import ImageGallery from "react-image-gallery";
//import imageGallery CSS
import "react-image-gallery/styles/css/image-gallery.css";
function WebPlaceShow() {
//state place
const [place, setPlace] = useState({});
//slug params
const { slug } = useParams();
//function "fetchDataPlace"
const fetchDataPlace = async () => {
//fetching Rest API
await Api.get(`/api/web/places/${slug}`)
.then((response) => {
//set data to state "places"
setPlace(response.data.data);
//set title from state "category"
document.title = `${response.data.data.title} - Website Wisata Berbasis GIS (Geographic Information System)`;
});
};
//hook
useEffect(() => {
//call function "fetchDataPlace"
fetchDataPlace();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
//=================================================================
// react image gallery
//=================================================================
//define image array
const images = [];
//function "placeImages"
const placeImages = () => {
//loop data from object "place"
for (let value in place.images) {
//push to image array
images.push({
original: place.images[value].image,
thumbnail: place.images[value].image,
});
}
};
//hook
useEffect(() => {
//call function "placeImage"
placeImages();
});
return (
<React.Fragment>
<LayoutWeb>
<div className="container mt-80">
<div className="row">
<div className="col-md-7 mb-4">
<div className="card border-0 rounded shadow-sm">
<div className="card-body">
<h4>{place.title}</h4>
<span className="card-text">
<i className="fa fa-map-marker"></i> <i>{place.address}</i>
</span>
<hr />
<ImageGallery items={images} autoPlay={true} />
<div
dangerouslySetInnerHTML={{ __html: place.description }}
/>
</div>
</div>
</div>
<div className="col-md-5 mb-4">
<div className="card border-0 rounded shadow-sm">
<div className="card-body">
<h5>
<i className="fa fa-map-marked-alt"></i> MAPS
</h5>
<hr />
</div>
<hr />
<div className="card-body">
<div className="row">
<div className="col-md-2 col-2">
<div className="icon-info-green">
<i className="fa fa-map-marker-alt"></i>
</div>
</div>
<div className="col-md-10 col-10">
<div className="capt-info fw-bold">ADDRESS</div>
<div className="sub-title-info"><i>{place.address}</i></div>
</div>
<div className="col-md-2 col-2">
<div className="icon-info-green">
<i className="fa fa-clock"></i>
</div>
</div>
<div className="col-md-10 col-10">
<div className="capt-info fw-bold">OFFICE HOURS</div>
<div className="sub-title-info">{place.office_hours}</div>
</div>
<div className="col-md-2 col-2">
<div className="icon-info-green">
<i className="fa fa-phone"></i>
</div>
</div>
<div className="col-md-10 col-10">
<div className="capt-info fw-bold">PHONE</div>
<div className="sub-title-info">{place.phone}</div>
</div>
<div className="col-md-2 col-2">
<div className="icon-info-green">
<i className="fa fa-globe-asia"></i>
</div>
</div>
<div className="col-md-10 col-10">
<div className="capt-info fw-bold">WEBSITE</div>
<div className="sub-title-info">
<a href={place.website} className="text-decoration-none">{place.website}</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</LayoutWeb>
</React.Fragment>
);
}
export default WebPlaceShow;
Dari perubahan kode di atas, pertama-tama kita import packgae React Image Gallery beserta file css-nya.
//import imageGallery
import ImageGallery from "react-image-gallery";
//import imageGallery CSS
import "react-image-gallery/styles/css/image-gallery.css";
Setelah itu, kita membuat sebuah variable baru yang bernama images menggunakan
jenis array. Variable ini akan kita gunakan untuk menyimpan data gambar yang di
dapatkan dari data place.
//define image array
const images = [];
Kemudian kita membuat function baru yang bernama placeImage. Function ini
di dalamnya melakukan looping data images yang di dapatkan dari state
place dan kita lakukan push ke dalam variable images di
atas.
//function "placeImages"
const placeImages = () => {
//loop data from object "place"
for (let value in place.images) {
//push to image array
images.push({
original: place.images[value].image,
thumbnail: place.images[value].image,
});
}
};
Setelah itu, kita panggil function placeImages tersebut di dalam hook
useEffect.
//hook
useEffect(() => {
//call function "placeImage"
placeImages();
});
Dan untuk menampilkannya didalam JSX, kita tinggal panggil component
<ImageGallery /> dengan menambahkan props berupa variable
images.
<ImageGallery items={images} autoPlay={true} />
Sekarang, jika kita reload halaman detail data place, maka kita akan mendapatkan hasil yang kurang lebih seperti berikut ini :
