Nightwalker Team » bufferdie http://www.night-walker.org Official Site resmi Nightwalker Team , yang memberikan tutorial seputar web development , jaringan komputer , sistem operasi , disain grafis , programming dan artikel-artikel lainnya tentang free open source software Fri, 13 Jan 2012 23:04:05 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Membuat Tooltip dengan JQuery clueTip http://www.night-walker.org/membuat-tooltip-dengan-jquery-cluetip.nw http://www.night-walker.org/membuat-tooltip-dengan-jquery-cluetip.nw#comments Wed, 07 Dec 2011 12:07:59 +0000 bufferdie http://www.night-walker.org/?p=1360 Selamat malam, pagi, siang ataupun sore..! jumpa lagi bersama saya di Tutorial Web Development. Pada Tutorial Web Development kali ini penulis akan membahas bagaimana “Membuat Tooltip dengan JQuery clueTip“. Sebelum kita melangkah dan melompat lebih jauh, penulis akan menjelaskan terlebih dahulu apa itu Tooltip. Tooltip adalah sebuah kotak atau box yang tampil ketika cursor/penunjuk mouse diarahkan ke suatu elemen pada halaman website.

Tooltip berguna untuk memberikan penjelasan atau deskripsi pada sebuah link, gambar atau bagian-bagian website lainnya.
Untuk lebih memperjelas contoh tentang tooltip… Silahkan anda lihat pada gambar di bawah ini :

Untuk dapat membuat Tooltip seperti pada gambar diatas, kita membutuhkan beberapa file yang dapat anda download di https://github.com/kswedberg/jquery-cluetip/downloads. Atau anda dapat langsung mendownload file contoh selengkapnya dari artikel ini , yang akan penulis berikan pada bagian penutup di akhir tutorial ini.

Berikut ini file-file yang dibutuhkan :
-jquery.cluetip.js
-jquery.hoverIntent.js
-jquery.cluetip.css

Ok, clueTip sudah anda download, kita dapat langsung mencoba meng-impelementasikan clueTip pada sebuah halaman web seperti contoh dibawah ini.
Silahkan anda buat file HTML dan berikut ini listing code nya :

<html>
<head>
<title>Belajar bikin tooltip gitu!</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" /></script>
<script type="text/javascript" src="jquery.cluetip.js" /></script>
<script type="text/javascript" src="jquery.hoverIntent.js" /></script>
<script type="text/javascript">
$(document).ready(function() {
$('a.tips').cluetip();

$('#bufferdie').cluetip({
splitTitle: '|', // tanda | digunakan sebagai pemisah antara judul dan isi
showTitle: true // menampilkan heading clueTip
});
$('#gambar').cluetip({
splitTitle: '|',
showTitle: false // menyembunyikan heading clueTip
});
});
</script>
<link rel="stylesheet" href="jquery.cluetip.css" type="text/css" />
<style type="text/css" />
body { background: #ccc; margin: 2%; }
a { color: #000; text-decoration: none; } a:hover { text-decoration: overline; }
</style>
</head>
<body>
<!-- menampilkan content tooltip dari file isitultip.html: -->
<p><a href="http://bufferdie.co.cc" rel="isitultip.html">Ini dia tooltip nya!</a></p>

<!-- menggunakan title untuk menampilkan content tooltip -->
<p><a id="bufferdie" href="http://bufferdie.co.cc" title="informasi penting!|ketampanan bfd telah diakui oleh berbagai kalangan. Berbagai kalangan telah mengakui ketampanan bfd.">Bufferdie</a></p>

<!-- menampilkan tooltip pada sebuah gambar tanpa menampilkan heading-->
<p><img id="gambar" src="bfd.jpg" title="ini bukan foto bfd lho! percaya ga? kalo ngga yasudah... :-q~~ ketampanan bfd telah diakui oleh berbagai kalangan... ketampanan bfd telah diakui oleh berbagai kalangan." /></p>

</body>
</html>

Pada code :

<a href="http://bufferdie.co.cc" rel="isitultip.html">Ini dia tooltip nya!</a>

content atau isi dari tooltip diambil dari file isitultip.html. Sedangkan pada code berikutnya content diambil dari attribute title pada tag a dan img.

Bagaimana? mudah bukan? tertarik untuk mencobanya? silahkan dikembangkan sesuai dengan kreativitas anda, panduan lengkap kostumisasi nya dapat anda lihat di http://plugins.learningjquery.com/cluetip/#options
Akhir kata, penulis ucapkan selamat mencoba.. dan sampai bertemu kembali pada tutorial2 berikutnya… ^_*

DOWNLOAD

]]> http://www.night-walker.org/membuat-tooltip-dengan-jquery-cluetip.nw/feed 1 Facebook Like Button pada CMS WordPress http://www.night-walker.org/facebook-like-button-pada-cms-wordpress.nw http://www.night-walker.org/facebook-like-button-pada-cms-wordpress.nw#comments Tue, 29 Nov 2011 09:19:55 +0000 bufferdie http://www.night-walker.org/?p=1341 Bagi para pengrajin website, penulis yakin pasti sudah tidak asing lagi dengan social plugin yang satu ini. Yap…! dia lah “Facebook Like Button” :D ~~. Facebook Like Button merupakan social plugin berupa tombol yang memungkinkan penggunanya untuk dapat berbagi (sharing) konten dengan teman-teman / kenalan di Facebook. Ketika pengguna mengklik tombol ini di website anda, maka konten yang dibaca akan tampil dalam newsfeed teman beserta linknya yang akan mengarahkan kembali ke website anda.

