Pembangunan Situs Video Streaming dengan Menggunakan Teknologi Silverlight.

(1)

v

Universitas Kristen Maranatha

ABSTRAK

Seiring dengan meningkatnya kebutuhan pengguna internet, media video menjadi semakin populer dalam beberapa tahun terakhir ini, para pengembang situs dipacu menyajikan video dengan cara yang bervariasi. Munculnya teknologi Silverlight dari Microsoft memungkinkan ditampilkannya video dalam sebuah halaman ASP. Dengan dibangunnya situs ini, teknologi Silverlight dapat diimplementasikan secara efektif, dengan didukung oleh bahasa pemrograman C# diharapkan situs ini memenuhi kebutuhan pengguna internet khususnya dalam hal video.

(2)

vi

ABSTRACT

Along with the growing needs of Internet users, video streaming becoming increasingly popular in recent years, Web Developers encouraged a variety of ways to presents video in their website. The invention of Microsoft's Silverlight technology enabling viewing videos in an ASP page. With the construction of this site, Silverlight technology can be implemented with effectively, supported by the C# programming language, expected this site to meet the needs of Internet users, especially in terms of video.

(3)

vii

ABSTRACT ... vi

DAFTAR ISI ... vii

DAFTAR GAMBAR... x

DAFTAR TABEL ... xiii

BAB I PENDAHULUAN... 1

BAB II DASAR TEORI ... 5

2.1 Teknik Streaming Video... 5

2.2 Konsep Media Streaming... 5

2.3 Buffering ... 6

2.4 Microsoft Visual Studio ... 6

2.5 Pemrograman ASP.NET ... 7

2.6 ASP Website Project... 8

2.7 Website Project Item... 9

2.8 Visual Database Tools... 10

2.9 LINQ (Language Integrated Query) ... 12

2.10 ASP.NET Web Server Control ... 13

2.11 ListView dan LinqDataSource ... 15

2.12 ASP.Net Membership dan WSAT ... 17

2.13 Custom Membership Provider... 23

2.14 Global Unique Identifier pada ASP.Net Membership ... 26

2.15 Definisi Silverlight... 26

2.16 Pemrograman Silverlight ... 27

(4)

viii

2.18 XAML (Extensible Application Markup Language) ... 28

2.19 Membuat Aplikasi Silverlight pada Visual Studio 2010 ... 30

2.20 Silverlight Control... 31

2.21 ASP Media Player ... 32

2.22 Unified Modeling Language... 33

2.22.1Use Case Diagram ... 33

2.22.2Activity Diagram... 35

2.22.3Class Diagram... 36

2.23 Entity Relationship Diagram ... 37

BAB III ANALISA DAN PEMODELAN ... 40

3.1 Arsitektur Aplikasi ... 40

3.2 Use Case Diagram ... 40

3.3 Activity Diagram... 42

3.4 Class Diagram... 44

3.5 ER‐Diagram ... 45

3.6 Pemodelan Tabel Database dan Linq to SQL Class ... 46

3.7 Pengaturan User dalam Web.config dan Class ... 50

3.7.1 Web.Config ... 50

3.7.2 Class Config... 53

3.7.3 Class MyVideoMembership ... 55

3.8 Web Map dan Layout ... 55

3.9 Perancangan User Interface ... 61

BAB IV PERANCANGAN DAN IMPLEMENTASI ... 63

4.1 Tampilan MasterPage Halaman Website ... 63

4.2 Tampilan Halaman Utama (default.aspx)... 64

4.3 Tampilan Halaman Register ... 65

4.4 Tampian CustomizeProfile... 66

4.5 Tampilan Login... 67

4.6 Tampilan Halaman Utama Anggota ... 69

(5)

ix

4.8 Tampilan Upload Video ... 71

4.9 Tampilan Menonton Video ... 74

4.10 Komentar Video ... 78

4.11 Tampilan Send Message... 80

4.12 Tampilan Inbox... 82

4.13 Tampilan Notification... 83

BAB V PENGUJIAN ... 85

5.1 BlackBox Testing ... 85

5.2 Browser Testing ... 88

5.3 LAN Client Testing dengan Menggunakan IIS 5.1 ... 88

5.4 Kuesioner... 89

5.5 Hasil Kuesioner... 92

BAB VI... 95

KESIMPULAN DAN SARAN ... 95

6.1 Kesimpulan ... 95

6.2 Saran... 95

DAFTAR PUSTAKA ... xiv

(6)

x

Gambar 2.4 Komponen Visual Studio ... 9

Gambar 2.5 Menambah item SQL Server Database ... 10

Gambar 2.6 Dialog penyimpanan file database... 11

