EBOOK INI MERUPAKAN SAMPE DARI

Membuat Web Multimedia Dengan Lokojquery BY SOFYAN PARIYASTO http://www.doobedo.com http://doobedo.com

1

BAB I FlOWPLAYER 1.1 Menganilis Dan Mencontoh Kesuksesan Web Multimedia Salah satu web multimedia berbasis video streaming yang cukup terkenal adalah youtube. Siapa yang tidak 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 dan metacafe dalam penempatan video. Untuk Lebih jelas perhatikan gambar dibawah ini.

Gambar 1.1 Tampilan YouTube 

Dari tampilan halaman youtube terlihat content (video player) berada di sebelah kiri atas. Masalah penempatan content memang terlihat sepele namun sangat berpengaruh terhadap kesuksesan sebuah web. Untuk contoh yang kedua merupakan tampilan halaman dari metacafe. Metacafe merupakan salah satu web video streaming yang juga cukup populer, b erikut screen shotnya.

2

Gambar 1.2 Tampilan Metacafe 

Dari kedua gambar terlihat content (video player) berada di sebelah kiri atas. Dari berbagai web video streaming yang penulis amati hampir seluruhnya meletakan content (video player) di bagian kiri atas. Sekarang kita juga akan merancang modul untuk menampilkan video streaming seperti berikut

Gambar 1.3 Tampilan Modul Video LokojQuery 

1.2 Mamahami Cara Kerja Flowplayer Perelu diketahui bahwa penulis menggunakan flowplayer versi 3.2.5 untuk membuat video streaming di cms lokomedia, ini merupakan versi terbaru dari flowplayer.org. Flowplyer disini 3

berfungsi sebagai media yang digunakan untuk memutar atau memainkan video berbasis browser,  jadi kita akan membahas sedikit mengenai flowpleyer pada bab ini.

Beberap format file yang dapat diputar oleh flowplyer antara lain : 

MP4



MOV



FLV

Penulis menyarankan sebaiknya menggunakan format video flv, karena ini merupakan jenis video yang paling cocok untuk dijalankan melalui web, karena 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 … ^_^. Contoh Implementasi Flowplayer

Skrip fl owplayer.php <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="flowplayer-3.2.4.min.js">

Sekarang coba jalankan skrip flowplayer.php di localhost lalu tekan play, bagaimana? Apakah video berhasil diputar. Tes.flv dapat diganti dengan nama video atau bisa disesuaikan sendiri dengan video yang ada. Untuk lebih jelasnya berikut tampilan skrip flowplayer.php setelah dijalankan.

4

Gambar 1.4 Tampilan Skrip flowplayer.php 

Pada bab-bab selanjutnya akan di bahas bagaimana cara membuat modul video pada lokojQuery (Lokomedia versi jQuery).

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, kita bisa memasukan video youtube ke dalam flowplayer kita, jadi videonya kita ambil dari youtube dan dimainkan melalui flowplyer kita (catatan : video youtube dimasukan ke flowplayer kita bukan dimasukan ke web kita). Caranya untuk bisa memasukan video ke flowplayer kita, cukup mengkopi url yang ada di youtube ….itu saja .. gimana mudahkan, tidak perlu waktu berjam-jam lagi untuk update video satu a lbum. Untuk lebih jelas perhatikan gambar berikut.

5

Gambar 1.5 YouTube Url 

Dari gambar 1.4 terlihat alamat url youtube yaitu http://www.youtube.com/watch?v=NRdHsuuXxfk untuk  Memasukan video tersebut cukup hanya masukan kode setelah v= jadi kode yang kita masukan ke dalam flowplyayer yaitu NRdHsuuXxfk. Trus gimana jika alamat urlnya seperti ini http://www.youtube.com/watch?v=tXKCP8OwiKQ&feature=topvideos kode yang kita masukan yaitu diantara v= dan &, maka kode yang kita gunakan untuk flowplayer menjadi tXKCP8OwiKQ . Untuk lebih jelasnya tulis skrip flowplayer-youtube.html dan jalankan dilocalhost. flowplayer-youtube.html <script type="text/ javasc ript" src="flowpla ye r-3.2.4.min.js">