Facebook like button dapat dipasang di berbagai jenis website termasuk pada website yang menggunakan cms wordpress. Pada cms ini Facebook like button dapat dipasang secara otomatis dengan plugins wordpress atau dengan cara menambahkan script ke themes anda secara manual. Nah, pada tutorial kali ini penulis akan menjelaskan cara manual nya.
Dengan cara manual, kita dapat lebih mengerti langkah2nya sehingga kita dapat menerapkannya pula pada website selain cms wordpress.

berikut ini langkah-langkah nya :

edit file single.php pada themes wp yang anda gunakan, lalu tambahkan code berikut ini :

 <div id="fb-root"></div>
 <script>(function(d, s, id) {
 var js, fjs = d.getElementsByTagName(s)[0];
 if (d.getElementById(id)) {return;}
 js = d.createElement(s); js.id = id;
 js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
 fjs.parentNode.insertBefore(js, fjs);
 }(document, 'script', 'facebook-jssdk'));</script>

kemudian edit file header.php dan ubah tag <html> yang ada disana menjadi :

 <html xmlns:fb="http://ogp.me/ns/fb#">

Terakhir, tambahkan code berikut ini pada file single.php agar facebook like button tampil pada setiap posting artikel :

 <fb:like href="<?php get_permalink($post->ID) ?>" send="true" width="450" show_faces="true"></fb:like>

code diatas biasanya diletakkan sebelum code <?php comments_template(); ?>

Yups.. demikianlah tutorial singkat “memasang facebook like button pada cms wordpress” dari saya yang ganteng ini :-P ~~, semoga bermanfaat buat anda yang sedang membangun sebuah website dan ingin menambahkan facebook like button ke dalam websitenya. Akhir kata, penulis ucapkan selamat mencoba.. dan sampai bertemu kembali pada tutorial2 berikutnya… :D ~~

]]> http://www.night-walker.org/facebook-like-button-pada-cms-wordpress.nw/feed 1 Convert file Flv menjadi file Mp3 di Linux http://www.night-walker.org/convert-file-flv-menjadi-file-mp3-di-linux.nw http://www.night-walker.org/convert-file-flv-menjadi-file-mp3-di-linux.nw#comments Tue, 15 Nov 2011 09:46:13 +0000 bufferdie http://www.night-walker.org/?p=1329

Salam jumpa sodara! telah lama saya tidak hadir disini dikarenakan jadwal syuting & pemotretan yang padat :D . Pada artikel kali ini penulis akan berbagi sebuah tutorial tentang “bagaimana mengconvert file flv menjadi file mp3″. Mungkin anda sudah tau bagaimana cara melakukan convert video pada sistem operasi windo*s dengan begitu banyak nya aplikasi gratis ataupun bajakan yang bertebaran di dunia internet. Mungkin ada pengguna linux yang bertanya2 dalam hati, “gimana yah kalo di linux?” :D

Hingga hari ini, penulis masih banyak menemukan pengguna linux yang di pusingkan karena hal ini. Ada yang gara2 hal seperti ini membuatnya harus “menduakan” linux dengan sistem operasi windo*s. Padahal terdapat solusi yang lebih jitu, mudah, efisien, dan praktis untuk menyelesaikan masalah ini :D .
Pada artikel ini penulis menggunakan distro ubuntu 10.04, untuk distro lainnya insyaALLAH akan penulis bahas pada artikel2 berikutnya atau silahkan bertanya pada form komentar di bawah :) .

Ok, langsung saja kita mulai langkah2nya. Untuk dapat mengconvert file flv menjadi mp3, kita membutuhkan sebuah tools bernama “ffmpeg”.
Silahkan buka terminal dan login root untuk menginstall ffmpeg pada mesin anda, lalu ketik perintah berikut ini :

root@bufferdie:~# apt-get install ffmpeg

Lalu anda dapat langsung mencoba untuk mengconvert video flv hasil download dari youtube misalnya, dengan cara mengetikan perintah seperti di bawah ini :

bfd@bufferdie:~$ ffmpeg -i cryin.flv x.mp3

jika pada output terminal anda terdapat tulisan “Unsupported codec for output stream #0.0“, silahkan install “libavcodec-unstripped-52″ dengan mengetikan perintah seperti di bawah ini (login root terlebih dahulu) :

root@bufferdie:~# apt-get install libavcodec-unstripped-52

jika sudah, silahkan coba convert video anda lagi. Jika berhasil, maka output di terminal akan terlihat sperti ini :

bfd@bufferdie:~$ ffmpeg -i cryin.flv x.mp3
FFmpeg version SVN-r0.5.1-4:0.5.1-1ubuntu1.2, Copyright (c) 2000-2009 Fabrice Bellard, et al.
configuration: –extra-version=4:0.5.1-1ubuntu1.2 –prefix=/usr –enable-avfilter –enable-avfilter-lavf –enable-vdpau –enable-bzlib –enable-libgsm –enable-libschroedinger –enable-libspeex –enable-libtheora –enable-libvorbis –enable-pthreads –enable-zlib –disable-stripping –disable-vhook –enable-runtime-cpudetect –enable-gpl –enable-postproc –enable-swscale –enable-x11grab –enable-libdc1394 –enable-shared –disable-static
libavutil     49.15. 0 / 49.15. 0
libavcodec    52.20. 1 / 52.20. 1
libavformat   52.31. 0 / 52.31. 0
libavdevice   52. 1. 0 / 52. 1. 0
libavfilter    0. 4. 0 /  0. 4. 0
libswscale     0. 7. 1 /  0. 7. 1
libpostproc   51. 2. 0 / 51. 2. 0
built on Sep 16 2011 17:04:18, gcc: 4.4.3

