Membuat Web Multimedia

1
EBOOK INI MERUPAKAN SAMPE DARI

Membuat Web Multimedia Dengan Lokojquery

BY
SOFYAN PARIYASTO
http://www.doobedo.com
http://doobedo.com

2
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.
3

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
4
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 flowplayer.php
<ht ml ><head>
<met a ht t p- equi v=" cont ent - t ype" cont ent ="t ext / ht ml ; char set =UTF- 8" >

<scr i pt t ype=" t ext / j avascr i pt " sr c=" f l owpl ayer - 3. 2. 4. mi n. j s" ></ scr i pt >
<l i nk r el ="st yl esheet " t ype="t ext / css" hr ef ="st yl e. css">
<t i t l e>Cont oh Pemaangan Fl owpl ayer </ t i t l e>

</ head><body>
<di v i d="page" >
<h1>Cont oh Pemasangan Fl owpl ayer </ h1>
<p>Cont oh Pemasangan Fl owpl ayer Dengan Tampi l an Seder hana. </ p>

<a
hr ef ="t es. f l v"
st yl e=" di spl ay: bl ock; wi dt h: 520px; hei ght : 330px"
i d="pl ayer " >
</ a>
<scr i pt >
f l owpl ayer ( " pl ayer ", " f l owpl ayer - 3. 2. 5. swf ") ;
</ scr i pt >
</ di v>
</ body></ ht ml >

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

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 album.
Untuk lebih jelas perhatikan gambar berikut.

6

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
<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 Dengan Tampilan Sederhana, <br>
Menggunakan Video yang Berasal dari Youtube.</ p>

<a href="api:tXKCP8OwiKQ" 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">';

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

$("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.html di localhost lalu tekan play.

Gambar 1.6 Tampilan Skrip flowplayer-youtube.html
8

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

9
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 table 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 Panjang Keterangan
id_video int 5 Primary Key
Auto Increment
id_playalist int 5
username varchar 30
jdl_video varchar 100
video_deo varchar 100
keterangan text
gbr_video varchar 100
video varchar 100
youtube varchar 100
dilihat int 7 Default : 1
hari varchar 20
tanggal date
jam time
tagvid varchar 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 J umlah Kolom

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

i d_pl ayl i st i nt 5 Pr i mar y Key
Aut o I ncr ement
j dl _pl ayl i st var char 100
pl ayl i st _seo var char 100
gbr _pl ayl i st var char 100
akt i f enum ( Y , N ) Def aul t : Y
11

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.

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.
i d_t ag i nt 5 Pr i mar y Key
Aut o I ncr ement
Nama_t ag var char 100
12
t ag_seo var char 100
count i nt 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.

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.
13
i d_koment ar I nt 5 Pr i mar y Key
Aut o I ncr ement
i d_vi deo i nt 5
nama_koment ar var char 100
ur l var char 100
i si _koment ar t ext
t gl dat e
j am_koment ar t i me
akt i f enum ( Y , N ) Def aul t : 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.

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. ..^_^
14
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. 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 J query), oleh sebab
itu penulis menyarankan untuk membackup file template terlebih dahulu.

2.5.1 Mengedit template.php
15
Kita akan membuat template baru untuk 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.
16
<l i nk r el ="st yl esheet " t ype=" t ext / css" hr ef ="<?php echo
"$f [ f ol der ] / css/ scr ol l abl e- hor i zont al . css" ?>">
<l i nk r el ="st yl esheet " t ype=" t ext / css" hr ef ="<?php echo
"$f [ f ol der ] / css/ scr ol l abl e- but t ons. css" ?>">

Ketik source code diatas dan letekan dibaris ke 26 perhatikan gambar 2.13. Source code diletakan
dibawah <link rel="stylesheet" href="<?php echo "$f[folder]/css/style.css" ?>" type="text/css" />.
Kemudian ketik Code berikut
<scr i pt t ype=" t ext / j avascr i pt " sr c="<?php echo
"$f [ f ol der ] / j s/ j quer y. j s" ?>" ></ scr i pt >

Code di atas diletakan dibawah <script src="<?php echo "$f[folder]/js/jquery-1.4.js" ?>"
type="text/javascript"></script>. 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 </div>  , 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 )

<di v i d=" bi ngkai vi deo">
<di v i d="vi deot er bar u">
<st yl e>
. i t ems i mg {
mar gi n: 0;
}

. i t ems a {
17
di spl ay: bl ock;
f l oat : l ef t ;
mar gi n: 20px 15px;
}

#t ool t i p {
di spl ay: none;
backgr ound: ur l ( <?php echo
"$f [ f ol der ] / css/ i mg/ bl ack_ar r ow. png" ?>) ;
f ont - si ze: 12px;
hei ght : 70px;
wi dt h: 160px;
paddi ng: 25px;
col or : #f f f ;
}

#gal l er y . di sabl ed {
vi si bi l i t y: vi si bl e ! i mpor t ant ;
}

#gal l er y . i nact i ve {
vi si bi l i t y: hi dden ! i mpor t ant ;
}
</ st yl e>