Conto h Pema sa nga n Flowp layer

Conto h Pem asang an Flowp layer Dengan Ta mp ilan Sed erha na, Men gg unakan Video yang Berasal da ri Youtube . func tion show Related List(gda ta , c onta iner) { va r relate dVideo s = gd ata .relate d Vide os; va r co ntent = 'Relate d Vide os:'; c on te nt += '

';   jQuery.each( relatedVideos, function(index, item){ content += ''; content += item.title + "
"; c onte nt += "" + Ma th.round (item .d uration / 60) + " min"; }); c onte nt += ''; $(container).html(content);

6

$("d iv.pla ylist").sc rollab le({ items:'div.clips', vertical:true, next:'a.down', prev:'a.up' }); }

$f("you tub e", "flow p laye r-3.2.5.sw f", { plugins: { youtube : { url:'flowplayer.youtube-3.2.1.swf', enab leGda ta: true,

onApiData : func tion(gda ta) { console.log(gdata);

show Rela ted List(g da ta , "# pla ylistCo nta iner"); } } }, c lip : { provider: 'youtub e', urlResolvers: 'youtube' } }).pla ylist("d iv.c lips");

Sekarang coba jalankan skrip flowplayer-youtube.html di localhost lalu tekan play.

Gambar 1.6 Tampilan Skrip flowplayer-youtube.html 

7

Catatan : “Karena menggunakan url dari youtube maka, untuk melihat hasil dari skrip flowplayer-youtube.html, Komputer harus terhubung ke internet.”

8

BAB II MODUL VIDEO 2.1 Membuat Tabel untuk Modul Video Untuk bisa membuat modul video pada cms Lokojquery pertama-tama yang harus kita lakukan adalah mebuat tabel baru, ada empat tab le yang akan kita buat … langsung aja yah.

2.2 Membuat Tabel Video Tabel ini nantinya akan digunakan untuk menyimpan informasi, seputar video yang kita upload ke web kita mulai dari judul video, keterangan, video seo serta link youtube, untuk lebih jelasnya perhatikan tabel di bawah ini.

Tabel 2.1 Struktur tabel video.

Kolom

Tipe

Pa njang

Keteranga n

id_vide o

int

5

Prim a ry Key Auto Inc rem ent

id_pla yalist int username va rc har   jdl_vide o vide o_de o va rc har keterangan text g br_vide o va rc har video va rc har youtube va rc har d iliha t int ha ri va rc har tanggal date   jam tag vid va rc har

5 30 va rc ha r

100 100 100 100 100 7 20

Defa ult : 1

time 100

Buatlah tabel video dengan struktur tabel seperti di atas, untuk membuatnya masuk ke phpmyadmin, lalu pilih database dblokomedia, pada pilihan Create new table on database  dblokomedi masukan nama tabel, dan pada pilihan   Number of fields masukan jumlah kolom,

Setelah itu Klik tombol Go.

Gambar 2.1 Menentukan Nama Tabel Dan Jumlah Kolom 

9

Tahap selanjutnya isi nama tabel, tipe, panjang dan keterangan seperti pada tabel 2.1, kemudian klik  save maka akan terlihat struktur tabel seperti gambar di bawah ini.

Gambar 2.2 Tampilan Struktur Tabel video 

Sampai disini kita telah selesai membuat tabel video, pada pembahasan berikutnya akan dijelaskan bagaimana membuat tabel playlist.

2.3 Membuat Tabel Playlist Tabel playlist adalah tabel yang menampung keterangan mengenai video, atau bisa dikatakan tabel ini adalah tabel album. Lho … kalau tabel album kenapa kok namanya dibuat playlist?. Namanya dibuat playlist agar kita tidak sulit membedakannya, tabel album digunakan untuk foto gallery, sedangkan tabel playlist digunakan untuk video.