Seems stream 0 codec frame rate differs from container frame rate: 47.95 (5994/125) -> 24.00 (24/1)
Input #0, flv, from ‘cryin.flv’:
Duration: 00:06:42.81, start: 0.000000, bitrate: 726 kb/s
Stream #0.0: Video: h264, yuv420p, 640×358 [PAR 1:1 DAR 320:179], 726 kb/s, 24 tbr, 1k tbn, 47.95 tbc
Stream #0.1: Audio: aac, 44100 Hz, stereo, s16
Output #0, mp3, to ‘x.mp3′:
Stream #0.0: Audio: libmp3lame, 44100 Hz, stereo, s16, 64 kb/s
Stream mapping:
Stream #0.1 -> #0.0
Press [q] to stop encoding
size=    3151kB time=403.38 bitrate=  64.0kbits/s
video:0kB audio:3151kB global headers:0kB muxing overhead 0.000992%

Dan silahkan anda coba putar file mp3 hasil convert anda tadi ..
bagaimana…? mudah bukan…?  ^_*

]]> http://www.night-walker.org/convert-file-flv-menjadi-file-mp3-di-linux.nw/feed 0 Split Multiple Console di Zenwalk Gnome 6.0 http://www.night-walker.org/split-multiple-console-di-zenwalk-gnome-6-0.nw http://www.night-walker.org/split-multiple-console-di-zenwalk-gnome-6-0.nw#comments Wed, 16 Jun 2010 17:28:09 +0000 bufferdie http://www.night-walker.org/?p=1103 Jika anda adalah seorang network administrator , sysadmin , software developer , web developer hingga seorang hacker yang biasa berhadapan dengan banyak terminal , mungkin agak terasa risih dengan banyak nya window terminal yang terbuka pada desktop anda ( kan jadi bingung kalo mu muter mp3 gara2 taskbar ny pnuh :lol: ) . Nah , disini penulis akan mencoba sharing tentang bagaimana agar beberapa console tersebut hanya tampil di 1 taskbar saja :) .

Untuk dapat menggabungkan beberapa terminal dalam satu taskbar tersebut , anda harus meng-installasikan sebuah aplikasi yang bernama “TERMINATOR” yang dapat anda unduh langsung di http://launchpad.net/terminator/trunk/0.93/+download/terminator-0.93.tar.gz .

Yang akan di bahas disini adalah cara meng-installasikan aplikasi “TERMINATOR” tersebut pada distribusi Linux Zenwalk 6.0 . Cara ini juga dapat di gunakan pada Zenwalk versi lain , Slackware , dan distro2 lain nya . Karena yang akan di jelaskan di sini adalah dengan mengompilasikan source code nya , bukan paket khusus untuk Zenwalk :) .

Oh ya , satu lagi .. untuk dapat menjalankan terminator ini dengan baik , di butuhkan juga modul python keybinder , silahkan unduh dulu jika belum terdapat pada system anda di : http://slackware.cs.utah.edu/pub/ubuntu/ubuntu/pool/universe/k/keybinder/keybinder_0.0.4.orig.tar.gz .

Langkah pertama , kita install dulu keybinder nya . Ekstrak file archive keybinder yang telah anda download tadi :

# tar -xzvf keybinder_0.0.4.orig.tar.gz

Lalu compile python keybinder nya :

# cd keybinder-0.0.4/
# ./configure –prefix=/usr/ –sysconfdir=/etc/ –localstatedir=/var/
# make && make install

Kalau sudah , barulah kita dapat meng-installasikan “TERMINATOR” nya , huehuehue .. :lol: .

ekstrak file archive terminator yang sudah d unduh tadi :

# tar -xzvf terminator-0.93.tar.gz

Baru deh kita install “TERMINATOR” nya :D :

# cd terminator-0.93
# ./setup.py install

Dan selesai lah sudah proses installai nya . Untuk mencoba nya anda dapat langsung mengetikan :

# terminator

Untuk menampilkan tab terminator pada taskbar gnome , anda tinggal klik kanan pada taskbar -> add to panel -> custom application launcher , dan ketikan Terminator pada name , /usr/bin/terminator pada command .

Ok , dengan demikian berakhir pula lah tutorial kali ini .. Akhir kata penulis ucapkan “Selamat Mencoba” , “Semoga Bermanfaat” dan “Sampai Jumpa” di tutorial2 berikut nya , xixixixixixi .. :-q~~

referensi :
- http://blog.ozzie.web.id/
- http://www.tenshu.net/terminator/

]]> http://www.night-walker.org/split-multiple-console-di-zenwalk-gnome-6-0.nw/feed 5 Fungsi Datepicker JQuery untuk Input Tanggal http://www.night-walker.org/fungsi-datepicker-jquery-untuk-input-tanggal.nw http://www.night-walker.org/fungsi-datepicker-jquery-untuk-input-tanggal.nw#comments Mon, 07 Jun 2010 19:44:34 +0000 bufferdie http://www.night-walker.org/?p=1037 Salam hangat dan salam jumpa sodara2 skalian para pengunjung setia Nightwalker Team :-q~~ . Pada artikel kali ini , penulis akan mencoba sedikit berbagi tentang cara penggunakan function datepicker pada JQuery untuk input text yang data nya menggunakan format tanggal :) . Tentu ada sering menemukan input data yang berupa tanggal , misalnya pada sebuah formulir pendaftaran online yang terdapat input tanggal lahir , seperti di situs2 jejaring sosial (ex: facebook.com) .

