Penjelasan Script:
* HTML (index.html):
* Struktur dasar halaman web dengan judul, deskripsi, dan formulir donasi.
* Formulir memiliki input untuk jumlah donasi dan tombol submit.
* CSS (style.css):
* Styling dasar untuk mempercantik tampilan halaman. Anda bisa kembangkan lebih lanjut sesuai keinginan.
* JavaScript (script.js):
* Fungsi sederhana untuk menampilkan pesan konfirmasi setelah tombol donasi ditekan (simulasi).
* Penting: Script ini tidak menangani pemrosesan pembayaran yang sebenarnya. Anda perlu mengintegrasikan payment gateway (seperti Midtrans, Doku, Xendit, atau lainnya) untuk itu.
Cara Menggunakan:
* Buat tiga file baru di komputer Anda: index.html, style.css, dan script.js.
* Salin dan tempel kode HTML berikut ke dalam file index.html:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Situs Donasi Sederhana</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Mari Berdonasi untuk Tujuan Mulia</h1>
<p>Setiap donasi Anda sangat berarti.</p>
</header>
<section class="donation-form">
<h2>Salurkan Donasi Anda</h2>
<form id="donationForm">
<div class="form-group">
<label for="amount">Jumlah Donasi (IDR):</label>
<input type="number" id="amount" name="amount" min="10000" placeholder="Masukkan jumlah donasi" required>
</div>
<button type="submit" class="donate-button">Donasi Sekarang</button>
</form>
<div id="confirmation-message" class="hidden">
Terima kasih atas donasi Anda!
</div>
</section>
<footer>
<p>© 2025 Situs Donasi Sederhana</p>
</footer>
<script src="script.js"></script>
</body>
</html>
* Salin dan tempel kode CSS berikut ke dalam file style.css:
body {
font-family: sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
color: #333;
}
header {
background-color: #5cb85c;
color: white;
padding: 20px;
text-align: center;
}
.donation-form {
background-color: white;
padding: 30px;
margin: 20px auto;
max-width: 500px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.donation-form h2 {
text-align: center;
margin-bottom: 20px;
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
.form-group input[type="number"] {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
.donate-button {
background-color: #5cb85c;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
width: 100%;
}
.donate-button:hover {
background-color: #4cae4c;
}
footer {
text-align: center;
padding: 10px;
background-color: #333;
color: white;
position: fixed;
bottom: 0;
width: 100%;
}
.hidden {
display: none;
margin-top: 15px;
padding: 10px;
background-color: #dff0d8;
color: #3c763d;
border: 1px solid #d6e9c6;
border-radius: 4px;
text-align: center;
}
* Salin dan tempel kode JavaScript berikut ke dalam file script.js:
document.addEventListener('DOMContentLoaded', function() {
const donationForm = document.getElementById('donationForm');
const confirmationMessage = document.getElementById('confirmation-message');
donationForm.addEventListener('submit', function(event) {
event.preventDefault(); // Mencegah form submit biasa
// Di sini, Anda akan menambahkan logika untuk memproses pembayaran
// Ini hanya simulasi pesan konfirmasi
confirmationMessage.classList.remove('hidden');
donationForm.reset(); // Mengosongkan form setelah donasi (simulasi)
// Biasanya, Anda akan mengirim data donasi ke server dan berinteraksi dengan payment gateway di sini.
console.log('Donasi berhasil (simulasi)');
});
});
* Buka file index.html di browser Anda. Anda akan melihat tampilan dasar situs donasi.
Langkah Selanjutnya yang Penting:
* Integrasi Payment Gateway: Script di atas hanya menampilkan tampilan dan simulasi. Untuk menerima donasi secara nyata, Anda perlu mengintegrasikan layanan payment gateway. Setiap payment gateway memiliki dokumentasi dan cara implementasi yang berbeda (biasanya menggunakan API).
* Backend (Server-side): Anda memerlukan backend (menggunakan bahasa seperti Python, PHP, Node.js, dll.) untuk:
* Menerima data donasi dari frontend.
* Berkomunikasi dengan API payment gateway untuk memproses pembayaran.
* Menyimpan data donasi ke database.
* Mengirim email konfirmasi (opsional).
* Keamanan: Pastikan situs Anda aman, terutama dalam menangani informasi pembayaran. Gunakan HTTPS dan ikuti praktik keamanan web yang baik.
* Database: Anda memerlukan database untuk menyimpan informasi donasi dan mungkin informasi pengguna (jika diperlukan).
* Validasi: Tambahkan validasi yang lebih kuat di sisi frontend dan backend untuk memastikan data yang dimasukkan benar.
Script di atas adalah titik awal. Anda perlu mengembangkan dan mengintegrasikannya dengan sistem pembayaran yang sebenarnya untuk membuat situs donasi yang berfungsi penuh. Jika Anda tidak memiliki pengalaman dalam pengembangan web backend dan integrasi payment gateway, sebaiknya Anda mempertimbangkan untuk menggunakan platform donasi yang sudah ada atau bekerja sama dengan seorang web developer.
Semoga script dasar ini bermanfaat! Jika ada pertanyaan lebih lanjut, jangan ragu untuk bertanya.
Tidak ada komentar