Wednesday, July 12, 2017

Membuat Alert Boostrap pada Codeigniter

Bootstrap menyediakan fitur alert sehingga apabila kita membuat sebuah pesan pada suatu fungsi di web maka alert itu akan muncul sebagai informasi pemberitahuan bahwa fungsi tersebut berhasil di jalankan atau gagal di jalankan. Selain alert Bootstrap di gunakan untuk pesan fungsi berhasil atau gagal, alert bootstrap juga bisa di gunakan untuk menayampaian pesan yang di inginkan. Tertarik untuk mepejalari Framework Bootstrap ? simak tutorial berikut untuk mempelajari penggunaan Alert pada Bootstrap.

Tutorial ini merupakan tutorial berkelanjutan, untuk melihat daftar isi silahkan baca artikel : Tutorial Pembuatan Apliakasi PPDB Online Berbasis Web ( Lihat Artikel )
Membuat Alert Boostrap pada Codeigniter
Membuat Alert Boostrap pada Codeigniter

Dalam penggunaanya sendiri, alert bootstrap sangat mudah untuk digunakan. kita cukup memanggil nama classnya di dalam attribute tag div html lalu alert tersebut akan muncul di web browser.
Ada beberapa fungsi alert di bootstrap diantaranya : alert-success, alert-info, alert-warning, alert-danger. berikut penjelasan mengenai alert pada bootstrap :
Membuat Alert Boostrap pada Codeigniter
Membuat Alert Boostrap pada Codeigniter

  • alert-success
    dengan menggunakan class alert-success anda bisa membuat sebuah alert dengan background berwarna hijau. sesuai dengan namanya, biasanya alert-success digunakan untuk membuat pesan sukses, contoh penggunaan : di sebuah halaman web dengan menggunakan bootstrap ada form registrasi akun. ketika kita berhasil mendafarkan akun, maka alert sukses akan muncul di web tersebut. 
  • alert-info
    dengan menggunakan class alert-success anda bisa membuat sebuah alert dengan background berwarna biru. sesuai dengan namanya, biasanya alert-success digunakan untuk membuat pesan informasi, contoh penggunaan : halaman web dengan menggunakan bootstrap ketika ada sebuah informasi, maka alert-info akan muncul di web tersebut.
  • alert-warning
    dengan menggunakan class alert-success anda bisa membuat sebuah alert dengan background berwarna kuing. sesuai dengan namnya, biasanya alert-warning digunakan untuk membuat pesan peringatan. contoh penggunaan : di halaman web dengan menggunakan bootstrap ada form login, jika pengguna web tersebut gagal login 3 x, maka alert-warning akan muncul sebagai pesan peringatan pemblokiran akun.
  • alert-danger
    dengan menggunakan class alert-success anda bisa membuat sebuah alert dengan background berwarna merah. biasanya alert-danger digunakan untuk pesan gagal. contoh : di halaman web dengan menggunakan bootstrap ada form pengisian data. jika data tersebut tidak valid maka pesan alert-danger akan muncul di web tersebut.
Lalu bagaimana penggunaan alert bootstrap pada codeigniter ? simak tutorial berikut :
    1. Pembuatan View
      1. Buatlah folder baru didalam application/views berinama folder tersebut dengan nama "alert"
      2. Buatlah sebuah file view di direktori application/views/alert/ namai dan simpan view tersebut dengan nama berhasil_simpan.php (alert berfungsi menampilkan pesan jika data berhasil di simpan ke daabase)
      3. Masukan script di bawah ini kedalam file berhasil_simpan.php lalu simpan
         <div class="alert alert-success alert-dismissible" role="alert">
          <button type="button" class="close" data-dismiss="alert" aria-label="Close">
           <span aria-hidden="true">&times;</span>
          </button>
          <strong>Sukses !</strong> Data Berhasil Disimpan ...
        </div> 
      4. Buatlah sebuah file view di direktori application/views/alert/ namai dan simpan view tersebut dengan nama berhasil_edit.php (alert berfungsi menampilkan pesan jika data berhasil di perbaharui)
      5. Masukan script di bawah ini kedalam file berhasil_edit.php lalu simpan
         <div class="alert alert-success alert-dismissible" role="alert">
          <button type="button" class="close" data-dismiss="alert" aria-label="Close">
           <span aria-hidden="true">&times;</span>
          </button>
          <strong>Sukses !</strong> Data Berhasil Diperbaharui ...
        </div> 
      6. Buatlah sebuah file view di direktori application/views/alert/ namai dan simpan view tersebut dengan nama berhasil_hapus.php (alert berfungsi menampilkan pesan jika data di database berhasil di hapus)
      7. Masukan script di bawah ini kedalam file berhasil_hapus.php lalu simpan
         <div class="alert alert-success alert-dismissible" role="alert">
          <button type="button" class="close" data-dismiss="alert" aria-label="Close">
           <span aria-hidden="true">&times;</span>
          </button>
          <strong>Sukses !</strong> Data Berhasil Dihapus ...
        </div> 

      Baca juga artikel terkait :
      Demikian tutorial Pemembuatan Alert Boostrap pada Codeigniter jika anda mengalami kendala atau error anda bisa bertanya di kolom komentar. Semoga tutorial ini bermanfaat bagi anda yang sedang belajar pemrograman php khususnya Framework Codeigniter, dan apabila anda menyukai tutorial ini, silahkan untuk berlangganan artikel secara gratis dan anda dapat membagikan artikel ini di akun sosial media milik anda.

      2 comments


      EmoticonEmoticon