Pada sekian banyak formulir pendaftaran di website yang penulis kunjungi , kebanyakan masih menggunakan input select option yang kemudian pada tanggal nya di lakukan perulangan dengan php seperti contoh gambar di bawah ini :

Nah , pada tutorial kali ini yang akan di bahas adalah bagaimana membuat input tanggal tersebut menjadi lebih menarik dan interaktif yaitu dengan menggunakan fungsi datepicker jquery seperti contoh gambar di bawah ini :

Jadi , ketika user atau pengunjung meng-klik pada bagian input text yang akan di gunakan sebagai input data tanggal , akan langsung muncul sebuah kotak dialog yang berisikan kalender . Dan apabila di klik pada salah satu tanggal pada kotak dialog kalender tersebut, akan masuk ke dalam input text yang digunakan untuk data tanggal .

Untuk dapat membuat input tanggal dengan fungsi datepicker jquery tersebut , anda tentu harus memiliki library jquery nya terlebih dahulu . Jika belum punya , silahkan anda mendownload nya di website resmi mereka yang ada di http://www.jquery.com , atau anda dapat langsung mendownload file contoh slengkapnya dari artikel ini , yang akan penulis berikan pada bagian penutup di akhir artikel ini  .

Sebagai contoh silakan anda buat sebuah file bernama daftar.html , dan berikut ini listing code nya :

<html>
<head> <title> nightwalker team | datepicker jquery </title>
<link type=”text/css” href=”css/custom-theme/jquery-ui-1.7.2.custom.css” rel=”stylesheet” />
<script type=”text/javascript” src=”js/jquery-1.3.2.min.js”></script>
<script type=”text/javascript” src=”js/jquery-ui-1.7.2.custom.min.js”></script>
<script type=”text/javascript”>
$(function(){

// bufferdie love m…
$(‘#tanggal_lahir’).datepicker();

});
</script>
<style> body { font-size: 12px; }  </style> </head>
<body> <div style=”text-align: center;”> <br> <h1> Registration </h1> <br>
<form method=”post” action=”">
Nama  :<input type=”text” name=”nama” id=”nama”> <br>
Email :<input type=”text” name=”email” id=”email”> <br>
tanggal lahir : <input type=”text name=”tanggal_lahir” id=”tanggal_lahir”> <br>
password : <input type=”password” name=”paswot”> <br>
<input type=”submit” name=”submit” value=”register”> <input type=”reset” value=”clear”>
</form>
</div></body></html>

Pada code yang di cetak tebal di atas di gunakan untuk mengambil fungsi datepicker jquery dari file jquery pada direktori js dan css . Dan kemudian di deklarasikan ke dalam id value “tanggal_lahir”  , lalu di panggil kembali dengan menggunakan input text yang juga ber id value “tanggal_lahir” .

Anda juga dapat merubah format tanggal dengan menambahkan option pada fungsi datepicker seperti contoh di bawah :

$(‘#tanggal_lahir’).datepicker({ dateFormat: ‘d MM, yy’ });

atau bisa juga dengan tambahan nama hari seperti contoh di bawah :

$(‘#tanggal_lahir’).datepicker({ dateFormat: ‘DD, d MM, yy’ });

Ok , mudah2an bermanfaat buat para web developer yang sedang mengerjakan aplikasi pendaftaran online ataupun para pngunjung yang sedang mendalami dunia web development .. :) Sampai Jumpa di artikel2 berikut nya :lol:

DOWNLOAD

]]> http://www.night-walker.org/fungsi-datepicker-jquery-untuk-input-tanggal.nw/feed 15 Membuat program input dan tampil data sederhana http://www.night-walker.org/membuat-program-input-tampil-data-php-mysql.nw http://www.night-walker.org/membuat-program-input-tampil-data-php-mysql.nw#comments Fri, 04 Jun 2010 08:20:23 +0000 bufferdie http://www.night-walker.org/?p=1023 Pada tutorial PHP & Mysql kali ini , penulis akan mencoba membahas pembuatan aplikasi input dan tampil data sederhana . Tutorial ini di tujukan bagi para pengunjung yang sedang mempelajari dasar2 pembuatan aplikasi berbasis web . Dan bercita2 untuk menjadi seorang web developer handal yang dapat di banggakan oleh bangsa , negara , agama , propinsi , kota , kecamatan , kelurahan dst di masa depan hihihihi .. :lol: .

Dalam contoh kali ini , penulis membuat 3 buah file yang bernama depan.php , simpen.php , dan nongol.php . Namun sebelumnya anda harus membuat sebuah database bserta table nya terlebih dahulu :

CREATE DATABASE latihan_nw;
USE latihan_nw;
CREATE TABLE ‘latihan_nw’.'bukualamat’ (
‘id’ INT( 3 ) NOT NULL AUTO_INCREMENT PRIMARY KEY ,
‘nama’ VARCHAR( 40 ) NOT NULL ,
‘email’ VARCHAR( 40 ) NOT NULL ,
‘url_facebook’ VARCHAR( 80 ) NOT NULL ,
‘url_twitter’ VARCHAR( 80 ) NOT NULL ,
‘hp’ INT( 15 ) NOT NULL ,
‘alamat’ VARCHAR( 80 ) NOT NULL
) ENGINE = MYISAM ;