Tabel 2.2 Struktur tabel playlist.

Kolom id_playlist

Tipe int

Panjang 5

jdl_playlist playlist_seo gbr_playlist aktif

varchar varchar varchar enum

100 100 100 (‘Y’,’N’)

Keterangan Primary Key Auto Increment

Default : Y

10

Buatlah tabel playlist dengan struktur tabel seperti pada Tabel 2.2(Struktur tabel playlist), untuk  membuatnya masuk ke phpmyadmin, lalu pilih database dblokomedia, pada pilihan Create new  table on database dblokomedi masukan nama tabel, dan pada pilihan   Number of fields masukan

 jumlah kolom, Setelah itu Klik tombol Go.

Gambar 2.3 Menentukan Nama Tabel Dan Jumlah Kolom 

Tahap selanjutnya isi nama tabel, tipe, panjang dan keterangan seperti pada tabel 2.2, kemudian klik  save maka akan terlihat struktur tabel seperti gambar 2.4.

Gambar 2.4 Tampilan Struktur Tabel playlist 

Tabel playlist sudah selesai dibuat langkah selanjutnya membuat tabel tag, tapi tag untuk video kita beri nama tagvid, dimana video akan dikaitkan satu sama lain melalui tabel ini.

2.4 Membuat Tabel Tagvid (Tag Video) Tabel tagvid merupakan tabel yang menghubungkan antar satu video dengan video yang lainnya, seberti halnya tabel tag yang digunakan pada berita. Tabel ini nantinya akan digunakan untuk  menyimpan informasi nama tag, tag seo, dan count.

Tabel 2.3 Struktur tabel tagvid. Kolom id_tag

Tipe int

Panjang 5

Nama_tag

varchar

100

Keterangan Primary Key Auto Increment

11

tag_seo count

varchar int

100 5

Buatlah tabel tagvid dengan struktur tabel seperti pada Tabel 2.3 (Struktur tabel tagvid), untuk  membuatnya masuk ke phpmyadmin, lalu pilih database dblokomedia, pada pilihan Create new  table on database dblokomedi masukan nama tabel, dan pada pilihan   Number of fields masukan

 jumlah kolom, Setelah itu Klik tombol Go.

Gambar 2.5 Menentukan Nama Tabel Dan Jumlah Kolom 

Seperti yang telah dijelaskan pada halaman sebelumnya, tahap selanjutnya isi nama tabel, tipe, panjang dan keterangan seperti pada tabel 2.3, kemudian klik save maka akan terlihat struktur tabel seperti gambar 2.6.

Gambar 2.6 Tampilan Struktur Tabel tagvid 

Tabel

tagvid

(tag

video)

sudah

selesai

dibuat

langkah

selanjutnya

membuat

tabel

komentarvid(komentar video), tapi tag untuk video kita beri nama tagvid, dimana tabel ini akan berisi komentar yang diberikan pengunjung mengenai video yang di tampilkan.

2.4 Membuat Tabel Komentarvid (Komentar Video) Tabel komentar video ini merupakan tabel terakhir yang akan kita bahas pada bab ini, tabel ini nantinya akan digunakan untuk menyimpan komentar yang diberikan pengunjung mengenai video yang mereka lihat, untuk lebih jelas perhatikan tabel 2.4 berikut ini.

Tabel 2.4 Struktur tabel komentarvid.

12

Kolom id_komentar

Tipe Int

Panjang 5

id_video nama_komentar url isi_komentar tgl jam_komentar aktif

int varchar varchar text date time enum

5 100 100

(‘Y’,’N’)

Keterangan Primary Key Auto Increment

Default : Y

Buatlah tabel tagvid dengan struktur tabel seperti pada Tabel 2.4 (Struktur tabel komentarvid), untuk membuatnya masuk ke phpmyadmin, lalu pilih database dblokomedia, pada pilihan Create   new table on database dblokomedi masukan nama tabel, dan pada pilihan   Number of fields

