Form Pesan Berbasis PHP & MySQL
Form Pesan Interaktif Berbasis PHP & MySQL
1. Buat Script From Pesan
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>💬 Pesan Malam</title>
<style>
/* Background hitam elegan + hujan */
body {
margin: 0;
height: 100vh;
background: radial-gradient(ellipse at bottom, #0a0a0a 0%, #000 100%);
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Poppins', sans-serif;
color: #00fff2;
}
canvas {
position: fixed;
top: 0;
left: 0;
pointer-events: none;
}
/* Container utama */
.container {
background: rgba(0, 0, 0, 0.7);
padding: 40px 50px;
border-radius: 20px;
box-shadow: 0 0 40px #00eaff, inset 0 0 25px #00c8ff;
text-align: center;
backdrop-filter: blur(12px);
position: relative;
z-index: 2;
animation: fadeIn 2s ease-in-out;
}
/* Glow animasi bingkai */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(50px); }
to { opacity: 1; transform: translateY(0); }
}
/* Judul */
h1 {
font-size: 2em;
color: #00fff2;
text-shadow: 0 0 25px #00ffff, 0 0 45px #00aaff;
margin-bottom: 30px;
}
/* Input & textarea */
input[type="text"], input[type="email"], textarea {
width: 100%;
padding: 12px;
margin: 10px 0;
background: rgba(255,255,255,0.05);
border: 1px solid #00eaff;
border-radius: 10px;
color: #fff;
font-size: 1em;
outline: none;
transition: 0.3s;
}
input:focus, textarea:focus {
box-shadow: 0 0 15px #00ffff;
background: rgba(255,255,255,0.15);
}
/* Tombol kirim */
input[type="submit"] {
background: linear-gradient(90deg, #00fff2, #00aaff);
border: none;
padding: 12px 40px;
border-radius: 10px;
color: #000;
font-weight: bold;
font-size: 1em;
cursor: pointer;
transition: 0.4s;
text-shadow: 0 0 5px #00ffff;
}
input[type="submit"]:hover {
background: linear-gradient(90deg, #00aaff, #00fff2);
box-shadow: 0 0 30px #00ffff;
}
/* Bingkai foto glowing */
.foto {
width: 180px;
height: 270px;
border-radius: 20px;
margin: 0 auto 20px;
overflow: hidden;
box-shadow: 0 0 30px #00eaff, inset 0 0 15px #00aaff;
animation: glowFrame 3s infinite alternate;
}
.foto img {
width: 100%;
height: 100%;
object-fit: cover;
}
@keyframes glowFrame {
from { box-shadow: 0 0 25px #00ffff; }
to { box-shadow: 0 0 60px #00eaff, 0 0 100px #00aaff; }
}
/* Efek hujan */
.raindrop {
position: absolute;
width: 2px;
height: 15px;
background: rgba(0, 255, 255, 0.4);
animation: rain 0.8s linear infinite;
}
@keyframes rain {
0% { transform: translateY(-10px); opacity: 0; }
100% { transform: translateY(100vh); opacity: 1; }
}
</style>
</head>
<body>
<canvas id="rain"></canvas>
<div class="container">
<div class="foto">
<img src="rm.png" alt="Foto glow">
</div>
<h1>💬 Jangan Lupa Besyukur!</h1>
<form method="POST" action="">
<label>Nama</label><br>
<input type="text" name="nama" required><br>
<label>Email</label><br>
<input type="email" name="email" required><br>
<label>Pesan</label><br>
<textarea name="pesan" rows="5" required></textarea><br>
<input type="submit" value="Kirim">
</form>
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$nama = $_POST['nama'];
$email = $_POST['email'];
$pesan = $_POST['pesan'];
$koneksi = mysqli_connect("localhost", "root", "", "db_smk");
$perintah = "INSERT INTO tb_pesan VALUES('', '$nama', '$email', '$pesan')";
$query = mysqli_query($koneksi, $perintah);
if ($query) {
echo "<p style='color:#00fff2;margin-top:20px;'>✨ Pesan berhasil dikirim!</p>";
} else {
echo "<p style='color:red;margin-top:20px;'>❌ Gagal mengirim pesan!</p>";
}
}
?>
</div>
<script>
// Animasi hujan
const canvas = document.getElementById('rain');
const ctx = canvas.getContext('2d');
let width = window.innerWidth;
let height = window.innerHeight;
canvas.width = width;
canvas.height = height;
let drops = [];
for (let i = 0; i < 200; i++) {
drops.push({
x: Math.random() * width,
y: Math.random() * height,
length: Math.random() * 20 + 10,
speed: Math.random() * 4 + 4
});
}
function drawRain() {
ctx.clearRect(0, 0, width, height);
ctx.strokeStyle = 'rgba(0, 255, 255, 0.5)';
ctx.lineWidth = 1.5;
ctx.lineCap = 'round';
for (let i = 0; i < drops.length; i++) {
const d = drops[i];
ctx.beginPath();
ctx.moveTo(d.x, d.y);
ctx.lineTo(d.x, d.y + d.length);
ctx.stroke();
d.y += d.speed;
if (d.y > height) {
d.y = -20;
d.x = Math.random() * width;
}
}
requestAnimationFrame(drawRain);
}
drawRain();
</script>
</body>
</html>
2. Mysql
- show databases;
- use db_smk;
- MariaDB [db_smk]> create table tb_pesan(
- -> id_pesan int(11)not null,
- -> nama varchar(100)not null,
- -> email varchar(100)not null,
- -> pesan text,
- -> primary key(id_pesan));
- Query OK, 0 rows affected (0.013 sec)
- MariaDB [db_smk]> describe tb_pesan;
+----------+--------------+------+-----+---------+-------+
| Field | Type | Null | Key | Default | Extra |
+----------+--------------+------+-----+---------+-------+
| id_pesan | int(11) | NO | PRI | NULL | |
| nama | varchar(100) | NO | | NULL | |
| email | varchar(100) | NO | | NULL | |
| pesan | text | YES | | NULL | |
+----------+--------------+------+-----+---------+-------+
4 rows in set (0.017 sec)
- MariaDB [db_smk]> ALTER TABLE tb_pesan MODIFY column id_pesan INT AUTO_INCREMENT;
- MariaDB [db_smk]> select*from tb_pesan;
+----------+-------+-----------------+--------+
| id_pesan | nama | email | pesan |
+----------+-------+-----------------+--------+
| 1 | | | Hallo |
| 2 | | ahmad@gmail.com | HAllo |
| 3 | ahmad | ahmad@gmail.com | haii |
+----------+-------+-----------------+--------+
3 rows in set (0.000 sec)
OUTPUTNYA:
Comments
Post a Comment