Membuat Notifikasi Login dan Register

Pada tutorial ini Anda akan membuat notifikasi untuk memberikan pemberitahuan seperti kesalahan password, username belum terdaftar atau sudah terdaftar. Ada beberapa tambahkan skrip HTML sebagai notifikasinya, silakan ikuti tutorial ini.

Daftar isi:

Baca juga:

Catatan: Agar Anda tidak bingung mengikuti tutorial ini, silakan untuk mengikuti tutorial sebelumnya.

Terapkan pesan notifikasi

Sebelumnya pesan notifikasi hanya menggunakan echo sebagai cara mengeluarkan pesan notifikasi. Jadi, Anda bisa menganti echo dengan membuat variabel $message agar lebih mudah, Anda boleh mengubah teks pesan yang saya buat dibawah ini. Sekarang lihat gambar gif berikut ini untuk melihat struktur variabel $message.

notifikasi message

Berkas register.php

Sekarang salin skrip dibawah ini ke berkas register.php lalu tempelkan skripnya, berikut skripnya:

if (!$user) {

    // ...

    if ($result->execute()) {
        $message = 'Anda berhasil mendaftar akun.';
    } else {
        $message = 'Anda gagal melakukan pendaftaran akun.';
    }
} else {
    $message = 'Maaf!, username sudah didaftarkan.';
}

Berkas login.php

Sekarang salin skrip dibawah ini ke berkas login.php lalu tempelkan skripnya, berikut skripnya:

if ($user) {

    // ...

    else {
        $message = 'Password yang Anda masukan salah.';
    }
} else {
    $message = 'Maaf!, username belum didaftarkan.';
}

Skrip notifikasi

Skrip notifikasi HTML

Silakan untuk memindahkan skrip ini di atas tag form baik di halaman login dan register. Skrip ini akan menampilkan notifikasi apabila variabel $message ada atau tidak, kalau ada maka akan menampilkan pesan notifikasi dan begitu sebaliknya.

<?php if (isset($message)) : ?>
    <div class="notification">
        <button class="delete"></button>
        <?= $message; ?>
    </div>
<?php endif; ?>

Perhatikan gambar gif dibawah ini untuk meletakan skrip HTML diatas tag <form>.

notifikasi Catatan: Berdasarkan definisi Fungsi isset() akan memeriksa apakah sebuah variabel disetel yang berarti ia harus dideklarasikan dan bukan nilai NULL.

Skrip notifikasi Javascript

Agar Anda bisa menghapus notifikasi setelah pesan pemberitahuan notifikasi tampil, silakan salin skrip javascript ini. Kemudian tempelkan pada berkas theFooter.php dibawah tag <footer>. Jadi apabila notifikasi tampil Anda bisa menghapusnya dengan menekan tombil silang (x), maka skrip notifikasi tersebut akan terhapus. Berikut skripnya:

document.addEventListener('DOMContentLoaded', () => {
    (document.querySelectorAll('.notification .delete') || []).forEach(($delete) => {
        var $notification = $delete.parentNode;

        $delete.addEventListener('click', () => {
            $notification.parentNode.removeChild($notification);
        });
    });
});

Perhatikan gambar dibawah ini untuk meletakan dibawah tag <footer>.

skrip javascript

Silakan untuk mencoba di halaman login atau register apakah tutorial ini berhasil berjalan dengan baik atau tidak. Misalnya Anda memasukan password yang salah saat login atau memasukan username yang tidak terdaftar. Selamat mencoba!