Berikut ini listing code nya :

/* ~~oO0 depan.php 0Oo~~ */
<html>
<head>
<title>
latihan membuat aplikasi input & tampil data sederhana
</title>
</head>
<body><br><br><div align=”center”><h1>input data</h1>
<form method=”post” action=”simpen.php”>
Nama : <input type=”text” name=”nama” size=”30″> <br>
Email : <input type=”text” name=”email” size=”30″> <br>
Url Facebook : <input type=”text” name=”fb” size=”30″> <br>
Url Twitter : <input type=”text” name=”twit” size=”30″> <br>
No. Hp : <input type=”text” name=”hp” size=”30″> <br>
Alamat : <input type=”text” name=”alamat” size=”30″> <br>
<input type=”submit” value=”simpan” name=”simpan”> &nbsp;
<input type=”reset” value=”batal” name=”batal”><br><br><a href=”nongol.php”>Lihat Data</a> </div>
</body>
</html>

/* ~~oO0 simpen.php 0Oo~~ */
<?php
$xnama = $_POST['nama'];
$xemail = $_POST['email'];
$xfb = $_POST['fb'];
$xtw = $_POST['twit'];
$xhp = $_POST['hp'];
$xaddr = $_POST['alamat'];

$konek = mysql_connect(“localhost”, “root”, “password”)
or die (“koneksi gagal”.mysql_error());
$pildb = mysql_select_db(“latihan_nw”)
or die (“gabisa buka db”.mysql_error());

$perintah = “INSERT INTO bukualamat (id,nama,email,url_facebook,url_twitter,hp,alamat)
VALUES (”,’$xnama’,'$xemail’,'$xfb’,'$xtw’,'$xhp’,'$xaddr’)”;

mysql_query($perintah, $konek) or die (“data gagal masuk”.mysql_error());

echo “<script> alert(‘data berhasil disimpan’) </script>”;
include “depan.php”;
?>

/* ~~oO0 nongol.php 0Oo~~ */
<html>
<head>
<title>latihan membuat aplikasi input & tampil data sederhana </title>
</head>
<body><div align=”center”><h1>Tampil Data</h1>
<div style=”width: 70%; text-align: left;”>
<?php
$konek = mysql_connect(“localhost”, “root”, “password”)
or die (“koneksi gagal”.mysql_error());
$pildb = mysql_select_db(“latihan_nw”)
or die (“gabisa buka db”.mysql_error());

$perintah = “SELECT * FROM bukualamat ORDER BY id”;
$kueri = mysql_query($perintah, $konek) or die (“gabisa buka db”.mysql_error());

while($hasil=mysql_fetch_array($kueri)) {
$hasil++;
echo “Nama : &nbsp;&nbsp; <b>$hasil[nama]</b> <br>”;
echo “Email : &nbsp;&nbsp; <b>$hasil[email]</b> <br>”;
echo “Url Facebook : &nbsp;&nbsp; <a href=$hasil[url_facebook]><b>$hasil[url_facebook]</b></a> <br>”;
echo “Url Twitter : &nbsp;&nbsp;  <a href=$hasil[url_twitter]><b>$hasil[url_twitter]</b></a> <br>”;
echo “No.Ho : &nbsp;&nbsp; <b>$hasil[hp]</b> <br>”;
echo “Alamat : &nbsp;&nbsp; <b>$hasil[alamat]</b> <br><br><hr>”;
}
?><br><br>
<a href=”depan.php”>Kembali Ke Halaman input</a>
</div></div>
</body>
</html>

Yups , selesailah sudah artikel kali ini , Jika ada yang ingin di tanyakan , jangan ragu untuk bertanya pada form komentar di bawah :D . Bagi yang ingin mendownload langsung source code lengkap beserta database nya , anda dapat meng-klik link berikut ini :

DOWNLOAD SOURCE CODE

]]> http://www.night-walker.org/membuat-program-input-tampil-data-php-mysql.nw/feed 9 Membuat Tab Widget dengan JQuery http://www.night-walker.org/membuat-tab-widget-dengan-jquery.nw http://www.night-walker.org/membuat-tab-widget-dengan-jquery.nw#comments Thu, 06 May 2010 19:22:15 +0000 bufferdie http://www.night-walker.org/?p=967 Selamat malam sodara-sodara sekalian para pengunjung  nightwalker team di manapun anda berada ! huehuehue :D ~~ .  Jika anda sering mengunjungi website2 portal seperti yahoo.com , facebook.com atau website2 portal lokal seperti metrotvnews.com , detik.com , indowebster.com anda tentu melihat tab2 menu menarik pada halaman yg ada di website2 tersebut .

Menu2 yang penulis maksud kan disini adalah menu2 yang ketika tab tersebut di klik dia tidak berpindah halaman ataupun meload seluruh halaman , melainkan hanya berpindah dari bagian content satu ke content yang lain nya pada halaman yang sama . (bingung ? minum dong obat anti bingung ! :-q~~)
Untuk lebih jelasnya , anda dapat melihat contoh2 tabs nya di bawah ini :

Tabs ini salah satu fungsi nya adalah menghemat ruang pada sebuah halaman website , sehingga membuat sebuah halaman website terkesan lebih rapih , dan scrollny tidak memanjang kebawah . Anda tentu melihat bagaimana website2 raksasa seperti yahoo , detik , indowebster , Nightwalker team(<-++ raksasa ga ya ? :P ) dll pada halaman home nya menyediakan banyak sekali cuplikan2 berita , video , ataupun gambar .

