Cara Mudah Membuat Grafik Statistik dengan PHP dan CSS

Seperti yang saya janjikan pada status di Twitter maupun di Facebook bahwa saya berusaha akan menulis artikel tentang cara membuat grafik statistik dengan PHP dan CSS. Dan kini.. janji sudah terwujud.
Untuk membuat grafik chart, sebenarnya sudah banyak sekali package/library yang tersedia baik free maupun bayar. Salah satunya yang free adalah JpGraph. Cara penggunaan JpGraph ini pernah saya bahas sebelumnya, atau Anda bisa download tutorialnya di sini. Namun, untuk menjalankan library-library tersebut harus didukung oleh library yang lain juga misalnya GD library. Tanpa library tersebut, maka mustahil library grafik yang Anda peroleh dapat dijalankan. Di samping itu kita masih agak sedikit repot dengan cara penggunaannya, karena setiap library grafik berbeda penggunaannya.
Nah.. kini Anda tak perlu repot lagi untuk membuat grafik chart karena saya akan memberikan tutorial cara membuat grafik statistik hanya dengan perintah PHP sederhana dan ditunjang oleh CSS (Cascade Style Sheet). Memang sih.. untuk tampilan tidak semewah kalo kita menggunakan JpGraph atau yang lain, tapi paling tidak.. representasi grafiknya bisa dibaca dengan mudah dan bisa membuat keren website Anda

OK.. untuk studi kasus kali ini, saya akan menerapkan hal ini untuk representasi data mahasiswa berdasarkan jenis kelaminnya. Andaikan kita memiliki tabel database dan datanya sebagai berikut:

view sourceprint?

1.CREATE TABLE `mhs` (

2.`nim` varchar(10),

3.`nama` varchar(10),

4.`jenisKelamin` varchar(10),

5.PRIMARY KEY  (`nim`)

6.);

view sourceprint?

1.INSERT INTO `mhs` VALUES ('A001', 'A', 'LAKI-LAKI');

2.INSERT INTO `mhs` VALUES ('A002', 'B', 'LAKI-LAKI');

3.INSERT INTO `mhs` VALUES ('A003', 'C', 'LAKI-LAKI');

4.INSERT INTO `mhs` VALUES ('A004', 'D', 'PEREMPUAN');

5.INSERT INTO `mhs` VALUES ('A005', 'E', 'LAKI-LAKI');

Untuk outputnya, kita nanti akan berusaha membuat script yang menampilkan grafik seperti di bawah ini

Perhatikan gambar di atas, bahwa ketika kita dekatkan mouse ke grafik batangnya maka akan muncul keterangan data statistiknya. Efek tersebut kita buat tanpa menggunakan script apapun, kecuali hanya CSS doang. Simpel tapi menarik bukan?
Trus.. gimana ide dasar membuat grafiknya? terutama membuat grafik batangnya? Dalam hal ini grafik batang kita buat menggunakan CSS sedangkan panjang pendeknya grafik batang tersebut tergantung jumlah data yang kita hitung menggunakan script PHP.
Untuk membuat sebuah batang dengan CSS, kita cukup membuat tag seperti ini:

view sourceprint?

1.<div style="height: 10px; width: 10%; background-color: red;" title="..."></div>

Atribut ‘height’ digunakan untuk mengatur lebar dari batang (dalam hal ini menggunakan satuan pixel). Selanjutnya ‘width’ untuk menentukan panjang batang. Anda bisa menggunakan satuan pixel maupun prosentase. Bila Anda menggunakan prosentase maka prosentase yang dimaksud adalah relatif terhadap panjang jendela browser. Misalkan diberikan ‘width: 10%’ maka panjang batang adalah 10% dari panjang jendela browser. Sedangkan atribut ‘background-color’ untuk mengatur warna batang, dan ‘title’ untuk memberikan title dari batang tersebut. Efek pemberian ‘title’ tampak seperti pada gambar output di atas yaitu akan muncul keterangan (tool tips) ketika mouse mengenai batang tersebut.
Nah… untuk selanjutnya kita hanya bermain-main pada atribut ‘width’ dan ‘title’ untuk membuat tampilan output seperti di atas. Kedua atribut ini nanti kita buat dinamis tergantung jumlah datanya.
Trus.. untuk mengatur panjang pendeknya batang gimana caranya? caranya adalah dengan menggunakan skala. Wah.. ada matematikanya ya? jelas donk… wah mentang-mentang yang nulis artikel ini orang matematika ya? he.. 3x nggak juga, karena kebetulan topik ini ada sangkut pautnya dengan matematika
Nah.. bagaimana penggunaan skalanya? OK kita misalkan kita tentukan panjang grafik maksimum adalah 30% dari panjang jendela browser. Karena 30% ini panjang maksimum, maka kejadian ini akan terjadi ketika ada item data yang jumlahnya 100%. Sebagai contoh misalkan ada 10 mahasiswa, dan semuanya pria (prosentase pria 100%). Dengan demikian grafik batang untuk pria ini panjangnya adalah 30%. Nah.. dari asumsi ini, kita tinggal atur skalanya berarti untuk item data sejumlah n% maka panjang batangnya adalah (n*30/100)%. OK, paham ya idenya?
Dengan demikian, berdasarkan ide di atas berarti sebelum mulai membuat grafiknya, kita harus dapatkan dulu data prosentase setiap item data, dalam hal ini jumlah laki-lakinya berapa prosen begitu pula perempuannya. Setelah jumlah prosentase masing-masing diketahui, barulah kita gunakan untuk mengatur panjang grafik batang menggunakan skala di atas.
So.. script untuk membuat grafik statistik mahasiswa berdasarkan jenis kelamin kita buat sbb:

view sourceprint?

01.<?php

02. 

03.// koneksi ke mysql

04.mysql_connect("dbhost", "dbuser", "dbpass");

05.mysql_select_db("dbname");

06. 

07.// mencari jumlah laki-laki dari database

08.$query = "SELECT count(*) AS jumCowok FROM mhs WHERE jenisKelamin = 'LAKI-LAKI'";

09.$hasil = mysql_query($query);

10.$data  = mysql_fetch_array($hasil);

11.$jumCowok = $data['jumCowok'];

12. 

13.// mencari jumlah perempuan dari database

14.$query = "SELECT count(*) AS jumCewek FROM mhs WHERE jenisKelamin = 'PEREMPUAN'";

15.$hasil = mysql_query($query);

16.$data  = mysql_fetch_array($hasil);

17.$jumCewek = $data['jumCewek'];

18. 

19.// menghitung total mahasiswa

20.$total = $jumCowok + $jumCewek;

21. 

22.// menghitung prosentase laki-laki dan perempuan

23.$prosenCowok = $jumCowok/$total * 100;

24.$prosenCewek = $jumCewek/$total * 100;

25. 

26.// menentukan panjang grafik batang berdasarkan prosentase

27.$panjangGrafikCowok = $prosenCowok * 30 / 100;

28.$panjangGrafikCewek = $prosenCewek * 30 / 100;

29. 

30.?>

31. 

32.<h2>Statistik Mahasiswa Berdasarkan Jenis Kelamin</h2>

33. 

34.<p><b>Laki-laki</b> (Jumlah: <?php echo $jumCowok; ?> | <?php echo $prosenCowok; ?>%) <div style="height: 10px; width: <?php echo $panjangGrafikCowok; ?>%; background-color: red;" title="Laki-laki (Jumlah: <?php echo $jumCowok; ?> | <?php echo $prosenCowok; ?>%)"></div></p>

35. 

36.<p><b>Perempuan</b> (Jumlah: <?php echo $jumCewek; ?> | <?php echo $prosenCewek; ?>%) <div style="height: 10px; width: <?php echo $panjangGrafikCewek; ?>%; background-color: red;" title="Perempuan (Jumlah: <?php echo $jumCewek; ?> | <?php echo $prosenCewek; ?>%)"></div></p>