Gambar 2.7 Solution Explorer Visual Studio... 11

Gambar 2.8 Penambahan Tabel pada SQL Database... 11

Gambar 2.9 Pembuatan Tabel ... 11

Gambar 2.10 Cara Setting Primary Key ... 12

Gambar 2.11 Gambaran umum ASP Project dengan LINQ ... 16

Gambar 2.12 ASP.Net Configuration... 18

Gambar 2.13 WSAT Homepage ... 19

Gambar 2.14 Step by Step WSAT... 19

Gambar 2.15 WSAT Step 1 ... 20

Gambar 2.16 WSAT Access Method... 20

Gambar 2.17 WSAT step 3... 21

Gambar 2.18 WSAT Role ... 21

Gambar 2.19 WSAT Create User... 22

Gambar 2.20 WSAT Role and Folder... 22

Gambar 2.21 WSAT Last Step ... 23

Gambar 2.22 Membership Class... 24

Gambar 2.23 Fungsi Keanggotaan pada Custom Membership ... 25

Gambar 2.24 Tampilan Install Silverlight... 27

Gambar 2.25 Menu Silverlight Configuration... 28

Gambar 2.26 Contoh Penulisan XAML ... 29

Gambar 2.27 Contoh XAML pada browser... 29

Gambar 2.28 Membuat Aplikasi Silverlight di Visual Studio. ... 30

Gambar 2.29 Pemilihan Metode Pembuatan Aplikasi silverlight ... 31

(7)

xi

Gambar 2.31 Contoh Use Case Diagram ... 35

Gambar 2.32 Contoh Activity Diagram... 36

Gambar 2.33 Contoh Class Diagram ... 37

Gambar 2.34 Contoh ERD... 39

Gambar 3.1 Use Case Diagram pengunjung biasa (guest) ... 40

Gambar 3.2 Use Case Diagram pengunjung yang memiliki akun ... 41

Gambar 3.3 Activity Diagram Account Register... 42

Gambar 3.4 Activity Diagram Menonton Video ... 42

Gambar 3.5 Activity Diagram Menonton Video Anggota... 43

Gambar 3.6 Activity Diagram User Account Upload Video ... 43

Gambar 3.7 Class Diagram Situs Video Streaming... 44

Gambar 3.8 ER Diagram Situs Video Streaming... 45

Gambar 3.9 Penambahan Diagram Visual Database ... 48

Gambar 3.10 Database Diagram Visual Studio... 49

Gambar 3.11 Penambahan Linq to SQL Class... 49

Gambar 3.12 Linq to Sql Designer... 50

Gambar 3.13 Web Map Pengunjung Biasa... 56

Gambar 3.14 Web Map anggota (member) ... 56

Gambar 3.15 Layout Master Page ... 57

Gambar 3.16 Layout halaman utama... 57

Gambar 3.17 Layout Halaman Utama Anggota (member)... 58

Gambar 3.18 Web Layout Register ... 58

Gambar 3.19 Web Layout Login ... 59

Gambar 3.20 Layout Halaman Favorit Video... 59

Gambar 3.21 Layout Halaman Profile ... 60

Gambar 3.22 Layout Video Player ... 60

Gambar 3.23 Perancangan Master Page... 61

Gambar 3.24 Perancangan Fitur Search... 61

Gambar 3.25 Perancangan Layout Video Player ... 62

Gambar 4.1 Tampilan MasterPage ... 63

Gambar 4.2 Tampilan Halaman Utama Guest... 64

(8)

xii

Gambar 4.4 Tampilan User Memodifikasi Profile... 66

Gambar 4.5 Tampilan Halaman Login... 67

Gambar 4.6 Tampilan Halaman Utama Member... 69

Gambar 4.7 Tampilan Profile User... 69

Gambar 4.8 Tampilan Halaman Upload Video ... 71

Gambar 4.9 Tampilan Menonton Video... 74

Gambar 4.10 User Control Comment Video... 78

Gambar 4.11 Halaman Mengirim Pesan ... 80

Gambar 4.12 Halaman Inbox Anggota ... 82

(9)

xiii

DAFTAR TABEL

Tabel 1.1 Time Schedule... 4

Tabel 2.1 Contoh penggunaan LINQ ... 13

Tabel 2.2 Contoh ASP.NET Control ... 14

Tabel 2.3 Jenis Control pada Silverlight... 31

Tabel 2.4 Simbol Komponen Use Case... 34

Tabel 2.5 Simbol Activity Diagram ... 35

Tabel 2.6 Jenis Entitas ... 37

Tabel 2.7 Jenis Atribut ERD... 38

