Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. ASP.NET

Membuat Kontrol Server ASP.NET dari Awal

by
Read Time:13 minsLanguages:

Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)

Dalam tutorial ini, Anda akan belajar cara membangun kontrol server ASP.NET dengan membuat kontrol pemutar video HTML5. Sepanjang perjalanan, kita akan meninjau proses fundamental pengembangan kontrol server dari awal.


Perkenalan

ASP.NET dilengkapi dengan seperangkat kontrol sisi-servernya sendiri, jadi mengapa Anda membuatnya sendiri?

Dengan membuat kontrol kita sendiri, kita kemudian dapat membangun komponen visual yang kuat dan dapat digunakan kembali untuk antarmuka pengguna aplikasi Web kita.

Tutorial ini akan memperkenalkan Anda pada proses pengembangan kontrol server ASP.NET. Anda juga akan melihat cara membuat kontrol Anda sendiri secara bersamaan dapat meningkatkan kualitas aplikasi Web Anda, membuat Anda lebih produktif dan meningkatkan antarmuka pengguna Anda.

Kontrol kustom ASP.NET lebih fleksibel daripada kontrol pengguna. Kita dapat membuat kontrol kustom yang mewarisi dari kontrol sisi-server lain dan kemudian memperluas kontrol itu. Kita juga dapat berbagi kontrol kustom di antara proyek-proyek. Biasanya, kita akan membuat kontrol kustom kita di perpustakaan kontrol kustom web yang dikompilasi secara terpisah dari aplikasi web kita. Sebagai hasilnya, kita dapat menambahkan perpustakaan tersebut ke proyek apa pun untuk menggunakan kontrol kustom kita dalam proyek itu.


Ikhtisar Video HTML5

Hingga saat ini, belum pernah ada cara asli untuk menampilkan video pada halaman web. Saat ini, sebagian besar video ditampilkan, melalui penggunaan plugin (seperti Flash atau Silverlight). Namun, tidak semua browser memiliki plugin yang sama. HTML5 menentukan cara bawaan standar untuk menyertakan video, dengan elemen video.

Saat ini, ada dua format video yang didukung secara luas untuk elemen video: file Ogg [dikodekan dengan Theora dan Vorbis untuk video dan audio] dan file MPEG 4 [dikodekan dengan H.264 dan AAC].

Untuk menampilkan video dalam HTML5, inilah yang kita butuhkan:

Atribut controls adalah untuk menambahkan kontrol play, pause dan volume. Tanpa atribut ini, video Anda akan tampak hanya berupa gambar. Itu juga selalu merupakan ide yang baik untuk menyertakan atribut width dan height. Tabel berikut menunjukkan semua atribut elemen <video>:

  • autoplay: Menentukan bahwa video akan mulai diputar segera setelah ia siap
  • controls: Menentukan bahwa kontrol akan ditampilkan, seperti tombol play
  • height: Ketinggian pemutar video
  • loop: Menentukan bahwa file media akan mulai dari awal lagi, setiap kali ia selesai
  • preload: Menentukan bahwa video akan dimuat saat pemuatan halaman, dan siap dijalankan. Diabaikan jika ada "autoplay"
  • src: URL video yang diputar
  • width: Lebar pemutar video
  • poster: URL gambar untuk ditampilkan saat tidak ada data video tersedia

Langkah 0: Memulai

Semua yang diperlukan untuk memulai adalah salinan Visual Studio dari Visual Web Developer Express. Jika Anda tidak memiliki versi lengkap dari Visual Studio, Anda dapat mengambil Express Edition gratis.

Pemutar video HTML5 yang akan kita buat di sini hanya pemutar video sederhana yang akan me-render antarmuka asli apa pun yang disediakan browser. Browser yang mendukung video HTML5 memiliki pemutar video bawaan, termasuk sekumpulan kontrol (play/pause, dll.), Sehingga Anda akan melihat antarmuka yang berbeda untuk setiap browser saat menjalankan kontrol ini.

HTML5 Video Player of FirefoxHTML5 Video Player of FirefoxHTML5 Video Player of Firefox
Pemutar video HTML5 di Firefox 3.6.8.

Langkah 1: Membuat Proyek Kontrol Kustom

Pertama, kita perlu membuat proyek perpustakaan kelas baru untuk menampung kontrol kustom kita. Dengan membuat kontrol kustom dalam perpustakaan kelas yang terpisah, kita dapat mengkompilasi proyek menjadi DLL terpisah dan menggunakan kontrol kustom dalam aplikasi apa pun yang memerlukannya.

Buka proyek ASP.NET Anda dengan Visual Studio atau Visual Web Developer. Di Solution Explorer, klik kanan nama solusi, dan pilih Add New Project dari menu konteks. Di kotak dialog Add New Project, pilih jenis proyek untuk menjadi proyek Web, dan pilih ASP.NET Server Control sebagai template-nya, seperti:

Add New ProjectAdd New ProjectAdd New Project