Nah.. mudah bukan membuatnya?
Oya.. satu lagi yang perlu saya tambahkan. Lantas.. bagaimana bila kejadiannya keseluruhan mahasiswanya laki-laki atau perempuan? pastilah nantinya ada prosentase yang 0% dan akibatnya grafik batangnya tidak muncul karena width nya ’0%’. Sebenarnya tidak apa-apa sih, namun.. kok kayaknya kurang seru. Meskipun prosentasenya 0%, tapi paling tidak kita munculkan sedikit grafiknya meskipun hanya dengan panjang 1%. Untuk membuat ini, kita harus tambahkan statement IF pada script di atas yaitu pada bagian penentuan panjang grafiknya, sehingga pada bagian tersebut menjadi:

view sourceprint?

1.if ($prosenCowok == 0) $panjangGrafikCowok = 1;

2.else $panjangGrafikCowok = $prosenCowok * 30 / 100;

3. 

4.if ($prosenCewek == 0) $panjangGrafikCewek = 1;

5.else $panjangGrafikCewek = $prosenCewek * 30 / 100;

OK?? begitu tutorial yang saya berikan ini, mudah-mudahan ada manfaatnya. Artikel ini terinsipirasi oleh plugin polling di WordPress yang saya pasang di blog ini yang menggunakan ide di atas.

Read more »

ayo belajar HTML 5, nih ada link download buat teman2 yg pengen belajar HTML 5

XHTML 2 sudah mati, saatnya beralih ke HTML 5! Menurut W3C , XHTML 2 telah sudah tidak lagi dikembangkan dan W3C berencana untuk meningkatkan kelebihan dari HTML 5 saja. meskipun HTML 5 tidak akan sepenuhnya didukung hingga tahun 2022, tidak berarti bahwa kita tidak mempelajari dan pasti akan mempergunakanya. disini saya akan bagikan scripts HTML 5 Cheat Sheet yang berisi daftar tag , penjelasan, atribut dan apakh support dalam HTML 4. namun bebrapa browse masih belum support html5... tapi tidak ada salahnya untuk mempelajari hingga html 5 bener2 disempurnakan berikut link downloadnya : Download SUMBER : http://www.akakom.ac.id/index.php/47...ri-html-5.html

Read more »

Membuat Comment Ajax

Read more »

Belajar JQuery Yuk? (Pemula Bag. 1)

WebDesigner mana yang nggak kenal dengan library javascript yang satu ini? Bahkan webdesigner dari gunung sekalipun penulis yakin sudah mengetahui library yang satu ini. Mohon maaf bagi anda webdesigner dari gunung, bukan maksud penulis mengolok-olok, tapi jangan salahkan ibu mengandung, jangan salahkan bapak mengundang. :D. Meskipun sebetulnya selain Jquery ada juga library yang sama tangguhnya, seperti mootools, scriptaculous, dan banyak lagi yang aneh-aneh, sering juga perhelatan mengenai mana yang paling bagus tetap ada hingga sekarang, penulis sendiri di tengah saja, karena masing-masing library memiliki kelebihan masing-masing, gimana seleranya aja. Yang jelas untuk menggunakan jquery dasar yang harus anda kuasai adalah, HTML, CSS, dan sedikit saja bekal pengetahuan javascript, seperlunya dan sesuai selera.
Sebetulnya apa yang menarik dari JQuery? Selain penggunaanya diketik menggunakan keyboard, library yang lengkap, manual dan tutorial yang berjibun banyaknya di internet, pluginnya pun cukup banyak sekali, bagi anda yang dikejar deadline mungkin bisa langsung membuka http://www.jqueryplugins.com untuk mendapatkan efek jquery yang di inginkan. Sementara untuk artikel yang sekarang ini penulis hanya akan mengkhususkan belajar jquery dari dasar bukan untuk menggunakan plugin jquery.
Untuk artikel kali ini penulis akan memulai pembahasan pondasi dari jquery, yakni Memulai Jquery dengan Selector.
Mengapa jquery bisa membuat efek yang begitu memukau, memainkan HTML sehingga menjadikan suatu website jadi sangat interaktif? Salah satu alasannya adalah penggunaan selector yang mudah. Apa sebetulnya selector ? Konsep selector miliki jquery bisa dibilang mengadopsi dari konsep selectornya CSS. Ada selector id, selector class, dan selector tag. Bingungkan ??? Sama dong kita. Lebih baik kita langsung terjun bebas saja untuk mempraktikan jquery. Bagaimana???
Hal pertama yang dilakukan adalah kita download terlebih dahulu JQuery, anda bisa mengunjungi http://docs.jquery.com/Downloading_jQuery untuk langsung mendownloadnya, atau bisa juga mengklik link ini http://code.jquery.com/jquery-1.4.2.js sama saja. Saya tidak sedang berusaha untuk menipu anda. :D. Oke, letakkan file tersebut misalnya di c:belajarjqueryjquery-1.4.2.js. Selesai? Lanjutkan! Lebih cepat lebih baik.
Oke, selanjutnya siapkan satu buah file html, dan letakkan satu direktori dengan jquery-1.4.2.js yang tadi kita download. Berikan namanya misalkan, latihan.selector1.html
Kemudian isi di bagian body seperti ini :

<p>Orang-orang liberal mengatakan pergerakan untuk mempersatukan kaum muslimin seluruh dunia di bawah naungan Al-Khilafah itu merupakan suatu mimpi belaka. Terlalu utopis. “Mana bisa!!”, kata mang Abdul Mosqid.
Aneh dan heran … herannya kenapa mimpi indah seperti ini nggak dibiarkan tuk tetep ada. Malah dilarang-larang. Kan aneh bin mahfuz itu namanya. Dikit-dikit dilarang … dikit-dikit dilarang. Di larang kok dikit-dikit. Haha… Yang bikin penasaran lagi kenapa begitu giatnya perjuangan mereka (orang-orang perguruan pencak silat liberal) dalam menutup gaung upaya penegakkan syariat islam lewat berbagai media. Acara ngoprek Al-Quran bareng-bareng pun jadi kegiatan keseharian. Ngopreknya nggak tanggung-tanggung, Al-Quran dicocokkin dengan akal mereka sendiri, yang nggak sesuai dikritisi, dicaci maki. Hahaha … keren-keren… Terus, kalo penegakkan syariat islam itu dibilang cuma mimpi belaka doang, Kenapa JIL harus nerbitin media kaya islamlib.com, mang Gusdur dengan wahid institutenya, dan berbagai media lainnya yang berusaha secara terang-terangan menjauhkan orang-orang islam dari gaung penegakkan syariat islam? dan bahkan nggak jarang mereka justru melencengkan arti dan makna syariat islam yang sebenarya. Heran deh gw. Heran nggak sih loh? Ada apa dibalik semua ini? Ada apa gerangan? Ada apa mang ulil meng-erang-erang? Haha…
</p>
<div id=”kotakkotaknora”></div>
<a href=”#”>Klik klik…</a>

Kemudian kita sisipkan script ini dibagian head :

