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, berikut screen shotnya.

2

2 Mamahami Cara Kerja Flowplayer Perelu diketahui bahwa penulis menggunakan flowplayer versi 3. Sekarang kita juga akan merancang modul untuk menampilkan video streaming seperti berikut Gambar 1.2. Flowplyer disini 3 . Dari berbagai web video streaming yang penulis amati hampir seluruhnya meletakan content (video player) di bagian kiri atas. ini merupakan versi terbaru dari flowplayer.org.Gambar 1.5 untuk membuat video streaming di cms lokomedia.2 Tampilan Metacafe Dari kedua gambar terlihat content (video player) berada di sebelah kiri atas.3 Tampilan Modul Video LokojQuery 1.

height:330px" id="player"> </a> <script> flowplayer("player".2.</p> <!-.swf"). Oke langsung aja ya … dari pada saya banyak basi-basi … ^_^.min. karena ukuran file flv yang relative kecil membuat format video ini banyak diminati dikalangan web video streming. </script> </div> </body></html> Sekarang coba jalankan skrip flowplayer.2.flv dapat diganti dengan nama video atau bisa disesuaikan sendiri dengan video yang ada.4.css"> <title>Contoh Pemaangan Flowplayer</title> </head><body> <div id="page"> <h1>Contoh Pemasangan Flowplayer</h1> <p>Contoh Pemasangan Flowplayer Dengan Tampilan Sederhana. "flowplayer-3.berfungsi sebagai media yang digunakan untuk memutar atau memainkan video berbasis browser.php <html><head> <meta http-equiv="content-type" content="text/html. Tes.2. bagaimana? Apakah video berhasil diputar. Contoh Implementasi Flowplayer Skrip flowplayer.Ini merupakan untuk menghubungjan flowplayer-3. jadi kita akan membahas sedikit mengenai flowpleyer pada bab ini.4.php di localhost lalu tekan play.js --> <script type="text/javascript" src="flowplayer-3.min. charset=UTF-8"> <!-. Untuk lebih jelasnya berikut tampilan skrip flowplayer.flv" style="display:block.php setelah dijalankan. karena ini merupakan jenis video yang paling cocok untuk dijalankan melalui web.5. 4 .width:520px.js"></script> <link rel="stylesheet" type="text/css" href="style.tes. Beberap format file yang dapat diputar oleh flowplyer antara lain :  MP4  MOV  FLV Penulis menyarankan sebaiknya menggunakan format video flv.flv merupakan video yang akan di putar atau di mainkan --> <a href="tes.

apalagi jika koneksi internet sedang lemot…..itu saja . Itu baru satu video. Caranya untuk bisa memasukan video ke flowplayer kita. cukup mengkopi url yang ada di youtube …. !!! Bisa-bisa mau update satu video baru aja butuh waktu sampe 1 jam…. mengupload video ke server hosting bukanlah sesuatu hal yang menyenangkan. gimana coba kalau kita mau memasukan video satu album …. Untuk lebih jelas perhatikan gambar berikut. Dalam pengalaman penulis. kita bisa memasukan video youtube ke dalam flowplayer kita. karena video pada umumnya berukuran besar.Gambar 1. 5 .php Pada bab-bab selanjutnya akan di bahas bagaimana cara membuat modul video pada lokojQuery (Lokomedia versi jQuery).4 Tampilan Skrip flowplayer. gimana mudahkan. jadi videonya kita ambil dari youtube dan dimainkan melalui flowplyer kita (catatan : video youtube dimasukan ke flowplayer kita bukan dimasukan ke web kita).. Bayangkan. tidak perlu waktu berjam-jam lagi untuk update video satu album. bisa satu harian gak selesai… Disini penulis mempunyai sebuah alternatif.