Bayangkan jika kesemuanya itu di tampilkan tanpa menggunakan tab2 seperti yang kita bahas ini , scroll ny di jamin puanjang buaaaanget dahh , huehuehe .. :D ~~ . Dan tentunya membuat pengunjung merasa malas , letih , resah , gundah , dan enggan untuk melihat konten yang disajikan xixixixi :D ~~ .

Ok , kita langsung saja pada bagian intinya . Untuk dapat membuat tab menu ini , kita memerlukan library jquery yang dapat anda download langsung dari website resminya yang ada di http://jqueryui.com/download .

Jika sudah barulah kita dapat mencoba mempraktekan nya . Untuk cara pembuatan nya , anda dapat memasukan script jquery yg telah anda download tadi kedalam sebuah halaman web yang anda ingin berikan tab jquery ini . Kemudian ketik value id yang anda inginkan bserta fungsi tabs jquery nya . Setelah itu anda tinggal membuat tag div pada bagian body dengan value id yang sama .
Berikut ini contoh tab sederhana yg penulis buat :

<html>
<head>
<script src=”jquery-1.3.2.min.js”></script>
<script src=”jquery-ui-1.7.3.custom.min.js”></script>
<link rel=”stylesheet” href=”jquery-ui-1.7.3.custom.css”/>
<script>
$(function(){
$(‘#bufferdie’).tabs();
});
</script>
<style>
body { font: 11px  Geneva, Verdana, sans-serif;
line-height: 16px; }
#rapihin {
width: 600px;
margin: auto;
}
</style>
</head>
<body>
<div id=”rapihin”>
<div id=”bufferdie”>
<ul>
<li><a href=”#bufferdie-1″>Wall</a></li>
<li><a href=”#bufferdie-2″>Info</a></li>
<li><a href=”#bufferdie-3″>Photos</a></li>
<li><a href=”#bufferdie-4″>Boxes</a></li>
</ul>
<div id=”bufferdie-1″>Konten 1 ny disini …………</div>
<div id=”bufferdie-2″>Konten 2 ny disini …………</div>
<div id=”bufferdie-3″>Konten 3 ny disini …………</div>
<div id=”bufferdie-4″>Konten 4 ny disini …………</div>
</div>
</div>
</body>
</html>

Contoh diatas merupakan contoh sederhana tentang penggunaan jquery tabs , silahkan anda kembangkan lagi .
Untuk anda yang ingin mempelajari nya lebih dalam , anda dapat menuju ke website resmi jquery nya di http://www.jquery.com .
Untuk melihat demo dari contoh sederhana di atas anda dapat menuju ke link berikut ini : DEMO
Download script lengkapnya pada link berikut ini : DOWNLOAD

Sebagai tambahan , JQuery tabs plugin ini menggunakan JQuery UI CSS framework untuk pengaturan layout dan tampilan nya . Sesuai dengan dokumentasi JQuery tabs plugin dari website resmi nya , penulis me-rekomendasikan penggunaan ThemeRoller tool untuk memudahkan anda dalam membuat tampilan dan pengaturan layout nya yang cocok dan sesuai dengan selera anda .

Namun , bagi anda yang ingin mengkostumisasi CSS nya secara manual  anda dapat mengedit file stylesheet yang terdapat pada file download diatas . Untuk dasar class2 CSS yang dapat anda kostumisasi disana diantara nya adalah : .ui-widget-header , .ui-tabs , .ui-tabs .ui-tabs-nav , .ui-tabs .ui-tabs-panel , dll (silahkan anda lihat baris di bawah komentar /* Overlays */)

gimana gimana gimana ? tertarik untuk memasang nya di blog / website anda ? huehuehue .. :lol:
mungkin sgitu dulu aja artikel yang penulis berikan pada kesempatan kali ini , akhir kata :

~Sampai jumpa pada artikel2 berikutnya ! xixixixixi .. :D ~~

]]> http://www.night-walker.org/membuat-tab-widget-dengan-jquery.nw/feed 10 Document Overlay dengan Lightbox Gone Wild http://www.night-walker.org/document-overlay-dengan-lightbox-gone-wild.nw http://www.night-walker.org/document-overlay-dengan-lightbox-gone-wild.nw#comments Tue, 04 May 2010 14:51:54 +0000 bufferdie http://www.night-walker.org/?p=946 Bagi anda yang telah lama berkecimpung di dunia web development , mungkin anda sudah tidak asing lagi dengan apa yang di sebut Lightbox :) . Namun untuk anda yang belum mengenal nya (knalan lah! :lol: ) , jangan khawatir ! resah ! ataupun gelisah ! huehuehue .. :D ~~ , karena penulis akan mencoba share sedikit untuk menjelaskan definisi singkat dari script ini .

Lightbox JS merupakan sebuah script yang digunakan untuk menampilkan sebuah gambar secara overlay pada sebuah halaman web , serta dapat bekerja pada hampir semua jenis browser modern . kira2 seperti itulah apa yang di sebut Lightbox :D ~~ .

Yang akan penulis fokuskan pada artikel kali ini , bukanlah tentang cara menggunakan Lightbox untuk meng-overlay sebuah image/gambar .
Pada artikel ini yang akan di bahas adalah tentang bagaimana agar Lightbox tidak hanya menampilkan image saja (misal : sebuah halaman website/blog , gambar , video , music dll) .

