Halo Semuanya, Kali ini Saya akan membagikan Tutorial Cara Membuat Formulir Kontak Dengan Menggunakan Cloudflare Workers dan Cloudflare D1. Kali ini kita akan menggunakan Cloudflare Workers sebagai Handler dan Cloudflare D1 untuk menyimpan Pesan yang Dikirim dari Formulir Kontak.
Cloudflare Workers adalah salah satu Produk dari Cloudflare yang dapat di gunakan untuk menjalankan Kode di Sisi Backend tanpa Server (Serverless), Sedangkan Cloudflare D1 adalah Salah satu Produk Database SQL yang masih menjadi Bagian dari Cloudflare Workers.
Sekarang ayo lanjut ke Tutorialnya.
Membuat Database D1 baru
Untuk menyimpan Data dari Formulir Kontak seperti Pesan, kita harus membuat Database D1. Untuk caranya, Lihat daftar dibawah.
1. Masuk ke Dashboard Cloudflare
2. Klik Tombol Dropdown pada bagian Menu Workers dan Klik D1.
3. Setelah masuk ke Halaman D1, klik Tombol Create
4. Untuk Nama Database, berikan Nama contact-form, dan Untuk bagian Location tidak perlu Dipilih.
5. Lalu klik Tombol Create.
6. Setelah Database dibuat, pergi ke Menu Console dan pada sebuah Kolom Input di bagian Slash commands, Masukkan Kode dibawah lalu klik Execute.
CREATE TABLE contacts (
id INTEGER PRIMARY KEY AUTOINCREMENT,
name TEXT NOT NULL,
email TEXT NOT NULL,
message TEXT NOT NULL,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
Setelah Kode di Eksekusi, maka Tabel baru akan Dibuat dengan Nama contacts. Untuk Tabel pada Databasenya akan seperti Dibawah.
| id | name | message | created_at | |
|---|---|---|---|---|
| ... | ... | ... | ... | ... |
Membuat Projek Cloudflare Turnstile baru
Untuk mencegah terjadinya Serangan yang dilakukan oleh Bot, Anda harus membuat Projek Cloudflare Turnstile (Sejenis CAPTCHA) baru yang akan Diimplementasikan ke Formulir Kontak. Untuk caranya, Lihat daftar dibawah.
1. Pada Bilah Menu disisi kiri, Klik menu Turnstile.
2. Setelah Anda masuk ke Halaman Turnstile, Klik Tombol Add widget.
3. Setelah itu, pada bagian Widget name Isi dengan Nama Widget yang Anda inginkan, pada Bagian Domain pilih Domain atau Masukkan Domain/Subdomain Situs Web Anda, pada bagian Widget Mode pilih Managed, dan pada Bagian Would you like to opt for pre-clearance for this site? pilih Opsi No, Lalu klik Tombol Create.
Setelah itu, Anda akan mendapatkan Site Key dan Secret Key yang Diperlukan nanti, Anda juga dapat menyimpannya di Catatan seperti Notepad agar lebih dapat Disalin nantinya.
Anda juga dapat menggunakan Layanan CAPTCHA lain seperti reCAPTCHA atau hCaptcha dengan melakukan sedikit Perubahan pada Kode di Cloudflare Workers dan Kode di Sisi Klien.
Membuat Projek Cloudflare Workers
Untuk Menyimpan Data seperti Pesan dari Formulir Kontak, Kita perlu membuat Projek Cloudflare Workers.
1. Pada Bilah Menu disisi kiri, Klik menu Workers & Pages.
2. Setelah Anda masuk ke Halaman Workers & Pages, Klik Tombol Create.
3. pada bagian Create an application, pilih Menu Workers lalu Klik Tombol Create Worker pada bagian Create a “Hello World” Worker and deploy across the globe.
4. Untuk Nama Worker, Berikan Nama sesuai keinginana Anda, misalnya contact-form lalu klik Tombol Deploy.
5. Setelah Worker terdeploy, Klik Tombol Contiune to project.
6. Pada bagian Menu Worker, Pilih Menu Settings lalu pilih Menu Variabels pada bagian Kiri.
7. Pada bagian Environment Variables klik Tombol Add variabel, untuk Variable name berikan Nama CAPTCHA_SECRET_KEY dengan Value berupa Secret Key Cloudflare Turnstile yang telah Dibuat sebelumnya, lalu Klik tombol Encrypt dan Klik Deploy.
8. Cari bagian D1 Database Bindings dan klik Tombol Add binding, untuk Variable name berikan Nama D1 dan untuk D1 Database pilih Database yang telah Dibuat sebelumnya.
9. Setelah itu, Klik Tombol Edit Code pada bagian atas halaman Worker.
10. Setelah itu, Masukkan Kode berikut.
export default {
async fetch(request, env, ctx) {
return handleRequest(request, env, ctx);
}
};
async function handleRequest(request, env, ctx) {
try {
const { name, email, message, 'cf-turnstile-response': token } = await request.json();
const CAPTCHA_SECRET = env.CAPTCHA_SECRET_KEY;
// Validasi Metode HTTP
if (request.method !== 'POST') {
return new Response('Method Not Allowed', { status: 405 });
}
// Validasi input
if (typeof name !== 'string' || name.length < 1 || name.length > 100) {
return new Response('Invalid name', { status: 400 });
}
if (!/^[\w\-._]+@[\w\-._]+\.[A-Za-z]{2,}$/.test(email)) {
return new Response('Invalid email', { status: 400 });
}
if (typeof message !== 'string' || message.length < 1 || message.length > 1000) {
return new Response('Invalid message', { status: 400 });
}
// Verifikasi CAPTCHA
const CaptchaResponse = await fetch('https://challenges.cloudflare.com/turnstile/v0/siteverify', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
body: `secret=${CAPTCHA_SECRET}&response=${token}`
});
const CaptchaData = await CaptchaResponse.json();
if (!CaptchaData.success) {
return new Response('Captcha verification failed', { status: 403 });
}
// Simpan ke Cloudflare D1
const db = env.D1;
await db.prepare(`INSERT INTO contacts (name, email, message) VALUES (?, ?, ?)`)
.bind(name, email, message)
.run();
return new Response('Message send successfully', { status: 200 });
} catch (error) {
return new Response('Failed to send message', { status: 500 });
}
}Lalu Anda dapat menyimpan Perubahan dengan mengeklik Tombol Deploy.
Menyiapkan Route
Jika Anda ingin menggunakan Route pada Worker Anda sehingga dapat Diakses melalui Domain Website Anda, Anda dapat mengikuti Cara berikut.
1. Pergi ke Menu Settings pada bagian atas Halaman Worker, Lalu pilih Menu Triggers pada bagian Samping Halaman Worker.
2. Pada bagian Routes klik Tombol Add route.
3. Pada bagian Route masukkan Route sesuai Keinginan Anda, misalnya www.domainsitusanda.com/contact/handler dan pada Bagian Zone pilih Domain Anda (Domain pada Zone harus sama dengan Domain pada Route).
4. Lalu klik Add route.
Menerapkannya Di Situs Web
Untuk membuat Formulir Kontak di Situs Web Anda, Gunakan Kode berikut.
<style>
/* Widget ContactForm | Hapus Kode CSS ini Jika Anda menggunakan Tema Plus UI */ .ContactForm{max-width:500px;font-size:14px} .cArea:not(:last-child){margin-bottom:25px} .cArea label{display:block;position:relative} .cArea label .n{display:block;position:absolute;left:0;right:0;top:0; color:rgba(8,16,43,.4);line-height:1.6em;padding:15px 16px 0;border-radius:4px 4px 0 0;transition:all .1s ease;} .cArea label .n.req::after{content:'*';font-size:85%} .cArea textarea{height:100px} .cArea textarea:focus, .cArea textarea[data-text=fl]{height:200px} .cArea input:focus ~ .n, .cArea textarea:focus ~ .n, .cArea input[data-text=fl] ~ .n, .cArea textarea[data-text=fl] ~ .n{padding-top:5px;color:rgba(8,16,43,.7);font-size:90%;background:#ececec} .cArea .h{display:block;font-size:90%;padding:5px 16px 0;opacity:.7;line-height:normal} .nArea .contact-form-error-message-with-border{color:#d32f2f} .nArea .contact-form-success-message-with-border{color:#2e7b32} .tNtf img.contact-form-cross{display:none} .ContactForm input[type=text], .ContactForm input[type=email], .ContactForm textarea{display:block;width:100%;outline:0;border:0;border-bottom:1px solid rgba(0,0,0,.25);border-radius:4px 4px 0 0;background:#f3f3f4; padding:25px 16px 8px 16px; line-height:1.6em; transition: all .1s ease;} .ContactForm input[type=text]:hover, .ContactForm input[type=email]:hover, .ContactForm textarea:hover{border-color:rgba(0,0,0,.42);background:#ececec} .ContactForm input[type=text]:focus, .ContactForm input[type=email]:focus, .ContactForm textarea:focus, .ContactForm input[data-text=fl], .ContactForm textarea[data-text=fl]{border-color:var(#482dff);background:#ececec} .ContactForm input[type=button], .ContactForm input[type=submit]{display:inline-flex;align-items:center; padding:12px 30px; outline:0;border:0;border-radius:4px; color:#fffdfc; background:var(#482dff); font-size:14px; white-space:nowrap;overflow:hidden;max-width:100%} .ContactForm input[type=button]:hover, .ContactForm input[type=submit]:hover{opacity:.7}
/* Button CSS | Hapus jika Tidak Diperlukan */
.cBtn.button{display:inline-flex;align-items:center;margin:10px 0;padding:12px 15px;outline:0;border:0;border-radius:5px;line-height:20px;color:#fffdfc;background:#ffa900;font-size:14px;font-family:Google Sans Text,Arial,Helvetica,sans-serif;white-space:nowrap;overflow:hidden;max-width:320px;cursor:pointer}.cBtn.button:hover{opacity:.9}
</style>
<form id='cForm'>
<div class='ContactForm'>
<div class='cArea'>
<label>
<input class='cInpt' name='Name' type='text' required='' />
<span class='n req'>Nama</span>
</label>
</div>
<div class='cArea'>
<label>
<input class='cInpt' name='Email' type='email' required='' />
<span class='n req'>Email</span>
</label>
<span class='h'>Diperlukan Email yang Valid</span>
</div>
<div class='cArea'>
<label>
<textarea style='resize:vertical' class='cInpt' name='Message' rows='3' required=''></textarea><span class='n req'>Pesan</span>
</label>
<span class='h'>Bidang ini Wajib Diisi</span>
</div>
<div class='cArea'>
<button class='cBtn button' type='submit'>Kirim</button>
</div>
<div class='cArea'>
<div class='cf-turnstile' data-sitekey='Site_Key_Cloudflare_Turnstile_kamu_Disini' data-theme='light'></div>
</div>
</div></form>
<script>var inputs = document.querySelectorAll('input[type=text], input[type=email], textarea'); for (var i = 0; i < inputs.length; i++) { var input = inputs[i]; input.addEventListener('input', function() {var bg = this.value ? 'fl' : 'nfl'; this.setAttribute('data-text',bg);}); }</script>
<script>
window.addEventListener("load", function() {
const form = document.getElementById('cForm');
form.addEventListener("submit", function(e) {
/* Nonaktifkan tombol Kirim untuk mencegah Pengiriman berulang kali */
document.querySelector('button[type=submit]').disabled = true;
e.preventDefault();
const data = new FormData(form);
fetch("URL_Cloudflare_Workers_Anda_Disini", {
method: 'POST',
body: JSON.stringify(Object.fromEntries(data)),
headers: {
'Content-Type': 'application/json'
}
})
.then((response) => {
if (response.ok) {
alert("Success!");
/* Aktifkan kembali Tombol Kirim */
document.querySelector('button[type=submit]').disabled = false;
} else {
alert("Gagal mengirim Pesan!");
document.querySelector('button[type=submit]').disabled = false;
}
})
});
});
</script>Ganti URL_Cloudflare_Workers_Anda_Disini menjadi URL Cloudflare Workers Anda.
Jangan lupa untuk Menaruh Kode Javascript berikut untuk Memuat Widget CAPTCHA Cloudflare Turnstile (Taruh di Bagian bawah Tag <head>).
<script async='' defer='' src='https://challenges.cloudflare.com/turnstile/v0/api.js'></script>
Anda dapat Menyesuaikan Kode HTML untuk Formulir Kontak atau Memasang Validasi pada Kode Javascriptnya sehingga Pengguna perlu Memverifikasi CAPTCHA dan Mengisi Kolom yang Diperlukan.
Setelah Pengguna mengirim Pesannya melalui Formulir Kontak, Anda dapat melihat Pesan tersebut melalui Database yang telah Dibuat.
Penutup
Jadi Ini Adalah Tutorial untuk Membuat Formulir Kontak Dengan Menggunakan Cloudflare Workers dan Cloudflare D1. Saya harap Postingan ini dapat membantu anda, Jika ada yang ingin ditanyakan maka tanyakan Di Kolom Komentar.