Cara Membuat Skeleton Loading Seperti Tokopedia dengan Bootstrap, php dan Ajax

Share:

Halo semuanya, kembali lagi di sahretech. Pada kesempatan kali ini kita akan membuat skeleton loading dengan menggunakan bootstrap, php dan ajax. Skeleton loading adalah efek loading berbentuk kerangka wireframe saat data sedang diload, contohnya banyak sekali, kalian bisa melihat website seperti tokopedia, youtube dan lainnya.


Sebenarnya bootstrap juga menyediakan efek loading, namanya spinner. Ada 2 jenis spinner yang disediakan oleh bootstrap yaitu border spinner, dan growing spinner. Untuk lebih detailnya tentang bootstrap spinner bisa kalian lihat pada tautan dokumentasi berikut ini https://getbootstrap.com/docs/4.4/components/spinners/

cara membuat skeleton loader
Contoh skeleton loading pada youtube


Pada tutorial kali ini kita tidak akan membahas spinner bootstrap, sesuai dengan judul, kita akan membahas skeleton loading. Saat ini kalian bisa menggunakan library tambahan untuk membuat skeleton loading yang mudah digunakan, nama librarynya adalah placeholder loading, klik link berikut ini untuk melihat githubnya https://github.com/zalog/placeholder-loading

Kalian bisa menggunakan npm atau versi cdn untuk langsung menggunakan library ini, tapi pada tutorial kali ini kita akan menggunakan versi cdnnya saja agar artikel ini tidak terlalu panjang dan lebih mudah dimengerti.

Baca Artikel Lain ✨
📰 1. Cara Membuat Upload Gambar dari Webcam dan Prosesnya dengan Php, Jquery, dan Mysql read more
📰 2. Cara Membuat Drag dan Drop File dan Prosesnya dengan Php, Mysql dan Dropzone Js read more
📰 3. Cara Cepat Membuat Back-end Restful API Tanpa Coding dengan Typicode Json Server Komputer read more
📰 4. Cara Menggabungkan Website dengan Iframe Komputer read more


Cara Membuat Skeleton Loading 

Kita akan membuat sebuah aplikasi berita sederhana, dimana terdiri dari menu dan body berita itu sendiri. Kita tidak menggunakan database, dan load datanya akan menggunakan teknik ajax. Sedangkan untuk tampilan kita menggunakan bootstrap. Karena kita menggunakan bahasa php jadi silahkan kalian siapkan terlebih dahulu xamppnya.


1. Buatlah sebuah folder baru dengan nama latihan_skeleton_loading. Lalu buatlah sebuah file baru di dalamnya dengan nama index.php. Copy script di bawah ini dan pastekan ke dalam file tersebut.
    

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- ajax source --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script> <!-- bootstrap css --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous"> <!-- skeleton source --> <link rel="stylesheet" href="https://unpkg.com/placeholder-loading/dist/css/placeholder-loading.min.css"> </head> <body> <div class="container mt-4"> <!-- membuat menu, dengan warna primary atau warna biru gelap --> <nav class="navbar navbar-dark bg-primary"> <div class="container-fluid"> <a class="navbar-brand" href="#">Skeleton Loading Exercise</a> </div> </nav> <div class="col-12 mt-4"> <!-- dynamic content akan tampil di bagian ini --> <div class="row" id="dynamic_content"> </div> </div> </div> <script> $(document).ready(function () { $('#dynamic_content').html(make_skeleton()) // jalankan fungsi load content setelah 2 detik setTimeout(function(){ load_content() }, 2000); function make_skeleton() { var output = ''; for (var count = 0; count < 6; count++) { output += '<div class="col-4">'; output += '<div class="ph-item">'; output += '<div class="ph-col-12">'; output += '<div class="ph-picture"></div>'; output += '<div class="ph-row">'; output += '<div class="ph-col-6 big"></div>'; output += '<div class="ph-col-4 empty big"></div>'; output += '<div class="ph-col-12"></div>' output += '<div class="ph-col-12"></div>' output += '</div>'; output += '</div>'; output += '</div>'; output += '</div>'; } return output; } //membuat fungsi load data dari data.php function load_content(limit){ $.ajax({ url: 'data.php', method: 'POST', data:{limit:limit}, //jika sukses maka gantilah skeleton loader dengan data.php success:function(data){ $('#dynamic_content').html(data); } }) } }) </script> </body> </html>

Penjelasan Script di Atas:

Selain tabel penjelas di bawah ini, saya juga sudah menyertakan beberapa keterangan pada script di atas untuk memperjelas maksud dari script yang ditulis. Jika masih susah dipahmi, silahkan langsung bertanya di kolom komentar di bawah ini.