5 YouTube Url Dari gambar 1.</p> <!-.2.html dan jalankan dilocalhost.html(content).4 terlihat alamat url youtube yaitu http://www. content += "<em>" + Math. container) { var relatedVideos = gdata.relatedVideos.js"></script> <link rel="stylesheet" type="text/css" href="style. function(index.css"> <title>Contoh Pemasangan Flowplayer</title> </head><body> <div id="page"> <h1>Contoh Pemasangan Flowplayer</h1> <p>Contoh Pemasangan Flowplayer Dengan Tampilan Sederhana.com/watch?v=NRdHsuuXxfk untuk Memasukan video tersebut cukup hanya masukan kode setelah v= jadi kode yang kita masukan ke dalam flowplyayer yaitu NRdHsuuXxfk. 6 .html <html><head> <meta http-equiv="content-type" content="text/html.height:330px" id="youtube" > </a> <script> function showRelatedList(gdata.duration / 60) + " min</em></a>".com/watch?v=tXKCP8OwiKQ&feature=topvideos kode yang kita masukan yaitu diantara v= dan &. $(container). maka kode yang kita gunakan untuk flowplayer menjadi tXKCP8OwiKQ . <br> Menggunakan Video yang Berasal dari Youtube. item){ content += '<a href="'+ item.masukan kode youtube setelah api: seperti yang di jelaskan --> <a href="api:tXKCP8OwiKQ" style="display:block. Trus gimana jika alamat urlnya seperti ini http://www.url +'" '+ (index==0 ? 'class="first"' : "") +'>'.youtube. charset=UTF-8"> <script type="text/javascript" src="flowplayer-3.4.Gambar 1. }). var content = '<em>Related Videos:</em>'.width:520px. content += item. content += '</div></div><a class="go down"></a>'. jQuery.min. Untuk lebih jelasnya tulis skrip flowplayer-youtube. content += '<a class="go up"></a><div class="playlist"><div class="clips low">'.title + "<br/>".youtube.round(item.each( relatedVideos. flowplayer-youtube.