masukan jumlah kolom, Setelah itu Klik tombol Go .

Gambar 2.7 Menentukan Nama Tabel Dan Jumlah Kolom 

Langkah selanjutnya isi isi nama tabel, tipe, panjang dan keterangan seperti pada tabel 2.4, kemudian klik save maka akan terlihat struktur tabel seperti gambar 2.8.

Gambar 2.8 Tampilan Struktur Tabel komentarvid 

Selesai sudah pembahasan kita pada bab ini, keempat tabel yang akan digunakan untuk video streaming sudah kita buat. Pada pembahasan selanjutnya akan dibahas bagaiman mengintegrasikan, antara tabel video, css style (tampilan video streaming) dan skrip php yang menangani video. ..^_^ 13

2.5 Membuat Scroll Video Terbaru di Halaman Pe ngunjung Dengan Efek Tooltips Scroll Video yang dimasksud adalah scroll video yang akan menampilkan sepuluh video tebaru yang di upload oleh administrator web. Dimana scroll video ini nantinya akan di lengkapi dengan efek tooltips yang berisi judul video. Scroll Video yang digunakan dalam pembahasan ini merupakan   scrollable gallery with tooltips yang berrasal dari flowplayer.org. Tampilan awal  scrollable gallery with tooltips terlihat seperti gambar 2.9 berikut ini.

Gambar 2.9 Tampilan Scrollable Gallery With Tooltips 

Pada pembahasan selanjutkan kita akan membahas bagaimana cara memodifikasi  scrollable gallery with tooltips yang berrasal dari flowplayer.org, sehingga bisa kita integrasikan dengan modul video

yang akan kita buat. ^_^ Tampilan Scroll Video terbaru yang akan kita buat terlihat seperti gambar 2.10

Gambar 2.10 Tampilan Scrollable Video Terbaru Dengan Tooltips 

Setiap video yang diupload akan di wakili oleh sebuah gambar. Seperti yang terlihat pada gambar 2.10 masing-masing gambar mewakili satu judul video. Pada pembahasan selanjutnya akan dibahas bagaimana memasukan dan mengedit template Lokojquery (Lokomedia Versi Jquery), oleh sebab itu penulis menyarankan untuk membackup file template terlebih dahulu.

2.5.1 Mengedit template.php

14

Kita akan membuat template baru u ntuk lokomedia cms, template ini kita beri nama video. Caranya copy folder eljequery yang ada di folder templates lalu paste dengan nama video. Gambar susunan direktorinya terlihat seperti gambar 2.11 berikuti ini.

Gambar 2.11 Tampilan Susunan Direktori Templates 

Setelah itu buka file tempate.php yang ada di folder video, dengan menggunakan macromedia dreamweaver, seperti terlihat pada gambar 2.12. dan 2.13.

Gambar 2.12 Tampilan File Template.php 

Gambar 2.13 Tampilan Template.php di Buka dengan Dreamweaver 

Pada gambar 2.13 perhatikan source code yang di blok, pada bagian yang diblok kita akan menyisipkan source code yang nantinya akan digunakan untuk memanggil file pendukung video scroll. … ^_^ ini dia source codenya.

15

"> ">

Ketik source code diatas dan letekan dibaris ke 26 perhatikan gambar 2.13. Source code diletakan dibawah " type="text/css" />. Kemudian ketik Code berikut <script type="text/javascript" src="">

Code di atas diletakan dibawah <script src="" type="text/javascript">. Tampilan file template.php setelah diedit akan terlihat seperti gambar 2.14.

Gambar 2.14 Tampilan Template.php Setelah di edit 

Setelah itu pada baris ke 122 atau dibawah

, ketik source code video scroll.

Gambar 2.15 Tampilan Template.php baris 120 s/d 125 

Berikut source code yang diketikan di baris 122 (di antara dan )

