Sanksi Pelanggaran Pasal 72 Undang-undang Nomor 19 Tahun 2002 Tentang Hak Cipta 1. Barangsiapa dengan sengaja melanggar dan tanpa hak melakukan

Transkripsi

1

2 Sanksi Pelanggaran Pasal 72 Undang-undang Nomor 19 Tahun 2002 Tentang Hak Cipta 1. Barangsiapa dengan sengaja melanggar dan tanpa hak melakukan perbuatan sebagaimana dimaksud dalam Pasal 2 Ayat (1) atau Pasal 49 Ayat (1) dan Ayat (2) dipidana dengan pidana penjara masing-masing paling singkat 1 (satu) bulan dan/atau denda paling sedikit Rp ,00 (satu juta rupiah), atau pidana penjara paling lama 7 (tujuh) tahun dan/atau denda paling banyak Rp ,00 (lima miliar rupiah). 2. Barangsiapa dengan sengaja menyiarkan, memamerkan, mengedarkan, atau menjual kepada umum suatu ciptaan atau barang hasil pelanggaran hak cipta atau hak terkait sebagai dimaksud Ayat (1) dipidana dengan pidana penjara paling lama 5 (lima) tahun dan/atau denda paling banyak Rp ,00 (lima ratus juta rupiah).

3 Proyek Membuat Web Multimedia dengan PHP SOFYAN PARIYASTO

4 PROYEK MEMBUAT WEB MULTIMEDIA DENGAN PHP Perpustakaan Nasional : Katalog Dalam Terbitan (KDT) Penulis : Sofyan Pariyasto PROYEK MEMBUAT WEB MULTIMEDIA DENGAN PHP - Cet. I. - Yogyakarta : Penerbit Lokomedia, hlm; 15 x 23 cm ISBN : Penerbit Lokomedia, Cetakan Pertama : Juli 2012 Editor : Lukmanul Hakim Cover : Subkhan Anshori Layout : Lukmanul Hakim Diterbitkan pertama kali oleh : Penerbit Lokomedia Jl. Jambon, Perum. Pesona Alam Hijau 2 Kav. B-4, Kricak Yogyakarta redaksi@bukulokomedia.com website : Copyright Lokomedia, 2012 Hak Cipta dilindungi oleh Undang-Undang Dilarang memperbanyak, mencetak ataupun menerbitkan sebagian maupun seluruh isi buku ini tanpa izin tertulis dari penerbit. iv

5 Kata Pengantar Sesuai dengan judul buku ini, yaitu membuat web multimedia, didalam buku ini saya mencoba menjelaskan langkah demi langkah tentang bagaimana membuat modul video ala youtube, dan mengintegrasikannya ke dalam website. Tidak hanya itu, disini juga akan dibahas bagaimana memasukkan file mp3 ke dalam web, sehingga bisa didengarkan secara online. Didalam buku ini juga akan dijelaskan bagaimana membuat modul game online berbasis flash, dan menampilkan iklan dari Google Adsense, sehingga mempermudah para pebisnis internet mengimplementasikan kode Google Adsense-nya ke dalam web. Dalam buku ini, selain membahas mengenai aplikasi multimedia dan periklanan yang dikemas dalam web, juga akan dibahas beberapa aplikasi jquery yang di-implementasikan dalam website seperti Efek Scrollable gallery with tooltips yang dikonfigurasikan dengan modul video, serta efek footer melayang yang menampilkan banner premium, dan bagaimana cara membuat video player tampak lebih hidup dengan CSS. Tidak hanya itu saja, pada akhir bab juga akan dijelaskan bagaimana memilih web hosting gratis yang menyediakan space dan bandwidth yang cukup besar, karena kita akan membuat web multimedia yang salah satu syaratnya adalah web hosting dengan space yang besar bahkan unlimited. Akhir kata, penulis menyadari tentu masih terdapat kekurangan-kekurangan dalam buku ini, terutama dikarenakan masih sangat banyak permasalahan-permasalahan yang belum penulis sertakan, semoga pada buku berikutnya akan penulis perkaya dengan materi-materi yang lebih bermutu. Oleh karena itu, pertanyaan, kritik dan saran dapat di sampaikan ke alamat Medan, November 2011 Penulis v

6 Halaman ini Sengaja Dikosongkan vi