<script type=”text/javascript” src=”jquery-1.4.2.js”></script>
<script type=”text/javascript”>
$(“document”).ready(function(){
$(“a”).click(function(){
$(“p.kalimat”).css(“color”, “red”);
$(“#kotakkotaknora”).addClass(“red”);
});
});
</script>
<style type=”text/css”>
.red{
height:200px;
width:200px;
background-color: red;
}
</style>

Oke, bagaimana ? masih bingung ?? Mari kita bahas javascriptnya. Pertama kita memanggil library jquery,

<script type=”text/javascript” src=”jquery-1.4.2.js”></script>

Jangan sampai pertanyaan mengapa itu ada. Apa? Ya, karena bagaimana mungkin kita bisa menggunakan fasilitas jquery tanpa kita menyisipkan jquery ke dalam tag head. Oke kita lanjut.

<script type=”text/javascript”>
$(“document”).ready(function(){
$(“a”).click(function(){
$(“p.kalimat”).css(“color”, “red”);
$(“#kotakkotaknora”).addClass(“red”);
});
});
</script>

Ketika halaman html telah di load sepenuhnya
$(“document”).ready(function(){
Dan ketika selector tag ‘a’ di halaman website tersebut di klik
$(“a”).click(function(){
Rubah kalimatnya yang berada dalam selector tag p dengan selector class samadengan kalimat menjadi warna merah
$(“p.kalimat”).css(“color”, “red”);
Kemudian berikan style untuk selector id kotakkotaknora.
$(“#kotakkotaknora”).addClass(“red”);
Penutupnya.
});
});
Sehingga yang harus di catat adalah, untuk memanggil elemen yang memiliki id, misalnya elemen div dia memiliki id, maka jquerynya memanggil dengan selector #id.
Sehingga <div id=”kotakotaknora”></div> di panggil oleh jquery dengan $(“#kotakkotaknora”).
Begitu pun halnya class dalam css, misalnya <p class=”kalimat”></p>
Lalu yang terakhir adalah tag selector, misalnya <a href=”#”> karena dia tidak memiliki id maupun class maka jquery memanggilnya dengan $(“a”).
Mudah ya? Oke kita perdalam lagi untuk tutorial selanjutnya.
Script lengkapnya adalah seperti ini, atau bisa juga download di sini

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<html>
<head>
<title></title>
<meta name=”" content=”">
<meta name=”vs_targetSchema” content=”http://schemas.microsoft.com/intellisense/ie5″>
<script type=”text/javascript” src=”jquery-1.4.2.js”></script>
<script type=”text/javascript”>
$(“document”).ready(function(){
$(“a”).click(function(){
$(“p.kalimat”).css(“color”, “red”);
$(“#kotakkotaknora”).addClass(“red”);
});
});
</script>
<style type=”text/css”>
.red{
height:200px;
width:200px;
background-color: red;
}
</style>
</head>
<body>
<p>Orang-orang liberal mengatakan pergerakan untuk mempersatukan kaum muslimin seluruh dunia di bawah naungan Negara Daulah Al-Khilafah Islamiyah itu merupakan suatu mimpi belaka. Terlalu utopis. “Mana bisa!!”, kata mang Abdul Mosqid.
Aneh dan heran … herannya kenapa mimpi indah seperti ini nggak dibiarkan tuk tetep ada. Malah dilarang-larang. Kan aneh bin mahfuz itu namanya. Dikit-dikit dilarang … dikit-dikit dilarang. Di larang kok dikit-dikit. Haha… Yang bikin penasaran lagi kenapa begitu giatnya perjuangan mereka (orang-orang perguruan pencak silat liberal) dalam menutup gaung upaya penegakkan syariat islam lewat berbagai media. Acara ngoprek Al-Quran bareng-bareng pun jadi kegiatan keseharian. Ngopreknya nggak tanggung-tanggung, Al-Quran dicocokkin dengan akal mereka sendiri, yang nggak sesuai dikritisi, dicaci maki. Hahaha … keren-keren… Terus, kalo penegakkan syariat islam itu dibilang cuma mimpi belaka doang, Kenapa JIL harus nerbitin media kaya islamlib.com, mang Gusdur dengan wahid institutenya, dan berbagai media lainnya yang berusaha secara terang-terangan menjauhkan orang-orang islam dari gaung penegakkan syariat islam? dan bahkan nggak jarang mereka justru melencengkan arti dan makna syariat islam yang sebenarya. Heran deh gw. Heran nggak sih loh? Ada apa dibalik semua ini? Ada apa gerangan? Ada apa mang ulil meng-erang-erang? Haha…
</p>
<div id=”kotakkotaknora”></div>
<a href=”#”>Klik klik…</a>
</body>
</html>

Read more »

Perkenalan PHP Framework: Panada

Panada adalah sebuah MVC PHP Framework yang membantu para developer PHP untuk mempermudah dalam pembuatan sebuah aplikasi web. Berbagai macam librari telah tersedia dan siap digunakan untuk mempercepat proses penyelesaian pekerjaan.
Berdasarkan pengujian, kinerja Panada cukup cepat bila dibandingkan dengan beberapa framework yang telah ada sebelumnya. Hal ini dikarenakan penggunaan alur logic yang sederhanan dan simpel pada system utamanya (core system).
Untuk instalasi, Panada membutuhkan setidaknya PHP versi 5.2 ke atas. Framework ini memanfaatkan feature-feature yang ada pada PHP 5 seperti autoload dan filter function.
Feature-feature yang ada pada Framework buatan lokal ini diantaranya ringan, sederhana, suport multisite, natural dll. Secara detail bisa dibaca di http://panadaframework.com/.
Instalasi
Untuk mendapatkan source code Panada versi terbaru, silahkan download di http://panadaframework.com/. Dilanjutkan dengan membuat sebuah folder baru di root folder webserver Anda dengan nama mysite. Silahkan ekstrak dan simpan source code Panada pada folder ini. Kemudian buka browser dan ketikan alamat: http://localhost/mysite. Jika berhasil, maka akan tampil pesan “This is hello world body!” pada halaman tersebut.
Hello World!
Penggunaan Panada cukup mudah sama seperti Anda menggunakan class pada PHP 5. Pertama-tama buat sebuah class, misalnya class “hello” di mana class ini menjadi child dari class Panada. Berikut contohnya:
<?php
class Controller_hello extends Panada {
public function __construct(){
parent::__construct();
}
}
Simpan class ini dengan nama hello.php dan letakkan pada folder application/controller. Buat sebuah method pada class ini dan berikan nama “index”. Tampilkan string di dalam method ini dengan konstruksi echo ‘hello world!’; Berikut contohnya:
<?php
class Controller_hello extends Panada {
public function __construct(){
parent::__construct();
}
public function index(){
echo ‘Hello world!’;
}
}
Buka browser dan ketikkan alamat “http://localhost/mysite/index.php/hello”. Jika tidak ada maslah, maka akan muncul pesan “hello world!” pada halaman browser. Untuk penjelasan lebih rinci tentang cara pembuatan Contrloller, silahkan lihat pada halaman dokumentasi Panada tentang controller di http://panadaframework.com/documentation/references/controller.html.
Pada alamat yang barusan Anda masukan, masih terdapat bagian “index.php”. Untuk menghilangkannya, Anda harus mengaktifkan file .htaccess dengan cara merubah nama file “file.htaccess” menjadi “.htaccess”. File ini ada pada source code yang Anda download. Penjelasan lebih lengkap mengenai konfigurasi webserver silahkan lihat halaman http://panadaframework.com/documentation/config.html#webserver.
Tutorial Login-logout
Sampai pada tahap ini Anda sudah berhasil menggunakan Panada secara sederhana. Tahap berikutnya, kita akan coba membuat fungsi login-logout menggunakan database. Fungsi ini sangat umum digunakan pada aplikasi berbasis web.
Langkah pertama, buat sebuah controller baru dengan nama accounts. Pada controller ini kita memerlukan dua librari bantuan yaitu, database dan session. Librari ini telah disediakan oleh Panada, untuk itu kita akan me-load dua librari ini di dalam controller accounts. Kita juga membutuhkan dua method, yaitu “login” dan “logout”. Pada method login, kita akan buat sebuh form html yang nantinya akan kita simpan pada folder application/view. Berikut adalah contoh class-nya:
<?php
class Controller_accounts extends Panada {
public function __construct(){
parent::__construct();
//Load librari session dan db
$this->db = new Library_db();
$thsi->session = new Library_session();
}
public function index(){
// Lakukan kondisi pengecekan, jika user belum login redirect ke halaman login.
if ( ! $this->session->get(‘name’) )
$this->redirect(‘accounts/login’);
// Inisialisasi variable username yang akan dikirim ke file application/view/logedin_page.php
$views['name'] = $this->session->get(‘name’);
$this->view(‘logedin_page’, $views);
}
public function login(){
$views['error'] = null;
if ( $_POST ) {
$data['username'] = $_POST['username'];
$data['password'] = md5($_POST['password']);
// Cek pada tabel user, apakah username dan password yang diinput sudah benar.
if ( $user = $this->db->get_row(‘users’, $data) ) {
// Username dan password sudah benar, simpan nilai name ke dalam session.
$this->session->set(‘name’, $user->name);
// Redirect ke halaman utama.
$this->redirect(‘accounts’);
}
else {
$views['error'] = ‘Username atau password yang Anda input salah.’;
}
}
// Tampilkan form login html yang ada pada file application/view/form_login.php
$this->view(‘form_login’, $views);
}
public function logout(){
// Hapus session dan redirect ke halaman login.
$this->session->session_clear_all();
$this->redirect(‘accounts/login’);
}
}
Langkah berikutnya adalah mebuat sebuah database MySQL dengan nama “panada_tutorial”. Kemudian dump data berikut ke dalam database tersebut:
CREATE TABLE IF NOT EXISTS `users` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`username` varchar(50) NOT NULL,
`password` varchar(32) NOT NULL,
`name` varchar(100) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=2 ;
INSERT INTO `users` (`id`, `username`, `password`, `name`) VALUES
(1, ‘user’, ‘ee11cbb19052e40b07aac0ca060c23ee’, ‘Budi’);
Karena aplikasi yang akan dibuat membutuhkan koneksi ke database, maka kita perlu menentukan parameter-parameter yang dibutuhkan yaitu host, user dan password. Untuk melengkapi parameter silahkan edit file application/config.php dan kemudian edit variable berikut:
$CONFIG['db']['default']['host'] = ISIKAN_HOST_MYSQL;
$CONFIG['db']['default']['user'] = ISIKAN_USER_MYSQL;
$CONFIG['db']['default']['password'] = ISIKAN_PASSWORD_MYSQL;
$CONFIG['db']['default']['database'] = ‘panada_tutorial’;
Silahkan lengkapi nilai variable-variable di atas dengan konfigurasi server database Anda.
Anda juga harus melengkapi bagian $CONFIG['base_url'], misalnya dengan:
$CONFIG['base_url'] = ‘http://’ .$_SERVER['SERVER_NAME'].’/mysite/’;
Bagian ini dibutuhkan untuk menentukan path url aplikasi.
Tahapan selanjutnya adalah membuat file-file untuk view. Dari class accounts di atas, ada dua file view yang harus dibuat, yaitu logedin_page.php dan form_login.php. Berikut adalah isi masing-masing file tersebut:
logedin_page.php
<html>
<head>
<title>Welcome</title>
</head>
<body>
<p>Selamat datang <?php echo $name; ?> <a href=”accounts/logout”>Logout</a></p>
</body>
</html>
form_login.php
<html>
<head>
<title>Login Page</title>
</head>
<body>
<form action=”" method=”post”>
<p>Username: <input type=”text” name=”username” /></p>
<p>Password: <input type=”password” name=”password” /></p>
<input type=”submit” name=”submit” value=”Login” /></p>
</form>
<?php echo $error;?>
</body>
</html>
Sekarang akses alamat http://localhost/mysite/index.php/accounts pada browser. Jika tidak ada masalah Anda akan diredirect ke http://localhost/mysite/index.php/accounts/login.
Sekarang isikan “user” pada isian username dan “user” pada bagian password, lalu tekan “login”. Jika semuanya benar, Anda akan muncul pesan “Selamat datang Budi” pada browser. Klik logout untuk melakukan logout.
Silahkan download scriptnya di sini http://www.ilmuwebsite.com/donlot/sourcecode.tar.gz
Pada tutorial ini Anda sudah berhasil membuat controller, membuat file untuk view dan me-load librari menggunakan Panada framework. Untuk mempelajari lebih lanjut Anda bisa membaca dokumentsinya di http://panadaframework.com/documentation/.
Karena ini adalah project open source, Anda juga diundang untuk berpartisipasi secara aktif untuk berkontribusi. Silahkan forked projectnya di http://github.com/k4ndar/Panada. Atau jika ada saran atau masukan silahkan tulis komentar Anda. Bisa juga dikirim ke k4ndar [at] yahoo.com atau di milis phpug [at] yahoogroups.com. Setiap kontribusi yang Anda berikan pasti akan menjadikan Panada lebih baik, terima kasih dan selamat mencoba.

Read more »

Decrypt MD5

Kemarin seorang teman bertanya tentang Decrypt MD5 di forum ilmuwebsite, setelah saya coba cari jawaban nya, MD5 memang tidak bisa di decrypt, md5 adalah adalah one way encrypt tanpa bisa di decrypt, kalau bisa mungkin karena apa yang di encrypt itu terlalu mudah, coba saja kalau text yang mau di encrypt dengan md5 itu rumit, misalnya menggunakan simbol simbol @#$%^ dsb… pasti gak bisa di decript.

Sebagai tambahan teman2 yang mau mencoba tool decrypt md5 silahkan coba tool ini: http://md5decryption.com

*masukan: kalau teman2 ingin mengencrypt sesuatu dengan aman, gunakan 2x encrypt, pertama md5 setelah itu ecnrypt lagi dengan sha1

dijamin ga bisa di decrypt :D

Read more »

Mencegah Direct Access Pada File PHP

Salam, ini adalah tulisan pertama saya setelah liburan panjang akhir puasa, dan lebaran Iedul Fitri. Lama juga ilmuwebsite vakum ternyata, tapi tidak dengan berbagai free services yang kami tawarkan, numpang promosi.. :D. Yang penting budaya sharing kembali lagi dilakukan. Sebelum ke inti dari artikel ini, izinkan saya … Mengucapkan Mohon Maaf jika sebelum-sebelumnya saya melakukan kesalahan kepada anda sekalian, baik yang disengaja maupun tidak disengaja, Mohon Maaf Lahir dan Batin.
Dulu sekali, saya pernah membuat 2 tutorial yang menyinggung masalah PHP Redirect, dimana redirect ini sebetulnya bisa dimanfaatkan ketika user telah melakukan pengisian form, maka diredirect ke satu halaman yang berisi informasi formnya itu telah diisi dengan benar, dan informasi lain-lain. Namun untuk tutorial kali ini berbeda dengan 2 tutorial yang tadi saya sebutkan. Tutorial kali ini lebih membahas kepada file phpnya itu sendiri. Yang saya maksud di sini adalah pengaksesaan secara langsung kepada suatu file php.
Misalkan seperti ini, anda membuat sebuah file php, di mana anda tidak menginginkan file phpnya ini di akses secara langsung melalui urlnya, tetapi menginginkan file php hanya dapat dijalankan ketika di include oleh file lain. Dan anda menampilkan peringatan Forbidden seperti ini ketika file tersebut diakses secara langsung.
Bagaimana melakukan ini semua? Silahkan baca tutorial ini sampai habis.
Kita membutuhkan setidaknya 2 buah file php. Yang pertama adalah index.php isinya adalah seperti ini :
[code]<br />
<?<br />
define(active, "yes");<br />
require_once "page.php";<br />
?><br />
[/code]
Kemudian yang kedua adalah page.php. Dan isinya adalah seperti ini :
[code]<?<br />
if (active == "yes"){<br />
echo "i am inside";<br />
}<br />
<br />
else{<br />
echo "You Can't Access this page ... ";<br />
}<br />
?>[/code]

Ketika kita mengakses url file index.php melalui browser, maka yang terjadi adalah, variable dan fungsi yang ada pada file page.php itu di jalankan di file index.php, ini terjadi karena bantuan constant yang ada pada index.php. Sedangkan tampilan “You Can’t Access this page …”  didapatkan ketika kita mengakses secara langsung url file page.php, ini terjadi karena constantnya itu tidak ada atau tidak didefinisikan, sehingga yang terjadi adalah “You Can’t Access this page …”. Bagaimana? Sangat mudah sekali bukan?
Selamat mencoba.

Read more »

Perbedaan Standards compliance dan Quirks mode HTML?

Kurang lebih beberapa bulan yang lalu, seorang teman penulis yang sama-sama bergelut dalam bidang Web Development mengajukan beberapa pertanyaan, sekilas terlihat seperti sesuatu yang sepele namun penulis berpikir memang ini pertanyaan yang mendalam. :) Namun sebetulnya apa yang ditanyakan? Beliau menanyakan, bagaimana membuat website itu memiliki tampilan yang sama meskipun dibuka dengan browser yang berbeda? Kemudian dia menambahkan apa ada teknik lain selain menggunakan CSS Resetter?
Waktu itu saya sendiri belum bisa menjawabnya, karena teknik lainnya itu saya dapatkan setelah menjalani lamanya waktu pertapaan. :D. Saya yakin senior-senior di atas saya mengetahui hal ini lebih dulu ketimbang saya sendiri. Yakni Standard Compliance dan Quirks Mode pada halaman HTML.  Dua mode ini dapat terlihat dengan jelas jika Anda menggunakan Mozilla Firefox dan tambahan Add On Web developer.
Dua mode inilah yang menyebabkan browser membedakan proses rendering halaman HTML. Sebetulnya apa fungsi dari dua mode ini? Secara sederhananya dengan mode Standards Compliance yang dipadukan dengan CSS Resetter maka tampilan halaman website yang Anda buat dapat terlihat sama meskipun di akses dengan menggunakan browser yang berbeda.
Seorang web designer pemula biasanya tidak menyertakan baris di bawah ini kedalam file HTML nya sehingga browser menganggapnya sebagai Quirks Mode, dan akibatnya tampilan halaman akan berbeda jika di akses menggunakan browser yang berbeda.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
Cukup sederhana, tambahkan baris di atas tersebut ke dalam halaman html Anda, dan browser akan mendeteksi halaman tersebut sebagai Standard Compliance Mode, dan membedakan proses rendering file HTML.
Selamat bereksplorasi.

Read more »

Menghilangkan Label Attacked Site Pada Website Terjangkit Malware

Lagi-lagi saya menanyakan kepada Anda diawali dengan kata tanya “Pernahkah?” karena lagi-lagi cuma kata ini yang tepat mewakili pertanyaan saya mengenai keadaan Anda sebelum artikel ini ditulis.
Pernahkan Anda menemui, atau barangkali pernahkah Anda mendapatkan website yang Anda buat memiliki tampilan seperti di bawah ini?
Yang kurang lebih artinya, website Anda terinfeksi malware, sehingga web browser menyarankan lebih baik Anda meninggalkan website tersebut daripada nantinya malah PC Anda yang terinfeksi oleh malware tersebut.

Yang Anda rasakan kurang lebih sama seperti yang saya rasakan ketika pertama kali saya menemui website yang telah dibuat mengandung malware. Kesal, sedih, bingung bercampur menjadi satu. Sehingga sekali lagi, saya harus mengulang kata-kata yang sama “lagi-lagi”, karena lagi-lagi secara spontan jari-jari saya mengetikkan satu url pada address bar. Ketik, Google kemudian ctrl+enter :P. Sepertinya tidak ada kata habisnya menggali informasi melalui mesin pencari yang satu ini. Saya mengakuinya, aku mensayainya. :D
Okelah kalo begitu, kita langsung saja menuju inti pembahasan. Bilamana website Anda mendapatkan label red alert bertuliskan “Report Attack Site”. Maka yang perlu Anda lakukan cuma melakukan 3 hal, pertama, cek source code website Anda,  kedua hapus barisan kode yang tidak dikenal, terakhir kembalikan kepada keadaan semula dengan google webmaster.

Langkah Pertama : Cek Source Code
Langkah terbaik untuk mengecek source code adalah mengunduh / mendownload / membackup source code website Anda yang terbaru, tentunya source code yang terjangkit malware yang terletak di hosting Anda. Gunakanlah filemanager pada cpanel, atau ftp client untuk mendownload source codenya. Unduh/download/backup-annya dan letakkan di satu direktori khusus. Perlu diketahui malware memiliki banyak sekali jenisnya, tapi yang sering saya temui adalah malware yang mengincludekan <iframe> kedalam file index.*,  kemudian jenis yang lain adalah malware jenis image seperti ini:
<img heigth=”1″ width=”1″ border=”0″ src=”http://imgbbb.net/t.php?id=14503340″>
Gunakan insting pencarian Anda untuk menemukan barisan source code mencurigakan.

Hapus Barisan Kode Yang Tidak Di Kenal
Setelah menemukan barisan tersebut silahkan hapus semuanya, biasanya saya menggunakan notepad++, buka notepad kemudian ctrl + h, masuk ke bagian find in files seperti gambar di bawah ini :
Find What di isi dengan source code yang mencurigakan, replace withnya di kosongkan saja, directorynya di isi dengan direktori letak source code Anda. Kemudian klik replace in files.


Kembalikan Seperti Keadaan Semula
Google menyediakan Google Webmasternya yang luar biasa, yang dapat mengecek source code html website Anda setiap harinya. Sehingga ketika website Anda terjangkit malware, google akan segera melaporkannya dengan segera melalui google webmasternya. Cukup lakukan Add site di google webmaster bila situs Anda belum ada dalam daftar site di google webmaster, kemudian lakukan verifikasi dan masuk ke bagian
Diagnostics, dan klik Malware. Lalu lakukan “Request a review”. Setelah itu tunggu 1-2 hari maka label red alert Report Attack Site akan hilang dengan otomatis.

Terima kasih. Selamat mencoba.
Dipersembahkan untuk istriku tercinta Jesica Oktaria Rosyadie. ^_^

Read more »

Mengapa Oh Mengapa Menggunakan PHP Framework?

Ini adalah artikel versi saya pribadi yang menganjurkan Anda, para programmer yang saat ini masih menggunakan pemrogaman jenis prosedural untuk beralih ke pemrogaman jenis MVC.
Begitu banyak sekali Framework php yang dibuat untuk mempercepat kinerja para programmer php, dan lebih mengefisiensikan lagi cara kerja seorang programmer php. Saya kenal beberapa framework lokal yang kualitasnya tak kalah bagus dengan framework buatan luaran. Contohnya seperti panada framework buatan mas Iskandar Soesman, salah satu partner ilmuwebsite, yang saat ini bekerja sebagai developer tetap di salah satu media cetak swasta yang justru semakin tinggi melesat namanya, karena teknologi e-papernya pertama kali diperkenalkan di Indonesia, oleh media cetak swasta ini. Panada salah satu contoh framework lokal yang international quality. B-).
Adapun Code Igniter, saat ini menjadi salah satu framework favorit yang masuk ke dalam tiga besar framework terbaik di dunia, dengan urutan pertama Yii, kedua ditempati oleh Code igniter dan yang terakhir ada Cake PHP maupun zend yang selalu berebut posisi tiga.
Oke, begitu sekilas absensi jawara-jawara yang menempati posisi-posisi framework. Namun ada satu pertanyaan yang mungkin para programmer php yang pemula, maupun advanced menggunakan PHP masih pertanyakan, pertanyaan-pertanyaan seperti “Mengapa harus menggunakan PHP Framework?” tidak ada ruginya untuk menjawab pertanyaan ini.
Banyak sekali tutorial mengenai cara menggunakan framework, dan banyak pula artikel-artikel yang menganjurkan menggunakan php framework, oleh karena itu di awal artikel saya tegaskan kepada Anda, ini adalah artikel yang menganjurkan untuk menggunakan php framework dalam versi saya, Loka Dwiartara. ;-).
Mari mari …
Keunggulan Menggunakan Framework PHP
Hampir semua framework php menggunakan MVC sebagai ciri khas pola programmingnya. MVC, Model View Controller, memungkinkan suatu tim membangun aplikasi skala besar dengan sangat efisien, cepat, dan luar biasa.
Pada mulanya saya pun kebingungan untuk memahami konsep-konsep yang mungkin baru bagi seorang pemula, bahkan untuk seorang koder yang sudah kenal dekat dengan OOP sekalipun. Tapi marilah kita sama-sama mencoba mengerti konsep MVC ini.

Model, merupakan satu bagian dari MVC, model bertugas untuk berhubungan langsung dengan tugas-tugas CRUD (Create, Read, Update & Delete) pada database, misalnya berhubungan dengan mysql, yang menariknya adalah, framework sudah menyertakan koneksi dengan berbagai jenis database, mulai dari mysql, postgree, oracle, mssql server, dan lain-lain sebagainya, kita tinggal memasukkan nama databasenya dan atribut-atribut seperti host, username, dan passwordnya saja. Sungguh luar biasa lagi, karena seorang koder tidak lagi melakukan hal-hal klasik melulu dilakukan setiap mengawali koding. Bukan hanya konektivitas dengan database saja, tapi seperti yang saya bicarakan lagi, tugas-tugas create, read, update & delete jauh lebih cepat, mudah, efisien, dan luar biasa. Ck ck ck ck… :D
View, jika model berhubungan dengan tugas-tugas database, maka view dikerjakan oleh sang web designer, karena view berisi kode-kode html, css, maupun javascript yang digunakan sebagai tampilan web nantinya. Seorang pembuat view biasanya melakukan pekerjaan dan sedikit berkoordinasi koder intinya, atau bahkan tidak berkoordinasi sama sekali dengan kodernya, tapi hanya mengikuti standarisasi koding framework, sepertinya misalnya pembuatan table data, maupun pagination, dan lain-lain sebagainya.
Controller, menjadi tulang punggung koding. Controller yang menghubungkan antara view dan model. Controller yang menghandle inputan dari user. Anggaplah kasusnya seperti user login, ketika tampilan dibuka, controller melihat dari url yang adam kemudian controller mencocokan antara url dengan view yang ada. Jika cocok maka viewnya di tampilkan. Nah misalkan seperti ini, ketika user memasukkan username dan password dan submit, maka controller menerima inputan ini lalu controllerlah yang dia berhubungan langsung dengan model (database) untuk mencocokan apakah yang username dan password yang ada dalam database itu ada dan cocok, controller lah yang menghandle ini semua, yang kemudian jika cocok, maka tugas selanjutnya adalah dilimpahkan kepada view, untuk memperlihatkan tampilan selanjutnya.
Sederhananya adalah, seorang koder tidak lagi direpotkan untuk mengurusi sistem keamanan yang berlibet, tinggal konfigurasi saja. Kemudian seorang koder tidak lagi mengurusi url yang begitu banyaknya, biasanya ketika kita membuat controller (class) dan function (method) maka si function ini akan secara otomatis menghasilkan url tersendiri, sebagai contohnya seperti ini.
Saya membuat sistem informasi data mahasiswa, yang didalamnya terdiri dari create, read, update, delete. Maka yang diperlukan adalah satu buah controller, dan satu buah model.
anggaplah controller mahasiswa, kemudian controller ini memiliki method-method, diantaranya funciton create, function delete, function edit. Function-function inilah yang menghasilkan url, sehingga jika user ingin membuat mahasiswa baru, url yang dibuka cukup : http://namasite.com/nama-controller/nama-function
seperti http://localhost/web/mahasiswa/create
dengan kata lain, si koder tidak usah pusing lagi mengurusi masalah url. Kira-kira begitulah mengapa oh mengapa seorang koder di harapkan untuk menggunakan php framework, agar bisa bekerja kelompok di rumah, di kantor, dan di mana-mana. :D
Lalu apa langkah selanjutnya? Silahkan perdalam konsep MVC lebih jauh, dan praktikan menggunakan Code Igniter.  Selamat ber-framework ria.

Read more »

Membuat Form Multi Submit Dengan Multi Link

Masing-masing developer memiliki cara-cara individu tersendiri dalam memproses suatu form, ada yang menggunakan button submit, ada yang menggunakan link, ada juga yang menggunakan image, atau bahkan tidak ada yang menggunakan button, biasanya yang terakhir ini menggunakan bantuan lain yakni ajax form submission dan metode-metode lain. Namun bagaimana caranya menggunakan multi link untuk memproses suatu form.

Pada artikel sebelumnya penulis pernah membahas bagaimana membuat submit button dengan link image . Pada tutorial kali ini penulis akan menjelaskan kepada Anda, bagaimana caranya Membuat Form Multi Submit Dengan Multi Link. Sebelum ke inti pembahasan, banyak sekali alasan mengapa developer menggunakan metode ini, salah satunya adalah faktor layout, dan keindahan. Dan lagi membuat submit button dengan link ini dimemerlukan si submit ini harus berada di dalam tag <form></form> melainkan bisa diletakkan di luarnya, cukup dipanggil saja form apa yang akan di kirimkan datanya, kurang lebih seperti itu.

Kita siapkan terlebih dahulu 1 buah form dalam 1 file, misalkan file tersebut adalah form.php. Isinya kurang lebih adalah seperti ini :

<html>

<head><title>Multi Submit Link</title></head>

<body>

<form action=”cek.php” name=”form_cek” id=”form_cek”>

<label for=”nama”>Nama:</label><input type=”text” name=”nama” id=”nama” />

</form>

<a href=”" onclick=”document.form_cek.action = ‘cari.php’; document.form_cek.method=’get’; document.form_cek.submit(); return false;”>Cari</a>

<a href=”" onclick=”document.form_cek.action = ‘edit.php’; document.form_cek.submit(); return false;”>Edit</a>

</body>

</html>

kemudian yang kedua adalah file cari.php berisi :

<?php echo $_REQUEST['nama'];?>

dan terakhir file edit.php berisi :

<?php echo $_GET['nama'];?>

lihat kembali di form.php, di form tersebut tidak ada submit button sama sekali tapi sebagai gantinya, kita menggunakan link sebagai submit buttonnya.

<a href=”" onclick=”document.form_cek.action = ‘cari.php’; document.form_cek.method=’get’; document.form_cek.submit(); return false;”>Cari</a>

Submit button dengan link ini bisa berjalan dengan mulus dengan catatan, si form harus memiliki id dan name tentunya sehingga javascript memanfaatkan link untuk memanggil id si form tersebut seperti ini

document.form_cek.action = ‘cari.php’; document.form_cek.method=’get’; document.form_cek.submit(); return false

Jelas ya? Selamat Mencoba.

Read more »

Membuat Popup Menu hanya dengan CSS

Dalam artikel sebelumnya tentang 10 Kesalahan SEO, ada satu hal yang membuat penulis terpanggil untuk memberikan solusi salah satunya. Apa itu ?  Yakni developer website biasanya melakukan kesalahan membuat popup menu dengan java script, hal ini cukup fatal, biasanya googlebot ataupun crawler yang lain enggan melewatinya.

Oke lalu bagaimana membuat googlebot maupun crawler lainnya mengindex page melalui popup menu? Yakni dengan mengubah popup menu dari yang tadinya menggunakan javascript menjadi menggunakan css saja. Menggunakan css untuk membuat popup menu jauh lebih ringan, dan tentunya jauh lebih disukai oleh googlebot maupun crawler yang lainnya. Hasilnya adalah index page jauh lebih maksimal.

Luar biasa bukan? Sungguh. :-)

Sederhananya membuat popup akan segera kita bahas segera.

Ya persiapkan satu file saja, misakan popup.html

di bagian body, isinya kurang lebih seperti ini :

<body>

<div id=”menu”>

<ul>
<li><a href=”">Home</a></li>

<li>  
<a href=”">News</a>

<ul>
<li><a href=”">Website</a></li>
<li><a href=”">Mobile</a></li>
<li><a href=”">Android</a></li>
</ul>

</li>

<li><a href=”">About Us</a></li>
<li><a href=”">Contact Us</a></li>
<li><a href=”">Service</a></li>
<li><a href=”">Portfolio</a></li>

</ul>
</div>
</body>

Sedangkan style di bagian headnya kira-kira seperti ini

<style type=”text/css”>
#menu{
width:auto;
height:30px;
padding:8px 0 0px 0;
background:#0057C7;
}

