Membuat alert bootstrap di php

Membuat alert Input berhasil tersimpan auto close merupakan sebuah source code yang di tempatkan pada proses penginputan data pada form atau halaman sebuah website. Alert inputan berhasil tersimpan adalah semacam sebuah notifikasi atau pesan konfirmasi yang disampaikan saat penginputan data telah dilakukan dan berhasil tersimpan. Alert auto close ini merupakan pengembangan sebuah alerts box javascript yang dibuat dengan desain dan tampilan yang lebih menarik sehingga form sebuah inputan website lebih interaktif.

Contoh Gambar Alert Inputan Berhasil Tersimpan Auto Close

Biasanya alert seperti contoh gambar diatas sangat lekat dengan style css dan javascript bootstrap. Bermacam-macam penulis tutorial menjelaskan tentang alert seperti gambar diatas, contoh: membuat auto close alert bootstrap, membuat notifikasi pesan berhasil di simpan termasuk postingan ini yaitu membuat alert inputan berhasil tersimpan auto close, PHP dan MySQL. Apapun tema atau judulnya tujuannya tetap sama yaitu memberikan edukasi tentang cara menerapkan alert yang ada pada bootstrap.

Alert bootstrap sendiri menampilkan beragam warna pilihan yaitu: hijau (dengan sintaks success), biru (dengan sintaks primary dan info), kuning (dengan sintaks warning), merah (dengan sintaks danger) dan lain-lain. Membuat alert notifikasi inputan sangat penting ketika kita membuat sebuah form penginputan halaman website, tujuannnya yaitu untuk memberikan informasi kepada pengguna tentang hasil penginputan data yang dilakukan. Dengan adanya konfirmasi pesan atau notifikasi yang berbentuk alert tersebut pengguna dapat mengetahui apakah data berhasil tersimpan atau data gagal tersimpan.

Lalu, Bagaimana menampilkan notifikasi pesan ketika input data sukses atau gagal secara Auto Close seperti yang telah dijelaskan diatas ?. Nah..., pada postingan tutorial kali ini saya akan memberikan langkah-langkah dan cara mudah untuk membuat konfirmasi atau notifikasi pesan ketika input data sukses atau gagal secara auto close (otomatis keluar). Silahkan simak langkah demi langkah tutorial ini yaitu sebagai berikut:

Pertama: Buatlah sebuah database terlebih dahulu pada phpmyadmin (contoh nama database: materi).
Kedua: Buat sebuah tabel padadatabase tersebut (contoh tabel: file_materi).

Contoh Gambar Database dan Tabel

Ketiga: Buat sebuah file PHP (contoh: index.php) yang berfungsi untuk melakukan proses penginputan data agar tampil alert inputan berhasil atau gagal secara auto close, untuk mempermudah anda masukan sitaks berikut:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>kodingbuton.com</title>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="css/components.css" rel="stylesheet" type="text/css" />
</head>

<body>
<center>
<h3> Membuat Alert Inputan Berhasil Tersimpan Auto Close</h3>
<h3> Tutorial <a href="https://www.kodingbuton.com/">kodingbuton.com</a></h3>
</center>
<?php
//Koneksi dan Menentukan Database

$conn=@mysql_connect("localhost","root","") or die("Tidak Terkoneksi");
$db=@mysql_select_db("materi") or die ("Database Tidak Ditemukan");
?>

<div class="row">
<div class="col-lg-3">
</div>
<div class="col-lg-6">
<div class='card-box'>
<?php
if(isset($_POST['simpan'])){
$judul=$_POST['judul'];
$a=mysql_query("insert into file_materi values('','$judul')");
if($a){
echo '<div class="alert alert-success alert-dismissible fade in" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button>
<strong> Sukses..!</strong> Data Berhasil Tersimpan.
</div>';
echo '<meta http-equiv="refresh" content="3;url=index.php">';
}
}
?>
<hr>
<form action="" method="post" enctype="multipart/form-data" class="form-horizontal">
   <div class="form-group">
   <label class="control-label col-lg-2 col-lg-2">Judul</label>
   <div class="col-lg-8">
<input id="judul" name="judul" type="text" class='form-control' required='' data-errormessage-value-missing='judul masih kosong' >
</div></div>

</div></div></div>
<hr>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Simpan file PHP yang sudah dibuat tersebut dalam sebuah folder dan letakan pada folder htdocs yang terletak pada folder xampp yang telah ter-instal pada komputer anda, (C:\xampp\htdocs\contoh-alerts).

Contoh Gambar Penyimpanan File Dalam Folder

Jalankan browser dan ketikan url pada address bar (contoh: localhost/contoh-alerts). Jika semua proses telah sesuai dan berjalan lancar maka proses membuat alerts Input berhasil tersimpan auto close akan tampil seperti contoh gambar berikut:

Contoh Gambar Form Inputan

Lakukan penginputan data pada form dan simpan data tersebut agar alert notifikasi atau konfirmasi tampil seperti gambar berikut:

Contoh Gambar Form Inputan alert inputan berhasil tersimpan auto close

Keterangan ** :

Teks yang berlatar belakang warna kuning merupakan koneksi form dengan database.
Teks yang berwarna merah merupakan sitaks PHP yang berfungsi sebagai proses penyimpanan data.
Teks yang berlatar belakang hijau merupakan sintaks Alert Inputan jika proses penyimpanan data telah berhasil.
Teks yang berlatar belakang ungu merupakan sintaks yang berfungsi sebagai Auto Close, saat alert telah tampil.

Lihat juga:

Membuat alert bootstrap di php

Pos Terkait

Periklanan

BERITA TERKINI

Toplist Popular

Periklanan

Terpopuler

Token Data

Periklanan

Tentang Kami

Legal

Dukungan

Social