6 Tampilan Skrip flowplayer-youtube. clip: { provider: 'youtube'. urlResolvers: 'youtube' } }).playlist("div.scrollable({ items:'div.youtube-3. showRelatedList(gdata. </script> </div> </body></html> Sekarang coba jalankan skrip flowplayer-youtube.playlist").2. "#playlistContainer"). } } }.clips"). Gambar 1.1.html di localhost lalu tekan play. "flowplayer-3. onApiData: function(gdata) { console.log(gdata).swf'.5. next:'a.down'.clips'.2. } $f("youtube".html 7 .up' }).$("div. enableGdata: true.swf". prev:'a. vertical:true. { plugins: { youtube: { url:'flowplayer.

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

1 Struktur tabel video. pada pilihan Create new table on database dblokomedi masukan nama tabel. video seo serta link youtube.1 Menentukan Nama Tabel Dan Jumlah Kolom 9 . ada empat table yang akan kita buat … langsung aja yah. Tabel 2. keterangan. Gambar 2. untuk lebih jelasnya perhatikan tabel di bawah ini. dan pada pilihan Number of fields masukan jumlah kolom. untuk membuatnya masuk ke phpmyadmin. lalu pilih database dblokomedia. 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. Setelah itu Klik tombol Go.2 Membuat Tabel Video Tabel ini nantinya akan digunakan untuk menyimpan informasi. Kolom id_video id_playalist username jdl_video video_deo keterangan gbr_video video youtube dilihat hari tanggal jam tagvid Tipe int int varchar varchar varchar text varchar varchar varchar int varchar date time varchar Panjang 5 5 30 100 100 100 100 100 7 20 Keterangan Primary Key Auto Increment Default : 1 100 Buatlah tabel video dengan struktur tabel seperti di atas.BAB II MODUL VIDEO 2. seputar video yang kita upload ke web kita mulai dari judul video.

kemudian klik save maka akan terlihat struktur tabel seperti gambar di bawah ini.Tahap selanjutnya isi nama tabel.3 Membuat Tabel Playlist Tabel playlist adalah tabel yang menampung keterangan mengenai video. 2. panjang dan keterangan seperti pada tabel 2. sedangkan tabel playlist digunakan untuk video. Tabel 2. atau bisa dikatakan tabel ini adalah tabel album. Lho … kalau tabel album kenapa kok namanya dibuat playlist?.2 Tampilan Struktur Tabel video Sampai disini kita telah selesai membuat tabel video. pada pembahasan berikutnya akan dijelaskan bagaimana membuat tabel playlist.1. Kolom id_playlist jdl_playlist playlist_seo gbr_playlist aktif Tipe int varchar varchar varchar enum Panjang 5 100 100 100 (‘Y’. tipe. Namanya dibuat playlist agar kita tidak sulit membedakannya. Gambar 2.2 Struktur tabel playlist. tabel album digunakan untuk foto gallery.’N’) Keterangan Primary Key Auto Increment Default : Y 10 .

seberti halnya tabel tag yang digunakan pada berita.4 Membuat Tabel Tagvid (Tag Video) Tabel tagvid merupakan tabel yang menghubungkan antar satu video dengan video yang lainnya. dimana video akan dikaitkan satu sama lain melalui tabel ini. Setelah itu Klik tombol Go.2. dan count.Buatlah tabel playlist dengan struktur tabel seperti pada Tabel 2.3 Struktur tabel tagvid. tag seo. kemudian klik save maka akan terlihat struktur tabel seperti gambar 2. Tabel 2. Gambar 2. untuk membuatnya masuk ke phpmyadmin. tapi tag untuk video kita beri nama tagvid. panjang dan keterangan seperti pada tabel 2. Kolom id_tag Nama_tag Tipe int varchar Panjang 5 100 11 Keterangan Primary Key Auto Increment . Tabel ini nantinya akan digunakan untuk menyimpan informasi nama tag. dan pada pilihan Number of fields masukan jumlah kolom. 2. Gambar 2.4. tipe. lalu pilih database dblokomedia.4 Tampilan Struktur Tabel playlist Tabel playlist sudah selesai dibuat langkah selanjutnya membuat tabel tag.3 Menentukan Nama Tabel Dan Jumlah Kolom Tahap selanjutnya isi nama tabel. pada pilihan Create new table on database dblokomedi masukan nama tabel.2(Struktur tabel playlist).

tahap selanjutnya isi nama tabel. lalu pilih database dblokomedia. untuk lebih jelas perhatikan tabel 2. pada pilihan Create new table on database dblokomedi masukan nama tabel.6 Tampilan Struktur Tabel tagvid Tabel tagvid (tag video) sudah selesai dibuat langkah selanjutnya membuat tabel komentarvid(komentar video). Tabel 2. tipe. Gambar 2. panjang dan keterangan seperti pada tabel 2.4 berikut ini. Gambar 2.tag_seo count varchar int 100 5 Buatlah tabel tagvid dengan struktur tabel seperti pada Tabel 2. dan pada pilihan Number of fields masukan jumlah kolom. 12 . kemudian klik save maka akan terlihat struktur tabel seperti gambar 2. Setelah itu Klik tombol Go.5 Menentukan Nama Tabel Dan Jumlah Kolom Seperti yang telah dijelaskan pada halaman sebelumnya. tapi tag untuk video kita beri nama tagvid.6.4 Struktur tabel komentarvid.3. 2. dimana tabel ini akan berisi komentar yang diberikan pengunjung mengenai video yang di tampilkan. tabel ini nantinya akan digunakan untuk menyimpan komentar yang diberikan pengunjung mengenai video yang mereka lihat.4 Membuat Tabel Komentarvid (Komentar Video) Tabel komentar video ini merupakan tabel terakhir yang akan kita bahas pada bab ini.3 (Struktur tabel tagvid). untuk membuatnya masuk ke phpmyadmin.

’N’) Default : Y Buatlah tabel tagvid dengan struktur tabel seperti pada Tabel 2. kemudian klik save maka akan terlihat struktur tabel seperti gambar 2.4.7 Menentukan Nama Tabel Dan Jumlah Kolom Langkah selanjutnya isi isi nama tabel.Kolom id_komentar id_video nama_komentar url isi_komentar tgl jam_komentar aktif Tipe Int int varchar varchar text date time enum Panjang 5 5 100 100 Keterangan Primary Key Auto Increment (‘Y’. antara tabel video..8 Tampilan Struktur Tabel komentarvid Selesai sudah pembahasan kita pada bab ini. Gambar 2.8. lalu pilih database dblokomedia. panjang dan keterangan seperti pada tabel 2. . tipe. Setelah itu Klik tombol Go. untuk membuatnya masuk ke phpmyadmin.4 (Struktur tabel komentarvid). dan pada pilihan Number of fields masukan jumlah kolom. Gambar 2. Pada pembahasan selanjutnya akan dibahas bagaiman mengintegrasikan. pada pilihan Create new table on database dblokomedi masukan nama tabel. keempat tabel yang akan digunakan untuk video streaming sudah kita buat.^_^ 13 . css style (tampilan video streaming) dan skrip php yang menangani video.

^_^ Tampilan Scroll Video terbaru yang akan kita buat terlihat seperti gambar 2. Dimana scroll video ini nantinya akan di lengkapi dengan efek tooltips yang berisi judul video. oleh sebab itu penulis menyarankan untuk membackup file template terlebih dahulu.org.9 Tampilan Scrollable Gallery With Tooltips Pada pembahasan selanjutkan kita akan membahas bagaimana cara memodifikasi scrollable gallery with tooltips yang berrasal dari flowplayer. Tampilan awal scrollable gallery with tooltips terlihat seperti gambar 2.9 berikut ini.10 masing-masing gambar mewakili satu judul video.1 Mengedit template.2.5 Membuat Scroll Video Terbaru di Halaman Pengunjung Dengan Efek Tooltips Scroll Video yang dimasksud adalah scroll video yang akan menampilkan sepuluh video tebaru yang di upload oleh administrator web. Pada pembahasan selanjutnya akan dibahas bagaimana memasukan dan mengedit template Lokojquery (Lokomedia Versi Jquery).10 Gambar 2. sehingga bisa kita integrasikan dengan modul video yang akan kita buat.5.org.10 Tampilan Scrollable Video Terbaru Dengan Tooltips Setiap video yang diupload akan di wakili oleh sebuah gambar. Gambar 2. 2. Seperti yang terlihat pada gambar 2.php 14 . Scroll Video yang digunakan dalam pembahasan ini merupakan scrollable gallery with tooltips yang berrasal dari flowplayer.

12.11 berikuti ini.11 Tampilan Susunan Direktori Templates Setelah itu buka file tempate.php di Buka dengan Dreamweaver Pada gambar 2. seperti terlihat pada gambar 2. … ^_^ ini dia source codenya. template ini kita beri nama video. Gambar 2. pada bagian yang diblok kita akan menyisipkan source code yang nantinya akan digunakan untuk memanggil file pendukung video scroll.php yang ada di folder video.13 perhatikan source code yang di blok. Gambar susunan direktorinya terlihat seperti gambar 2.php Gambar 2. dengan menggunakan macromedia dreamweaver. Gambar 2.Kita akan membuat template baru untuk lokomedia cms.13. 15 . dan 2.12 Tampilan File Template. Caranya copy folder eljequery yang ada di folder templates lalu paste dengan nama video.13 Tampilan Template.

js" ?>"></script> Code di atas diletakan dibawah <script src="<?php echo "$f[folder]/js/jquery-1./header --> dan <!-. ketik source code video scroll.15 Tampilan Template. Gambar 2.CONTENT -->) <div id="bingkaivideo"> <div id="videoterbaru"> <style> .<link rel="stylesheet" type="text/css" href="<?php echo "$f[folder]/css/scrollable-horizontal.4.13. Gambar 2./header --> .php baris 120 s/d 125 Berikut source code yang diketikan di baris 122 (di antara <!-.css"?>"> Ketik source code diatas dan letekan dibaris ke 26 perhatikan gambar 2.php setelah diedit akan terlihat seperti gambar 2.items a { 16 .css" ?>" type="text/css" />.items img { margin:0.js" ?>" type="text/javascript"></script>. Source code diletakan dibawah <link rel="stylesheet" href="<?php echo "$f[folder]/css/style. Kemudian ketik Code berikut <script type="text/javascript" src="<?php echo "$f[folder]/js/jquery.css" ?>"> <link rel="stylesheet" type="text/css" href="<?php echo "$f[folder]/css/scrollable-buttons.php Setelah di edit Setelah itu pada baris ke 122 atau dibawah </div> <!-. Tampilan file template.14.14 Tampilan Template. } .

display:block.ready(function() { $(".scrollable"). color:#fff. } #gallery . while($tampilvideo=mysql_fetch_array($queryvideo)){ echo "<a title='$tampilvideo[jdl_video]' class='' href='play$tampilvideo[id_video]-$tampilvideo[video_seo]. } #gallery . $queryvideo=mysql_query($videoterbaru). float:left. display: none.disabled { visibility:visible !important.find("a"). font-size:12px. margin:20px 15px. left: 606px.gallery({ disabledClass: 'inactive' }).inactive { visibility:hidden !important.scrollable().html' ><img src='img_video/kecil_$tampilvideo[gbr_video]' ></a>". width:160px. height:70px." id="tooltip">The bronze statue</div> <a class="nextPage browse right"></a> <br clear="all"> <script> $(document). } </style> <a class="prevPage browse left disabled"></a> <div class="scrollable"> <div class="items"> <?php $videoterbaru="SELECT * FROM video order by id_video desc LIMIT 10".tooltip({ tip: '#tooltip' }). 17 . } ?> </div> </div> <div style="position: absolute. background:url(<?php echo "$f[folder]/css/img/black_arrow. top: 59px.png" ?>). padding:25px. } #tooltip { display:none.

css dan headline. Pada gambar 2. File style.css yang telah diedit menjadi seperti berikut: Style.css. Gambar 2./* center the page in Firefox */ text-align: left. yaitu . tahap selanjutnya adalah mengedit style. </script> </div> </div> File template.16 terlihat susunan direktori templates\video\css.. style./images/bg_content.php telah selesai kita edit.jpg) repeat-y top left. Untuk lebih jelas lihat potongan source code style.jpg) repeat-y top left.css dan headline. position: relative./images/bg_content. background: url(.16.ini di hapus } Perhatikan source style.. edit file style.. 18 . Karena kita akan melakukan editing terhadap dua buah file css.5.}). background: url(.css #wrapper { width: 960px.css cari #wrapper kemudian hapus position:relative.css Style. margin: 0 auto.css menggunakan dreamweaver.css #wrapper { width: 960px.css 2.16 Tampilan Susunan Direktori CSS Setelah membuka folder templates\video\css serrperti terlihat pada gambar 2.css Buka folder css yang ada dalam folder video.2 Mengedit style.css dan headline. <------.

clear: both. clear: both. padding: 20px. width: 630px. clear: left. } Tambahkan position:relative.code yang di tambahkan } Kamudian pada baris paling bawah style. text-align: justify.. width: 630px.9em.css #content { display: block.css tambahkan source code videoterbaru dan bingkaivideo berikut : videoterbaru #videoterbaru { background-color: #333. float: left. } bingkaivideo #bingkaivideo { 19 . margin-left: auto. width: 765px.margin: 0 auto. margin-top: 0px. <------.css #content { display: block. margin: 0 0 30px 0. float: left. margin-right: auto. font-size: 0. text-align: justify.9em. Pada baris paling akhir di bagian content maka source codenya menjadi seperti berikut ini: Style. clear: left. margin: 0 0 30px 0. } Langkah selanjutnya cari #content maka akan terlihat source code seperti berikut: Style. padding: 20px./* center the page in Firefox */ text-align: left. font-size: 0. position: relative.

php. jadi tampilan scroll videonya masih kosong.background-color: #333.18 20 . Seperti terlihat pada gambar 2. dan yang kedua adalah halaman play video yang ada di halaman album video / playlist. edit top: 584px. hal tersebut terjadi karena kita belum memasukan video. width: 910px. height:38px.css telah selesai kita edit selanjutnya. sampai tahap ini kita telah selesai membuat scroll video dengan tooltips hasilnya akan terlihat seperti gambar 2.17 Tampilan Scroll Video Pada gambar 2.6 Membuat Tampilan Play Video Pada Halaman Pengunjung Halaman play video yang akan kita buat disini dibedakan menjadi dua. Gambar 2. Sebelum melakkukan editing file ada baiknya kalau membackup kedua file tersebut. margin-top: 0px. 2. Berikut ini adalah tampilan play video yang akan kita buat.css . menjadi top: 247px. yang pertama halaman play video yang ada dihalaman utama.t{ width:340px. position:absolute.css dan style. kiri. buka file headline. margin-left: auto. File yang akan kita edit adalah template. margin-right: auto. top: 584px. top: 247px. position:absolute.t{ lalu edit maka akan terlihat source seperti berikut: Headline.css yang ada pada folder template/video. height:38px.t{ width:340px. dan cari . } File style. headline. left:24px. maka hasilnya akan menjadi seperti berikut ini Headline. border:1px solid #0f0.css.17 berikuti ini. left:24px.css .17 tampak tampilan scroll video yang masih kosong.php. Untuk bisa membuat halaman play video kita akan mengedit beberapa file.

4. sampai disini udah tau kan..php di Buka dengan Dreamweaver Pada gambar 2.20 21 . tampilan play video yang akan kita buat? ^_^ Buka file tempate.19.18 Tampilan Play Video Di Halaman Pengunjung Oke ….Gambar 2.php yang ada di folder video.js" ?>"> </script> Ketik source code diatas dan letekan dibaris ke 29 perhatikan gambar 2.19. seperti terlihat pada gambar 2.php setelah diedit akan terlihat seperti gambar 2.19 perhatikan source code yang di blok. Gambar 2.. <script type="text/javascript" src="<?php echo "$f[folder]/js/flowplayer3.4. pada bagian yang diblok kita akan menyisipkan source code yang nantinya akan digunakan untuk memanggil file pendukung play video. ini dia source codenya. Tampilan file template.19 Tampilan Template.js" ?>" type="text/javascript"></script>.2. dengan menggunakan macromedia dreamweaver. Source code diletakan di atas <script src="<?php echo "$f[folder]/js/jquery-1.min.

<?php if ($iyasrini==2){ ?> <script> flowplayer("player". }. $(container).html(content).php Setelah di edit Setelah itu pada baris paling bawah template.php tambahkan source code dibawah ini. jQuery.swf" ?>". container) { var relatedVideos = gdata. </script> <?php } elseif ($iyasrini==1){ ?> <script> function showRelatedList(gdata. content += '</div></div><a class="go down"></a>'. "<?php echo "$f[folder]/flowplayer-3. item){ content += '<a href="'+ item.round(item.20 Tampilan Template.2.duration / 60) + " min</em></a>". function(index. content += "<em>" + Math.url +'" '+ (index==0 ? 'class="first"' : "") +'>'. content += '<a class="go up"></a><div class="playlist"><div class="clips low">'. autoBuffering: true. } }).playlist").title + "<br/>".relatedVideos. content += item. }). $("div. onLoad: function() { loading this. var content = '<em>Related Videos:</em>'.5.setVolume(35). { clip: { autoPlay: false.scrollable({ 22 // called when player has finished // set volume property .Gambar 2.each( relatedVideos.

onApiData: function(gdata) { console.clips'.youtube-3. enableGdata: true. } } }.php sebelum di edit. provider: 'youtube'. clip: { autoPlay: false.php lalu simpan. onLoad: function() { this. Pada baris ke enam tepat dibawah <div id="content"> kita akan menambahkan source code play video.5.log(gdata). } $f("youtube".up' }). }. vertical:true.playlist("div. 23 .swf'.clips"). next:'a. autoBuffering: true. berikut ini adalah gambar file kiri.1.down'. "#playlistContainer"). "<?php echo "$f[folder]/flowplayer-3. prev:'a. showRelatedList(gdata.php yang ada pada direktori template/video. urlResolvers: 'youtube' } }).setVolume(35).swf" ?>".2. { plugins: { youtube: { url:'flowplayer.2. </script> <?php } ?> Setelah source di atas ditambahkan ke template.items:'div. Tahap selanjutnya buka file kiri.

echo "</div>".21 Tampilan kiri. <?php $detail888=mysql_query("SELECT * FROM video ORDER BY dilihat DESC limit 1"). if($d888[video]==''){ $iyasrini="1". echo "<a title='$d[keterangan]' href='img_video/$d[video]' style='display:block. echo "<span class=judul>$d[jdl_video]</span><br />".Gambar 2.users WHERE users. echo "<a title='$d[keterangan]' href='api:$d[youtube]' style='display:block.users WHERE users.username=video. $detail=mysql_query("SELECT * FROM video. $d = mysql_fetch_array($detail).width:550px.width:550px.php Sebelum di edit Berikut ini adalah source code yang diletakan di kiri. $d888 = mysql_fetch_array($detail888).username ORDER BY dilihat DESC limit 1").username ORDER BY dilihat DESC limit 1"). $d = mysql_fetch_array($detail). echo "<span class=judul>$d[jdl_video]</span><br />". } 24 .php pada baris ke enam. echo "<div id='video'>". echo "<span class=posting>Diposting oleh : <b>$d[nama_lengkap]</b><br /></span>". $detail=mysql_query("SELECT * FROM video.height:360px' id='youtube'> </a>". echo "<span class=posting>Diposting oleh : <b>$d[nama_lengkap]</b><br /></span>". echo "</div>".username=video.height:360px' id='player'> </a>". echo "<div id='video'>". } else { $iyasrini="2".

top: 726. ?> Langkah selanjutnya yaitu menambahkan source pada style. margin-right: auto. menjadi Width:340px. height:38px. pada style. height:38px. outline:1px solid #333. #video { background-color:#333. } #video a { color:#295c72.1. top: 247px.js dan letakan di folder templates\video\js.swf  Flowplayer.controls-3.css. text-align:left.2.swf Semua file di atas letakan di folder templates\video serta copy file flowplayer-3. margin-left: auto.youtube-3. border:2px solid #0F0. margin-left: auto. position:absolute. width:620px. min-height:420px.4.min. left:24px.echo "<br>". margin-top: 30px.5.5px.2.2. position:absolute.3. left:24px. langkah selanjutnya copy file  Flowplayer-3. } Pada headline. Buka file style.css tambahkan source berikut ini.swf  Flowplayer. margin-right: auto.2.css rubah Width:340px.css yang ada pada folder video/css. 25 .

Sign up to vote on this title
UsefulNot useful