#menu ul{
margin:0;
}

#menu ul li{
list-style-type:none;
margin:0;
float:left;
}

#menu ul li a{
font-family:Arial;
text-decoration:none;
margin:0 10px 0 0;
font-size:12px;
color:#fff;

}

#menu ul li ul.child{
display:none;
}

#menu ul li:hover ul.child{
display:block;
position:absolute;
z-index:2;
text-align:left;
}

#menu ul li:hover ul.child li a{
display:block;
padding:10px 20px 10px 20px;
background:#0057C7;
margin:0 0 0 -20px;
}

#menu ul li:hover ul.child li{
float:none;
margin:0 0 0 -30px;

}

#menu ul li a:hover{
text-decoration:underline;

}
</style>

Yang terjadi sebetulnya kita membuat popup menu memanfaatkan unordered list <ul>. Dimana di dalamnya terdapat kelas parent dan child seperti ini :

Dan yang membuat mereka menjadi terlihat popup adalah

Ketika kondisi normal, atau dengan kata lain li anak parent tidak di hover. Maka yang terjadi adalah ul.childnya disembunyikan.

#menu ul.parent li ul.child{
display:none;
}

dan ketika li anak parent di hover maka ul.childnya di tampilkan.

#menu ul.parent li:hover ul.child{
display:block;
position:absolute;
z-index:2;
text-align:left;
}