"; } ?>

The bronze statue

<script> $(document).ready(function() { $(".scrollable").scrollable().find("a").tooltip({ tip: '#tooltip' }).gallery({ disabledClass: 'inactive' });

17

});

File template.php telah selesai kita edit, tahap selanjutnya adalah mengedit style.css dan headline.css

2.5.2 Mengedit style.css dan headline.css

Buka folder css yang ada dalam folder video. Karena kita akan melakukan editing terhadap dua buah file css, yaitu , style.css dan headline.css. Pada gambar 2.16 terlihat susunan direktori templates\video\css.

Gambar 2.16 Tampilan Susunan Direktori CSS 

Setelah membuka folder templates\video\css serrperti terlihat pada gambar 2.16, edit file style.css menggunakan dreamweaver. Untuk lebih jelas lihat potongan source code style.css Style.css #wrapper { width: 960px; background: url(../images/bg_content.jpg) repeat-y top left; margin: 0 auto;/* center the page in Firefox */ text-align: left;  position: relative; <------- ini di hapus }

Perhatikan source style.css cari #wrapper kemudian hapus position:relative;. File style.css yang telah diedit menjadi seperti berikut: Style.css #wrapper { width: 960px; background: url(../images/bg_content.jpg) repeat-y top left;

18

margin: 0 auto;/* center the page in Firefox */ text-align: left; }

Langkah selanjutnya cari #content maka akan terlihat source code seperti berikut: Style.css #content { display: block; float: left; clear: left; width: 630px; padding: 20px; margin: 0 0 30px 0; clear: both; text-align: justify; font-size: 0.9em; }

Tambahkan position:relative;. Pada baris paling akhir di bagian content maka source codenya menjadi seperti berikut ini: Style.css #content { display: block; float: left; clear: left; width: 630px; padding: 20px; margin: 0 0 30px 0; clear: both; text-align: justify; font-size: 0.9em;  position: relative; <------- code yang di tambahkan }

Kamudian pada baris paling bawah style.css tambahkan source code

videoterbaru dan

bingkaivideo berikut : videoterbaru #videoterbaru { background-color: #333; width: 765px; margin-right: auto; margin-left: auto; margin-top: 0px; }

bingkaivideo #bingkaivideo {

19

background-color: #333; width: 910px; margin-right: auto; margin-left: auto; margin-top: 0px; border:1px solid #0f0; }

