Catatan
Akses ke halaman ini memerlukan otorisasi. Anda dapat mencoba masuk atau mengubah direktori.
Akses ke halaman ini memerlukan otorisasi. Anda dapat mencoba mengubah direktori.
oleh Tom FitzMacken
Artikel ini menjelaskan cara menggunakan alat Microsoft WebMatrix untuk membuat database di situs web ASP.NET Web Pages (Razor), dan cara membuat halaman yang memungkinkan Anda menampilkan, menambahkan, mengedit, dan menghapus data.
Yang akan Anda pelajari:
- Cara membuat database.
- Cara menyambungkan ke database.
- Cara menampilkan data di halaman web.
- Cara menyisipkan, memperbarui, dan menghapus rekaman database.
Ini adalah fitur yang diperkenalkan dalam artikel:
- Bekerja dengan database Microsoft SQL Server Compact Edition.
- Bekerja dengan kueri SQL.
- Kelas
Database
.Versi perangkat lunak yang digunakan dalam tutorial
- Halaman Web ASP.NET (Razor) 2
- WebMatrix 2
Tutorial ini juga berfungsi dengan WebMatrix 3. Anda dapat menggunakan ASP.NET Web Pages 3 dan Visual Studio 2013 (atau Visual Studio Express 2013 for Web); namun, antarmuka pengguna akan berbeda.
Pengantar Database
Bayangkan buku alamat khas. Untuk setiap entri dalam buku alamat (yaitu, untuk setiap orang) Anda memiliki beberapa informasi seperti nama depan, nama belakang, alamat, alamat email, dan nomor telepon.
Cara umum untuk menggambarkan data seperti ini adalah sebagai tabel dengan baris dan kolom. Dalam istilah database, setiap baris sering disebut sebagai rekaman. Setiap kolom (terkadang disebut sebagai bidang) berisi nilai untuk setiap jenis data: nama depan, nama belakang, dan sebagainya.
ID | NamaDepan | NamaBelakang | Alamat | Telepon | |
---|---|---|---|---|---|
1 | Jim | Abrus | 210 100th St SE Orcas WA 98031 | jim@contoso.com | 555 0100 |
2 | Terry | Adams | 1234 Main St. Seattle WA 99011 | terry@cohowinery.com | 555 0101 |
Untuk sebagian besar tabel database, tabel harus memiliki kolom yang berisi pengidentifikasi unik, seperti nomor pelanggan, nomor akun, dll. Ini dikenal sebagai kunci utama tabel, dan Anda menggunakannya untuk mengidentifikasi setiap baris dalam tabel. Dalam contoh, kolom ID adalah kunci utama untuk buku alamat.
Dengan pemahaman dasar database ini, Anda siap untuk mempelajari cara membuat database sederhana dan melakukan operasi seperti menambahkan, memodifikasi, dan menghapus data.
Tip
Database Relasional
Anda dapat menyimpan data dengan banyak cara, termasuk file teks dan spreadsheet. Namun, untuk sebagian besar penggunaan bisnis, data disimpan dalam database relasional.
Artikel ini tidak terlalu mendalami database. Namun, Anda mungkin merasa berguna untuk memahami sedikit tentang mereka. Dalam database relasional, informasi dibagi secara logis menjadi tabel terpisah. Misalnya, database untuk sekolah mungkin berisi tabel terpisah untuk siswa dan untuk penawaran kelas. Perangkat lunak database (seperti SQL Server) mendukung perintah canggih yang memungkinkan Anda membangun hubungan antara tabel secara dinamis. Misalnya, Anda dapat menggunakan database relasional untuk membangun hubungan logis antara siswa dan kelas untuk membuat jadwal. Menyimpan data dalam tabel terpisah mengurangi kompleksitas struktur tabel dan mengurangi kebutuhan untuk menyimpan data yang berlebihan dalam tabel.
Membuat Database
Prosedur ini memperlihatkan kepada Anda cara membuat database bernama SmallBakery dengan menggunakan alat desain SQL Server Compact Database yang disertakan dalam WebMatrix. Meskipun Anda dapat membuat database menggunakan kode, lebih umum untuk membuat database dan tabel database menggunakan alat desain seperti WebMatrix.
Mulai WebMatrix, dan pada halaman Mulai Cepat, klik Situs Dari Templat.
Pilih Situs Kosong, dan dalam kotak Nama Situs masukkan "SmallBakery" lalu klik OK. Situs dibuat dan ditampilkan di WebMatrix.
Di panel kiri, klik ruang kerja Database .
Di pita, klik Database Baru. Database kosong dibuat dengan nama yang sama dengan situs Anda.
Di panel kiri, perluas simpul SmallBakery.sdf lalu klik Tabel.
Di pita, klik Tabel Baru. WebMatrix membuka perancang tabel.
Klik di kolom Nama dan masukkan "Id".
Di kolom Jenis Data , pilih int.
Atur opsi Apakah Kunci Primer? dan Apakah Identifikasi? ke Ya.
Seperti namanya, Apakah Kunci Primer memberi tahu database bahwa ini akan menjadi kunci primer tabel. Apakah Identitas memberi tahu database untuk secara otomatis membuat nomor ID untuk setiap rekaman baru dan menetapkan nomor berurutan berikutnya (mulai dari 1).
Klik di baris berikutnya. Editor memulai definisi kolom baru.
Untuk nilai Nama, masukkan "Nama".
Untuk Jenis Data, pilih "nvarchar" dan atur panjangnya menjadi 50. Bagian var dari
nvarchar
memberi tahu database bahwa data untuk kolom ini akan menjadi string yang ukurannya mungkin bervariasi dari rekaman ke rekaman. (Awalan n mewakili nasional, menunjukkan bahwa bidang dapat menyimpan data karakter yang mewakili alfabet atau sistem penulisan apa pun — yaitu, bahwa bidang menyimpan data Unicode.)Atur opsi Izinkan Null keTidak. Ini akan memberlakukan bahwa kolom Nama tidak dibiarkan kosong.
Dengan menggunakan proses yang sama ini, buat kolom bernama Deskripsi. Atur Jenis Data ke "nvarchar" dan 50 untuk panjangnya, dan atur Izinkan Null ke false.
Buat kolom bernama Price. Atur Jenis Data ke "uang" dan atur Izinkan Null ke false.
Dalam kotak di bagian atas, beri nama tabel "Produk".
Setelah selesai, definisi akan terlihat seperti ini:
Tekan Ctrl+S untuk menyimpan tabel.
Menambahkan Data ke Database
Sekarang Anda bisa menambahkan beberapa data sampel ke database yang akan Anda kerjakan nanti di artikel.
Di panel kiri, perluas simpul SmallBakery.sdf lalu klik Tabel.
Klik kanan tabel Produk lalu klik Data.
Di panel edit, masukkan rekaman berikut ini:
Nama Deskripsi Harga Roti Dipanggang segar setiap hari. 2,99 Strawberry Shortcake Dibuat dengan stroberi organik dari kebun kami. 9.99 Pai Apel Kedua hanya untuk pai ibumu. 12.99 Pai Kemiri Jika Anda suka kemiri, ini untuk Anda. 10.99 Pai Lemon Dibuat dengan lemon terbaik di dunia. 11.99 Cupcakes Anak-anakmu dan anak-anakmu akan menyukai ini. 7,99 Ingatlah bahwa Anda tidak perlu memasukkan apa pun untuk kolom Id . Saat Anda membuat kolom Id , Anda mengatur properti Is Identity-nya ke true, yang menyebabkannya diisi secara otomatis.
Setelah selesai memasukkan data, perancang tabel akan terlihat seperti ini:
Tutup tab yang berisi data database.
Menampilkan Data dari Database
Setelah Anda mendapatkan database dengan data di dalamnya, Anda bisa menampilkan data di halaman web ASP.NET. Untuk memilih baris tabel yang akan ditampilkan, Anda menggunakan pernyataan SQL, yang merupakan perintah yang Anda berikan ke database.
Di panel kiri, klik ruang kerja File .
Di akar situs web, buat halaman CSHTML baru bernama ListProducts.cshtml.
Ganti markup yang sudah ada dengan yang berikut ini:
@{ var db = Database.Open("SmallBakery"); var selectQueryString = "SELECT * FROM Product ORDER BY Name"; } <!DOCTYPE html> <html> <head> <title>Small Bakery Products</title> <style> table, th, td { border: solid 1px #bbbbbb; border-collapse: collapse; padding: 2px; } </style> </head> <body> <h1>Small Bakery Products</h1> <table> <thead> <tr> <th>Id</th> <th>Product</th> <th>Description</th> <th>Price</th> </tr> </thead> <tbody> @foreach(var row in db.Query(selectQueryString)){ <tr> <td>@row.Id</td> <td>@row.Name</td> <td>@row.Description</td> <td>@row.Price</td> </tr> } </tbody> </table> </body> </html>
Di blok kode pertama, Anda membuka file SmallBakery.sdf (database) yang Anda buat sebelumnya. Metode ini
Database.Open
mengasumsikan bahwa file .sdf ada di folder App_Data situs web Anda. (Perhatikan bahwa Anda tidak perlu menentukan ekstensi .sdf — pada kenyataannya, jika Anda melakukannya,Open
metode tidak akan berfungsi.)Catatan
Folder App_Data adalah folder khusus di ASP.NET yang digunakan untuk menyimpan file data. Untuk informasi selengkapnya, lihat Menyambungkan ke Database nanti di artikel ini.
Anda kemudian membuat permintaan untuk mengkueri database menggunakan pernyataan SQL
Select
berikut:SELECT * FROM Product ORDER BY Name
Dalam pernyataan ,
Product
mengidentifikasi tabel untuk dikueri. Karakter*
menentukan bahwa kueri harus mengembalikan semua kolom dari tabel. (Anda juga dapat mencantumkan kolom satu per satu, dipisahkan dengan koma, jika Anda hanya ingin melihat beberapa kolom.) KlausaOrder By
menunjukkan bagaimana data harus diurutkan — dalam hal ini, menurut kolom Nama . Ini berarti bahwa data diurutkan menurut abjad berdasarkan nilai kolom Nama untuk setiap baris.Di isi halaman, markup membuat tabel HTML yang akan digunakan untuk menampilkan data.
<tbody>
Di dalam elemen , Anda menggunakan perulanganforeach
untuk mendapatkan setiap baris data secara individual yang dikembalikan oleh kueri. Untuk setiap baris data, Anda membuat baris tabel HTML (<tr>
elemen). Kemudian Anda membuat sel tabel HTML (<td>
elemen) untuk setiap kolom. Setiap kali Anda melalui perulangan, baris berikutnya yang tersedia dari database ada dalamrow
variabel (Anda mengatur ini dalamforeach
pernyataan). Untuk mendapatkan kolom individual dari baris, Anda bisa menggunakanrow.Name
ataurow.Description
atau apa pun nama kolom yang Anda inginkan.Jalankan halaman di browser. (Pastikan halaman dipilih di ruang kerja File sebelum Anda menjalankannya.) Halaman menampilkan daftar seperti berikut ini:
Tip
Bahasa Kueri Terstruktur (SQL)
SQL adalah bahasa yang digunakan dalam sebagian besar database relasional untuk mengelola data dalam database. Ini termasuk perintah yang memungkinkan Anda mengambil data dan memperbaruinya, dan yang memungkinkan Anda membuat, memodifikasi, dan mengelola tabel database. SQL berbeda dari bahasa pemrograman (seperti yang Anda gunakan di WebMatrix) karena dengan SQL, idenya adalah Anda memberi tahu database apa yang Anda inginkan, dan itu adalah tugas database untuk mencari tahu cara mendapatkan data atau melakukan tugas. Berikut adalah contoh beberapa perintah SQL dan apa yang mereka lakukan:
SELECT Id, Name, Price FROM Product WHERE Price > 10.00 ORDER BY Name
Ini mengambil kolom Id, Nama, dan Harga dari rekaman dalam tabel Produk jika nilai Harga lebih dari 10, dan mengembalikan hasil dalam urutan alfabet berdasarkan nilai kolom Nama . Perintah ini akan mengembalikan tataan hasil yang berisi rekaman yang memenuhi kriteria, atau set kosong jika tidak ada rekaman yang cocok.
INSERT INTO Product (Name, Description, Price) VALUES ("Croissant", "A flaky delight", 1.99)
Ini menyisipkan rekaman baru ke dalam tabel Produk , mengatur kolom Nama ke "Croissant", kolom Deskripsi ke "Kelemahan", dan harga ke 1,99.
DELETE FROM Product WHERE ExpirationDate < "01/01/2008"
Perintah ini menghapus rekaman dalam tabel Produk yang kolom tanggal kedaluwarsanya lebih awal dari 1 Januari 2008. (Ini mengasumsikan bahwa tabel Produk memiliki kolom seperti itu, tentu saja.) Tanggal dimasukkan di sini dalam format MM/DD/YYYY, tetapi harus dimasukkan dalam format yang digunakan untuk lokal Anda.
Perintah Insert Into
dan Delete
tidak mengembalikan tataan hasil. Sebaliknya, mereka mengembalikan angka yang memberi tahu Anda berapa banyak rekaman yang terpengaruh oleh perintah.
Untuk beberapa operasi ini (seperti menyisipkan dan menghapus rekaman), proses yang meminta operasi harus memiliki izin yang sesuai dalam database. Inilah sebabnya mengapa untuk database produksi Anda sering harus menyediakan nama pengguna dan kata sandi saat Anda tersambung ke database.
Ada puluhan perintah SQL, tetapi semuanya mengikuti pola seperti ini. Anda bisa menggunakan perintah SQL untuk membuat tabel database, menghitung jumlah rekaman dalam tabel, menghitung harga, dan melakukan lebih banyak operasi.
Menyisipkan Data dalam Database
Bagian ini memperlihatkan cara membuat halaman yang memungkinkan pengguna menambahkan produk baru ke tabel Database produk. Setelah rekaman produk baru disisipkan, halaman menampilkan tabel yang diperbarui menggunakan halaman ListProducts.cshtml yang Anda buat di bagian sebelumnya.
Halaman ini menyertakan validasi untuk memastikan bahwa data yang dimasukkan pengguna valid untuk database. Misalnya, kode di halaman memastikan bahwa nilai telah dimasukkan untuk semua kolom yang diperlukan.
Di situs web, buat file CSHTML baru bernama InsertProducts.cshtml.
Ganti markup yang sudah ada dengan yang berikut ini:
@{ Validation.RequireField("Name", "Product name is required."); Validation.RequireField("Description", "Product description is required."); Validation.RequireField("Price", "Product price is required."); var db = Database.Open("SmallBakery"); var Name = Request.Form["Name"]; var Description = Request.Form["Description"]; var Price = Request.Form["Price"]; if (IsPost && Validation.IsValid()) { // Define the insert query. The values to assign to the // columns in the Product table are defined as parameters // with the VALUES keyword. if(ModelState.IsValid) { var insertQuery = "INSERT INTO Product (Name, Description, Price) " + "VALUES (@0, @1, @2)"; db.Execute(insertQuery, Name, Description, Price); // Display the page that lists products. Response.Redirect("~/ListProducts"); } } } <!DOCTYPE html> <html> <head> <title>Add Products</title> <style type="text/css"> label {float:left; width: 8em; text-align: right; margin-right: 0.5em;} fieldset {padding: 1em; border: 1px solid; width: 50em;} legend {padding: 2px 4px; border: 1px solid; font-weight:bold;} .validation-summary-errors {font-weight:bold; color:red; font-size: 11pt;} </style> </head> <body> <h1>Add New Product</h1> @Html.ValidationSummary("Errors with your submission:") <form method="post" action=""> <fieldset> <legend>Add Product</legend> <div> <label>Name:</label> <input name="Name" type="text" size="50" value="@Name" /> </div> <div> <label>Description:</label> <input name="Description" type="text" size="50" value="@Description" /> </div> <div> <label>Price:</label> <input name="Price" type="text" size="50" value="@Price" /> </div> <div> <label> </label> <input type="submit" value="Insert" class="submit" /> </div> </fieldset> </form> </body> </html>
Isi halaman berisi formulir HTML dengan tiga kotak teks yang memungkinkan pengguna memasukkan nama, deskripsi, dan harga. Saat pengguna mengklik tombol Sisipkan , kode di bagian atas halaman membuka koneksi ke database SmallBakery.sdf . Anda kemudian mendapatkan nilai yang telah dikirimkan pengguna dengan menggunakan objek dan menetapkan nilai tersebut
Request
ke variabel lokal.Untuk memvalidasi bahwa pengguna memasukkan nilai untuk setiap kolom yang diperlukan, Anda mendaftarkan setiap
<input>
elemen yang ingin Anda validasi:Validation.RequireField("Name", "Product name is required."); Validation.RequireField("Description", "Product description is required."); Validation.RequireField("Price", "Product price is required.");
Pembantu
Validation
memeriksa bahwa ada nilai di setiap bidang yang telah Anda daftarkan. Anda dapat menguji apakah semua bidang melewati validasi dengan memeriksaValidation.IsValid()
, yang biasanya Anda lakukan sebelum memproses informasi yang Anda dapatkan dari pengguna:if (IsPost && Validation.IsValid()) { // Process information here }
(Operator
&&
berarti AND — pengujian ini adalah Jika ini adalah pengiriman formulir DAN semua bidang telah lulus validasi.)Jika semua kolom divalidasi (tidak ada yang kosong), Lanjutkan dan buat pernyataan SQL untuk menyisipkan data lalu jalankan seperti yang ditunjukkan berikutnya:
var insertQuery = "INSERT INTO Product (Name, Description, Price) VALUES (@0, @1, @2)";
Agar nilai disisipkan, Anda menyertakan tempat penampung parameter (
@0
, ,@1
@2
).Catatan
Sebagai tindakan pencegahan keamanan, selalu teruskan nilai ke pernyataan SQL menggunakan parameter, seperti yang Anda lihat dalam contoh sebelumnya. Ini memberi Anda kesempatan untuk memvalidasi data pengguna, ditambah membantu melindungi dari upaya untuk mengirim perintah berbahaya ke database Anda (kadang-kadang disebut sebagai serangan injeksi SQL).
Untuk menjalankan kueri, Anda menggunakan pernyataan ini, meneruskan ke variabel yang berisi nilai untuk mengganti tempat penampung:
db.Execute(insertQuery, Name, Description, Price);
Insert Into
Setelah pernyataan dijalankan, Anda mengirim pengguna ke halaman yang mencantumkan produk menggunakan baris ini:Response.Redirect("~/ListProducts");
Jika validasi tidak berhasil, Anda melewati sisipan. Sebagai gantinya, Anda memiliki pembantu di halaman yang dapat menampilkan akumulasi pesan kesalahan (jika ada):
@Html.ValidationSummary("Errors with your submission:")
Perhatikan bahwa blok gaya dalam markup menyertakan definisi kelas CSS bernama
.validation-summary-errors
. Ini adalah nama kelas CSS yang digunakan secara default untuk<div>
elemen yang berisi kesalahan validasi apa pun. Dalam hal ini, kelas CSS menentukan bahwa kesalahan ringkasan validasi ditampilkan dalam warna merah dan tebal, tetapi Anda dapat menentukan.validation-summary-errors
kelas untuk menampilkan pemformatan apa pun yang Anda suka.
Menguji Halaman Sisipkan
Menampilkan halaman di browser. Halaman menampilkan formulir yang mirip dengan formulir yang diperlihatkan dalam ilustrasi berikut.
Masukkan nilai untuk semua kolom, tetapi pastikan Anda membiarkan kolom Harga kosong.
Klik Sisipkan. Halaman menampilkan pesan kesalahan, seperti yang diperlihatkan dalam ilustrasi berikut. (Tidak ada rekaman baru yang dibuat.)
Isi formulir sepenuhnya, lalu klik Sisipkan. Kali ini, halaman ListProducts.cshtml ditampilkan dan memperlihatkan rekaman baru.
Memperbarui Data dalam Database
Setelah data dimasukkan ke dalam tabel, Anda mungkin perlu memperbaruinya. Prosedur ini memperlihatkan kepada Anda cara membuat dua halaman yang mirip dengan yang Anda buat untuk penyisipan data sebelumnya. Halaman pertama menampilkan produk dan memungkinkan pengguna memilih satu untuk diubah. Halaman kedua memungkinkan pengguna benar-benar melakukan pengeditan dan menyimpannya.
Catatan
Penting Di situs web produksi, Anda biasanya membatasi siapa yang diizinkan untuk membuat perubahan pada data. Untuk informasi tentang cara menyiapkan keanggotaan dan tentang cara mengotorisasi pengguna untuk melakukan tugas di situs, lihat Menambahkan Keamanan dan Keanggotaan ke Situs Halaman Web ASP.NET.
Di situs web, buat file CSHTML baru bernama EditProducts.cshtml.
Ganti markup yang ada dalam file dengan yang berikut ini:
@{ var db = Database.Open("SmallBakery"); var selectQueryString = "SELECT * FROM Product ORDER BY Name"; } <!DOCTYPE html> <html> <head> <title>Edit Products</title> <style type="text/css"> table, th, td { border: solid 1px #bbbbbb; border-collapse: collapse; padding: 2px; } </style> </head> <body> <h1>Edit Small Bakery Products</h1> <table> <thead> <tr> <th> </th> <th>Name</th> <th>Description</th> <th>Price</th> </tr> </thead> <tbody> @foreach (var row in db.Query(selectQueryString)) { <tr> <td><a href="@Href("~/UpdateProducts", row.Id)">Edit</a></td> <td>@row.Name</td> <td>@row.Description</td> <td>@row.Price</td> </tr> } </tbody> </table> </body> </html>
Satu-satunya perbedaan antara halaman ini dan halaman ListProducts.cshtml dari sebelumnya adalah bahwa tabel HTML di halaman ini menyertakan kolom tambahan yang menampilkan tautan Edit . Saat Anda mengklik tautan ini, tautan ini akan membawa Anda ke halaman UpdateProducts.cshtml (yang akan Anda buat berikutnya) tempat Anda dapat mengedit rekaman yang dipilih.
Lihat kode yang membuat tautan Edit :
<a href="@Href("~/UpdateProducts", row.Id)">Edit</a></td>
Ini membuat elemen HTML
<a>
yang atributnyahref
diatur secara dinamis. Atributhref
menentukan halaman yang akan ditampilkan saat pengguna mengklik tautan. Ini juga meneruskanId
nilai baris saat ini ke tautan. Saat halaman berjalan, sumber halaman mungkin berisi tautan seperti ini:<a href="UpdateProducts/1">Edit</a></td> <a href="UpdateProducts/2">Edit</a></td> <a href="UpdateProducts/3">Edit</a></td>
Perhatikan bahwa
href
atribut diatur keUpdateProducts/n
, di mana n adalah nomor produk. Saat pengguna mengklik salah satu tautan ini, URL yang dihasilkan akan terlihat seperti ini:http://localhost:18816/UpdateProducts/6
Dengan kata lain, nomor produk yang akan diedit akan diteruskan di URL.
Menampilkan halaman di browser. Halaman menampilkan data dalam format seperti ini:
Selanjutnya, Anda akan membuat halaman yang memungkinkan pengguna benar-benar memperbarui data. Halaman pembaruan menyertakan validasi untuk memvalidasi data yang dimasukkan pengguna. Misalnya, kode di halaman memastikan bahwa nilai telah dimasukkan untuk semua kolom yang diperlukan.
Di situs web, buat file CSHTML baru bernama UpdateProducts.cshtml.
Ganti markup yang ada dalam file dengan yang berikut ini.
@{ Validation.RequireField("Name", "Product name is required."); Validation.RequireField("Description", "Product description is required."); Validation.RequireField("Price", "Product price is required."); var Name = ""; var Description = ""; var Price = Decimal.Zero; var ProductId = UrlData[0]; if (ProductId.IsEmpty()) { Response.Redirect("~/EditProducts"); } var db = Database.Open("SmallBakery"); if (IsPost && Validation.IsValid()) { var updateQueryString = "UPDATE Product SET Name=@0, Description=@1, Price=@2 WHERE Id=@3" ; Name = Request["Name"]; Description = Request["Description"]; Price = Request["Price"].AsDecimal(); db.Execute(updateQueryString, Name, Description, Price, ProductId); Response.Redirect(@Href("~/EditProducts")); } else { var selectQueryString = "SELECT * FROM Product WHERE Id=@0"; var row = db.QuerySingle(selectQueryString, ProductId); Name = row.Name; Description = row.Description; Price = row.Price; } } <!DOCTYPE html> <html> <head> <title>Add Products</title> <style type="text/css"> label { float: left; width: 8em; text-align: right; margin-right: 0.5em;} fieldset { padding: 1em; border: 1px solid; width: 35em;} legend { padding: 2px 4px; border: 1px solid; font-weight: bold;} .validation-summary-errors {font-weight:bold; color:red; font-size:11pt;} </style> </head> <body> <h1>Update Product</h1> @Html.ValidationSummary("Errors with your submission:") <form method="post" action=""> <fieldset> <legend>Update Product</legend> <div> <label>Name:</label> <input name="Name" type="text" size="50" value="@Name" /> </div> <div> <label>Description:</label> <input name="Description" type="text" size="50" value="@Description" /> </div> <div> <label>Price:</label> <input name="Price" type="text" size="50" value="@Price" /> </div> <div> <label> </label> <input type="submit" value="Update" class="submit" /> </div> </fieldset> </form> </body> </html>
Isi halaman berisi formulir HTML tempat produk ditampilkan dan tempat pengguna dapat mengeditnya. Untuk mendapatkan produk yang akan ditampilkan, Anda menggunakan pernyataan SQL ini:
SELECT * FROM Product WHERE Id=@0
Ini akan memilih produk yang ID-nya cocok dengan nilai yang diteruskan dalam
@0
parameter . (Karena Id adalah kunci utama dan oleh karena itu harus unik, hanya satu catatan produk yang dapat dipilih dengan cara ini.) Untuk mendapatkan nilai ID untuk diteruskan ke pernyataan iniSelect
, Anda dapat membaca nilai yang diteruskan ke halaman sebagai bagian dari URL, menggunakan sintaks berikut:var ProductId = UrlData[0];
Untuk benar-benar mengambil catatan produk, Anda menggunakan
QuerySingle
metode , yang hanya akan mengembalikan satu rekaman:var row = db.QuerySingle(selectQueryString, ProductId);
Baris tunggal dikembalikan ke
row
dalam variabel . Anda bisa mengeluarkan data dari setiap kolom dan menetapkannya ke variabel lokal seperti ini:var Name = row.Name; var Description = row.Description; var Price = row.Price;
Dalam markup untuk formulir, nilai-nilai ini ditampilkan secara otomatis dalam kotak teks individual dengan menggunakan kode yang disematkan seperti berikut ini:
<input name="Name" type="text" size="50" value="@Name" />
Bagian kode tersebut menampilkan catatan produk yang akan diperbarui. Setelah rekaman ditampilkan, pengguna dapat mengedit kolom individual.
Saat pengguna mengirimkan formulir dengan mengklik tombol Perbarui , kode di
if(IsPost)
blok berjalan. Ini mendapatkan nilai pengguna dariRequest
objek, menyimpan nilai dalam variabel, dan memvalidasi bahwa setiap kolom telah diisi. Jika validasi lolos, kode akan membuat pernyataan Pembaruan SQL berikut:UPDATE Product SET Name=@0, Description=@1, Price=@2, WHERE ID=@3
Dalam pernyataan SQL
Update
, Anda menentukan setiap kolom untuk diperbarui dan nilai untuk mengaturnya. Dalam kode ini, nilai ditentukan menggunakan tempat penampung@0
parameter , ,@1
,@2
dan sebagainya. (Seperti disebutkan sebelumnya, untuk keamanan, Anda harus selalu meneruskan nilai ke pernyataan SQL dengan menggunakan parameter.)Saat Anda memanggil
db.Execute
metode , Anda meneruskan variabel yang berisi nilai dalam urutan yang sesuai dengan parameter dalam pernyataan SQL:db.Execute(updateQueryString, Name, Description, Price, ProductId);
Update
Setelah pernyataan dijalankan, Anda memanggil metode berikut untuk mengalihkan pengguna kembali ke halaman edit:Response.Redirect(@Href("~/EditProducts"));
Efeknya adalah pengguna melihat daftar data yang diperbarui dalam database dan dapat mengedit produk lain.
Simpan halaman.
Jalankan halaman EditProducts.cshtml (bukan halaman pembaruan) lalu klik Edit untuk memilih produk yang akan diedit. Halaman UpdateProducts.cshtml ditampilkan, memperlihatkan rekaman yang Anda pilih.
Buat perubahan dan klik Perbarui. Daftar produk ditampilkan lagi dengan data Anda yang diperbarui.
Menghapus Data dalam Database
Bagian ini memperlihatkan cara mengizinkan pengguna menghapus produk dari tabel Database produk . Contohnya terdiri dari dua halaman. Di halaman pertama, pengguna memilih rekaman yang akan dihapus. Rekaman yang akan dihapus kemudian ditampilkan di halaman kedua yang memungkinkan mereka mengonfirmasi bahwa mereka ingin menghapus rekaman.
Catatan
Penting Di situs web produksi, Anda biasanya membatasi siapa yang diizinkan untuk membuat perubahan pada data. Untuk informasi tentang cara menyiapkan keanggotaan dan tentang cara mengotorisasi pengguna untuk melakukan tugas di situs, lihat Menambahkan Keamanan dan Keanggotaan ke Situs Halaman Web ASP.NET.
Di situs web, buat file CSHTML baru bernama ListProductsForDelete.cshtml.
Ganti markup yang sudah ada dengan yang berikut ini:
@{ var db = Database.Open("SmallBakery"); var selectQueryString = "SELECT * FROM Product ORDER BY Name"; } <!DOCTYPE html> <html> <head> <title>Delete a Product</title> <style> table, th, td { border: solid 1px #bbbbbb; border-collapse: collapse; padding: 2px; } </style> </head> <body> <h1>Delete a Product</h1> <form method="post" action="" name="form"> <table border="1"> <thead> <tr> <th> </th> <th>Name</th> <th>Description</th> <th>Price</th> </tr> </thead> <tbody> @foreach (var row in db.Query(selectQueryString)) { <tr> <td><a href="@Href("~/DeleteProduct", row.Id)">Delete</a></td> <td>@row.Name</td> <td>@row.Description</td> <td>@row.Price</td> </tr> } </tbody> </table> </form> </body> </html>
Halaman ini mirip dengan halaman EditProducts.cshtml dari sebelumnya. Namun, alih-alih menampilkan tautan Edit untuk setiap produk, tautan Hapus akan ditampilkan. Tautan Hapus dibuat menggunakan kode tersemat berikut dalam markup:
<a href="@Href("~/DeleteProduct", row.Id)">Delete</a>
Ini membuat URL yang terlihat seperti ini saat pengguna mengklik tautan:
http://<server>/DeleteProduct/4
URL memanggil halaman bernama DeleteProduct.cshtml (yang akan Anda buat berikutnya) dan meneruskannya ID produk untuk dihapus (di sini, 4).
Simpan file, tetapi biarkan terbuka.
Buat file CHTML lain bernama DeleteProduct.cshtml. Ganti konten yang sudah ada dengan yang berikut ini:
@{ var db = Database.Open("SmallBakery"); var ProductId = UrlData[0]; if (ProductId.IsEmpty()) { Response.Redirect("~/ListProductsForDelete"); } var prod = db.QuerySingle("SELECT * FROM PRODUCT WHERE ID = @0", ProductId); if( IsPost && !ProductId.IsEmpty()) { var deleteQueryString = "DELETE FROM Product WHERE Id=@0"; db.Execute(deleteQueryString, ProductId); Response.Redirect("~/ListProductsForDelete"); } } <!DOCTYPE html> <html> <head> <title>Delete Product</title> </head> <body> <h1>Delete Product - Confirmation</h1> <form method="post" action="" name="form"> <p>Are you sure you want to delete the following product?</p> <p>Name: @prod.Name <br /> Description: @prod.Description <br /> Price: @prod.Price</p> <p><input type="submit" value="Delete" /></p> </form> </body> </html>
Halaman ini dipanggil oleh ListProductsForDelete.cshtml dan memungkinkan pengguna mengonfirmasi bahwa mereka ingin menghapus produk. Untuk mencantumkan produk yang akan dihapus, Anda mendapatkan ID produk untuk dihapus dari URL menggunakan kode berikut:
var ProductId = UrlData[0];
Halaman kemudian meminta pengguna untuk mengklik tombol untuk benar-benar menghapus rekaman. Ini adalah langkah keamanan penting: ketika Anda melakukan operasi sensitif di situs web Anda seperti memperbarui atau menghapus data, operasi ini harus selalu dilakukan menggunakan operasi POST, bukan operasi GET. Jika situs Anda disiapkan sehingga operasi penghapusan dapat dilakukan menggunakan operasi GET, siapa pun dapat meneruskan URL seperti
http://<server>/DeleteProduct/4
dan menghapus apa pun yang mereka inginkan dari database Anda. Dengan menambahkan konfirmasi dan pengodean halaman sehingga penghapusan hanya dapat dilakukan dengan menggunakan POST, Anda menambahkan ukuran keamanan ke situs Anda.Operasi penghapusan aktual dilakukan menggunakan kode berikut, yang pertama-tama mengonfirmasi bahwa ini adalah operasi pasca dan bahwa ID tidak kosong:
if( IsPost && !ProductId.IsEmpty()) { var deleteQueryString = "DELETE FROM Product WHERE Id=@0"; db.Execute(deleteQueryString, ProductId); Response.Redirect("~/ListProductsForDelete"); }
Kode menjalankan pernyataan SQL yang menghapus rekaman yang ditentukan lalu mengalihkan pengguna kembali ke halaman daftar.
Jalankan ListProductsForDelete.cshtml di browser.
Klik tautan Hapus untuk salah satu produk. Halaman DeleteProduct.cshtml ditampilkan untuk mengonfirmasi bahwa Anda ingin menghapus rekaman tersebut.
Klik tombol Hapus. Catatan produk dihapus dan halaman di-refresh dengan daftar produk yang diperbarui.
Tip
Menyambungkan ke Database
Anda bisa menyambungkan ke database dengan dua cara. Yang pertama adalah menggunakan Database.Open
metode dan untuk menentukan nama file database (kurang ekstensi .sdf ):
var db = Database.Open("SmallBakery");
Metode ini Open
mengasumsikan bahwa .file sdf ada di folder App_Data situs web. Folder ini dirancang khusus untuk menyimpan data. Misalnya, ia memiliki izin yang sesuai untuk memungkinkan situs web membaca dan menulis data, dan sebagai ukuran keamanan, WebMatrix tidak mengizinkan akses ke file dari folder ini.
Cara kedua adalah menggunakan string koneksi. String koneksi berisi informasi tentang cara menyambungkan ke database. Ini dapat mencakup jalur file, atau dapat menyertakan nama database SQL Server di server lokal atau jarak jauh, bersama dengan nama pengguna dan kata sandi untuk menyambungkan ke server tersebut. (Jika Anda menyimpan data dalam versi SQL Server yang dikelola secara terpusat, seperti di situs penyedia hosting, Anda selalu menggunakan string koneksi untuk menentukan informasi koneksi database.)
Di WebMatrix, string koneksi biasanya disimpan dalam file XML bernama Web.config. Seperti namanya, Anda dapat menggunakan file Web.config di akar situs web Anda untuk menyimpan informasi konfigurasi situs, termasuk string koneksi apa pun yang mungkin diperlukan situs Anda. Contoh string koneksi dalam file Web.config mungkin terlihat seperti berikut ini. Catatan $CREDENTIAL_PLACEHOLDER$
adalah tempat penampung untuk pasangan kunci/nilai kata sandi:
<?xml version="1.0" encoding="utf-8" ?>
<configuration>
<connectionStrings>
<add
name="SQLServerConnectionString"
connectionString= "server=myServer;database=myDatabase;uid=username;$CREDENTIAL_PLACEHOLDER$"
providerName="System.Data.SqlClient" />
</connectionStrings>
</configuration>
Dalam contoh, string koneksi menunjuk ke database dalam instans SQL Server yang berjalan di server di suatu tempat (dibandingkan dengan file .sdf lokal). Anda harus mengganti nama yang sesuai untuk myServer
dan myDatabase
, dan menentukan nilai login SQL Server untuk username
dan password
. (Nilai nama pengguna dan kata sandi belum tentu sama dengan kredensial Windows Anda atau sebagai nilai yang diberikan penyedia hosting anda untuk masuk ke server mereka. Tanyakan kepada administrator untuk nilai yang tepat yang Anda butuhkan.)
Metode Database.Open
ini fleksibel, karena memungkinkan Anda meneruskan nama file .sdf database atau nama string koneksi yang disimpan dalam file Web.config . Contoh berikut menunjukkan cara menyambungkan ke database menggunakan string koneksi yang diilustrasikan dalam contoh sebelumnya:
@{
var db = Database.Open("SQLServerConnectionString");
}
Seperti yang disebutkan, metode ini Database.Open
memungkinkan Anda meneruskan nama database atau string koneksi, dan akan mencari tahu mana yang akan digunakan. Ini sangat berguna ketika Anda menyebarkan (menerbitkan) situs web Anda. Anda dapat menggunakan file .sdf di folder App_Data saat mengembangkan dan menguji situs Anda. Kemudian ketika Anda memindahkan situs Anda ke server produksi, Anda dapat menggunakan string koneksi dalam file Web.config yang memiliki nama yang sama dengan file .sdf Anda tetapi yang menunjuk ke database penyedia hosting - semua tanpa harus mengubah kode Anda.
Terakhir, jika Anda ingin bekerja langsung dengan string koneksi, Anda dapat memanggil Database.OpenConnectionString
metode dan meneruskannya string koneksi aktual alih-alih hanya nama yang ada di file Web.config . Ini mungkin berguna dalam situasi di mana karena alasan tertentu Anda tidak memiliki akses ke string koneksi (atau nilai di dalamnya, seperti nama file .sdf ) hingga halaman berjalan. Namun, untuk sebagian besar skenario, Anda dapat menggunakan Database.Open
seperti yang dijelaskan dalam artikel ini.