Postingan lainnya
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
Kelas Premium!
Belajar Javascript untuk website
Gunakan kupon "mulaijs" untuk diskon 75 ribu!
Form search di javascript
Bagaimana cara buat form search tanpa php mysqli.
di sini saya ada sedang membuat website sederhana murottal al-quran.
dan di website ini saya hanya menggunakan html,css & javascript.
berhubung di sana terdapat 114 murottal apakah bisa di buat search memakai javascript tanpa php mysqli?
[ Edit ]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Online Murottal Al-Qur'an</title>
<meta name="author" content="@name404.php.jpg">
<meta name="description" content="Online Murottal Al-Qur'an Full 30 Juz [ Persurat ]">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@name404.php.jpg">
<meta name="twitter:creator" content="@name404.php.jpg">
<meta name="twitter:title" content="Online Murottal Alquran">
<meta name="twitter:url" content="https://localhost:8080">
<meta name="twitter:description" content="Online Murottal Al-Qur'an Full 30 Juz [ Persurat ]">
<meta property="og:description" content="Online Murottal Al-Qur'an Full 30 Juz [ Persurat ]"/>
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="assets/css/main.css">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@200;600&family=Quicksand&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!-- Header -->
<header class="app-header"><a class="app-header__logo" href="#" style="font-family:Quicksand; font-weight:600;">Al-Qur'an</a>
</header>
<nav class="nav">
<button style="border:none;background:transparent;outline:none;font-size:28px;position:relative;left:45%;bottom:10px;" onclick="toggleMusic()" id="btn-playback" data-play="false">
<i class="fa fa-play"></i>
</button>
<a href="#" style="position:relative;left:61%;top:8px;font-size:26px;"><i class="fa fa-forward" onclick="next"></i></a>
<a href="#" style="position:relative;left:2%;top:8px;font-size:26px;" onclick="prev"><i class="fa fa-backward"></i></a>
<b id="caption" style="position:relative;top:52px;font-size:17px;left:50px;">Al-Fatihah</b>
<audio src="assets/audio/1.mp3" id="audio"></audio>
</nav>
<!-- Konten -->
<center>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQWRO_sy1yZthnFtyG9vILVxkI5ZfRlO23lpQ&usqp=CAU" width="360px" style="position:relative;top:50px;"></center>
<main class="app-content">
<div class="container">
<h3 style="font-family:Quicksand; font-weight:600; text-align:center; margin:30px auto;">Daftar Surat</h3>
<br></div>
<div class="tile">
<!--<audio id="audio" src="assets/audio/1.mp3" controls></audio>-->
</div>
<a href="#" onclick="surat(0)">
<div class="tile mb-3">
<div class="btn btn-danger float-left mr-3">1</div>
<b>Al-Fatihah</b><br>
<small>Pembukaan ( 7 Ayat )</small>
</div>
</a>
<a href="#" onclick="surat(1)">
<div class="tile mb-3">
<div class="btn btn-danger float-left mr-3">2</div>
<b>Al-Baqaroh</b><br>
<small>Sapi ( 286 Ayat )</small>
</div>
</a>
<a href="#" onclick="surat(2)">
<div class="tile mb-3">
<div class="btn btn-danger float-left mr-3">3</div>
<b>Ali-'Imran</b><br>
<small>Keluarga 'Imran ( 200 Ayat )</small>
</div>
</a>
<a href="#" onclick="surat(3)">
<div class="tile mb-3">
<div class="btn btn-danger float-left mr-3">4</div>
<b>An-Nisa'</b><br>
<small>Wanita ( 176 Ayat )</small>
</div>
</a>
<a href="#" onclick="surat(4)">
<div class="tile mb-3">
<div class="btn btn-danger float-left mr-3">5</div>
<b>Al-Ma'idah</b><br>
<small>Hidangan ( 120 Ayat )</small>
</div>
</a>
<a href="#" onclick="surat(6)">
<div class="tile mb-3">
<div class="btn btn-danger float-left mr-3">6</div>
<b>Al-An'am</b><br>
<small>Binatang Ternak ( 165 Ayat )</small>
</div>
</a>
<a href="#" onclick="surat(7)">
<div class="tile mb-3">
<div class="btn btn-danger float-left mr-3">7</div>
<b>Al-A'raf</b><br>
<small>Tempat Tertinggi ( 206 Ayat )</small>
</div>
</a>
<a href="#" onclick="surat(8)">
<div class="tile mb-3">
<div class="btn btn-danger float-left mr-3">8</div>
<b>Al-Anfal</b><br>
<small>Rampasan Perang ( 76 Ayat )</small>
</div>
</a>
<a href="#" onclick="surat(9)">
<div class="tile mb-3">
<div class="btn btn-danger float-left mr-3">9</div>
<b>At-Taubah</b><br>
<small>Pengampunan ( 129 Ayat )</small>
</div>
</a>
<a href="#" onclick="surat(10)">
<div class="tile mb-3">
<div class="btn btn-danger float-left mr-3">10</div>
<b>Yunus</b><br>
<small>Yunus ( 109 Ayat )</small>
</div>
</a>
<a href="#" onclick="surat(11)">
<div class="tile mb-3">
<div class="btn btn-danger float-left mr-3">11</div>
<b>Hud</b><br>
<small>Hud ( 123 Ayat )</small>
</div>
</a>
<a href="#" onclick="surat(12)">
<div class="tile mb-3">
<div class="btn btn-danger float-left mr-3">12</div>
<b>Yusuf</b><br>
<small>Yusuf ( 111 Ayat )</small>
</div>
</a>
<a href="#" onclick="surat(13)">
<div class="tile mb-3">
<div class="btn btn-danger float-left mr-3">13</div>
<b>Ar-Ra'ad</b><br>
<small>Guruh ( 43 Ayat )</small>
</div>
</a>
<a href="#" onclick="surat(14)">
<div class="tile mb-3">
<div class="btn btn-danger float-left mr-3">14</div>
<b>Ibrahim</b><br>
<small>Ibrahim ( 52 Ayat )</small>
</div>
</a>
<a href="#" onclick="surat(15)">
<div class="tile mb-3">
<div class="btn btn-danger float-left mr-3">15</div>
<b>Al-Hijr</b><br>
<small>Hijr ( 99 Ayat )</small>
</div>
</a>
<a href="#" onclick="surat(16)">
<div class="tile mb-3">
<div class="btn btn-danger float-left mr-3">16</div>
<b>An-Nahl</b><br>
<small>Lebah ( 128 Ayat )</small>
</div>
</a>
<a href="#" onclick="surat(17)">
<div class="tile mb-3">
<div class="btn btn-danger float-left mr-3">17</div>
<b>Al-Isra'</b><br>
<small>Perjalanan Malam ( 111 Ayat )</small>
</div>
</a>
<a href="#" onclick="surat(18)">
<div class="tile mb-3">
<div class="btn btn-danger float-left mr-3">18</div>
<b>Al-Kahf</b><br>
<small>Goa ( 110 Ayat )</small>
</div>
</a>
<a href="#" onclick="surat(19)">
<div class="tile mb-3">
<div class="btn btn-danger float-left mr-3">19</div>
<b>Maryam</b><br>
<small>Maryam ( 98 Ayat )</small>
</div>
</a>
<a href="#" onclick="surat(20)">
<div class="tile mb-3">
<div class="btn btn-danger float-left mr-3">20</div>
<b>Taha</b><br>
<small>Taha ( 135 Ayat )</small>
</div>
</a>
<a href="#" onclick="surat(21)">
<div class="tile mb-3">
<div class="btn btn-danger float-left mr-3">21</div>
<b>Al-Anbiya'</b><br>
<small>Para Nabi ( 112 Ayat )</small>
</div>
</a>
<a href="#" onclick="surat(22)">
<div class="tile mb-3">
<div class="btn btn-danger float-left mr-3">22</div>
<b>Al-Hajj</b><br>
<small>Haji ( 78 Ayat )</small>
</div>
</a>
<a href="#" onclick="surat(23)">
<div class="tile mb-3">
<div class="btn btn-danger float-left mr-3">23</div>
<b>Al-Mu'minun</b><br>
<small>Orang-Orang Mukmin ( 118 Ayat )</small>
</div>
</a>
<a href="#" onclick="surat(24)">
<div class="tile mb-3">
<div class="btn btn-danger float-left mr-3">24</div>
<b>An-Nur</b><br>
<small>Cahaya ( 64 Ayat )</small>
</div>
</a>
<a href="#" onclick="surat(25)">
<div class="tile mb-3">
<div class="btn btn-danger float-left mr-3">25</div>
<b>Al-Furqan</b><br>
<small>Pembeda ( 77 Ayat )</small>
</div>
</a>
<a href="#" onclick="surat(26)">
<div class="tile mb-3">
<div class="btn btn-danger float-left mr-3">26</div>
<b>Asy-Syu'ara</b><br>
<small>Para Penyair ( 227 Ayat )</small>
</div>
</a>
<a href="#" onclick="surat(27)">
<div class="tile mb-3">
<div class="btn btn-danger float-left mr-3">27</div>
<b>An-Naml</b><br>
<small>Semut ( 93 Ayat )</small>
</div>
</a>
<a href="#" onclick="surat(28)">
<div class="tile mb-3">
<div class="btn btn-danger float-left mr-3">28</div>
<b>Al-Qasas</b><br>
<small>Kisah-Kisah ( 88 Ayat )</small>
</div>
</a>
<a href="#" onclick="surat(29)">
<div class="tile mb-3">
<div class="btn btn-danger float-left mr-3">29</div>
<b>Al-'Ankabut</b><br>
<small>Laba-Laba ( 69 Ayat )</small>
</div>
</a>
<a href="#" onclick="surat(30)">
<div class="tile mb-3">
<div class="btn btn-danger float-left mr-3">30</div>
<b>Ar-Rum</b><br>
<small>Romawi ( 60 Ayat )</small>
</div>
</a>
<a href="#" onclick="surat(31)">
<div class="tile mb-3">
<div class="btn btn-danger float-left mr-3">31</div>
<b>Luqman</b><br>
<small>Luqman ( 34 Ayat )</small>
</div>
</a>
<a href="#" onclick="surat(32)">
<div class="tile mb-3">
<div class="btn btn-danger float-left mr-3">32</div>
<b>As-Sajdah</b><br>
<small>Sajdah ( 30 Ayat )</small>
</div>
</a>
<a href="#" onclick="surat(33)">
<div class="tile mb-3">
<div class="btn btn-danger float-left mr-3">33</div>
<b>Al-Ahzab</b><br>
<small>Golongan Yang Bersekutu ( 73 Ayat )</small>
</div>
</a>
<a href="#" onclick="surat(34)">
<div class="tile mb-3">
<div class="btn btn-danger float-left mr-3">34</div>
<b>Saba'</b><br>
<small>Saba' ( 54 Ayat )</small>
</div>
</a>
<a href="#" onclick="surat(35)">
<div class="tile mb-3">
<div class="btn btn-danger float-left mr-3">35</div>
<b>Fatir</b><br>
<small>Maha Pencipta ( 45 Ayat )</small>
</div>
</a>
<a href="#" onclick="surat(36)">
<div class="tile mb-3">
<div class="btn btn-danger float-left mr-3">36</div>
<b>Yasin</b><br>
<small>Yasin ( 83 Ayat )</small>
</div>
</a>
<a href="#" onclick="surat(37)">
<div class="tile mb-3">
<div class="btn btn-danger float-left mr-3">37</div>
<b>As-Safat</b><br>
<small>Barisan-Barisan ( 182 Ayat )</small>
</div>
</a>
<a href="#" onclick="surat(38)">
<div class="tile mb-3">
<div class="btn btn-danger float-left mr-3">38</div>
<b>Sad</b><br>
<small>Sad ( 88 Ayat )</small>
</div>
</a>
<a href="#" onclick="surat(39)">
<div class="tile mb-3">
<div class="btn btn-danger float-left mr-3">39</div>
<b>Az-Zumar</b><br>
<small>Rombongan ( 75 Ayat )</small>
</div>
</a>
<a href="#" onclick="surat(40)">
<div class="tile mb-3">
<div class="btn btn-danger float-left mr-3">40</div>
<b>Gafir</b><br>
<small>Maha Pengampun ( 85 Ayat )</small>
</div>
</a>
</main>
<!-- End Konten -->
<script src="assets/js/script.js"></script>
</body>
</html>
Ini kodenya ↑↑↑
Jadi saya mau ngambil data search nya langsung dari div class tile itu.
atau ini yang di maksud :
<a href="#" onclick="surat(0)">
<div class="tile mb-3">
<div class="btn btn-danger float-left mr-3">1</div>
<b>Al-Fatihah</b><br>
<small>Pembukaan ( 7 Ayat )</small>
</div>
</a>
<a href="#" onclick="surat(1)">
<div class="tile mb-3">
<div class="btn btn-danger float-left mr-3">2</div>
<b>Al-Baqaroh</b><br>
<small>Sapi ( 286 Ayat )</small>
</div>
</a>
<a href="#" onclick="surat(2)">
<div class="tile mb-3">
<div class="btn btn-danger float-left mr-3">3</div>
<b>Ali-'Imran</b><br>
<small>Keluarga 'Imran ( 200 Ayat )</small>
</div>
</a>
<a href="#" onclick="surat(3)">
<div class="tile mb-3">
<div class="btn btn-danger float-left mr-3">4</div>
<b>An-Nisa'</b><br>
<small>Wanita ( 176 Ayat )</small>
</div>
</a>
<a href="#" onclick="surat(4)">
<div class="tile mb-3">
<div class="btn btn-danger float-left mr-3">5</div>
<b>Al-Ma'idah</b><br>
<small>Hidangan ( 120 Ayat )</small>
</div>
</a>
<a href="#" onclick="surat(6)">
<div class="tile mb-3">
<div class="btn btn-danger float-left mr-3">6</div>
<b>Al-An'am</b><br>
<small>Binatang Ternak ( 165 Ayat )</small>
</div>
</a>
<a href="#" onclick="surat(7)">
<div class="tile mb-3">
<div class="btn btn-danger float-left mr-3">7</div>
<b>Al-A'raf</b><br>
<small>Tempat Tertinggi ( 206 Ayat )</small>
</div>
</a>
<a href="#" onclick="surat(8)">
<div class="tile mb-3">
<div class="btn btn-danger float-left mr-3">8</div>
<b>Al-Anfal</b><br>
<small>Rampasan Perang ( 76 Ayat )</small>
</div>
</a>
<a href="#" onclick="surat(9)">
<div class="tile mb-3">
<div class="btn btn-danger float-left mr-3">9</div>
<b>At-Taubah</b><br>
<small>Pengampunan ( 129 Ayat )</small>
</div>
</a>
<a href="#" onclick="surat(10)">
<div class="tile mb-3">
<div class="btn btn-danger float-left mr-3">10</div>
<b>Yunus</b><br>
<small>Yunus ( 109 Ayat )</small>
</div>
</a>
<a href="#" onclick="surat(11)">
<div class="tile mb-3">
<div class="btn btn-danger float-left mr-3">11</div>
<b>Hud</b><br>
<small>Hud ( 123 Ayat )</small>
</div>
</a>
<a href="#" onclick="surat(12)">
<div class="tile mb-3">
<div class="btn btn-danger float-left mr-3">12</div>
<b>Yusuf</b><br>
<small>Yusuf ( 111 Ayat )</small>
</div>
</a>
<a href="#" onclick="surat(13)">
<div class="tile mb-3">
<div class="btn btn-danger float-left mr-3">13</div>
<b>Ar-Ra'ad</b><br>
<small>Guruh ( 43 Ayat )</small>
</div>
</a>
<a href="#" onclick="surat(14)">
<div class="tile mb-3">
<div class="btn btn-danger float-left mr-3">14</div>
<b>Ibrahim</b><br>
<small>Ibrahim ( 52 Ayat )</small>
</div>
</a>
<a href="#" onclick="surat(15)">
<div class="tile mb-3">
<div class="btn btn-danger float-left mr-3">15</div>
<b>Al-Hijr</b><br>
<small>Hijr ( 99 Ayat )</small>
</div>
</a>
<a href="#" onclick="surat(16)">
<div class="tile mb-3">
<div class="btn btn-danger float-left mr-3">16</div>
<b>An-Nahl</b><br>
<small>Lebah ( 128 Ayat )</small>
</div>
</a>
<a href="#" onclick="surat(17)">
<div class="tile mb-3">
<div class="btn btn-danger float-left mr-3">17</div>
<b>Al-Isra'</b><br>
<small>Perjalanan Malam ( 111 Ayat )</small>
</div>
</a>
<a href="#" onclick="surat(18)">
<div class="tile mb-3">
<div class="btn btn-danger float-left mr-3">18</div>
<b>Al-Kahf</b><br>
<small>Goa ( 110 Ayat )</small>
</div>
</a>
<a href="#" onclick="surat(19)">
<div class="tile mb-3">
<div class="btn btn-danger float-left mr-3">19</div>
<b>Maryam</b><br>
<small>Maryam ( 98 Ayat )</small>
</div>
</a>
<a href="#" onclick="surat(20)">
<div class="tile mb-3">
<div class="btn btn-danger float-left mr-3">20</div>
<b>Taha</b><br>
<small>Taha ( 135 Ayat )</small>
</div>
</a>
<a href="#" onclick="surat(21)">
<div class="tile mb-3">
<div class="btn btn-danger float-left mr-3">21</div>
<b>Al-Anbiya'</b><br>
<small>Para Nabi ( 112 Ayat )</small>
</div>
</a>
<a href="#" onclick="surat(22)">
<div class="tile mb-3">
<div class="btn btn-danger float-left mr-3">22</div>
<b>Al-Hajj</b><br>
<small>Haji ( 78 Ayat )</small>
</div>
</a>
<a href="#" onclick="surat(23)">
<div class="tile mb-3">
<div class="btn btn-danger float-left mr-3">23</div>
<b>Al-Mu'minun</b><br>
<small>Orang-Orang Mukmin ( 118 Ayat )</small>
</div>
</a>
<a href="#" onclick="surat(24)">
<div class="tile mb-3">
<div class="btn btn-danger float-left mr-3">24</div>
<b>An-Nur</b><br>
<small>Cahaya ( 64 Ayat )</small>
</div>
</a>
<a href="#" onclick="surat(25)">
<div class="tile mb-3">
<div class="btn btn-danger float-left mr-3">25</div>
<b>Al-Furqan</b><br>
<small>Pembeda ( 77 Ayat )</small>
</div>
</a>
<a href="#" onclick="surat(26)">
<div class="tile mb-3">
<div class="btn btn-danger float-left mr-3">26</div>
<b>Asy-Syu'ara</b><br>
<small>Para Penyair ( 227 Ayat )</small>
</div>
</a>
<a href="#" onclick="surat(27)">
<div class="tile mb-3">
<div class="btn btn-danger float-left mr-3">27</div>
<b>An-Naml</b><br>
<small>Semut ( 93 Ayat )</small>
</div>
</a>
<a href="#" onclick="surat(28)">
<div class="tile mb-3">
<div class="btn btn-danger float-left mr-3">28</div>
<b>Al-Qasas</b><br>
<small>Kisah-Kisah ( 88 Ayat )</small>
</div>
</a>
<a href="#" onclick="surat(29)">
<div class="tile mb-3">
<div class="btn btn-danger float-left mr-3">29</div>
<b>Al-'Ankabut</b><br>
<small>Laba-Laba ( 69 Ayat )</small>
</div>
</a>
<a href="#" onclick="surat(30)">
<div class="tile mb-3">
<div class="btn btn-danger float-left mr-3">30</div>
<b>Ar-Rum</b><br>
<small>Romawi ( 60 Ayat )</small>
</div>
</a>
<a href="#" onclick="surat(31)">
<div class="tile mb-3">
<div class="btn btn-danger float-left mr-3">31</div>
<b>Luqman</b><br>
<small>Luqman ( 34 Ayat )</small>
</div>
</a>
<a href="#" onclick="surat(32)">
<div class="tile mb-3">
<div class="btn btn-danger float-left mr-3">32</div>
<b>As-Sajdah</b><br>
<small>Sajdah ( 30 Ayat )</small>
</div>
</a>
<a href="#" onclick="surat(33)">
<div class="tile mb-3">
<div class="btn btn-danger float-left mr-3">33</div>
<b>Al-Ahzab</b><br>
<small>Golongan Yang Bersekutu ( 73 Ayat )</small>
</div>
</a>
<a href="#" onclick="surat(34)">
<div class="tile mb-3">
<div class="btn btn-danger float-left mr-3">34</div>
<b>Saba'</b><br>
<small>Saba' ( 54 Ayat )</small>
</div>
</a>
<a href="#" onclick="surat(35)">
<div class="tile mb-3">
<div class="btn btn-danger float-left mr-3">35</div>
<b>Fatir</b><br>
<small>Maha Pencipta ( 45 Ayat )</small>
</div>
</a>
<a href="#" onclick="surat(36)">
<div class="tile mb-3">
<div class="btn btn-danger float-left mr-3">36</div>
<b>Yasin</b><br>
<small>Yasin ( 83 Ayat )</small>
</div>
</a>
<a href="#" onclick="surat(37)">
<div class="tile mb-3">
<div class="btn btn-danger float-left mr-3">37</div>
<b>As-Safat</b><br>
<small>Barisan-Barisan ( 182 Ayat )</small>
</div>
</a>
<a href="#" onclick="surat(38)">
<div class="tile mb-3">
<div class="btn btn-danger float-left mr-3">38</div>
<b>Sad</b><br>
<small>Sad ( 88 Ayat )</small>
</div>
</a>
<a href="#" onclick="surat(39)">
<div class="tile mb-3">
<div class="btn btn-danger float-left mr-3">39</div>
<b>Az-Zumar</b><br>
<small>Rombongan ( 75 Ayat )</small>
</div>
</a>
<a href="#" onclick="surat(40)">
<div class="tile mb-3">
<div class="btn btn-danger float-left mr-3">40</div>
<b>Gafir</b><br>
<small>Maha Pengampun ( 85 Ayat )</small>
</div>
</a>
2 Jawaban:
Jawaban Terpilih
<div>Kalau searching nya pake live search, saya bisa bantu.<br><br><a href="https://www.w3schools.com/howto/howto_js_filter_lists.asp">W3Schools | How TO - Filter/Search List</a><br><a href="https://www.w3schools.com/howto/howto_js_filter_table.asp">W3Schools | How TO - Filter/Search Table</a><br><br>Intinya, kalau anda mau mencari sesuatu di javascript, anda harus pakai <a href="https://www.w3schools.com/jsref/jsref_indexof.asp">indexOf()</a><br><br>Semoga membantu.</div>
<div>Sepertinya akan lebih mudah jika data-nya di simpan di file .json, nanti buat tampilinnya bisa pake fungsi khusus javascript, bisa pakai fetch, ajax, dan sebagainya. Kemudian, untuk pencariannya, bisa langsung melakukan pencarian pada file json-nya.<br><br>Coba lihat beberapa referensi berikut :<br>- <a href="https://sekolahkoding.com/kelas/berkenalan-dengan-json">https://sekolahkoding.com/kelas/berkenalan-dengan-json</a><br>- <a href="https://www.petanikode.com/json-pemula/">https://www.petanikode.com/json-pemula/</a><br><br>* Membaca file .JSON <br>- <a href="https://kursuswebdesign.org/cara-menampilkan-data-json-dengan-ajax-javascript/">https://kursuswebdesign.org/cara-menampilkan-data-json-dengan-ajax-javascript/</a><br>- <a href="https://stackoverflow.com/questions/19706046/how-to-read-an-external-local-json-file-in-javascript">https://stackoverflow.com/questions/19706046/how-to-read-an-external-local-json-file-in-javascript</a><br>- <a href="https://blog-en.openalfa.com/how-to-read-json-files-in-javascript">https://blog-en.openalfa.com/how-to-read-json-files-in-javascript</a><br><br>* Salah satu contoh studi kasus pencarian dengan sumber data dari file .json<br>- <a href="https://stackoverflow.com/questions/10679580/javascript-search-inside-a-json-object">https://stackoverflow.com/questions/10679580/javascript-search-inside-a-json-object</a><br>- <a href="http://techslides.com/how-to-parse-and-search-json-in-javascript">http://techslides.com/how-to-parse-and-search-json-in-javascript</a><br>- <a href="https://www.c-sharpcorner.com/Blogs/creating-json-file-and-searching-data-from-json-file-using-javascript">https://www.c-sharpcorner.com/Blogs/creating-json-file-and-searching-data-from-json-file-using-javascript</a><br><br>Semoga membantu!<br><br></div>