Ok , dari pada kelamaan .. ada baiknya kita langsung saja mencoba script ini . Untuk menggunakan script ini cara nya cukup mudah .
Anda tinggal memasukan script ini beserta file css nya ke dalam halaman web atau blog anda . Lalu buat sebuah link dengan tag html yang mengarah pada halaman web atau blog yang akan anda tampilkan secara overlay dengan attribut class dan di beri value lbOn . Berikut ini contoh penggunaan nya :

<html>
<head>
<title>Nightwalker Team | Contoh Lightbox Gone Wild</title>
<meta name=”robots” content=”index, follow” />
<meta name=”keywords” content=”lightbox , page overlay , document overlay , document effect , buffedie”>

<!– CSS ny disini –!>
<link rel=”stylesheet” href=”lightbox.css” media=”screen,projection” type=”text/css” />

<!– Script ny disini –>
<script type=”text/javascript” src=”prototype.js”></script>
<script type=”text/javascript” src=”lightbox.js”></script>
</head>

<body link=”#FF0000″ bgcolor=”#008B92″>
<a href=”ttg.html” class=”lbOn”>About Us</a> <br>
<a href=”ktk.html” class=”lbOn”>Contact Us</a><br>
<a href=”iframe.html” class=”lbOn”>Google Search</a><br>
<a href=”image.html” class=”lbOn”>Nightwalker Billiard</a><br>
<a href=”video.html” class=”lbOn”>Nightwalker Movie</a>
</body>

</html>

Untuk membuat tombol Close pada halaman yang di overlay kan , anda dapat menggunakan sintax seperti contoh dibawah ini :

<a href=”#” rel=”deactivate”>Close [~X~]</a>

Bagi anda yang ingin mendalami Lightbox , anda dapat mempelajari nya langsung dari website resmi Lightbox , yang beralamat di :

http://www.huddletogether.com/projects/lightbox/

Untuk Project Lightbox Gone Wild , anda juga dapat mengunjungi website resmi nya yang beralamat di :

http://particletree.com/features/lightbox-gone-wild/

Untuk melihat demo nya anda dapat menuju link berikut ini : DEMO LIGHTBOX
Download script lengkapnya pada link berikut ini : DOWNLOAD

Akhir kata , /me ucapkan selamat mencoba dan salam super ! xixixixixi .. :lol:

]]> http://www.night-walker.org/document-overlay-dengan-lightbox-gone-wild.nw/feed 5 Sistem Informasi Sekolah dengan SISFOKOL http://www.night-walker.org/sistem-informasi-sekolah-dengan-sisfokol.nw http://www.night-walker.org/sistem-informasi-sekolah-dengan-sisfokol.nw#comments Sat, 24 Apr 2010 23:48:16 +0000 bufferdie http://www.night-walker.org/?p=896 Salam jumpa sodara2 sekalian para pengunjung Nightwalker Team :D ~~ .  Setelah sekian abad lama nya beberapa hari kita tidak berjumpa dan bertegur sapa disini , akhirnya penulis kembali hadir disini untuk menuliskan sepatah dua patah kata , yang akan dipatah2kan lalu di gabungkan sedemikian rupa sehingga menjadi bberapa paragraf yang mudah2an menarik dan dapat bermanfaat bagi yang membaca ny .. :lol: .Pada kesempatan kali ini , penulis akan mencoba membahas tentang Sistem Informasi Sekolah dengan SISFOKOL . sebelum kita masuki tahapan installasi nya , penulis akan mencoba mengajak sodara2 sekalian untuk mengenal terlebih dahulu tentang apa itu SISFOKOL .

SISFOKOL adalah sistem informasi sekolah berbasis web, yang terdiri dari kebutuhan untuk sekolah SD, SLTP, SLTA, sampai dengan SMK , yang dikembangkan oleh Agus Muhajir (hajirodeon@yahoo.com, hajirodeon@gmail.com). Aplikasi ini  merupakan aplikasi Open Source dan ber-lisensi GNU/GPL . Sehingga kita dapat menggunakan , menyebarluaskan , memodifikasi , dll (baca: GNU/GPL) aplikasi ini secara cuma2 .. :) .

Aplikasi ini di buat dengan bahasa pemrograman PHP dan menggunakan database MYSQL . Sehingga untuk instalasi dan menjalankannya dibutuhkan sebuah paket Web Server seperti Lampp , Xampp , atau Appserv yang di dalam ny sudah terbundel Apache , PHP, MySQL Server dan PhpMyAdmin untuk meng-Import Database-nya. Karena aplikasi ini berbasis Web , jadi kita dapat meng-installasikan nya pada berbagai jenis Sistem Operasi .

Silahkan anda unduh SISFOKOL dari link berikut ini : http://tech.groups.yahoo.com/group/sisfokol/ . Jika sudah , anda dapat mencoba untuk meng-installasi kan ny pada web server anda . Berikut ini tahapan installasi nya :

1. letakan file arsip SISFOKOL yang telah anda download sebelum nya pada direktori root website anda , lalu ekstrak file tersebut .

2. buka browser anda , dan ketikan alamat path ke direktori tempat anda meletakan SISFOKOL , misal : http://localhost/school/sisfokol

3. Setelah anda buka url tersebut , maka anda akan di arahkan ke file installer dari SISFOKOL . Isi form yang ada disana seperti contoh di bawah ini :