7 Daftar Isi BAB 1. Mainkan Video dengan FlowPlayer Analisis dan Contoh Kesuksesan Web Multimedia Memahami Cara Kerja FlowPlayer...4 BAB 2. Modul Video dan Playernya Membuat Tabel untuk Modul Video Modul Video pada Halaman Administrator Modul Playlist Video Modul Tag Video Modul Video Membuat Scroll Video dilengkapi Efek Tooltips Membuat Area Player untuk Memainkan Video...26 BAB 3. Modul MP3 Online dan Playernya Membuat Tabel untuk Modul Mp Modul Mp3 pada Halaman Administrator Modul Artist Modul Playlist Mp Modul Mp Menampilkan Daftar Mp3 Terbaru di Halaman Pengunjung Membuat Area Player untuk Mendengarkan Mp BAB 4. Modul Game Online Berbasis Flash Membuat Tabel untuk Modul Game Modul Game pada Halaman Administrator Modul Tipe Game...56 vii

8 Modul Tag Game Modul Game Menampilkan Daftar Game Terbaru di Halaman Pengunjung Membuat Area Player untuk Memainkan Game...66 BAB 5. Google Adsense dan Footer Melayang Menampilkan Iklan Google Adsense Membuat Banner Footer Melayang...76 BAB 6. Upload Web Multimedia di Hosting Gratisan Mendaftar di Hosting Gratisan Mengupload Database Mengupload File Website menggunakan FileZilla...89 Lampiran: Cara Menggunakan Buku Ini...93 viii

9 BAB I Mainkan Video dengan FlowPlayer

10 Bab 1 Mainkan Video dengan FlowPlayer 1.1 Analisis dan Contoh Kesuksesan Web Multimedia Salah satu web multimedia berbasis video streaming yang paling populer adalah YouTube. Siapa yang tak kenal Youtube? Hampir seluruh pengguna internet mengenal YouTube. Selain tampilan situsnya yang menarik, YouTube juga menyediakan berbagai macam video yang siap dinikmati. Oke. langsung aja ya. sekarang kita juga akan membuat web yang tata letaknya menyerupai YouTube dalam penempatan video. Untuk lebih jelasnya, lihat gambar 1.1. Gambar 1.1 Tampilan content (video player) di YouTube Pada gambar 1.1 terlihat content (video player) berada di bagian kiri atas. Masalah penempatan content memang terlihat sepele, namun sangat berpengaruh terhadap kesuksesan sebuah web. Selain YouTube, ada juga web multimedia berbasis video streaming yang cukup populer lainnya, yaitu Metacafe. Adapun tampilan content-nya (video player) juga berada di bagian kiri atas. Lihat gambar Proyek Membuat Web Multimedia dengan PHP

11 Gambar 1.2 Tampilan content (video player) di Metacafe Dari berbagai web video streaming yang penulis amati, hampir seluruhnya meletakkan content (video player) di bagian kiri atas. Dalam bab 2 nanti, kita juga akan merancang modul untuk menampilkan video streaming di website kita (CMS Lokomedia) seperti yang terlihat pada gambar 1.3. Gambar 1.3 Tampilan Modul Video di CMS Lokomedia Bab I. Mainkan Video dengan FlowPlayer 3

12 1.2 Mamahami Cara Kerja FlowPlayer Perlu diketahui bahwa penulis menggunakan flowplayer versi untuk membuat video streaming di CMS Lokomedia, versi terbarunya dapat diperoleh di website resminya Flowplayer berfungsi sebagai media yang digunakan untuk memutar atau memainkan video berbasis browser, jadi kita akan membahas sedikit mengenai flowplayer ini. Beberapa format file yang dapat diputar oleh flowplayer, diantaranya: MP4 MOV FLV Penulis menyarankan sebaiknya menggunakan format flv, karena format ini merupakan jenis format video yang paling cocok untuk dijalankan melalui web, selain itu ukuran file flv yang relative kecil membuat format video ini banyak diminati dikalangan web video streming. Oke langsung aja ya dari pada saya banyak basi-basi ^_^. Berikut contoh implementasi dari flowplayer: Skrip flowplayer.php <html> <head> <meta http-equiv= content-type content= text/html; charset=utf-8 > <!-- memanggil skrip flowplayer min.js --> <script type= text/javascript src= flowplayer min.js > </script> <link rel= stylesheet type= text/css href= style.css > <title>contoh Pemasangan Flowplayer</title> </head> <body> <div id= page > <h1>contoh Pemasangan Flowplayer</h1> <p>contoh Pemasangan Flowplayer dengan tampilan Standar.</p> <!-- justin.flv merupakan video yang akan dimainkan --> <a href= justin.flv style= display:block;width:520px;height:330px id= player > </a> <script> flowplayer( player, flowplayer swf ); </script> </div> </body> </html> Sekarang coba jalankan skrip flowplayer.php di browser, lalu tekan tombol Play, 4 Proyek Membuat Web Multimedia dengan PHP