Beri nama proyek CustomControls. Klik OK. Proyek ASP.NET Server Control baru dibuat, dan Visual Studio juga menyediakan Anda dengan kontrol Web sederhana untuk memulai. Hapus kontrol kustom ini karena kita tidak membutuhkannya.


Langkah 2: Menambahkan Kontrol Kustom Web ke Proyek

Di Solution Explorer, klik kanan proyek CustomControls, dan pilih Add New Item dari menu konteks. Di kotak dialog Add New Item, pilih jenis kategori menjadi kategori Web, dan pilih ASP.NET Server Control di template.

Add New ItemAdd New ItemAdd New Item

Beri nama kontrol kustom baru VideoPlayer. Klik Add. Kontrol kustom baru (VideoPlayer.cs) dibuat dan ditambahkan ke proyek CustomControls.

Kode di atas adalah kode default yang dihasilkan oleh Visual Studio untuk perpustakaan kontrol web. Untuk mulai bekerja dengan VideoPlayer.cs, kita perlu memodifikasi kode di atas. Hal pertama yang harus kita lakukan adalah menghapus semuanya di antara baris deklarasi kelas dan akhir kelas. Itu meninggalkan kita dengan kode ini:

Seperti yang Anda lihat di atas, kelas VideoPlayer berasal dari kelas System.Web.UI.WebControl. Bahkan, semua kontrol sisi-server ASP.NET berasal dari kelas WebControl.


Langkah 3: Memodifikasi Baris Deklarasi Kelas

Baris deklarasi kelas dalam kode default juga menentukan properti default untuk kontrol VideoPlayer sebagai properti Text. Kontrol VideoPlayer yang kita buat di sini tidak memiliki properti bernama Text. Jadi, hapus referensi ke Text sebagai properti default. Setelah semua modifikasi, file kode VideoPlayer.cs akan terlihat seperti ini:


Langkah 4: Menambahkan Properti

Pada langkah ini, kita akan menambahkan beberapa properti ke kontrol VideoPlayer untuk menangani perilaku kontrol. Berikut ini adalah daftar properti yang akan kita tambahkan ke file kode VideoPlayer.cs:

  • VideoUrl: Properti string yang menentukan URL video yang diputar.
  • PosterUrl: Properti string yang menentukan alamat file gambar untuk ditampilkan saat tidak ada data video yang tersedia.
  • AutoPlay: Properti boolean untuk menentukan apakah video secara otomatis akan mulai diputar atau tidak, ketika halaman web dibuka.
  • DisplayControlButtons: Properti boolean yang menentukan apakah tombol navigasi pemutar ditampilkan atau tidak.
  • Loop: Properti boolean yang menentukan apakah video akan mulai dari awal lagi atau tidak, setiap kali ia selesai.

Tambahkan kode berikut ke kelas VideoPlayer:

Setelah kita menambahkan properti di atas, kelas VideoPlayer akan terlihat seperti


Langkah 5: Membuat Metode Render

ContentsTugas utama dari kontrol server adalah me-render beberapa jenis bahasa markup ke stream keluaran HTTP, yang dikembalikan dan ditampilkan oleh klien. Ini adalah tanggung jawab kita sebagai pengembang kontrol untuk memberi tahu kontrol server markup apa yang harus di-render. Metode RenderContents yang ditimpa adalah lokasi utama tempat kita memberi tahu kontrol apa yang ingin kita render kepada klien.

Tambahkan metode berikut yang menggantikan RenderContents ke kelas VideoPlayer:

Perhatikan bahwa metode RenderContents memiliki satu parameter metode yang disebut output. Parameter ini adalah objek HtmlTextWriter, yang digunakan oleh kontrol untuk me-render HTML ke klien. Kelas HtmlTextwriter memiliki sejumlah metode yang dapat Anda gunakan untuk me-render HTML Anda, termasuk AddAttribute dan RenderBeginTag.


Langkah 6: Menambahkan Atribut Tag

Sebelum kita menulis kode untuk me-render elemen <video>, hal pertama yang harus dilakukan adalah menambahkan beberapa atribut untuknya. Kita dapat menggunakan metode AddAttribute dari objek HtmlTextWriter untuk menambahkan atribut untuk tag HTML.

Tambahkan kode berikut ke dalam metode RenderContents:

Anda dapat melihat bahwa, dengan menggunakan metode AddAttribute, kita telah menambahkan tujuh atribut ke tag. Juga perhatikan bahwa kita menggunakan enumerasi, HtmlTextWriterAttribute, untuk memilih atribut yang ingin kita tambahkan ke tag.

Setelah kita menambahkan kode di atas, metode RenderContents akan terlihat seperti ini:


Langkah 7: Me-render Elemen <video>

Setelah menambahkan beberapa atribut tag untuk elemen video, saatnya untuk me-render tag <video> dengan atributnya ke dokumen HTML. Tambahkan kode berikut ke dalam metode RenderContents:

Kita menggunakan metode RenderBeginTag dari objek output untuk me-render tag pembuka elemen video, dan RenderEndTag untuk merender tag penutupnya. Kita juga menambahkan elemen <source> di antara elemen <video>. Elemen video memungkinkan banyak elemen sumber. Elemen source dapat ditautkan ke file video yang berbeda. Browser akan menggunakan format yang dikenal pertama kali.

Metode RenderContents akan terlihat seperti ini setelah kita menambahkan kode di atas:

Perhatikan bahwa urutan di mana kita menempatkan metode AddAttributes adalah penting. Kita menempatkan metode AddAttributes secara langsung sebelum metode RenderBeginTag dalam kode. Metode AddAttributes mengaitkan atribut dengan tag HTML berikutnya yang di-render oleh metode RenderBeginTag, dalam hal ini tag video.


Langkah 8: Menghapus Tag Span

Secara default, ASP.NET akan mengelilingi tag control dengan elemen <span> saat menampilkan markup HTML dari control. Jika kita telah memberikan nilai ID untuk kontrol kita, maka tag Span juga akan, secara default, me-render atribut ID. Memiliki tag terkadang bisa menjadi masalah, jadi jika kita ingin mencegah hal ini di ASP.NET, kita dapat mengganti metode Render dan memanggil metode RenderContents secara langsung. Begini caranya:

Setelah kita menambahkan kode di atas, kelas VideoPlayer akan terlihat seperti ini:

Kontrol kita sekarang selesai! Yang harus kita lakukan adalah membangun proyek sebelum kita menggunakannya pada halaman web ASP.NET.


Langkah 9: Membangun Proyek

Saatnya membangun proyek. Pilih Build, lalu klik Build Solution dari menu utama.

Build SolutionBuild SolutionBuild Solution

Setelah membangun proyek, langkah selanjutnya adalah menambahkan kontrol VideoPlayer ke dalam Toolbox Explorer.


Langkah 10: Menambahkan Kontrol VideoPlayer ke Toolbox Visual Studio

  • Untuk menambahkan kontrol VideoPlayer ke Toolbox, klik kanan di Toolbox Explorer
  • Choose Items dari menu konteks
  • Klik tombol Browse di kotak dialog Choose Toolbox Items
  • Arahkan ke direktori proyek ASP.NET
  • Pergi ke direktori CustomControls
  • Buka direktori Bin\Debug (Visual Studio membangun versi debug secara default.)
  • Pilih perakitan CustomControls.DLL dan klik tombol Open
Choose Toolbox ItemsChoose Toolbox ItemsChoose Toolbox Items

VideoPlayer akan muncul di kotak dialog Choose Toolbox Items seperti yang ditunjukkan pada gambar di atas. Kotak centang akan menampilkannya sebagai terpilih. Segera setelah Anda mengklik tombol OK di kotak dialog Choose Toolbox Items, kontrol VideoPlayer baru akan muncul di toolbox.

Visual Studio Toolbox ExplorerVisual Studio Toolbox ExplorerVisual Studio Toolbox Explorer

Langkah 11: Menempatkan Kontrol VideoPlayer di halaman web ASP.NET

Untuk melihat bagaimana kontrol bekerja, kita harus memberikannya sebuah rumah. Tambahkan halaman baru ke situs web. Klik kanan proyek ASP.NET dari Solution Explorer. Pilih Add New Item, dan tambahkan sebuah Web Form. Namakan Web Form VideoPlayerTest.aspx.

Untuk menempatkan kontrol pada halaman, alihkan ke mode Design. Seret kontrol VideoPlayer dari Toolbox dan lepaskan ke tampilan desain VideoPlayerTest.aspx.

Listing berikut menunjukkan bagaimana kontrol dideklarasikan pada halaman:

Baris kode berikut adalah apa yang ditambahkan Visual Studio ke file ASPX untuk mengakomodasi kontrol. Anda dapat melihatnya dengan memilih tab Source dari bagian bawah jendela kode di Visual Studio. Direktif Register memberitahu runtime ASP.NET di mana untuk menemukan kontrol kustom (yang perakitan) dan memetakannya ke awalan tag.

Kita sekarang dapat menguji kontrolnya.

HTML5 Video PlayerHTML5 Video PlayerHTML5 Video Player
Kontrol VideoPlayer berjalan di Google Chrome.

Ringkasan

Dalam tutorial ini, Anda belajar cara membuat kontrol server kustom ASP.NET sendiri dari awal. Anda sekarang tahu setiap langkah proses - dari cara membuat proyek perpustakaan kontrol kustom web, cara menambahkan properti ke kontrol kustom, cara me-render markup HTML kontrol ke klien, dan akhirnya, cara menggunakan kontrol kustom ASP.NET dalam bentuk web.

Mudah-mudahan, Anda sekarang memiliki keterampilan untuk membuat kontrol kustom yang memiliki semua fungsi dari kontrol sisi-server ASP.NET standar. Terima kasih banyak telah membaca!

Advertisement
Did you find this post useful?
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.