Membuat Pop Up Pesan Sederhana Menggunakan PHP
anaksmanda.com - Setelah sebelumnya kita sudah membahas tentang Konsep Dasar Dalam PHP berikut ini kita akan melanjutkan pembahasan tentang cara Membuat Pop Up Pesan Sederhana Menggunakan PHP. Setelah menambahkan data, biasanya akan muncul pesan pop-up yang menunjukkan bahwa entri berhasil, atau saat menghapus data, akan muncul pesan pop-up berisi data yang dihapus atau data yang tidak dihapus. Hal seperti ini biasa digunakan oleh semua programmer agar user mengetahui tindakan apa yang mereka lakukan dan apa yang diproses oleh program tersebut.
Disini kita akan belajar cara membuat popup pesan di PHP yang tentunya akan sangat berguna untuk proses pengembangan website php kita nantinya. Poin-poin dalam Belajar membuat Pop Up Pesan di PHP adalah dengan menggunakan Javascript ataupun menggunakan CSS.
1. Membuat Pop Up Pesan dengan Javascript di PHP
Buat file, terserah Kalian. Bisa di beri nama apa saja, yang penting format terakhir adalah *.php, karena disini kita akan belajar cara membuat pop up pesan di PHP, tentunya kita akan menggunakan ekstensi *.php.
Setelah kalian membuat file, sekarang kita akan mencoba membuat pop up pesan ini dalam PHP. Kita mencoba membuat file dengan input_data.php dan di file itu kita ingin membuat laporan jika datanya dimasukkan. Ikuti script berikut dan coba di file yang baru saja kalian buat.
<?php
$dbhost = 'localhost';
$dbuser = 'root';
$dbpassword = '';
$dbname = 'pemulabelajar';
$koneksi = mysql_connect($dbhost,$dbuser,$dbpassword);
mysql_select_db($dbname,$koneksi);
if (isset($_POST['kirim'])) {
$namasiswa = $_POST['nama'];
$kelassiswa = $_POST['kelas'];
$sql = "INSERT INTO `siswa`(`nama`, `kelas`) VALUES ('$namasiswa','$kelassiswa')";
$tambahdata = mysql_query($sql);
if(!$tambahdata ){
echo "<script>alert('Gagal di tambahkan!');history.go(-1);</script>";
} else{
echo "<script>alert('Data berhasil di tambahkan!');history.go(-1);</script>";
}
}
mysql_close($koneksi);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tambah data siswa - www.anaksmanda.com</title>
</head>
<body>
<h3>Menambahkan Siswa di Sekolah PemulaBelajar</h3>
<form method="post">
<p>Nama Siswa :</p>
<input name="nama" type="text" />
<p>Kelas Siswa :</p>
<input name="kelas" type="text" />
<p><button type="submit" name="kirim">Simpan</button></p>
</form>
</body>
</html>
Kalian hanya perlu menambahkan JavaScript yang berwarna merah tersebut untuk bisa menampilkan popup pesan di PHP. Dan jika kalian berhasil menambahkan data maka pesan akan muncul seperti gambar dibawah :
Biasanya pesan akan berwarna seperti ini, berbeda jika kita bisa mendesainnya sebagai css. Namun, masih akan ada pesan yang menunjukkan bahwa data telah ditambahkan.
2. Membuat Pop Up Pesan dengan CSS di PHP
Memang sedikit ribet membuat pesan popup dengan css, tapi hasilnya tidak mengecewakan, lebih keren dan enak dipandang, itu saja. Karena kita bisa atur agar user-friendly, bahasanya keren. Masih menggunakan file dari artikel sebelumnya, karena kalian sudah paham dengan membuat Pop Up Pesan dengan Javascript di PHP pada poin sebelumnya menggunakan JS (baca: Javascript) sekarang kita menggunakan CSS. Salin dan paste kan kode berikut:
<?phpDisana sudah saya tandakan tulisan yang berwarna biru menandakan CSS yang kita pakai untuk Membuat Popup Pesan Sederhana di PHP dan tulisan yang berwarna merah adalah script yang akan membuat Popup Pesan di PHP tersebut. Dan hasilnya akan nampak seperti ini, dan lebih fress dari javascript di atas.
$dbhost = 'localhost';
$dbuser = 'root';
$dbpassword = '';
$dbname = 'pemulabelajar';
$koneksi = mysql_connect($dbhost,$dbuser,$dbpassword);
mysql_select_db($dbname,$koneksi);
if (isset($_POST['kirim'])) {
$namasiswa = $_POST['nama'];
$kelassiswa = $_POST['kelas'];
$sql = "INSERT INTO `siswa`(`nama`, `kelas`) VALUES ('$namasiswa','$kelassiswa')";
$tambahdata = mysql_query($sql);
if(!$tambahdata ){
echo '<div id="tampil_modal">
<div id="modal">
<div id="modal_atas">Informasi</div>
<p>Gagal di tambahkan!.</p>
<a href="index.php"><button id="oke">Oke</button></a>
</div></div>';
} else{
echo '<div id="tampil_modal">
<div id="modal">
<div id="modal_atas">Informasi</div>
<p>Data berhasil di tambahkan!.</p>
<a href="index.php"><button id="oke">Oke</button></a>
</div></div>';
}
}
mysql_close($koneksi);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tambah data siswa - www.anaksmanda.com</title>
<style type="text/css">
#tampil_modal {
padding-top: 10em;
background-color: rgba(0,0,0,0.8);
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 10;
display: block;
}
#modal{
padding: 15px;
font-size: 16px;
background: #e74c3c;
color: #fff;
width: 480px;
border-radius: 15px;
margin: 0 auto;
margin-bottom: 20px;
padding-bottom: 50px;
z-index: 9;
}
#modal_atas{
width: 100%;
background:#c0392b;
padding: 15px;
margin-left: -15px;
font-size: 18px;
margin-top: -15px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
#oke {
background:#c0392b;
border:none;
float:right;
width:80px;
height:auto;
color: #fff;
margin-right: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<h3>Menambahkan Siswa di Sekolah PemulaBelajar</h3>
<form method="post">
<p>Nama Siswa :</p>
<input name="nama" type="text" />
<p>Kelas Siswa :</p>
<input name="kelas" type="text" />
<p><button type="submit" name="kirim">Simpan</button></p>
</form>
<a href="lihat.php">Lihat Data</a>
</body>
</html>