Tabel 3.1 Deskripsi Method... 44

Tabel 3.2 Tabel Database Users... 46

Tabel 3.3 Tabel Database Videos ... 46

Tabel 3.4 Tabel Database Favorites ... 46

Tabel 3.5 Tabel Database Comment ... 47

Tabel 3.6 Tabel Database Rate ... 47

Tabel 3.8 Tabel Database Friends ... 47

Tabel 3.9 Tabel Database SearchControl ... 48

Tabel 3.10 Tabel Database Activity... 48

Tabel 5.1 Browser Testing ... 88

Tabel 5.2 Pengujian Aksesibilitas Website di Jaringan LAN... 89

(10)

1

BAB I

PENDAHULUAN

1.1 Latar Belakang

Video Streaming menjadi semakin populer dalam beberapa tahun terakhir ini,

fenomena ini disebabkan pengguna internet dalam mencari apa yang diinginkan lebih

memilih untuk melihat video daripada gambar yang statis. Video dapat memuat isi

pesan yang lengkap dan mudah dicerna penonton, mulai dari pendidikan, iklan, sampai

dengan dunia hiburan. Hal ini mengakibatkan video menjadi pemain kunci dalam

Teknologi Informasi dan dengan didukung oleh teknologi koneksi internet yang yang

semakin handal, video bisa menjadi media baru sebagai pesaing serius bagi televisi

biasa.

Munculnya teknologi silverlight yang dicetuskan oleh Microsoft memungkinkan

web developer menghadirkan media dan aplikasi interaktif (rich content type) kepada

situs web berbasis .Net, Silverlight menawarkan model pemrograman yang mudah dan

dengan digabungkan dengan teknologi AJAX dan pemograman bahasa C# diharapkan

dapat menghadirkan situs video streaming yang handal untuk pengguna internet.

1.2 Rumusan Masalah

Masalah yang ada dalam pembangunan situs video streaming ini mencakup

beberapa hal, yaitu:

1. Bagaimana implementasi silverlight pada situs yang menampilkan video secara

streaming?

2. Bagaimana cara mengintregasikan silverlight dengan situs berbasis .Net?

3. Apa yang diunggulkan teknologi silverlight dibandingkan dengan teknologi yang

sudah ada?

1.3 Tujuan

Dengan semakin berkembangnya teknologi pembangunan website yang semakin

bervariasi, diharapkan teknologi Silverlight mampu membangun situs video streaming

(11)

2

1. Membangun situs video streaming dengan menggunakan Teknologi Silverlight.

2. Membangun situs yang mengintegrasikan teknologi ASP.Net, C#, dan Silverlight.

3. Membangun situs dengan Silverlight sebagai add-on/plugin yang tidak kalah

handal dengan add-on/plugin lainnya.

1.4 Batasan Masalah

Situs ini menyediakan layanan menonton video secara online. Layanan situs ini

bisa diakses oleh 2 macam pengunjung, yaitu pengunjung biasa (guest) dan pengunjung

yang sudah memiliki akun di situs ini (member). Hal-hal yang dapat dilakukan oleh

pengunjung dan anggota sebagai berikut:

1. Pengunjung dan Anggota dapat menonton video yang ada.

2. Pengunjung dan Anggota dapat melihat Thumbnail, Jumlah View, Rating dan

Komentar dari video yang ada.

3. Pengunjung dan Anggota dapat mencari video dari kata kunci dan jenis

kategorinya.

4. Pengunjung dan ANggota dapat mencari anggota berdasarkan User Name.

5. Pengunjung dan Anggota dapat melihat rekomendasi video lain yang sejenis,

setelah halaman salah satu video dibuka.

6. Anggota dapat meng-upload video dengan format .wmv dan dengan batasan

maksimal besar file 15MB.

7. Anggota akan mendapatkan notifikasi jika video yang dimiliki diberi komentar

oleh anggota lain.

8. Anggota memiliki halaman profile tersendiri.

9. Anggota dapat memiliki daftar teman yang berisi anggota lain.

10. Anggota dapat mengikuti kegiatan yang dilakukan teman.

11. Anggota dapat memberi komentar kepada video yang ada.

12. Anggota dapat memberi rate kepada video yang ada.

13. Anggota dapat membuat daftar favorit video (MyFavorit).

14. Anggota dapat bermain game ringan sambil buffering video.

15. Sesama anggota dapat mengirim pesan.

(12)

3

Universitas Kristen Maranatha 1.5 Sistematika Pembahasan

Penulisan tugas akhir ini dibagi menjadi 6 (enam) bab pembahasan yang

