Sistem Login Register Part14 – Membuat Pesan Error Pada Aktivitas

Febri Hidayan Komentar

Sistem Login Register Part14 – Membuat Pesan Error Pada Aktivitas

Khusus pesan error kita akan menggunakan bootstrap4 dan tag html? Terpaksa untuk keluar sebentar dari php. Silakan lihat deskripsi lengkapnya dibawah ini.

Membuat Pesan Error Pada Aktivitas

Pada pembuatan pesan error pada saat kita melakukan aktivitas yang berupa kesalahan username atau password. Hal ini kita gunakan untuk menambah nilai kepuasan kita dalam pembuatan suatu aplikasi alias memperindah tampilan desain. Kita tidak lama untuk melakukan hal ini, tapi kita harus menggunakan jQuery hal ini untuk menyembunyikan error setelah beberapa detik kemudian. Kalau begitu kita bisa langsung ikuti langka berikut ini.

Baca juga: Sistem Login Register Part13 – Menguji Username Yang Belum Terdaftar

Pemberitahuan: sebelum melanjutkan tutorial yang satu ini, diharapkan untuk mengikuti tutorial sebelumnya pada link diatas. Bukan hanya itu ikuti paling awal tutorial Sistem Login Register ini.

Langka1

Pada langka pertama kita membuat file baru yaitu message.php di folder template, pada pembuatan folder dan file sebelumnya ada di part1 pada tutorial ini. Selanjutnya kita bisa langsung copy script-Nya dibawah ini.

Kode Message.php
<?php if (!empty($mes_success)): ?>
  <div class="alert alert-success">
  	<a href="#" class="close" data-dismiss="alert">×</a>
    <strong>Success! </strong><?= $mes_success; ?>
  </div>
<?php elseif (!empty($mes_info)): ?>
  <div class="alert alert-info">
  	<a href="#" class="close" data-dismiss="alert">×</a>
    <strong>Info! </strong><?= $mes_info; ?>
  </div>
<?php elseif (!empty($mes_warning)): ?>
  <div class="alert alert-warning">
  	<a href="#" class="close" data-dismiss="alert">×</a>
    <strong>Warning! </strong><?= $mes_warning; ?>
  </div>
<?php elseif (!empty($mes_danger)): ?>
  <div class="alert alert-danger">
  	<a href="#" class="close" data-dismiss="alert">×</a>
    <strong>Danger! </strong><?= $mes_danger; ?>
  </div>
<?php endif; ?>

Sedikit pembahasan untuk script diatas ialah dimana class css .alert merupaka semua metode untuk membuat pesan class css .alert-danger, -warning dan seterusnya ialah untuk membuat background color. Jadi setiap tampilannya bahaya maka warning, kalau pemberitahuan maka info. Khusus !empty() dari artinya kita sudah tahu yaitu kosong, akan tetapi kita menggunakan tanda seru ! sebelumnya maka kebalikan dari kosong yaitu berisi. Kita juga bisa mengubah !empty menjadi isset(), terserah kita bebas mau pilih yang mana karena keduanya sudah saya uji ternyata keduanya juga bisa.

Baca juga: Sistem login dan Register Dengan PDO

Langka2

Selanjutnya kita tinggal memanggil file message.php tadi di file login.php atau register.php, tetapi kita akan coba di login.php nanti bisa dicoba sendiri di file register.php. Kurang lebih gambaran penggunaannya seperti dibawah ini. Meletakan pemanggilan file message.php harus dibawah karena script dibaca dari atas ke bawah.

Kode Login.php
if (isset($_POST['login'])) {
  if (!empty(trim($_POST['username'])) && !empty(trim($_POST['password']))) {
    if (select_name_key('user', 'username', $_POST['username']) != 0) {
      if (select_login('user', 'password', 'username', $_POST['username'], $_POST['password'])) {
        $mes_success = "Berhasil login";
      }else {
        $mes_info = "Password Anda salah";
      }
    }else {
      $mes_info = "Username belum didaftarkan";
    }
  }else {
    $mes_warning = "Kolom wajib diisi semua";
  }
}
require_once 'template/message.php'; // Wajib dibawah sini

Langka3

Pada langka terakhir kita bisa langsung menggunakan fungsi jQuery untuk menyembunyikan pesan error maupun success (alert). Hal yang pertama ialah kita harus meletakannya di paling bawah sebelum tag penutup <body>. Jadi contoh scriptnya seperti dibawah ini, silakan simpan di file footer.php di folder template.

Kode jQuery slideUp()
<script>
	window.setTimeout(function() {
    $(".alert").fadeTo(500, 0).slideUp(500, function(){
        $(this).remove();
    });
	}, 2000);
</script>

Sedikit informasi apa bila kita ingin mengurangi waktu atau waktunya kecepatan atau kelamaan kita bisa merubanya angka 2000 diatas menjadi 3000 atau 1000. Satuannya berupa milidetik, mungkin itu yang bisa saya bahas tentang tampilan pesan error pada artikel kali ini dan selamat mencoba.

Baca juga: Sistem Login Register Part15 – Menyimpan Data Username Dengan Session

Category PHPTags Sistem Login Register


Write a Reply or Comment

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

This site uses Akismet to reduce spam. Learn how your comment data is processed.