Home / Bootstrap / Tutorial Bootstrap Bagian 7: Membuat Pesan Alert Dengan Bootstrap

Tutorial Bootstrap Bagian 7: Membuat Pesan Alert Dengan Bootstrap

Tutorial sebelumnya kita sudah membahas bagaimana Cara Merancang Form dengan Bootstrap, kemudian class-class yang dapat di gunakan untuk membuat tombol juga sudah kita bahas di tutorial Membuat tombol/ button dengan Bootstrap. Kali ini kita akan melajutkan tutorial bootstrap dengan topik cara membuat pesan alert dengan bootstrap.

Alert biasa digunakan ketika kita selesai menjalankan sebuah proses pada form. Sebagai contoh, kita sedang melakukan penginputan data kemudian setelah menekan tombol simpan maka akan dikeluarkan alert berupa pesan bahwa data berhasil di simpan ataupun bisa saja pesan yang memberitahukan penyimpanan gagal.

Bootstrap sudah tersedia class khusus untuk menampilkan alert. Penggunaanya cukup mudah, kita cukup memanggil class alert kemudian menambahkan jenis class alert yang ingin digunakan. Jenis-jenis class alert yang dapat digunakan untuk membuat pesan Alert dengan bootstrap adalah sebagai berikut:

  • alert-success
    Class ini biasa digunakan untuk menampilkan pesan ketika proses dalam form sudah berhasil dieksekusi(sukses). Alert yang ditampilkan dengan warna background hijau.
  • alert-info
    Class ini biasanya digunakan untuk menampilkan sebuah informasi, bantuan ataupun tips dalam pengisian sebuah form. Alert yang ditampilkan  dengan warna background biru,
  • alert-warning
    Class ini biasanya digunakan untuk menampilkan pesan peringatan. Alert yang ditampilkan dengan warna background kuning.
  • alert-danger
    Biasanya digunakan untuk menampilkan pesan ketika sebuah proses dalam form gagal ataupun terjadi kesalahan pengisian. Alert yang ditampilkan dengan warna background merah.

Berikut contoh penggunaan class-class untuk membuat pesan alert dengan bootstrap.

<!DOCTYPE html>
<html>
  <head>
    <title>Membuat Alert dengan Bootstrap - ITGeek.id</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
    <body>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="alert alert-success">Penyimpanan Berhasil!</div>
                <div class="alert alert-info">Sebelum menekan tombol Simpan, silakan periksa data dengan teliti!</div>
                <div class="alert alert-warning">File yang anda upload melewati kapasitas yang di perbolehkan!</div>
                <div class="alert alert-danger">Penyimpanan Gagal, Silakan coba lagi!</div>
            </div>
        </div>
    </div>
    <script src="js/jQuery v3.2.0.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Penggunaan class alert bisa di lihat pada baris ke 11 sampai dengan 14. Jadi untuk membuat alert, kita hanya perlu menambahkan class=”alert jenis-alert“, jenis alert tinggal di pilih class yang sudah di sediakan. Hasilnya ketika dijalankan di browser adalah sebagai berikut:

Tampilan Alert dengan bootstrap

Bootstrap juga menyediakan class agar sebuah alert setelah ditampilkan bisa ditutup(ada tombol close), dengan penggunaan class ini tentu saja website akan lebih interaktif. Contoh kedua cara membuat pesan alert dengan bootstrap adalah seperti berikut:

<!DOCTYPE html>
<html>
  <head>
    <title>Membuat Alert dengan Bootstrap - ITGeek.id</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
    <body>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="alert alert-success">
                    <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span></button>
                    Penyimpanan Berhasil!
                </div>
                <div class="alert alert-info">
                    <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span></button>
                    Sebelum menekan tombol Simpan, silakan periksa data dengan teliti!
                </div>
                <div class="alert alert-warning">
                    <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span></button>
                    File yang anda upload melewati kapasitas yang di perbolehkan!
                </div>
                <div class="alert alert-danger">
                    <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span></button>
                    Penyimpanan Gagal, Silakan coba lagi!
                </div>
            </div>
        </div>
    </div>
    <script src="js/jQuery v3.2.0.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Contoh diatas tidak jauh berbeda dengan kode sebelumnya, hanya saja di sini ditambahkan button dan class untuk menampilkan tombol close(x). Penggunaannya dapat anda lihat pada baris 12, 16, 20 dan 24. Di sini terdapat karakter &times; yang digunakan untuk menampilkan tanda silang (x) di sebelah kanan atas alert. Ketika tombol close (x) di klik maka secara otomatis alert akan hilang/tidak tampil.

Berikut ini hasilnya ketika dijalankan di browser.

Tampilan pesan Alert dengan bootstrap. Pesan Alert yang memiliki tombol close

Demikian tutorial bootstrap bagian 7 tentang cara Membuat Pesan Alert Dengan Bootstrap. Dengan menggunakan alert maka website akan lebih interaktif. Selamat mencoba dan semoga bermanfaat.

Tutorial selanjutnya adalah Cara membuat Navigation Bar (navbar) dan Dropdown Menu pada Bootstrap , dalam turorial tersebut kita akan merancang navigation bar beserta dropdown menu.

Comments

comments

About Roberto Kaban

Roberto Kaban
My mission in life is not merely to survive, but to thrive; and to do so with some passion, some compassion and some humor.

Tutorial Lain

Tutorial Bootstrap Bagian 13: Membuat Jumbotron Dengan Bootstrap

Tutorial bootstrap kali ini membahas cara membuat jumbotron dengan bootstrap. Jumbotron umumnya ditempatkan pada halaman …

Leave a Reply

Your email address will not be published. Required fields are marked *