asp.net 3.5
TRANSCRIPT
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
i Kata Pengantar
Kata Pengantar
Fu
First of all, tentunya syukur alhamdulillah Fu panjatkan atas kehadirat Allah SWT yang telah begitu
banyak memberikan keajaibannya kepada Fu. Fu juga berterima kasih kepada Naren, yang
memberikan kepercayaan kepada Fu dan Niko atas dibuatnya buku ini. Tidak lupa Fu menyampaikan
terima kasih banyak kepada keluarga Fu yang selalu memberikan dukungan kepada Fu. Dan terima
kasih yang sungguh spesial Fu sampaikan kepada Sonya Permata Putri, yang selalu sabar untuk
mendampingi Fu dan tidak henti-hentinya memberikan semangat kepada Fu.
Ketika membuat website yang dijadikan studi kasus dalam buku ini, Fu mendapat begitu banyak ilmu
tambahan. Sungguh banyak sekali pengetahuan yang baru Fu dapat, terutama tentang ASP.NET 3.5
yang Fu sangat yakin akan banyak membantu para web developer dalam menghemat waktu dan
tenaga. Mudah-mudahan buku ini bermanfaat bagi siapapun yang membacanya.
Niko
Puji Tuhan, Niko sangat bersyukur kepada Tuhan yang tidak pernah lelah mendampingi dan
mencurahkan berkat serta hikmat nya kepada Niko. Terima kasih banyak kepada Naren yang sudah
memberikan kesempatan dan kepercayaan kepada kami berdua untuk menulis buku ini. Well, Ini
adalah buku pertama yang Niko tulis. Terima kasih kepada papa, mama, adik-adik dan keluarga yang
selalu mendukung semua kegiatan Niko. Dan terima kasih yang sangat special untuk Bani, yang
sudah memberikan dukungan, kesabaran, dan semangat kepada Niko.
Cukup banyak pengalaman dan ilmu yang Niko dapat saat menulis buku ini, ya sebagian besar
tentunya tidak jauh dari Silverlight. Semoga buku ini bermanfaat untuk siapa saja yang membacanya.
Fu & Niko
Kami berdua menyadari bahwa tentunya pada buku ini masih banyak kekurangan dan jauh dari
sempurna. Maka dari itu, kami membuka pintu seluas-luasnya dalam menerima kritik dan saran yang
membangun agar buku-buku kami yang selanjutnya akan lebih bermanfaat dan lebih berkualitas.
Jakarta, Februari 2008
Fu & Niko
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
ii Daftar Isi
Daftar Isi
Kata Pengantar ......................................................................................................................................... i
Fu.......................................................................................................................................................... i
Niko ...................................................................................................................................................... i
Fu & Niko .............................................................................................................................................. i
Daftar Isi .................................................................................................................................................. ii
Pendahuluan ........................................................................................................................................... 1
Teknologi Yang Dihadirkan ..................................................................................................................... 2
Materi Yang Dibahas ............................................................................................................................... 3
Visual Studio 2008................................................................................................................................... 4
Membuat website ASP.NET ................................................................................................................ 4
Membuat website ASP.NET 2.0....................................................................................................... 4
Membuat website ASP.NET 3.0....................................................................................................... 7
Membuat website ASP.NET 3.5....................................................................................................... 8
Mengenal workspace Visual Studio 2008 ........................................................................................... 9
Mengenal visual designer dan IntelliSense ....................................................................................... 14
Menambahkan tombol pada halaman website ............................................................................ 14
Menambahkan event handler pada tombol ................................................................................. 17
AJAX ...................................................................................................................................................... 21
Sekilas tentang AJAX ......................................................................................................................... 21
AJAX pada ASP.NET ........................................................................................................................... 21
Membuat halaman web ASP.NET yang menggunakan AJAX ........................................................ 22
Menggunakan UpdateProgress pada halaman yang memiliki kemampuan AJAX ....................... 26
Fitur dan Control Baru di ASP.NET ........................................................................................................ 28
LINQ to SQL ....................................................................................................................................... 28
Membuat database SQL Server pada suatu website .................................................................... 29
Mengolah data pada database SQL Server ................................................................................... 38
Membuat suatu DataContext sebagai ORM ................................................................................. 40
Menggunakan LINQ pada DataContext untuk ambil data ............................................................ 44
Menggunakan method pada DataContext yang dihasilkan melalui stored procedure ................. 46
LinqDataSource ................................................................................................................................. 50
Menambahkan LinqDataSource pada suatu halaman website .................................................... 50
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
iii Daftar Isi
ListView ............................................................................................................................................. 55
Menampilkan dan mengolah data dengan menggunakan ListView ............................................. 55
DataPager .......................................................................................................................................... 60
Menambahkan DataPager ke suatu ListView ............................................................................... 60
Silverlight .............................................................................................................................................. 63
Apakah Silverlight? ............................................................................................................................ 63
Mengapa Silverlight? ........................................................................................................................ 63
Menghadirkan Silverlight pada website Anda .................................................................................. 63
Membuat content Silverlight pada halaman website ................................................................... 63
Mengenal eXtensible Application Markup Language ....................................................................... 67
Bermain dengan XAML.................................................................................................................. 67
Membuat objek pada content Silverlight ......................................................................................... 68
Membuat objek Ellipse ................................................................................................................. 68
Membuat objek Rectangle ............................................................................................................ 69
Membuat objek Path .................................................................................................................... 70
Membuat objek TextBlock ............................................................................................................ 71
Mengolah objek Silverlight ............................................................................................................... 72
Menggunakan properti Stroke dan StrokeThickness .................................................................... 72
Menggunakan properti Opacity .................................................................................................... 73
Memberi warna gradasi pada objek ............................................................................................. 74
Menggunakan teknik grouping pada Silverlight ........................................................................... 76
Penggunaan Media pada content Silverlight .................................................................................... 78
Menampilkan gambar pada content Silverlight ............................................................................ 78
Menampilkan video pada content Silverlight ............................................................................... 79
Mendengarkan suara melalui content Silverlight ......................................................................... 80
Berinteraksi dengan objek Silverlight ............................................................................................... 80
Meng-handle event MouseLeftButtonDown ................................................................................ 80
Mengambil objek Silverlight melalui JavaScript ............................................................................ 82
Studi Kasus Membuat Website Testipi ................................................................................................. 84
Sekilas tentang Software Development Life Cycle ............................................................................ 84
Planning ............................................................................................................................................ 85
Analysis ............................................................................................................................................. 85
Design ................................................................................................................................................ 86
Architecture .................................................................................................................................. 86
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
iv Daftar Isi
Database Modeling ....................................................................................................................... 86
Development & Testing .................................................................................................................... 88
Menyiapkan database Testipi ....................................................................................................... 88
Menggunakan ASP.NET Membership ........................................................................................... 92
Menambahkan setting tambahan secara manual pada web.config ............................................. 94
Membuat kelas pendukung .......................................................................................................... 95
Membuat folder untuk menyimpan gambar .............................................................................. 100
Menentukan halaman yang hanya bisa diakses oleh member ................................................... 101
Membuat Theme ........................................................................................................................ 102
Membuat MasterPage ................................................................................................................ 106
Membuat halaman Login ............................................................................................................ 110
Membuat halaman Register ....................................................................................................... 113
Membuat halaman ChangePassword ......................................................................................... 116
Membuat halaman MyVideo ...................................................................................................... 119
Membuat Web User Control ListMyVideos ................................................................................ 125
Menggunakan Web User Control ListMyVideos pada halaman MyVideos.aspx ........................ 138
Membuat Web User Control ListVideos ..................................................................................... 145
Menggunakan Web User Control ListVideos pada halaman Default.aspx ................................. 148
Membuat Web User Control ListMyFavorites ............................................................................ 151
Menggunakan Web User Control ListMyFavorites pada halaman MyFavorites.aspx ................ 153
Membuat Web User Control SearchBox ..................................................................................... 156
Menggunakan Web User Control SearchBox pada TestipiMasterPage.master ......................... 157
Mengubah Web User Control ListVideos .................................................................................... 160
Menggunakan Web User Control ListVideos pada halaman Search.aspx .................................. 164
Menyiapkan halaman WatchVideo.aspx yangmemiliki content Silverlight ............................... 166
Membuat video player interakif dengan menggunakan Silverlight ............................................ 172
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
1 Pendahuluan
Pendahuluan
Framework .NET 3.5 berikut Visual Studio 2008 belum lama di-release oleh Microsoft, yaitu tepatnya
pada tanggal 19 November 2007. Baru mencicipi sebentar saja, Anda akan langsung merasakan
bahwa terdapat banyak fungsi dan fitur baru pada Visual Studio 2008 dan .NET 3.5.
Seperti halnya peningkatan yang terjadi pada .NET 2.0 ke .NET 3.0 yang bersifat additive, fitur-fitur
pada .NET 3.5 juga merupakan tambahan fungsionalitas dari fitur yang ada pada .NET 3.0. Dengan
demikian, core assemblies pada .NET 2.0 masih digunakan pada .NET 3.0 dan .NET 3.5. Hal ini
berbeda dengan perubahan ketika .NET 1.1 ke .NET 2.0 di mana core assemblies .NET 2.0 jauh
berbeda dan jauh lebih powerful dibandingkan dengan .NET 1.1.
Sebagai bagian dari .NET 3.5, ASP.NET 3.5 juga tidak mengubah fungsionalitas dan konsep
programming yang ada pada ASP.NET 2.0. Hanya saja, pada ASP.NET 3.5 terdapat beberapa kelas
dan kemampuan baru pada ASP.NET.
Visual Studio 2008 tentunya merupakan tool yang sangat direkomendasikan dalam membuat aplikasi
berbasis .NET 3.5, termasuk ASP.NET 3.5. Terdapat fleksibilitas yang membuat developer cukup
nyaman dalam menggunakan Visual Studio 2008, yaitu Visual Studio 2008 mendukung multi-
targeting project. Artinya, kita bisa memilih framework mana yang digunakan, apakah ASP.NET 2.0,
ASP.NET 3.0, maupun ASP.NET 3.5. Pada Visual Studio 2008 juga terdapat peningkatan pada visual
designer (yang sekarang bisa mode Split View), fitur IntelliSense dan debugging pada JavaScript,
serta integrasi AJAX Extensions yang sudah built-in pada ASP.NET 3.5 tanpa perlu download terpisah.
Yup, sekarang sudah ada control-control AJAX Extensions pada toolbox Visual Studio 2008!
Bicara tentang fitur, setidaknya ada tiga fitur yang perlu diperhatikan di ASP.NET 3.5, yaitu
1. Integrasi AJAX Extension
2. Control ListView
3. Control DataPager
Selain tiga yang di atas, terdapat lagi dukungan Language Integrated Query (LINQ) yang merupakan
fitur paling powerful yang dimiliki oleh .NET 3.5 yang juga tentunya dapat dimanfaatkan dalam
membuat aplikasi berbasis ASP.NET 3.5.
Sebagai kesimpulan, versi terbaru Visual Studio 2008 serta ASP.NET memiliki fitur-fitur tambahan
tanpa mengubah konsep programming yang ada pada ASP.NET versi sebelumnya. Dengan ASP.NET
3.5, framework AJAX yang tadinya terpisah kini sudah terintegrasi. Selain itu, pada ASP.NET 3.5
terdapat dua Web Control baru yaitu ListView dan DataPager. Di sisi lain, sebagai development tool
paling canggih di dunia, Visual Studio 2008 sekarang memiliki visual designer yang lebih canggih,
IntelliSense dan debugging pada JavaScript, serta kemampuan untuk multi-targeting versi
framework yang diinginkan dalam membuat suatu project.
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
2 Teknologi Yang Dihadirkan
Teknologi Yang Dihadirkan
Fu dan Niko mencoba untuk memasukkan sebanyak-banyaknya teknologi baru Microsoft di ASP.NET
3.5 dan Silverlight ke dalam buku ini. Kami juga tidak melupakan teknologi-teknologi yang begitu
bermanfaat yang sudah hadir sejak ASP.NET 2.0. Namun demikian, tentunya dalam buku sederhana
ini tidak semua teknologi ASP.NET 2.0, ASP.NET 3.5 dan Silverlight dapat kami hadirkan, karena
jumlahnya amat sangat banyak.
Teknologi yang hadir dalam studi kasus pada buku ini antara lain:
ASP.NET 2.0: MasterPage Membership Login LoginView LoginStatus LoginName CreateUserWizard ChangePassword Theme and Skin Web User Control FileUpload Web Site Administration Tool
ASP.NET 3.5: ListView DataPager LINQ to SQL Classes LinqDataSource
AJAX: ScriptManager UpdatePanel UpdateProgress
Silverlight: Canvas Rectangle LinearGradientBrush TextBlock MediaElement JavaScript Event Handling Controlling Media Playback Full-screen Media Playback
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
3 Materi Yang Dibahas
Materi Yang Dibahas
Karena buku ini lebih dikhususkan untuk membahas teknologi yang baru muncul pada ASP.NET 3.5
dan Silverlight, maka tidak semua teknologi yang kami hadirkan akan kami bahas secara mendetail,
terutama teknologi yang sudah hadir sejak ASP.NET 2.0.
Materi yang akan dibahas dalam buku ini antara lain:
Bagian 1: Visual Studio 2008
o Membuat website ASP.NET
o Mengenal workspace pada Visual Studio 2008
o Mengenal visual designer dan IntelliSense
Bagian 2: AJAX
o Menggunakan UpdatePanel serta ScriptManager
o Menambahkan UpdateProgress ke UpdatePanel
Bagian 3: Fitur dan Control Baru di ASP.NET
o Membuat DataContext dari LINQ to SQL Classes
o Membuat LinqDataSource dari sebuah DataContext
o Menggunakan ListView dalam menampilkan dan mengubah data
o Menggunakan DataPager untuk membuat paging secara otomatis
Bagian 4: Silverlight
o Menampilkan content Silverlight pada halaman web
o Menambahkan TextBlock, Rectangle, dan MediaElement pada content Silverlight
o Menghandle event yang terjadi dengan menggunakan JavaScript
Bagian 5: Studi Kasus Membuat website Testipi
o Menyiapkan database
o Membuat kelas DataContext dan kelas-kelas pendukung
o Membuat tampilan website dengan MasterPage dan Theme
o Menggunakan ASP.NET Membership
o Membuat fitur manajemen data Video dan Favorite
o Menambahkan fitur Search
o Menambahkan fitur Watch Video dengan menggunakan Silverlight
Dalam melakukan coding dan programming pada buku ini, kami menggunakan Visual Studio Team
System 2008. Pada kenyataannya, untuk melakukan coding dan programming semua praktek yang
ada pada buku ini bisa juga menggunakan Visual Web Developer 2008 Express maupun Visual Studio
2008 Professional. Anda dapat memperoleh Visual Web Developer 2008 Express secara gratis di
http://www.microsoft.com/express/download/
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
4 Visual Studio 2008
Visual Studio 2008
Seperti yang telah dikatakan pada bab Pendahuluan, Visual Studio 2008 memiliki beberapa fitur baru
yang cukup penting dalam membantu proses development. Tiga di antaranya adalah kemampuan
editing dalam mode Split View, adanya IntelliSense dan debugging untuk JavaScript, serta multi-
targeting project.
Bagi pembaca yang biasa menggunakan Visual Studio 2005, maka menggunakan Visual Studio 2008
tentunya akan sangat mudah karena workspace yang ada pada Visual Studio 2008 sangat mirip
dengan workspace Visual Studio 2005. Bagi pembaca yang baru menggunakan Visual Studio sebagai
development tool, tidak perlu khawatir karena software yang satu ini benar-benar mudah digunakan
dan sangat membantu dalam proses belajar di dunia programming, khususnya menggunakan
framework .NET.
Untuk memahami tiga fitur baru Visual Studio 2008, maka Anda kami ajak untuk langsung
melakukan praktek menggunakan Visual Studio 2008 dengan langkah-langkah berikut:
1. Membuat website ASP.NET yang ditujukan untuk masing-masing framework
2. Mengenal dan menghapal workspace Visual Studio 2008
3. Menggunakan mode Split View dalam editing
4. Menggunakan IntelliSense dalam melakukan coding
Membuat website ASP.NET
Ikuti Langkah Berikut
Membuat website ASP.NET 2.0
1. Buka Visual Studio 2008 dari Start Menu maupun shortcut. Akan tampil halaman “Start Page”
seperti berikut
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
5 Visual Studio 2008
2. Untuk membuat website baru, pilih Create: Web Site… pada panel “Recent Projects” atau
melalui File > New Web Site… Setelah itu akan muncul window berikut
3. Pada window “New Web Site”, kita bisa memilih target framework yang akan kita gunakan
melalui sebuah Drop Down List yang terletak di kanan atas window. Karena kita akan membuat
website ASP.NET 2.0, pilih .NET Framework 2.0, pilih ASP.NET Web Site sebagai template, File
System untuk Location, Visual C# untuk Language, dan beri nama website kita sebagai
WebASPNET20. Setelah itu, klik tombol “OK”.
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
6 Visual Studio 2008
4. Yup! Website Kita telah selesai disiapkan. File bernama Default.aspx dan beberapa file serta
folder lainnya otomatis dibuat oleh Visual Studio 2008. Ketiklah “Hello World” di dalam elemen
div.
<div> Hello World
</div>
5. Setelah itu tekan Ctrl+F5. Hasilnya adalah seperti berikut
Penjelasan
Dengan menekan Ctrl+F5, maka kita memerintahkan Visual Studio 2008 untuk menjalankan aplikasi
website Anda. Di awal langkah membuat website, Anda memilih File System pada Location sehingga
Anda dapat menempatkan website Anda di sembarang folder, misalnya di
D:\Websites\WebASPNET20. Dengan demikian, perlu adanya web server khusus yang melayani
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
7 Visual Studio 2008
aplikasi website Anda pada folder tersebut karena pada normalnya IIS (Internet Information Services)
yang berperan sebagai web server untuk ASP.NET. Namun secara default, IIS hanya melayani website
yang ditempatkan di folder C:\inetpub\wwwroot. Dengan demikian Visual Studio 2008 otomatis
menjalankan web server khusus yang disebut dengan Cassini (yang sudah ada sejak Visual Studio
2005) untuk melayani website yang Location-nya ada di File System (yaitu bukan di
C:\inetpub\wwwroot).
Ketika Cassini dijalankan, maka otomatis Cassini menggunakan port yang ditentukan pada Visual
Studio 2008 dalam melayani website ini. Secara default, Visual Studio akan menentukan port yang
akan digunakan secara dinamis. Contoh di atas menggunakan port 49305.
Setelah terdapat port yang digunakan, maka website ASP.NET bisa dijalankan. Secara default,
halaman utama ASP.NET adalah Default.aspx sehingga yang ditampilkan pertama kali adalah
halaman Default.aspx. Pada halaman Default.aspx hanya terdapat tulisan Hello World di dalam
elemen div sehingga hanya tampil tulisan Hello World pada browser.
Selanjutnya, dengan cara yang sangat mirip, kita akan membuat website ASP.NET 3.0
Ikuti Langkah Berikut
Membuat website ASP.NET 3.0
1. Buka Visual Studio 2008, kemudian pilih Create: Web Site…
2. Setelah itu, pada window New Web Site, di bagian kanan atas pilih .NET Framework 3.0, pilih
ASP.NET Web Site sebagai template, File System sebagai Location dan Visual C# sebagai
Language. Beri nama website tersebut sebagai WebASPNET30 kemudian klik tombol “OK”
3. Seperti contoh sebelumnya, tulis Hello World di dalam elemen div kemudian tekan Ctrl+F5.
4. Hasilnya adalah seperti berikut
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
8 Visual Studio 2008
Penjelasan
Contoh tadi sama sekali tidak menunjukkan hasil yang berbeda dengan contoh sebelumnya. Proses
yang dialami pun sama sehingga tidak perlu dirinci ulang. Hanya saja, kali ini kita menggunakan
framework .NET 3.0 yang tentunya memiliki kelas-kelas tambahan yang dapat dimanfaatkan dalam
website kita.
Selanjutnya, dengan cara yang juga masih mirip, kita membuat website ASP.NET 3.5
Ikuti Langkah Berikut
Membuat website ASP.NET 3.5
1. Buka Visual Studio 2008, kemudian pilih Create: Web Site…
2. Setelah itu, pada window New Web Site, di bagian kanan atas pilih .NET Framework 3.5, pilih
ASP.NET Web Site sebagai template, File System sebagai Location dan Visual C# sebagai
Language. Beri nama website tersebut sebagai WebASPNET35 kemudian klik tombol “OK”
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
9 Visual Studio 2008
3. Masih sama seperti contoh sebelumnya, tulis Hello World di dalam elemen div kemudian tekan
Ctrl+F5.
4. Hasilnya adalah seperti berikut
Penjelasan
Contoh yang ini pun sama persis dengan contoh sebelumnya. Namun lagi-lagi, walaupun tidak
kelihatan, kita sebenarnya disediakan kelas-kelas yang lebih banyak daripada kelas yang tersedia di
ASP.NET 2.0 dan ASP.NET 3.0 yang dapat kita gunakan dalam website kita.
Mengenal workspace Visual Studio 2008
Untuk memudahkan kita dalam coding dan programming, ada baiknya kita mengenal dahulu area
kerja Visual Studio 2008. Visual Studio 2008 dapat dibagi menjadi lima wilayah, yaitu kiri, atas,
kanan, tengah dan bawah. Bagian kiri terdapat Toolbox, atas terdapat Tool Bar dan Menu Bar, kanan
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
10 Visual Studio 2008
terdapat window-window penting, tengah merupakan tempat editing, dan bagian bawah merupakan
tempat window pendukung yang biasanya disembunyikan.
Gambar 1 Area Kerja Visual Studio
Bagian tool bar dan menu bar berisi tombol-tombol dan menu-menu Visual Studio 2008.
Gambar 2 Tool Bar dan Menu Bar
Bagian Toolbox berisi control-control atau elemen-elemen yang bisa di-drag-and-drop ketika kita
sedang mengedit suatu halaman website.
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
11 Visual Studio 2008
Gambar 3 Toolbox
Bagian window penting setidaknya berisi tiga buah window, yaitu Solution Explorer, Server Explorer,
dan Properties.
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
12 Visual Studio 2008
Gambar 4 Solution Explorer, Server Explorer dan Properties
Bagian Text Editor dan visual designer merupakan tempat kita “berkarya”.
Gambar 5 Text Editor
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
13 Visual Studio 2008
Gambar 6 Visual designer dalam mode Split View
Terakhir, bagian window pendukung biasanya terdapat window Error List dan Output yang dalam
keadaan hidden. Klik judul window untuk melihat isi window.
Gambar 7 Window Error List dan Output dalam mode hidden
Gambar 8 Window Error List setelah judulnya diklik
Window-window yang Anda perlukan dapat Anda buka melalui menu View. Misalnya, Anda ingin
membuka window Bookmark Window. Caranya adalah dengan memilih View > Bookmark Window.
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
14 Visual Studio 2008
Gambar 9 Membuka Bookmark Window melalui menu View
Mengenal visual designer dan IntelliSense
Sejak dahulu, keunggulan Visual Studio dibandingkan tools lainnya adalah adanya fitur visual
designer, yaitu developer melakukan editing secara visual, dan di balik itu Visual Studio akan
menggenerate code yang sesuai dengan tampilan visual yang dibuat oleh developer. Dengan
demikian, developer tidak perlu menulis code-code yang sudah sangat umum. Misalnya,
menambahkan suatu tombol pada halaman website. Developer hanya perlu melakukan drag-and-
drop serta mengubah tampilan tombol melalui window Properties sambil dapat melihat secara
langsung perubahan tampilan yang terjadi pada tombol.
Ikuti Langkah Berikut
Menambahkan tombol pada halaman website
1. Buka Visual Studio 2008, pilih Open: Web Site…
2. Bukalah website yang terakhir kali Anda buat, yaitu WebASPNET35
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
15 Visual Studio 2008
3. Buka Default.aspx dengan double-click Default.aspx pada Solution Explorer
4. Klik menu “Split” pada bagian bawah window Text Editor
5. Drag-and-drop control Button yang berada di tab Standard ke samping tulisan Hello World yang
berada di visual designer.
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
16 Visual Studio 2008
6. Secara otomatis, code ASP.NET juga akan ter-update
7. Sekarang, melalui window Properties, ubah warna background tombol tersebut menjadi
“Yellow” dengan mengubah properti BackColor dan ubah teksnya menjadi “Wow” dengan
mengubah properti Text
8. Warna tombol dan tulisan yang ada pada tombol akan berubah secara otomatis pada visual
designer dan Visual Studio juga meng-generate code yang sesuai dengan nilai properti yang tadi
diubah
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
17 Visual Studio 2008
9. Tekan Ctrl+F5 untuk melihat hasilnya
10. Berikut adalah tampilan Default.aspx pada browser
Penjelasan
Dengan kemampuan visual editing, Visual Studio menghemat waktu dan tenaga dalam membuat
dan mengolah control pada suatu halaman website tanpa perlu mengubah code-nya secara
langsung. Dengan mengubah properti BackColor menjadi Yellow dan Text menjadi Wow, maka Visual
Studio secara otomatis menggenerate code berikut:
<asp:Button ID="Button1" runat="server" BackColor="Yellow" Text="Wow" />
Selanjutnya, kita akan memanfaatkan fitur IntelliSense, baik untuk code ASP.NET, C#, bahkan sampai
JavaScript.
Ikuti Langkah Berikut
Menambahkan event handler pada tombol
1. Buka kembali halaman Default.aspx pada website WebASPNET35 dengan menggunakan Visual
Studio 2008.
2. Gunakan mode Source View dengan mengklik pilihan Source
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
18 Visual Studio 2008
3. Tambahkan properti Width pada Button1, dengan menekan spasi pada control Button1. Ketika
menekan spasi, otomatis Visual Studio akan menampilkan code yang dapat digunakan untuk
Button1.
4. Dari pilihan yang ada, pilih Width kemudian ketikkan tanda =
5. Isi properti Width dengan 100. Jangan lupa menambahkan tanda “ dan “ dalam mengisi suatu
properti
6. Sekarang code untuk Button1 adalah seperti berikut
<asp:Button ID="Button1" runat="server" BackColor="Yellow" Text="Wow" Width="100" />
7. Sekarang beralih ke mode Design View dengan memilih Design
8. Double-click Button1. Visual Studio akan otomatis meng-generate method untuk menghandle
event OnClick pada Button1. Anda akan dibawa ke file Default.aspx.cs untuk mengubah isi
method yang di-generate. Isi method tersebut dengan code berikut (perhatikan ketika Anda
mengetik, maka Anda akan dibantu oleh IntelliSense):
protected void Button1_Click(object sender, EventArgs e) { Response.Write("I was clicked!"); }
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
19 Visual Studio 2008
9. Kembali ke Default.aspx dan gunakan mode Source View
10. Tambahkan code JavaScript berikut di dalam tag <head></head> (Anda juga akan dibantu oleh
IntelliSense dalam menambahkan script ini):
<script type="text/javascript"> function sayHi() { alert("Hi..!"); } </script>
11. Di sebelah Button1, tambahkan sebuah HTML Button yang memanggil method sayHi jika diklik
<input type="button" value="Say Hi" onclick="sayHi()" />
12. Tes website Anda dengan menekan Ctrl+F5
13. Klik tombol berwarna kuning, maka akan muncul tulisan I was clicked
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
20 Visual Studio 2008
14. Sekarang klik tombol bertuliskan Say Hi, maka akan muncul window alert yang menyapa Anda
Penjelasan
Setiap kali Anda mengetikkan sesuatu, Visual Studio akan memberikan Anda pilihan-pilihan yang
sesuai dengan apa yang Anda akan ketikkan. Fitur ini disebut IntelliSense. Dengan adanya fitur ini,
biasanya kita hanya akan mengetikkan sebuah atau beberapa huruf saja kemudian menekan Enter
untuk kemudian akan otomatis dilengkapi oleh Visual Studio 2008.
Fitur IntelliSense berlaku untuk code ASP.NET pada file .aspx, untuk code C# pada file .cs, dan untuk
code JavaScript, baik yang diembed di suatu halaman web maupun script yang berada di dalam file
.js.
Pada control Button1, event OnClick dihandle oleh method Button1_Click yang berada di code
behind dari halaman Default.aspx, yaitu Default.aspx.cs. Di dalam method Button1_Click, dipanggil
method Response.Write(“I was clicked”) sehingga ketika Button1 diklik, akan muncul tulisan I
was clicked.
Di control lainnya, yaitu sebuah HTML input yang bertipe button, event onclick dihandle oleh method
sayHi yang ada di JavaScript. Di dalam method sayHi, dipanggil method alert(“Hi..!”). Dengan
demikian jika tombol ini diklik, akan muncul window yang bertuliskan Hi..!.
Sampai pada akhir bab ini, tentunya Anda sudah agak membiasakan diri dengan kemanjaan yang
disediakan oleh Visual Studio 2008. Bagi pembaca yang masih belum terbiasa jangan khawatir
karena pada bab-bab selanjutnya kita akan terus melakukan programming dengan Visual Studio
2008 sehingga lama-kelamaan kita akan terbiasa dengan sendirinya. Semakin Anda mahir menguasai
fitur-fitur dan kemudahan yang disediakan oleh Visual Studio, maka semakin cepat Anda dalam
melakukan coding dan programming.
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
21 AJAX
AJAX
Sekilas tentang AJAX
Asynchronous JavaScript and XML atau yang lebih dikenal dengan AJAX mulai bergaung sejak tahun
2005. AJAX bukanlah suatu bahasa pemrograman, bukan pula merupakan suatu script, akan tetapi
merupakan suatu teknik baru untuk membuat aplikasi web yang lebih interaktif.
Dengan menggunakan AJAX, JavaScript yang ada pada suatu halaman web dapat berkomunikasi
langsung dengan server dengan menggunakan objek XMLHttpRequest. Nah, dengan objek ini,
JavaScript dapat mengambil dan mengirimkan data ke server tanpa perlu melakukan reload atau
refresh pada halaman web. Mengapa? Karena AJAX melakukan transfer data (request Http) secara
asynchronous antara browser dengan web server sehingga memungkinkan untuk mengambil
sebagian data dari server tanpa perlu mengambil semua isi halaman web tersebut dari ulang.
Dengan demikian, aplikasi web menjadi lebih cepat dan lebih user-friendly. Dan untungnya AJAX
tidak tergantung dari web server tempat AJAX tersebut berada, karena AJAX menggunakan protokol
Http dan transfer data melalui request Http.
Perlu diketahui bahwa objek XMLHttpRequest hanya didukung oleh browser-browser masa kini,
yaitu:
Internet Explorer 5 dan yang lebih baru
Safari 1.2 dan yang lebih baru
Mozilla Firefox 1.0 dan yang lebih baru
Opera 8 dan yang lebih baru
Netscape 7 dan yang lebih baru
AJAX pada ASP.NET
Ketika masih menggunakan framework .NET 2.0, AJAX merupakan “benda asing” sehingga perlu
diinstal sebagai suatu “tambahan” pada ASP.NET 2.0. Sekarang, framework. NET 3.5 sangat
memudahkan kita dalam menggunakan AJAX di ASP.NET karena AJAX Extensions sudah merupakan
bagian dari .NET framework.
Control-control yang memungkinkan penggunaan AJAX pun sudah dimasukkan ke dalam Toolbox,
yaitu:
1. ScriptManager. Berfungsi untuk mengatur client script untuk halaman web yang
menggunakan AJAX.
2. ScriptManagerProxy. Memungkinkan komponen yang nested seperti content page dan user
control untuk menggunakan AJAX di mana komponen yang menjadi parent sudah memiliki
ScriptManager.
3. Timer. Berfungsi untuk melakukan postback dalam setiap kurun waktu tertentu.
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
22 AJAX
4. UpdatePanel. Berfungsi sebagai tempat di mana AJAX beraksi. Hanya bagian yang di dalam
UpdatePanel yang akan di-reload oleh web server. Bagian di luar UpdatePanel tidak akan
mengalami reload.
5. UpdateProgress. Berfungsi untuk menyediakan informasi status bagian dari halaman web
yang sedang di-update dalam suatu control UpdatePanel.
Dalam buku ini, kita akan belajar menggunakan ScriptManager, UpdatePanel, serta UpdateProgress.
Ikuti Langkah Berikut
Membuat halaman web ASP.NET yang menggunakan AJAX
1. Buka kembali website WebASPNET35.
2. Buatlah sebuah halaman web baru. Caranya yaitu klik kanan root dari website pada Solution
Explorer, kemudian pilih Add New Item…
3. Pilih Web Form pada pilihan Templates. Beri nama LatihanAjax.aspx. Pilih Visual C# sebagai
Language dan jangan lupa untuk memilih check box “Place code in separate file” agar otomatis
dibuatkan code behind untuk halaman ini oleh Visual Studio.
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
23 AJAX
4. Di dalam elemen div, tambahkan sebuah TextBox tanpa tulisan, sebuah Button dengan tulisan
“Set Text” di samping TextBox dan sebuah Label tanpa tulisan di bawah TextBox. Tambahkan
Button1_Click sebagai handle OnClick pada Button. Berikut adalah code yang terdapat pada
elemen div:
<div> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <asp:Button ID="Button1" runat="server" Text="Set Text" OnClick="Button1_Click" /> <br /> <asp:Label ID="Label1" runat="server"></asp:Label> </div>
5. Buka code behind LatihanAjax.aspx, yaitu LatihanAjax.aspx.cs. Tambahkan method
Button1_Click di dalamnya seperti berikut:
protected void Button1_Click(object sender, EventArgs e) { Label1.Text = TextBox1.Text; }
6. Jalankan halaman LatihanAjax.aspx pada browser dengan cara klik kanan LatihanAjax.aspx pada
Solution Explorer, kemudian pilih View in Browser
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
24 AJAX
7. Coba tuliskan suatu kata di text box, kemudian klik tombol “Set Text”. Halaman akan di-postback
ke server dan terjadi reload atau refresh yang ditandai dengan sempatnya muncul “layar putih”
di browser.
8. Pada contoh di atas, kita belum menggunakan kemampuan AJAX. Sekarang kita akan gunakan
AJAX agar dalam memanggil method Button1_Click tidak perlu postback seluruh halaman web ke
server sehingga tidak terjadi refresh. Buka kembali halaman LatihanAjax.aspx.
9. Tambahkan UpdatePanel dan isi UpdatePanel tersebut dengan ContentTemplate. Pindahkan
TextBox, Button serta Label yang sebelumnya ada ke dalam ContentTemplate. Berikut adalah
code pada elemen div setelah langkah ini selesai
<div> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <asp:Button ID="Button1" runat="server" Text="Set Text" OnClick="Button1_Click" /> <br /> <asp:Label ID="Label1" runat="server"></asp:Label> </ContentTemplate> </asp:UpdatePanel> </div>
10. Tambahkan sebuah ScriptManager sebelum UpdatePanel sehingga code LatihanAjax.aspx
menjadi seperti berikut
<div>
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
25 AJAX
<asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <asp:Button ID="Button1" runat="server" Text="Set Text" OnClick="Button1_Click" /> <br /> <asp:Label ID="Label1" runat="server"></asp:Label> </ContentTemplate> </asp:UpdatePanel> </div>
11. Untuk menjalankan LatihanAjax.aspx pada browser, klik kanan LatihanAjax.aspx pada Solution
Explorer kemudian pilih View in Browser
12. Isi TextBox1 dengan suatu tulisan, kemudian klik Button1. Akan muncul tulisan pada Label1
sesuai dengan tulisan yang ada di TextBox1. Dan hebatnya, hal ini terjadi tanpa adanya refresh
pada halaman web.
Penjelasan
Hingga langkah ke-7, halaman LatihanAjax.aspx merupakan halaman website ASP.NET biasa, karena
halaman web tersebut “bersikap” seperti biasa, yaitu terjadi refresh ketika browser melakukan
request ke web server.
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
26 AJAX
Pada langkah ke-9, kita memasukkan semua control yang akan diberikan kemampuan untuk
melakukan request ke web server secara asynchronous ke dalam control UpdatePanel. Dengan
demikian, TextBox1, Button1, serta Label1 memiliki kemampuan AJAX, yaitu melakukan update dan
terupdate tanpa perlu me-refresh seluruh halaman web.
Namun jangan lupa bahwa agar LatihanAjax.aspx diperlakukan secara AJAX, maka perlu
ditambahkan sebuah ScriptManager pada halaman tersebut. ScriptManager ini harus muncul
sebelum adanya UpdatePanel sehingga biasanya memang ditempatkan di awal halaman website.
Dengan adanya ScriptManager serta masuknya control-control ke dalam UpdatePanel, maka
halaman LatihanAjax.aspx sudah diberikan kemampuan AJAX, yaitu melakukan update tanpa perlu
melakukan refresh.
Ada kalanya update yang terjadi di belakang layar butuh waktu lama dan karena halaman web yang
diberikan kemampuan AJAX tidak Nampak untuk refresh, maka sebaiknya pengunjung web perlu
diberitahu bahwa proses update sedang dilakukan. Untuk kebutuhan ini, kita bisa menggunakan
control UpdateProgress.
Ikuti Langkah Berikut
Menggunakan UpdateProgress pada halaman yang memiliki kemampuan AJAX
1. Kita masih akan menggunakan website WebASPNET35 dan menggunakan halaman
LatihanAjax.aspx dalam contoh ini.
2. Pada halaman LatihanAjax.aspx, tambahkan control UpdateProgress di bawah UpdatePanel. Set
properti AssociatedUpdatePanelID menjadi ID dari control UpdatePanel, yaitu UpdatePanel1.
3. Tambahkan sebuah ProgressTemplate di dalam UpdateProgress. Isi ProgressTemplate dengan
tulisan update is in progress…
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1"> <ProgressTemplate> Udpate is in progres... </ProgressTemplate> </asp:UpdateProgress>
4. Buka LatihanAjax.aspx.cs dan panggil method System.Threading.Thread.Sleep(3000) di
dalam method Button1_Click
protected void Button1_Click(object sender, EventArgs e) { Label1.Text = TextBox1.Text; System.Threading.Thread.Sleep(3000); }
5. Jalankan Latihan.aspx pada browser. Ketikkan suatu kata kemudian klik Button1. Tulisan pada
Label1 akan muncul setelah 3 detik.
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
27 AJAX
Penjelasan
Tulisan Update is in progress… muncul karena adanya control UpdateProgress. Properti
AssociatedUpdatePanelID pada control UpdateProgress diisi dengan ID dari UpdatePanel agar
UpdateProgress tersebut tahu UpdatePanel mana yang akan diberitahukan informasinya ketika
sedang melakukan update.
Karena method Button1_Click akan dieksekusi begitu cepat, maka UpdateProgress tidak akan
terlihat dengan jelas. Untuk itu, kita perlu membuat seakan-akan butuh waktu dalam mengeksekusi
method Button1_Click. Kita berikan delay 3 detik di dalam method Button1_Click melalui method
Sleep pada kelas Thread.
Kemudian, setelah mencoba hasilnya, ketika Button1 diklik maka method Button1_Click akan
dipanggil secara asynchronous dan selesai dieksekusi setelah menunggu selama 3 detik. Dengan
demikian, control UpdateProgress sempat memberikan informasi bahwa update sedang dalam
progress dengan menampilkan tulisan Update is in progress…
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
28 Control Baru di ASP.NET
Fitur dan Control Baru di ASP.NET
Framework baru, fitur baru, control baru! Begitulah tentunya harapan kita para web developer
ASP.NET. Dan kali ini kita akan cukup dibuat terkesan dengan fitur dan control yang dimiliki oleh
framework .NET 3.5 dan Visual Studio 2008.
Fitur utama dari framework .NET 3.5 yang sangat bermanfaat untuk membangun suatu website
adalah adanya file bertipe LINQ to SQL Classes yang memiliki ekstensi .dbml. yang merupakan
implementasi dari Object-Relational Mapping (ORM) bagi tabel-tabel relasional yang ada di database
ke kelas-kelas di C# atau VB yang bersifat Object Oriented. Dengan adanya built-in ORM pada
ASP.NET 3.5 dan Visual Studio 2008, kita tidak perlu repot lagi memetakan tabel-tabel di database
menjadi kelas-kelas di C# atau VB.
LINQ to SQL
Sebelum mencoba menggunakan LINQ to SQL Classes, kita telah dahulu apa itu LINQ. LINQ
merupakan singkatan dari Language Integrated Query, yaitu query yang terintegrasi dengan bahasa.
Artinya, kini bahasa pemrograman C# dan VB memiliki fitur baru (dan tentunya syntax baru) untuk
mendukung query ke suatu sumber data.
Sebelum adanya LINQ, kita menuliskan query di dalam suatu argument dari suatu method. Biasanya
query ini kita masukkan ke dalam suatu string.
Contoh
string query = “SELECT * FROM Products WHERE categoryId = 3”; SqlCommand command = new SqlCommand(); command.CommandText = query; … …
Dengan terpisahnya antara query dengan bahasa, maka tentu saja lebih banyak terdapat
kemungkinan runtime error yang bisa saja terjadi karena kesalahan menulis query. Misalnya kata
FROM secara tidak sengaja ditulis FRON. Ketika di-compile, maka compiler akan mengatakan tidak
ada masalah. Hal ini wajar saja karena properti CommandText pada objek command membutuhkan
suatu string query dan variable query bertipe string sehingga tidak ada masalah dalam syntax C#.
Namun ketika dieksekusi, tentunya terjadi runtime error karena kata FRON tidak dikenali dalam
bahasa query (T-SQL atau Transact-SQL).
Akan tetapi, pada .NET 3.5, query merupakan bagian dari bahasa. Dengan bantuan ORM yaitu LINQ
to SQL Classes, kita dapat melakukan query ke sumber data dengan amat sangat mudah dan aman.
Misalnya di database kita memiliki tabel Products dan Categories. Dengan adanya ORM, akan di-
generate kelas Product dan Category yang bersesuaian dengan tabelnya masing-masing di database.
ORM yang kita buat merupakan suatu DataContext yang bisa kita buat objeknya sehingga kita bisa
melakukan query ke database melalui objek DataContext tersebut.
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
29 Control Baru di ASP.NET
Contoh
SuatuDataContext database = new SuatuDataContext(); List<Product> products = from p in database.Products where p.Price > 300 && p.CategoryId == 3 select p;
Pada contoh di atas, kita memiliki ORM yang diberi nama SuatuDataContext dan telah membuat
objek bertipe SuatuDataContext yang diberi nama database. Melalui objek ini, kita dapat mengakses
tabel di database cukup dengan memanggil properti yang bernama sama dengan nama tabel
tersebut, misalnya database.Products atau database.Categories.
Selanjutnya, kita memasukkan hasil query yaitu produk-produk yang harganya lebih dari 300 dan
termasuk dalam kategori bernomor ID 3 ke dalam suatu variable products yang bertipe
List<Product>. Kata from, in, where, dan select kini termasuk dalam syntax C# sehingga
memperkecil kemungkinan untuk error pada runtime karena “salah tulis”.
Contoh lain lagi adalah dengan menggunakan lambda expression seperti berikut:
Contoh
SuatuDataContext database = new SuatuDataContext(); Category aCategory = database.Categories.Single(c => c.Id == 7);
Pada contoh di atas, code c => c.Id == 7 merupakan lambda expression, yang artinya ambil suatu c
bertipe Category di mana Id dari c adalah 7. Melalui method Single, kita mengambil record pertama
yang memenuhi kriteria Id == 7. Karena hanya satu record yang diambil, dan karena diambil melalui
tabel Categories, maka dapat dipastikan record yang terambil adalah bertipe Category sehingga kita
bisa memasukkan langsung ke suatu variable bertipe Category.
Agar lebih memahami, kita coba langsung bagaimana menggunakan DataContext dan melakukan
query ke database melalui DataContext tersebut.
Ikuti Langkah Berikut
Membuat database SQL Server pada suatu website
1. Pertama-tama kita akan membuat sebuah database untuk suatu website. Buka kembali
WebASPNET35 dengan menggunakan Visual Studio 2008
2. Pada Solution Explorer, klik kanan folder App_Data kemudian pilih Add New Item…
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
30 Control Baru di ASP.NET
3. Pilih SQL Server Database sebagai template dan beri nama Belajar.mdf. Klik tombol “Add”
4. Tunggu sejenak sementara Visual Studio 2008 membuat file database SQL Server pada website
Anda. Setelah selesai, Anda akan diantar ke Server Explorer di mana Anda dapat mengakses
Belajar.mdf.
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
31 Control Baru di ASP.NET
5. Pada Server Explorer, klik kanan node Tables, kemudian pilih Add New Table.
6. Isi tabel tersebut dengan kolom Id bertipe int not null dan Name bertipe varchar(50) not null.
7. Buatlah agar kolom Id menjadi primary key dengan klik kanan kolom Id kemudian pilih Set
Primary Key
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
32 Control Baru di ASP.NET
8. Buat juga agar kolom Id merupakan identity sehingga berlaku auto-increment. Caranya yaitu
dengan dalam keadaan kolom Id terpilih, ubah property Is Identity menjadi true melalui window
Column Properties yang berada di bagian bawah tabel. Biarkan isi Identity Increment dan
Identity Seed bernilai 1.
9. Simpan tabel tersebut dengan menekan Ctrl+S kemudian beri nama sebagai Categories. Klik
tombol “OK” untuk menyimpan.
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
33 Control Baru di ASP.NET
10. Buatlah sebuah tabel lagi yang memiliki kolom-kolom sebagai berikut
11. Buatlah kolom Id sebagai primary key dan juga identity agar berlaku auto-increment pada kolom
tersebut
12. Setelah itu, simpan tabel tersebut dengan nama Products
13. Setelah tersimpan, klik kanan di daerah table designer, kemudian pilih Relationships…
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
34 Control Baru di ASP.NET
14. Pada window Foreign Key Relationships, klik tombol “Add”
15. Akan muncul constraint FK_Products_Products di panel Selected Relationships. Pilih constraint
tersebut dengan klik kiri kemudian klik tanda … yang ada pada menu Tables and Columns
Specification
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
35 Control Baru di ASP.NET
16. Kemudian akan muncul window Tables and Columns. Pilih tabel Categories sebagai Primary key
table dan pilih kolom Id di bawahnya. Kemudian, pada Foreign key table, pilih CategoryId sebagai
kolom yang menjadi foreign key. Setelah itu, klik tombol “OK”.
17. Secara otomatis, nama constraint akan berubah menjadi FK_Products_Categories. Klik tombol
“Close” untuk kembali ke table designer.
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
36 Control Baru di ASP.NET
18. Simpan kembali tabel Products dengan menekan Ctrl+S. Akan muncul window yang memberikan
peringatan bahwa ketika menyimpan tabel Products, maka tabel Categories juga terpengaruh.
Window ini berguna untuk memberitahukan kepada kita jika tabel yang hendak kita simpan
memiliki suatu relasi dengan tabel lain. Klik tombol “Yes” untuk menyimpan.
19. Selanjutnya, klik kanan pada node Stored Procedure, kemudian pilih Add New Stored Procedure
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
37 Control Baru di ASP.NET
20. Ketikkan code berikut sebagai isi stored procedure
CREATE PROCEDURE GetProductByCategory ( @CategoryId INT ) AS SELECT * FROM Products WHERE CategoryId = @CategoryId
21. Simpan stored procedure tersebut dengan Ctrl+S
22. Anda telah selesai membuat database dengan dua buah tabel yang memiliki sebuah relasi serta
sebuah stored procedure.
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
38 Control Baru di ASP.NET
Penjelasan
Sampai tahap ini, belum ada fitur baru di ASP.NET 3.5 dan Visual Studio 2008 yang digunakan.
Kemampuan membuat dan mengolah database sudah ada sejak Visual Studio versi-versi
sebelumnya. Anda telah menambahkan sebuah tabel dan membuat kolom menjadi primary key
serta merupakan identity, sehingga ketika terjadi penambahan record ke tabel tersebut, kolom Id
akan otomatis diisi dengan auto-increment. Anda juga telah membuat sebuah stored procedure
yang Berfungsi untuk mengambil record dengan Id tertentu dari tabel Products.
Selanjutnya kita akan mengisi data ke tabel Categories dan tabel Products.
Ikuti Langkah Berikut
Mengolah data pada database SQL Server
1. Masih dalam website yang sama, buka kembali Server Explorer. Klik kanan tabel Categories yang
berada di node Tables, kemudian pilih Show Table Data
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
39 Control Baru di ASP.NET
2. Isi tabel Categories dengan dua record seperti berikut (Anda tidak perlu mengisi kolom Id karena
akan diisi secara otomatis oleh SQL Server)
3. Kemudian isi tabel Products dengan lima record seperti berikut
Penjelasan
Sampai tahap ini juga masih belum menggunakan fitur baru pada .NET 3.5 dan Visual Studio 2008.
Tapi jangan khawatir, karena dua tahap di atas memang kita perlukan untuk mempraktekkan fitur
LINQ dan penggunaan DataContext.
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
40 Control Baru di ASP.NET
Pada tahap ini, Anda memasukkan beberapa record ke database Belajar.mdf untuk kemudian akan
kita gunakan dalam belajar LINQ pada ASP.NET 3.5. Untuk kolom yang bertipe identity, Anda tidak
perlu memasukkan nilai apapun karena SQL Server secara otomatis akan mengisikan nilai yang
sesuai. Ketika men-design tabel Categories dan Products, Anda menentukan bahwa Identity Seed
bernilai 1. Artinya, nilai awal untuk kolom ini adalah 1. Anda juga menentukan bahwa nilai Identity
Increment bernilai 1. Artinya, setiap ada record baru yang ditambahkan, maka nilai kolom tersebut
bertambah 1. Jika Anda menentukan Identity Seed bernilai 3 dan Identity Increment bernilai 2, maka
record pertama akan bernilai 3, record ke-2 bernilai 5, record ke-3 bernilai 7, dan seterusnya.
Selanjutnya kita akan membuat ORM agar memudahkan kita dalam mengakses database. ORM ini
juga memungkinkan kita memperlakukan data yang ada di database dengan menggunakan konsep
Object Oriented Programming sehingga seakan-akan data yang ada di database merupakan
kumpulan objek-objek.
Ikuti Langkah Berikut
Membuat suatu DataContext sebagai ORM
1. Buka kembali WebASPNET35.
2. Pada Solution Explorer, klik kanan root dari website kemudian pilih Add New Item…
3. Pilih template LINQ to SQL Classes dan beri nama file tersebut sebagai Belajar.dbml. Klik tombol
“Add” untuk membuat DataContext bernama Belajar.dbml
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
41 Control Baru di ASP.NET
4. Akan muncul window peringatan bahwa sebaiknya code C# disimpan dalam folder khusus
bernama App_Code. Klik tombol Yes untuk otomatis membuat folder App_Code dan
menempatkan Belajar.dbml di dalam folder tersebut.
5. Setelah menunggu beberapa saat, file Belajar.dbml otomatis dibuka oleh Visual Studio sebagai
sebuah design surface. Nah, Anda bisa drag-and-drop tabel dan stored procedure yang ada di
database ke design surface ini.
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
42 Control Baru di ASP.NET
6. Buka Server Explorer, kemudian drag-and-drop tabel Categories dan Products yang ada di
database ke Belajar.dbml panel yang sebelah kiri.
7. Setelah kedua tabel ditambahkan, simpan Belajar.dbml dengan Ctrl+S. Tampilan design surface
Belajar.dbml akan tampak seperti berikut
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
43 Control Baru di ASP.NET
8. Anda telah membuat mapping antara tabel Categories dan Products pada database menjadi
kelas Category dan kelas Product
9. Sekarang drag-and-drop stored procedure GetProductById ke panel bagian kanan
10. Simpan kembali Belajar.dbml. Tampilan design surface akan tampak seperti berikut
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
44 Control Baru di ASP.NET
11. Anda telah membuat mapping antara stored procedure yang ada di database menjadi sebuah
method pada DataContext Belajar.dbml.
Penjelasan
Dengan bantuan Visual Studio 2008, Anda telah membuat mapping antara komponen-komponen
yang ada di database yaitu tabel dan stored procedure dengan representasi kelas dan method pada
sebuah DataContext. Membuat DataContext dan melakukan mapping ini sangat mudah, yaitu
dengan membuat sebuah LINQ to SQL Classes (yang berekstensi .dbml) pada folder App_Code dan
melakukan drag-and-drop tabel serta stored procedure yang ada di database ke dalam DataContext
tersebut.
Perhatikan bahwa constraint yang ada pada database juga diberlakukan di dunia Object Oriented.
Yaitu, bahwa terdapat hubungan antara kelas Category dengan kelas Product. Selain itu, secara
otomatis method GetProductById membutuhkan sebuah argument bertipe integer (System.Int32)
karena pada stored procedure GetProductById juga dibutuhkan sebuah argument berupa integer
(INT).
Selanjutnya kita akan memanfaatkan DataContext yang telah kita buat serta menggunakan query
dalam bahasa C# untuk melakukan query ke database melalui DataContext tersebut.
Ikuti Langkah Berikut
Menggunakan LINQ pada DataContext untuk ambil data
1. Kita sudah Menyiapkan sebuah DataContext bernama Belajar.dbml. Sudah saatnya
menggunakan DataContext ini untuk melakukan query ke database. Secara otomatis, kita akan
dibuatkan kelas bernama BelajarDataContext untuk kemudian membuat objek DataContext
tersebut. Buka kembali WebASPNET35 dan tambahkan sebuah halaman website baru (berikut
code behind-nya) dengan nama BelajarLinq.aspx (dan tentunya BelajarLinq.aspx.cs)
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
45 Control Baru di ASP.NET
2. Tuliskan code berikut pada halaman BelajarLinq.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="BelajarLinq.aspx.cs" Inherits="BelajarLinq" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Untitled Page</title> </head> <body> <form id="form1" runat="server"> <div> <h3>Daftar Semua Product</h3> <asp:Literal ID="LiteralResult" runat="server"></asp:Literal> </div> </form> </body> </html>
3. Tuliskan code berikut pada BelajarLinq.aspx.cs
using System; using System.Linq; using System.Web.UI; public partial class BelajarLinq : Page { BelajarDataContext database = new BelajarDataContext(); protected void Page_Load(object sender, EventArgs e) { GetAllProducts(); } private void GetAllProducts() { var products = from p in database.Products select p; string result = ""; foreach (Product aProduct in products) { result += "ID: " + aProduct.Id + ", "; result += "Name: " + aProduct.Name + ", "; result += "Price: " + aProduct.Price + "."; result += "<br />"; } LiteralResult.Text = result; } }
4. Jalankan halaman BelajarLinq.aspx pada browser. Berikut adalah hasilnya
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
46 Control Baru di ASP.NET
Penjelasan
Secara otomatis, setelah membuat file LINQ to SQL Classes, Visual Studio 2008 akan membuatkan
kelas [NamaFile]DataContext pada file tersebut sehingga kita bisa membuat objek DataContext
tersebut untuk kemudian mengakses sumber data melalui DataContext tersebut. Jika nama file yang
kita buat adalah Belajar.dbml, maka kelas DataContext yang dibuat adalah BelajarDataContext.
Pada halaman Default.aspx, Anda hanya Menyiapkan sebuah control Literal yang tulisannya diisi
melalui code behind. Pada code behind, Anda membuat method GetAllProducts di mana terdapat
variable products bertipe var yang diisi dengan semua record pada tabel Products. Variable bertipe
var baru ada di .NET 3.5. Tipe ini berfungsi untuk memberikan tipe data secara implisit kepada
variable tersebut. Namun berbeda dengan JavaScript, karena variable bertipe var bukan berarti
variable yang bebas diisi dengan nilai apa saja. Di .NET 3.5 variable bertipe var memang bebas diisi
dengan nilai atau tipe data apa saja akan tetapi hanya berlaku ketika pertama kali. Setelah variable
tersebut diisi dengan nilai, maka kita tidak bisa mengisi variable tersebut dengan nilai dari tipe data
lainnya.
Kemudian untuk setiap Product, kita mengisi variable result yang bertipe string untuk kemudian
dijadikan sebagai teks pada control Literal.
Method ini GetAllProducts dipanggil di dalam Page_Load sehingga ketika halaman ini di-load di
browser, method GetAllProducts akan langsung dipanggil.
Selanjutnya kita akan menggunakan method GetProductByCategory untuk mengambil sebuah
Product berdasarkan nilai CategoryId yang dimilikinya.
Ikuti Langkah Berikut
Menggunakan method pada DataContext yang dihasilkan melalui stored
procedure
1. Ubah halaman BelajarLinq.aspx sehingga berisi code berikut
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="BelajarLinq.aspx.cs" Inherits="BelajarLinq" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Untitled Page</title>
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
47 Control Baru di ASP.NET
</head> <body> <form id="form1" runat="server"> <div> <h3>Daftar Semua Product</h3> <asp:Literal ID="LiteralResult" runat="server"></asp:Literal> <hr /> <h3> Semua Product di Category <asp:Label runat="server" ID="LabelCategoryName"></asp:Label> </h3> Category ID: <asp:TextBox ID="TextBoxCategoryId" runat="server"></asp:TextBox> <asp:Button ID="ButtonGetProduct" runat="server" Text="Get Products" OnClick="ButtonGetProduct_Click" /> <br /><br /> <asp:Literal ID="LiteralProductsByCategory" runat="server"></asp:Literal> </div> </form> </body> </html>
2. Ubah code behind halaman tersebut menjadi seperti berikut
using System; using System.Linq; using System.Web.UI; public partial class BelajarLinq : Page { BelajarDataContext database = new BelajarDataContext(); protected void Page_Load(object sender, EventArgs e) { GetAllProducts(); GetProductsFromCategory(2); } private void GetAllProducts() { var products = from p in database.Products select p; string result = ""; foreach (Product aProduct in products) { result += "ID: " + aProduct.Id + ", "; result += "Name: " + aProduct.Name + ", "; result += "Price: " + aProduct.Price + "."; result += "<br />"; } LiteralResult.Text = result; } private void GetProductsFromCategory(int categoryID) {
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
48 Control Baru di ASP.NET
if (database.Categories.Any(category => category.Id == categoryID)) { Category aCategory = database.Categories.Single(c => c.Id == categoryID); LabelCategoryName.Text = aCategory.Name; var products = database.GetProductByCategory(categoryID); string result = ""; foreach (GetProductByCategoryResult aProduct in products) { result += "ID: " + aProduct.Id + ", "; result += "Name: " + aProduct.Name + ", "; result += "Price: " + aProduct.Price + "."; result += "<br />"; } LiteralProductsByCategory.Text = result; } else { LabelCategoryName.Text = "with id " + categoryID; LiteralProductsByCategory.Text = "There is no category with id " + categoryID; } } protected void ButtonGetProduct_Click(object sender, EventArgs e) { GetProductsFromCategory(int.Parse(TextBoxCategoryId.Text)); } }
3. Jalankan halaman BelajarLinq.aspx pada browser
4. Pada awalnya, product-product yang tampil di bagian bawah adalah product yang berada di
category dengan id 2
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
49 Control Baru di ASP.NET
5. Masukkanlah angka 1 pada TextBoxCategoryId, kemudian klik tombol “Get Products”. Hasilnya,
product yang ditampilkan merupakan product- product yang berada di category dengan id 1
6. Masukkanlah angka lain yang lebih dari 2, misalnya 7, kemudian klik tombol “Get Products”.
Hasilnya, LabelCategoryName berubah dan isi LiteralProductsByCategory menjadi “Result is
empty”
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
50 Control Baru di ASP.NET
Penjelasan
Anda telah membuat sebuah Label, TextBox, Button dan Literal baru yang akan digunakan untuk
menampilkan informasi product yang diambil berdasarkan nilai CategoryId-nya.
Anda juga telah menyiapkan method GetProductsFromCategory yang membutuhkan argument
bertipe integer. Argument ini nantinya akan digunakan dalam memanggil method
GetProductByCategory yang berada pada DataContext. Pada bagian awal method ini, diperiksa
terlebih dahulu apakah ada category dengan id yang diambil dari parameter categoryID. Jika tidak
ada maka berikan informasi bahwa tidak ada product di dalam category tersebut. Jika ada, maka
ambil category tersebut dan ubah LabelCategoryName menjadi nama category tersebut, kemudian
panggil method GetProductByCategory dengan isi parameter categoryID adalah nilai yang diambil
dari argument categoryID. Untuk setiap record yang didapat, kumpulkan ke dalam sebuah variable
result, kemudian set tulisan LiteralProductsByCategory menjadi result.
LinqDataSource
Control ini berhubungan erat dengan framework LINQ pada ASP.NET 3.5. Dengan menggunakan
control ini, Anda dapat mengambil dan mengolah data pada suatu sumber data melalui suatu
halaman website dengan memanfaatkan kemudahan yang ditawarkan LINQ.
Ikuti Langkah Berikut
Menambahkan LinqDataSource pada suatu halaman website
1. Buka WebASPNET35 dengan menggunakan Visual Studio 2008
2. Buat sebuah halaman baru bernama ManageProducts.aspx berikut code behind-nya
3. Buka ManageProducts.aspx dalam mode Design View
4. Drag-and-drop control LinqDataSource dari Toolbox ke halaman ManageProducts.aspx
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
51 Control Baru di ASP.NET
5. Setelah itu, masih dalam mode Design View, klik tanda smart tag di bagian kanan atas
LinqDataSource untuk melakukan konfigurasi lebih lanjut terhadap LinqDataSource ini
6. Akan muncul menu untuk melakukan konfigurasi pada LinqDataSource. Klik Configure Data
Source…
7. Akan muncul window “Configure Data Source”
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
52 Control Baru di ASP.NET
8. Pada window di atas, pilih BelajarDataContext sebagai objek DataContext kemudian klik “Next”
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
53 Control Baru di ASP.NET
9. Pilih Products sebagai Table, CategoryId sebagai GroupBy, key sebagai OrderGroupBy. Setelah
itu, klik tombol “Advanced…”
10. Akan muncul window “Advanced Options”. Tandai semua check box agar LinqDataSource yang
kita buat dapat melakukan fungsi delete, insert dan update secara otomatis. Klik tombol “OK”
untuk kembali ke window “Configure Data Source”
11. Klik tombol “Finish”
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
54 Control Baru di ASP.NET
12. Sekarang Anda telah membuat LinqDataSource yang selain dapat mengambil data, dapat juga
melakukan delete, insert, dan update data (tentunya ke tabel Products)
13. Beralihlah ke Source View untuk melihat code yang degenerate oleh Visual Studio untuk control
LinqDataSource yang baru saja Anda buat. Cocokkanlah dengan code berikut
<asp:LinqDataSource ID="LinqDataSource1" runat="server" ContextTypeName="BelajarDataContext" EnableDelete="True" EnableInsert="True" EnableUpdate="True" TableName="Products"> </asp:LinqDataSource>
Penjelasan
Pada contoh di atas, Anda telah membuat sebuah LinqDataSource yang sumber datanya diperoleh
dari DataContext yang telah Anda buat, yaitu BelajarDataContext. Setelah itu, Anda pilih tabel
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
55 Control Baru di ASP.NET
Products dan mengambil semua kolom pada tabel tersebut. Anda juga menentukan bahwa
LinqDataSource ini dapat melakukan fungsi insert, delete dan update.
Walaupun Anda sudah membuat sebuah LinqDataSource, Anda belum dapat melihat hasil tampilan
semua product yang ada di database pada halaman website Anda. Karena, LinqDataSource hanyalah
penghubung antara DataContext dengan control yang akan menggunakannya untuk menampilkan
data. Dengan demikian, Anda membutuhkan control yang berfungsi untuk menampilkan data.
Pada sub-bab selanjutnya, kita akan mempelajari control ListView untuk menampilkan data yang
diperoleh dari LinqDataSource yang baru saja Anda buat.
ListView
Control yang baru muncul pada ASP.NET 3.5 ini ditujukan untuk menampilkan dan mengolah data,
mirip dengan GridView, DataList, serta Repeater yang sudah muncul sejak framework versi
sebelumnya. ListView memungkinkan kita untuk mengikat data dari suatu sumber data dan
menampilkannya, baik sekaligus maupun dalam halaman yang berbeda.
ListView menampilkan data dalam format dan layout yang Anda tentukan dalam suatu template dan
style. ListView berguna untuk menampilkan data dalam struktur perulangan, seperti halnya DataList
dan Repeater. Keuntungan yang ada pada ListView adalah Anda bisa mengatur tampilan data
sefleksibel mungkin dan dapat menambahkan fitur update, delete, insert, sort serta paging data.
Semua fungsi tersebut dapat dilakukan tanpa perlu repot menuliskan code di code behind.
Untuk lebih jelasnya, perhatikan contoh di bawah ini
Ikuti Langkah Berikut
Menampilkan dan mengolah data dengan menggunakan ListView
1. Buka kembali ManageProducts.aspx
2. Melalui Source View, gantilah ID dari LinqDataSource Anda menjadi LinqDataSourceProducts
agar lebih representative
<asp:LinqDataSource ID="LinqDataSourceProducts" runat="server" ContextTypeName="BelajarDataContext" EnableDelete="True" EnableInsert="True" EnableUpdate="True" TableName="Products"> </asp:LinqDataSource>
3. Kemudian tambahkan code berikut setelah LinqDataSourceProducts
<asp:ListView ID="ListViewProducts" runat="server" DataKeyNames="Id" DataSourceID="LinqDataSourceProducts" InsertItemPosition="LastItem"> <LayoutTemplate> <div id="itemPlaceholder" runat="server"></div> </LayoutTemplate> <ItemTemplate> <div style="background-color:Lime"> Id: <asp:Label ID="IdLabel" runat="server" Text='<%# Eval("Id") %>' /> <br />
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
56 Control Baru di ASP.NET
Name: <asp:Label ID="NameLabel" runat="server" Text='<%# Eval("Name") %>' /> <br /> Price: <asp:Label ID="PriceLabel" runat="server" Text='<%# Eval("Price") %>' /> <br /> Category: <asp:Label ID="CategoryLabel" runat="server" Text='<%# Eval("Category.Name") %>' /> <br /> <asp:Button ID="EditButton" runat="server" CommandName="Edit" Text="Edit" /> <asp:Button ID="SelectButton" runat="server" CommandName="Select" Text="Select" /> </div> </ItemTemplate> <ItemSeparatorTemplate> <hr /> </ItemSeparatorTemplate> <AlternatingItemTemplate> <div style="background-color:Aqua"> Id: <asp:Label ID="IdLabel" runat="server" Text='<%# Eval("Id") %>' /> <br /> Name: <asp:Label ID="NameLabel" runat="server" Text='<%# Eval("Name") %>' /> <br /> Price: <asp:Label ID="PriceLabel" runat="server" Text='<%# Eval("Price") %>' /> <br /> Category: <asp:Label ID="CategoryLabel" runat="server" Text='<%# Eval("Category.Name") %>' /> <br /> <asp:Button ID="EditButton" runat="server" CommandName="Edit" Text="Edit" /> <asp:Button ID="SelectButton" runat="server" CommandName="Select" Text="Select" /> </li> </div> </AlternatingItemTemplate> <InsertItemTemplate> <div style="background-color:Silver"> Name: <asp:TextBox ID="NameTextBox" runat="server" Text='<%# Bind("Name") %>' /> <br /> Price: <asp:TextBox ID="PriceTextBox" runat="server" Text='<%# Bind("Price") %>' /> <br /> CategoryId: <asp:TextBox ID="CategoryIdTextBox" runat="server" Text='<%# Bind("CategoryId") %>' /> <br /> <asp:Button ID="InsertButton" runat="server" CommandName="Insert" Text="Insert" />
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
57 Control Baru di ASP.NET
<asp:Button ID="CancelButton" runat="server" CommandName="Cancel" Text="Clear" /> </div> </InsertItemTemplate> <SelectedItemTemplate> <div style="background-color:Yellow"> Id: <asp:Label ID="IdLabel" runat="server" Text='<%# Eval("Id") %>' /> <br /> Name: <asp:Label ID="NameLabel" runat="server" Text='<%# Eval("Name") %>' /> <br /> Price: <asp:Label ID="PriceLabel" runat="server" Text='<%# Eval("Price") %>' /> <br /> Category: <asp:Label ID="CategoryLabel" runat="server" Text='<%# Eval("Category.Name") %>' /> <br /> <asp:Button ID="EditButton" runat="server" CommandName="Edit" Text="Edit" /> <asp:Button ID="DeleteButton" runat="server" CommandName="Delete" Text="Delete" /> </div> </SelectedItemTemplate> <EmptyDataTemplate> No data was returned. </EmptyDataTemplate> <EditItemTemplate> <div style="background-color:Yellow"> Id: <asp:Label ID="IdLabel1" runat="server" Text='<%# Eval("Id") %>'></asp:Label> <br /> Name: <asp:TextBox ID="NameTextBox" runat="server" Text='<%# Bind("Name") %>'></asp:TextBox> <br /> Price: <asp:TextBox ID="PriceTextBox" runat="server" Text='<%# Bind("Price") %>'></asp:TextBox> <br /> CategoryId: <asp:TextBox ID="CategoryIdTextBox" runat="server" Text='<%# Bind("CategoryId") %>'></asp:TextBox> <br /> <asp:Button ID="UpdateButton" runat="server" CommandName="Update" Text="Update" /> <asp:Button ID="CancelButton" runat="server" CommandName="Cancel" Text="Cancel" /> </div> </EditItemTemplate> </asp:ListView>
4. Tanpa mengubah code apapun di code behind, Anda telah membuat ListView yang memiliki
fungsi insert, delete, dan update. Jalankan halaman ManageProducts.aspx pada browser.
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
58 Control Baru di ASP.NET
Cobalah untuk menghapus, menambah dan mengubah data product. Jangan lupa bahwa kita
hanya memiliki dua category, yaitu Foods yang memiliki id 1 dan Drinks yang memiliki id 2
Penjelasan
Pada langkah ke-3, Anda membuat ListView dengan sumber data LinqDataSourceProducts. Seperti
yang telah kita ketahui bahwa pada contoh sebelumnya kita menentukan bahwa LinqDataSource
product mengambil semua record pada tabel Products di database Belajar.mdf. Anda juga telah
menentukan bahwa isi properti DataKeyNames pada ListView ini adalah Id, yaitu kolom yang
menjadi primary key dari tabel Products. Agar dapat melakukan insert, kita tentukan posisi
InsertItemTemplate melalui properti InsertItemPosition, apakah di bagian atas ListView atau di
bagian bawah ListView. Pada contoh di atas, kita mengisi properti InsertItemPosition dengan nilai
LastItem.
Kemudian, di dalam ListView, kita mendefinisikan template-template yang akan kita gunakan untuk
kepentingan tampilan, insert, update, dan delete.
Sebagai penentu bentuk layout tampilan secara umum, kita menggunakan LayoutTemplate. Di
dalam LayoutTemplate kita membuat sebuah elemen div sebagai placeholder bagi setiap record
yang didapat dari DataContext. Elemen div ini diberikan id itemPlaceHolder.
Kemudian kita membuat ItemTemplate dan AlternatingItemTemplate sebagai tampilan untuk item-
item yang ditampilkan dalam keadaan normal. AlternatingItemTemplate menjadi template untuk
item yang berada di posisi genap, yaitu 2, 4, 6 dan seterusnya. Jika tidak ada
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
59 Control Baru di ASP.NET
AlternatingItemTemplate, maka tampilan item yang berada di posisi genap mengikuti tampilan yang
didefinisikan di ItemTemplate. Kita juga membuat ItemSeparatorTemplate sebagai pemisah antar
item yang ditampilkan.
Pada ItemTemplate dan AlternatingItemTemplate kita membuat dua buah Button. Button pertama
diberi CommandName Edit, sedangkan Button yang ke dua diberi CommandName Select. Secara
otomatis, CommandName ini dikenali oleh ListView untuk melakukan aksi selanjutnya.
CommandName Edit akan membawa item tersebut ke tampilan yang didefinisikan oleh
EditItemTemplate. CommandName Select akan membawa item tersebut ke tampilan yang
didefinisikan oleh SelectedItemTemplate.
Selanjutnya, kita membuat InsertItemTemplate sebagai tampilan untuk menambahkan item baru.
Sesuai dengan properti InsertItemPosition yang diset pada control ListView, InsertItemTemplate ini
akan berada pada bagian bawah ListView.
Pada InsertItemTemplate, kita juga membuat dua buah Button, kali ini dengan CommandName
Insert dan Cancel. Button dengan CommandName Insert akan otomatis membuat ListView
menghubungi LinqDataSource untuk melakukan insert record baru yang didapat dari
InsertItemTemplate ke tabel Products di database. Di sisi lain, Button dengan CommandName
Cancel membatalkan aksi insert. Dalam hal ini, tulisan yang kita tulis di TextBox pada
InsertItemTemplate akan dihapus.
Pada SelectedItemTemplate, kita mendefinisikan bentuk tampilan ketika sebuah item dipilih melalui
Button dengan CommandName Select yang tadi telah kita buat di ItemTemplate dan
AlternatingItemTemplate.
Dua buah Button juga kita buat pada SelectedItemTemplate. Button pertama memiliki
CommandName Edit, yang jika diklik akan membawa item ini ke tampilan yang didefinisikan oleh
EditItemTemplate. Button ke dua memiliki CommandName Delete, yang jika diklik, ListView akan
secara otomatis menghubungi LinqDataSource untuk menghapus item terpilih dari tabel Products di
database.
EmptyDataTemplate akan tampil ketika tidak ada record yang diperoleh melalui LinqDataSource.
Biasanya pada template ini kita memberikan informasi bahwa tidak ada data untuk ditampilkan.
Yang terakhir, yaitu EditItemTemplate, didefinisikan bentuk tampilan ketika sebuah item berada
dalam edit mode karena Button dengan CommandName Edit diklik pada item tersebut. Pada
template ini kita mendefinisikan dua buah Button. Button pertama memiliki CommandName Update
yang jika diklik, ListView akan secara otomatis menghubungi LinqDataSource untuk melakukan
update terhadap record terpilih pada tabel Products di database. Button yang ke dua memiliki
CommandName Cancel yang membatalkan mode edit pada suatu item dang mengembalikannya ke
bentuk normal.
Selanjutnya kita akan membuat ListView kita dapat melakukan paging dengan bantuan control
DataPager.
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
60 Control Baru di ASP.NET
DataPager
DataPager merupakan control yang dapat menyediakan fungsi paging bagi data-bound control yang
meng-implement interface IPageableItemContainer. Sampai saat ini, control data-bound yang meng-
implement IPageableItemContainer adalah ListView sehingga kita hanya bisa menggunakan
DataPager pada ListView.
Di dalam control DataPager, kita dapat menentukan bentuk pager field dengan menggunakan salah
satu di antara tiga tipe field berikut:
1. NextPreviousPagerField. Memungkinkan pengunjung web berpindah ke satu halaman ke
halaman berikutnya atau halaman sebelumnya. Pengunjung web juga dapat langsung
berpindah ke halaman pertama atau ke halaman terakhir.
2. NumericPagerField. Memungkinkan pengunjung web untuk berpindah ke suatu halaman
dengan mengklik langsung nomor halaman yang ingin dikunjungi.
3. TemplatePagerField. Memungkinkan developer untuk membuat pager field secara bebas.
Kita hanya akan menggunakan NextPreviousPagerField dan NumericPagerField dalam contoh
berikut ini.
Ikuti Langkah Berikut
Menambahkan DataPager ke suatu ListView
1. Buka kembali ManageProducts.aspx. Gunakan mode Source View.
2. Tambahkan code berikut di dalam LayoutTemplate pada ListViewProducts, dan tempatkan di
bawah elemen div yang memiliki id itemPlaceHolder.
<asp:DataPager ID="DataPagerProducts" runat="server" PageSize="2"> <Fields> <asp:NextPreviousPagerField ButtonType="Link" ShowFirstPageButton="True" ShowNextPageButton="false" ShowPreviousPageButton="false" ShowLastPageButton="False" /> <asp:NumericPagerField ButtonCount="10" /> <asp:NextPreviousPagerField ButtonType="Link" ShowFirstPageButton="False" ShowNextPageButton="false" ShowPreviousPageButton="false" ShowLastPageButton="True" /> </Fields> </asp:DataPager>
3. Simpan ManageProducts.aspx dan lihat hasilnya pada browser
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
61 Control Baru di ASP.NET
Penjelasan
Terdapat dua cara untuk menggunakan DataPager yang ditujukan pada suatu ListView. Cara yang
pertama adalah menempatkan DataPager tersebut di dalam ListView tersebut, tepatnya di dalam
LayoutTemplate. Cara yang ke-2 adalah menempatkan DataPager tersebut di luar ListView, misalnya
di bawah ListView, namun dengan cara ini kita harus memberikan informasi ListView mana yang
dituju oleh DataPager tersebut. Berikan ID dari ListView untuk diisikan pada properti PagedControlID
pada DataPager.
DataPager yang kita buat memiliki properti PageSize yang diisi dengan nilai 2. Artinya, pada ListView
yang dituju, setiap halaman hanya akan tampil dua item. Karena pada contoh ini ada 5 record di
tabel Products di database, maka terdapat 3 halaman pada ListViewProducts.
Pada contoh di atas, kite menggunakan cara yang pertama, yaitu menempatkan control DataPager di
dalam ListView. Pada DataPager yang kita buat, kita menggunakan tiga buah pager field. Pager field
pertama bertipe NextPreviousPagerField. Pada pager field yang pertama ini kita hanya menampilkan
tombol halaman pertama dengan mengisi nilai true pada properti ShowFirstPageButton dan mengisi
nilai false untuk tombol-tombol lainnya. Tombol halaman pertama ini jika diklik akan menampilkan
halaman pertama. Pada pager field yang ke dua, kite menggunakan tipe NumericPagerField. Kita
mengisi nilai 10 pada properti ButtonCount. Artinya, hanya 10 link yang tampil pada field ini. Jika ada
halaman ke-11 dan seterusnya, maka otomatis pager field ini akan menampilkan link dengan tulisan
“…” yang jika diklik baru menampilkan link halaman 11 dan seterusnya. Pada pager field terakhir kita
menggunakan tipe yang sama dengan pager field yang pertama, yaitu NextPreviousPagerField.
Hanya saja, kali ini kita hanya menampilkan tombol halaman terakhir dengan mengisi properti
ShowFirstPageButton dengan nilai true sedangkan tombol-tombol lainnya tidak ditampilkan.
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
62 Control Baru di ASP.NET
Sampai pada tahap ini, kita telah mempelajari beberapa fitur dan control baru di ASP.NET 3.5, mulai
dari menggunakan AJAX pada suatu halaman web, memanfaatkan fungsionalitas LINQ,
menggunakan LinqDataSource, ListView serta DataPager yang sangat powerful untuk kemudahan
web developer dalam membuat halaman web yang mampu mengakses database (baik menampilkan
data maupun mengolah data) dengan jumlah code yang sangat sedikit sehingga menghemat waktu
dan tenaga.
Pada bab selanjutnya, kita akan sedikit berpindah ke “dunia lain”, yaitu Silverlight, yang juga
merupakan teknologi yang masih fresh-from-the-oven.
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
63 Silverlight
Silverlight
Apakah Silverlight?
Microsoft® Silverlight™ adalah sebuah plug-in antar browser, antar platform untuk memberikan
generasi selanjutnya dari media dan aplikasi interaktif untuk situs web berbasis .Net. Silverlight
menawarkan model programming yang sangat fleksibel, yang mendukung AJAX, Visual Basic, Visual
C#, Python, dan Ruby, dan integrasi dengan aplikasi berbasis web yang sudah ada. Silverlight
menghadirkan penyampaian yang cepat dan cost effective untuk video berkualitas tinggi kepada
semua browser besar yang berjalan pada Mac OS maupun Windows.
Mengapa Silverlight?
Pengalaman user antar platform yang sangat menjanjikan seperti :
Menghadirkan pengalaman media dan aplikasi kaya interaktif untuk website yang
mengintegrasikan video, animasi, interaktivitas, dan interface yang sangat menarik.
Seamless, proses instalasi yang cepat untuk user, terima kasih kepada plug-in easy-to-install
yang berukuran di bawah 2 megabytes dan dapat bekerja pada semua browser-browser
ternama.
Experiences yang konsisten antara komputer berbasis Windows dan komputer Macintosh
tanpa ada instalasi - instalasi tambahan.
Grafik berbasis Vektor, Media, Text, Animasi, dan lapisan yang mendukung integrasi
sempurna dari grafik dan efek-efek ke semua aplikasi web yang sudah ada.
Memperkaya aplikasi berbasis AJAX atau standard dengan grafik dan media yang lebih baik,
dan memperbaiki performa dan kapabilitas mereka dengan menggunakan Silverlight.
Menghadirkan Silverlight pada website Anda
Setelah Anda selesai men-download dan menginstal plug in Silverlight di atas, langkah selanjutnya
adalah membuat 4 buah file dasar.
Ikuti Langkah Berikut
Membuat content Silverlight pada halaman website
1. Download file JavaScript yang bernama Silverlight.js untuk dapat membuat content Silverlight
2. Buatlah file kosong yang bernama createSilverlight.js yang berisi fungsi
createMySilverlightPlugin()
3. Buatlah sebuah file html untuk dapat menampung dan menjalankan dan selipkan referensi pada
bagian <head> untuk kedua file tersebut. Beri nama file tersebut sebagai belajar.html. Isilah
belajar.html dengan code berikut:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
64 Silverlight
<title>Silverlight Tes</title> <script type="text/javascript" src="Silverlight.js"></script> <script type="text/javascript" src="createSilverlight.js"></script> </head> <body> </body> </html>
4. Jika sudah, buatlah tempat untuk Silverlight pada elemen halaman html dengan memasukkan 3
baris berikut di dalam tag <body>:
<!—Tempat Silverlight akan berjalan -- > <div id="mySilverlightPluginHost"> </div>
5. Setelah itu kita akan membuat inisialisasi dari file JavaScript di atas, di dalam elemen div yang
baru saja kita buat. Dengan memasukkan code sebagai berikut :
<script type="text/javascript"> // Mengambil element div yang sudah kita buat diatas var parentElement = document.getElementById("mySilverlightPluginHost"); // Fungsi berikut adalah untuk membuat plug-in silverlight createMySilverlightPlugin(); </script>
6. Jika sudah, maka isi code pada belajar.html adalah sebagai berikut:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Silverlight Tes</title> <script type="text/javascript" src="Silverlight.js"></script> <script type="text/javascript" src="createSilverlight.js"></script> </head> <body> <!—Tempat Silverlight akan berjalan -- > <div id= "mySilverlightPluginHost"> </div> <script type="text/javascript"> // Mengambil element div yang sudah kita buat diatas var parentElement = document.getElementById("mySilverlightPluginHost"); // Fungsi berikut adalah untuk membuat plug-in silverlight createMySilverlightPlugin(); </script> </body>
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
65 Silverlight
</html>
7. Buka file createSilverlight.js yang telah Anda buat pada langkah ke-2 dan masukkan fungsi
berikut:
function createMySilverlightPlugin() { Silverlight.createObject ( "myxaml.xaml", // Source XAML yang akan di tampilkan parentElement, // Referensi DOM ke <div> tempat Silverlight "mySilverlightPlugin", // Plugin ID { width:'300', // Lebar dari segi empat yang akan dibuat height:'300', // Tinggi dari segi empat yang akan dibuat inplaceInstallPrompt:false, // menampilkan prompt instal atau tidak background:'#000000', // Warna background isWindowless:false, // Menampilkan pada mode window atau tidak framerate:'24', // Berapa frame per detik version:'1.0' // Versi Silverlight yang digunakan }, { onError:null, // Isi property onError onLoad:null // Isi property onLoad }, null ); }
8. Terakhir adalah buatlah file myxaml.xaml sebagai source untuk tampilan, gantilah nama file ini
jika Anda mengganti nama nya pada langkah sebelumnya.
9. Setelah itu Anda dapat membuka belajar.html pada browser dan akan tampil sebuah kotak
berwarna hitam. Yang berarti kita siap untuk mulai berkreasi!
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
66 Silverlight
Penjelasan
Langkah pertama, Anda harus memiliki file Silverlight.js sebagai engine yang nantinya akan
mengubah code-code XAML menjadi objek-objek berbentuk, berwarna, dan beranimasi yang dapat
dinikmati oleh mata. File Silverlight.js ini bisa Anda dapatkan di dalam Silverlight 1.0 SDK yang dapat
di-download di http://www.microsoft.com/downloads/details.aspx?FamilyId=FB7900DB-4380-
4B0F-BB95-0BAEC714EE17&displaylang=en.
Jika Anda menginstal Silverlight 1.0 extension pada Microsoft Visual Studio 2005 maka template
dasar untuk membuat Silverlight sudah tersedia. Pada Microsoft Visual Studio 2008, Silverlight dapat
diimplementasikan juga tetapi harus dengan sedikit modifikasi. Sangat dianjurkan menggunakan
program dan template ini karena akan sangat membantu Anda dalam membuat aplikasi Silverlight
dan tentunya dapat menghemat banyak waktu.
Langkah selanjutnya adalah menyiapkan file kosong yang diberi nama createSilverlight.js yang akan
diisi dengan code untuk membuat content Silverlight. Selanjutnya, Anda membuat file html yang
berisi referensi ke dua JavaScript di atas (Silverlight.js dan createSilverlight.js) serta berisi sebuah div
yang akan menjadi “rumah” bagi content Silverlight.
Setelah itu, kita mengisi file createSilverlight.js dengan script yang akan meng-generate content
Silverlight. Dalam script ini ada beberapa value yang dapat Anda ubah, seperti tinggi dan lebar, nama
file xaml yang berisi content Silverlight dan sebuah isi yang menspesifikasikan sifat dari plug-in yang
akan ditampilkan.
Ketika menampilkan di browser, kita hanya melihat kotak hitam karena kita memang belum
membuat file XAML apapun sehingga walaupun ada content Silverlight, tapi belum ada objek
Silverlight di sana. Kotak berwarna hitam muncul karena kita menentukan background:‘#000000’
sebagai warna latar content Silverlight.
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
67 Silverlight
Mengenal eXtensible Application Markup Language
Pada sub-bab ini, kita akan belajar membuat objek Silverlight. Bagaimana Caranya? Yaitu dengan
menggunakan code XAML. Code XAML ini mudah untuk dipelajari. Kita dapat melihat
dokumentasinya setelah menginstal Silverlight 1.0 SDK pada komputer.
XAML adalah kependekan dari kata eXtensible Application Markup Language yang bersifat deklaratif
dan merupakan bahasa dasar untuk membuat suatu objek berikut propertinya dengan XML. XAML
lebih di fokuskan pada pembuatan user interface.
Ikuti Langkah Berikut
Bermain dengan XAML
1. Untuk memulai, buatlah file XAML bernama myxaml.xaml dan tuliskan code berikut di dalamnya:
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> </Canvas>
2. Ubah objek Canvas di atas menjadi seperti berikut:
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="300" Height="300" Background="#FFFF0000" > </Canvas>
3. Bukalah belajar.html pada browser. Hasilnya akan terlihat sebuah persegi (yang merupakan
objek Canvas) besar berwarna merah
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
68 Silverlight
Penjelasan
Anda membuat file XAML bernama myxaml.xaml agar di-load oleh halaman html yang Anda buat
pada tahap sebelumnya. Setiap file XAML Silverlight selalu dimulai dengan sebuah <Canvas> yang
memiliki deklarasi namespace melalui sebuah atribut xmlns yang mendeklarasikan namespace
Silverlight dan atribut xmlns:x yang mendeklarasikan namespace XAML.
Membuat objek pada content Silverlight
Anda juga dapat berkreasi dengan mencoba lebih lanjut dengan mempelajari lebih banyak lagi
tentang objek Canvas dan tentunya objek-objek lainnya. Selanjutnya kita akan mencoba untuk
membuat objek XAML dengan background canvas berwarna hitam dan terdapat lingkaran di
dalamnya.
Ikuti Langkah Berikut
Membuat objek Ellipse
1. Buka kembali myxaml.xaml
2. Ganti warna background Canvas dengan mengubah Background="#FFFF0000" menjadi
Background="#FFFF0000" pada objek Canvas
3. Tuliskan code berikut di dalam objek Canvas (berarti di dalam <Canvas></Canvas>)
<Ellipse Height="200" Width="200" Fill="Red" />
4. Buka belajar.html pada browser dan lihat hasilnya seperti berikut
Penjelasan
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
69 Silverlight
Anda telah membuat objek Ellipse pada content Silverlight Anda. Cukup dengan memberikan
properti Height dan Width serta diberi warna dengan menggunakan properti Fill, maka objek Ellipse
tercipta dan ditampilkan di browser.
Selanjutnya kita akan membuat objek persegi.
Ikuti Langkah Berikut
Membuat objek Rectangle
1. Buka kembali myxaml.xaml
2. Hapus code yang mendeklarasikan objek Ellipse
3. Tuliskan code berikut di dalam objek Canvas
<Rectangle Height="200" Width="200" Fill="Red" />
4. Buka kembali belajar.html pada browser dan lihat hasilnya seperti berikut
5. Ganti properti objek Rectangle sehingga menjadi seperti berikut
<Rectangle Canvas.Left="10" Canvas.Top="10" Width="150" Height="100" Stroke="#FFFFFFFF" StrokeThickness="10" Fill="#FF929292" RadiusX="15" RadiusY="15"/>
6. Buka kembali belajar.html pada browser dan berikut adalah hasilnya
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
70 Silverlight
Penjelasan
Seperti yang telah Anda lakukan, bahwa untuk membuat objek persegi, caranya yaitu dengan
menggunakan Rectangle. Objek Rectangle ini memiliki properti RadiusX dan RadiusY untuk
menentukan tingkat ketumpulan / ketajaman sudut-sudut persegi tersebut.
Selanjutnya kita akan membuat objek dengan bentuk bebas.
Ikuti Langkah Berikut
Membuat objek Path
1. Buka kembali myxaml.xaml
2. Ganti code yang mendeklarasikan objek Rectangle dengan code berikut
<Path Width="200" Height="200" Stretch="Fill" Stroke="#FFFFFFFF" StrokeThickness="10" Data="M448,99 L147,377"/>
3. Buka kembali belajar.html pada browser dan lihat hasilnya seperti berikut
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
71 Silverlight
Penjelasan
Pada contoh di atas, Anda membuat bentuk garis dengan menggunakan Path. Di dalam Path, Anda
membentuk objek tersebut dengan menggunakan properti Data.
Selanjutnya kita akan membuat objek tulisan.
Ikuti Langkah Berikut
Membuat objek TextBlock
1. Buka kembali myxaml.xaml
2. Ganti code yang mendeklarasikan objek Path dengan code berikut
<TextBlock Text="Ini adalah textblock" Foreground="Blue"/>
3. Buka kembali belajar.html pada browser dan lihat hasilnya seperti berikut
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
72 Silverlight
Penjelasan
Anda membuat objek tulisan dengan menggunakan TextBlock dan mengisi properti Text untuk
menentukan tulisan yang akan ditampilkan. Anda memberi warna tulisan dengan mengisi properti
Foreground="Blue"
Mengolah objek Silverlight
Kita dapat mengubah bentuk objek Silverlight dengan mengisi properti-propertinya. Contoh berikut
adalah memberikan garis tepi pada sebuah Ellipse
Ikuti Langkah Berikut
Menggunakan properti Stroke dan StrokeThickness
1. Buka file myxaml.xaml
2. Hapus objek-objek yang berada di dalam Canvas, kemudian tuliskan code berikut di dalam
Canvas
<Ellipse Height="200" Width="200" StrokeThickness="8" Stroke="White" Fill="Red" />
3. Lihat halaman belajar.html pada browser
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
73 Silverlight
Penjelasan
Pada contoh di atas, kita menentukan bahwa warna garis tepi adalah putih dengan menggunakan
properti Stroke=“White”. Ketebalan garis tepi juga dapat diatur dengan menggunakan
StrokeThickness. Pada contoh di atas, kita membuat Ellipse dengan Stroke yang cukup tebal, yaitu
dengan menggunakan StrokeThickness=“8”.
Selanjutnya kita akan mengatur transparansi objek.
Ikuti Langkah Berikut
Menggunakan properti Opacity
1. Buka kembali myxaml.xaml
2. Hapus code yang membuat Ellipse pada contoh sebelumnya, kemudian ganti dengan code
berikut
<Ellipse Width="150" Height="200" Fill="#FFFF0000"/> <Ellipse Width="150" Height="200" Fill="#FFFF00FF" Canvas.Left="57" Opacity="0.5"/>
3. Lihat hasilnya dengan membuka halaman belajar.html pada browser
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
74 Silverlight
Penjelasan
Dengan menggunakan properti Opacity, kita dapat menentukan tingkat transparansi suatu objek.
Pada contoh di atas, Ellipse yang berwarna biru kita isi properti Opacity dengan nilai 0.5 yang artinya
tingkat transparansi objek Ellipse ini 50% atau setengah dari aslinya.
Selanjutnya kita akan mencoba untuk mewarnai objek dengan lebih dari satu warna (yaitu dengan
teknik gradasi)
Ikuti Langkah Berikut
Memberi warna gradasi pada objek
1. Buka kembali myxaml.xaml
2. Hapus code-code di dalam Canvas dan ganti dengan code berikut
<Rectangle Canvas.Top="10" Canvas.Left="10" Width="200" Height="150" Stroke="#FFFFFFFF" StrokeThickness="10"> <Rectangle.Fill> <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5"> <GradientStop Color="#FF000000" Offset="0"/> <GradientStop Color="#FFFF0000" Offset="1"/> </LinearGradientBrush> </Rectangle.Fill> </Rectangle>
3. Lihat halaman belajar.html pada browser
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
75 Silverlight
Penjelasan
Kita dapat memberikan warna gradasi pada objek dengan menggunakan properti Fill. Namun
berbeda dengan sebelumnya, properti Fill ini tidak dituliskan langsung pada elemen Rectangle,
melainkan menjadi sub elemen Rectangle tersebut sehingga kita perlu membuat sebuah child tag
yang bernama <Rectangle.Fill></Rectangle.Fill>. Di dalam tag ini, kita dapat membuat elemen lagi
yang menentukan warna dari Rectangle, misalnya LinearGradientBrush. Pada tag
LinearGradientBrush, kita tentukan gradasi yang diinginkan dari titik mana ke titik mana. Kemudian
di dalam <LinearGradientBrush></LinearGradientBrush>, kita tentukan warna-warna yang mengisi
gradasi tersebut dengan menggunakan GradientStop. Pada GradientStop, kita dapat menentukan
warna apa dan di mana warna tersebut berada.
Selanjutnya kita akan melakukan teknik grouping terhadap lebih dari satu objek. Grouping pada
Silverlight sama seperti kita membuat suatu canvas di dalam root Canvas, dan objek-objek tersebut
masuk di dalam sebuah Canvas yang sama. Dan objek-objek yang kita masukkan akan tersebut akan
bersifat relatif terhadap Canvas tersebut. Sebagai contoh, perhatikan code berikut yang mana
berupa keadaan dua buah objek lingkaran sebelum di group menjadi satu
<Ellipse Width="200" Height="180" Fill="#FFFF0000"/> <Ellipse Width="200" Height="180" Fill="#FF0000FF" Canvas.Left="57" Canvas.Top="45"/>
Yang akan menghasilkan tampilan seperti berikut
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
76 Silverlight
Dan setelah di-group, bentuknya akan tetap sama dengan gambar di atas tetapi terdapat perubahan
pada code-nya. Untuk itu, simak contoh berikut
Ikuti Langkah Berikut
Menggunakan teknik grouping pada Silverlight
1. Ganti isi root Canvas pada myxaml.xaml dengan code berikut
<Canvas> <Ellipse Width="200" Height="180" Fill="#FFFF0000"/> <Ellipse Width="200" Height="180" Fill="#FF0000FF" Canvas.Left="57" Canvas.Top="45"/> </Canvas>
2. Berikut adalah hasilnya pada browser
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
77 Silverlight
3. Sekarang tambahkan properti Canvas.Left=“20” dan Canvas.Top=“20”
<Canvas Canvas.Left="20" Canvas.Top="20"> <Ellipse Width="200" Height="180" Fill="#FFFF0000"/> <Ellipse Width="200" Height="180" Fill="#FF0000FF" Canvas.Left="57" Canvas.Top="45"/> </Canvas>
4. Sekarang lihat kembali hasilnya pada browser
Penjelasan
Seperti yang telah dikatakan sebelumnya, bahwa secara tampilan, tidak akan terlihat perbedaan.
Namun dengan meng-group-kan objek-objek ke dalam sebuah Canvas, Anda hanya perlu mengubah
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
78 Silverlight
letak Canvas tersebut untuk mengubah letak keseluruhan objek yang terdapat di dalam Canvas
tersebut.
Penggunaan Media pada content Silverlight
Selain membuat objek-objek lingkaran, persegi, garis, objek bebas, dan objek lainnya, kita juga dapat
meng-import file-file media, seperti gambar, audio, dan video. Ikuti contoh-contoh berikut untuk
menggunakan file media pada content Silverlight Anda.
Ikuti Langkah Berikut
Menampilkan gambar pada content Silverlight
1. Buka file myxaml.xaml. Pastikan Anda memiliki sebuah gambar untuk di-import dan diletakkan di
dalam folder yang sama dengan belajar.html, myxaml.xaml, dan lainnya. Misalnya nama gambar
tersebut adalah bunga.jpg dan berikut adalah gambarnya
2. Hapus isi code-code di dalam Canvas dan ganti dengan code berikut
<Image Source="bunga.jpg"/>
3. Buka halaman belajar.html pada browser dan lihat hasilnya seperti berikut
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
79 Silverlight
Penjelasan
Untuk meng-import file gambar, cukup dengan menggunakan objek Image. Objek Image tersebut
hanya cukup diberi informasi di mana lokasi gambar yang akan di-import dengan menyediakan
property Src yang diisi dengan lokasi gambar.
Selanjutnya, kita akan meng-import file yang lebih menarik, yaitu video
Ikuti Langkah Berikut
Menampilkan video pada content Silverlight
1. Pastikan Anda memiliki file video yang memiliki ekstensi .wmv untuk di-import. Letakkan folder
tersebut di folder yang sama dengan myxaml.xaml, dan file lainnya
2. Buka file myxaml.xaml
3. Ganti isi Canvas dengan code berikut
<MediaElement x:Name="Video" Source="imaginecup.wmv"/>
4. Buka belajar.html pada browser untuk melihat hasilnya
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
80 Silverlight
Penjelasan
Sama dengan objek Image, kita hanya perlu mengisi nilai pada property Source untuk kemudian
dapat menampilkan video pada content Silverlight.
Selain gambar dan video, content Silverlight juga dapat mengandung file audio (suara saja).
Ikuti Langkah Berikut
Mendengarkan suara melalui content Silverlight
1. Pastikan Anda memiliki file audio untuk di-import dan letakkan pada folder yang sama dengan
folder myxaml.xaml dan file lainnya
2. Buka myxaml.xaml dang anti isi Canvas dengan code berikut
<MediaElement x:Name="Audio" Source="musik.mp3"/>
3. Buka belajar.html pada browser bukan untuk melihat hasilnya, namun untuk melihat hasilnya
Penjelasan
Sama dengan video, cara meng-import audio juga dengan menggunakan objek MediaElement yang
menyediakan property Source yang diisi dengan lokasi dari file audio yang akan di-import.
Berinteraksi dengan objek Silverlight
Selain hanya bisa dilihat atau didengar saja, objek-objek Silverlight juga dapat berinteraksi dengan
manusia (pengunjung website). Caranya sangat mudah, yaitu dengan membuat fungsi di JavaScript
yang meng-handle event yang terjadi pada content Silverlight.
Ikuti Langkah Berikut
Meng-handle event MouseLeftButtonDown
1. Buka myxaml.xaml
2. Ganti isi code di dalam Canvas dengan code berikut
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
81 Silverlight
<Rectangle Canvas.Left="80" Canvas.Top="80" Width="100" Height="50" Fill="Blue" MouseLeftButtonDown="SayHello"> </Rectangle>
3. Buatlah sebuah file JavaScript baru, misalnya beri nama sebagai eventHandler.js
4. Tuliskan code berikut di dalam eventHandler.js
function SayHello() { alert("Hello, I am a Rectangle!"); }
5. Tambahkan referensi terhadap eventHanlder.js di belajar.html dengan menggunakan tag
<script></script>
<script type="text/javascript" src="eventHandler.js"></script>
6. Lihat halaman belajar.html melalui browser. Klik kiri gambar persegi berwarna biru dan akan
muncul window yang menampilkan pesan sesuai dengan pesan yang ada di method SayHello()
Penjelasan
Dengan menambahkan properti MouseLeftButtonDown dan mengisinya dengan nama method yang
ada di JavaScript, maka kita dapat menangkap event MouseLeftButtonDown tersebut dengan
menjalankan method di JavaScript. Event-event yang ada pada objek Silverlight tidak hanya ketika
objek tersebut diklik, bisa juga MouseEnter, MouseMove, MouseLeave, dan event-event lainnya.
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
82 Silverlight
Pada contoh selanjutnya, kita akan mempelajari bagaimana membuat mengambil objek yang ada
pada content Silverlight melalui JavaScript.
Ikuti Langkah Berikut
Mengambil objek Silverlight melalui JavaScript
1. Buka myxaml.xaml
2. Pada Rectangle yang telah kita buat sebelumnya, tambahkan properti Name sehingga code
Rectangle menjadi seperti berikut
<Rectangle Name="Persegi" Canvas.Left="80" Canvas.Top="80" Width="100" Height="50" Fill="Blue" MouseLeftButtonDown="SayHello"> </Rectangle>
3. Buka eventHandler.js dan ganti method SayHello() sehingga menjadi seperti berikut
function SayHello(sender, args) { var persegi = sender.findName("Persegi"); persegi.Fill = "Red"; }
4. Buka halaman belajar.html pada browser. Klik persegi berwarna biru, maka kotak tersebut akan
menjadi merah. Dan jika persegi sedang berwarna merah, maka jika diklik lagi maka akan
berwarna biru
Penjelasan
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
83 Silverlight
Seperti yang telah Anda lihat, bahwa untuk mengambil objek Silverlight melalui JavaScript sangat
mudah. Method yang menjadi event handler hanya perlu diberikan parameter sender dan args.
Parameter sender ini otomatis merujuk pada objek yang menyebabkan event tersebut terjadi. Tapi
melalui sender ini juga, kita bisa merujuk pada objek lain yang ada pada content Silverlight dengan
memanggil nama objek tersebut. Caranya yaitu dengan menggunakan method
findName(“NamaObjek”). Sebenarnya kita bisa saja langsung menggunakan objek sender karena
kebetulan warna objek yang akan kita ubah sama dengan objek yang menyebabkan event tersebut.
Jadi isi method SayHello tadi bisa kita ganti dengan sender.Fill=“Red”.
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
84 Studi Kasus Membuat Website Testipi
Studi Kasus Membuat Website Testipi
Kita telah mempelajari cukup banyak hal baru yang hadir di ASP.NET 3.5 dan Silverlight serta fitur-
fitur baru yang dimiliki oleh Visual Studio 2008. Sekarang saatnya kita mengkombinasikan teknologi-
teknologi tersebut hingga menjadi suatu aplikasi website yang berfungsi penuh.
Dalam bab ini, kita akan membuat suatu website yang kita beri nama Testipi. Fitur-fitur yang dimiliki
website ini antara lain
1. Adanya user account untuk para member
2. Member dapat meng-upload video dari komputernya ke website ini
3. Member memiliki daftar video favorite
4. Setiap pengunjung website (baik member maupun guest) dapat melihat daftar video yang
ada pada website ini
5. Website ini memiliki video player
6. Setiap pengunjung website (baik member maupun guest) dapat menonton video melalui
video player
Sekilas tentang Software Development Life Cycle
Seperti layaknya mengembangkan suatu software berskala besar, kita sebaiknya juga mengikuti
langkah-langkah yang ada Software Development Life Cycle (SDLC), walaupun aplikasi yang kita buat
hanya berskala kecil. Setidaknya kita dapat mengambil bagian-bagian dari SDLC untuk kepentingan
pembuatan website Testipi. Dengan mengikuti langkah-langkah yang sudah sering dilakukan oleh
banyak tim software developer di seluruh dunia, maka kita berharap website yang akan kita buat
juga memiliki kualitas yang bagus. Selain itu, proses-proses pada SDLC akan memudahkan kita dalam
mengembangkan software dan menghindarkan kita dari munculnya banyak bug di aplikasi yang kita
buat.
Biasanya, langkah-langkah yang ada pada SDLC adalah sebagai berikut:
1. Planning. Pada tahap ini, tim mendefinisikan aplikasi apa yang akan dibuat, scope aplikasi,
penjadwalan pengerjaan project serta, rencana untuk monitoring dan mengatur jalannya
project.
2. Analysis. Pada tahap ini, tim mendefinisikan dan mengumpulkan seluruh requirement untuk
mencapai goal yaitu terciptanya aplikasi yang diinginkan. Setiap business requirement yang
dibutuhkan oleh sistem harus sebisa mungkin diketahui sejak awal. Setelah semua
requirement terkumpul, tim menentukan prioritas terhadap setiap requirement agar
langkah-langkah pengerjaan sistem yang berlangsung tahap demi tahap sesuai dengan
ketergantungan antara requirement satu dengan yang lainnya.
3. Design. Pada tahap ini, tercipta gambaran kasar dari aplikasi yang akan dikembangkan. Tim
menentukan technical architecture serta merepresentasikan sistem dalam bentuk model-
model sebagai acuan untuk proses pengembangan.
4. Development. Tahap ini tidak lain dan tidak bukan adalah realisasi model-model yang telah
dirancang menjadi bentuk nyata aplikasi melalui coding dan programming.
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
85 Studi Kasus Membuat Website Testipi
5. Testing. Tahap ini menguji sistem dengan skenario-skenario yang telah dibuat. Tujuannya
adalah untuk menghindari adanya kesalahan perilaku sistem setelah diinstal dan digunakan
dalam dunia nyata.
6. Deployment. Sistem diinstal di tempat tujuan sistem tersebut akan digunakan sehari-hari.
Pada tahap ini, tim juga membuat dokumentasi berupa user guide penggunaan aplikasi serta
pengadaan training terhadap user yang akan mengoperasikan sistem ini.
7. Maintenance. Tahap ini merupakan perawatan sistem berupa penyediaan update dan
pengadaan helpdesk agar memastikan sistem berjalan sesuai dengan yang diharapkan.
Untuk kepentingan membuat website Testipi, kita hanya akan menjalankan langkah nomor 1 sampai
5. Karena tentunya website yang akan kita buat tidak sampai kita deploy di suatu server, melainkan
hanya kita jalankan di localhost saja.
Planning
Seperti yang telah dibahas sebelumnya, bahwa kita akan membuat sebuah website yang diberi nama
Testipi. Website ini ditujukan untuk tempat penyimpanan video serta dapat memainkan video yang
disimpan.
Pengerjaan website ini dalam waktu yang sebenarnya seharusnya tidak lebih dari 1 minggu, bahkan
mungkin bagi mereka yang sudah terbiasa dengan ASP.NET 3.5, akan dapat menyelesaikan website
ini dalam 1 hari.
Pada buku ini tentunya kita akan menyelesaikannya dengan segera karena Anda tinggal mengikuti
langkah-langkah yang kami sediakan.
Analysis
Website Testipi perlu memenuhi kriteria berikut
1. Pengunjung web bisa mendaftar untuk menjadi member
2. Pengunjung web bisa melihat daftar video
3. Pengunjung web dapat melakukan pencarian terhadap video
4. Pengunjung web dapat menonton video melalui video player
5. Member dapat meng-upload video serta mengedit judul dan keterangan pada video yang di-
upload olehnya
6. Member juga dapat menghapus video yang telah di-upload olehnya
7. Member memiliki daftar video favorite, sehingga member dapat menambahkan video ke
daftar video favorite-nya
8. Member harus melakukan login dan logout untuk dapat menggunakan fitur khusus member
(yaitu upload dan manajemen video serta manajemen video favorite)
Untuk keperluan pengembangan, pada tahap ini kita akan menentukan requirement mana yang
diselesaikan terlebih dahulu. Langkah ini disebut prioritizing. Untuk memudahkan kita, maka berikut
adalah tahap-tahap pengerjaan website Testipi:
1. Menyiapkan database Testipi
2. Penggunaan sistem membership
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
86 Studi Kasus Membuat Website Testipi
3. Setiap pengunjung web dapat melakukan pendaftaran
4. Pengunjung web yang sudah punya account di website Testipi bisa melakukan login untuk
kemudian dapat menggunakan fitur yang hanya disediakan untuk member
5. Pengunjung web juga dapat melakukan logout untuk keluar dari fitur membership Testipi
6. Member dapat mengganti password-nya
7. Member dapat meng-upload video
8. Member dapat mengubah judul dan keterangan video
9. Member dapat menambahkan atau menghapus video ke daftar favorite-nya
10. Pengunjung dapat melakukan pencarian terhadap video melalui judul atau keterangan video
tersebut
11. Pengunjung dapat menonton video pada website Testipi dengan menggunakan video player
yang dibuat dengan menggunakan Silverlight
Design
Architecture
Pada tahap ini, kita tentukan teknologi apa yang dipakai untuk merealisasikan requirement yang
telah kita tentukan sebelumnya. Teknologi yang akan kita gunakan adalah
1. Framework umum : .NET 3.5
2. Framework web programming: ASP.NET 3.5
3. Web markup: XHTML 1.0 Transitional
4. Web design: Cascading Style Sheet
5. Bahasa pemrograman: Visual C# 3.0
6. Web user experience: Silverlight 1.0
7. Database: SQL Server 2005 Express
8. Tools: Visual Studio 2008
Karena akan menggunakan ASP.NET 3.5, maka kita akan menggunakan fitur-fitur berikut
1. ASP.NET Membership
2. MasterPage
3. Theme
4. LINQ
5. LinqDataSource
6. ListView
7. DataPager
8. AJAX
Database Modeling
Untuk menyimpan data tentang video dan daftar favorite member, maka kita perlu membuat tabel
di database. Hubungan antara member, video, dan daftar favorite dapat direpresentasikan pada
diagram berikut
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
87 Studi Kasus Membuat Website Testipi
Gambar 10 Pemodelan database dalam sebuah diagram
Keterangan
Diagram database di atas bukanlah diagram yang baku dan diagram yang umum di dunia software
development. Kita membuat diagram di atas hanya untuk memudahkan kita dalam memahami relasi
antar tabel pada website Testipi.
Kita menggunakan ASP.NET Membership untuk sistem membership pada website kita. Untuk itu,
kita memanfaatkan tabel aspnet_Users untuk mengambil informasi tentang member yang terdaftar
di website kita. Akan tetapi, sebenarnya kita tidak membuat relasi yang nyata antara tabel
aspnet_Users ini dengan tabel lainnya. Karena nantinya tabel aspnet_Users berada di file database
yang di-generate oleh Visual Studio untuk keperluan ASP.NET Membership, sedangkan tabel untuk
keperluan fitur website Testipi lainnya kita buat secara manual di file database yang lain. Angka 1
dan N melambangkan kardinalitas yang artinya satu User bisa memiliki banyak Video dan memiliki
banyak Favorite.
Tabel Videos berfungsi untuk menyimpan data Videos. Tabel ini menyimpan ID, Title, Description,
dan FileName dari video yang di-upload oleh member. Untuk mengetahui siapa yang meng-upload
video ini, maka perlu disimpan juga Username dari member.
Tabel Favorites berfungsi untuk menyimpan data video yang dijadikan favorite oleh member.
Dengan demikian, tabel ini cukup menyimpan ID Video dan username member yang menjadikan
video ini sebagai favorite-nya.
Tabel Videos berelasi dengan tabel Favorite yaitu bahwa satu Video bisa digunakan di banyak
Favorite dan satu record di tabel Favorite ditujukan untuk satu Video.
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
88 Studi Kasus Membuat Website Testipi
Development & Testing
Pada tahap ini, kita melakukan langkah-langkah yang telah direncanakan pada tahap Analysis dengan
bermodalkan informasi yang tertera pada tahap tersebut serta tahap Design. Setiap menyelesaikan
sebuah fungsi pada website Testipi, kita akan langsung mengujinya apakah fungsi tersebut dapat
berjalan sesuai dengan yang kita harapkan atau tidak.
Langkah pertama kita adalah dalam tahap development adalah menyiapkan database untuk website
Testipi.
Ikuti Langkah Berikut
Menyiapkan database Testipi
1. Buka Visual Studio 2008
2. Buatlah sebuah website baru dengan memilih Create: Web Site… pada halaman “Start Page”
3. Pilih ASP.NET Web Site sebagai template, File System sebagai Location, Visual C# sebagai
Language. Pilih lokasi website tersebut, misalnya di D:\Websites\ dan Beri nama website
tersebut sebagai Testipi. Setelah itu, klik tombol “OK”
4. Setelah website selesai dibuat, klik kanan folder App_Data pada Solution Explorer kemudian pilih
Add New Item…
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
89 Studi Kasus Membuat Website Testipi
5. Pilih SQL Server database sebagai template dan beri nama database tersebut sebagai
Testipi.mdf. Klik tombol “Add” untuk membuat database
6. Server Explorer akan otomatis terbuka. Buatlah sebuah tabel dengan spesifikasi sebagai berikut
Nama Kolom Tipe Data Boleh Null? Keterangan Lainnnya
ID int Tidak Primary Key, Identity
Title varchar(50) Tidak
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
90 Studi Kasus Membuat Website Testipi
Description varchar(500) Ya
FileName varchar(500) Tidak
Username nvarchar(256) Tidak
7. Simpan tabel tersebut sebagai Videos
8. Buatlah sebuah tabel lagi dengan spesifikasi sebagai berikut (untuk membuat agar lebih dari satu
kolom menjadi primary key, pilih kolom-kolom tersebut terlebih dahulu dengan menahan Ctrl,
baru kemudian klik icon primary key pada tool bar)
Nama Kolom Tipe Data Boleh Null? Keterangan Lainnnya
Username nvarchar(256) Tidak Primary Key
VideoID int Tidak Primary Key
9. Simpan tabel tersebut sebagai Favorites
10. Buatlah relasi antara tabel Favorites dengan tabel Videos. Buka tabel Favorites, kemudian klik
icon Relationships pada tool bar
11. Tambahkan sebuah relasi dengan spesifikasi tabel dan kolom seperti berikut
12. Kemudian buatlah agar ketika record video dihapus maka record yang berhubungan dengan
video tersebut di tabel Favorites juga ikut dihapus. Caranya yaitu dengan memilih Cascade pada
pilihan Delete Rule. Setelah itu, klik tombol “Close”
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
91 Studi Kasus Membuat Website Testipi
13. Simpan tabel Favorites. Klik tombol “Yes” pada window yang memberikan peringatan bahwa
tabel Videos juga ikut terpengaruh
14. Database Testipi.mdf sekarang siap digunakan
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
92 Studi Kasus Membuat Website Testipi
Penjelasan
Pada tahap di atas, Anda telah menyiapkan database Testipi dengan membuat dua buah tabel.
Kolom Username pada kedua tabel bertipe data nvarchar(256) karena menyesuaikan dengan tipe
data dari kolom UserName yang ada pada tabel aspnet_Users di database ASPNETDB.mdf yang
otomatis dibuat ketika kita menggunakan ASP.NET Membership.
Anda juga telah menentukan bahwa ketika sebuah record video di tabel Videos dihapus, maka
otomatis memeriksa apakah ada record pada tabel Favorites yang mengacu pada record yang
hendak dihapus di tabel Videos. Dengan kata lain, memeriksa apakah ada record dengan VideoID
yang sama dengan ID video yang hendak dihapus. Jika ada yang sama, maka secara otomatis
database akan menghapus terlebih dahulu record-record yang ada di tabel Favorites, baru kemudian
record video tersebut di tabel Videos.
Langkah selanjutnya adalah pembuatan sistem membership. Agar jauh lebih mudah, kita gunakan
ASP.NET Membership yang sudah ada sejak ASP.NET 2.0. Dengan menggunakan ASP.NET
Membership, maka segala hal yang berhubungan dengan user account pada website kita akan
sangat terintegrasi.
Ikuti Langkah Berikut
Menggunakan ASP.NET Membership
1. Pada bagian atas Solution Explorer, klik icon ASP.NET Configuration . Fitur ini juga bisa
diakses melalui menu Website > ASP.NET Configuration
2. Visual Studio akan membuka sebuah web untuk mengatur konfigurasi website Anda secara
otomatis. Website ini disebut Web Site Administration Tool atau sering disingkat dengan WSAT
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
93 Studi Kasus Membuat Website Testipi
3. Klik link Security yang ada pada halaman Home atau klik tab Security. Anda akan dibawa ke
halaman yang mengatur aspek security dari website Testipi
4. Klik link “Use the security Setup Wizard to configure security step by step.”
5. Anda akan dibawa ke wizard yang mengatur konfigurasi security website Anda. Klik tombol
“Next” pada Step 1 ini
6. Pada Step 2, Anda memilih bagaimana website Anda melakukan autentikasi terhadap
pengunjung yang akan melakukan login. Pilih “From the internet” agar pengunjung website
diautentikasi dengan cara memasukkan username dan password pada form Login. Klik tombol
“Next”
7. Pada Step 3, Anda diberitahu bahwa Anda menggunakan Advanced provider settings. Klik
tombol “Next”
8. Pada Step 4, Anda diberikan pilihan apakah akan menggunakan sistem role. Kita tidak
menggunakan sistem role pada website Testipi, maka kita tidak memilih check box yang ada
pada tahap ini. Klik tombol “Next”
9. Pada Step 5, kita diberikan pilihan untuk menambahkan user melalui WSAT. Buatlah satu user
awal untuk website Anda. Isi form Create User dengan data berikut
Username naya
Password Password0!
Confirm Password Password0!
E-mail [email protected]
Security Question Apa kabar?
Security Answer Baik
10. Pastikan bahwa check box “Active User” ditandai. Klik tombol “Create User”
11. Setelah itu, Anda akan diberitahukan bahwa Anda telah berhasil membuat user. Klik tombol
“Continue”. Jika Anda ingin membuat user lagi silahkan isi form “Create User” seperti langkah
sebelumnya namun tentunya dengan Username yang berbeda.
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
94 Studi Kasus Membuat Website Testipi
12. Klik tombol “Next” jika Anda telah selesai membuat user sesuai dengan keinginan Anda.
Setidaknya telah ada satu user yaitu, naya
13. Pada Step 6, kita dapat menentukan folder mana yang boleh diakses oleh siapa, atau disebut
juga Access Rules. Kita akan menentukan Access Rules ini di lain waktu, maka langsung klik
tombol “Next”
14. Pada tahap ini Anda diberitahukan bahwa proses konfigurasi untuk aspek security pada website
Anda telah selesai. Klik tombol “Finish”
15. Tutup browser WSAT dan kembali ke Visual Studio. Pada Solution Explorer, double-click file
web.config dan cek apakah terdapat code <authentication mode="Forms" />. Jika ya, maka
Anda telah melakukan langkah-langkah tadi dengan benar
16. Klik juga icon Refresh di bagian atas Solution Explorer. Pastikan bahwa terdapat sebuah
database baru bernama ASPNETDB.MDF pada folder App_Data
Penjelasan
Pada tahap ini, kita telah mengaktifkan sistem ASP.NET Membership untuk website Anda. Anda juga
telah membuat satu user awal. Password dari user ini cukup sulit karena secara default ASP.NET
Membership memberlakukan peraturan bahwa komposisi password harus mengikuti suatu aturan
dan pola tertentu yang sulit. Pada tahap selanjutnya kita akan mengubah peraturan ini dengan
mengubah file web.config.
Visual Studio secara otomatis membuatkan database untuk sistem membership serta mengatur
code di web.config agar sesuai dengan konfigurasi yang kita tentukan melalui WSAT.
Langkah selanjutnya adalah membuat setting tambahan secara manual pada web.config.
Ikuti Langkah Berikut
Menambahkan setting tambahan secara manual pada web.config
1. Buka file web.config
2. Perhatikan ada tag <configuration> di dalamnya
3. Tambahkan code berikut di dalam tag <configuration> namun setelah tag <configSections>
<appSettings> <add key="SiteName" value="Testipi"/> </appSettings>
4. Tambahkan code berikut di dalam tag <system.web>
<membership> <providers> <remove name="AspNetSqlMembershipProvider"/> <add name="AspNetSqlMembershipProvider" type="System.Web.Security.SqlMembershipProvider, System.Web, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" connectionStringName="LocalSqlServer" enablePasswordRetrieval="false" enablePasswordReset="true" requiresQuestionAndAnswer="true" applicationName="/" requiresUniqueEmail="false" passwordFormat="Hashed" maxInvalidPasswordAttempts="5"
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
95 Studi Kasus Membuat Website Testipi
passwordAttemptWindow="10" minRequiredPasswordLength="4" minRequiredNonalphanumericCharacters="0" passwordStrengthRegularExpression=""/> </providers> </membership>
5. Tambahkan code berikut juga di dalam tag <system.web>
<httpRuntime maxRequestLength="8192"></httpRuntime>
Penjelasan
Pada tahap ini, Anda melakukan konfigurasi tambahan secara manual dengan menambahkan
beberapa baris code pada web.config. Pada langkah ke-3, Anda menambahkan suatu key bernama
SiteName dengan value Testipi. Pasangan key dan value ini nantinya dapat dipanggil dalam code C#.
Pada langkah ke-4, Anda menghapus sebuah provider bernama AspNetSqlMembershipProvider,
kemudian menambahkannya lagi namun dengan spesifikasi yang baru. Perhatikan bahwa terdapat
atribut minRequiredPasswordLength="4", minRequiredNonalphanumericCharacters="0", dan
passwordStrengthRegularExpression="". Artinya, Anda menentukan bahwa password yang
diperbolehkan untuk user minimal terdiri dari 4 karakter, tidak perlu mengandung karakter non
alphanumeric, serta tidak ada regular expression yang perlu diikuti. Pada langkah ke-5, Anda
menentukan bahwa maksimum besarnya request adalah 8192. Artinya, file yang dapat di-upload
oleh pengunjung web adalah sebesar 8192 KB.
Langkah selanjutnya adalah membuat kelas pendukung untuk website Testipi.
Ikuti Langkah Berikut
Membuat kelas pendukung
1. Pada Solution Explorer, klik kanan root website, kemudian pilih menu Add ASP.NET Folder >
App_Code
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
96 Studi Kasus Membuat Website Testipi
2. Pada folder App_Code, klik kanan kemudian pilih Add New Item…
3. Pilih Class sebagai template dan beri nama Config.cs dengan pilihan Language adalah Visual C#.
Klik tombol “Add”
4. Isi file Config.cs dengan code berikut
using System; using System.Configuration;
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
97 Studi Kasus Membuat Website Testipi
using System.Web.Configuration; using System.IO; public class Config { private readonly static string siteName; private readonly static int maximumFileSizeInBytes; private readonly static int maximumFileSizeInKiloBytes; private readonly static HttpRuntimeSection httpRuntime; public static string SiteName { get { return siteName; } } public static int MaximumFileSizeInBytes { get { return maximumFileSizeInBytes; } } public static int MaximumFileSizeInKiloBytes { get { return maximumFileSizeInKiloBytes; } } static Config() { httpRuntime = (HttpRuntimeSection)ConfigurationManager.GetSection("system.web/httpRuntime"); maximumFileSizeInKiloBytes = httpRuntime.MaxRequestLength; maximumFileSizeInBytes = httpRuntime.MaxRequestLength * 1024; siteName = ConfigurationManager.AppSettings["SiteName"]; } public static bool IsAllowedFileType(string fileName) { string extension = Path.GetExtension(fileName); if (extension == ".wmv") { return true; } else { return false; } } }
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
98 Studi Kasus Membuat Website Testipi
5. Buat sebuah file lagi bernama Utilities.cs yang berisi code berikut
using System; using System.Web.UI; using System.Web.UI.HtmlControls; using System.Web.UI.WebControls; public class Utilities { // Menentukan tombol apa yang diklik ketika user menekan Enter dalam sebuah text box // Text box tidak harus merupakan control TextBox, namun harus merupakan control yang // diturunkan dari HtmlControl atau WebControl, serta elemen HTML yang digenerate oleh // control tersebut harus dapat menerima atribut 'onkeydown' dan dapat menerima event "Click" public static void BindButton(Page page, Control TextBoxToBind, Control ButtonToBind) { string script = ""; // Memeriksa tipe tombol dan mendefinisikan JavaScript yang dibutuhkan if (ButtonToBind is LinkButton) { script = "if ((event.which && event.which == 13) || (event.keyCode && event.keyCode == 13)) {" + page.ClientScript.GetPostBackEventReference(ButtonToBind, "").Replace(":", "$") + ";return false;} else return true;"; } else if (ButtonToBind is ImageButton) { script = "if ((event.which && event.which == 13) || (event.keyCode && event.keyCode == 13)) {" + page.ClientScript.GetPostBackEventReference(ButtonToBind, "").Replace(":", "$") + ";return false;} else return true;"; } else { script = "if ((event.which && event.which == 13) || (event.keyCode && event.keyCode == 13)) {document." + "forms[0].elements['" + ButtonToBind.UniqueID.Replace(":", "_") + "'].click();return false;} else return true; "; } // Menambahkan JavaScript ke atribut 'onkeydown' if (TextBoxToBind is HtmlControl) { ((HtmlControl)TextBoxToBind).Attributes.Add("onkeydown", script); } else if (TextBoxToBind is WebControl) { ((WebControl)TextBoxToBind).Attributes.Add("onkeydown", script); } } }
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
99 Studi Kasus Membuat Website Testipi
Penjelasan
Anda telah membuat dua buah file .cs yang masing-masing mengandung sebuah kelas. Kelas
pertama, yaitu Config, merupakan kelas yang menjadi acuan untuk peraturan-peraturan yang
berlaku di website Testipi, misalnya nama website, jumlah ukuran file maksimal yang bisa di-upload
oleh pengunjung web, serta tipe file yang boleh di-upload oleh pengunjung web. Pada kelas yang ke
dua, yaitu Utilities, hanya terdapat sebuah method yang bernama BindButton yang berfungsi untuk
mengasosiasikan sebuah tombol dengan text box-text box yang jika ditekan maka berarti menekan
tombol tersebut.
Selanjutnya, kita akan menyiapkan DataContext dari database yang telah kita buat sebelumnya.
Ikuti Langkah Berikut
Membuat kelas DataContext
1. Klik kanan pada folder App_Code, pilih Add New Item…
2. Pilih LINQ to SQL Classes sebagai template, pilih Visual C# sebagai Language, dan beri nama file
tersebut sebagai Testipi.dbml
3. Buka Server Explorer, kemudian drag-and-drop dua tabel di database Testipi.mdf ke design
surface dari Testipi.dbml.
Penjelasan
Kita telah membuat DataContext dengan nama file Testipi.dbml. Visual Studio secara otomatis
meng-generate sebuah kelas DataContext bernama TestipiDataContext. Kita juga telah
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
100 Studi Kasus Membuat Website Testipi
menambahkan tabel Videos dan Favorites ke DataContext ini sehingga nantinya kita dapat
mengakses tabel Videos dan Favorites melalui TestipiDataContext.
Sampai tahap ini, Anda telah menyiapkan code-code yang akan beraksi di belakang layar. Tahap
selanjutnya adalah membuat tampilan website Testipi agar tampak cantik.
Ikuti Langkah Berikut
Membuat folder untuk menyimpan gambar
1. Pada Solution Explorer, klik kanan root website, kemudian pilih New Folder
2. Beri nama folder tersebut sebagai Images
3. Masukkan gambar-gambar berikut ke dalam folder Images
logo.jpg
iconvideo.png
footer.jpg
bg.jpg
Penjelasan
Anda telah menyiapkan gambar-gambar yang akan digunakan dalam website Testipi. Gambar-
gambar ini akan diatur sedemikian rupa melalui styling dengan Cascading Style Sheet (CSS) sehingga
membuat tampilan website Testipi tampak bagus walaupun sederhana.
Nantinya kita akan menggunakan beberapa gambar di atas untuk styling dengan CSS dan
menggunakan konsep Theme pada ASP.NET
Kita tentukan halaman-halaman website yang dibutuhkan untuk mendukung semua fitur website
Testipi, yaitu:
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
101 Studi Kasus Membuat Website Testipi
1. Default.aspx. Merupakan halaman utama. Di halaman ini akan ada list semua video yang ada
di website Testipi
2. Login.aspx. Merupakan halaman untuk melakukan autentikasi. Pengunjung website yang
sudah punya user account dapat melakukan login di sini.
3. Register.aspx. Merupakan halaman di mana pengunjung website dapat membuat user
account agar dia menjadi member dari keanggotaan website Testipi.
4. MyVideos.aspx. Merupakan halaman di mana member dapat meng-upload video dan
melihat daftar video yang di-upload olehnya serta dapat mengubah judul dan keterangan
video yang di-upload olehnya.
5. MyFavorites.aspx. Merupakan halaman yang berisi daftar video yang dijadikan favorite oleh
member yang bersangkutan. Member dapat menghapus video dari daftar favorite-nya di
halaman ini.
6. ChangePassword.aspx. Sesuai dengan namanya, member dapat mengganti password di
halaman ini.
Dari enam halaman website di atas, terdapat tiga halaman yang khusus untuk member, yaitu
MyVideos.aspx, MyFavorites.aspx, serta ChangePassword.aspx. Pengunjung website yang belum
login tidak bisa mengunjungi halaman ini. Agar lebih mudah dan lebih aman, kita definisikan
peraturan ini di web.config
Ikuti Langkah Berikut
Menentukan halaman yang hanya bisa diakses oleh member
1. Buka file web.config
2. Tambahkan code berikut di dalam tag <configuration> dan letakkan setelah tag <appSettings>
<location path="MyVideos.aspx"> <system.web> <authorization> <deny users="?"/> </authorization> </system.web> </location> <location path="MyFavorites.aspx"> <system.web> <authorization> <deny users="?"/> </authorization> </system.web> </location> <location path="ChangePassword.aspx"> <system.web> <authorization> <deny users="?"/> </authorization> </system.web> </location>
Penjelasan
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
102 Studi Kasus Membuat Website Testipi
Dengan menambahkan code di atas, Anda telah mendefinisikan peraturan bahwa pada halaman
MyVideos.aspx, MyFavorites.aspx, serta ChangePassword.aspx, hanya pengunjung yang sudah login
saja yang bisa mengakses. Hal ini ditandai dengan code <deny user=”?” /> yang artinya tolak
pengunjung web yang anonymous, yaitu yang tidak dikenali atau dengan kata lain belum login
sebagai salah satu user dari keanggotaan website Testipi.
Selanjutnya kita akan mendefinisikan tampilan website Testipi melalui konsep Theme dan Skin File
yang ada di ASP.NET serta CSS yang merupakan bawaan dari HTML
Ikuti Langkah Berikut
Membuat Theme
1. Pada Solution Explorer, klik kanan root website Testipi, kemudian pilih Add ASP.NET Folder >
Theme
2. Visual Studio akan membuatkan folder bernama App_Themes yang berisi sebuah folder lagi
bernama Theme1
3. Ganti nama Theme1 menjadi Default
4. Klik kanan folder Default, pilih Add New Item…
5. Pilih Style Sheet sebagai template, beri nama Default.css. Klik tombol “Add”
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
103 Studi Kasus Membuat Website Testipi
6. Isi Default.css dengan code berikut
body { margin:0; padding:0; background-image:url(../../Images/bg.jpg); background-position:top; background-repeat:repeat-x; font-family:Arial, Helvetica, sans-serif; font-size:8pt; } a { text-decoration:none; font-weight:bold; color:#DD0000; } a:hover { color:#730004; } h2 { font-size:20pt; } #wrapper { width:800px; padding:0px;
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
104 Studi Kasus Membuat Website Testipi
margin:0 auto; height:500px; } #header { float:left; width:800px; height:62px; } #menupanel { width:800px; float:left; padding-top:3px; padding-left:8px; background-position:top; background-repeat:repeat-x; height:35px; } #loginstatus { float:left; } #search { float:right; } #menu { clear:both; } #contentcontainer { width:800px; float:left; } #content { width:780px; float:left; padding-top:20px; padding-left:20px; border-bottom:1px; border-bottom-color:#000000; } #footer { width:800px; float:left; padding-top:25px; text-align:right;
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
105 Studi Kasus Membuat Website Testipi
padding-left:0px; line-height:20px; background-image:url(../../Images/footer.jpg); background-position:center top; background-repeat:no-repeat; } .menulink { font-family:Arial, Helvetica, sans-serif; font-size:16px; font-weight:bold; letter-spacing:-1px; } .arial10black { font-family:Arial, Helvetica, sans-serif; font-size:10px; color:#000000; }
7. Setelah itu, klik kanan folder Default, pilih Add New Item…
8. Pilih Skin File sebagai template dan beri nama Default.skin
9. Hapus isi file Default.skin dan ganti dengan code berikut
<asp:Label SkinID="LabelMessage" runat="server" ForeColor="Red"></asp:Label> <asp:Label SkinID="LabelTitle" runat="server" ForeColor="Red" Font-Size="26pt" Font-Bold="true"></asp:Label>
10. Sekarang bukalah file web.config
11. Cari tag dengan nama pages
12. Tambahkan atribut theme=”Default” sehingga tag pages sekarang tampak seperti code berikut
<pages theme="Default"> <controls> <add tagPrefix="asp" namespace="System.Web.UI" assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/> <add tagPrefix="asp" namespace="System.Web.UI.WebControls" assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/> </controls> </pages>
Penjelasan
Anda telah membuat file CSS dan file Skin di dalam folder Default. Folder Default ini berada dalam
folder App_Themes. Secara otomatis, ASP.NET mengenal folder App_Themes sebagai tempat
penyimpanan konfigurasi styling untuk website. Code-code untuk styling ini dikumpulkan di satu
folder. Nama folder ini merupakan nama theme yang bisa digunakan dalam setiap halaman ASP.NET.
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
106 Studi Kasus Membuat Website Testipi
Untuk membuat lebih dari satu Theme, kita cukup membuat folder baru di dalam folder
App_Themes dengan nama yang berbeda dari folder sebelumnya.
File Skin berguna untuk menentukan bentuk control ASP.NET yang ada di halaman website. Mirip
dengan CSS, di dalam file ini didefinisikan bagaimana styling suatu control. Hanya saja, untuk
menggunakan style yang didefinisikan, kita harus memberikan SkinID ke control tersebut. Jika
terdapat control pada file Skin yang tidak menggunakan SkinID, maka tampilan control tersebut
adalah tampilan secara default bagi jenis control yang sama di setiap halaman ASP.NET yang
menggunakan Theme tersebut.
Agar setiap halaman secara otomatis menggunakan Theme Default, maka kita perlu
memberitahukan ASP.NET melalui konfigurasi di web.config, yaitu di bagian pages dengan
menambahkan atribut theme=”Default”.
Langkah selanjutnya adalah membuat tampilan halaman yang memiliki layout untuk dijadikan
menjadi acuan bagi setiap halaman di website Testipi.
Ikuti Langkah Berikut
Membuat MasterPage
1. Klik kanan pada root website Testipi, kemudian pilih Add New Item…
2. Pilih Master Page sebagai template, Visual C# sebagai Language, dan pilih check box “Place code
in separate file”. Beri nama file tersebut sebagai TestipiMaterPage.master kemudian klik tombol
“Add”
3. Isilah TestipiMaterPage.master dengan code berikut
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
107 Studi Kasus Membuat Website Testipi
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="TestipiMasterPage.master.cs" Inherits="TestipiMasterPage" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Testipi</title> </head> <body> <form id="form1" runat="server"> <div id="wrapper"> <div id="header"> <img src="Images/logo.jpg" alt="Testipi" /> </div> <div id="menupanel" class="arial10black"> <div id="loginstatus"> <asp:LoginView ID="LoginView1" runat="server"> <AnonymousTemplate> You're not logged in. Please <asp:LoginStatus ID="LoginStatusAnonymous" runat="server" LoginText="login here" LogoutText="logout" /> </AnonymousTemplate> <LoggedInTemplate> You're logged in as <asp:LoginName ID="LoginName1" runat="server" /> [<asp:LoginStatus ID="LoginStatusLoggedIn" runat="server" LogoutText="logout" LoginText="login" LogoutAction="Redirect" LogoutPageUrl="Default.aspx" />] </LoggedInTemplate> </asp:LoginView> </div> <div id="search"> Fungsi search akan ada di sini </div> <div id="menu"> <asp:LoginView ID="LoginView2" runat="server"> <AnonymousTemplate> <span class="menulink"> <a href="Default.aspx" class="">Home</a> </span> <b>·</b> <span class="menulink"> <a href="Login.aspx" class="">Login</a> </span> <b>·</b> <span class="menulink"> <a href="Register.aspx" class="">Register</a> </span> </AnonymousTemplate> <LoggedInTemplate> <span class="menulink"> <a href="Default.aspx" class="">Home</a>
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
108 Studi Kasus Membuat Website Testipi
</span> <b>·</b> <span class="menulink"> <a href="MyVideos.aspx" class="">My Videos</a> </span> <b>·</b> <span class="menulink"> <a href="MyFavorites.aspx" class="">My Favorites</a> </span> <b>·</b> <span class="menulink"> <a href="ChangePassword.aspx" class="">Change Password</a> </span> </LoggedInTemplate> </asp:LoginView> </div> </div> <div id="contentcontainer"> <div id="content"> <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder> </div> </div> <div id="footer" class="arial10black"> Copyleft © 2008 Fu & Niko. All Rights Reversed </div> </div> </form> </body> </html>
4. Hapus halaman Default.aspx (dan juga Default.aspx.cs)
5. Klik kanan root website Testipi, kemudian pilih Add New Item…
6. Pilih Web Form sebagai template, Visual C# sebagai Language, Default.aspx sebagai nama file,
pilih check box “Place code in separate file”, dan pilih juga check box “Select master page”. Klik
tombol “Add”
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
109 Studi Kasus Membuat Website Testipi
7. Pilih TestipiMaterPage.master sebagai master dari Default.aspx kemudian klik tombol “OK”
8. Isilah Default.aspx dengan code berikut
<%@ Page Language="C#" MasterPageFile="~/TestipiMasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" Title="Untitled Page" %> <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
110 Studi Kasus Membuat Website Testipi
<h2>All Videos</h2> Daftar semua video akan ada di halaman ini </asp:Content>
9. Tambahkan code berikut di dalam method Page_Load pada code behind
if (!IsPostBack) { this.Title = Config.SiteName + " : Home"; }
10. Simpan halaman Default.aspx dan jalankan pada browser
11. Berikut adalah tampilan halaman Default.aspx pada browser
Penjelasan
Dengan menggunakan MasterPage, semua halaman Anda akan memiliki layout yang seragam. Setiap
halaman hanya perlu menentukan isi content pada halaman tersebut. Pada MasterPage terdapat
control ContentPlaceHolder dan di sisi lain, pada halaman web akan terdapat control Content yang
mengacu pada ContentPlaceHolder yang ada di MasterPage. Caranya adalah dengan mengisi
properti ContentPlaceHolderID dengan ID yang dimiliki oleh ContentPlaceHolder yang ada di
MasterPage.
Ikuti Langkah Berikut
Membuat halaman Login
1. Pada root website Testipi, buatlah halaman Login.aspx beserta code behind-nya. Jangan lupa
untuk menggunakan TestipiMasterPage sebagai master page.
2. Isilah halaman Login.aspx dengan code berikut
<%@ Page Language="C#" MasterPageFile="~/TestipiMasterPage.master" AutoEventWireup="true" CodeFile="Login.aspx.cs" Inherits="_Login" %> <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> <h2>Login</h2> <asp:Login ID="Login1" runat="server" TitleText="" LoginButtonStyle-Font-Size="Smaller">
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
111 Studi Kasus Membuat Website Testipi
</asp:Login> </asp:Content>
3. Isilah Login.aspx.cs dengan code berikut
using System; using System.Web.UI; using System.Web.UI.WebControls; public partial class Login : Page { protected void Page_Load(object sender, EventArgs e) { if (User.Identity.IsAuthenticated) { Response.Redirect("Default.aspx"); } else { if (!IsPostBack) { this.Title = Config.SiteName + " : Login"; TextBox usernameTextBox = (TextBox)Login1.FindControl("UserName"); TextBox passwordTextBox = (TextBox)Login1.FindControl("Password"); CheckBox persistCheckBox = (CheckBox)Login1.FindControl("RememberMe"); Button loginButton = (Button)Login1.FindControl("LoginButton"); Utilities.BindButton(this.Page, usernameTextBox, loginButton); Utilities.BindButton(this.Page, passwordTextBox, loginButton); Utilities.BindButton(this.Page, persistCheckBox, loginButton); usernameTextBox.Focus(); } } } }
4. Jalankan halaman Login.aspx pada browser. Cobalah untuk login dengan user account yang telah
kita buat sebelumnya, yaitu username: naya, password: Password0!
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
112 Studi Kasus Membuat Website Testipi
5. Jika berhasil, Anda akan dibawa ke halaman Home. Perhatikan bahwa status login Anda (yang
berada di bagian atas menu-menu berwarna merah) telah berubah. Sistem juga mengetahui
bahwa member yang sedang login memiliki username naya.
Penjelasan
Pada halaman Login, kita hanya membuat sebuah control, yaitu Login. Control ini secara default
sudah terintegrasi dengan ASP.NET Membership yang berlaku di website kita. Dengan demikian, kita
tidak perlu repot menuliskan code untuk autentikasi. Kita cukup menggunakan control-control yang
berhubungan dengan membership agar member pada website kita bisa login, logout, serta
menggunakan fitur website sesuai dengan keanggotaan mereka.
Control-control yang terintegrasi dengan ASP.NET Membership meliputi Login, LoginName,
LoginStatus, LoginView, CreateUserWizard, ChangePassword, serta PasswordRecovery. Pada website
Testipi ini, kita memanfaatkan semua control tersebut kecuali PasswordRecovery.
Pada Page_Load di dalam code behind halaman Login, kita mengecek terlebih dahulu apakah
pengunjung halaman ini sudah melakukan login atau belum. Jika sudah, maka langsung di-redirect ke
halaman Default.aspx. Jika belum, kita memberikan judul halaman ini serta mengasosiasikan text
box-text box dan check box yang ada ke tombol “Log In”.
Selanjutnya, kita akan membuat halaman Register yang berfungsi agar pengunjung website dapat
membuat user account untuk dirinya.
Ikuti Langkah Berikut
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
113 Studi Kasus Membuat Website Testipi
Membuat halaman Register
1. Pada root website Testipi, buatlah halaman Register.aspx berikut code behind-nya. Gunakan
TestipiMasterPage sebagai master page
2. Isilah halaman Register.aspx dengan code berikut
<%@ Page Language="C#" MasterPageFile="~/TestipiMasterPage.master" AutoEventWireup="true" CodeFile="Register.aspx.cs" Inherits="Register" %> <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> <h2>Register</h2> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:CreateUserWizard ID="CreateUserWizard1" runat="server" CancelDestinationPageUrl="~/Default.aspx" ContinueDestinationPageUrl="~/Default.aspx" CreateUserButtonText="Register" PasswordRegularExpressionErrorMessage="Your password must be at least 4 characters long"> <ContinueButtonStyle Font-Size="Smaller" /> <CreateUserButtonStyle Font-Size="Smaller" /> <WizardSteps> <asp:CreateUserWizardStep ID="CreateUserWizardStep1" runat="server" Title=""> </asp:CreateUserWizardStep> <asp:CompleteWizardStep ID="CompleteWizardStep1" runat="server" Title=""> </asp:CompleteWizardStep> </WizardSteps> </asp:CreateUserWizard> </ContentTemplate> </asp:UpdatePanel> </asp:Content>
3. Setelah itu, isilah Register.aspx.cs dengan code berikut
using System; using System.Web.UI; using System.Web.UI.WebControls; public partial class Register : Page { protected void Page_Load(object sender, EventArgs e) { if (User.Identity.IsAuthenticated) { Response.Redirect("Default.aspx"); } else {
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
114 Studi Kasus Membuat Website Testipi
if (!IsPostBack) { this.Title = Config.SiteName + " : Register"; CreateUserWizardStep createUserWizardStep = (CreateUserWizardStep)CreateUserWizard1.FindControl("CreateUserWizardStep1"); Control container = createUserWizardStep.Controls[0]; TextBox usernameTextBox = (TextBox)container.FindControl("UserName"); TextBox passwordTextBox = (TextBox)container.FindControl("Password"); TextBox confirmPasswordTextBox = (TextBox)container.FindControl("ConfirmPassword"); TextBox emailTextBox = (TextBox)container.FindControl("Email"); TextBox questionTextBox = (TextBox)container.FindControl("Question"); TextBox answerTextBox = (TextBox)container.FindControl("Answer"); Button createUserButton = (Button)CreateUserWizard1.FindControl("__CustomNav0$StepNextButtonButton"); Utilities.BindButton(this.Page, usernameTextBox, createUserButton); Utilities.BindButton(this.Page, passwordTextBox, createUserButton); Utilities.BindButton(this.Page, confirmPasswordTextBox, createUserButton); Utilities.BindButton(this.Page, emailTextBox, createUserButton); Utilities.BindButton(this.Page, questionTextBox, createUserButton); Utilities.BindButton(this.Page, answerTextBox, createUserButton); usernameTextBox.Focus(); } } } }
4. Jalankan halaman Register.aspx pada browser. Isilah form tersebut. Klik tombol “Register” untuk
membuat user account baru
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
115 Studi Kasus Membuat Website Testipi
5. Jika berhasil, maka akan ada informasi bahwa Anda telah dibuatkan user account. Klik tombol
“Continue”
6. Anda akan langsung di-redirect ke halaman Default.aspx. Perhatikan bahwa setelah tahap
pendaftaran ini berhasil, Anda otomatis sedang dalam keadaan login
Penjelasan
Pada halaman Register.aspx, kita menggunakan control CreateUserWizard yang berada di dalam
sebuah control UpdatePanel. Kita juga telah membuat control ScriptManager sebelum UpdatePanel
tersebut. Dengan demikian, kita menggunakan AJAX pada halaman ini. Maka dari itu, ketika Anda
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
116 Studi Kasus Membuat Website Testipi
mengklik tombol “Register”, maka tanpa refresh, wizard tempat Anda mengisi data user account
akan beranjak ke step selanjutnya. Anda juga kali ini tidak perlu membuat password yang rumit,
karena pada web.config kita telah menentukan bahwa password tidak perlu mengikuti suatu regular
expression tertentu serta minimal jumlah karakter cukup empat saja.
Setelah Anda mengklik tombol “Continue”, Anda di-redirect ke halaman Default.aspx karena kita
telah menentukan properti ContinueDestinationPageUrl="~/Default.aspx" pada control
CreateUserWizard.
Di code behind, kita mengecek apakah pengunjung web sudah login atau belum. Jika sudah, maka di-
redirect ke halaman Default.aspx. Jika belum, maka kita memberikan judul halaman ini serta
mengasosiasikan text box-text box yang ada ke tombol “Register”.
Agar member website Testipi dapat mengganti passwordnya, maka selanjutnya kita buat halaman
untuk mengganti password.
Ikuti Langkah Berikut
Membuat halaman ChangePassword
1. Pada root website Testipi, buatlah halaman ChangePassword.aspx berikut code behind-nya.
Gunakan TestipiMasterPage sebagai master page
2. Isilah halaman ChangePassword.aspx dengan code berikut
<%@ Page Language="C#" MasterPageFile="~/TestipiMasterPage.master" AutoEventWireup="true" CodeFile="ChangePassword.aspx.cs" Inherits="ChangePassword" %> <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> <h2>Change Password</h2> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:ChangePassword ID="ChangePassword1" runat="server" ContinueDestinationPageUrl="~/Default.aspx" CancelDestinationPageUrl="Default.aspx" onchangedpassword="ChangePassword1_ChangedPassword" CancelButtonType="Button" ChangePasswordTitleText="" PasswordLabelText="Current Password:" ContinueButtonStyle-Font-Size="Smaller" ChangePasswordButtonStyle-Font-Size="Smaller" CancelButtonStyle-Font-Size="Smaller"> </asp:ChangePassword> </ContentTemplate> </asp:UpdatePanel> </asp:Content>
3. Isilah ChangePassword.aspx.cs dengan code berikut
using System; using System.Web.UI; using System.Web.UI.WebControls;
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
117 Studi Kasus Membuat Website Testipi
public partial class ChangePassword : Page { protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { this.Title = Config.SiteName + " : Change Password"; Control container = ChangePassword1.FindControl("ChangePasswordContainerID"); TextBox passwordTextBox = (TextBox)container.FindControl("CurrentPassword"); TextBox newPasswordTextBox = (TextBox)container.FindControl("NewPassword"); TextBox confirmNewPasswordTextBox = (TextBox)container.FindControl("ConfirmNewPassword"); Button changePasswordButton = (Button)container.FindControl("ChangePasswordPushButton"); Utilities.BindButton(this.Page, passwordTextBox, changePasswordButton); Utilities.BindButton(this.Page, newPasswordTextBox, changePasswordButton); Utilities.BindButton(this.Page, confirmNewPasswordTextBox, changePasswordButton); passwordTextBox.Focus(); } } protected void ChangePassword1_ChangedPassword(object sender, EventArgs e) { Control container = ChangePassword1.FindControl("SuccessContainerID"); Button continueButton = (Button)container.FindControl("ContinuePushButton"); continueButton.Focus(); } }
4. Jalankan website Testipi. Login ke website Testipi sebagai naya kemudian klik link “Change
Password” pada menu. Anda akan berada di halaman ChangePassword.aspx. Gantilah password
member ini dengan 1234. Setelah itu, klik tombol “Change Password”
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
118 Studi Kasus Membuat Website Testipi
5. Setelah berhasil, Anda akan diberitahu bahwa password Anda telah diganti. Klik tombol
“Continue”
Penjelasan
Pada halaman ChangePassword, kita juga menggunakan AJAX sehingga pergantian password terjadi
tanpa adanya refresh. Setelah password Anda berhasil diganti, Anda akan dibawa ke step yang
selanjutnya, yaitu terdapat informasi bahwa password Anda berhasil diganti. Anda mengklik tombol
“Continue” dan kemudian di-redirect ke halaman Defult.aspx adalah karena Anda telah menentukan
properti ContinueDestinationPageUrl="~/Default.aspx" pada control ChangePassword.
Di code behind, seperti biasa, kita memberi judul halaman serta mengasosiasikan text box-text box
yang ada ke tombol “Change Password”. Ada satu method bernama
ChangePassword1_ChangedPassword yang dijalankan ketika pergantian password berhasil. Isi
method ini hanyalah untuk membuat tombol “Continue” menjadi siap ditekan dengan memanggil
method Focus() pada tombol tersebut. Artinya, jika kita menekan Enter, maka secara otomatis
penekanan Enter tersebut akan ditujukan untuk tombol “Continue” sehingga sama saja dengan
mengklik tombol “Continue” dengan mouse.
Selanjutnya, kita akan agak sedikit repot, karena kita hendak membuat halaman MyVideos.aspx yang
didalamnya terdapat cukup banyak fungsi. Di halaman MyVideos.aspx, member dapat mengupload
video. Halaman ini akan menampilkan daftar video yang diupload oleh member ini. Melalui daftar
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
119 Studi Kasus Membuat Website Testipi
video tersebut, member dapat menghapus video, mengubah judul dan keterangan video dan
menambahkan video ke daftar favorite.
Karena pada halaman ini terdapat daftar video, maka sebaiknya kita membuat daftar video tersebut
sebagai Web User Control, agar jika nantinya kita membuat halaman lain yang memiliki daftar video
tersebut maka cukup menggunakan Web User Control tadi.
Web User Control merupakan control buatan kita sendiri. Isi dari Web User Control ini bisa
merupakan gabungan-gabungan dari control-control di ASP.NET, atau bahkan bisa juga mengandung
Web User Control lainnya. Gunanya agar kumpulan control-control tersebut dapat kita gunakan di
berbagai halaman. Jadi, misalkan dalam website kita terdapat beberapa halaman yang memiliki
kumpulan control yang sama, sebaiknya kita membuat Web User Control dari pada melakukan copy-
paste. Tujuannya adalah agar jika kita ingin merubah isi kumpulan control tersebut, maka kita hanya
perlu mengubah satu control yang dijadikan acuan, yaitu Web User Control tersebut. Karena jika
melakukan teknik copy-paste, perubahan di satu halaman juga mengharuskan kita untuk
mengubahnya di halaman lain.
Sebelum membuat daftar video, kita kembali terlebih dahulu ke halaman MyVideo.aspx. Fungsi edit
video, hapus video, menambahkan video ke daftar favorite akan dilakukan melalui daftar video.
Seperti yang telah kita bahas tadi bahwa daftar video akan kita buat di sebuah Web User Control.
Dengan demikian, hanya fungsi upload yang tersedia. Fungsi upload ini yang akan kita tempatkan di
halaman MyVideos.aspx.
Ikuti Langkah Berikut
Membuat halaman MyVideo
1. Agar file video yang dipuload dikumpulkan di satu folder, maka buatlah folder Videos di root
website Testipi
2. Buatlah halaman MyVideo.aspx dan code behind-nya pada root website Testipi
3. Isilah halaman MyVideo.aspx dengan code berikut
<%@ Page Language="C#" MasterPageFile="~/TestipiMasterPage.master" AutoEventWireup="true" CodeFile="MyVideos.aspx.cs" Inherits="MyVideos" %> <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server"> <h2>My Videos</h2> Daftar video akan ada di sini <br /> <h3>Upload New Video</h3> <table> <tr> <td> Title </td> <td> : </td> <td> <asp:TextBox ID="TextBoxTitle" runat="server" MaxLength="50"></asp:TextBox> </td>
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
120 Studi Kasus Membuat Website Testipi
</tr> <tr> <td> Description </td> <td> : </td> <td> <asp:TextBox ID="TextBoxDescription" runat="server" Width="300" MaxLength="500"></asp:TextBox> </td> </tr> <tr> <td> File </td> <td> : </td> <td> <asp:FileUpload ID="FileUpload1" runat="server" Font-Size="Smaller" /> </td> </tr> </table> <asp:Button ID="ButtonUpload" runat="server" Text="Upload" OnClick="ButtonUpload_Click" Font-Size="Smaller" /> <br /> <asp:Label ID="LabelMessage" SkinID="LabelMessage" runat="server"></asp:Label> </asp:Content>
4. Isilah MyVideo.aspx.cs dengan code berikut
using System; using System.Linq; using System.Web.UI; using System.Web.UI.WebControls; using System.IO; public partial class MyVideos : Page { protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { this.Title = Config.SiteName + " : My Videos"; } } protected void ButtonUpload_Click(object sender, EventArgs e) { if (TextBoxTitle.Text.Trim() == "") { LabelMessage.Text = "Title for your video is required"; }
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
121 Studi Kasus Membuat Website Testipi
else if (!FileUpload1.HasFile) { LabelMessage.Text = "File does not exist"; } else { if (!Config.IsAllowedFileType(FileUpload1.FileName)) { LabelMessage.Text = "File format is not supported"; } else if (FileUpload1.PostedFile.ContentLength > Config.MaximumFileSizeInBytes) { LabelMessage.Text = "File size must not larger than " + Config.MaximumFileSizeInKiloBytes + " KiloBytes"; } else { string fileExtension = Path.GetExtension(FileUpload1.FileName); string username = User.Identity.Name; string generatedFileName = username + "_" + DateTime.Now.Ticks.ToString(); string destination = Server.MapPath(@"Videos\") + generatedFileName + fileExtension; Video video = new Video(); video.Title = TextBoxTitle.Text; video.Description = TextBoxDescription.Text; video.FileName = generatedFileName + fileExtension; video.Username = username; TestipiDataContext database = new TestipiDataContext(); database.Videos.InsertOnSubmit(video); database.SubmitChanges(); FileUpload1.SaveAs(destination); LabelMessage.Text = "File has been uploaded"; } } } }
5. Jalankan website Testipi, kemudian login sebagai naya. Klik link “My Videos” pada menu di atas
6. Pada form upload yang telah kita buat, isi judul video, keterangan video, serta file video yang
akan di-upload kemudian klik tombol “Upload”
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
122 Studi Kasus Membuat Website Testipi
7. Jika berhasil, maka akan ada pesan bahwa file berhasil di-upload
8. Periksa apakah file tersebut benar-benar ada pada website kita. Klik icon refresh pada Solution
Explorer kemudian periksa isi folder Videos
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
123 Studi Kasus Membuat Website Testipi
9. Tentunya begitu juga dengan file sebenarnya. Buka Windows Explorer dan periksa apakah file
video tersebut benar-benar ada di folder tempat tujuan upload, yaitu folder Videos di website
Testipi
Penjelasan
Pada halaman MyVideos.aspx, kita membuat text box untuk judul dan keterangan, serta
menggunakan control FileUpload untuk mengupload file video. Kita juga membuat sebuah label
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
124 Studi Kasus Membuat Website Testipi
dengan isi properti SkinID yaitu LabelMessage. Dengan demikian, tampilan label ini akan sesuai
dengan tampilan label yang memiliki SkinID LabelMessage yang ada pada file Skin, yaitu Default.skin.
<asp:Label SkinID="LabelMessage" runat="server" ForeColor="Red"></asp:Label>
Pada Page_Load, kita memberikan judul untuk halaman ini. Event klik pada ButtonUpload akan
dihandle oleh method ButtonUpload_Click. Di dalam method tersebut, kita melakukan beberapa kali
pengecekan. Pertama, apakah terdapat tulisan di TextBoxTitle. Jika tidak, maka proses upload
dibatalkan dan kita beritahu informasi melalui LabelMessage bahwa member harus menyertakan
judul video. Setelah itu, kita memeriksa apakah file yang akan di-upload benar-benar ada. Jika tidak
ada, maka kita memberikan pesan error melalui LabelMessage bahwa file tidak ada atau alamat file
salah. Jika ada, maka kita masih akan melakukan dua kali pemeriksaan.
Pertama, kita cek apakah file yang akan di-upload memiliki ekstensi yang diperbolehkan. Hal ini
dikarenakan agar file yang di-upload oleh member adalah file video, bukan teks, bukan gambar,
bukan yang lain. Selain itu, ternyata tipe file yang kita terima hanyalah .wmv. Hal ini dikarenakan
sampai saat ini, Silverlight hanya mendukung video bertipe file .wmv untuk dimainkan mealui
MediaElement.
Ke dua, kita cek apakah ukuran file yang akan di-upload melebihi ukurang yang kita tentukan. Hal ini
dikarenakan agar file video tidak terlalu besar. Tentunya kita tidak ingin ada member yang
mengupload video dengan ukuran 100 MB. Kita ambil ukuran file maksimal melalui
Config.MaximumFileSizeInBytes. Di sisi lain, ukuran file yang akan di-upload dapat diambil melalui
PostedFile.ContentLength yang merupakan properti dari control FileUpload yang kita gunakan.
Setelah dua pemeriksaan tersebut dilewati, maka video siap untuk di-upload dan data video siap
dimasukkan ke tabel Videos di database. Gunakan username yang sedang login serta
DateTime.Now.Ticks.ToString() untuk membuat nama file yang unik satu sama lain. Tambahkan
ekstensi file tersebut agar nama file tetap berakhiran .wmv. Jangan lupa bahwa nantinya kita akan
mengupload file ke folder Videos.
Setelah itu, kita membuat objek Video yang bernama video. Isi properti Title dan Description dari
video dengan TextBoxTitle dan TextBoxDescription. Isi pula properti FileName dengan nama file yang
telah kita tentukan serta properti Username dengan username member yang sedang login ini.
Setelah itu, kita buat objek TestipiDataContext dengan nama database. Kita dapat melakukan insert
tanpa menulis query apapun melalui objek ini. Cukup dengan
database.Videos.InsertOnSubmit(video), kita telah memberitahukan ke objek database bahwa data-
data berupa Title, Description, FileName serta Username pada objek video akan dimasukkan sebagai
record baru di tabel Videos.
Dengan dipanggilnya method InsertOnSubmit, maka objek database yang sekarang telah berubah
dibanding dengan objek database ketika baru pertama kali di-instantiate. Nah, cukup panggil
method database.SubmitChanges() untuk melakukan perubahan tersebut pada database yang
sebenarnya.
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
125 Studi Kasus Membuat Website Testipi
Jangan lupa bahwa perubahan tersebut baru terjadi di database. Sedangkan kita ingin file yang
diupload benar-benar tersimpan di website Testipi. Caranya sangat mudah, yaitu dengan memanggil
method SaveAs milik control FileUpload dan menyertakan alamat tujuan file tersebut akan di-
upload. Setelah itu, berikan informasi kepada member bahwa file video telah berhasil diupload.
Selanjutnya, kita akan membuat daftar video yang ditempatkan pada Web User Control. Dalam
membuat daftar video ini, tentunya kita akan menggunakan ListView dan DataPager. Selain itu,
untuk menghadirkan efek yang cool, maka kita gunakan AJAX. Bukan hanya tanpa refresh, tapi kita
juga akan menggunakan UpdateProgress untuk memberikan informasi kepada member bahwa
proses update sedang dilakukan oleh sistem. Untuk mengambil data video milik member, kita
menggunakan LinqDataSource yang menggunakan atribut-atribut tambahan. Untuk itu, ikuti langkah
berikut untuk membuat Web User Control yang kita beri nama ListMyVideos.
Ikuti Langkah Berikut
Membuat Web User Control ListMyVideos
1. Klik kanan pada root website Testipi, kemudian pilih Add New Item…
2. Pilih Web User Control sebagai template dan beri nama ListMyVideos.ascx. Pilih juga check box
“Place code in separate file”. Setelah itu, klik tombol “Add”
3. Isilah Web User Control ListMyVideos dengan code berikut
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="ListMyVideos.ascx.cs" Inherits="ListMyVideos" %> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager>
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
126 Studi Kasus Membuat Website Testipi
<asp:UpdateProgress ID="UpdateProgress1" runat="server"> <ProgressTemplate> Update in progress... </ProgressTemplate> </asp:UpdateProgress> <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"> <ContentTemplate> <asp:ListView ID="ListViewMyVideos" runat="server" DataKeyNames="ID"> <LayoutTemplate> <div runat="server" id="listVideos"> <div runat="server" id="itemPlaceholder" /> </div> <hr /> <asp:DataPager ID="DataPagerMyVideos" runat="server" PageSize="3"> <Fields> <asp:NextPreviousPagerField ButtonType="Link" ShowFirstPageButton="True" ShowNextPageButton="false" ShowPreviousPageButton="false" ShowLastPageButton="False" /> <asp:NumericPagerField ButtonCount="5" /> <asp:NextPreviousPagerField ButtonType="Link" ShowFirstPageButton="False" ShowNextPageButton="false" ShowPreviousPageButton="false" ShowLastPageButton="True" /> </Fields> </asp:DataPager> </LayoutTemplate> <ItemTemplate> <table> <tr> <td rowspan="2" valign="top"><a href='WatchVideo.aspx?video=<%# Eval("ID") %>'><asp:Image runat="server" ID="Image1" Width="60" ImageUrl="~/Images/iconvideo.png" /></a></td> <td valign="top"> <span class="videotitle"> <a href='WatchVideo.aspx?video=<%# Eval("ID") %>'><%# Eval("Title") %></a> </span> </td> </tr> <tr> <td><asp:Label ID="LabelDescription" runat="server" Text='<%# Eval("Description") %>' /></td> </tr> <tr> <td colspan="2" align="left"> <asp:HiddenField ID="HiddenFieldID" runat="server" Value='<%# Eval("ID") %>' /> </td> </tr> </table> <asp:Button ID="ButtonDelete" runat="server" Text="Delete" Font-Size="Smaller" CommandName="DeleteVideo" /> <asp:Button ID="ButtonEdit" runat="server" Text="Edit" CommandName="Edit" Font-Size="Smaller" /> <asp:Button ID="ButtonFavorite" runat="server" Font-Size="Smaller" CommandArgument='<%# DataBinder.Eval(Container.DataItem, "ID") %>' />
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
127 Studi Kasus Membuat Website Testipi
</ItemTemplate> <EditItemTemplate> <table> <tr> <td rowspan="2" valign="top"><a href='WatchVideo.aspx?video=<%# Eval("ID") %>'><asp:Image ID="Image1" runat="server" Width="60" ImageUrl="~/Images/iconvideo.png" /></a></td> <td valign="top"> <table> <tr> <td>Title</td> <td>:</td> <td><asp:TextBox ID="TextBoxTitle" runat="server" Text='<%# Eval("Title") %>' Width="300" /></td> </tr> <tr> <td>Description</td> <td>:</td> <td><asp:TextBox ID="TextBoxDescription" runat="server" Text='<%# Eval("Description") %>' Width="600" /></td> </tr> </table> </td> </tr> <tr> <td colspan="2" align="left"> <asp:HiddenField ID="HiddenFieldID" runat="server" Value='<%# Eval("ID") %>' /> </td> </tr> </table> <asp:Button runat="server" ID="ButtonUpdate" Text="Update" CommandName="UpdateVideo" Font-Size="Smaller" /> <asp:Button runat="server" ID="ButtonCancel" Text="Cancel" CommandName="Cancel" Font-Size="Smaller" /> </EditItemTemplate> <ItemSeparatorTemplate> <div class="separator"></div> </ItemSeparatorTemplate> <EmptyDataTemplate> You have no video. </EmptyDataTemplate> </asp:ListView> </ContentTemplate> </asp:UpdatePanel>
4. Kita telah menyiapkan sebuah ListView untuk dafar video member dan kita beri nama
ListViewMyVideos. Kita harus memastikan bahwa video yang tampil di ListViewMyVideos adalah
video-video yang diupload oleh member yang sedang login. Pertama-tama, kita tambahkan
control HiddenFielad yang menyimpan username member yang sedang login. Tempatkan
HiddenField tersebut setelah Update Panel. Berikut adalah code dari HiddenField tersebut
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
128 Studi Kasus Membuat Website Testipi
<asp:HiddenField ID="HiddenFieldUsername" runat="server" />
5. Setelah itu, beralihlah ke mode Design View. Drag-and-drop LinqDataSource dari toolbox ke
ListMyVideos.ascx. Tempatkan LinqDataSource tersebut di bawah HiddenField
6. Ubah ID LinqDataSource1 menjadi LinqDataSourceMyVideos melalui window Properties
7. Klik smart tag di bagian kanan atas LinqDataSourceMyVideos kemudian pilih Configure Data
Source…
8. Akan muncul window “Configure Data Source”. Pilih TestipiDataContext sebagai sumber data
kemudian klik tombol “Next”
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
129 Studi Kasus Membuat Website Testipi
9. Pilih tabel Videos kemudian klik tombol “Where…”
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
130 Studi Kasus Membuat Website Testipi
10. Akan muncul “Configure Where Expression”. Pilih Column Username, Operator ==, Source
Control, Control ID HiddenFieldUsername. Klik tombol “Add”
11. Pada daftar Preview, akan muncul sebuah kondisi Where yang harus dipenuhi oleh
LinqDataSource. Klik tombol “OK”
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
131 Studi Kasus Membuat Website Testipi
12. Kembali pada window “Configure Data Source”. Klik tombol “OrderBy…”
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
132 Studi Kasus Membuat Website Testipi
13. Akan muncul window “Configure OrderBy Expression”. Pilih Sort by ID dan Descending kemudian
“OK”
14. Kembali lagi ke window “Configure Data Source”. Klik tombol “Finish”
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
133 Studi Kasus Membuat Website Testipi
15. Untuk memastikan apakah Anda sudah benar, beralih ke mode Source View dan cocokkan code
LinqDataSource Anda dengan code berikut
<asp:LinqDataSource ID="LinqDataSourceMyVideos" runat="server" ContextTypeName="TestipiDataContext" TableName="Videos" Where="Username == @Username" OrderBy="ID desc"> <WhereParameters> <asp:ControlParameter ControlID="HiddenFieldUsername" Name="Username" PropertyName="Value" Type="String" /> </WhereParameters> </asp:LinqDataSource>
16. Kita telah selesai menyiapkan sumber data yaitu LinqDataSourceMyVideos. Maka dari itu,
hubungkan List LinqDataSourceMyVideos dengan ListViewMyVideos dengan cara menambahkan
properti DataSourceID=“LinqDataSourceMyVideos” pada ListViewMyVideos
17. Kemudian, ListViewMyVideos kita perlakukan secara khusus. Event yang terjadi pada
ListViewMyVideos akan kita tangani secara manual, termasuk update, delete, add to favorite,
remove from favorite, bahkan ketika sebuah record di-bind pun akan kita atur secara manual
18. Pertama-tama, kita telah menyiapkan tombol yang berfungsi untuk menambahkan atau
menghapus video tersebut dari daftar favorite member. Caranya adalah dengan menangkap
event ItemDataBound dengan menyediakan method yang meng-handle event tersebut
19. Gunakan mode Design View. Pilih ListViewMyVideos dengan klik kiri. Pada windows Properties,
klik icon Events . Double-click event ItemDataBound
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
134 Studi Kasus Membuat Website Testipi
20. Anda akan dibawa ke ListMyVideos.ascx.cs dan otomatis dibuatkan method
ListViewMyVideos_ItemDataBound. Pada control ListViewMyVideos, ditambahkan juga properti
OnItemDataBound=“ListViewMyVideos_ItemDataBound”. Sebelum mengisi method
ListViewMyVideos_ItemDataBound, tambahkan code berikut di awal kelas ListViewMyVideos
TestipiDataContext database = new TestipiDataContext();
21. Objek DataContext ditempatkan di kelas ListViewMyVideos agar scope-nya global, sehingga
objek database dapat digunakan untuk method lainnya yang berada dalam kelas
ListViewMyVideos
22. Setelah itu, ubah method ListViewMyVideos_ItemDataBound sehingga menjadi seperti berikut
protected void ListViewMyVideos_ItemDataBound(object sender, ListViewItemEventArgs e) { ListViewDataItem dataItem = (ListViewDataItem)e.Item; if (dataItem.DisplayIndex != ListViewMyVideos.EditIndex) { Button buttonFavorite = (Button)e.Item.FindControl("ButtonFavorite"); HiddenField hiddenFieldID = (HiddenField)e.Item.FindControl("HiddenFieldID"); bool isInMyFavorite = database.Favorites.Any(favorite => favorite.VideoID == int.Parse(hiddenFieldID.Value) && favorite.Username == this.Page.User.Identity.Name); if (isInMyFavorite) { buttonFavorite.Text = "Remove from Favorite"; buttonFavorite.CommandName = "RemoveFromFavorite"; }
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
135 Studi Kasus Membuat Website Testipi
else { buttonFavorite.Text = "Add to Favorite"; buttonFavorite.CommandName = "AddToFavorite"; } } }
23. Kembali ke Web User Control ListMyVideos. Pilih ListViewMyVideos. Double-click event
ItemCommand di windows Properties
24. Anda akan dialihkan ke ListMtVideos.ascx.cs dan telah dibuatkan method
ListViewMyVideos_ItemCommand. Visual Studio juga menambahkan properti
OnItemCommand=“ListViewMyVideos_ItemCommand” pada control ListViewMyVideos
25. Sebelum mengubah method, tambahkan code berikut untuk menggunakan namespace
System.IO yang berfungsi untuk mengakses file pada Windows serta System.Threading yang
berfungsi untuk menggunakan teknik Threading pada Web User Control ini
using System.IO; using System.Threading;
26. Sekarang ubah method ListViewMyVideos_ItemCommand sehingga menjadi seperti berikut
protected void ListViewMyVideos_ItemCommand(object sender, ListViewCommandEventArgs e) { HiddenField hiddenFieldID = (HiddenField)e.Item.FindControl("HiddenFieldID"); int videoID = int.Parse(hiddenFieldID.Value); Video video = database.Videos.Single(vid => vid.ID == videoID);
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
136 Studi Kasus Membuat Website Testipi
Favorite favorite = new Favorite(); favorite.Username = this.Page.User.Identity.Name; favorite.VideoID = videoID; if (e.CommandName == "AddToFavorite") { database.Favorites.InsertOnSubmit(favorite); Thread.Sleep(500); } else if (e.CommandName == "RemoveFromFavorite") { database.Favorites.Attach(favorite); database.Favorites.DeleteOnSubmit(favorite); Thread.Sleep(500); } else if (e.CommandName == "DeleteVideo") { database.Videos.DeleteOnSubmit(video); File.Delete(Server.MapPath(@"Videos\") + video.FileName); Thread.Sleep(1000); } else if (e.CommandName == "UpdateVideo") { ListViewDataItem dataItem = (ListViewDataItem)e.Item; TextBox textBoxTitle = (TextBox)dataItem.FindControl("TextBoxTitle"); TextBox textBoxDescription = (TextBox)dataItem.FindControl("TextBoxDescription"); if (textBoxTitle.Text.Trim() != "") { video.Title = textBoxTitle.Text; } video.Description = textBoxDescription.Text; ListViewMyVideos.EditIndex = -1; Thread.Sleep(1000); } database.SubmitChanges(); ListViewMyVideos.DataBind(); }
27. Kita menggunakan kelas separator dan videotitle. Untuk itu, buka kembali Default.css kemudian
tambahkan dua kelas berikut
.videotitle { font-family:Arial, Helvetica, sans-serif; font-size:16px; font-weight:bold; letter-spacing:-1px; }
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
137 Studi Kasus Membuat Website Testipi
.separator { border-bottom:dashed 1px Red; margin:5px 0px 15px 0px; }
28. Dengan demikian, Web User Control ListMyVideos telah selesai dibuat dan siap digunakan
Penjelasan
Pada tahap di atas, kita membuat ListView yang memiliki LayoutTemplate, ItemTemplate,
EditItemTemplate, ItemSeparatorTemplate, serta EmptyDataTemplate.
Di dalam LayoutTemplate, kita membuat sebuah DataPager agar ListView ini bisa melakukan paging.
Kita tentukan bahwa satu halaman ListView maksimal mengandung 3 record. Di dalam DataPager,
kita membuat tiga pager field untuk keperluan paging tersebut.
Di dalam ItemTemplate, kita membuat anchor yang berisi gambar yang jika anchor tersebut diklik
akan membawa pengunjung ke halaman WatchVideo.aspx. Halaman ini memang belum kita buat
namun nantinya ditujukan untuk memainkan video tersebut dengan menggunakan Silverlight. Kita
juga membuat anchor yang berisi judul video. Sama dengan anchor sebelumnya, anchor ini jika diklik
akan membawa pengunjung ke halaman WatchVideo.aspx. Label yang menampilkan judul video ini
menggunakan kelas videotitle yang diperoleh dari Default.css. Kemudian, kita membuat Label yang
berisi keterangan video. Selain itu kita membuat sebuah HiddenField untuk keperluan menyimpan ID
dari video yang nanti kita perlukan untuk melakukan aksi yang berhubungan dengan delete, update,
serta add to favorite atau remove from favorite. Kita juga membuat tiga buah tombol. Tombol yang
pertama berfungsi untuk menghapus video, tombol ke dua berfungsi untuk mengedit video, tombol
ke tiga berfungsi untuk menambahkan atau menghapus video tersebut dari daftar favorite member.
Event klik pada tiga tombol ini ditangkap oleh method ListViewMyVideos_ItemCommand. Method
tersebut memiliki parameter ListViewEventArgs e sehingga pada e ini kita dapat menangkap
command yang berhubungan dengan tombol yang diklik. Di dalam method tersebut kita cek
e.CommandName untuk melakukan aksi yang sesuai dengan tombol yang diklik.
Tombol pertama memiliki CommandName DeleteVideo. Di dalam method
ListViewMyVideos_ItemCommand, aksi yang dijalankan jika command ini ditangkap adalah
menghapus data video dari tabel Videos pada database dengan menggunakan objek database yang
merupakan DataContext. Kita juga menghapus file video tersebut dari sistem dengan menggunakan
method File.Delete(Server.MapPath(@"Videos\") + video.FileName). Kelas File ini terdapat pada
namespace System.IO. Kemudian kita memberi efek “tunggu” dengan memanggil
Thread.Sleep(1000). Artinya, setelah file dihapus, sistem akan menunggu selama 1000 milidetik
(yaitu 1 detik) baru kemudian melanjutkan aksinya (yaitu method ini selesai).
Tombol ke dua memiliki CommandName Edit yang akan membawa item di ListViewMyVideos dalam
mode edit (yaitu ditampilkan EditItemTemplate). Dalam EditITemTemplate, kita membuat text box-
text box serta sebuah HiddenField dan dua buah tombol. Tombol pertama memiliki CommandName
video yang jika ditangkap akan menjalankan aksi mengubah judul dan keterangan video. Tombol ke
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
138 Studi Kasus Membuat Website Testipi
dua memiliki CommandName Cancel yang mengembalikan item ini ke mode ItemTemplate tanpa
melakukan perubahan.
Tombol ke tiga tidak memiliki teks dan tidak memiliki CommandName. Karena tombol ini akan bisa
berfungsi ganda, yaitu menambahkan video ke daftar favorite jika video tersebut belum ada di daftar
favorite, dan menghapus video dari daftar favorite jika video tersebut sudah ada di daftar favorite.
Nah, untuk menentukan fungsi mana yang diterapkan pada tombol tersebut, maka kita perlu
mengaturnya ketika tombol itu dibuat, atau dengan kata lain ketika item yang mengandung tombol
itu dibuat (yaitu pada event ItemDataBound). Event ItemDataBound ditangkap oleh method
ListViewMyVideos_ ItemDataBound. Pada method ListViewMyVideos_ ItemDataBound, kita cek
apakah item tersebut dalam mode edit (menggunakan EditItemTemplate) atau dalam mode normal
(menggunakan ItemTemplate). Jika menggunakan EditItemTemplate, maka kita tidak perlu mengatur
apa-apa karena tombol tersebut tidak ada di EditItemTemplate. Tapi jika menggunakan
ItemTemplate, maka kita perlu mengecek apakah video ini sudah ada di daftar favorite milik
member. Jika ada, maka tentukan tulisan tombol menjadi “Remove from Favorite” dan
CommandName menjadi “RemoveFromFavorite”. Namun jika tidak ada, tentukan tulisan tombol
menjadi “Add to Favorite” dan CommandName menjadi “AddToFavorite”. Nah, masing-masing
CommandName tersebut akan ditangkap oleh method ListViewMyVideos_ ItemCommand jika
tombol ke tiga ini diklik dan akan dijalankan aksi yang sesuai dengan CommandName yang sedang
tertera pada tombol tersebut.
Template lainnya adalah ItemSeparatorTemplate yang terdapat sebuah div yang menggunakan kelas
separator pada CSS. Terdapat juga EmptyDataTemplate yang akan menampilkan tulisan “You have
no video.” jika tidak ada video yang di-upload oleh member tersebut.
Kita menempatkan ListViewMyVideos di dalam UpdatePanel agar semua aksi yang ada pada ListView
ini menggunakan AJAX. Kita juga menggunakan Update Progress yang menampilkan tulisan “Update
in progress...” jika proses delete, update, add to favorite atau remove from favorite sedang terjadi.
Sekarang kita akan menggunakan ListMyVideos di halaman MyVideos.aspx untuk melihat hasilnya.
Ikuti Langkah Berikut
Menggunakan Web User Control ListMyVideos pada halaman MyVideos.aspx
1. Buka halaman MyVideos.aspx dalam mode Design View
2. Drag-and-drop ListMyVideos.ascx yang ada di Solution Explorer ke halaman MyVideos.aspx
sebelum tulisan “Daftar video akan ada di sini”
3. Akan tampil Web User Control ListMyVideos pada halaman MyVideos.aspx
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
139 Studi Kasus Membuat Website Testipi
4. Visual Studio secara otomatis telah membuatkan code untuk menggunakan Web User Control
tersebut. Beralihlah ke mode Source View dan pastikan terdapat code berikut
<%@ Register src="ListMyVideos.ascx" tagname="ListMyVideos" tagprefix="uc1" %>
di bagian atas dan code berikut
<uc1:ListMyVideos ID="ListMyVideos1" runat="server" />
di sebelum tulisan “Daftar video akan ada di sini”
5. Hapus tulisan “Daftar video akan ada di sini”
6. Berikut adalah code final dan lengkap dari halaman MyVideos.aspx
<%@ Page Language="C#" MasterPageFile="~/TestipiMasterPage.master" AutoEventWireup="true" CodeFile="MyVideos.aspx.cs" Inherits="MyVideos" %> <%@ Register src="ListMyVideos.ascx" tagname="ListMyVideos" tagprefix="uc1" %> <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server"> <h2>My Videos</h2> <uc1:ListMyVideos ID="ListMyVideos1" runat="server" /> <br />
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
140 Studi Kasus Membuat Website Testipi
<h3>Upload New Video</h3> <table> <tr> <td> Title </td> <td> : </td> <td> <asp:TextBox ID="TextBoxTitle" runat="server" MaxLength="50"></asp:TextBox> </td> </tr> <tr> <td> Description </td> <td> : </td> <td> <asp:TextBox ID="TextBoxDescription" runat="server" Width="300" MaxLength="500"></asp:TextBox> </td> </tr> <tr> <td> File </td> <td> : </td> <td> <asp:FileUpload ID="FileUpload1" runat="server" Font-Size="Smaller" /> </td> </tr> </table> <asp:Button ID="ButtonUpload" runat="server" Text="Upload" OnClick="ButtonUpload_Click" Font-Size="Smaller" /> <br /> <asp:Label ID="LabelMessage" SkinID="LabelMessage" runat="server"></asp:Label> </asp:Content>
7. Tambahkan code berikut pada MyVideos.aspx.cs di dalam method ButtonUpload_Click setelah
tulisan LabelMessage.Text = "File has been uploaded";
ListView listView = (ListView)ListMyVideos1.FindControl("ListViewMyVideos"); listView.DataBind();
8. Berikut adalah code final dan lengkap dari MyVideos.aspx.cs
using System;
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
141 Studi Kasus Membuat Website Testipi
using System.Linq; using System.Web.UI; using System.Web.UI.WebControls; using System.IO; public partial class MyVideos : Page { protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { this.Title = Config.SiteName + " : My Videos"; } } protected void ButtonUpload_Click(object sender, EventArgs e) { if (TextBoxTitle.Text.Trim() == "") { LabelMessage.Text = "Title for your video is required"; } else if (!FileUpload1.HasFile) { LabelMessage.Text = "File does not exist"; } else { if (!Config.IsAllowedFileType(FileUpload1.FileName)) { LabelMessage.Text = "File format is not supported"; } else if (FileUpload1.PostedFile.ContentLength > Config.MaximumFileSizeInBytes) { LabelMessage.Text = "File size must not larger than " + Config.MaximumFileSizeInKiloBytes + " KiloBytes"; } else { string fileExtension = Path.GetExtension(FileUpload1.FileName); string username = User.Identity.Name; string generatedFileName = username + "_" + DateTime.Now.Ticks.ToString(); string destination = Server.MapPath(@"Videos\") + generatedFileName + fileExtension; Video video = new Video(); video.Title = TextBoxTitle.Text; video.Description = TextBoxDescription.Text; video.FileName = generatedFileName + fileExtension; video.Username = username; TestipiDataContext database = new TestipiDataContext(); database.Videos.InsertOnSubmit(video); database.SubmitChanges(); FileUpload1.SaveAs(destination);
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
142 Studi Kasus Membuat Website Testipi
LabelMessage.Text = "File has been uploaded"; ListView listView = (ListView)ListMyVideos1.FindControl("ListViewMyVideos"); listView.DataBind(); } } } }
9. Jalankan website Tetipi. Login sebagai naya dan klik menu My Videos untuk mengunjungi
halaman MyVideos.aspx. Akan tampil ListView yang berasal dari Web User Control ListMyVideos
yang berisi sebuah item video yang pernah di-upload oleh member naya
10. Klik tombol “Add to Favorite”. Tombol akan berubah secara otomatis menjadi “Remove from
Favorite” (dan tentunya CommandName tombol ini juga tekah berubah)
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
143 Studi Kasus Membuat Website Testipi
11. Cobalah fungsi-fungsi lainnya seperti edit dan delete. Ketika tombol “Update” diklik, maka akan
tampil tulisan “Update in progres…” di bagian atas ListViewMyVideos
12. Coba juga upload video baru untuk melihat apakah terdapat item video baru di
ListViewMyVideos
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
144 Studi Kasus Membuat Website Testipi
Penjelasan
Pada tahap di atas kita telah menggunakan Web User Control yang kita bersi nama ListMyVideos
pada sebuah halaman, yaitu MyVideos.aspx. Jika kita ingin menambahkan secara manual, caranya
cukup mudah, yaitu dengan mendaftarkan dahulu Web User Control tersebut dengan menggunakan
<%@ Register %> atau yang disebut juga dengan Register directive. Register directive ini harus
ditempatkan di bagian atas code halaman. Untuk mendaftarkan Web User Control, Register directive
ini membutuhkan tiga informasi yang dituangkan dalam tiga atribut, yaitu file .ascx yang akan
didaftarkan, awalan tag, serta nama tag untuk digunakan di halaman ini. Pada kasus kita, isi Register
directive adalah sebagai berikut
<%@ Register src="ListMyVideos.ascx" tagname="ListMyVideos" tagprefix="uc1" %>
Code di atas berarti Web User Control yang akan didaftarkan bersumber dari ListMyVideos.aspx,
memiliki awalan tag uc1 dan nama tag ListMyVideos. Dengan demikian, cara menggunakannya
adalah dengan memanggil awalan tag, diikuti tanda titik dua (:), kemudian nama tag dan jangan lupa
runat=“server”. Pada kasus kita, penggunaan Web User Control ListViewMyVideos adalah seperti
berikut
<uc1:ListMyVideos ID="ListMyVideos1" runat="server" />
Ada juga cara menambahkan Web User Control secara otomatis dan lebih mudah lagi, yaitu dengan
menggunakan Design View pada halaman di mana kita ingin menambahkan Web User Control,
kemudian drag-and-drop Web User Control yang akan ditambahakan ke halaman tersebut. Otomatis
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
145 Studi Kasus Membuat Website Testipi
Visual Studio akan menambahkan Register directive dan tag yang mendeklarasikan Web User
Control tersebut.
Pada langkah ke-7, kita membuat objek ListView yang mengacu pada ListView yang berada pada
Web User Control. Hal ini dilakukan karena kita ingin setelah member melakukan upload, maka
daftar video yang ada di ListView di-bind ulang. Dengan demikian, baik setelah member melakukan
upload, delete, maupun edit, maka tampilan daftar video ListView akan selalu up to date.
Selanjutnya, kita akan mengubah halaman Default.aspx menjadi “berisi”. Rencananya, pada halaman
ini akan tampil daftar semua video yang ada di database dan bukan hanya video yang di-upload oleh
member tertentu. Daftar video yang akan diambil dapat dilihat oleh member maupun non-member.
Jika sedang dilihat oleh member, maka terdapat tombol Add To Favorite atau Remove From Favorite
tergantung dari apakah video tersebut ada atau tidak pada daftar Favorite member tersebut. Namun
jika sedang dilihat oleh non-member, maka tombol tersebut tidak akan nampak.
Untuk menampilkan daftar video milik member pada halaman MyVideos.aspx, kita membuat Web
User Control ListMyVideos. Sedangkan untuk menampilkan daftar semua video pada halaman
Default.aspx, kita juga akan membuat WebUserControl namun kita beri nama ListVideos. Ikuti
langkah berikut ini untuk membuat Web User Control tersebut.
Ikuti Langkah Berikut
Membuat Web User Control ListVideos
1. Pada root website Testipi, buatlah sebuah Web User Control baru (berikut code behind-nya).
Beri nama Web User Control tersebut sebagai ListVideos.ascx.
2. Isilah ListVideos.ascx dengan code berikut
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="ListVideos.ascx.cs" Inherits="ListVideos" %> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:Label ID="LabelMessage" SkinID="LabelMessage" runat="server"></asp:Label> <asp:ListView ID="ListViewVideos" runat="server" DataSourceID="LinqDataSourceVideos" DataKeyNames="ID" OnItemCommand="ListViewVideos_ItemCommand" OnItemDataBound="ListViewVideos_ItemDataBound"> <LayoutTemplate> <div runat="server" id="listVideos"> <div runat="server" id="itemPlaceholder" /> </div> <hr /> <asp:DataPager ID="DataPagerVideos" runat="server" PageSize="3"> <Fields> <asp:NextPreviousPagerField ButtonType="Link" ShowFirstPageButton="True" ShowNextPageButton="false" ShowPreviousPageButton="false" ShowLastPageButton="False" /> <asp:NumericPagerField ButtonCount="5" />
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
146 Studi Kasus Membuat Website Testipi
<asp:NextPreviousPagerField ButtonType="Link" ShowFirstPageButton="False" ShowNextPageButton="false" ShowPreviousPageButton="false" ShowLastPageButton="True" /> </Fields> </asp:DataPager> </LayoutTemplate> <ItemTemplate> <table> <tr> <td rowspan="2" valign="top"><a href='WatchVideo.aspx?video=<%# Eval("ID") %>'><asp:Image runat="server" ID="Image1" Width="60" ImageUrl="~/Images/iconvideo.png" /></a></td> <td valign="top"> <span class="videotitle"> <a href='WatchVideo.aspx?video=<%# Eval("ID") %>'><%# Eval("Title") %></a> </span> <br /> uploaded by: <%# Eval("Username") %> </td> </tr> <tr> <td><asp:Label ID="LabelDescription" runat="server" Text='<%# Eval("Description") %>' /></td> </tr> <tr> <td colspan="2" align="left"> <asp:HiddenField ID="HiddenFieldID" runat="server" Value='<%# Eval("ID") %>' /> </td> </tr> </table> <asp:Button ID="ButtonFavorite" runat="server" Font-Size="Smaller" CommandArgument='<%# DataBinder.Eval(Container.DataItem, "ID") %>' /> </ItemTemplate> <ItemSeparatorTemplate> <div class="separator"></div> </ItemSeparatorTemplate> <EmptyDataTemplate> There is no video. </EmptyDataTemplate> </asp:ListView> <asp:LinqDataSource ID="LinqDataSourceVideos" runat="server" ContextTypeName="TestipiDataContext" OrderBy="ID desc" TableName="Videos"> </asp:LinqDataSource> </ContentTemplate> </asp:UpdatePanel>
3. Buka code behind dari ListVideos.ascx, yaitu ListVideos.ascx.cs. Isilah ListVideos.ascx.cs dengan
code berikut
using System; using System.Linq;
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
147 Studi Kasus Membuat Website Testipi
using System.Web.UI; using System.Web.UI.WebControls; public partial class ListVideos : UserControl { TestipiDataContext database = new TestipiDataContext(); protected void Page_Load(object sender, EventArgs e) { } protected void ListViewVideos_ItemDataBound(object sender, ListViewItemEventArgs e) { Button buttonFavorite = (Button)e.Item.FindControl("ButtonFavorite"); if (this.Page.User.Identity.IsAuthenticated) { HiddenField hiddenFieldID = (HiddenField)e.Item.FindControl("HiddenFieldID"); bool isInMyFavorite = database.Favorites.Any(favorite => favorite.VideoID == int.Parse(hiddenFieldID.Value) && favorite.Username == this.Page.User.Identity.Name); if (isInMyFavorite) { buttonFavorite.Text = "Remove from Favorite"; buttonFavorite.CommandName = "RemoveFromFavorite"; } else { buttonFavorite.Text = "Add to Favorite"; buttonFavorite.CommandName = "AddToFavorite"; } } else { buttonFavorite.Visible = false; } } protected void ListViewVideos_ItemCommand(object sender, ListViewCommandEventArgs e) { HiddenField hiddenFieldID = (HiddenField)e.Item.FindControl("HiddenFieldID"); int videoID = int.Parse(hiddenFieldID.Value); Favorite favorite = new Favorite(); favorite.Username = this.Page.User.Identity.Name; favorite.VideoID = videoID; if (e.CommandName == "AddToFavorite") { database.Favorites.InsertOnSubmit(favorite); } else if (e.CommandName == "RemoveFromFavorite") {
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
148 Studi Kasus Membuat Website Testipi
database.Favorites.Attach(favorite); database.Favorites.DeleteOnSubmit(favorite); } database.SubmitChanges(); ListViewVideos.DataBind(); } }
4. Web User Control ListVideos siap digunakan di halaman Default.aspx
Penjelasan
Code pada Web User Control ListVideos, hampir mirip dengan Web user Control ListMyVideos,
bahkan lebih sederhana karena pada Web User Control ListVideos tidak ada fungsi edit dan delete.
Fungsi add to favorite dan remove from favorite tetap ada dan tombol yang digunakan untuk
menjalankan fungsi itu diatur di dalam method ListViewVideos_ItemDataBound. Kita cek terlebih
dahulu apakah pengunjung web sedang dalam keadaan login atau tidak. Jika sedang dalam keadaan
login, maka cek apakah item video yang sedang di-bind ada di daftar favorite atau tidak. Jika ada,
maka tulisan tombol menjadi “Remove from Favorite” dan CommandName menjadi
“RemoveFromFavorite”. Namun jika tidak ada, tulisan tombol menjadi “Add to Favorite” dan
CommandName menjadi “AddToFavorite”. Jika pengunjung web tidak sedang dalam keadaan login,
maka kita membuat tombol untuk add to favorite atau remove from favorite menjadi tidak terlihat
dengan menuliskan code berikut
buttonFavorite.Visible = false;
Pada ListViewVideos, kita menggunakan LayoutTemplate, ItemTemplate, ItemSeparatorTemplate
dan EmptyDataTemplate. ListViewVideos mengambil data dari sebuah LinqDataSource bernama
LinqDataSourceVideos. Pada LinqDataSourceVideos kita cukup menentukan DataContext mana yang
digunakan, data dari tabel apa yang diambil, serta bagaimana data akan diurutkan. Kita
menggunakan TestipiDataContext, mengambil data dari tabel Videos, serta mengurutkan data
berdasarkan ID secara descending (dari besar ke kecil).
Selanjutnya kita akan menggunakan Web User Control ListVideos pada halaman Default.aspx.
Ikuti Langkah Berikut
Menggunakan Web User Control ListVideos pada halaman Default.aspx
1. Buka halaman Default.aspx dalam mode Design View
2. Drag-and-drop ListVideos.ascx yang ada di Solution Explorer ke halaman Default.aspx sebelum
tulisan “Daftar semua video akan ada di halaman ini”
3. Akan tampil Web User Control ListVideos pada halaman Default.aspx
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
149 Studi Kasus Membuat Website Testipi
4. Beralihlah ke mode Source View dan hapus tulisan “Daftar semua video akan ada di halaman ini”
5. Berikut adalah code final dan lengkap halaman Default.aspx
<%@ Page Language="C#" MasterPageFile="~/TestipiMasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" Title="Untitled Page" %> <%@ Register src="ListVideos.ascx" tagname="ListVideos" tagprefix="uc1" %> <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> <h2>All Videos</h2> <uc1:ListVideos ID="ListVideos1" runat="server" /> </asp:Content>
6. Buka code behind Default.aspx.cs. Berikut adalah code final dan lengkap Default.aspx.cs
using System; using System.Web.UI; public partial class _Default : Page { protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { this.Title = Config.SiteName + " : Home"; } } }
7. Jalankan website Testipi pada browser. Pada halaman Home (yaitu Default.aspx) akan tampil
daftar video yang ada di website Testipi
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
150 Studi Kasus Membuat Website Testipi
8. Klik menu “Login” kemudian login sebagai naya
9. Klik menu “Home” dan perhatikan bahwa sekarang ada tombol “Add To Favorite” atau “Remove
From Favorite”. Cobalah klik tombol tersebut pada sebuah video maka video tersebut akan
ditambahkan ke daftar Favorite member
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
151 Studi Kasus Membuat Website Testipi
Penjelasan
Pada halaman Default.aspx, kita menggunakan Web User Control ListVideos. Kali ini kita cukup
melakukan drag-and-drop tanpa menambahkan sesuatu di code behind, karena fungsi Web User
Control ListVideos memang cukup sederhana, yaitu hanya menampilkan daftar video serta adanya
fungsi add to favorite dan remove from favorite.
Ketika mengklik tombol “Add to Favorite” dan “Remove from Favorite”, fungsi dijalankan tanpa
refresh karena kita menggunakan AJAX dengan menempatkan ListViewVideos di dalam control
UpdatePanel dan memiliki ScriptManager pada Web User Control ListVideos.
Selanjutnya, kita akan membuat halaman MyFavorites.aspx. Namun sebelum itu kita akan membuat
Web user Control baru lagi yang bertujuan untuk menampilkan daftar video yang menjadi favorite
bagi member yang sedang login.
Ikuti Langkah Berikut
Membuat Web User Control ListMyFavorites
1. Buatlah sebuah Web User Control baru bernama ListMyFavorites pada root website Testipi.
2. Isi ListMyFavorites.ascx dengan code berikut
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="ListMyFavorites.ascx.cs" Inherits="ListMyFavorites" %> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:ListView ID="ListViewMyFavorites" runat="server" DataSourceID="LinqDataSourceMyFavorites" DataKeyNames="Username, VideoID"> <LayoutTemplate> <div runat="server" id="listFavorites"> <div runat="server" id="itemPlaceholder" /> </div>
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
152 Studi Kasus Membuat Website Testipi
<hr /> <asp:DataPager ID="DataPagerMyFavorites" runat="server" PageSize="3"> <Fields> <asp:NextPreviousPagerField ButtonType="Link" ShowFirstPageButton="True" ShowNextPageButton="false" ShowPreviousPageButton="false" ShowLastPageButton="False" /> <asp:NumericPagerField ButtonCount="5" /> <asp:NextPreviousPagerField ButtonType="Link" ShowFirstPageButton="False" ShowNextPageButton="false" ShowPreviousPageButton="false" ShowLastPageButton="True" /> </Fields> </asp:DataPager> </LayoutTemplate> <ItemTemplate> <table> <tr> <td rowspan="2" valign="top"><a href='WatchVideo.aspx?video=<%# Eval("VideoID") %>'><asp:Image ID="Image1" runat="server" Width="60" ImageUrl="~/Images/iconvideo.png" /></a></td> <td valign="top"> <span class="videotitle"> <a href='WatchVideo.aspx?video=<%# Eval("VideoID") %>'><%# Eval("Video.Title") %></a> </span> <br /> uploaded by: <%# Eval("Video.Username") %> </td> </tr> <tr> <td><asp:Button ID="ButtonDelete" runat="server" Text="Remove" Font-Size="Smaller" CommandName="Delete" /></td> </tr> </table> </ItemTemplate> <ItemSeparatorTemplate> <div class="separator"></div> </ItemSeparatorTemplate> <EmptyDataTemplate> There is no video in your favorite list. </EmptyDataTemplate> </asp:ListView> <asp:LinqDataSource ID="LinqDataSourceMyFavorites" runat="server" ContextTypeName="TestipiDataContext" TableName="Favorites" EnableDelete="True" Where="Username == @Username" OrderBy="VideoID DESCENDING"> <WhereParameters> <asp:ControlParameter ControlID="HiddenFieldUsername" Name="Username" PropertyName="Value" Type="String" /> </WhereParameters> </asp:LinqDataSource> </ContentTemplate> </asp:UpdatePanel>
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
153 Studi Kasus Membuat Website Testipi
<asp:HiddenField ID="HiddenFieldUsername" runat="server" />
3. Isilah ListMyFavorites.ascx.cs dengan code berikut
using System; using System.Web.UI; public partial class ListMyFavorites : UserControl { protected void Page_Load(object sender, EventArgs e) { HiddenFieldUsername.Value = this.Page.User.Identity.Name; } }
4. Web User Control ListMyFavorites siap digunakan di halaman MyFavorites.aspx
Penjelasan
Pada Web User Control ListMyFavorites, kita membuat sebuah ListView bernama
ListViewMyFavorites. Kali ini kita menggunakan CommandName Delete pada sebuah tombol di
ItemTemplate pada ListViewMyFavorites. Seperti yang telah kita ketahui bahwa CommandName
Delete akan otomatis menghapus record favorite tersebut dari tabel Favorites di database tanpa
perlu kita tambahkan code apapun. Karena sebenarnya fungsi untuk menghapus sudah tertera pada
kelas TestipiDataContext. Kita cukup memberikan properti EnableDelete=“True” pada
LinqDataSource yang menjadi sumber data bagi ListViewMyFavorites.
Lebih jauh tentang ListViewMyFavorites, kita tentunya masih mengguanakan TestipiDataContext,
namun mengambil tabel Favorites dengan menyatakan TableName=“Favorites”. Dan lagi-lagi kita
butuh parameter tambahan yang dimaksudkan untuk mengambil list favorite milik member yang
sedang login saja. Parameter tambahan ini kita peroleh dari control HiddenField yang properti Value-
nya diisi dengan username member yang sedang login pada Page_Load di code behind.
Selanjutnya kita akan menggunakan Web User Control ListMyFavorites pada halaman
MyFavorites.aspx
Ikuti Langkah Berikut
Menggunakan Web User Control ListMyFavorites pada halaman MyFavorites.aspx
1. Buatlah sebuah halaman baru bernama MyFavorites.aspx pada root website Testipi.
2. Isilah MyFavorites.aspx dengan code berikut
<%@ Page Language="C#" MasterPageFile="~/TestipiMasterPage.master" AutoEventWireup="true" CodeFile="MyFavorites.aspx.cs" Inherits="MyFavorites" %> <%@ Register src="ListMyFavorites.ascx" tagname="ListMyFavorites" tagprefix="uc1" %> <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> <h2>My Favorites</h2>
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
154 Studi Kasus Membuat Website Testipi
<uc1:ListMyFavorites ID="ListMyFavorites1" runat="server" /> </asp:Content>
3. Setelah itu, isilah MyFavorites.aspx.cs dengan code berikut
using System; using System.Web.UI; public partial class MyFavorites : Page { protected void Page_Load(object sender, EventArgs e) { this.Title = Config.SiteName + " : My Favorites"; } }
4. Jalankan website Testipi, dan login sebagai naya. Klik menu “My Favorites” untuk pergi ke
halaman MyFavorites.aspx
5. Klik tombol “Remove” untuk menghapus video dari daftar video favorite naya
6. Pergi ke halaman Home dan tambahkan semua video yang ada di website Testipi
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
155 Studi Kasus Membuat Website Testipi
7. Kembali lagi ke halaman My Favorite untuk melihat hasilnya, yaitu daftar favorite naya benar-
benar bertambah
Penjelasan
Pada halaman MyFavorites.aspx, kita menggunakan Web User Control ListMyFavorites. Web User
Control ini menggunakan AJAX sehingga ketika kita menghapus video dari daftar favorite, maka
fungsi penghapusan berjalan tanpa adanya refresh. Fungsi menghapus ini tersedia cukup dengan
membuat tombol yang memiliki CommandName Delete pada ListView.
Jika member tidak memiliki video di daftar favorite-nya, maka akan tampil tulisan “There is no video
in your favorite list.” seperti pada langkah yang ke-5 yaitu setelah menghapus satu-satunya video
yang merupakan favorite bagi member naya.
Tidak terasa, website Testipi hampir selesai. Menurut rencana awal, sampai tahap ini yang belum
kita implementasikan hanya tinggal fungsi pencarian dan membuat video player. Sekarang kita akan
berlanjut ke implementasi fungsi pencarian.
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
156 Studi Kasus Membuat Website Testipi
Sekaranng saatnya memanfaatkan kegunaan Web User Control. Idenya adalah kita menggunakan
kembali Web User Control ListVideos untuk menampilkan video-video hasil pencarian. Namun
tentunya kita menampilkan video-video hasil pencarian di halaman Default.aspx, melainkan kita
akan buat halaman baru bernama Search.aspx. Sebelum itu, kita buat dahulu sebuah Web User
Control yang berfungsi sebagai tempat menuliskan keyword untuk pencarian.
Ikuti Langkah Berikut
Membuat Web User Control SearchBox
1. Tambahkan sebuah Web User Control bernama SearchBox.ascx pada root website Testipi
2. Tuliskan code berikut pada SearchBox.ascx
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="SearchBox.ascx.cs" Inherits="SearchBox" %> Search videos <asp:TextBox ID="TextBoxSearch" runat="server" MaxLength="50" CssClass="arial10black" /> <asp:Button ID="ButtonGo" runat="server" Text="Go!" OnClick="ButtonGo_Click" CssClass="arial10black" />
3. Tuliskan code berikut pada SearchBox.ascx.cs
using System; using System.Web.UI; public partial class SearchBox : UserControl { protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { Utilities.BindButton(this.Page, TextBoxSearch, ButtonGo); if (Request.QueryString["keyword"] != null) { TextBoxSearch.Text = Request.QueryString["keyword"]; } } } protected void ButtonGo_Click(object sender, EventArgs e) { if (TextBoxSearch.Text.Trim() != "") { Response.Redirect("Search.aspx?Keyword=" + TextBoxSearch.Text); } } }
4. Web User Control SearchBox sudah siap untuk digunakan
Penjelasan
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
157 Studi Kasus Membuat Website Testipi
Web User Control SearchBox hanya berisi tulisan “Search videos”, sebuah TextBox untuk menuliskan
keyword, dan sebuah Button untuk menjalankan fungsi pencarian. Di code behind, kita menentukan
bahwa jika menekan enter pada TextBoxSearch, maka akan sama saja dengan menekan ButtonGo.
Hal ini karena kita menggunakan methond BindButton yang kita buat di kelas Utilities.
Ketika ButtonGo diklik, maka akan ditangkap event Click yang dihandle oleh method ButtonGo_Click
pada code behind. Pada method ini, kita periksa apakah terdapat tulisan di TextBoxSearch. Jika ada,
maka pengunjung akan di-redirect ke halaman Search.aspx yang disertakan dengan QueryString
berupa keyword yang dimasukkan. Nantinya keyword tersebut akan diolah di halaman Search.aspx,
bukan diolah di Web User Control SearchBox ini.
Pertanyaan yang timbul adalah: “Di mana Web User Control SearchBox akan kita tempatkan?”
Jawabannya tentunya cukup mudah, yaitu di Master Page. Mengapa? Karena kita ingin Web User
Control SearchBox ini selalu tampil di setiap halaman website Testipi. Selanjutnya kita
menambahkan Web User Control SearchBox pada Master Page.
Ikuti Langkah Berikut
Menggunakan Web User Control SearchBox pada TestipiMasterPage.master
1. Bukalah TestipiMasterPage.master
2. Gunakan mode Design View
3. Drag-and-drop Web User Control SearchBox ke TestipiMasterPage.master. Letakkan sebelum
tulisan “Fungsi search akan ada di sini”
4. Beralih ke mode Source View dan hapus tulisan “Fungsi search akan ada di sini”
5. Dengan demikian, kita mendapatkan versi final dari MasterPage.master sebagai berikut
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="TestipiMasterPage.master.cs" Inherits="TestipiMasterPage" %> <%@ Register src="SearchBox.ascx" tagname="SearchBox" tagprefix="uc1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Testipi</title>
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
158 Studi Kasus Membuat Website Testipi
</head> <body> <form id="form1" runat="server"> <div id="wrapper"> <div id="header"> <img src="Images/logo.jpg" alt="Testipi" /> </div> <div id="menupanel" class="arial10black"> <div id="loginstatus"> <asp:LoginView ID="LoginView1" runat="server"> <AnonymousTemplate> You're not logged in. Please <asp:LoginStatus ID="LoginStatusAnonymous" runat="server" LoginText="login here" LogoutText="logout" /> </AnonymousTemplate> <LoggedInTemplate> You're logged in as <asp:LoginName ID="LoginName1" runat="server" /> [<asp:LoginStatus ID="LoginStatusLoggedIn" runat="server" LogoutText="logout" LoginText="login" LogoutAction="Redirect" LogoutPageUrl="Default.aspx" />] </LoggedInTemplate> </asp:LoginView> </div> <div id="search"> <uc1:SearchBox ID="SearchBox1" runat="server" /> </div> <div id="menu"> <asp:LoginView ID="LoginView2" runat="server"> <AnonymousTemplate> <span class="menulink"> <a href="Default.aspx" class="">Home</a> </span> <b>·</b> <span class="menulink"> <a href="Login.aspx" class="">Login</a> </span> <b>·</b> <span class="menulink"> <a href="Register.aspx" class="">Register</a> </span> </AnonymousTemplate> <LoggedInTemplate> <span class="menulink"> <a href="Default.aspx" class="">Home</a> </span> <b>·</b> <span class="menulink"> <a href="MyVideos.aspx" class="">My Videos</a> </span> <b>·</b> <span class="menulink"> <a href="MyFavorites.aspx" class="">My Favorites</a> </span> <b>·</b>
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
159 Studi Kasus Membuat Website Testipi
<span class="menulink"> <a href="ChangePassword.aspx" class="">Change Password</a> </span> </LoggedInTemplate> </asp:LoginView> </div> </div> <div id="contentcontainer"> <div id="content"> <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder> </div> </div> <div id="footer" class="arial10black"> Copyleft © 2008 Fu & Niko. All Rights Reversed </div> </div> </form> </body> </html>
6. Jalankan website Testipi pada browser. Sekarang sudah tampil Web User Control SearchBox di
bagian kanan atas walaupun belum berfungsi
Penjelasan
Kita telah menambahkan Web User Control SearchBox pada TestipiMasterPage.master. Hal ini
bertujuan untuk menghadirkan fungsi pencarian di setiap halaman website Testipi.
Selanjutnya kita akan membuat fungsi pencarian benar-benar berjalan. Sebelum membuat halaman
Search.aspx, kita harus sedikit mengubah Web User Control ListVideos agar dapat menampilkan
video yang termasuk dalam hasil pencarian saja.
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
160 Studi Kasus Membuat Website Testipi
Ikuti Langkah Berikut
Mengubah Web User Control ListVideos
1. Buka kembali Web User Control ListVideos.ascx
2. Pada ListViewVideos, hapus properti DataSourceID="LinqDataSourceVideos" dan tambahkan
properti OnPagePropertiesChanged="ListViewVideos_PagePropertiesChanged"
3. Berikut adalah code final dan lengkap dari halaman Web User Control ListVideos.ascx
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="ListVideos.ascx.cs" Inherits="ListVideos" %> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:Label ID="LabelMessage" SkinID="LabelMessage" runat="server"></asp:Label> <asp:ListView ID="ListViewVideos" runat="server" DataKeyNames="ID" OnItemCommand="ListViewVideos_ItemCommand" OnItemDataBound="ListViewVideos_ItemDataBound" OnPagePropertiesChanged="ListViewVideos_PagePropertiesChanged"> <LayoutTemplate> <div runat="server" id="listVideos"> <div runat="server" id="itemPlaceholder" /> </div> <hr /> <asp:DataPager ID="DataPagerVideos" runat="server" PageSize="3"> <Fields> <asp:NextPreviousPagerField ButtonType="Link" ShowFirstPageButton="True" ShowNextPageButton="false" ShowPreviousPageButton="false" ShowLastPageButton="False" /> <asp:NumericPagerField ButtonCount="5" /> <asp:NextPreviousPagerField ButtonType="Link" ShowFirstPageButton="False" ShowNextPageButton="false" ShowPreviousPageButton="false" ShowLastPageButton="True" /> </Fields> </asp:DataPager> </LayoutTemplate> <ItemTemplate> <table> <tr> <td rowspan="2" valign="top"><a href='WatchVideo.aspx?video=<%# Eval("ID") %>'><asp:Image runat="server" ID="Image1" Width="60" ImageUrl="~/Images/iconvideo.png" /></a></td> <td valign="top"> <span class="videotitle"> <a href='WatchVideo.aspx?video=<%# Eval("ID") %>'><%# Eval("Title") %></a> </span> <br /> uploaded by: <%# Eval("Username") %> </td> </tr> <tr>
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
161 Studi Kasus Membuat Website Testipi
<td><asp:Label ID="LabelDescription" runat="server" Text='<%# Eval("Description") %>' /></td> </tr> <tr> <td colspan="2" align="left"> <asp:HiddenField ID="HiddenFieldID" runat="server" Value='<%# Eval("ID") %>' /> </td> </tr> </table> <asp:Button ID="ButtonFavorite" runat="server" Font-Size="Smaller" CommandArgument='<%# DataBinder.Eval(Container.DataItem, "ID") %>' /> </ItemTemplate> <ItemSeparatorTemplate> <div class="separator"></div> </ItemSeparatorTemplate> <EmptyDataTemplate> There is no video. </EmptyDataTemplate> </asp:ListView> <asp:LinqDataSource ID="LinqDataSourceVideos" runat="server" ContextTypeName="TestipiDataContext" OrderBy="ID desc" TableName="Videos"> </asp:LinqDataSource> </ContentTemplate> </asp:UpdatePanel>
4. Beralih ke code behind-nya, yaitu ListVideos.ascx.cs. Tambahkan method BindVideos berikut
pada kelas ListVideos
protected void BindVideos() { string keywords = Request.QueryString["Keyword"]; if (keywords != null) { if (keywords != "*") { LinqDataSourceVideos.WhereParameters.Clear(); LinqDataSourceVideos.WhereParameters.Add("KeywordTitle", TypeCode.String, keywords); LinqDataSourceVideos.WhereParameters.Add("KeywordDescription", TypeCode.String, keywords); LinqDataSourceVideos.Where = "Title.Contains(@KeywordTitle) || Description.Contains(@KeywordDescription)"; } } ListViewVideos.DataSourceID = "LinqDataSourceVideos"; ListViewVideos.DataBind(); }
5. Tambahkan juga method berikut pada kelas ListVideos
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
162 Studi Kasus Membuat Website Testipi
protected void ListViewVideos_PagePropertiesChanged(object sender, EventArgs e) { BindVideos(); }
6. Ubah isi Page_Load sehingga menjadi seperi berikut
protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { BindVideos(); } }
7. Ganti code ListViewVideos.DataBind(); di dalam method ListViewVideos_ItemCommand menjadi
BindVideos();
8. Berikut adalah code final dan lengkap dari ListVideos.ascx.cs
using System; using System.Linq; using System.Web.UI; using System.Web.UI.WebControls; public partial class ListVideos : UserControl { TestipiDataContext database = new TestipiDataContext(); protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { BindVideos(); } } protected void ListViewVideos_ItemDataBound(object sender, ListViewItemEventArgs e) { Button buttonFavorite = (Button)e.Item.FindControl("ButtonFavorite"); if (this.Page.User.Identity.IsAuthenticated) { HiddenField hiddenFieldID = (HiddenField)e.Item.FindControl("HiddenFieldID"); bool isInMyFavorite = database.Favorites.Any(favorite => favorite.VideoID == int.Parse(hiddenFieldID.Value) && favorite.Username == this.Page.User.Identity.Name); if (isInMyFavorite) { buttonFavorite.Text = "Remove from Favorite"; buttonFavorite.CommandName = "RemoveFromFavorite"; }
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
163 Studi Kasus Membuat Website Testipi
else { buttonFavorite.Text = "Add to Favorite"; buttonFavorite.CommandName = "AddToFavorite"; } } else { buttonFavorite.Visible = false; } } protected void ListViewVideos_ItemCommand(object sender, ListViewCommandEventArgs e) { HiddenField hiddenFieldID = (HiddenField)e.Item.FindControl("HiddenFieldID"); int videoID = int.Parse(hiddenFieldID.Value); Favorite favorite = new Favorite(); favorite.Username = this.Page.User.Identity.Name; favorite.VideoID = videoID; if (e.CommandName == "AddToFavorite") { database.Favorites.InsertOnSubmit(favorite); } else if (e.CommandName == "RemoveFromFavorite") { database.Favorites.Attach(favorite); database.Favorites.DeleteOnSubmit(favorite); } database.SubmitChanges(); ListViewVideos.DataBind(); } protected void BindVideos() { string keywords = Request.QueryString["Keyword"]; if (keywords != null) { if (keywords != "*") { LinqDataSourceVideos.WhereParameters.Clear(); LinqDataSourceVideos.WhereParameters.Add("KeywordTitle", TypeCode.String, keywords); LinqDataSourceVideos.WhereParameters.Add("KeywordDescription", TypeCode.String, keywords); LinqDataSourceVideos.Where = "Title.Contains(@KeywordTitle) || Description.Contains(@KeywordDescription)"; } } ListViewVideos.DataSourceID = "LinqDataSourceVideos"; ListViewVideos.DataBind(); }
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
164 Studi Kasus Membuat Website Testipi
protected void ListViewVideos_PagePropertiesChanged(object sender, EventArgs e) { BindVideos(); } }
9. Sekarang Web User Control ListVideos dapat menampilkan semua video yang ada, maupun
vidoe yang hanya termasuk dalam hasil pencarian
Penjelasan
Pada ListViewVideos, kita menghapus properti DataSourceID=“LinqDataSourceVideos” agar
ListViewVideos tidak langsung mengambil data dari LinqDataSourceVideos. Mengapa? Karena
sebelum data dari LinqDataSourceVideos diambil, kita ingin melakukan pengecekan dahulu di code
behind, yaitu apakah ListViewVideos harus menampilkan semua video atau hanya menampilkan
video yang cocok dengan keyword pencarian saja. Selain itu, kita juga menambahkan properti
OnPagePropertiesChanged="ListViewVideos_PagePropertiesChanged". Hal ini dikarenakan
ListViewVideos sekarang tidak lagi langsung mengambil data dari LinqDataSourceVideos, sehingga
ketika kita mengklik nomor halaman pada DataPagerVideos, kita perlu menghandle event
PagePropertiesChanged dengan membuat method di code behind yang bernama
ListViewVideos_PagePropertiesChanged. Method ini memanggil method BindVideos.
Pada method BindVideos, pertama-tama kita membuat variabel dengan nama keywords bertipe
string untuk mengambil QueryString dengan nama “Keyword”. Jika keywords tidak ada isinya, maka
langsung ditentukan bahwa sumber data dari ListViewVideos adalah LinqDataSouceVideos dan
kemudian memanggil method DataBind data-data yang diperoleh dari agar sumber data ini
menempel pada ListViewVideos. Namun jika keywords ada isinya, itu artinya ListViewVideos sedang
digunakan untuk fungsi pencarian. Jika isi keywords adalah tanda asterix (*), maka kita tidak
melakukan apa-apa dan langsung menampilkan semua video karena tanda asterix sama saja artinya
dengan mengambil semua. Jika isi keywords bukan asterix, maka kita hanya mengambil video yang
judulnya atau keterangannya mengandung tulisan di isi keywords.
Selanjutnya kita akan membuat halaman Search.aspx untuk menampilkan hasil pencarian terhadap
suatu video
Ikuti Langkah Berikut
Menggunakan Web User Control ListVideos pada halaman Search.aspx
1. Buatlah sebuah halaman bernama Search.aspx pada root website Tetipi
2. Isilah Search.aspx dengan code berikut
<%@ Page Language="C#" MasterPageFile="~/TestipiMasterPage.master" AutoEventWireup="true" CodeFile="Search.aspx.cs" Inherits="Search" %> <%@ Register src="ListVideos.ascx" tagname="ListVideos" tagprefix="uc1" %> <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> <h2>Search Result</h2>
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
165 Studi Kasus Membuat Website Testipi
<asp:Label ID="LabelDescription" runat="server"></asp:Label> <br /> <uc1:ListVideos ID="ListVideos1" runat="server" /> </asp:Content>
3. Isilah Search.aspx.cs dengan code berikut
using System; using System.Web.UI; public partial class Search : Page { protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { string keywords = Request.QueryString["Keyword"]; LabelDescription.Text = "You searched for <span style=\"color:Red; font-weight:bold;\">" + keywords + "</span>"; this.Title = Config.SiteName + " : Video Search : " + keywords; } } }
4. Jalankan website Testipi pada browser. Ketikkan suatu keyword (misalnya “lion”) kemudian klik
tombol “Go!”
5. Anda akan di-redirect ke halaman Search.aspx dan ditampilkan hasil pencariannya
Penjelasan
Pada halaman Search.aspx, kita menggunakan Web User Control yang penah kita buat sebelumnya,
yaitu ListVideos. Hanya saja ListVideos ini sudah kita ubah agar mampu menampilkan video yang
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
166 Studi Kasus Membuat Website Testipi
memiliki judul atau keterangan yang mengandung kata kunci dari pencarian. Setelah mengklik
tombol “Go!”, Anda akan di-redirect ke halaman Search.aspx disertai dengan adanya QueryString
yang bernama “Keyword” dan berisi kata kunci yang Anda tuliskan di TextBoxSearch. QueryString ini
diolah pada ListVideos untuk digunakan sebagai filter bagi LinqDataSource agar hanya mengambil
record pada tabel Videos yang memiliki isi kolom Title atau Description yang mengandung kata kunci
tersebut.
Selanjutnya, kita akan menyelesaikan website Testipi dengan membuat sebuah halaman yang
menyediakan video player yang terbuat dari Silverlight. Pengunjung yang mengklik icon video
atau judul video yang ada di halaman-halaman lainnya (Default.aspx, MyVideos.aspx, My
Favorites.aspx) akan dibawa ke halaman ini dengan menyertakan QueryString berupa ID video yang
akan dimainkan. Sekarang kita implementasikan rencana tadi langkah demi langkah
Ikuti Langkah Berikut
Menyiapkan halaman WatchVideo.aspx yangmemiliki content Silverlight
1. Pada root website Testipi, buatlah sebuah folder bernama Silverlight
2. Isi folder tersebut dengan file Silverlight, yaitu Silverlight.js yang dapat diperoleh dari Silverlight
1.0 SDK. Caranya adalah dengan klik kanan folder tersebut, kemudian pilih Add Existing Item…
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
167 Studi Kasus Membuat Website Testipi
3. Cari lokasi Silverlight.js di komputer Anda. Jika Anda menginstal Silverlight 1.0 SDK dengan
default settings, harusnya file tersebut berada di “C:\Program Files\Microsoft Silverlight 1.0
SDK\Resources”. Pilih Silverlight.js kemudian klik tombol “Add”
4. Hasilnya, file Silverlight.js akan di-copy ke folder Silverlihgt pada website Testipi
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
168 Studi Kasus Membuat Website Testipi
5. Suatlah sebuah halaman baru bernama WatchVideo.aspx berikut code behind-nya
6. Isilah WatchVideo.aspx dengan code berikut
<%@ Page Language="C#" MasterPageFile="~/TestipiMasterPage.master" AutoEventWireup="true" CodeFile="WatchVideo.aspx.cs" Inherits="WatchVideo" %> <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> <script type="text/javascript" src="Silverlight/Silverlight.js"></script> <asp:HiddenField ID="HiddenFieldVideoFileName" runat="server" /> <center> <asp:Label ID="LabelTitle" runat="server" SkinID="LabelTitle"></asp:Label> <br /> <asp:Label ID="LabelUploader" runat="server" SkinID="LabelUploader"></asp:Label> <br /><br /> <!-- Elemen div ini merupakan tempat content Silverlight --> <div id="mySilverlightPluginHost"></div> <script type="text/javascript"> var parentElement = document.getElementById("mySilverlightPluginHost"); createMySilverlightPlugin(); </script> <br /> <asp:Label ID="LabelDescription" runat="server"></asp:Label> </center> </asp:Content>
7. Isilah WatchVideo.aspx.cs dengan code berikut
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
169 Studi Kasus Membuat Website Testipi
using System; using System.Linq; using System.Web.UI; public partial class WatchVideo : Page { TestipiDataContext database = new TestipiDataContext(); protected void Page_Load(object sender, EventArgs e) { int videoID; if (Request.QueryString["video"] == null) { Response.Redirect("Default.aspx"); } else if (!int.TryParse(Request.QueryString["video"], out videoID)) { Response.Redirect("Default.aspx"); } else if (!database.Videos.Any(vid => vid.ID == videoID)) { Response.Redirect("Default.aspx"); } else { Video video = database.Videos.Single(vid => vid.ID == videoID); HiddenFieldVideoFileName.Value = video.FileName; LabelTitle.Text = video.Title; LabelUploader.Text = "uploaded by: " + video.Username; LabelDescription.Text = video.Description; this.Title = Config.SiteName + " : Watch Video"; } } }
8. Buatlah folder baru bernama Script untuk menyimpan file-file Javascript. Klik kanan folder Script
ini, kemudian pilih Add New Item…
9. Pilih JScript File sebagai template, dan beri nama WatchVideo.aspx.js
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
170 Studi Kasus Membuat Website Testipi
10. Isilah WatchVideo.aspx.js dengan code berikut
function createMySilverlightPlugin() { Silverlight.createObject ( "XAML/WatchVideo.xaml", parentElement, "mySilverlightPlugin", { width:'400', height:'350', inplaceInstallPrompt:false, background:'Black', isWindowless:'true', framerate:'24', version:'1.0' }, { onError:null, onLoad:null }, null ); }
11. Buka kembali halaman WatchVideo.aspx. Import WatchVideo.aspx.js ke halaman tersebut
dengan membuat tag <script> yang mengacu pada WatchVideo.aspx.js. Tempatkan tag <script>
ini di bawah tag <script> yang meng-import Silverlight.js. Berikut adalah tag <script> yang harus
ditambahkan
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
171 Studi Kasus Membuat Website Testipi
<script type="text/javascript" src="Script/WatchVideo.aspx.js"></script>
12. Jalankan website Testipi dan klik icon video atau judul video pada salah satu item video
13. Anda akan dibawa ke halaman WatchVideo.aspx dan akan kotak berwarna hitam di tengah-
tengah halaman. Kotak hitam tersebut merupakan elemen div yang menandung content
Silverlight. Untuk memastikannya, klik kanan di dalam kotak hitam. Jika terdapat tulisan
“Silverlight Configuration”, maka berarti elemen div tersebut telah berisi content Silverlight
Penjelasan
Pada halaman WatchVideo.aspx, kita telah meng-import Silverlight.js dan WatchVideo.aspx.js. Kita
juga menyiapkan elemen div sebagai “rumah” bagi content Silverlight. Setelah elemen div tersebut,
Kita membuat script yang bertujuan untuk membuat content Silverlight ditempatkan dalam elemen
div tersebut. Pertama-tama kita membuat sebuah variable yang diisi dengan div tempat content
Silverlight. Setelah itu, kita panggil method createMySilverlightPlugin() yang ada di
WatchVideo.aspx.js. File JavaScript yang digunakan untuk membuat contentSilverlight bernama
WatchVideo.aspx.js adalah agar memudahkan kita untuk mengingat bahwa JavaSciprt yang
menangani halaman WatchVideo.aspx adalah WatchVideo.aspx.js. Di dalam WatchVideo.aspx.js,
ditentukan bahwa lebar content Silverlight adalah 400 pixel dan tingginya 350 pixel serta memiliki
background berwarna hitam.
Di code behind, kita melakukan beberapa kali pemeriksaan agar halaman WatchVideo.aspx dapat
menampilkan video yang sesuai dengan yang ada di QueryString. Yang pertama, kita periksa apakah
QueryString dengan nama “video” ada isinya atau tidak. Jika tidak ada, maka pengunjung website di-
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
172 Studi Kasus Membuat Website Testipi
redirect ke halaman Default.aspx. Jika ada isinya, maka berlanjut ke pemeriksaan selanjutnya, yaitu
apakah isi dari QueryString “video” merupakan bilangan integer atau bukan. Jika bukan, maka
pengunjung website di-redirect ke halaman Default.aspx. Jika iya, maka berlanjut ke pemeriksaan
selanjutnya apakah terdapat video dengan ID yang sama dengan isi QueryString “video”. Jika tidak
ada, maka pengunjung website di-redirect ke halaman Default.aspx. Jika ada, maka kita ambil data
video tersebut dan video siap dimainkan.
Ikuti Langkah Berikut
Membuat video player interakif dengan menggunakan Silverlight
1. Kita ingin agar content Silverlight yang akan kita jadikan video player tidak memiliki warna
background, sehingga kita harus menjadikan warna background content Silverlight menjadi
transparan. Buka file WatchVideo.aspx.js kemudian ganti code background:'Black' menjadi
background:'Transparent'
2. Cek apakah warna background content Silverlight telah menjadi transparan dengan menjalankan
website Testipi kemudian mengklik salah satu icon video atau judul video pada salah satu
item video. Anda akan dibawa ke halaman WatchVideo.aspx yang kali ini terdapat content
Silverlight yang memiliki warna background transparan. Jika Anda klik kanan bagian tengah,
maka akan tampil tulisan “Silverlight Configuration”
3. Kembali ke Visual Studio dan buatlah folder baru bernama XAML di root website Testipi
4. Klik kanan folder XAML, kemudian pilih Add New Item…
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
173 Studi Kasus Membuat Website Testipi
5. Karena tidak ada template untuk membuat file XAML pada Visual Studio, pilih Text File sebagai
template, namun beri nama file tersebut sebagai WatchVideo.xaml. Klik tombol “Add”
6. Setelah file WatchVideo.xaml dibuat, Visual Studio secara otomatis akan membuka file tersebut
dengan mode Split View antara Design View dengan XAML View
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
174 Studi Kasus Membuat Website Testipi
7. Isi WatchVideo.xaml dengan code berikut (tuliskan code di bagian XAML View)
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Loaded="Canvas_Loaded"> <Rectangle Width="400" Height="350" RadiusX="10" RadiusY="10" Name="Container"> <Rectangle.Fill> <!--<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1"> <GradientStop Color="#FFD12928" Offset="0.0" /> <GradientStop Color="#FF720200" Offset="1.0" /> </LinearGradientBrush>--> <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1"> <GradientStop Color="#FF000000" Offset="0"/> <GradientStop Color="#FF616161" Offset="1"/> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> <MediaElement x:Name="Media" Source="" Width="390" Height="290" Canvas.Left="5" Canvas.Top="5" Stretch="UniformToFill" Opacity="1" /> <Rectangle Name="Panel" Width="390" Height="35" Canvas.Left="5" Canvas.Top="305" RadiusX="10" RadiusY="10" Opacity="0.16"> <Rectangle.Fill> <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5"> <GradientStop Color="#FF000000" Offset="0"/> <GradientStop Color="#FFFFFFFF" Offset="0.543"/> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> <Rectangle Name="Glassy" Width="390" Height="18.667" Fill="#FFFFFFFF" Canvas.Left="5" Canvas.Top="305" RadiusX="10" RadiusY="10" Opacity="0.095"/> <Path Name="Logo" Opacity="0.75" RenderTransformOrigin="0,1.43818972448474E-08" Width="53.051" Height="14.94" Fill="#FFFFFFFF" Stretch="Fill" Canvas.Left="320" Canvas.Top="317.063" Data="F1 M28.425634,16.231405 C28.462744,16.705 28.383844,17.144272 28.283438,17.560963 L15.627155,17.560963 C15.615436,17.760183 15.609576,17.912529 15.609575,18.017998 15.609576,19.260193 15.964069,20.262152 16.673056,21.023876 17.382042,21.785601 18.246302,22.166462 19.265835,22.166462 20.94162,22.166462 22.248264,21.299269 23.185766,19.564882 L26.592354,20.134859 28.863651,19.775366 C29.297239,20.806622 29.836294,21.536119 30.480816,21.963856 31.125338,22.391592 32.00423,22.605461 33.117496,22.605461 34.265919,22.605461 35.185829,22.347647 35.877224,21.83202 36.357685,21.480453 36.597919,21.052717 36.597919,20.548807 36.597919,20.208961 36.474873,19.904272 36.228783,19.634739 35.970928,19.376904 35.273682,19.060505 34.137016,18.685514 31.090183,17.677696 29.203491,16.880816 28.476938,16.294874 L28.425634,16.231405 z M42.759563,10.845822 L42.823761,11.001729 42.856255,10.845822 42.759563,10.845822 z M67.537224,10.266 C66.576286,10.266001 65.700317,10.608776 64.909302,11.294329 64.118286,11.979881 63.505981,12.987701 63.072388,14.31779 L62.422001,17.807074 C62.422001,19.26021 62.776493,20.388149 63.485474,21.190889 64.194458,21.993629 65.029419,22.395 65.990356,22.395 66.82238,22.395 67.625114,22.093241 68.398552,21.489719 69.171989,20.886185 69.813591,19.884232 70.323357,18.483837 70.833115,17.083437 71.087997,15.785574 71.087997,14.590253 71.087997,13.19571 70.754013,12.126367 70.086052,11.38222 69.418083,10.638074 68.568474,10.266001 67.537224,10.266 z M34.488571,10.142491 C33.433899,10.142491 32.675121,10.318274 32.212238,10.669838 31.749353,11.021403 31.517912,11.425702 31.517912,11.882736
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
175 Studi Kasus Membuat Website Testipi
31.517912,12.35149 31.752283,12.738211 32.221027,13.042899 32.514023,13.230411 33.457367,13.558536 35.051064,14.027282 37.511967,14.74213 39.158428,15.445259 39.990448,16.136671 40.651844,16.68564 41.126595,17.298071 41.36628,17.994598 L42.697014,11.609852 38.390862,12.357349 C38.144772,11.677657 37.746338,11.167889 37.195564,10.828041 36.445576,10.371008 35.543243,10.142491 34.488571,10.142491 z M20.61833,9.8270006 C19.575382,9.8270006 18.640833,10.219562 17.814676,11.004683 16.988522,11.789805 16.428963,12.949911 16.136,14.484999 L24.028419,14.484999 C24.040138,14.262354 24.045998,14.092439 24.045998,13.975256 24.045998,12.592505 23.735456,11.555441 23.114374,10.864064 22.493294,10.172688 21.66128,9.8270006 20.61833,9.8270006 z M76.529228,7.1020007 L81.573997,7.1020007 77.671768,25.77 72.626999,25.77 76.529228,7.1020007 z M67.988159,6.6620002 C69.945175,6.6620002 71.518402,7.3358393 72.70784,8.6835194 73.897278,10.031197 74.491997,12.040997 74.491997,14.712914 74.491997,18.076254 73.466621,20.918098 71.415863,23.238449 69.658066,25.21895 67.578011,26.209202 65.17569,26.209202 62.703064,26.209202 60.833942,25.207232 59.568333,23.203293 L57.546867,32.889 52.501999,32.889 57.880848,7.10146 62.662048,7.10146 62.257755,9.0175085 C63.277275,8.1737442 64.232346,7.5702186 65.122955,7.2069306 66.013573,6.8436437 66.968643,6.6620002 67.988159,6.6620002 z M50.04541,0.63299966 L48.691952,7.101706 51.767998,7.101706 50.994591,10.845822 47.90097,10.845822 46.26627,18.668036 C45.973316,20.085995 45.826836,20.894583 45.826836,21.0938 45.826836,21.480516 45.949879,21.782272 46.195961,21.999067 46.442123,22.215876 46.887394,22.324261 47.531845,22.324261 47.726219,22.32423 48.173626,22.293097 48.874168,22.229061 L52.036228,7.1020007 57.081001,7.1020007 53.178772,25.77 48.447754,25.77 48.410713,25.94533 C47.543564,26.121111 46.652973,26.209 45.738949,26.209 43.957771,26.209 42.662907,25.866228 41.854343,25.180687 41.139267,24.574404 40.740395,23.759607 40.717339,22.731476 40.472992,23.311201 40.040691,23.799082 39.515846,24.257816 38.027584,25.558605 35.929958,26.209 33.222965,26.209 30.527691,26.209 28.444712,25.713881 26.97403,24.723639 L25.48455,23.287136 C25.123299,23.754251 24.667439,24.106018 24.178934,24.407686 22.708225,25.315895 21.058807,25.77 19.230677,25.77 16.72286,25.77 14.683792,24.976049 13.113476,23.388149 11.543159,21.800249 10.758,19.69965 10.757999,17.086351 10.758,14.531647 11.466987,12.258195 12.884959,10.265997 14.818558,7.5706649 17.578331,6.223 21.164276,6.2229991 23.44944,6.223 25.26585,6.929059 26.61351,8.3411798 L27.621115,10.030747 C27.777021,9.5962181 28.072548,9.2348766 28.424204,8.8944368 29.959339,7.4061456 32.238605,6.6620002 35.261997,6.6620011 37.66431,6.6620002 39.48069,7.1014562 40.71114,7.9803686 L40.9534,8.2296963 41.186405,7.101706 43.64724,7.101706 44.262447,4.1134458 50.04541,0.63299966 z M0.8964746,7.6455001E-07 L21.198999,7.6455001E-07 20.302525,4.3067188 12.849476,4.3067188 8.3671017,25.77 3.0585608,25.77 7.558516,4.3067188 0,4.3067188 0.8964746,7.6455001E-07 z M78.006195,-4.7300622E-07 L83.050995,-4.7300622E-07 82.101799,4.5700002 77.056999,4.5700002 78.006195,-4.7300622E-07 z M53.513199,-4.7300622E-07 L58.558002,-4.7300622E-07 57.608807,4.5699992 52.564003,4.5699992 53.513199,-4.7300622E-07 z" /> <Canvas x:Name="ButtonPanel" Canvas.Top="305" Canvas.Left="5" Width="390" Height="35"> <Canvas Name="Button1" Width="28" Height="48" Canvas.Left="20" Canvas.Top="-7" MouseEnter="MouseEnter" MouseLeave="MouseLeave" MouseLeftButtonDown="Media_Play"> <Rectangle Width="28" Height="48" RadiusX="10" RadiusY="10" RenderTransformOrigin="0.5,0.5" Stroke="#FF373737" Opacity="0.68"> <Rectangle.RenderTransform> <TransformGroup> <ScaleTransform ScaleX="1" ScaleY="1"/> <SkewTransform AngleX="0" AngleY="0"/> <RotateTransform Angle="-270"/> <TranslateTransform X="0" Y="0"/> </TransformGroup>
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
176 Studi Kasus Membuat Website Testipi
</Rectangle.RenderTransform> <Rectangle.Fill> <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5"> <GradientStop Color="#FFD8D8D8" Offset="0" Name="Bawah1"/> <GradientStop Color="#FF535353" Offset="1" Name="Atas1"/> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> <Path Width="10" Height="10" Fill="#FFFFFFFF" Stretch="Fill" Data="M250.5,419.5 L264,419.5 264,406.5 z" RenderTransformOrigin="0.5,0.5" Opacity="0.7" Canvas.Left="6.702" Canvas.Top="19.999"> <Path.RenderTransform> <TransformGroup> <ScaleTransform ScaleX="1" ScaleY="1"/> <SkewTransform AngleX="0" AngleY="0"/> <RotateTransform Angle="-45"/> <TranslateTransform X="0" Y="0"/> </TransformGroup> </Path.RenderTransform> </Path> </Canvas> <Canvas Name="Button2" Width="28" Height="48" Canvas.Left="73" Canvas.Top="-7" MouseEnter="MouseEnter" MouseLeave="MouseLeave" MouseLeftButtonDown="Media_Pause"> <Rectangle Width="28" Height="48" RadiusX="10" RadiusY="10" RenderTransformOrigin="0.5,0.5" Stroke="#FF373737" Opacity="0.68"> <Rectangle.RenderTransform> <TransformGroup> <ScaleTransform ScaleX="1" ScaleY="1"/> <SkewTransform AngleX="0" AngleY="0"/> <RotateTransform Angle="-270"/> <TranslateTransform X="0" Y="0"/> </TransformGroup> </Rectangle.RenderTransform> <Rectangle.Fill> <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5"> <GradientStop Color="#FFD8D8D8" Offset="0" Name="Bawah2"/> <GradientStop Color="#FF535353" Offset="1" Name="Atas2"/> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> <Path RenderTransformOrigin="0.187500006053597,0.5" Width="10.234" Height="13.685" Fill="#FFFFFFFF" Stretch="Fill" Data="F1 M3.75,0 L6,0 6,7.5 3.75,7.5 3.75,0 z M-4.4703484E-08,0 L2.25,0 2.25,7.5 -4.4703484E-08,7.5 -4.4703484E-08,0 z" Opacity="0.7" Canvas.Left="9.565" Canvas.Top="17.768"> <Path.RenderTransform> <TransformGroup> <ScaleTransform ScaleX="1" ScaleY="1"/> <SkewTransform AngleX="0" AngleY="0"/> <RotateTransform Angle="0"/> <TranslateTransform X="0" Y="0"/> </TransformGroup> </Path.RenderTransform> </Path> </Canvas>
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
177 Studi Kasus Membuat Website Testipi
<Canvas Name="Button3" Width="28" Height="48" Canvas.Left="126" Canvas.Top="-7" MouseEnter="MouseEnter" MouseLeave="MouseLeave" MouseLeftButtonDown="Media_Stop"> <Rectangle Width="28" Height="48" RadiusX="10" RadiusY="10" RenderTransformOrigin="0.5,0.5" Stroke="#FF373737" Opacity="0.68"> <Rectangle.RenderTransform> <TransformGroup> <ScaleTransform ScaleX="1" ScaleY="1"/> <SkewTransform AngleX="0" AngleY="0"/> <RotateTransform Angle="-270"/> <TranslateTransform X="0" Y="0"/> </TransformGroup> </Rectangle.RenderTransform> <Rectangle.Fill> <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5"> <GradientStop Color="#FFD8D8D8" Offset="0" Name="Bawah3"/> <GradientStop Color="#FF535353" Offset="1" Name="Atas3"/> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> <Rectangle Width="13.436" Height="13.685" Fill="#FFFFFFFF" RadiusX="0" RadiusY="0" Opacity="0.7" Canvas.Left="7.462" Canvas.Top="17.768"/> </Canvas> <Canvas Name="Button4" Width="28" Height="48" Canvas.Left="177" Canvas.Top="-7" MouseEnter="MouseEnter" MouseLeave="MouseLeave" MouseLeftButtonDown="Toggle_FullScreen"> <Rectangle Width="28" Height="48" RadiusX="10" RadiusY="10" RenderTransformOrigin="0.5,0.5" Stroke="#FF373737" Opacity="0.68"> <Rectangle.RenderTransform> <TransformGroup> <ScaleTransform ScaleX="1" ScaleY="1"/> <SkewTransform AngleX="0" AngleY="0"/> <RotateTransform Angle="-270"/> <TranslateTransform X="0" Y="0"/> </TransformGroup> </Rectangle.RenderTransform> <Rectangle.Fill> <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5"> <GradientStop Color="#FFD8D8D8" Offset="0" Name="Bawah4"/> <GradientStop Color="#FF535353" Offset="1" Name="Atas4"/> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> <Rectangle Width="25" Height="15" Fill="#FFFFFFFF" RadiusX="0" RadiusY="0" Opacity="0.2" Canvas.Left="2" Canvas.Top="16.768"/> <Rectangle Width="10" Height="10" Fill="#FFFFFFFF" RadiusX="0" RadiusY="0" Opacity="0.5" Canvas.Left="9" Canvas.Top="19"/> </Canvas> </Canvas> </Canvas>
8. Setelah itu, buatlah file JavaScript baru di folder Script. Beri nama file tersebut dengan
WatchVideo.xaml.js
9. Isi WatchVideo.xaml.js dengan code berikut
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
178 Studi Kasus Membuat Website Testipi
function Canvas_Loaded(sender, args) { var plugin = sender.getHost(); plugin.content.onfullScreenChange = OnFullScreenChanged; var videoFileName = document.getElementById("ctl00_ContentPlaceHolder1_HiddenFieldVideoFileName").value; sender.findName("Media").Source = "Videos/" + videoFileName; } function Media_Stop(sender, args) { sender.findName("Media").stop(); } function Media_Pause(sender, args) { sender.findName("Media").pause(); } function Media_Play(sender, args) { sender.findName("Media").play(); } function Toggle_FullScreen(sender, args) { var silverlightPlugin = sender.getHost(); silverlightPlugin.content.fullScreen = !silverlightPlugin.content.fullScreen; } function OnFullScreenChanged(sender, args) { var silverlightPlugin = sender.getHost(); var container = sender.findName("Container"); var buttonPanel = sender.findName("ButtonPanel"); var panel = sender.findName("Panel"); var media = sender.findName("Media"); var glassy = sender.findName("Glassy"); var logo = sender.findName("Logo"); var width = silverlightPlugin.content.actualWidth; var height = silverlightPlugin.content.actualHeight; if (silverlightPlugin.content.fullScreen == true) { container.opacity = 0; buttonPanel["Canvas.Left"] = width - buttonPanel.width + 50; buttonPanel["Canvas.Top"] = height - 55; buttonPanel.opacity = 0.5; panel["Canvas.Left"] = 10; panel["Canvas.Top"] = height - 55; panel.width = width - 20; media.width = width; media.height = height;
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
179 Studi Kasus Membuat Website Testipi
glassy["Canvas.Left"] = 10; glassy["Canvas.Top"] = height - 55; glassy.width = width - 20; logo["Canvas.Left"] = width - 85; logo["Canvas.Top"] = height - 45; } else { container.opacity = 1; buttonPanel["Canvas.Left"] = 0; buttonPanel["Canvas.Top"] = 305; buttonPanel.opacity = 1; panel["Canvas.Left"] = 5; panel["Canvas.Top"] = 305; panel.width = 390; media.width = 390; media.height = 290; glassy["Canvas.Left"] = 5; glassy["Canvas.Top"] = 305; glassy.width = 390; logo["Canvas.Left"] = 320; logo["Canvas.Top"] = 317.063; } } function MouseEnter(sender, args) { var index = sender.Name.substring(6, sender.Name.length); sender.findName("Atas" + index).Color = "#FF777777"; sender.findName("Bawah" + index).Color = "#FF444444"; } function MouseLeave(sender, args) { var index = sender.Name.substring(6, sender.Name.length); sender.findName("Atas" + index).Color = "#FF535353"; sender.findName("Bawah" + index).Color = "#FFD8D8D8"; }
10. Video player yang terbuat dari Silverlight sudah siap digunakan
11. Buka kembali halaman WatchVideo.aspx dan import WatchVideo.xaml.js dengan menempatkan
tag <script> setelah tag <script> yang ditujukan untuk meng-import WatchVideo.aspx.js. Berikut
adalah code untuk meng-import WatchVideo.xaml.js
<script type="text/javascript" src="Script/WatchVideo.xaml.js"></script>
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
180 Studi Kasus Membuat Website Testipi
12. Jalankan website Testipi kemudian mengklik salah satu icon video atau judul video pada
salah satu item video. Anda akan dibawa ke halaman WatchVideo.aspx dan kali ini video akan
dimainkan di content Silverlight yang telah kita buat
13. Cobalah klik tombol play, pause, stop untuk mengendalikan jalannya video. Klik juga tombol full-
screen untuk menonton video dengan tampilan satu layar penuh
Penjelasan
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
181 Studi Kasus Membuat Website Testipi
Pada langkah pertama, kita membuat warna background content Silverlight menjadi transparan.
Kemudian kita membuat video player dengan menggunakan code XAML. Di dalam code XAML yang
kita beri nama WatchVideo.xaml ini terdapat beberapa elemen. Elemen pertama tentunya Canvas
yang menjadi root dari semua elemen di dalamnya. Elemen selanjutnya merupakan Rectangle yang
ujung-ujungnya kita buat rounded agar terlihat lebih menarik. Rectangle yang diberi nama sebagai
“Container” ini merupakan latar belakang video player. Elemen selanjutnya adalah sebuah
MediaElement yang nantinya berisi video yang akan dimainkan. Elemen selanjutnya adalah
Rectangle yang diberi nama “Panel” karena merupakan latar belakang tombol-tombol. Elemen
selanjutnya juga Rectangle, yang diberi nama sebagai “Glassy”, yang menampilkan efek glassy pada
elemen “Panel”. Elemen selanjutnya merupakan elemen Path yang diberi nama “Logo” yang akan
menampilkan tulisan Testipi. Elemen ini tersusun atas data-data berupa titik-titik yang kemudian
akan digambarkan oleh Silverlight sehingga menampilkan suatu bentuk. Data-data di dalam elemen
“Logo” membentuk gambar . Selanjutnya kita membuat Canvas yang diberi nama
“ButtonPanel” yang berisi empat buah tombol yang terdiri dari tombol play , pause , stop
, serta full screen .
Masing-masing tombol menangkap event MouseEnter, MouseLeave, serta MouseLeftButtonDown
yang ditangani oleh script yang berada di WatchVideo.xaml.js. Sekarang kita beralih ke
WatchVideo.xaml.js. Di dalam WatchVideo.xaml.js, terdapat delapan buah method.
1. Canvas_Loaded. Method ini dijalankan ketika root Canvas di-load di browser. Di dalam
method ini, kita mendaftarkan method OnFullScreenChanged agar dijalankan ketika content
Silverlight berubah dari mode normal ke mode full screen, atau mode full screen ke mode
normal. Setelah itu, kita juga mengambil isi HiddenFieldVideoFileName yang berada di
WatchVideo.aspx. Tentunya isi HiddenFieldVideoFileName akan berisi nama file video
karena pada code behind WatchVideo.aspx ditentukan bahwa
HiddenFieldVideoFileName.Value = video.FileName. Dengan demikian, video yang
dimainkan oleh MediaElement adalah video yang memiliki nama file sesuai dengan ID video
yang tertera pada QueryString bernama “video” pada halaman WatchVideo.aspx
2. Media_Stop. Method ini dijalankan ketika tombol stop ditekan. Method ini berfungsi untuk
menghentikan jalannya video yang dimainkan oleh MediaElement
3. Media_Pause. Method ini dijalankan ketika tombol pause ditekan. Method ini berfungsi
untuk menghentikan sementara jalannya video yang dimainkan oleh MediaElement
4. Media_Play. Method ini dijalankan ketika tombol play ditekan. Method ini berfungsi untuk
memainkan kembali video yang ada pada MediaElement
5. Toggle_FullScreen. Method ini dijalankan ketika tombol full screen ditekan. Method ini
berfungsi untuk menjadikan content Silverlight menjadi full screen ketika mode normal, atau
mengembalikan ke mode normal ketika sedang dalam mode fullscreen
6. OnFullScreenChanged. Method ini dijalankan ketika content Silverlight berubah menjadi
mode full screen atau mode normal. Method ini berfungsi untuk mengatur ulang tampilan
(letak dan ukuran) elemen-elemen di dalam content Silverlight agar tetap bagus baik dalam
mode full screen maupun dalam mode normal
7. MouseEnter. Method ini dijalankan ketika pointer mouse memasuki wilayah tombol play,
pause, stop atau full screen. Method ini berfungsi untuk memberikan efek “ditekan” pada
tombol dengan mengubah komposisi warna yang menyusun tombol
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
182 Studi Kasus Membuat Website Testipi
8. MouseLeave. Method ini dijalankan ketika pointer mouse yang tadinya ada di dalam wilayah
tombol play, pause, stop atau full screen, keluar daro wilayah tombol tersebut. Method ini
berfungsi untuk memberikan efek “timbul” kembali dengan mengembalikan komposisi
warna yang menyusun tombol
Selamat! Anda telah membuat sebuah website yang telah berfungsi penuh. Website yang kita beri
nama Testipi dan memiliki kemampuan AJAX ini mampu menyimpan video dan memainkannya
dengan menggunakan Silverlight.
Pada akhir buku ini, Fu & Niko mengucapkan terima kasih telah membaca buku kami, dan semoga
apa yang kami sampaikan dalam buku ini bermanfaat bagi Anda.
Jazz Up Your Web with ASP.NET 3.5 and Silverlight Fu & Niko
183 Studi Kasus Membuat Website Testipi
Fu & Niko