<a cl ass="pr evPage br owse l ef t di sabl ed"></ a>
<di v cl ass="scr ol l abl e">
<di v cl ass="i t ems">
<?php
$vi deot er bar u="SELECT * FROM vi deo or der by i d_vi deo
desc LI MI T 10" ;
$quer yvi deo=mysql _quer y( $vi deot er bar u) ;
whi l e( $t ampi l vi deo=mysql _f et ch_ar r ay( $quer yvi deo) ) {

echo "<a t i t l e=' $t ampi l vi deo[ j dl _vi deo] ' cl ass=' ' hr ef =' pl ay-
$t ampi l vi deo[ i d_vi deo] - $t ampi l vi deo[ vi deo_seo] . ht ml ' ><i mg
sr c=' i mg_vi deo/ keci l _$t ampi l vi deo[ gbr _vi deo] ' ></ a>";
}
?>
</ di v>
</ di v>

<di v st yl e="posi t i on: absol ut e; t op: 59px; l ef t : 606px; di spl ay:
none; " i d="t ool t i p" >The br onze st at ue</ di v>
<a cl ass="next Page br owse r i ght "></ a>
<br cl ear ="al l ">
<scr i pt >
$( document ) . r eady( f unct i on( ) {
$( ". scr ol l abl e") . scr ol l abl e( ) . f i nd( "a") . t ool t i p( {
t i p: ' #t ool t i p'
}) . gal l er y( {
di sabl edCl ass: ' i nact i ve'
}) ;
18
}) ;
</ scr i pt >
</ di v>
</ di v>

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 {
wi dt h: 960px;
backgr ound: ur l ( . . / i mages/ bg_cont ent . j pg) r epeat - y t op l ef t ;
mar gi n: 0 aut o; / * cent er t he page i n Fi r ef ox */
t ext - al i gn: l ef t ;
position: relative; <- - - - - - - i ni di hapus
}

Perhatikan source style.css cari #wrapper kemudian hapus position:relative;. File style.css yang
telah diedit menjadi seperti berikut:
Style.css
#wrapper {
wi dt h: 960px;
backgr ound: ur l ( . . / i mages/ bg_cont ent . j pg) r epeat - y t op l ef t ;
19
mar gi n: 0 aut o; / * cent er t he page i n Fi r ef ox */
}

Langkah selanjutnya cari #content maka akan terlihat source code seperti berikut:
Style.css
#content {
di spl ay: bl ock;
f l oat : l ef t ;
cl ear : l ef t ;
wi dt h: 630px;
paddi ng: 20px;
mar gi n: 0 0 30px 0;
cl ear : bot h;
t ext - al i gn: j ust i f y;
f ont - si ze: 0. 9em;
}

Tambahkan position:relative;. Pada baris paling akhir di bagian content maka source codenya
menjadi seperti berikut ini:
Style.css
#content {
di spl ay: bl ock;
f l oat : l ef t ;
cl ear : l ef t ;
wi dt h: 630px;
paddi ng: 20px;
mar gi n: 0 0 30px 0;
cl ear : bot h;
t ext - al i gn: j ust i f y;
f ont - si ze: 0. 9em;
position: relative; <- - - - - - - code yang di t ambahkan
}

Kamudian pada baris paling bawah style.css tambahkan source code videoterbaru dan
bingkaivideo berikut :
videoterbaru
#vi deot er bar u {
backgr ound- col or : #333;
wi dt h: 765px;
mar gi n- r i ght : aut o;
mar gi n- l ef t : aut o;
mar gi n- t op: 0px;
}

