Halo semuanya jempa kembali di tutorial tutorial Pemrogramman Dumet School, kali ini kita akan membuat aplikasi sederhana yaitu Aplikasi Sort dengan Javascript, Langsung saja yuk kita praktekan..
tujuan akhir dari tutorial kali ini ialah, seperti gambar di atas kita bisa menyortir Data Berdasarkan Nama Ascending atau Descending. Sebelum nya klaian bisa buka teks editor kalian dan kita buat struktur HTML nya, seperti berikut ini struktur HTML nya.
<!DOCTYPE html> <html> <head> <title>Sort Binatang</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="description" content="Demo project"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous"> </head> <body> <div class="container"> <div class="row"> <div class="col"> <h2 class="text-center mb-4"> Sort Data Binatang </h2> <table class="table"> <thead> <tr> <th> No</th> <th> Nama Binatang </th> </tr> </thead> <tbody id="hasil"> </tbody> </table> <button class="btn btn-info" onclick="asc()">Sort By Nama Binatang ASC</button> <button class="btn btn-danger" onclick="desc()">Sort By Nama Binatang DESC</button> </div> </div> </div> </body> </html>
seperti ini penampkan nya di webrowser teman teman.
nah kira punya dua tombol yang masing masing punya fungsi masing masing, fungsi Sort Ascending dan Fungsi Sort Descending. dan di dalam nya kita sudah memberikan event onclick pada masing masing tombolnya teman teman. dan akan kita buat di javascriptnya.
oke kita tinggal ke javascriptnya, oh iya sebelum penutuup tag </body> kalian ketikan script nya yah teman teman.
kita buat varibel nya masing masing terlebih dahulu.
disini saya membuat var arrBinatang sebagai data array, var hasil sebagai penampung dari id hasil, dan variabel output kosong yang nantinya nilai nya akan berubah ubah.
setelah itu kita looping dengan forEach ayh teman teman seperti ini looping nya.
kita menggunakan template literal yah teman teman, literal ini baru ada di ES6, kita lihat di webrowser kita.
data dari arrBinatang telah kita looping menggunakan forEach, hasilnya muncul di field Nama BInatang di atas.
setelah itu kita membuat fungsi ascending dengan javascript, seperti berikut fungsi nya.
nah coba ke webrowser lagi dan jalankan tombol Sort By Nama BInatang ASC , maka hasilnya seperti berikut yah teman teman.
Fungsi ascending berhasil kita buat dan berjalan sesui dengan fungsi nya, kali ini kita akan mebuat fungsi descending pada aplikasi kita teman teman. seperti berikut fungsi nya.
fungsi Descending selei kita buat, coba jalankan kembali aplikasi kita teman teman.
sesuai dengan fungsi nya descending menyortir berdasarkan nama dari Z ke A. selesei sudah pembahasan kita tentang Aplikasi Sort dengan Javacript, semoga bermanfaat yah teman teman.
The post Aplikasi Sort Data Array dengan Javacript appeared first on Kursus Website Terbaik.