Cara Menampilkan Pesan Alert Dengan JavaScript
Hi sahabat kita berjumpa lagi, pada tutorial ini kita akan mencoba membuat bagaimana cara menampilkan Message box Peringatan pesan alert dan confirm dengan menggunakan JavaScript.
Ikuti artikel menarik lainya :
Cara Input JavaScript ke Dalam HTML
Membuat alert dengan JavaScritp
Fungsi alert adalah fungsi sederhana yang digunakan untuk menampilkan pesan kepada pengguna/user website kita.
Berikut tampilan data yang akan kita gunakan untuk tutorial ini :
Berikut source kode lengkap untuk latihan kita buat tiga buah file, pertama buat file php dengan nama latihan1.php ubah.php dan hapus.php dengan kode program sebagai berikut :
latihan1.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Latihan 1</title>
</head>
<body>
<script>
alert('Selamat Datang di Ilmuweb');
</script>
<h1>Membuat Halaman Alert dengan JavaScript</h1>
<table border="1" cellpadding="10" cellspacing="0">
<tr>
<th>No</th>
<th>Nama</th>
<th>Alamat</th>
<th>Aksi</th>
</tr>
<tr>
<td>1</td>
<td>Affanul Hakim</td>
<td>Bandung</td>
<td><a href="ubah.php">Ubah | </a>
<a href="hapus.php" onclick = "return confirm('Yakin Data Akan Dihapus');">Hapus</a> </td>
</tr>
<tr>
<td>2</td>
<td>Asya Adinda</td>
<td>Jakarta</td>
<td><a href="ubah.php">Ubah |
<a href="hapus.php" onclick = "return confirm('Yakin Data Akan Dihapus');">Hapus</a> </td>
</tr>
</table>
</body>
</html>
Script diatas adalah halaman latihan bagian home pada latihan, dimana pada skript bagian awal pada tag JavaScript <script> untuk menampilkan pesan selamat datang di Ilmuweb.
Kemudian pada bagian berikutnya kita buat tabel dengan kolom No, Nama, Alamat, Aksi. Dimana pada kolom tersebut berisi nama, alamat, dan aksi.
Pada latihan1.php ini hanya kode tag html dan javasript tidak terhubung dengan database.
Sehingga pada link aksi Ubah apabila kita klik maka akan menuju ke halaman ubah.php kemudian menampilkan data berhasil diubah, selanjutnya di redirect kembali ke halaman latihan1.php.
Kemudian setelah itu apabila kita klik link Hapus maka akan menuju ke halaman file hapus.php kemdian disitu saya masukan pesan data berhasil di Hapus dan diredirect kembali ke latihan1.php
ubah.php
<?php
echo "<script>
alert('Data berhasil diubah!');
document.location.href = 'latihan1.php';
</script>
";
?>
Pada script diatas untuk menampilkan pesan alert Data berhasil diubah!, kemudian diredirect ke halaman latihan1.php
hapus.php
<?php
echo "<script>
alert('Data berhasil dihapus!');
document.location.href = 'latihan1.php';
</script>
";
?>
Fungsi Pesan Confirm
Pada scrip ubah.php adalah script untuk menampilkan pesan alert Yakin Data Akan Dihapus apabila kita tekan Ok maka perintah akan dilanjutkan, apabila cancel maka perintah dibatalkan, apabila Ok maka akan menuju ke halaman hapus.php dan memunculkan pesan data berhasil dihapus! dan kemudian langsung di redirect menuju kembali ke lokasi file dengan nama latihan1.php
<a href="hapus.php" onclick = "return confirm('Yakin Data Akan Dihapus');">Hapus</a>
Fungsi pesan confirm adalah menampilkan dua pilihan apakah suatu perintah akan dijalankan atau di batalkan, pada kolom aksi hapus.
Pada fungsi ini apabila dijalankan maka browser akan menampilkan message box dengan nila true atau false dengan dua tombol ya atau tidak, apabila kita jalankan maka kita tekan OK, apabila tidak maka tekan Cancel
Pesan Redirect.
Pada javascript terdapat fungsi untuk redirect atau konfirmasi pesan yang kita bisa atur untuk menuju ke halaman tertentu yang kita inginkan seperti pada file hapus.php dan ubah.php
Untuk lebih lengkap download Source Code
Ok sekian dulu tutorial sederhana tentang menampilkan pesan dengan Javascript, semoga bermanfaat.