dan hasilnya adalah seperti ini.
http://labz.ilmuwebsite.com/popupmenu/index.html

Mudah sekali bukan? Ya begitulah cara membuat popup menu dengan menggunakan css saja. Selamat mencoba.

Read more »

Flowplayer: Generasi Baru Flash Video Player

Saat ini begitu banyak sekali web video player yang berbasis flash, salah satunya yang sering Anda lihat di youtube. Berbagai macam jenisnya, ada jw player, ada video lightbox, gdd flv player, mc media player, dan lain-lain sebagainya.

Para developer web biasanya menggunakan video player berdasarkan fungsi dasarnya, yakni memutar flv file, atau streaming video file. Namun karena banyak kebutuhan yang tadinya hanya memutar video streaming saja, kini fitur seperti subtitle multi bahasa juga dibutuhkan ketika akan memutar video streaming tersebut. Sehingga kini, kita tidak hanya dapat melihat video yang sedang berputar, bahkan terjemahannya pun sudah disediakan. Fitur-fitur seperti itu kini menjadi teramat sangat dibutuhkan.

Media player dengan subtitle biasanya lazim ditemui di aplikasi desktop, ambilah contohnya misalnya file srt yang digunakan untuk media player seperti K-Lite media player, yang juga dapat digunakan di VLC media player, dan kini pun file srt dapat digunakan untuk subtitle web video streaming player. Salah satunya flowplayer sudah mengadopsi fitur ini.