13 bagaimana? Apakah video berhasil dimainkan. Adapun justin.flv dapat diganti dengan nama video atau bisa disesuaikan sendiri dengan video yang inin Anda tampilkan. Untuk lebih jelasnya, berikut tampilan skrip flowplayer.php setelah dijalankan. Lihat gambar 1.4. Gambar 1.4 Hasil krip flowplayer.php Dalam pengalaman penulis, mengupload video ke server hosting bukanlah sesuatu hal yang menyenangkan, karena video pada umumnya berukuran besar, apalagi jika koneksi internet sedang lemot..!!! Bisa-bisa mau update satu video baru aja butuh waktu sampe 1 jam itu baru satu video, gimana coba kalau kita mau memasukan video satu album. bayangkan, bisa satu harian gak selesai Disini penulis mempunyai sebuah alternatif, dimana kita bisa memasukkan video youtube ke dalam flowplayer kita, jadi videonya kita ambil dari youtube dan dimainkan melalui flowplayer kita (video youtube dimasukan ke flowplayer kita, bukan dimasukan ke web kita). Bab I. Mainkan Video dengan FlowPlayer 5

14 Caranya untuk bisa memasukan video ke flowplayer kita, cukup meng-copy URL yang ada di youtube itu saja.. mudah kan?? tidak perlu waktu berjam-jam lagi untuk update video satu album. Untuk lebih jelasnya, perhatikan pada gambar 1.5. Gambar 1.5 Url YouTube Pada gambar 1.5 terlihat url youtube untuk memasukan video tersebut cukup hanya masukkan kode setelah v=, jadi kode yang kita masukan ke dalam flowplayer adalah NRdHsuuXxfk. Terkadang kita jumpai url youtube yang agak panjang, misalnya: Maka, kode yang kita masukan yaitu diantara v= dan &, dalam contoh ini adalah zatgnqdiefs. Untuk lebih jelasnya, tulislah skrip berikut: Skrip flowplayer-youtube.php <html> <head> <meta http-equiv= content-type content= text/html; charset=utf-8 > <script type= text/javascript src= flowplayer min.js > </script> <link rel= stylesheet type= text/css href= style.css > <title>contoh Pemasangan Flowplayer</title> </head> <body> <div id= page > <h1>contoh Pemasangan Flowplayer</h1> <p>contoh Pemasangan Flowplayer Tampilan Standar, <br> Menggunakan Video yang Berasal dari Youtube.</p> <!-- masukkan kode youtube setelah api: seperti yang dijelaskan --> <a href= api: zatgnqdiefs style= display:block;width:520px;height: 330px id= youtube > </a> <script> function showrelatedlist(gdata, container) { var relatedvideos = gdata.relatedvideos; var content = <em>related Videos:</em> ; content += <a class= go up ></a><div class= playlist > <div class= clips low > ; 6 Proyek Membuat Web Multimedia dengan PHP

15 jquery.each( relatedvideos, function(index, item){ content += <a href= + item.url + + (index==0? class= first : ) + > ; content += item.title + <br/> ; content += <em> + Math.round(item.duration / 60) + min</em></a> ; }); content += </div></div><a class= go down ></a> ; $(container).html(content); } $( div.playlist ).scrollable({ items: div.clips, vertical:true, next: a.down, prev: a.up }); $f( youtube, flowplayer swf, { plugins: { youtube: { url: flowplayer.youtube swf, enablegdata: true, onapidata: function(gdata) { console.log(gdata); showrelatedlist(gdata, #playlistcontainer ); } } }, clip: { provider: youtube, urlresolvers: youtube } }).playlist( div.clips ); </script> </div> </body> </html> Sekarang coba jalankan skrip flowplayer-youtube.php, lalu klik tombol Play, maka akan tampil video dari youtube di flowplayer Anda. Lihat gambar 1.6. Catatan: Meskipun dijalankan secara localhost, tapi untuk melihat hasil dari skrip flowplayeryoutube.php, komputer Anda harus dalam keadaan terhubung ke internet (online), karena menggunakan url langsung dari youtube. Pada bab-bab selanjutnya akan di bahas bagaimana cara membuat modul video pada CMS Lokomedia. Bab I. Mainkan Video dengan FlowPlayer 7

16 Gambar 1.6 Hasil skrip flowplayer-youtube.php 8 Proyek Membuat Web Multimedia dengan PHP