Membuat
alert update data berhasil tersimpan auto close pada dasarnya hampir
mirip dengan membuat alert input berhasil tersimpan auto close,
yang membedakan terletak pada script
proses penyimpanan dan pembaharuan data. Tentang apa itu alert..?, tidak akan
dibahas pada tutorial kali ini karena sudah dijelaskan secara singkat pada
tutorial sebelumnya tentang Membuat Alert Inputan Berhasil TersimpanAuto Close. Karena tutorial ini merupakan lanjutan dari tutorial
sebelumnya tentang membuat alert auto
close.
Langsung
saja saya akan memberikan langkah-langkah dan cara mudah untuk membuat
konfirmasi atau notifikasi pesan ketika update data sukses atau gagal secara auto
close (otomatis keluar). Silahkan simak langkah demi langkah tutorial ini yaitu
sebagai berikut:
- Pertama: Untuk lebih mempermudah teman-teman, silahkan download terlebih dahulu semua source code dan komponen tambahan tentang Membuat Alerts Update Berhasil Tersimpan Auto Close pada link berikut, Download disini...
**) Catatan: Materi yang di download tersebut merupakan materi Membuat Alerts Input Berhasil Tersimpan Auto Close. Pada materi tersebut kita akan merubah script proses simpan menjadi proses update.
- Apabila materi sudah berhasil di download, selanjutnya pada file index.php silahkan ubah nama (rename) index.php menjadi update.php.
- Kemudian ubah script update.php seperti 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><font color="#FF0080"> Membuat Alert <b>Update
Berhasil</b> Tersimpan Auto Close </font></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
$id_file=$_GET['id_file'];
$panggil_data =
mysql_query("SELECT * FROM file_materi WHERE id_file='$id_file'");
$r=mysql_fetch_array($panggil_data);
if(isset($_POST['update'])){
$judul=$_POST['judul'];
$a=mysql_query("UPDATE file_materi
SET judul='$judul' WHERE id_file ='$id_file'");
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 Di Update...
</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 class="col-lg-2">
<input class="btn btn-success" type="submit" name="update" value="Simpan">
</div>
</form>
</div></div></div>
<hr>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Keterangan ** :
- Teks yang berlatar belakang warna kuning merupakan koneksi form dengan database.
- Teks yang berlatar belakang warna hijau tosca merupakan sintaks yang berfungsi sebagai pemanggilan data saat update data.
- Teks yang berwarna merah merupakan sitaks PHP yang berfungsi sebagai proses penyimpanan data.
- Teks yang berlatar belakang hijau merupakan sintaks Alert Update jika proses penyimpanan data telah berhasil.
- Teks yang berlatar belakang ungu merupakan sintaks yang berfungsi sebagai Auto Close, saat alert telah tampil.
- Apabila file update.php berhasil dibuat selanjutnya buatkan sebuah file baru untuk index.php yang berfungsi sebagai tabel untuk menampilkan data yang akan di update, kemudian copy script 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" />
</head>
<body>
<center>
<h3><font
color="#FF0080"> Membuat Alert Update Data Berhasil Tersimpan Auto
Close Pada PHP</font></h3>
<h3> Tutorial <a
href="https://www.kodingbuton.com/">kodingbuton.com</a></h3>
</center>
<?php
$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-4">
</div>
<div
class="col-lg-5">
<div
class="panel-body">
<table class="table
table-striped table-bordered table-hover">
<thead>
<tr>
<th><b>No.</b></th>
<th><b>Judul
</b></th>
<th><b>Update</b></th>
</tr>
</thead>
<?php
$sql =
mysql_query("SELECT * FROM file_materi");
$no=1;
while ($r=mysql_fetch_array($sql)){
?>
<?php
echo
"<tr><td>$no</td>
<td>$r[judul]</td>";
?>
<td>
<a href="update.php?id_file=<?php echo $r['id_file']; ?>"><button
class="btn btn-primary btn-xs"
title="Hapus">Update</button></a> </td>
<?php
$no++;
}
?>
</table></div></div></div>
<script
src="js/jquery.min.js"></script>
<script
src="js/bootstrap.min.js"></script>
</body>
Keterangan
** :
- Teks yang berlatar belakang warna kuning merupakan koneksi form dengan database.
- Teks yang berwarna merah merupakan sitaks PHP yang berfungsi sebagai proses pemanggilan data pada tabel.
- Teks yang berlatar belakang hijau merupakan sintaks yang befungsi untuk mengganti data pada tabel.
- 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\alerts-update).
- Jalankan browser dan ketikan url pada address bar (contoh: localhost/ alerts-update). Jika semua proses telah sesuai dan berjalan lancar maka proses membuat alerts Input berhasil tersimpan auto close akan tampil seperti contoh gambar berikut:
- Pada contoh gambar di atas, akan dilakukan update data pada tabel nomor satu (arah telunjuk tangan). Silahkan klik tombol update pada tabel maka, akan tampil form penginputan data.
- Lakukan penginputan data pada form dan simpan data tersebut agar alert notifikasi atau konfirmasi tampil seperti gambar berikut:
- Pada contoh gambar di atas, tampil data yang telah berhasil di update (arah telunjuk tangan).
Demikian pembahasan
tutorial singkat kali ini semoga apa yang saya bagikan ini dapat bermanfaat dan
menjadi Inspirasi dan edukasi untuk membuat notifikasi halaman website
anda.
Apabila ada source code yang tidak berjalan, error atau tidak sesuai,, silahkan isi kolom komentar pada bagian bawah tutorial ini...!.
Lihat juga: Membuat Konfirmasi Hapus Dengan Box Alert Pada PHP
Post a Comment