Ya, flowplayer, yang menurut penulis merupakan flash video player untuk web urutan pertama yang kaya fitur, mudah konfigurasi, mudah kostumisasi, dan tentunya free free free.

Flowplayer pun memiliki banyak plugin untuk dikostumisasi, baik itu flash plugin, maupun javascript plugin membuat flowplayer jadi lebih kaya fitur.

Oke, bagi Anda yang ingin melihat demonya silahkan klik di sini …
http://flowplayer.org/demos/index.html

Untuk melihat contoh video dengan memanfaatkan srt file subtitle :
http://flowplayer.org/demos/plugins/flash/captions.html

Dan silahkan download di sini
http://flowplayer.org/download/index.html

Read more »

Ajax dengan PHP dan Jquery

Banyak sekali permintaan yang datang kepada penulis perihal bagaimana cara mudahnya menghasilkan fitur ajax dengan menggunakan jquery dan php. Ajax merupakan satu fitur yang digunakan oleh para developer, baik menambah data, menghapus, mengupdate, tanpa melakukan refresh page, atau redirect page.
Banyak cara juga untuk dapat menghasilkan ajax ini, ada develepor yang membuat engine sendiri, tentunya menggunakan standarisasi ajax, ada juga yang menggunakan javascript plugin, seperti jquery misalnya.
Di tutorial kali ini, penulis akan menjelaskan sedikit saja bagaimana menghasilkan fitur ajax menggunakan php dan jquery. Caranya sangat-sangat mudah sekali. Anda cukup mengikuti syntaxnya, dan memahami alurnya. Tapi sebelumnya terlebih dahulu Anda membaca tutorial saya sebelumnya tentang pengenalan jquery.
Setidaknya diperlukan paling tidak 3 buah file minimal, pertama adalah file yang digunakan untuk mengirimdata, kemudian file yang digunakan untuk menerima data ataupun memproses data, dan yang terakhir adalah jquery librarynya itu sendiri.
Oke disini saya memiliki file index.php yang berfungsi dalam mengirimkan data
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<html>
<head>
<title></title>
<meta name=”" content=”">
<script type=”text/javascript” src=”jquery-1.6.4.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(‘#ajaxTest’).submit(function(eve){
eve.preventDefault();
$.ajax({
url: “/function.php”,
type: “POST”,
dataType: “html”,
data: $(this).serialize(),
beforeSend: function(){
$(‘#waiting’).text(‘Mohon Tunggu Sebentar’).fadeIn(‘slow’);
},
success: function(html){
$(‘#waiting’).fadeOut(‘slow’);
$(‘#result’).text(html).fadeIn(‘slow’).fadeOut(‘slow’).fadeIn(‘slow’);
}
});
});
});      
</script>
</head>
<body>
<form method=”POST” id=”ajaxTest”>
<input type=”input” name=”ajaxInput” />
<input type=”submit” name=”ajaxBtn” value=”Test Button” />
</form>
<div id=”waiting”></div>
<div id=”result”></div>
</body>
</html>