4. Setelah itu proses import database akan berjalan , jika berhasil maka anda akan mendapatkan pesan : Import Database Telah Berhasil…

5. Lalu pilih “[Klik Disini untuk Konfigurasi Lainnya...] “  , lalu anda akan mendapatkan tampilan kira2 seperti di bawah ini , isilah form di sana sesuai informasi sekolah anda dan klik “Simpan” .

6. Hapus direktori install dan direktori db

7. untuk mencoba login kedalam sistem , silahkan buka browser anda dan ketik kembali path direktori SISFOKOL anda , misal : http://localhost/school/sisfokol

Dan berakhir lah sudah tahapan installasi nya , berikut ini default user dan password dari SISFOKOL yang dapat anda gunakan untuk login (tentu dapat anda ganti nantinya) .

administrator
username  admin
password  admin

guru
username  120001
password  120001

siswa
username  810001
password  810001

Wali Kelas
username  120001
password  120001

Tata Usaha
username  1200017
password  1200017

Kepala Sekolah
username  1200010
password  1200010

Yups , mungkin sgitu dulu aja artikel yang penulis berikan pada kesempatan kali ini .
/me mu lanjut lagi ni nyicipin VOIP sama SKYPE , bareng omz Wadeblack ( euy , demon guitar mulu lue ni ! ngobrol geh ! :P ) n omz Elf_ ( koq tidur omz ? capek yak ? :lol: ) , huehuehue .. :D ~~

]]> http://www.night-walker.org/sistem-informasi-sekolah-dengan-sisfokol.nw/feed 7 PHP form dan user input http://www.night-walker.org/php-form-dan-user-input.nw http://www.night-walker.org/php-form-dan-user-input.nw#comments Fri, 09 Apr 2010 20:09:44 +0000 bufferdie http://www.night-walker.org/?p=794 Selamat malam .. :) pada kesempatan kali ini , penulis akan share mengenai dasar2 pembuatan form dan input user pada pemrograman PHP . Jika anda ingin membangun sebuah aplikasi website , baik itu aplikasi sederhana ataupun aplikasi yang kompleks , mau tidak mau , suka tidak suka , anda akan selalu membutuhkan jasa seseorang yang bernama FORM :D ~~ .

FORM pada PHP merupakan salah satu proses yang begitu penting pada saat anda membangun sebuah aplikasi web dinamis . Ok , dari pada anda penasaran dan penuh kebimbangan :lol: , ada baiknya kalo kita langsung saja pada contoh pembuatan FORM pada PHP :) . Oh ia , untuk contoh yang pertama penulis akan menggunakan POST pada method ny . Berikut nya pada contoh yang kedua akan menggunakan GET :) .

buat sebuah file html biasa , dalem contoh ini penulis memberinya nama slepet.html . Dan ketikan contoh code berikut ini :

<html>
<body>
<form action=”wadeblack.php” method=”post”>
Nama: <input type=”text” name=”45sekope” />
Umur: <input type=”text” name=”uzuma” />
<input type=”submit” name=”submit” value=”hajar!” />
</form>
</body>
</html>

Ketika seorang user mengisi nama dan umur pada form yang telah kita buat tadi , maka saat tombol di klik , maka anda akan berpindah ke halaman wadeblack.php . Berikut ini contoh code dari file wadeblack.php :

<html>
<body>
Selamet dateng omz <?php echo $_POST["45sekope"]; ?>!<br />
Umur sampean it baru <?php echo $_POST["uzuma"]; ?> tahun .
</body>
</html>

Dan berikut ini tampilan dari file wadeblack.php yang menampilkan input dari komponen form slepet.html yang telah kita buat tadi .

OK , itulah contoh penggunaan Form pada PHP dengan method Post .
Nah , berikut nya penulis akan memberikan contoh penggunaan Form dengan method Get . Untuk mempersingkat waktu , ada baiknya kita menggunakan file yang telah kita buat sebelum nya , dan edit file tersebut dengan text editor anda :

edit file slepet.html menjadi seperti berikut ini :

<html>
<body>
<form action=”wadeblack.php” method=”get”>
Nama: <input type=”text” name=”45sekope” />
Umur: <input type=”text” name=”uzuma” />
<input type=”submit” name=”submit” value=”hajar!” />
</form>
</body>
</html>

dan edit file wadeblack.php menjadi seperti ini :

<html>
<body>
Selamet dateng omz <?php echo $_GET["45sekope"]; ?>!<br />
Umur sampean it baru <?php echo $_GET["uzuma"]; ?> tahun .
</body>
</html>

Dan berikut ini hasil yang di tampilkan browser :

Perhatikan url pada browser , terlihat url yang bgitu panjang , ini karena variable yang dhasilkan dari form inputan ditampilkan lagi beserta isi2nya . Ini bisa menjadi fatal jika anda membuat form yang merupakan data sensitif , password misal nya . kelemahan lain dari Method Get adalah gabisa di gunakan untuk variable2 besar , karena nilai ny ga boleh di atas 100 karakter . Sedangkan jika menggunakan method post , isi variable tidak akan tampil di address bar, untuk mengambilnya cukup dengan menggunakan variable $_POST["variable"].

Ok , seperti itulah kira2 dasar penggunaan FORM pada PHP , serta perbedaan antara Post dan Get . Jika ada yang ingin di tanyain seputar artikel ini , silahkan isi komen aj dimari .. :D ~~

]]> http://www.night-walker.org/php-form-dan-user-input.nw/feed 7