Halo semuanya, kembali lagi di tulisan saya. Pada kesempatan kali ini, saya akan membahas cara membuat website tanpa reload degan menggunakan jquery ajax dan php. Bagaimana cara membuatnya?, ayo ikuti tutorialnya berikut ini!.


Menjaga performa load website adalah hal yang penting untuk meningkatkan kenyamanan user. Salah satu caranya adalah dengan menggunakan teknik ajax. Ajax adalah kepanjangan dari asynchronus javascript and xml, yaitu sebuah metode untuk merequest data ke server tanpa me-refresh atau mereload halaman tersebut. Dengan menggunakan metode ini, pergantian halaman menjadi lebih smooth dan cepat, dan dari sisi ux tentu menjadi lebih baik dan nyaman. 

Pada tutorial kali ini, kita akan membuat sebuah website sederhana yang akan menampilkan 3 halaman yang berbeda, terdapat menu dibilah sebelah kiri, dan untuk mempercantik tampilan disini saya menggunakan bootstrap versi 4. Pada tutorial kali ini juga kita tidak menggunakan database, untuk penggunaa database bisa kalian improvisasi sendiri dengan teknik ajax yang sama dengan penjelasan saya di bawah ini.

Baca Artikel Lain ✨
📰 1. Membuat Notifikasi Realtime dengan php dan Jquery read more
📰 2. Cara Membuat Hide/Show Input Password dengan Javascript dan Bootstrap read more
📰 3. Cara Mencegah Multiple Submit dan Cara Menggunakan Spinner Bootstrap sebagai Indicator Loading pada Php read more


Cara Membuat Website Tanpa Reload dengan Jquery Ajax

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

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <title>Latihan Membuat Web Tanpa Reload</title>
        <!-- bootstrap versi 4 -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
            integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
    </head>
    
    <body>
        <div class="container mt-4">
            <!-- navbar bootstrap  -->
            <nav class="navbar navbar-dark bg-primary mb-4">
                <a class="navbar-brand" href="#">
                    <img src="https://getbootstrap.com/docs/4.6/assets/brand/bootstrap-solid.svg" width="30" height="30"
                        alt="">
                    Bootstrap
                </a>
            </nav>
            <!-- menu -->
            <div class="row">
                <div id="menu" class="col-3">
                    <ul class="list-group">
                        <li class="list-group-item"><a href="beranda">Beranda</a></li>
                        <li class="list-group-item"><a href="kontak">Kontak</a></li>
                        <li class="list-group-item"><a href="profil">Profil</a></li>
                    </ul>
                </div>
                <div class="col-9">
                    <div id="content">
                        <!-- isi halaman akan diload di sini  -->
                    </div>
                </div>
            </div>
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script>
            $(document).ready(function () {
                // pilih konten beranda saat mengakses halaman ini 
                $('#content').load('beranda.php');
                // saat a href diklik maka 
                $('a').click(function () {
                    // simpan isi href ke dalam var halaman
                    var halaman = $(this).attr('href');
                    // lalu konten akan diisi halaman yang sesuai dengan pilihan
                    $('#content').load(halaman+'.php');
                    return false;
                });
            });
    
        </script>
    </body>
    
    </html>

Penjelasan:
Untuk bagian html, terlihat sederhana dimana ada bagian navbar, lalu dibawah ada 2 bagian yang terpisah yaitu bagian menu dan bagian dari isi halaman tersebut. Yang paling penting perhatikan bagian javascriptnya.

Dimana skenarionya, saat document selesai diload maka panggil halaman beranda. Tapi jika ada aktivitas klik pada salah satu bagian href-nya maka load halaman yang sesuai dengan pilihan. Untuk bagian load halaman di letakkan di dalam <div id="content">.....</div>.




2. Buatlah 3 buah file yang berbeda, dengan nama beranda.php, kontak.php, dan profil.php di dalam folder yang sama. Lalu isi setiap file tersebut dengan script yang ada di bawah ini.
        

<div class="card">
    <div class="card-body">
        <h5 class="card-title"><span class="badge badge-primary">Beranda</span></h5>
        <p class="card-text">Ini adalah halaman beranda di load menggunakan Jquery Ajax</p>
    </div>
</div>

Silahkan cocokkan judul dan isi sesuai dengan nama file masing-masing. Hal ini bertujuan untuk membedakan dimana file beranda, file profil dan file kontak.




3. Silahkan save project kalian, dan jalankan di browser. Jika sukses, maka hasilnya akan tampak seperti gambar di bawah ini. Jika kalian perhatikan, perpindahan halamannya sangat smooth sekali, tidak ada reload halaman.
membuat web tanpa reload dengan jquery ajax
Hasil akhir 



Bagaimana tidak susahkan?, oh ya, kalian juga bisa melakukan improvisasi mandiri dengan menambahkan tabel database ke dalam file-file tersebut. Bagaimana caranya?, caranya tinggal kalian sisipkan saja tabel yang sudah terhubung ke database ke dalam file beranda, atau file profil, atau file kontak.

Sekian tutorial cara membuat website tanpa reload dengan jquery ajax dan php. Semoga tutorial ini bermanfaat, bagi yang ingin bertanya, silahkan tinggalkan pertanyaan kalian di kolom komentar di bawah postingan ini. Sampai jumpa di tutorial menarik lainnya.


Tags

Post a Comment

Posting Komentar

Lebih baru Lebih lama