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 1.000.000,00 (satu juta rupiah), atau pidana penjara paling lama 7 (tujuh) tahun dan/atau denda paling banyak Rp 5.000.000.000,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 500.000.000,00 (lima ratus juta rupiah).

P r oye k M e m b u at We b M u l t i m e d i a

dengan PHP

www.bukulokomedia.com

SOFYAN PARIYASTO

iv

PROYEK MEMBUAT WEB MULTIMEDIA DENGAN PHP Perpustakaan Nasional : Katalog Dalam Terbitan (KDT)Penulis : Sofyan PariyastoPROYEK MEMBUAT WEB MULTIMEDIA DENGAN PHP- Cet. I. - Yogyakarta : Penerbit Lokomedia, 2012 95 hlm; 15 x 23 cm ISBN : 978-979-1758-87-1

Penerbit Lokomedia, Cetakan Pertama : Juli 2012

Editor : Lukmanul HakimCover : Subkhan AnshoriLayout : Lukmanul Hakim

Diterbitkan pertama kali oleh :Penerbit LokomediaJl. Jambon, Perum. Pesona Alam Hijau 2 Kav. B-4, Kricak Yogyakarta 55242.

email : redaksi@bukulokomedia.comwebsite : www.bukulokomedia.com

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.

v

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 email sofyanpariyasto@gmail.com.

Medan, November 2011

Penulis

vi

Halaman ini Sengaja Dikosongkan

www.bukulokomedia.com

vii

Daftar Isi

BAB 1. Mainkan Video dengan FlowPlayer...................................................................1

1.1. Analisis dan Contoh Kesuksesan Web Multimedia.................................................... 2

1.2. Memahami Cara Kerja FlowPlayer..............................................................................4

BAB 2. Modul Video dan Playernya................................................................................9

2.1. Membuat Tabel untuk Modul Video...........................................................................10

2.2. Modul Video pada Halaman Administrator................................................................12

2.2.1. Modul Playlist Video........................................................................................12

2.2.2. Modul Tag Video...............................................................................................18

2.2.3. Modul Video......................................................................................................19

2.3. Membuat Scroll Video dilengkapi Efek Tooltips.......................................................22

2.4. Membuat Area Player untuk Memainkan Video........................................................26

BAB 3. Modul MP3 Online dan Playernya..................................................................35

3.1. Membuat Tabel untuk Modul Mp3............................................................................36

3.2. Modul Mp3 pada Halaman Administrator..................................................................38

3.2.1. Modul Artist......................................................................................................38

3.2.2. Modul Playlist Mp3..........................................................................................42

3.2.3. Modul Mp3.......................................................................................................44

3.3. Menampilkan Daftar Mp3 Terbaru di Halaman Pengunjung....................................47

3.4. Membuat Area Player untuk Mendengarkan Mp3....................................................48

BAB 4. Modul Game Online Berbasis Flash................................................................53

4.1. Membuat Tabel untuk Modul Game..........................................................................54

4.2. Modul Game pada Halaman Administrator................................................................56

4.2.1. Modul Tipe Game.............................................................................................56

viii

4.2.2. Modul Tag Game..............................................................................................61

4.2.3. Modul Game.....................................................................................................63

4.3. Menampilkan Daftar Game Terbaru di Halaman Pengunjung..................................65

4.4. Membuat Area Player untuk Memainkan Game.......................................................66

BAB 5. Google Adsense dan Footer Melayang.............................................................71

5.1. Menampilkan Iklan Google Adsense.........................................................................72

5.2. Membuat Banner Footer Melayang............................................................................76

BAB 6. Upload Web Multimedia di Hosting Gratisan................................................79

6.1. Mendaftar di Hosting Gratisan...................................................................................80

6.2. Mengupload Database.................................................................................................85

6.3. Mengupload File Website menggunakan FileZilla....................................................89

Lampiran: Cara Menggunakan Buku Ini....................................................................93

BAB I

Mainkan Video dengan FlowPlayer

2 Proyek Membuat Web Multimedia dengan PHP

Bab 1

Mainkan Video dengan FlowPlayer

1.1 Analisis dan Contoh Kesuksesan Web MultimediaSalah 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 1.2.

3Bab I. Mainkan Video dengan FlowPlayer

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

4 Proyek Membuat Web Multimedia dengan PHP

1.2 Mamahami Cara Kerja FlowPlayerPerlu diketahui bahwa penulis menggunakan flowplayer versi 3.2.5 untuk membuat video streaming di CMS Lokomedia, versi terbarunya dapat diperoleh di website resminya http://flowplayer.org.

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-3.2.4.min.js --><script type=”text/javascript” src=”flowplayer-3.2.4.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-3.2.5.swf”); </script> </div> </body></html>

Sekarang coba jalankan skrip flowplayer.php di browser, lalu tekan tombol Play,

5Bab I. Mainkan Video dengan FlowPlayer

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

6 Proyek Membuat Web Multimedia dengan PHP

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 http://www.youtube.com/watch?v=NPoHPNeU9fc, 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:

http://www.youtube.com/watch?v=zatgnqdIefs&feature=relmfu

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-3.2.4.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”>’;

7Bab I. Mainkan Video dengan FlowPlayer

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-3.2.5.swf”, { plugins: { youtube: { url:’flowplayer.youtube-3.2.1.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 flowplayer-youtube.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.

8 Proyek Membuat Web Multimedia dengan PHP

Gambar 1.6 Hasil skrip flowplayer-youtube.php