disesuaikan dengan persyaratan akademis penyusunan tugas akhir. Berikut ini adalah

uraian singkat mengenai masing-masing bab dan pembahasan yang ada dalam tugas

akhir ini:

BAB I: LATAR BELAKANG

Berisi tentang latar belakang, rumusan masalah, tujuan, batasan masalah,

sistematika pembahasan dari pembangunan video streaming ini.

BAB II: DASAR TEORI

Menjelaskan tentang teknik streaming, definisi buffering, definisi silverlight,

definisi xaml dan contoh penggunaan xaml pada visual studio yang menjadi dasar teknik

pembuatan aplikasi silverlight.

BAB III: ANALISA DAN PERMODELAN

Berisi analisa dan pemodelan yang menggunakan diagram-diagram dan layout

untuk menjelaskan proyek pembangunan situs video streaming dimana didalamnya

mencakup use case, activity diagram, dan class diagram yang digunakan dalam

pengembangan Sistem ini.

BAB IV: PERANCANGAN DAN IMPLEMENTASI

Berisi mengenai perancangan dan implementasi dari tiap fitur yang terdapat di

situs video streaming ini sesuai dengan tujuan yang diharapkan.

BAB V: PENGUJIAN

Menjelaskan mengenai pengujian terhadap aplikasi ini, termasuk pengujian

terhadap tiap class, method, dan fungsi yang dibuat serta laporan dari kuesioner yang

diberikan pada minimal 10 responden.

BAB VI: KESIMPULAN DAN SARAN

Berisi tentang kesimpulan dan saran mengenai apa saja yang didapat dari proyek

(13)

4

Universitas Kristen Maranatha 1.6 Time Schedule

Penyelesaian situs video streaming ini membutuhkan waktu 4 bulan, dikarenakan perlu

mempelajari konsep dasar dari teknologi Pemrograman Silverlight yang terintegrasi

pada Visual Studio.Net 2010.

Tabel 1.1 Time Schedule

Kegiatan

Mei 2011 Juni 2011 Juli 2011 Agustus 2011

1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4

Pembelajaran

Silverlight dan Microsoft Visual Studio 2011

Definisi Kebutuhan

Desain Sistem dan Software

Implementasi dan Bagian Pengetesan

Integrasi dan Pengetesan Sistem

(14)

96

BAB VI

KESIMPULAN DAN SARAN

6.1 Kesimpulan

Berdasarkan hasil penelitan dan kuesioner situs video streaming yang dibangun

ini maka diperoleh kesimpulan sebagai berikut:

1. Pembangunan situs ini mampu memberikan kebutuhan pengguna internet

khususnya yang berkaitan dengan video.

2. Penyajian situs video streaming dengan menggunakan ASP dan Silverlight dapat

dimanfaatkan sebagai media yang handal untuk menunjang kebutuhan

pengguna internet sekarang ini.

3. Dengan memanfaatkan kemudahan integrasi fitur .Net, para pengembang web

dapat lebih berkonsentrasi pada kreatifitas konten situs yang akan ditampilkan

sehingga mampu menghasilkan website yang menarik di mata pengguna

internet.

6.2 Saran

Banyaknya kekurangan akan fitur-fitur yang interaktif dari situs ini, sehingga

perlu diperhatikan hal-hal untuk mengembangkan situs video streaming di masa yang

akan datang, hal tersebut antara lain:

1. Situs video streaming ini belum memiliki pengawasan terhadap jenis video yang

di-upload dan mungkin tidak layak dilihat oleh suatu kalangan tertentu, sehingga

semua anggota masih dapat meng-upload berbagai macam video.

2. Fenomena jejaring sosial yang semakin menjamur menjadikan web developer

harus memiliki inovasi baru dalam mengembangkan website ini, sehingga

diperlukan kemampuan mengolah kemampuan fitur .Net dan dapat

menginterpretasikannya dalam bentuk website.

Microsoft .Net Development mengeluarkan versi tools dan teknologiyang sangat

beragam dalam waktu yang relatif cepat, sehinga perlu diperhatikannya update patch

(15)

xiv

DAFTAR PUSTAKA

Moore, A; Visual Studio® 2010 all in one for dummies; Indiana: Wiley Publishing, Inc,

2010.

Snell, M dan Powers, L;Microsoft Visual Studio® 2010 Unleashed. Pearson Education,

2010.

Sheperd, George; Microsoft ASP.NET 4.0 Step by Step; Microsoft Press, 2010.

Mitchell, Scott; ASPNET MasterPages Tutorial; from

Pialorsi, Paolo dan Russo, Marco; Programming Microsoft LINQ in Microsoft .NET