No Syntax/Script Penjelasan
1 mt-4 margin top 4
2 navbar navbar-dark bg-primary cara membuat menu berwarna biru gelap dengan menggunakan bootstrap. 
3 id="dynamic_content" skeleton loading akan ditampilkan di dalam element ini.
4 $('#dynamic_content').html(
    make_skeleton()
)
fungsi make_skeleton() akan dijalankan saat dokumen telah selesai dimuat, dan di masukkan ke dalam element id="dynamic_content"
5 setTimeout(function(){
    load_content()
}, 2000);
saat halaman selesai dimuat, dan sudah lebih 2 detik, maka fungsi load_content() akan dijalankan
6 function make_skeleton(){ ... } fungsi untuk membuat skeleton loading, di dalamnya terdapat variabel output dan perulangan yang dibuat sebanyak 6 kali. 
7 ph-item, ph-row, ph-picture, dll Adalah class yang digunakan untuk membuat skeleton loader, cara penggunaannya hampir sama dengan card karena berbentuk card. Dan juga menggunakan row dan col untuk sistem gridnya
8 function load_content(limit){ ... } Adalah fungsi untuk nemapilkan data dari file data.php. Fungsi ini dijalankan setelah detik ke-2 dari dokumen selesai dimuat.
9 $.ajax({ ... }) Teknik ajax untuk load data. Di dalamnya ada nama file, metode komuniasi seperti post, data yang diambil, menjalankan fungsi sukses dan fail



2. Buatlah sebuah file baru dengan nama data.php. Silahkan copy script di bawah ini dan paste di dalam file tersebut.

        

<!-- melakukan perulangan sebanyak 6 kali dengan for --> <?php for($i=0; $i<=5; $i++){ ?>     <!-- panjang card adalah 4 kolom dari 12 kolom -->     <!-- mt-4 adalah singkatan dari margin-top 4 -->     <div class="col-4 mt-4">         <div class="card">             <img class="card-img-top" height="200px"                 src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkcDcn9h2FYPY0S-FaqyY4v90xbiNCyDnRmvJEp48LnQJ1neOCFuHTEaN6_tGnd43mmpuFAF_9dNDP2yD15lKc0UmfkL-AiNL8zE8CpKEEDwl-PeTOaX0JqI2aDtNxf1mylTPWwL0mAEw/s1600/bot.jpeg"                 alt="Card image cap">             <div class="card-body">                 <h5 class="card-title">Lorem Ipsum Dolor Sit Amet</h5>                 <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor                     incididunt ut labore et dolore magna aliqua.</p>             </div>         </div>     </div> <?php } ?>

Penjelasan Script di Atas:

Untuk data.php, kita membuat sebuah card dengan gambar dan text dummy. Dan dilooping atau diulangi sebanyak 6 kali. Untuk dokumentasi yang lebih detail cara membuat card bootstrap silahakn klik tautan ini https://getbootstrap.com/docs/4.0/components/card/. Kalian juga bisa mengantinya dengan data yang bersumber langsung dari database.


3. Silahkan jalankan project yang baru kita buat, buka browser lalu ketik http://localhost/latihan_skeleton_loading. Maka hasilnya akan tampak seperti gambar di bawah ini.

membuat skeleton loader dengan php ajax
Hasil akhir dari skeleton loading




Bagaimana?, sangat mudah bukan cara membuat skeleton loading sendiri. Oh iya, jika kalian lebih tertarik dan ingin belajar loading yang simple saja, saya sudah menyiapkannya untuk kalian. Klik link berikut ini untuk mempelajari https://www.sahretech.com/2020/01/cara-membuat-preloader-cantik-dengan.html.

Mudah-mudahan artikel ini mudah dimengerti dan bermanfaat bagi para pembaca. Silahkan tanya di kolom komentar di bawah ini jika merasa ada masalah saat implementasi. Sampai jumpa di tutorial pemrograman keren lainnya.



4 comments:

  1. Assalamualaikum, boleh bagi template nya hu kalo boleh kirim ke: thebestresepmasakan@gmail.com ya terimakasih.😊

    ReplyDelete
    Replies
    1. waalaikumsalam, nama templatenya Created By SoraTemplates | Distributed By Gooyaabi Templates. linknya bisa dicari di bagian footer. :)

      Delete
  2. halo kak, kalau untuk data yang diambil berasal dari controller laravel gimana ya kak?

    ReplyDelete
    Replies
    1. url ajaxnya diganti ke route yang mengarah ke controller. :)

      Delete

Jangan lupa kasih komentar ya!. Karena komentar kalian membantu kami menyediakan informasi yang lebih baik

Tidak boleh menyertakan link atau promosi produk saat berkomentar. Komentar tidak akan ditampilkan. Hubungi 081271449921(WA) untuk dapat menyertakan link dan promosi