5. Buat halaman pesan----kontrol validasi data dan tambahkan data
Pengenalan terkait:
Kebenaran data diperlukan untuk website. Untuk lebih mudah memverifikasi apakah data yang dimasukkan oleh pengguna benar, ASP.NET menyediakan kontrol validasi data kepada pemrogram. Kontrol validasi data yang disediakan oleh ASP.NET meliputi. (Catatan: Untuk menampilkan kode, semua kode berikut memiliki spasi setelah "<" dan sebelum ">". Kami mohon maaf atas ketidaknyamanan ini!):
Fungsi | kontrol |
RequiredFieldValidator | memeriksa apakah ada input data di kolom input. |
RangeValidator |
memeriksa | apakah data yang dimasukkan di kolom input berada dalam rentang tertentu |
Uji apakah kolom masukan sama dengan, tidak sama dengan, lebih besar dari, tidak kurang dari, atau kurang dari |
ValidationSummary | mencantumkan semua kontrol yang gagal dalam pengujian |
Validator Ekspresi Reguler | Periksa apakah kolom sesuai dengan aturan ekspresi reguler |
Aturan validasi kustom | CustomValidator |
LANGKAH 1 Desain halaman <BR>Pertama-tama kita menggunakan tabel untuk mendesain kerangka kasar. Karena tabel KOMENTAR dalam database berisi
[Gambar 5-1 Kerangka basis data]
COMMENT_ID (nomor otomatis), FIRST_NAME (teks), LAST_NAME (teks), TELEPON (teks), EMAIL (teks), SUBMIT_DATE (tanggal/waktu), COMMENTS (catatan), ANSWERED (nilai Boolean) dan kolom lainnya. Sesuai dengan kebutuhan, kami mendesain halaman seperti yang ditunjukkan di bawah ini pada situs yang diberi nama reg.aspx.
[Gambar 5-2 halaman awal]
Diantaranya, COMMENT_ID dapat ditambahkan secara otomatis oleh ACCESS, dan ANSWERED tidak perlu ditambahkan oleh pengguna. Nilai default SUBMIT_DATE diatur ke Now(), dan ACCESS akan secara otomatis menulis tanggal catatan yang ditambahkan.
Di halaman ASP sebelumnya, kita bisa lewat
untuk mengatur kotak input untuk memasukkan data. ASP.NET memiliki kontrol kotak teks untuk menerima data. Sintaksnya adalah sebagai berikut:
< asp:textbox id=”…” runat=”server” atribut lainnya/ >
Di DreamweaverMX Anda dapat mengklik
Tombol pintasan untuk menambahkan kontrol kotak teks. Di kotak dialog pop-up, atur ID, mode teks (tipe kotak dialog), tip alat (prompt saat mouse mengarahkan mouse ke kontrol), Tata Letak (desain gaya), dan Informasi Gaya (digunakan untuk mengatur input format teks dan format kotak teks) untuk mengatur kontrol. Gambar di bawah adalah kotak dialog pengaturan kotak teks.
[Gambar 5-3 kotak dialog pengaturan kotak teks 1]
[Gambar 5-4 kotak dialog pengaturan kotak teks 2]
[Gambar 5-5 kotak dialog pengaturan kotak teks 3]
Karena item data COMMENT memerlukan sejumlah besar teks untuk dimasukkan, kotak teks dengan beberapa baris input perlu digunakan. Cukup atur mode teks ke MultiLine dan masukkan jumlah baris (Rows) yang diinginkan.
Untuk menghasilkan acara yang ditambahkan, sebuah tombol juga diperlukan. Klik tab Formulir dan klik tombol "tombol" untuk menambahkan.
Penggunaan validasi data STEP2
Karena First_name, Last_name, telepon, dan email harus dimasukkan, untuk mencegah pengguna lupa memasukkan, Anda dapat menambahkan kontrol RequiredFieldValidator untuk memverifikasi kontrol. Karena kontrol akan menampilkan konten yang gagal verifikasi di lokasinya jika terjadi kesalahan validasi, kontrol validasi data harus ditempatkan di lokasi yang sesuai.
Sintaks kontrol untuk validasi data RequiredFieldValidator adalah sebagai berikut:
< asp:RequiredFieldValidato atribut lainnya runat="server" >Pesan kesalahan</ asp:RequiredFieldValidator >
atau
< asp:RequiredFieldValidator ErrorMessage="Pesan kesalahan" Atribut lainnya runat="server"/ >
Setelah mengklik Tag Lainnya, pilih Server Validasi Tag ASP.NET dan Anda dapat melihat bahwa ada berbagai jenis kontrol validasi data yang dapat dipilih. Kita perlu menambahkan kontrol validasi asp:RequiredFieldValidator di belakang kotak input First_name.
Di jendela pengaturan kontrol RequiredfieldValidator, Control to Validate adalah ID kontrol input yang terkait dengan kontrol validasi data ini, dan Pesan Kesalahan adalah pesan yang ditampilkan ketika validasi data gagal. Pada saat yang sama, kita dapat memilih gaya yang diperlukan dengan mengatur tata letak dan informasi gaya.
[Gambar 5-6 Pemilihan kontrol validasi]
[Gambar 5-7 Kotak dialog pengaturan kontrol RequiredfieldValidator]
Pada saat yang sama, tambahkan kontrol validasi data RequiredFieldValidato lainnya menggunakan metode yang sama di belakang kotak masukan Last_Name. Sekarang kita dapat menyimpan dan melihat pratinjau halaman tersebut. Jika tidak ada data yang dimasukkan pada kotak input Nama_Depan dan Nama_Belakang dan tombol Kirim diklik, pesan kegagalan verifikasi akan muncul. Seperti yang ditunjukkan pada Gambar 5-8.
Namun seringkali kita perlu memverifikasi data yang valid. Misalnya, kode pos harus 6 digit, dan alamat email yang dimasukkan harus dalam bentuk tertentu. Di sini Anda perlu menggunakan RegularExpressionValidator untuk memverifikasi validitas data. Di halaman pendaftaran ini, baik telepon maupun email dapat menggunakan kontrol ini untuk verifikasi.
[Gambar 5-8 Kotak dialog RequiredfieldValidator]
[Gambar 5-9 Properti pengaturan email]
Mirip dengan metode menambahkan kontrol validasi RequiredfieldValidator, klik "Tag lainnya.." untuk memilih menambahkan kontrol validasi data. Perbedaannya terletak pada pengaturan Validation Expression. Karena telepon perlu memasukkan 7-10 digit, maka perlu diatur sebagai berikut:
[0-9]{7,10}
Sintaksnya adalah sebagai berikut:
[]: Digunakan untuk mendefinisikan karakter yang dapat diterima. Misalnya, az berarti huruf kecil 'a'-'z' adalah karakter yang dapat diterima, a-zA-Z berarti semua huruf dapat diterima, dan 0-9 berarti semua huruf dapat diterima. nomor.
{}: digunakan untuk mendefinisikan jumlah karakter yang harus dimasukkan, {7,10} berarti 7-10 karakter dapat dimasukkan, {0,} berarti 0 karakter tidak terbatas dapat diterima.
'.': Menunjukkan memasukkan karakter apa pun. .{0,} berarti 0-tak terhingga jumlah karakter dapat diterima.
|: Menunjukkan OR (atau), misalnya [A-Za-z]{3}|[0-9]{3} berarti 3 huruf atau 3 angka bahasa Inggris dapat diterima
(): Untuk memudahkan pembacaan, string yang mengandung simbol |. biasanya diapit oleh (). Misalnya ([A-Za-z]{3}|[0-9]{3}).
: Jika berisi simbol khusus seperti [], {}, (), |, dll., harus ditambahkan sebelum string tersebut.
Berikut ini adalah beberapa contoh yang lebih umum digunakan:
Email: .{1,}@.{1,}/..{1}
Telepon (termasuk kode area): ([0-9]{3,4}))[0-9]{7,8}
Meskipun tidak ada jaminan bahwa input pengguna adalah data sebenarnya, kontrol validasi dapat memastikan bahwa formatnya benar.
[Gambar 5-10 Halaman pratinjau]
Sedangkan untuk kontrol CompareValidator, propertinya diatur sebagai berikut:
Kontrol untuk Membandingkan | mengatur kontrol yang dibandingkan dengan |
Kontrol untuk Memvalidasi | mengatur kontrol yang terkait dengannya |
Value to Compare | menyetel nilai yang dibandingkan |
Operator | menyetel hubungan perbandingan ( sama dengan, tidak sama dengan, lebih besar dari, lebih besar dari atau sama dengan, kurang dari, kurang dari atau sama dengan ) |
Tipe | Tipe data perbandingan |
Pesan Kesalahan | menampilkan informasi |
[Gambar 5-11 Kotak dialog pengaturan CompareValidator]
Metode pengaturan CustomValitor mirip dengan kontrol lainnya, tetapi fungsi tulisan tangan OnServerValidate (dalam Acara) diperlukan untuk memverifikasi data.
[Gambar 5-12Kotak dialog pengaturan CustomValitor]
Misalnya
< asp:CustomValidator id="CusValid" runat="server" ControlToValidate=Nama kontrol OnServerValidate="TheFunction" >Pesan kesalahan</ asp:CustomValidator >
<bahasa skrip=”vb” runat=”server” >
Fungsi Fungsi(pengirim sebagai objek,,nilai sebagai string) sebagai Boolean
........
kembali…
Fungsi akhir
</ /skrip >
Kontrol ini akan memanggil fungsi TheFuncion. Jika false dikembalikan, pesan kesalahan akan dilaporkan.
Kontrol RangeValidator
[Gambar 5-12 kotak dialog pengaturan RangeValidatorr]
Anda dapat mengatur rentang nilai melalui Nilai Mininum dan Nilai Maksimum. Pada saat yang sama, Anda dapat mengatur tipe perbandingan melalui Tipe, seperti "string", "Integer", dll. Pengaturan lainnya serupa dengan pengaturan untuk komponen lainnya.
Ada juga komponen: ValidationSummary. Diantaranya, HeaderText mengatur teks header, dan DisplayMode mengatur mode tampilan.
Arti | nilai atribut |
Daftar BulletList SingleParagraph | ErrorMessage ditampilkan dalam baris terpisah. ErrorMessage ditampilkan dalam baris terpisah . |
[Gambar 5-13 Kotak dialog pengaturan properti ValidationSummary]
Terlampir adalah kode sumber dari segmen program utama:
< lebar tabel="75%" height="594" border="1" cellpadding="1" Cellspacing="0" bordercolor="#999999" >
<tr>
< td width="22%" height="22" >Nama Depan< /td >
< td width="38%" >< asp:textbox BackColor="#CCCCCC" ForeColor="#0033FF" ID="first" runat="server" TextMode="SingleLine" ToolTip="Silakan masukkan nama depan" MaxLength ="40" BorderWidth="1" width="200"/ >< /td >
< td width="40%" >< asp:requiredfieldvalidator BackColor="#CCCCCC" ControlToValidate="first" ErrorMessage="RequiredField" ForeColor="#FF0000" ID="nama valid" runat="server" / > < /td >
< /tr >
<tr>
< td height="22" >Nama Belakang< /td >
< td >< asp:textbox BackColor="#CCCCCC" ForeColor="#0033FF" ID="Lastname" runat="server" TextMode="SingleLine" width="200" ToolTip="Silakan masukkan nama belakang" BorderWidth= "1"/>< /td >
< td >< asp:requiredfieldvalidator BackColor="#CCCCCC" ControlToValidate="Lastname" ErrorMessage="RequiredField" ForeColor="#FF0000" ID="vailLast" runat="server" / > </ /td >
< /tr >
<tr>
< td height="22" >Telepon< /td >
< td >< asp:textbox BackColor="#CCCCCC" BorderWidth="1" ForeColor="#0066FF" ID="telephone" runat="server" TextMode="SingleLine" ToolTip="Silakan masukkan nomor telepon Anda" width=" 200" / >< /td >
< td > < asp:regularexpressionvalidator BackColor="#CCCCCC" ControlToValidate="telephone" ErrorMessage="7-10 nomor diperlukan" ForeColor="#FF0000" ID="vailtel" runat="server" ValidationExpression="[0-9 ]{7,10}" / > < asp:requiredfieldvalidator BackColor="#CCCCCC" ControlToValidate="telephone" ErrorMessage="RequiredField" ForeColor="#FF0000" ID="vailtel2" runat="server" / >< /td >
< /tr >
<tr>
< td height="22" >Email< /td >
< td >< asp:textbox BackColor="#CCCCCC" BorderWidth="1" ForeColor="#0033FF" ID="email" runat="server" TextMode="SingleLine" ToolTip="Silakan masukkan lebar E-mail Anda" = "200"/ >< /td >
< td >< asp:regularexpressionvalidator BackColor="#CCCCCC" ControlToValidate="email" ErrorMessage="Batalkan alamat Email" ForeColor="#FF0000" ID="valiemail" runat="server" ValidationExpression=".{1,}@ .{3,}" / > < asp:requiredfieldvalidator BackColor="#CCCCCC" ControlToValidate="email" ErrorMessage="Bidang Wajib" ForeColor="#FF0000" ID="valiemail2" runat="server" / > < /td >
< /tr >
<tr>
< td height="22" colspan="3" >< div align="center" >Komentar< /div >< /td >
< /tr >
<tr>
< td height="188" colspan="3" >< div align="center" >
< asp:textbox BackColor="#CCCCCC" BorderWidth="1" ForeColor="#0033FF" ID="Comments" Rows="16" runat="server" TextMode="MultiLine" ToolTip="Silakan masukan Komentar" lebar = "400"/ >
< /div >
< div align="tengah" > < br >
< /div>< /td >
< /tr >
<tr>
< td height="71" colspan="3" >< div align="center" >
< asp:validationsummary BackColor="#CCCCCC" DisplayMode="BulletList" ForeColor="#FF0000" HeaderText="Konten salah mencakup:" ID="valSum" runat="server" ToolTip="Error" / >
< /div>< /td >
< /tr >
<tr>
< td height="22" colspan="3" >< input type="kirim" name="Kirim" value="Kirim" >
</ /td>
< /tr >
< /tabel >
Gayanya adalah sebagai berikut:
[Gambar 5-14 Pratinjau]
LANGKAH 3 Penambahan data
Adapun fungsi penambahan data relatif sederhana. Kita dapat mengatur fungsi penambahan data melalui wizard dan membiarkan DreamweaverMX menambahkan kode secara otomatis. Klik tab Server Behaviors di Application, lalu klik tombol + untuk memilih Insert Record (Gambar 5-15).
Di kotak dialog pop-up, Anda harus menentukan sumber data yang terhubung terlebih dahulu. Jika tidak ditemukan dalam daftar, Anda dapat mengklik tombol Define untuk mengatur sumber data (Gambar 5-16). Sisipkan ke dalam tabel digunakan untuk mengatur tabel yang datanya perlu ditambahkan. Di Kolom, kotak teks dapat dicocokkan dengan sumber data yang sesuai dan tipe data dapat diatur. Jika berhasil, Go To mengatur halaman yang akan dituju jika data berhasil ditambahkan. Pada Kegagalan, Ke dapat mengatur halaman untuk melompat jika penambahan data gagal. Pada saat yang sama, kita juga dapat memilih Tampilkan Informasi Debugging Pada Kegagalan untuk mengatur pesan kesalahan yang akan ditampilkan ketika penambahan data gagal.
[Gambar 5-15 Pilih Sisipkan Catatan]
[Gambar 5-16 Pengaturan penambahan data]
Mari kita lihat kode yang ditambahkan:
<MM: Masukkan
runat="server"
CommandText='< %# "MASUKKAN KE DALAM KOMENTAR (KOMENTAR, EMAIL, NAMA_PERTAMA, NAMA_TERAKHIR, TELEPON) NILAI (?, ?, ?, ?, ?)" % >'
ConnectionString='< %# Sistem.Konfigurasi.ConfigurationSettings.AppSettings("MM_CONNECTION_STRING_location") % >'
DatabaseType='< %# System.Configuration.ConfigurationSettings.AppSettings("MM_CONNECTION_DATABASETYPE_location") % >'
Ekspresi='< %# Permintaan.Form("MM_insert") = "form1" % >'
BuatDataSet="salah"
SuccessURL='< %# "index.htm" % >'
FailureURL='< %# "reg.aspx" % >'
Debug = "benar"
>
<Parameter>
< Nama Parameter="@COMMENTS" Nilai='< %# IIf((Request.Form("Komentar") < > Tidak Ada), Request.Form("Komentar"), "") % >' Type="WChar" />
< Nama Parameter="@EMAIL" Nilai='< %# IIf((Request.Form("email") < > Tidak Ada), Request.Form("email"), "") % >' Type="WChar" />
< Nama Parameter="@FIRST_NAME" Nilai='< %# IIf((Request.Form("first") < > Tidak Ada), Request.Form("first"), "") % >' Type="WChar" />
< Nama Parameter="@LAST_NAME" Nilai='< %# IIf((Request.Form("Lastname") < > Tidak Ada), Request.Form("Lastname"), "") % >' Type="WChar" />
< Nama Parameter="@TELEPON" Nilai='< %# IIf((Request.Form("telepon") < > Tidak ada), Request.Form("telepon"), "") % >' Type="WChar" />
< /Parameter >
< /MM:Sisipkan>
MM: Sisipkan adalah label yang digunakan oleh Dreamweaver untuk menambahkan database, dan Parameter adalah nilai yang digunakan untuk menentukan parameter.
Kode sebelumnya digunakan untuk menentukan link database dan halaman yang akan dituju setelah penambahan berhasil. Jika penambahan gagal, pesan kesalahan akan ditampilkan, serta tabel terkait.
Ini dikembangkan oleh MacroMedia sendiri dan memerlukan dukungan dari beberapa komponen Macromedia. Ini berbeda dari format kode standar banyak ASP.net di Internet saat ini. Harap jangan salah memahami format kode standar ASP.net berdasarkan kode ini ketika merujuk pada kode tersebut. Anda dapat merujuk ke www.gotdotnet.com untuk format kode standar. Jika Anda ingin menulis kode standar, Anda dapat menggunakan WebMatrix, alamat download: http://www.asp.net/webmatrix/download.aspx?tabindex=4