File style.css telah selesai kita edit selanjutnya, buka file headline.css, dan cari .t{ lalu edit maka akan terlihat source seperti berikut: Headline.css .t{ w idth:340px; p osition:ab solute; height:38px; top: 584px; left:24px;

edit top: 584px; menjadi top: 247px; maka hasilnya akan menjadi seperti berikut ini Headline.css .t{ w idth:340px; p osition:ab solute ; he ight:38px; top: 247px; left:24px;

sampai tahap ini kita telah selesai membuat scroll video dengan tooltips hasilnya akan terlihat seperti gambar 2.17 berikuti ini.

Gambar 2.17 Tampilan Scroll Video 

Pada gambar 2.17 tampak tampilan scroll video yang masih kosong, hal tersebut terjadi karena kita belum memasukan video, jadi tampilan scroll videonya masih kosong.

2.6 Membuat Tampilan Play Video Pada Halaman Pengunjung

Halaman play video yang akan kita buat disini dibedakan menjadi dua, yang pertama halaman play video yang ada dihalaman utama, dan yang kedua adalah halaman play video yang ada di halaman album video / playlist.

Untuk bisa membuat halaman play video kita akan mengedit beberapa file. File yang akan kita edit adalah template.php, kiri.php, headline.css dan style.css yang ada pada folder template/video. Sebelum melakkukan editing file ada baiknya kalau membackup kedua file tersebut. Berikut ini adalah tampilan play video yang akan kita buat. Seperti terlihat pada gambar 2.18 20

Gambar 2.18 Tampilan Play Vi deo Di Halaman Pengunjung 

Oke ….. sampai disini udah tau kan, tampilan play video yang akan kita buat? ^_^ Buka file tempate.php yang ada di folder video, dengan menggunakan macromedia dreamweaver, seperti terlihat pada gambar 2.19..

Gambar 2.19 Tampilan Template.php di Buka dengan Dreamweaver 

Pada gambar 2.19 perhatikan source code yang di blok, pada bagian yang diblok kita akan menyisipkan source code yang nantinya akan digunakan untuk memanggil file pendukung play video. ini dia source codenya. <script type="text/javascript" src="">

Ketik source code diatas dan letekan dibaris ke 29 perhatikan gambar 2.19. Source code diletakan di atas <script src="" type="text/javascript"> . Tampilan file template.php setelah diedit akan terlihat seperti gambar 2.20

21

Gambar 2.20 Tampilan Template.php Setelah di edit 

Setelah itu pada baris paling bawah template.php tambahkan source code dibawah ini. <script> flowplayer("player", "", { clip: { autoPlay: false, autoBuffering: true, }, onLoad: function() { loading this.setVolume(35); } });

// called when player has finished // set volume property

<script> function showRelatedList(gdata, container) { var relatedVideos = gdata.relatedVideos; var content = 'Related Videos:'; content += '

'; jQuery.each( relatedVideos, function(index, item){ content += ''; content += item.title + "
"; content += "" + Math.round(item.duration / 60) + " min"; }); content += '

'; $(container).html(content); $("div.playlist").scrollable({

22

items:'div.clips', vertical:true, next:'a.down', prev:'a.up' }); } $f("youtube", "", { plugins: { youtube: { url:'flowplayer.youtube-3.2.1.swf', enableGdata: true, onApiData: function(gdata) { console.log(gdata); showRelatedList(gdata, "#playlistContainer"); } } }, onLoad: function() { this.setVolume(35); }, clip: { autoPlay: false, autoBuffering: true, provider: 'youtube', urlResolvers: 'youtube' } }).playlist("div.clips");

Setelah source di atas ditambahkan ke template.php lalu simpan. Tahap selanjutnya buka file kiri.php yang ada pada direktori template/video. Pada baris ke enam tepat dibawah

kita akan menambahkan source code play video, berikut ini adalah gambar file

kiri.php sebelum di edit.

23

Gambar 2.21 Tampilan kiri.php Sebelum di edit 

Berikut ini adalah source code yang diletakan di kiri.php pada baris ke enam. $d[jdl_video]
"; echo "Diposting oleh : $d[nama_lengkap]
"; echo "

"; echo " "; echo "

"; } else { $iyasrini="2"; $detail=mysql_query("SELECT * FROM video,users WHERE users.username=video.username ORDER BY dilihat DESC limit 1"); $d = mysql_fetch_array($detail); echo "$d[jdl_video]
"; echo "Diposting oleh : $d[nama_lengkap]
"; echo "

"; echo " "; echo "

"; }

24

echo "
"; ?>

Langkah selanjutnya yaitu menambahkan source pada style.css. Buka file style.css yang ada pada folder video/css, pada style.css tambahkan source berikut ini. #video { background-color:#333; width:620px; min-height:420px; border:2px solid #0F0; outline:1px solid #333; text-align:left; margin-right: auto; margin-left: auto; } #video a { color:#295c72; margin-right: auto; margin-left: auto; margin-top: 30px; }

Pada headline.css rubah Width:340px; position:absolute; height:38px; top: 247px; left:24px; menjadi Width:340px; position:absolute; height:38px; top: 726.5px; left:24px; langkah selanjutnya copy file 

Flowplayer-3.2.5.swf 



Flowplayer.controls-3.2.3.swf 



Flowplayer.youtube-3.2.1.swf 

Semua file di atas letakan di folder templates\video serta copy file flowplayer-3.2.4.min.js dan letakan di folder templates\video\js.

25