Yang disebut formulir kompleks di sini mengacu pada formulir yang berisi beberapa tipe input berbeda, seperti kotak daftar drop-down, teks satu baris, teks multi-baris, nilai numerik, dll. Dalam situasi di mana formulir seperti itu sering kali perlu diganti, diperlukan program pembangkitan dinamis untuk formulir tersebut. Artikel ini memperkenalkan sistem seperti itu, yang menggunakan database untuk menyimpan data definisi formulir, dan menggunakan skrip ASP untuk secara dinamis menghasilkan kode HTML formulir dan skrip untuk memverifikasi input formulir.
1. Tentukan struktur tabel database.
Anda sering dapat melihat formulir seperti "Survei Mingguan" di Web. Jika ada program yang secara dinamis menghasilkan formulir dan skrip validasinya, beban kerja pembuatan formulir tersebut dapat sangat dikurangi.
Dalam contoh pembuatan dan validasi formulir dinamis dalam artikel ini, kami menggunakan database Access untuk menyimpan informasi definisi tentang formulir. Pada saat yang sama, untuk kesederhanaan, data yang dimasukkan oleh pengguna dalam formulir juga disimpan ke database yang sama . Mendefinisikan formulir memerlukan dua tabel: tabel pertama (Definiton) digunakan untuk menentukan kolom masukan formulir, dan tabel kedua (Daftar) menyimpan informasi tambahan tentang setiap kolom masukan, seperti item pilihan dari daftar pilihan.
Tabel Definisi berisi bidang-bidang berikut:
Nama Bidang - nama variabel yang ditetapkan ke bidang masukan formulir
Label - label teks, teks informatif ditampilkan di depan kolom input
Ketik - satu karakter, yang mewakili bentuk kolom masukan formulir dan jenis nilai masukan, sebagai berikut:
(t) Kotak masukan teks, yaitu < INPUT TYPE="TEXT" >.
(n) Kotak masukan teks, tetapi memerlukan nilai numerik.
(m) Konten catatan, digunakan untuk memasukkan komentar atau teks dalam jumlah besar lainnya, ini adalah kotak edit teks multi-baris.
(b) Membutuhkan masukan "ya" atau "tidak". Dalam implementasi ini, kotak centang akan digunakan untuk mendapatkan masukan ini, dengan label teks kotak centang tersebut adalah "Ya". Jika pengguna memilihnya, nilai yang dikembalikan adalah "aktif".
(r) Tombol radio.
(l) Kotak daftar tarik-turun.
Min - hanya berlaku untuk nilai input numerik, nilai minimum diberikan di sini. Dalam contoh ini terdapat kotak masukan numerik "Usia" dengan nilai minimum ditetapkan ke 1.
Maks – Nilai bidang ini relatif terhadap formulir bidang masukan. Untuk kotak masukan numerik, ini mewakili nilai maksimum yang diperbolehkan. Misalnya, nilai Maks "Usia" adalah 100. Untuk kotak input teks, Max mewakili jumlah karakter maksimum yang diperbolehkan. Untuk kotak edit teks multi-baris, Max mewakili jumlah baris teks di area yang terlihat.
Diperlukan - Menunjukkan apakah input diperlukan. Jika nilai jenis ini tidak dimasukkan, validator masukan akan melaporkan kesalahan. Dalam formulir, nilai-nilai yang harus dimasukkan ditandai dengan tanda bintang, dan pengguna diminta dalam bentuk catatan kaki bahwa nilai-nilai tersebut harus dimasukkan.
Contoh form pada artikel ini adalah kuesioner programmer ASP. Adapun definisi form pada tabel Definitons adalah sebagai berikut:
FieldName Label Type Min Max Wajib
Nama Name text (t) - 50 No
Age Age number (n) 1 100 No
Sex Jenis kelamin tunggal Tombol Pilih (r) - - Ya
Teks alamat email email (t) - - Ya
Kotak daftar drop-down bahasa pemrograman bahasa (l) - - Tidak
Daftar digunakan untuk menyimpan beberapa informasi tambahan yang ditentukan dalam kolom input. Dalam contoh ini, "Jenis Kelamin Digunakan untuk dua nilai masukan" dan "Bahasa". Tabel Daftar sangat sederhana dan hanya berisi tiga bidang berikut:
Nama Bidang - yang merupakan bidang masukan yang menjadi milik catatan saat ini
Nilai - nilai pilihan
Label - teks perintah pilihan yang dilihat pengguna
Bidang masukan "Jenis Kelamin" hanya dapat dimasukkan dari Dua nilai untuk dipilih: "Pria" atau "Wanita". "Bahasa" mencantumkan beberapa bahasa pemrograman yang dapat diterapkan pada lingkungan ASP, antara lain: VBScript, JavaScript, C, Perl, dan "Lainnya".
Tabel ketiga "Catatan" menyimpan konten yang dikirimkan oleh pengguna. Tabel ini juga berisi tiga bidang. Setiap catatan berhubungan dengan kiriman oleh pengguna:
Catatan - Jenis komentar, masukan pengguna disimpan dalam bentuk string kueri.
Dibuat – Tanggal dan waktu pengguna mengirimkan formulir. RemoteIP - Alamat IP pengirim formulir.
Dalam aplikasi sebenarnya, mungkin perlu mengumpulkan lebih banyak informasi tentang pengguna. Untuk mempermudah, contoh ini hanya mencatat dua informasi tambahan: waktu pengiriman dan alamat IP pengguna.
2. Persiapan
Setelah menyelesaikan definisi struktur dan bentuk data di atas, selanjutnya Anda dapat menulis skrip. Tugas skrip adalah membuat formulir dan memproses formulir yang dikirimkan pengguna.
Baik itu membuat atau memproses formulir, tiga proses (tugas) berikut ini penting: Yang pertama adalah menentukan tipe validasi. Saat membuat formulir, nilai tipe validasi diperoleh melalui string kueri, dan saat formulir diproses , bidang tersembunyi dari formulir diperoleh. Ada empat jenis metode verifikasi formulir yang didukung oleh program: tanpa verifikasi, verifikasi JavaScript sisi klien, verifikasi skrip ASP sisi server, dan verifikasi sisi klien dan sisi server (nama kode masing-masing 0 hingga 3). Jika tidak ada metode autentikasi valid yang ditentukan dalam string kueri, metode autentikasi keempat akan ditetapkan secara default. Metode pemrosesan verifikasi ini memungkinkan kami untuk secara fleksibel menerapkan sistem pembuatan dan pemrosesan formulir ini. Ketika klien melarang penggunaan verifikasi JavaScript, proses verifikasi hanya dapat dilakukan di sisi server. Berikut kode untuk menentukan jenis validasi:
Periksa Jenis Validasi
Berikut cuplikan kutipannya:
iValType = Permintaan.QueryString("val")
Jika IsNumeric(iValType) = Salah Maka iValType = 3
Jika iValType > 3 Atau iValType < 0 Maka iValType =3
Tugas kedua adalah membuka koneksi database dan membuat dua objek recordset: objek RS, yang merupakan objek recordset utama dalam program ini, digunakan untuk mengoperasikan tabel Definisi, terutama digunakan untuk membaca data dari tabel Daftar. Contoh program menyediakan dua metode koneksi database: menggunakan ODBC DSN atau tidak menggunakan ODBC DSN (saat menggunakan DSN, Anda perlu membuat DSN bernama Dinamis terlebih dahulu, dan kode untuk menggunakan DSN untuk menyambung ke database telah dikomentari).
Tugas ketiga adalah mengeluarkan beberapa kode HTML statis sebelum (dan sesudah) pembuatan (atau pemrosesan) skrip formulir, seperti <HEAD>< /HEAD>, dan melepaskan RS, RSList, dan objek lain yang ditempati saat sumber daya skrip berakhir .
Selain kode yang menyelesaikan tugas di atas, ada dua jenis halaman yang dapat dihasilkan oleh skrip ASP yang tersisa dalam contoh aplikasi: formulir pertanyaan (lihat gambar di atas) dan halaman hasil yang muncul setelah formulir diserahkan (yang terakhir juga bertanggung jawab untuk mencatat hasil yang dikirimkan oleh pengguna) . Cara paling sederhana untuk menentukan bagian mana dari skrip yang akan dijalankan adalah dengan memeriksa apakah formulir telah dikirimkan: jika sudah, proses formulir tersebut, jika tidak, buat formulir tersebut;
Apakah itu menghasilkan formulir atau memproses formulir?
Berikut cuplikan kutipannya:
Jika Len(Permintaan.Formulir) = 0 Maka
'Hasilkan formulir... sedikit...
Kalau tidak
'Proses formulir... sedikit...
End If
3. Menghasilkan formulir secara dinamis
Saat membuat formulir, program mendefinisikan catatan sesuai dengan setiap bidang masukan dalam tabel Definisi, dan menghasilkan kode HTML formulir dan kode JavaScript yang sesuai secara bergantian. Hal pertama yang harus dihasilkan dalam kode HTML adalah tag teks:
Berikut cuplikan kutipannya:
sHTML = sHTML & vbTab & "< TR >" & vbCrLf & vbTab & vbTab
sHTML = sHTML & "< TD VALIGN=" & Chr(34) & "TOP" & Chr(34)
sHTML = sHTML & " >" & vbCrLf & vbTab & vbTab & vbTab
sHTML = sHTML & "< B >" & RS.Fields("Label")
Program kemudian memeriksa apakah kolom masukan saat ini memerlukan masukan. Jika perlu, tambahkan tanda bintang setelah teks label (menunjukkan bahwa nilai harus dimasukkan), dan untuk nilai yang harus dimasukkan, kode JavaScript yang sesuai harus dibuat untuk memverifikasinya. Untuk tombol radio atau daftar pilihan, ada pemeriksaan lebih lanjut apakah pengguna benar-benar memilih opsi; untuk semua jenis masukan lainnya, cukup periksa apakah nilai masukan tidak kosong.
Mengikuti label teks adalah elemen masukan formulir, dan kode HTML untuk elemen ini dihasilkan berdasarkan tipe dan atribut yang ditentukan dalam tabel Definisi. Langkah selanjutnya adalah membuat kode JavaScript yang melakukan tugas verifikasi sisi klien berdasarkan persyaratan nilai input. Untuk contoh ini, hanya nilai numerik yang memerlukan pengecekan lebih lanjut untuk memastikan bahwa inputan pengguna memang berupa angka dan nilai numerik tersebut berada di antara nilai maksimum dan minimum yang diperbolehkan. Setelah membuat kode di atas, Anda dapat mengakhiri baris tabel (yaitu kolom input) dan melanjutkan memproses rekaman berikutnya dari tabel Definisi. Setelah semua record database sudah diproses, langkah selanjutnya adalah menambahkan kode HTML untuk tombol "Kirim" dan tombol "Hapus". Jika Anda melihatnya dari sudut lain, tugas program di sini adalah menghasilkan setiap kolom masukan berdasarkan catatan database. Setiap kolom masukan menempati satu baris tabel, dan setiap baris tabel memiliki dua sel: sel pertama digunakan untuk menampilkan label teks, dan yang kedua Unit menampilkan elemen input itu sendiri (lihat dForm.asp untuk kode).
Setelah proses di atas selesai, kode HTML formulir dan fungsi JavaScript validasi masing-masing disimpan dalam variabel sHTML dan sJavaScript. Sebelum menulis konten ini ke halaman, program memeriksa apakah klien memerlukan validasi JavaScript. Jika validasi tersebut tidak diperlukan, variabel sJavaScript akan dihapus:
Jika iValType = 0 Atau iValType = 2 Kemudian sJavaScript = ""
Setelah mengeluarkan tag BODY , program mengeluarkan fungsi JavaScript berikut:
Berikut ini adalah potongan kutipan:
< BAHASA SKRIP="JavaScript" >
< !--
fungsi memvalidasi(Formulir){
//Validasi formulir klien
< %=sJavaScript% >
kembali benar;
}
fungsi PeriksaRadio(objRadio){
//Apakah suatu nilai di tombol radio dipilih
for(var n = 0; n < objRadio.panjang; n++){
if(objRadio[n].dicentang){
kembali benar;
}
}
kembali salah;
}
fungsi Daftar Periksa(objList){
//Apakah suatu nilai telah dipilih dalam daftar pilihan
for(var n = 1; n < objList.panjang; n++){
if(objList.options[n].dipilih){
kembali benar;
}
}
kembali salah;
}
//-- >
</ /Skrip >
Jika klien tidak memerlukan validasi JavaScript, fungsi validasi akan dibiarkan dengan pernyataan "return true". Dua fungsi JavaScript statis terakhir (CheckRadio dan CheckList) pada kode di atas digunakan untuk memvalidasi tombol radio dan kotak daftar drop-down. Fungsi validasi akan memanggilnya ketika kedua kolom input ini perlu divalidasi.
Sekarang Anda dapat mulai menulis formulir ke halaman:
< FORM ACTION="./dform.asp" METHOD="POST" NAME="MyForm" onSubmit="return validasi(this)" >
Di sini, hanya jika fungsi validasi kembali true Baru kemudian lakukan operasi pengiriman formulir. Oleh karena itu, ketika fungsi verifikasi JavaScript sisi klien dimatikan, fungsi validasi akan secara otomatis mengembalikan nilai true.
Hal berikutnya yang ditambahkan adalah field tersembunyi bernama val. Seperti disebutkan sebelumnya, nilai ini menunjukkan mode validasi formulir.
< INPUT TYPE="HIDDEN" NAME="val" VALUE="< %=iValType% >" >
Saat pengguna mengirimkan formulir, skrip pemrosesan akan menggunakan nilai ini untuk menentukan apakah akan melakukan validasi sisi server.
Kemudian outputnya berupa tanda tabel dan judul tabel. Judul disimpan dalam variabel sTitleLabel, yang nilainya diinisialisasi ketika skrip mulai dijalankan:
Berikut cuplikan kutipannya:
< BATAS TABEL="0" >
<TR>
< TD COLSPAN="2" ALIGN="PUSAT" >
< H2 >< %=sTitleLable% >< /H2 >
< /TD >
< /TR >
Sebagai langkah perbaikan, bidang FormID dapat ditambahkan ke tabel Definisi, Daftar, dan Catatan. FormID secara unik mengidentifikasi suatu formulir, sehingga program dapat mendefinisikan beberapa formulir secara bersamaan dan menyimpan hasil respons pengguna dari beberapa formulir. Sedangkan untuk sTitleLabel di atas, kita bisa menggunakan tabel lain (seperti Forms) untuk menyimpannya.
Mengikuti tanda tabel dan judul tabel, program mengeluarkan formulir HTML dan kode untuk tombol "Kirim" dan "Hapus". Setelah itu, program memeriksa apakah string sHTML berisi "*". Jika ya, berarti ada konten yang harus dimasukkan ke dalam formulir. Saat ini, catatan kaki dikeluarkan untuk menjelaskan arti tanda bintang.
Berikut kutipannya:
< %=sHTML% >
<TR>
< TD COLSPAN="2" ALIGN="PUSAT" >
< INPUT TYPE="KIRIM" VALUE="Kirim formulir" > < INPUT TYPE="reset" VALUE="Hapus" >
< /TD >
<%
'Apakah ada kolom formulir yang memerlukan input, jika demikian, keluarkan catatan kaki formulir untuk menjelaskan arti '*'
Jika InStr(sHTML,"*") Lalu
%>
< /TR >
< TD COLSPAN="2" ALIGN="PUSAT" >
< FONT SIZE="2" >Catatan: Nilai yang ditandai dengan tanda bintang wajib diisi. < /FONT>
< /TD >
< /TR >
<%
Akhiri Jika
%>
< /TABEL >
</ /BENTUK >
Sejauh ini, tugas pembuatan formulir telah selesai.
4. Memproses Hasil Penyerahan
Tugas yang tersisa dari skrip ASP adalah pemrosesan formulir di sisi server, termasuk validasi, menyimpan hasil ke database, dan menampilkan halaman "Pengajuan Berhasil/Gagal". Variabel string sBadForm digunakan di bagian kode validasi formulir ini, dan program menggunakannya untuk menyimpan informasi kesalahan. Jika sBadForm kosong di akhir proses verifikasi, berarti formulir yang dikirimkan pengguna sah; jika tidak, penyerahan formulir ditolak dan sBadForm dikembalikan ke browser.
Terlepas dari mode validasi mana yang digunakan formulir Anda, sebaiknya periksa HTTP_REFERER. Pemeriksaan ini mencegah pencurian skrip. Untuk memeriksa apakah POST tertentu berasal dari halaman atau skrip situs web ini, cukup bandingkan dua variabel server:
Berikut cuplikan kutipannya:
Jika InStr(Request.ServerVariables("HTTP_REFERER"), _
Request.ServerVariables("HTTP_HOST")) = 0 Lalu
sBadForm = "<LI>Formulir dikirimkan dari lokasi yang salah." & vbCrlf
Akhiri Jika
Jika bidang tersembunyi formulir menunjukkan bahwa verifikasi sisi server harus dilakukan, program melintasi catatan database definisi formulir dan melakukan pemeriksaan terkait. Prosesnya sangat mirip dengan pembuatan formulir, kecuali kali ini program memverifikasi formulir dan menambahkan informasi nilai masukan ilegal ke Cukup buka sBadForm. Lihat dForm.asp untuk kode spesifik.
Program ini akhirnya memeriksa apakah sBadForm kosong. Jika tidak kosong, pengiriman formulir ditolak dan sBadForm ditulis ke browser. Jika sBadForm kosong, tambahkan catatan ke tabel Catatan untuk menyimpan data formulir. Bidang tersembunyi val perlu dihapus sebelum menyimpan konten formulir. Bidang tersembunyi ini selalu menjadi bidang masukan pertama formulir:
Berikut ini adalah potongan kutipan:
Jika Len(sBadForm) = 0 Maka
RS.Buka "Catatan", DB, 3, 2, &H0002
RS.TambahBaru
RS.Fields("Record") = Pertengahan(Request.Form, InStr(Request.Form, "&") + 1)
RS.Fields("Dibuat") = Sekarang()
RS.Fields("RemoteIP") = Permintaan.ServerVariables("REMOTE_ADDR")
RS.Perbarui
Respon.Write("< H1 >Terima kasih.< /H1 >")
RS.Tutup
Kalau tidak
Response.Write("< H1 >Pengiriman formulir gagal. < /H1 >")
Respon.Tulis(vbCrLf & sBadForm)
Akhiri Jika
Akhiri Jika
Itu saja untuk pemrosesan formulir sisi server. Bergantung pada apakah ada formulir yang dikirimkan, kita dapat merangkum kode pembuatan formulir sebelumnya dan kode pemrosesan formulir di sini dengan pernyataan If, sehingga kedua bagian skrip berbagi beberapa kode umum, seperti header dokumen HTML, pembuatan objek database dan pelepasan sumber daya.
Secara keseluruhan, dForm.asp hanya memiliki fungsi inti yang diperlukan untuk pembuatan dan verifikasi formulir dinamis, dan mengabaikan penanganan banyak masalah mendetail. Misalnya, masalah beberapa formulir yang disebutkan sebelumnya: menambahkan tabel untuk mengelola beberapa formulir memungkinkan skrip memiliki kemampuan untuk mengelola, menghasilkan, dan memproses formulir tertentu. Kelemahan mencolok lainnya adalah kemampuan untuk menambah, menghapus, dan memperbarui data yang ditentukan formulir, serta akses ke data hasil yang dikirimkan pengguna. Fungsi tersebut dapat diimplementasikan dalam program yang berdiri sendiri, dan dalam banyak kasus dapat dibuat menjadi a aplikasi tradisional. (Aplikasi tanpa struktur B/S). Terakhir, jenis kolom masukan yang didukung oleh dForm.asp juga terbatas. Dalam praktiknya, mungkin ada persyaratan masukan formulir lainnya, seperti kotak masukan alamat email khusus. Namun, untuk website yang sering memperbarui formulir, fungsi pembuatan formulir dinamis dan validasi dinamis yang dibahas dalam artikel ini memang sangat berguna.