Table of contents
Maintenance Berita dengan ASP.net Visual Studio 2008 - Sejak awal pembuatan, sebenarnya anda sama sekali belum membuat sebuah halaman website. Kini, setelah semua sitemap dan master page selesai dibuat, serta database selesai diimplementasikan, saatnya untuk membuat halaman web: Maintenance Berita anda yang pertama.
Langkahnya:
1. Di folder admin, dalam solution explorer klik kanan dan pilih submenu Add New Item
2. Pilih tipe web form kemudian beri nama default.aspx pastikan bahwa checkbox select master page dan place code in separate file dalam keadaan terpilih/centang.
3. Saat muncul windows dialog untuk memilih Master Page, klik di folder admin, dan pilih Master Page yang terletak di dalam folder tersebut
4. Dalam mode design, dalam toolbox cari GridView dan drag ke dalam desain “ContentPlaceHolder1”
5. Sehingga terlihat Data GridView, selanjutnya Klik tanda > pada pojok kanan atas Data GridView.
Pada “Choose Data Source” pilih <New Data Source…>
6. Kemudian akan Muncul sebuah “Data Souce Connection Wizard” karena database yang anda buat sebelumnya berbentuk .mdb maka pilih “Access database”, Specify an ID for the data Source biarkan saja “AccessDataSource1” OK
7. Kemudian Saatnya Memilih Database, cari database yang sudah dibuat tadi dengan cara klik button Browse, Kemudian pilih App_Data >> News.mdb
8. Selanjutnya anda akan dibawa kembali kehalaman sebelumnya.. klik Next untuk melanjutkan
Kemudian anda akan memilih table yang akan ditampilkan, karena akan menampilkan table News ke dalam GridView Maka, specify column from a table or view pilih news dan centang field yang akan ditampilkan lalu next >> finish
Jika sudah terkoneksi atau terhubung, hasilnya akan tampak seperti gambar berikut
9. Untuk memperindah tampilan, pastikan anda mencentang Enable paging dan Enable Selection kemudian klik Submenu Edit Column dan hapus semua field kecuali field judul dan namafile. Kemudian set property tittle tiap field tersebut menjadi judul dan File Berita. Klik Ok.
10. Pada Kotak Dialog Edit Column, set property Width di Grid View menjadi 100%. Lalu, klik submenu Auto Format di dalam Smart Tag dan Pilih Template Profesional.
11. Selanjutnya, Klik Icon Smart Tag di komponen AccessDataSource1 dan pilih submnu Configure Data Source.
12. Pada Kotak Dialog Pertama, klik Browse untuk memilih file database yang teletak dalam folder App_Data, Kemudian Klik Next untuk melanjutkan ke Langkah Berikutnya.
Drag Lagi table news dari database Explorer, tetapi kali ini klik pada GridView Bawaannya dan hapus komponen tesebut.
13. Selanjutnya Klik ikon smart Tag di komponen AccessDataSource1 dan pilih submenu Configure Data Source.
Dikotak dialog pertama, Klik Browse untuk memilih file database yang terletak dalam folder App_Data, Kemudian klik Next untuk melanjutkan ke langkah berikutnya.
Dikotak Dialog kedua, Klik pada tombol Where dan buat sebuah parameter baru yang akan diambil dari GridView
14. Kembali ke kotak dialog kedua, pilih opsi Specify a custom…., untuk melakukan edit perintah SQL, karena dua field khusus, yaitu field id dan field tanggal, telah terisi secara otomatis dari setting database.
15. Dikotak dialog ketiga, edit perintah insert dan update menjadi sebagai berikut:
INSERT INTO 'news' ('judul','namafile') VALUES (?,?)
UPDATE 'news' SET 'judul' = ? WHERE 'id' = ?NOTE:
Pergantian parameter yang tidak sesuai, sering kali menyebabkan error saat eksekusi aplikasi. Pastikan bahwa di dalam mode Source. Dibagian tag AccessDataSource1, parameter dari Insert dan Update adalah sebagai berikut:
<UpdateParameters>
<asp:Parameter Name="judul" Type="String" />
<asp:Parameter Name="id" Type="Int32" />
</UpdateParameters>
<InsertParameters>
<asp:Parameter Name="judul" Type="String" />
<asp:Parameter Name="namafile" Type="Int32" />
</InsertParameters>Jika sudah, klik tombol hingga kotak dialog tertutup
16. Selanjutnya, drag komponen button dari toolbox dan letakkan di bawah komponen AccessdataSource. Set property Text dari komponen tersebut menjadi Entry News.
Drag lagi sebuah komponen FormView, dan klik ikon Smart Tag untuk mengarahkan opsi Data Source ke Template dan pilih submenu Header Template, dan modifikasi sepert pada gambar berikut:
17. Ulangi lagi langkah sebelumnya, tetapi pilih submenu insert Item Template dan modifikasi seperti pada gambar berikut:
Note : Gunakan Table untuk memodifikasi InsertItemTemplate, dengan memilih submenu Layout, Insert Table. Kemudian, masukkan nilai Rows : 3 dan Columns: 2 . Hapus komponen Text Box yang mewakili namafile, kemudian drag sebuah komponen TextBox baru, set property TextMode menjadi Multiline dan gabunggkan kolom dalam table dengan melakukan select (drag mouse) lalu klik kanan dan pilih opsi Merge Cells
18. Selanjutnya, dobel klik di dalam link Insert dan ketikkan listing berikut:
xnama = CStr (Now.Year & Now.Month &_
Now.Day & Now.Hour & Now.Minute & Now.second)
AccessDataSource2.InsertParameters _
("namafile").DefaultValue =xnamaNote: Tambahkan variable xnama yang akan memiliki jangkauan dalam satu halaman web. Tempatkan deklarasi Dim xnama As String tepat dibawah Inherits System.Web.UI.Page.
19. Untuk Edit Item Template, modifikasi pada gambar berikut: (lakukan langkah seperti saat melakukan modifikasi Insert Template)
Kemudian, dobel klik di link Update, dan Ketikkan listing berikut:
Xnama = GridView1.Rows(GridView1.SelectedIndex) _
.Cells(2).Text
System.IO.File.WriteAllText _
(Server.MapPath("_/news/") & _
Xnama & ".txt", CType(FormView1. _
FindControl ("TextBox1"), TextBox) .Text)20. Setelah itu, klik ikon Smart Tag dan pilih End Template Editing
Double klik di dalam komponen FormView dan pilih event Item Inserted lalu ketikkan listing berikut:
System.IO.File.WriteAllText _
(Server.MapPath("_/news/") & _
Xnama & ".txt" , CType(FormView1. _
FindControl ("TextBox1"), TextBox).Text)
GridView1.DataBind()
21. Langkah berikutnya adalah beralih ke mode design, lalu double klik di komponen Button (Entry News) dan ketikkan listing berikut:
FormView1.ChangeMode (FormViewMode.Insert)
Langkah terakhir adalah beralih ke mode design, kemudia dobel klik di komponen GridView. Di dalam prosedur GridView1_SelectedIndexChanged, ketikkan listing berikut:
FormView1.DataBind ()
FormView1.ChangeMode _
(FormViewMode.Edit)
Xnama = GridView1.Rows (GridView1. _
SelectedIndex).Cells (2).Text
Ctype (FormView1.FindControl _
("TextBox1"), TextBox). _
Text = System.IO.File.ReadAllText _
(Server.MapPath("_/news/") & _
Xnama & ".txt")22. Kini Eksekusi situs anda dengan menekan kombinasi tombol Ctrl+F5
23. Cobalah untuk melakukan entri beberapa berita, melakukan modifikasi ataupun operasi penghapusan berita. Cek kembali langkah yang telah anda lakukan jika terjadi kesalahan. Sekian Membuat Website dengan Visual Studio 2008 (Part 4) Maintenance Berita.
