Contoh Alert Bootstrap 4 PHP Framework

Alert bootstrap 4 merupakan component bootstrap untuk menampilkan pesan ketika sebuah aksi dilakukan pada aplikase web yang dikembankan.Contoh alert bootstrap 4 dapat digunakan sebagai notifikasi, message ketika data berhasil di tambahkan ke database. Dalam sebuah aplikasi selalu membutuhkan aksi create, read, update dan delete atau lazim di sebut CRUD.

Contoh Alert Bootstrap 4
Contoh alert Bootstrap 4

CRUD sebagai kegiatan dasar dalam sebuah aplikasi web kaitannya dengan alert sangat erat. setiap aksi crud membutuhkan notifkasi baik ketika aksi berhasil dilaksanakan maupun saat aksi crud gagal dilaksanakn.

Dengan memberikan alert di aplikasi yang dibuat menjadikan aplikasi lebih interaktif karena alert memerikan feedback dari setiap aksi yang dilakukan.

Contoh Penggunaan Alert Bootstrap 4 PHP

Contoh alert bootstrap pada artikel ini dibuat menggunakan framework codeigniter dan bootstrap 4

hasil yang akan di capai dari contoh penggunaan bootstrap ini seperti gambar berikut:

contoh alert bootsrap 4
contoh alert bootstrap 4 php

Dari gambar contoh alert bootstrap 4 di atas kita menggunakan alert primary. untuk dapat menggunakan alert di php silahkan mendownload bootstrap terlebih dahulu dan pahami cara penggunaan bootstrap.

Script php Menggunakan Alert Bootstrap 4

contoh alert bootstrap menggunakan framework codeigniter silahkan buat file view sebagai berikut:

input_siswa.php

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="http://localhost/indonetsource/bootstrap/css/bootstrap.min.css">
</head>

<body>
    <div class="container">
        <div class="card">
            <div class="card-header">
                <h2>Contoh Penggunaan Alert bootstrap PHP</h2>
            </div>
            <?php if ($this->session->flashdata("sukses")) { ?>
                <div class="alert alert-primary" role="alert">
                    <?php echo $this->session->flashdata("sukses"); ?>
                </div>
            <?php  } ?>

            <div class="card-body">
                <form action="<?= base_url('siswa/input'); ?>" method="post">
                    <div class="form-group">
                        <label for="InputId">Id</label>
                        <input type="text" class="form-control" name="id_siswa" id="InputId" placeholder="Input Id">
                    </div>
                    <div class="form-group">
                        <label for="InputNama">Nama</label>
                        <input type="text" class="form-control" name="nama" id="InputNama" placeholder="Input Nama">
                    </div>
                    <button type="submit" class="btn btn-primary">simpan</button>
                </form>
            </div>
        </div>
    </div>
</body>
<script src="http://localhost/indonetsource/bootstrap/js/jquery-3.5.1.min.js"></script>
<script src="http://localhost/indonetsource/bootstrap/js/popper.min.js"></script>
<script src="http://localhost/indonetsource/bootstrap/js/bootstrap.min.js"></script>

</html>

Controller

Siswa.php

<?php 
class Siswa extends CI_Controller{
	
	function __construct()
	{
		parent::__construct();	
		$this->load->model(array('siswa_model'));
	}

	public function index(){
		$this->load->view('input_siswa');		
	}

	public function input(){
		$data = array(
			'id_siswa' => $this->input->post('id_siswa'),
			'nama' => $this->input->post('nama'),
		 );
		 $this->siswa_model->input('siswa',$data);		 
		 $this->session->set_flashdata("sukses","Data Berhasil Diinputkan");
		 redirect(base_url('siswa'));		
		
	}
}

Controller di atas memiliki session yang akan di tampilkan menggunakan alert bootstrap 4.

Ketika proses simpan berhasil maka alert Data Berhasil di inputkan akan muncul.

Untuk melengkapi proses di atas silahkan gunakan juga model berikut:

Siswa_model.php

<?php 
class Siswa_model extends CI_Model{

	public function input($table,$data){
		return $this->db->insert($table,$data);
	}
}

Bagian selanjutnya pastikan project telah memiliki database dan file autoload session telah diset.

$autoload['libraries'] = array('database','session');

Database yang digunakan memiliki struktur tabel sebagai berikut:

CREATE TABLE `siswa` (
 `id_siswa` int(11) NOT NULL AUTO_INCREMENT,
 `nama` varchar(50) NOT NULL,
 PRIMARY KEY (`id_siswa`)
) ENGINE=InnoDB AUTO_INCREMENT=17 DEFAULT CHARSET=latin1

Dengan kelengkapan data dan configurasi di atas pembuatan contoh menggunakan alert bootstrap telah selesai di buat.

untuk menggunakan alert lainnya silahkan mengubah sesuai dengan alert bootstrap 4 yang telah di sediakan di dokumentasi bootstrap pada link berikut:

https://getbootstrap.com/docs/4.0/components/alerts/

di halaman web tersebut terdapat contoh alert sebagai berikut

<div class="alert alert-primary" role="alert">
  This is a primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
  This is a secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
  This is a success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
  This is a danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
  This is a warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
  This is a info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
  This is a light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
  This is a dark alert—check it out!
</div>

Silahkan dicobakan pengunaan alert di atas dengan ketentuan berikut:

alert success digunakan ketika berhasil menyimpan data ke database

alert-danger digunakan ketika proses input gagal

alert-info dapat digunakan ketika berhasil menghapus data

Pilihan di atas tentunya tergantung kebutuhan. demikian tutorial tentang alert bootstrap 4 semoga dapat menambah pemahaman penggunaan bootstrap 4 .

Untuk tutorial bootstrap lainnya silahkan kunjungi halaman daftar tutorial menggunakan bootstrap 4 indonetsource

Leave a comment