asp.net 3.5

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


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



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


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


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


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.


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


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/

http://www.microsoft.com/express/download/


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



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”.



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



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



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



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



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”



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



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.



Gambar 3 Toolbox

Bagian window penting setidaknya berisi tiga buah window, yaitu Solution Explorer, Server Explorer,

dan Properties.



Gambar 4 Solution Explorer, Server Explorer dan Properties

Bagian Text Editor dan visual designer merupakan tempat kita “berkarya”.

Gambar 5 Text Editor



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.



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.


Menambahkan tombol pada halaman website

1. Buka Visual Studio 2008, pilih Open: Web Site…

2. Bukalah website yang terakhir kali Anda buat, yaitu WebASPNET35



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.



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



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.


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



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!"); }



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



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.


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.


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.


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.


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


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>


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.


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.


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.


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…


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.



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.


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…



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.



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



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.



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…



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



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.



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



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.



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.


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



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.



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.


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



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.



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



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



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.


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)



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



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.


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>



</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) {



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



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”



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.


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



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”



8. Pada window di atas, pilih BelajarDataContext sebagai objek DataContext kemudian klik “Next”



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”



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



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


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 />



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" />



<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.



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



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.



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.


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



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.



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.


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.


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>


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>


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!


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.

http://www.microsoft.com/downloads/details.aspx?FamilyId=FB7900DB-4380-4B0F-BB95-0BAEC714EE17&displaylang=en

http://www.microsoft.com/downloads/details.aspx?FamilyId=FB7900DB-4380-4B0F-BB95-0BAEC714EE17&displaylang=en


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.


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

http://schemas.microsoft.com/client/2007

http://schemas.microsoft.com/winfx/2006/xaml


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.


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


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.


Membuat objek Rectangle


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


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.


Membuat objek Path


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"/>



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.


Membuat objek TextBlock


2. Ganti code yang mendeklarasikan objek Path dengan code berikut

<TextBlock Text="Ini adalah textblock" Foreground="Blue"/>



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


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


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.


Menggunakan properti Opacity


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


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)


Memberi warna gradasi pada objek


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


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


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


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


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


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.


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


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


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


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).


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.


Meng-handle event MouseLeftButtonDown

1. Buka myxaml.xaml

2. Ganti isi code di dalam Canvas dengan code berikut


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.


82 Silverlight

Pada contoh selanjutnya, kita akan mempelajari bagaimana membuat mengambil objek yang ada

pada content Silverlight melalui JavaScript.


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


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”.


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.



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



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



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.



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.


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…



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



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”



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



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.


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



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.



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.


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"



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.


Membuat kelas pendukung

1. Pada Solution Explorer, klik kanan root website, kemudian pilih menu Add ASP.NET Folder >

App_Code



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;



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; } } }



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); } } }



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.


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



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.


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:



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


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



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


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”



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;



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;



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.



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.


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



<%@ 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>



</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”



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">



<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.


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">



</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!



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.




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 {



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



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



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.


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;



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”



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



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.


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>



</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"; }



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”



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



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



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.



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.


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>



<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") %>' />



</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



<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”



9. Pilih tabel Videos kemudian klik tombol “Where…”



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”



12. Kembali pada window “Configure Data Source”. Klik tombol “OrderBy…”



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”



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



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"; }



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);



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; }



.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



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.


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



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 />



<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;



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);



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)



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



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



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.


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" />



<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;



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") {



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.


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



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



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



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.


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>



<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>



<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


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>



<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



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.



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.


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



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.


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>



</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>



<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.




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>



<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



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"; }



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(); }



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


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>



<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



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


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…



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

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 />  <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



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



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



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.


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…



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

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="#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



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>



</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>



<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



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>



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



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



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.



Fu & Niko

asp.net 3.5

Documents