selanjutnya adalah function.php yang digunakan dalam menerima dan memproses data berisi :
<?php
echo $_POST['ajaxInput'];
?>
dan file yang terakhir adalah file jquery itu sendiri saya menggunakan jquery versi 1.6.4.
Yang perlu disorot adalah jquery script yang ada dibagian headnya :
<script type=”text/javascript” src=”jquery-1.6.4.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(‘#ajaxTest’).submit(function(eve){
eve.preventDefault();
$.ajax({
url: “/function.php”,
type: “POST”,
dataType: “html”,
data: $(this).serialize(),
beforeSend: function(){
$(‘#waiting’).text(‘Mohon Tunggu Sebentar’).fadeIn(‘slow’);
},
success: function(html){
$(‘#waiting’).fadeOut(‘slow’);
$(‘#result’).text(html).fadeIn(‘slow’).fadeOut(‘slow’).fadeIn(‘slow’);
}
});
});
});      
</script>
jquery action selalu diawali dengan
$(document).ready(function(){
dan di akhiri dengan
});
kemudian baris selanjutnya adalah :
$(‘#ajaxTest’).submit(function(eve){
eve.preventDefault();
ini berarti submit form yang tadinya disubmit secara langsung ke action formnya alihkan dengan menggunakan jquery ajax, jadi ketika diklik maka tidak akan berpindah ke halaman action formnya. Yang ada malahan jquery yang mengambil alih ketika button submit di klik.
kemudian baris selanjutnya adalah :
$.ajax({
url: “/function.php”,
type: “POST”,
dataType: “html”,
data: $(this).serialize(),
url berisi halaman penerima data yang akan dikirim, kemudian type POST anda sudah tahu maknanya, dataType HTML kita lewat saja, dan yang terakhir adalah data:($this).serialize() artinya kirimkan data yang datanya itu diambil dari input-input yang ada dalam form.
sedangkan baris selanjutnya penulis yakin Anda sudah paham maknanya,
beforeSend: function(){
$(‘#waiting’).text(‘Mohon Tunggu Sebentar’).fadeIn(‘slow’);
},
success: function(html){
$(‘#waiting’).fadeOut(‘slow’);
$(‘#result’).text(html).fadeIn(‘slow’).fadeOut(‘slow’).fadeIn(‘slow’);
}
});
untuk demo silahkan kunjungi ilmuwebsite labz http://labz.ilmuwebsite.com/ajaxjquery
dan download langsung filenya di sini http://labz.ilmuwebsite.com/ajaxjquery/ajaxjquery.zip
Oke, selamat mencoba artikel ajax dengan php dan jquery.

Read more »

WordPress Blank, Cara Mudah Membuat Template WordPress Sendiri

Bagaimana sih caranya membuat template wordpress sendiri? Pertanyaan-pertanyaan seperti ini seringkali di lantunkan oleh para pengunjung ilmuwebsite, termasuk beberapa kerabat dekat penulis yang sama-sama bergelut dalam dunia per-internet-an. Apa yang harus dilakukan pertama kali, apa yang harus dipersiapkan, menggunakan software apa jadi poin utama dalam pembahasan kali ini.

Memang betul untuk seorang pemula, pertama kali membuat template wordpress adalah hal yang sangat-sangat sulit sekali, terlebih lagi tidak memiliki basic php, css, dan html, atau third party seperti jquery. Ini menjadi sangat-sangat sulit.
Tapi tidak halnya dengan seseorang yang memiliki kemampuan dasar seperti yang saya sebutkan tadi, dengan mudah seseorang web designer bisa langsung membuat template website. Namun bukan berarti orang yang awam sekalipun tidak bisa membuatnya, yang ini jadi persoalan lain, selama masih memiliki kemampuan untuk berpikir, dan logika pikiran yang jalan, penulis jamin Anda bisa membuat template wordpress dengan sangat mudah.
Ada sebuah solusi jitu yang menurut penulis sangat-sangat membantu Anda dalam membuat template wordpress, WP Blank. WP Blank merupakan template standar yang didalamnya hanya berisi HTML pokok dan fungsi-fungsi php untuk membentuk template wordpress. Ketika Anda pertama kali melihat fungsi-fungsi php untuk wordpress penulis jamin Anda akan dengan mudah mengerti.
Template WP Blank bisa Anda lihat demonya di sini http://themeclubhouse.digwp.com/index.php?wptheme=BLANK%20Theme
Dan untuk mendownloadnya langsung silahkan klik http://themeclubhouse.digwp.com/themes/BLANK/BLANK-Theme-v1.zip
Oke, di pembahasan berikutnya penulis akan menjelaskan bagaimana cara membuat template cantik untuk wordpress menggunakan WP Blank ini. Oke?
Selamat bereksperimen.

Read more »

Membuat / Menampilkan Jam Analog di Blogger |

Untuk membuat anda kelihatan lebih cantik anda wajib tahu cara yang satu ini. Coba anda lihat disamping kanan blog ini! Disana ada dua buah Jam analog dengan zona waktu yang berbeda. Anda ingin menampilkannya di blog anda? Jika iya, silahkan anda ikuti langkah berikut ini!

klik http://www.worldtimeserver.com/clocks/wtsclock001.aspx
Kemudian silahkan anda konfigurasi jam dengan pilih warna, lokasi waktu dan lainnya.
Setelah konfiguras selesai, cari tulisan add to blogger! di halaman website tersebut
Kemudian klik yes send this to blogger
Kemudian akan muncul window baru lalu klik add widget

Save aja BERES DEH!

Read more »

Membuat Chat Box pada Blog/Website

Chat Box diciptakan untuk meramaikan blog seseorang dengan cara mengirimkan pesan. Kotak ini juga digunakan untuk media promosi blog seseorang. Jadi fungsinya sangatlah penting. Chat box yang sering digunakan adalah produksi Shoutmix.com, Oggix.com, dan juga Chatbox.com. Tapi di antara ketiga penyedia layanan kotak chat tersebut yang paling dominan untuk digunakan adalah produksi Shoutmix.com karena banyak keunggulan seperti penambahan smiley dan juga tidak repot-repot menuliskan URL dan nama saat mengunjungi blog yang punya kotak chat dari Shoutmix.com juga. Sekarang akan saya jelaskan cara untuk membuat Chatbox ini.

1. Masuklah pada Shoutmix.com
2. Kalo udah klik tombol Create Your Shoutbox Now. Atau yang bergambar begini:
   

   

3. Sesudah itu isi formulir yang disediakan
4. Pilih model yang kamu inginkan
5. Kotak Shoutbox kamu sudah selesai. Sekarang klik Go to my control panel now untuk menuju Control panel
6. Untuk mendapatkan kode tinggal klik Get Code pada sisi atas kanan
7. Copy kode tersebut dan letakkan di blog lamu

Kotak Shoutbox kamu sudah jadi. Sekarang memasangnya adalah dengan cara:

1. Login ke Blogger
2. Pada Dashboard, pilih Tata Letak atau Template
3. Pada menu Page Elements, klik Add Gadget
4. Pilih HTML Javascript kemudian paste kode yang kamu dapatkan tadi di kotak konten
5. Simpan

Sekarang Widget Chat kamu telah siap untuk digunakan.

Read more »

Aplikasi Web

Aplikasi web merupakan aplikasi yang dibuat minimal dengan menggunakan HTML. Selain itu, aplikasi web masih bisa dibangun dengan menggunakan bahasa pemrograman maupun scripting yang lain seperti PHP, javascript, XML, CSS dan lain-lain. Namun, seperti yang telah dijelaskan sebelumnya, suatu aplikasi dapat dikatakan sebagai aplikasi web jika dibangung menggunakan HTML. Jadi, jika tidak terdapat HTML maka tidak bisa dinamakan sebagai aplikasi web.
Aplikasi web biasanya lebih sering digunakan dibandingkan dengan aplikasi desktop, mengingat untuk menjalankan sebuah aplikasi web tidak perlu dibutuhkan banyak perangkat. untuk menjalankan aplikasi web, minimal kita harus mempunyai komputer yang sudah terinstall browser dan terhubung dengan jaringan lokal maupun lokal. Dengan demikian kita sudah bisa menggunakan aplikasi web dengan catatan aplikasi web sudah terinstall pada server baik itu server lokal seperti local maupun hosting. Untuk penjelasan tentang localhost akan dijelaskan pada artikel selanjutnya.
Untuk membuat aplikasi web menurut saya bih mudah jika dibandingkan dengan membuat aplikasi desktop. Banyak sekali tools untuk membuat aplikasi web, baik itu yang gratis maupun yang berbayar, contohnya adalah dreamweaver dan bahkan notepad pun bisa digunakan untuk membuat aplikasi web. Selain itu, banyak juga layanan untuk membuat aplikasi web dengan mudah, yang kita lakuka hanya drop and drag saja, contohnya adalah http://www.webs.com. dan http://www.yola.com/. Dengan menggunakan layanan tersebut, kita tidak dituntut untuk bisa atau menguasai bahasa pemrograman web maupun memahami tentang tata cara mempublish web kita ke internet. Padahal, jika kita membuat aplikasi web secara manual untuk mempublish aplikasi web yang telah kita buat ke internet minimal kita membutuhkan  domain dan hosting. Tutorial untuk mempublish aplikasi web ke internet akan dijelaskan pada artikel selanjutnya.

Selain layanan pembuat apliksi web yang telah disebutkan diatas, masih ada layanan gratis lain yang bisa digunakan untuk membuat aplikasi web diantaranya adalah joomla!, wordpress, dan blogger. Ketiga layanan tersebut disebut dengan CMS atau Content Management System. Untuk tutorial cara membuat aplikasi web menggunakan CMS gratis akan dijelaskan pada artikel selanjutnya

Read more »

Tutorial Dasar Belajar HTML

Pada artikel kali ini akan dibahas tentang tutorial dasar  HTML. HTML merupakan dasar dalam pembuatan web, karena seperti yang telah dijelaskan pada artikel sebelumnya syarat sebuah aplikasi dikatakan aplikasi web adalah minimal dibangun dengan menggunakan HTML. HTML merupakan singkatan dari HyperText Markup Language. HTML memiliki struktur tersendiri dalam penulisannya. Struktur HTML minimal terdiri dari HTML, Head, dan Body. Dalam penulisannya HTML menggunakan tag yang biasa ditulis dengan “<” dan “>”.

Untuk lebih memahami tentang penulisan HTML bisa dilihat pada contoh berikut ini:

view source

print?

01

<html>

02

03

<head>

04

05	<!-isi head nya ->

06

07

</head>

08

09

<body>

10

11	<!- isi dari body html ->

12

13

</body>

14

15

</html>

Dengan HTML kita bisa membuat website yang berisi table, form dan masih banyak lagi yang lainnya. berikut adalah beberapa penulisan dalam HTML:

1. Untuk memasukan image:

view source

print?

1	<img src="masukkan_url_image_disini" alt="" />

2. Untuk membuat paragraf:

view source

print?

1	Tuliskan Isi Paragraf disini

3. Untuk membuat link:

view source

print?

1	<a href="masukkan_url__disini">Link Yang Tampil</a>

Untuk lebih memahami HTML silakan download file dibawah ini. File berisi contoh-contoh penggunaan HTML dalam pembuatan web.

[DOWNLOAD]

Read more »