Dreamweaver adalah aplikasi desktop yang memungkinkan Anda membuat dan menerbitkan halaman web dengan mudah. Dreamweaver mendukung HTML, CSS, JavaScript, dan banyak bahasa pemrograman web lainnya. Salah satu fitur Dreamweaver yang berguna adalah kemampuannya untuk membuat form web secara visual, tanpa harus menulis kode secara manual.
Form web adalah elemen yang memungkinkan pengunjung situs Anda untuk mengirimkan data, seperti nama, email, komentar, atau pesanan. Data yang dikirimkan dapat disimpan di database, dikirim ke email, atau diproses oleh skrip server. Untuk membuat form web dengan Dreamweaver, Anda perlu melakukan beberapa langkah berikut:
- Buat halaman web baru atau buka halaman web yang sudah ada di Dreamweaver.
- Tempatkan kursor di tempat Anda ingin menampilkan form di halaman web.
- Pilih menu Insert > Form > Form. Atau, pilih kategori Forms di panel Insert (segitiga kecil di bawah tab panel) dan klik ikon Form. Dreamweaver akan memasukkan form kosong. Di tampilan Design, garis putus-putus merah menunjukkan form. Jika Anda tidak melihat garis ini, pilih View > Visual Aids > Invisible Elements.
- Tentukan halaman atau skrip yang akan memproses data form. Di jendela Document, klik garis form untuk memilih form. Di panel Property (Window > Properties), masukkan nama file (dan jalur, jika perlu) dari halaman atau skrip yang akan memproses data form di kotak teks Action. Atau, klik ikon folder untuk menavigasi ke halaman atau skrip yang sesuai. Contoh: process_order.php.
- Tentukan metode yang akan digunakan untuk mengirimkan data form ke server. Di panel Property, pilih salah satu opsi berikut di menu pop-up Method: POST menyematkan data form di permintaan HTTP. Untuk informasi lebih lanjut, lihat HTML form parameters di Dreamweaver Help. GET menambahkan nilai ke URL yang meminta halaman. Untuk informasi lebih lanjut, lihat URL parameters di Dreamweaver Help. Default menggunakan pengaturan default browser untuk mengirimkan data form ke server. Defaultnya biasanya adalah metode GET.
- Masukkan objek form. Tempatkan kursor di tempat Anda ingin menampilkan objek form di dalam form. Kemudian pilih objek di menu Insert > Form, atau di kategori Forms di panel Insert. Tempatkan objek form di dalam garis putus-putus merah form di halaman. Untuk informasi lebih lanjut tentang objek form, lihat Form objects di Dreamweaver Help.
- Sesuaikan tata letak form. Gunakan jeda baris, jeda paragraf, teks yang sudah diformat, atau tabel untuk memformat form Anda. Anda tidak dapat memasukkan form di dalam form lain, tetapi Anda dapat menyertakan lebih dari satu form di halaman. Saat mendesain form, ingatlah untuk memberi label objek form dengan teks deskriptif untuk memberi tahu pengguna apa yang mereka tanggapi. Misalnya, “Ketik nama Anda” untuk meminta informasi nama.
Untuk artikel ini, saya akan memberikan contoh cara membuat form membership dengan Dreamweaver. Form membership adalah form yang digunakan untuk mendaftarkan pengguna baru ke situs web Anda. Form ini biasanya meminta informasi seperti nama, email, kata sandi, dan preferensi pengguna. Berikut adalah langkah-langkah untuk membuat form membership dengan Dreamweaver:
- Buat halaman web baru atau buka halaman web yang sudah ada di Dreamweaver. Saya akan menggunakan halaman web baru dengan nama register.html.
- Tempatkan kursor di tempat Anda ingin menampilkan form di halaman web. Saya akan menempatkannya di tengah halaman.
- Pilih menu Insert > Form > Form. Atau, pilih kategori Forms di panel Insert dan klik ikon Form. Dreamweaver akan memasukkan form kosong. Di tampilan Design, garis putus-putus merah menunjukkan form.
- Tentukan halaman atau skrip yang akan memproses data form. Di jendela Document, klik garis form untuk memilih form. Di panel Property, masukkan nama file (dan jalur, jika perlu) dari halaman atau skrip yang akan memproses data form di kotak teks Action. Saya akan menggunakan skrip PHP dengan nama register.php yang berada di folder yang sama dengan halaman web saya.
- Tentukan metode yang akan digunakan untuk mengirimkan data form ke server. Di panel Property, pilih opsi POST di menu pop-up Method. Metode POST lebih aman daripada metode GET karena data form tidak akan ditampilkan di URL.
- Masukkan objek form. Tempatkan kursor di tempat Anda ingin menampilkan objek form di dalam form. Kemudian pilih objek di menu Insert > Form, atau di kategori Forms di panel Insert. Tempatkan objek form di dalam garis putus-putus merah form di halaman. Untuk form membership, saya akan memasukkan objek form berikut:
- Text field: untuk meminta nama pengguna. Saya akan memberi label “Username” dan memberi nama “username” di panel Property.
- Text field: untuk meminta email pengguna. Saya akan memberi label “Email” dan memberi nama “email” di panel Property.
- Password field: untuk meminta kata sandi pengguna. Saya akan memberi label “Password” dan memberi nama “password” di panel Property.
- Password field: untuk meminta konfirmasi kata sandi pengguna. Saya akan memberi label “Confirm Password” dan memberi nama “confirm_password” di panel Property.
- Check box: untuk meminta persetujuan pengguna terhadap syarat dan ketentuan situs web. Saya akan memberi label “I agree to the terms and conditions” dan memberi nama “agree” di panel Property.
- Submit button: untuk mengirimkan data form ke server. Saya akan memberi label “Register” dan memberi nama “submit” di panel Property.
- Sesuaikan tata letak form. Saya akan menggunakan tabel untuk menyusun objek form dan labelnya secara rapi. Saya akan membuat tabel dengan dua kolom dan enam baris. Saya akan meletakkan label di kolom pertama dan objek form di kolom kedua. Saya juga akan menambahkan judul “Register” di atas form dan pesan “Already have an account? Login here.” di bawah form.
Berikut adalah kode HTML yang dihasilkan oleh Dreamweaver untuk form membership saya:
<h1>Register</h1>
<form action="register.php" method="post">
<table>
<tr>
<td>Username</td>
<td><input type="text" name="username" /></td>
</tr>
<tr>
<td>Email</td>
<td><input type="text" name="email" /></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="password" /></td>
</tr>
<tr>
<td>Confirm Password</td>
<td><input type="password" name="confirm_password" /></td>
</tr>
<tr>
<td></td>
<td><input type="checkbox" name="agree" /> I agree to the terms and conditions</td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="submit" value="Register" /></td>
</tr>
</table>
</form>
<p>Already have an account? <a href="login.html">Login here.</a></p>
Untuk melihat tampilan form di browser, Anda dapat menyimpan halaman web dan menekan tombol F12 di keyboard. Anda juga dapat melihat tampilan Live di Dreamweaver dengan mengklik tombol Live di pojok kanan atas jendela Document.
Berikut adalah tampilan form membership saya di browser:
!form membership
Untuk membuat form membership Anda lebih menarik, Anda dapat menambahkan gaya CSS, validasi JavaScript, atau efek dinamis lainnya. Anda juga perlu membuat skrip PHP yang akan memproses data form dan menyimpannya di database. Untuk tutorial lengkap tentang cara membuat form membership dengan PHP dan MySQL, Anda dapat mengikuti seri tutorial ini di Adobe Developer Center.
Demikianlah cara membuat form web dengan Dreamweaver. Semoga artikel ini bermanfaat dan dapat membantu Anda dalam mengerjakan form Membership website anda.
