Notifikasi Pemberitahuan di CSS – # HTML & PHP

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by abdurrahman October 17, 2020

Pengantar:
Tutorial ini membahas tentang cara membuat kotak notifikasi untuk situs web Anda.

Ini adalah bagian pertama dari dua bagian, di mana kita akan membuat HTML dan mengatur pesan.

Kotak Pemberitahuan?
Ketika saya mengatakan kotak notifikasi, yang saya maksud adalah salah satu kotak informasi yang mulus dan bergeser yang terkadang muncul dalam keadaan tertentu di situs web di bagian atas halaman. Biasanya menyatakan bahwa halaman web menggunakan 'cookies'.


HTML:
Pertama kami ingin membuat HTML untuk halaman kami. Untuk kotak notifikasi HTML kita akan memiliki beberapa elemen ...
.outerBox - Seluruh lebar halaman untuk memberikan warna background yang bagus
.innerBox - Mengatur lokasi konten dalam
.innerBox #information - Pesan notifikasi.
.innerBox #close - Kotak yang dapat diklik pengguna untuk menutup kotak notifikasi.

<html>
	<head></head>
	<body>
		<div class='outerBox'>
			<div class='innerBox'>
				<p id='information'>Info.</p>
				<p id='close'>X</p>
			</div>
		</div>
	</body>
</html>

HTML di atas sekarang siap muncul sebagai kotak pemberitahuan, namun pesannya akan selalu menjadi 'Info'. Biasanya pesan ini akan ada hubungannya dengan kueri sisi server seperti pengguna yang mencoba masuk mengetik informasi mereka secara tidak benar, jadi kami akan mengeluarkan pesan PHP di sana.

PHP: Pertama kami mengatur area PHP kami ..

<?php
?>

Selanjutnya kami akan mengeksekusi kueri kami, dan dalam kondisi tertentu kami ingin mengatur pesan informasi / pemberitahuan baru. Kami akan membuat / menetapkan nilai variabel bernama 'pesan' untuk ini.

//Execute queries here, etc...
$message = 'That username is not available!';

Sekarang di mana kita memiliki kotak notifikasi HTML, kami ingin memeriksa terlebih dahulu apakah variabel $ message disetel dalam PHP, jika ya, itu berarti kami memiliki pesan yang ingin kami keluarkan melalui kotak notifikasi baru.

if (isSet($message)) {
	//Notification box code in here...
}

Akhirnya kami ingin mengubah 'Info.' dari kotak notifikasi ke pesan PHP. Ini kode terakhir kita.

<?php
	//Execute queries here, etc...
	$message = 'That username is not available!';
?>
<html>
	<head></head>
	<body>
		<?php
		if (isSet($message)) {
		//Notification box code in here...
		echo "
		<div class='outerBox'>
			<div class='innerBox'>
				<p id='information'>".$message."</p>
				<p id='close'>X</p>
			</div>
		</div>";
		}
		?>
	</body>
</html>