bingkaivideo
#bi ngkai vi deo {
20
wi dt h: 910px;
bor der : 1px sol i d #0f 0;
}

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{
width:340px; position:absolute; height:38px; top: 584px; left:24px;
edit top: 584px; menjadi top: 247px; maka hasilnya akan menjadi seperti berikut ini
Headline.css
.t{
width:340px; position:absolute; height: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
21

Gambar 2.18 Tampilan Play Video 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.
<scr i pt t ype=" t ext / j avascr i pt " sr c=" <?php echo " $f [ f ol der ] / j s/ f l owpl ayer -
3. 2. 4. mi n. j s" ?>" > </ scr i pt >
Ketik source code diatas dan letekan dibaris ke 29 perhatikan gambar 2.19. Source code diletakan di
atas <script src="<?php echo "$f[folder]/js/jquery-1.4.js" ?>" type="text/javascript"></script>.
Tampilan file template.php setelah diedit akan terlihat seperti gambar 2.20
22

Gambar 2.20 Tampilan Template.php Setelah di edit
Setelah itu pada baris paling bawah template.php tambahkan source code dibawah ini.
<?php
i f ( $i yasr i ni ==2) {
?>

<scr i pt >
f l owpl ayer ( "pl ayer " , "<?php echo " $f [ f ol der ] / f l owpl ayer - 3. 2. 5. swf "
?>", {
cl i p: {
aut oPl ay: f al se,
aut oBuf f er i ng: t r ue,
},

onLoad: f unct i on( ) { / / cal l ed when pl ayer has f i ni shed
l oadi ng
t hi s. set Vol ume( 35) ; / / set vol ume pr oper t y
}
}) ;
</ scr i pt >

<?php
}
el sei f ( $i yasr i ni ==1) {
?>

<scr i pt >
f unct i on showRel at edLi st ( gdat a, cont ai ner ) {
var r el at edVi deos = gdat a. r el at edVi deos;
var cont ent = ' <em>Rel at ed Vi deos: </ em>' ;
cont ent += ' <a cl ass="go up"></ a><di v cl ass=" pl ayl i st "><di v
cl ass="cl i ps l ow">' ;

j Quer y. each( r el at edVi deos, f unct i on( i ndex, i t em) {
cont ent += ' <a hr ef =" ' + i t em. ur l +' " ' + ( i ndex==0 ?
' cl ass="f i r st " ' : " ") +' >' ;
cont ent += i t em. t i t l e + "<br / >" ;
cont ent += "<em>" + Mat h. r ound( i t em. dur at i on / 60) + "
mi n</ em></ a>";
}) ;

cont ent += ' </ di v></ di v><a cl ass="go down"></ a>' ;
$( cont ai ner ) . ht ml ( cont ent ) ;
$( "di v. pl ayl i st ") . scr ol l abl e( {
23
i t ems: ' di v. cl i ps' ,
ver t i cal : t r ue,
next : ' a. down' ,
pr ev: ' a. up'
}) ;
}

$f ( " yout ube", "<?php echo "$f [ f ol der ] / f l owpl ayer - 3. 2. 5. swf " ?>", {
pl ugi ns: {
yout ube: {
ur l : ' f l owpl ayer . yout ube- 3. 2. 1. swf ' ,
enabl eGdat a: t r ue,

onApi Dat a: f unct i on( gdat a) {
consol e. l og( gdat a) ;

showRel at edLi st ( gdat a, "#pl ayl i st Cont ai ner " ) ;
}
}
},

onLoad: f unct i on( ) {
t hi s. set Vol ume( 35) ;
},

cl i p: {
aut oPl ay: f al se,
aut oBuf f er i ng: t r ue,
pr ovi der : ' yout ube' ,
ur l Resol ver s: ' yout ube'
}

}) . pl ayl i st ( "di v. cl i ps") ;
</ scr i pt >

<?php
}
?>

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 <div
id="content"> kita akan menambahkan source code play video, berikut ini adalah gambar file
kiri.php sebelum di edit.
24

Gambar 2.21 Tampilan kiri.php Sebelumdi edit
Berikut ini adalah source code yang diletakan di kiri.php pada baris ke enam.
<?php
$det ai l 888=mysql _quer y( " SELECT * FROM vi deo ORDER BY di l i hat
DESC l i mi t 1") ;
$d888 = mysql _f et ch_ar r ay( $det ai l 888) ;
i f ( $d888[ vi deo] ==' ' ) {
$i yasr i ni ="1";
$det ai l =mysql _quer y( "SELECT * FROM vi deo, user s WHERE
user s. user name=vi deo. user name ORDER BY di l i hat DESC l i mi t 1") ;
$d = mysql _f et ch_ar r ay( $det ai l ) ;
echo "<span cl ass=j udul >$d[ j dl _vi deo] </ span><br / >";
echo "<span cl ass=post i ng>Di post i ng ol eh :
<b>$d[ nama_l engkap] </ b><br / ></ span>";
echo "<di v i d=' vi deo' >";

echo "<a t i t l e=' $d[ ket er angan] '
hr ef =' api : $d[ yout ube] '
st yl e=' di spl ay: bl ock; wi dt h: 550px; hei ght : 360px'
i d=' yout ube' >
</ a>";
echo "</ di v>";

}
el se {
$i yasr i ni ="2";
$det ai l =mysql _quer y( "SELECT * FROM vi deo, user s WHERE
user s. user name=vi deo. user name ORDER BY di l i hat DESC l i mi t 1") ;
$d = mysql _f et ch_ar r ay( $det ai l ) ;
echo "<span cl ass=j udul >$d[ j dl _vi deo] </ span><br / >";
echo "<span cl ass=post i ng>Di post i ng ol eh :
<b>$d[ nama_l engkap] </ b><br / ></ span>";
echo "<di v i d=' vi deo' >";

echo "<a t i t l e=' $d[ ket er angan] '
hr ef =' i mg_vi deo/ $d[ vi deo] '
st yl e=' di spl ay: bl ock; wi dt h: 550px; hei ght : 360px'
i d=' pl ayer ' >
</ a>";

echo "</ di v>";
}

25
echo "<br >";
?>

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.
#vi deo {
wi dt h: 620px;
mi n- hei ght : 420px;
bor der : 2px sol i d #0F0;
out l i ne: 1px sol i d #333;
}

#vi deo a {
col or : #295c72;
}

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.

Membuat Web Multimedia

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Membuat Web Multimedia

Diunggah oleh

Hak Cipta:

Format Tersedia

1

EBOOK INI MERUPAKAN SAMPE DARI

Anda mungkin juga menyukai