Sharing is Caring : Part 9

Ok dalam part ni Max akan tunjukkan macamana nak buat video streaming melalui site Joomla korang. First skali korang kene dapatkan extension Joomla ; AllVideosReloaded. Download kat sini;

All Videos Reloaded (Latest version 1.2.6stable)

Siap download tu, pastikan server korang running dan bukak joomla admin console (http://127.0.0.1:8080/administrator) dan pegi ke "Extension Manager" (Extension>Install/Uninstall);

Klik browse dan carik file yang korang download tadi (masa korang download maybe korang perasa ada 3 file dengan format berbeza;tar.bz2, tar.gz dan zip. Tak kisah korang guna yang mana sebab tiga2 ni sama je isinye);

Klik "Upload and Install" dan korang akan dapat notification yang Component tu da siap diinstall. Kat bawah dia lak ada quickstart yang panjang lebar;

Skang kita akan wat category baru untuk page video. Gi kat Content>Section dan klik "New". Letakkan nama section tu "Streaming" ;

Pastu kita wat category under section streaming tu lak. Gi kat Content>Category. Klik new dan letak title "Video" dan pastikan korang pilih section "Streaming" yang korang baru buat tadi;

p/s : Korang boleh gak letak satu lagi category, "Audio" under section "Streaming" tu.

Skang gi kat install dir "Abyss/htdocs/images/stories". Buat 2 folder kat situ dengan nama "videos" dan "audio";

Pastu korang letak file yang korang nak streaming tu dalam folder "videos" tu. Tak kisah apa format file yang korang nak streaming. Tapi Max sarankan guna file .mp4 atau .flv sebab saiznyer kecik dan tak bebankan server korang nanti;

Balik semula ke admin console tadi dan buat article baru (Content>Article Manager>klik New). Letak tajuk yang korang nak. Select section dan category yang korang buat tadi (Streaming, Videos). kalau korang nak letak video ni kat frontpage, select "Yes" kat "Front Page" tu. Tapi Max prefer letak kat page lain supaya video tu tak terus buffering masa visitor masuk ke site;

Pastu korang tengok kat bawah page new article tu ada button "AVR Media";

Klik button tu dan "popup" akan kuar;

Klik tab "Local Media" dan select file yang korang letak kat folder "videos" tadi;

Klik "Insert" dan satu tag beserta nama file yang korang select tadi akan kuar kat article editor tu;

Klik "Save' untuk save video korang tu. Skang kita akan buat link untuk masuk ke page video tadi. Klik Menu>Main Menu (atau mana-mana menu korang nak letak);

Klik "New" untuk create link baru dalam menu tu. Select Article>Category Blog Layout ;

Letakkan title "Video Sharing" dan pastikan korang pilih category video korang tadi ; "Streaming/Video";

Save link tu dan gi kat site korang. Korang akan notice ada link baru "Video Streaming" kat main menu tu;

Klik je link tu dan korang akan terus gi kat page Video tu;

Tamat da "Sharing is Caring : Part 9" ni. Part seterusnya adalah final part untuk siri "Sharing is Caring" ni. Nantikan finale tuh!...

Sharing is Caring : Part 6

Macam yang Max bagitau kat "Sharing is Caring : Part 5", kali ni Max akan tunjuk cara-cara nak configure Abyss supaya server korang leh host PHP file. Bagi sape-sape yang pakai XAMMP, korang tak perlu configure PHP ni sebab semua da siap compile.
Straight to the point, memula skali korang kene install PHP dulu. Bleh download kat sini

PHP Download (Download installer, format .exe)

Pas siap download, follow je step yang Max tunjuk ni untuk install;

macam biasa, install directory ni pandai2 korang la yek

K, siap install PHP. Skang configure Abyss lak. Bukak console Abyss (right klik icon abyss kat task bar dan klik "Show Console"). Klik kat "Configure" yang kat Hosts (petak biru).

Klik "Scripting parameters"

Kat "Interpreters", klik "Add"

Kat "Interface", pilih "FastCGI (Local - Pipes)",

Kat "Interpreters" lak, klik "Browse", pastu carik folder tempat korang install PHP tadi;

Kat "Arguments" biarkan kosong dan pastikan tanda kat "Check for file existence before execution". Kat "Type", pilh "PHP Style" dan tanda kat "Use the associated extension......"

Kat petak "Associated Extensions", klik "Add". Taipkan "php" dan klik OK.

Klik ok lagi sekali;

Pada kotak "Custom Environment Variables", klik "Add";

Taip "REDIRECT_STATUS" kat "Name", "200" "Value";

Klik "OK" 2 kali untuk balik semula kat page configuration tadi;

Pegi kat "Index Files" lak;

Kat "Sharing is Caring : Part 5" Max ada cakap pasal file index.html ni. (yang dalam folder "htdoc" kat directory abyss). By default, abyss akan cari file ni dulu dalam folder htdocs tuh (sebab index.html dok kat atas sekali dalam list index files tu). Skang kita nak tambah satu lagi file. Klik kat "Add" dan taip "index.php" kat "File Name";

Klik "OK";
Pastu klik icon segitiga kat depan "index.php" tu dan letakkan "index.php" atas sekali dalam list (maknanya abyss akan cari file index.php sebelum index.html);

Klik "OK" dan restart server;

Skang kita akan test server plak. Bukak notepad (atau notepad++) dan taip macam ni;

echo "Test";
?>

versi gambar;

save file sebagai "index.php" (pastikan extension korang tu .php);

letakkan file tuh dalam folder "htdocs" dan masuk server korang kat browser (http://localhost:8080/). Korang akan dapat macam ni;

kalau korang nampak perkataan "Test" tu, maknanya korang da berjaya configure Abyss untuk support PHP dan sekarang korang da boleh carik macam-macam script PHP yang berlambak kat internet untuk korang letak kat page korang tu. Satu script yang Max suka adalah Shoutpro. Download ShoutPro kat sini;

ShoutPro

extract file yang korang download tu ke folder "htdocs". Rename folder shoutpro tu kepada nama yang korang senang ingat. Max letak nama "shout" je;

untuk gi ke shout korang, guna address "http://localhost:8080/shout/shoutbox.php" dan dapat la shout macam ni;

Max akan terangkan lebih lanjut pasal shoutpro ni kat tutorial lain.

Tu je yang Max nak kongsi dalam "Sharing is Caring : Part 6" ni. Dalam part seterusnya, Max akan kongsi plak macamana nak gunakan CMS Joomla. Max pasti ramai yang tak tau apa Joomla ni. Tunggu je "Sharing is Caring : Part 7" dan korang akan suka dengan Joomla nih.

Sharing is Caring : Part 5

Ok Max malas nk intro banyak-banyak. Kita teruskan "Sharing is Caring : Part 5". Part kali ni directly bersambung dengan "Sharing is Caring : Part 4", iaitu pasal Abyss webserver.

Skang ni Max akan tunjukkan macamana nak letak page untuk sharing site korang. Memula sekali korang kena ada html template. Google je "free html template" dan korang akan jumpa banyak template on the net. Donwload je mana korang nak. Untuk contoh,Max download template kat sini;

entheosweb 

Extract je file yang korang download tu dan korang akan dapat beberapa file. Salah satu daripadanya ada index.html. Mungkin ada gak file-file lain ; image folder, style.css dll. Korang g kat tempat korang install Abyss, cari folder "htdocs";

Letak SEMUA file yang korang extract tadi kat dalam folder "htdocs" nih;

Pastu korang try la browse page korang kat http://127.0.0.1:8080/ (kalau korang pakai port lain masa install abyss, tukar port 8080 tu. Rujuk kepada "Sharing is Caring : Part 4"). Kat situ korang akan nampak html template yang korang download tu. Contoh template yang Max guna macam ni;

Apa yang korang nampak tak semestinya sama dengan Max punya page ni. Depend kat template yang korang pakai. Dan page tu perlukan sedikit ubahsuai sebelum korang boleh start sharing.

Pertama sekali, korang kene buat folder kat dalam folder "htdocs" tu. Namakan je sebagai "shared", dan letakkan apa-apa yang korang nak share kat dalam folder ni. Pastu korang carik file "index.html" kat dalam folder "htdocs" tu. Right klik dan bukak file tu pakai notepad. Korang akan dapat page yang penuh ngan coding camni;

Pakai notepad ni memang senang nak edit, tapi kalau nak lagi senang, Max suggest guna Notepad++ yang korang boleh download kat sini;

Notepad++

Max takkan sentuh pasal notepad++ ni kat sini. Kalau ada masa nanti Max akan buat tutorial khas.

K, kalau korang guna notepad++ ni untuk edit file index.html tadi, korang akan dapat macam ni;

Skang korang kene letak link untuk download kat page index.html ni. Coding html ni pon Max takkan cite kat sini. Korang boleh carik tutorial html kat google.

Tengok kat file yang korang yang nak share tu dan copy nama file tuh. Sebagai contoh, Max letak file "Video.mpg" kat folder shared. Kat file index.html yang korang edit tuh, taip macam ni;

  < a href = "/shared/Video.mpg" title="Video" > Download< / a >

• "Video.mpg" adalah nama file yang korang nak share, 
• "Video" tu perkataan yang akan kuar kalau hover kat link, dan 
• "Download" lak text yang pelawat korang akan nampak kat page korang.

Siap taip tu, save file index.html tu dan try bukak semula sharing page korang. Macam template yang Max pakai akan dapat macam ni;

Kalau korang perasan ada link "download" kat situ. Kalau korang klik link tu, automatik browser korang akan download file "Video.mpg" yang ada kat folder shared tadi.

Untuk setiap file yang korang nak share, korang kene setting link kat index.html tu. Memang leceh ar, tapi berbaloi sebab korang leh design template tu ikut sukati korang.

Basic tutorial untuk Abyss tu sampai sini je. Untuk pengetahuan korang, selain Abyss, korang gak bleh pakai "Apache". Tapi setting dia memang sangat susah kecuali korang faham coding dia. Tapi "Apache" ni sangat popular, so ramai developer compile bersama-sama ngan Perl, PHP, dan MySQL atau lebih dikenali sebagai "WAMP" dan sekaligus memudahkan penggunaan Apache tu sendiri .

"WAMP" ni bermaksud ; Window, Apache, MySQL, PHP. Versi untuk Linux dipanggil "LAMP". Compiled programs ni da siap setting, korang cuma perlu install je. Kalau korang berminat, Max suggest guna "XAMPP" yang korang leh download kat sini;

XAMPP

Selain html, korang bleh gak hosting guna PHP file yang lebih banyak function. Max akan ajar untuk setting Abyss guna PHP file ni dalam Part seterusnya, "Sharing is Caring : Part 6".

Sharing is Caring : Part 4

Ok kali ni kita masuk part paling best dalam kerjaya seorang tukang share, "Sharing is Caring : Part 4" iaitu, html dan php sharing. Sebelum tu pastikan korang da baca "Sharing is Caring : Part 1" sebab ada beberapa info yang kita akan guna dalam part ni.


Kalau dalam part sebelum ni, 1 software je yang diperlukan dalam satu-satu masa ; FileZilla / HFS. Sebenarnya kedua-dua software ni menjalankan 2 fungsi serentak; sebagai server dan file hosting. Dalam Part 4 ni, Max akan tunjuk cara untuk jalankan 2 tugas tu secara berasingan. Apa kelebihannya asingkan tugas ni?;

• Kebolehan untuk hosting template html/php. Kalau dalam "Sharing is Caring : Part 2", Max ada ajar gak gunakan html template. Tapi template tu hanya boleh digunakan oleh HFS sahaja. Kali ni, kita akan guna template-template html yang korang boleh jumpa dengan mudah kat internet.

• Advance file sharing. Berbagai setting kita boleh ubah, ikut sukati korang nak dapatkan site yang lawa macam mana sekalipon, tanpa limitation daripada software.

OK. Untuk fungsi pertama, ada beberapa software yang korang boleh gunakan untuk jadikan PC/laptop korang tu sebagai server. Antaranya ialah Abyss, dan Apache. Untuk part ni, Max akan terangkan pasal Abyss dulu.


Korang boleh download Abyss kat sini :

Abyss Download

Download versi free, Abyss X1 je. Yang X2 tu commercial use punya. (Tapi kalau korang banyak duit, boleh je amik yang X2. =D )


Follow je step yang Max buat ni untuk install;

Directory ni ikut suka korang la nak letak mana.Tapi Max suggest korang jangan letak kat System Partition (partition window korang. Biasanya kat C:\)

Pas siap install, klik je Yes untuk start server korang. Pastu klik ok;

Pastu dia suruh korang pilih bahasa. Sukati korang la nak amek bahasa mana. Tapi Max suggest korang pilih la English yek, sebab kalau x, korang takleh la troskan baca post Max nih. Max bukannya paham bahasa lain tuh;

Isikan login id ngan password untuk interface server nih;

Siap je klik ok, dia tros tanya balik id ngan password yang korang masukkan tadi. Isi je la. Takkan baru 2 saat korang da lupa apa korang taip lak. lol;

Pastu kuar la satu page macam kat bawah ni;

Ni adalah korang punya admin interface, tempat korang akan godek-godek server korang nanti. Korang tengok kat "Host" tu, dia tulis "Default Host On Port 80", maknanya server korang skarang guna port 80. Tapi macam yang Max cakap kat "Sharing is Caring : Part 3", port 80 ni banyak software lain pakai. So korang kena tukar port tu. Klik je kat "Configure" (yang kat petak biru) dan akan kuar macam ni;

Skang klik lak kat "General" (kiri skali). Window untuk general configuration akan kuar macam ni;

Kat "HTTP Port" tu korang tukar port "8080". Yang lain tu jangan gatal-gatal tangan nak godek lak. Klik "OK" je terus. Pastu korang akan balik semula kat window configuration tadi. Tapi notice kat belah atas tuh;

Dia kata "The configuration has changed. Press Restart to apply the modifications". Korang ikut je cakap dia. Klik je button "Restart" tuh dan tunggu sekejap. Pastu balik semula kat console tadi. Dan klik "Server Configuration" lak;

Pastu klik "Parameters"

Kat sini korang cuma tukar "Timeout" tu kepada 15 second sahaja. Seperti biasa, yang lain-lain tuh jangan gatal tangan nak usik. =D.

Pas klik "OK", korang gi lak kat "Global Bandwidth Limits";

Kalau korang da try apa yang Max tunjukkan kat "Sharing is Caring : Part 1" dan "Sharing is Caring : Part 3", Max pasti korang da tau Bandwith limit ni benda apa. Letak je 500 kbps kat "Maximum Total Bandwidth" tu dan klik ok.Sekali lagi, restart semula server.




So sekarang server korang da siap. Try bukak server korang kat "http://127.0.0.1:8080" (8080 tu adalah nombor port yang korang pilih tadi) , ataupun boleh jugak pakai address "http://localhost:8080". Untuk pelawat pulak, Max pasti korang pon da tau, gantikan "localhost" tu dengan IP Address korang sendiri. Korang akan dapat page macam ni;

Kalau korang ikut satu2 macam yang Max tunjukkan, mesti dapat nyer page camni. Apa yang korang nampak?. Takde apa-apa?. Memang. Sebab ni baru setup server je, hosting file takde lagi. Tunggu Max siapkan "Sharing is Caring : Part 5" Plak yer. =D