Video & Lirik - Pilihanku - Maliq & D Essentials

29 September 2010

 

Berjuta rasa rasa yang tak mampu diungkapkan kata-kata
Dengan beribu cara-cara kau selalu membuat ku bahagia
Kau adalah alasan dan jawaban atas semua pertanyaan
Yang benar-benar kuinginkan hanyalah kau untuk selalu di sini ada untukku
Maukah kau tuk menjadi pilihanku
Menjadi yang terakhir dalam hidupku
Maukah kau tuk menjadi yang pertama
Yang selalu ada di saat pagi ku membuka mata

Oh..
Ijinkan aku memilikimu, mengasihimu, menjagamu, menyayangimu,
memberi cinta
memberi semua yang engkau inginkan
selama aku mampu aku akan berusaha
mewujudkan semua impian dan harapan
tuk menjadi kenyataan

Maukah kau tuk menjadi pilihanku
Menjadi yang terakhir dalam hidupku
Maukah kau tuk menjadi yang pertama
Yang slalu ada di saat pagi ku membuka mata

Jadilah yang terakhir
Tuk jadi yang pertama
Tuk jadi selamanya...

Maukah kau tuk menjadi pilihanku
Menjadi yang terakhir dalam hidupku
Maukah kau tuk menjadi yang pertama
Yang selalu ada di saat pagi ku

Maukah kau tuk menjadi pilihanku
Menjadi yang terakhir dalam hidupku
Maukah kau tuk menjadi yang pertama
Yang selalu ada di saat pagi ku membuka mata

Jadilah yang terakhir
Tuk jadi yang pertama
Tuk jadi selamanya....
READ MORE - Video & Lirik - Pilihanku - Maliq & D Essentials

Memasang Tombol Reply Pada Blogger

Bila dibandingkan blog yang menggunakan Blogger/Blogspot dengan yang menggunakan WordPress, salah satu kelebihan blog yang menggunakan WordPress adalah kemudahan berinteraksi antar sesama pengunjung yang berkomentar pada sebuah artikel, yaitu dengan menggunakan tombol Reply, untuk mengomentari atau membalas komentar yang disampaikan oleh pengunjung lainnya.

Sebenarnya blog yang menggunakan Blogger/Blogspot pun dapat juga menampilkan tombol reply tersebut, tentunya dengan penambahan kode tertentu.
Berikut langkah-langkahnya untuk memasang tombol reply pada blogger :
- Klik tab Design kemudian klik Edit HTML lalu klik opsi Expand Widget Templates kemudian carilah kode berikut ini :
<data:commentPostedByMsg/>
- Tambahkan kode berikut dibawah kode tersebut diatas :
<span><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=ID-BLOG-ANDA&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E%3A%20#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450&quot;); return false;' style='padding:0px 5px; border:1px solid #999;'>Reply</a></span>
- Ubahlah tulisan ID-BLOG-ANDA dengan nomer blog id anda. caranya adalah dengan melihatnya pada address bar :


Simpan perubahan dan hasilnya akan tampil seperti berikut :


Untuk mendapatkan tampilan yang lebih baik anda bisa mengedit kode diatas.
Sebagai catatan tampilan reply pada Blogger tidak seperti tampilan pada WordPress yang berbentuk Threaded Comment (komentar berjenjang). Tapi ini cukup untuk membuat kolom komentar menjadi lebih interaktif.
READ MORE - Memasang Tombol Reply Pada Blogger

Memasang Tombol Tweet, Facebook Share, Facebook Like di Blogger

28 September 2010

Saat ini situs-situs jejaring sosial terutama Facebook dan Twitter merupakan jenis situs online yang paling banyak diakses oleh pengguna internet di seluruh dunia. Salah satu layanan yang banyak digunakan adalah kemudahan bagi penggunanya untuk menyebarkan/membagikan/share artikel online yang ada di berbagai website/blog.

Bagi pemilik atau pengelola website/blog, tentunya hal tersebut menjadi salah satu peluang untuk memperbesar tingkat kunjungan ke situsnya melalui Facebook dan Twitter ini, dengan memberikan kemudahan bagi pengunjung untuk share artikel yang ada di blog, salah satunya adalah dengan memasang tombol share Facebook dan Twitter.

Pemasangan tombol ini menggunakan layanan dari LinksAlpha yang menyediakan tombol share yang menggabungkan tiga tombol share yaitu tweet, facebook share, dan facebook like.
Sebenarnya tombol yang bernama 1-Click Retweet/Share/Like yang disediakan oleh LinksAlpha ini bisa anda pasang dengan menggunakan kode yang diberikan oleh situs LinksAlpha tapi sayangnya kode tersebut disediakan hanya untuk halaman / url statis saja terkecuali anda menggunakan Wordpres atau TypePad maka anda hanya perlu menginstall pluginnya. Namun jangan khawatir, pengguna blogger juga dapat memanfaatkannya tentunya dengan sedikit melakukan perubahan.

Berikut langkahnya :
- Klik tab Design lalu klik Edit HTML centang pilihan Expand Widget Templates 
- Carilah kode berikut ini :
<data:post.body/>
- Tambahkan kode berikut ini dibawah kode tersebut diatas :
<iframe id='websites_iframe' expr:src='&quot;http://www.linksalpha.com/social?link=&quot; + data:post.url + &quot;&quot;' frameborder='0' height='25px' scrolling='no' width='320px'/>
Hasilnya akan tampil seperti gambar dibawah ini :

Selamat mencoba
READ MORE - Memasang Tombol Tweet, Facebook Share, Facebook Like di Blogger

Video & Lirik - Cerita Cinta Kita - Alyssa Soebandono







Bukannya aku tak cinta
Ku hanya tahu ini keliru
Bukannya aku tak mau
Sungguh mati aku suka kamu

Setengah gila aku menahan rasa
Yang ada di dalam dada
Jangan kau paksa diriku
Untuk melanggar janji cintaku

Ku ingin sungguh ku mau
Tapi ku hanya tak bisa denganmu
Aku sendiri tapi kau bersamanya
Kita tak mungkin berdua

[*]
Biarlah cerita cinta kita
Bersemi di dalam hati ini saja
Semoga kau bahagia
Aku juga pasti ‘kan bahagia

[**]
Biarlah cerita kita
Menjadi bunga mimpi-mimpi semata
Semoga kau bahagia
Ku berdoa untukmu selamanya

Back to [*][**]

Back to [*]
READ MORE - Video & Lirik - Cerita Cinta Kita - Alyssa Soebandono

Pengenalan Pemrograman Python

21 September 2010

Python merupakan bahasa pemrograman yang diciptakan oleh Guido van Rossum pada tahun 1989 di Amsterdam, Belanda. Bersifat open source sehingga bebas anda pakai tanpa harus membeli interpreternya dan dapat didownload secara gratis pada situsnya di http://www.python.org/ . Sebagai bahasa yang multiplatform, yang dapat berjalan didalam lingkungan sistem operasi seperti Windows, UNIX, Linux, dan Mac, Python memberikan kemudahan dalam menulis suatu program dan juga memberikan portabilitas yang tinggi.

Python banyak diminati karena kesederhanaannya. Didalam bahasa inti python sendiri hanya menyediakan sedikit tata bahasa dan kosakata sehingga mudah untuk diingat. Hal ini berbeda dengan bahasa seperti C, yang menawarkan berbagai alternatif pengkodean untuk melakukan tugas yang sama. Sebagai contoh untuk menangani masalah perulangan bahasa C menyediakan perintah for dan while sedangkan python hanya menyediakan perintah while. Namun bukan berarti perintah for tidak ada didalam python, hanya saja perintah ini digunakan untuk kepentingan lain, yaitu khusus untuk menangani list.

Python mendukung banyak pustaka yang tersimpan dalam modul-modul, diantaranya mendukung jaringan, antarmuka grafis, pencitraan, analisis dan komputasi numerik, hypertext(html, xml, dll), akses database, dll.
Selain sederhana, kode Python mudah untuk dibaca oleh siapa saja, baik oleh pemula maupun oleh mereka yang sudah terbiasa dengan dunia pemrograman. Hal ini berarti Python mudah untuk dipelajari.

Kemudahan untuk memperlajari bahasa pemrograman Python juga dikarenakan Python menggunakan interpreter sebagai penterjemah. Dengan menggunakan interpreter Python, pengguna dapat menguji suatu pernyataan dalam Python secara interaktif, tidak perlu menuliskan kode dalam bentuk program.

Python merupakan bahasa pemrograman berorientasi objek (OOP), oleh karena itu keistimewaan tentang pewarisan dan instansiasi yang ditawarkan pada bahasa pemrograman berorientasi objek juga dapat diwujudkan pada Python.

A. Menuliskan Perintah Secara Interaktif
Untuk menuliskan sebuah perintah Python secara interaktif, terlebih dahulu kita harus memanggil interpreternya dengan cara mengetikan python kemudian Enter pada prompt shell Linux atau dengan cara mengklik tombol Start -> All Programs -> Python 2.4 -> Python (command line) pada Windows.


Gambar berikut memperlihatkan keadaan setelah Python dipanggil pada Windows


Selain menggunakan interpreter berbentuk baris perintah Python juga menyediakan antarmuka pemakai grafis yang dinamakan IDLE (Integrated Development Environtment) yang dapat diakses dengan cara mengklik tombol Start -> All Programs -> Python 2.4 -> IDLE (Python GUI) pada Windows.


Apapun yang anda gunakan anda akan menemukan prompt >>> setelah anda memanggil interpreter Python. Prompt tersebut menyatakan bahwa interpreter Python siap menerima instruksi dari pemakai.
Contoh ketikanlah perintah berikut ini :
print "Python"
kemudian tekan tombol Enter. Anda akan menjumpai tulisan Python dibawah perintah yang anda ketik tadi.


Notasi "Python" menunjukan suatu string yang berisi tulisan Python. Pernyataan print "Python" berarti menampilkan string Python.

Contoh lain, ketikanlah perintah berikut :
a=5

a+7
 maka pada Python akan ditampilkan berikut ini :


Pada contoh diatas, a=5 merupakan pernyataan untuk memberikan nilai 5 ke variabel bernama a. Variable merupakan suatu wadah yang dapat digunakan untuk menyimpan nilai dan nilai didalamnya bisa dirubah sewaktu-waktu. Perintah a+7 menyatakan suatu instruksi untuk menampilkan penjumlahan antara isi variable a dengan nilai 7.

Selain contoh diatas, dengan menggunakan Python anda bisa menuliskan suatu instruksi yang lebih kompleks yang melibatkan beberapa baris, sebagai contoh perintah berikut :
if 3 < 4:
print "Benar"
Hasilnya adalah sebagai berikut :


B. Membuat Program
Menulis perintah secara interaktif berguna untuk menguji suatu perintah dengan mudah. Anda mengetikan suatu perintah dan langsung mendapatkan hasilnya. Namun adakalanya anda perlu menuliskan sekumpulan instruksi dalam suatu berkas.

Untuk membuat sebuah program dengan bahasa Python anda bisa menggunakan media notepad maupun IDLE dari Python.
Bila anda menggunakan IDLE Python dari IDLE Python klik menu File -> New Window.
Dari jendela baru inilah kita akan membuat sebuah program baru, ketikanlah skrip berikut ini :
print "Hello World.."
print "Selamat Belajar Python"

kemudian simpan dengan cara mengklik menu File -> Save As kemudian pilihlah lokasi tempat penyimpanan dan berilah nama file dengan nama awal.py dalam kasus ini saya menyimpan file pada folder C:\Python24.

Jika anda menuliskan skrip Python dilingkungan UNIX dan Linux anda perlu menyisipkan baris berikut pada awal skrip :
# ! /usr/local/bin/python
Baris tersebut berfungsi untuk memberitahukan kepada sistem operasi untuk mengeksekusi skrip dengan menggunakan interpreter Python yang terletak pada direktori /usr/local/bin. Jika program Python dikomputer anda tidak terletak pada direktori tersebut tentu saja anda harus menyesuaikannya. Untuk menemukan lokasi interpreter Python gunakan perintah berikut pada prompt shell UNIX/Linux :
Whereis python
Untuk menjalankan skrip Python pada lingkungan UNIX/Linux dengan cara mengetikan skrip berikut :
$ chmod +x namaskrip.py
$ namaskrip.py
Pada lingkungan Windows, anda bisa menjalankan skrip Python dengan cara berikut :
python namaskrip.py
atau
namaskrip.py
Khusus untuk skrip yang kedua (berwarna ungu) anda harus menuliskan perintah berikut pada prompt shell sebelum menjalankannya :
SET PATH=%PATH%;C:\Python24
Dilihat dari skrip diatas prompt shell menset variable DOS bernama PATH untuk merujuk kepada folder C:\Python24 bila anda menyimpan skrip pada folder lain ubahlah PATH agar merujuk kepada folder tersebut.
Dalam kasus saya, karena saya menyimpan file program pada folder C:\Python24 dengan nama file awal.py
maka skrip untuk menjalankannya adalah sebagai berikut :

SET PATH=%PATH%;C:\Python24
awal.py


Atau untuk lebih mudahnya, bila anda menggunakan IDLE Python untuk membuat program tersebut ada cara yang lebih mudah untuk menjalankan program yaitu dengan mengklk menu Run -> Run Module atau mengklik tombol F5.
Maka akan tampil seperti gambar dibawah ini :


READ MORE - Pengenalan Pemrograman Python

Memodifikasi Datepicker Dengan JQuery

Pada postingan saya sebelumnya saya menjelaskan bagaimana cara menambahkan datepicker dengan jquery pada sebuah website. Dalam postingan kali ini masih berhubungan dengan bagaimana menambahkan datepicker dengan jquery namun dengan tambahan yaitu modifikasi datepicker yang kita gunakan agar sesuai dengan keinginan.

Adapun disini saya akan membaginya kedalam beberapa contoh kasus, yaitu :
1. Datepicker dengan tampilan menggunakan bahasa indonesia
Untuk dapat menggunakan datepicker dengan menggunakan bahasa indonesia dibutuhkan sebuah library lagi yaitu ui.datepicker-id.js. darimana anda dapat mendapatkannya? jangan khawatir semua contoh yang ada disini saya sediakan filenya sehingga nanti anda dapat mendownloadnya.
Langkahnya sebagai berikut :
- tambahkan script berikut di antara <head> dan </head> script ini dapat anda tambahkan dibawah script pada artikel sebelumnya mengenai cara menambahkan datepicker dengan jquery :
<script type="text/javascript" src="../lib/ui.datepicker-id.js"></script>
lengkapnya scriptnya akan seperti dibawah ini :

  <link type="text/css" href="../themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="../lib/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="../lib/ui.core.js"></script>
  <script type="text/javascript" src="../lib/ui.datepicker.js"></script>
  <script type="text/javascript" src="../lib/ui.datepicker-id.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){
  $("#dtp").datepicker();
  });
  </script>
untuk pemanggilannya pun masih sama seperti pada posting saya sebelumnya mengenai cara menambahkan datepicker dengan jquery yaitu dengan menggunakan id="dtp" contoh :
Masukan Tanggal : <input id="dtp" type="text"> 
Hasil dari contoh diatas adalah sebagai berikut :

Bedakan dengan hasil sebelum kita memodifikasinya :

Terlihat perbedaan setelah dimodifikasi kini tampilan datepicker sudah menggunakan bahasa indonesia Mg=Minggu, Sn=Senin, dst.

2. Merubah format tanggal datepicker
Sebelum kita melakukan modifikasi format tanggal datepicker masih berbentuk "mm/dd/yyyy" contoh tanggal 21 September 2010 maka akan ditulis dengan bentuk "09/21/2010". Agar dapat dirubah formatnya sesuai dengan keinginan kita maka kita akan menggunakan sebuah fungsi dari datepicker dengan nama dateFormat.
Langkahnya adalah sebagai berikut :
- Pada postingan saya yang sebelumnya mengenai cara menambahkan datepicker dengan jquery anda tentunya akan menemukan script berikut :
  <script type="text/javascript">

  $(document).ready(function(){

  $("#dtp").datepicker();

  });

  </script>
Sebagaimana disebutkan diatas bahwa untuk merubah format dari datepicker kita akan menggunakan fungsi dari datepicker dengan nama dateFormat. Fungsi ini akan kita letakan pada script diatas sehingga nantinya script akan menjadi sebagai berikut :
<script type="text/javascript">
$(document).ready(function(){
$("#dtp").datepicker({
dateFormat: "dd MM yy"
});
});
</script>
Nah nantinya jika sudah ditambahkan fungsi tersebut diatas secara lengkap script akan menjadi sebagai berikut :
<link type="text/css" href="../themes/base/ui.all.css" rel="stylesheet" />

<script type="text/javascript" src="../lib/jquery-1.3.2.js"></script>

<script type="text/javascript" src="../lib/ui.core.js"></script>

<script type="text/javascript" src="../lib/ui.datepicker.js"></script>

<script type="text/javascript" src="../lib/ui.datepicker-id.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("#dtp").datepicker({

dateFormat: "dd MM yy"

});

});

</script>
Hasil dari contoh diatas adalah sebagai berikut :

3. Menampilkan pilihan bulan dan tahun
Seperti yang dapat anda lihat pada contoh-contoh diatas dan juga pada postingan saya sebelumnya mengenai cara menambahkan datepicker dengan jquery terlihat bahwa bulan dan tahun tidak dapat langsung dipilih pada bulan atau tahun tertentu. kita harus mengklik tombol panah yang ada hingga mendapatkan bulan dan tahun yang diinginkan. tentunya akan sangat merepotkan bila bulan dan tahun yang anda ingin pilih memiliki rentang yang cukup jauh dengan bulan dan tahun sekarang. Untuk mempermudahnya kita bisa memodifikasi datepicker dengan menampilkan combobox pilihan bulan dan tahun dengan menggunakan fungsi changeMonth dan changeYear.
Langkahnya adalah sebagai berikut :
- Pada contoh sebelumnya kita telah menambahkan sebuah fungsi yaitu dateFormat. Penempatan fungsi changeMonth dan changeYear tidak jauh berbeda dengan contoh sebelumnya jadi pada script berikut :
<script type="text/javascript">
$(document).ready(function(){
$("#dtp").datepicker({
dateFormat: "dd MM yy"
});
});
</script>
kita tambahkan saja script ini :
changeMonth: true,

changeYear: true
Berikut script lengkapnya :
<link type="text/css" href="../themes/base/ui.all.css" rel="stylesheet" />

<script type="text/javascript" src="../lib/jquery-1.3.2.js"></script>

<script type="text/javascript" src="../lib/ui.core.js"></script>

<script type="text/javascript" src="../lib/ui.datepicker.js"></script>

<script type="text/javascript" src="../lib/ui.datepicker-id.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("#dtp").datepicker({

dateFormat: "dd MM yy",

changeMonth: true,

changeYear: true

});

});

</script>
Hasil dari contoh diatas adalah sebagai berikut :

4. Menampilkan datepicker menggunakan button
Kita dapat menggunakan button untuk menampilkan datepicker adapun button tersebut bisa kita buat lebih menarik dengan menggunakan sebuah image semisal gambar berikut :

Untuk menampilkan datepicker menggunakan button yang menggunakan gambar kita akan menggunakan fungsi showOn, buttonImage dan buttonImageOnly. Adapun bila kita tidak menggunakan gambar pada buttonnya maka cukup menggunakan fungsi showOn, dan buttonText.
Berikut langkahnya :
- Siapkan terlebih dahulu image yang akan gunakan untuk button anda bisa menggunakan gambar diatas (save as) ataupun menggunakan image yang ada pada file contoh yang bisa anda download kemudian.
- Pada script berikut :
<script type="text/javascript">
$(document).ready(function(){
$("#dtp").datepicker({
dateFormat: "dd MM yy"
});
});
</script>
tambahkan script :
showOn: "button",
buttonImage: "../image/cal.gif",
buttonImageOnly: true
jadi kalau kita gabungkan dengan contoh sebelumnya maka scriptnya akan menjadi seperti berikut :
<link type="text/css" href="../themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../lib/jquery-1.3.2.js"></script>
<script type="text/javascript" src="../lib/ui.core.js"></script>
<script type="text/javascript" src="../lib/ui.datepicker.js"></script>
<script type="text/javascript" src="../lib/ui.datepicker-id.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#dtp").datepicker({
dateFormat: "dd MM yy",
changeMonth: true,
changeYear: true,
showOn: "button",
buttonImage: "../image/cal.gif",
buttonImageOnly: true
});
});
</script>
Hasil dari contoh diatas adalah sebagai berikut :

5. Mengganti theme datepicker
Anda dapat merubah tampilan standar datepicker tentunya dengan mendownload terlebih dahulu themenya. Tapi saya sudah sertakan beberapa theme yang dapat anda gunakan pada file contoh yang anda dapat download nanti.
Langkahnya sebagai berikut :
- Seperti dilihat dari script sebelumnya bahwa untuk tampilan datepicker didukung dengan adanya file *.css anda bisa melihatnya pada script berikut :
<link type="text/css" href="../themes/base/ui.all.css" rel="stylesheet" />
Untuk merubah theme dari datepicker maka setelah theme anda miliki anda cukup merubah script diatas misalnya menjadi :
<link type="text/css" href="../themes/le-frog/ui.all.css" rel="stylesheet" />
Sehingga nantinya keseluruhan script akan menjadi seperti berikut :
<link type="text/css" href="../themes/le-frog/ui.all.css" rel="stylesheet" />

<script type="text/javascript" src="../lib/jquery-1.3.2.js"></script>

<script type="text/javascript" src="../lib/ui.core.js"></script>

<script type="text/javascript" src="../lib/ui.datepicker.js"></script>

<script type="text/javascript" src="../lib/ui.datepicker-id.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("#dtp").datepicker({

dateFormat: "dd MM yy",

changeMonth: true,

changeYear: true,

showOn: "button",

buttonImage: "../image/cal.gif",

buttonImageOnly: true

});

});

</script>
Hasil dari contoh diatas adalah sebagai berikut :

Ok. semoga postingan kali ini dapat bermanfaat.
File contoh dapat anda download di download modifikasi datepicker dengan jquery.
READ MORE - Memodifikasi Datepicker Dengan JQuery

Datepicker Dengan JQuery

20 September 2010

Pada posting saya terdahulu saya pernah menuliskan bagaimana cara menambahkan datepicker di php dengan ajax pada artikel kali ini saya akan menuliskan bagaimana menambahkan sebuah datepicker dengan menggunakan jquery.

Untuk dapat menambahkan datepicker dengan jquery pada website diperlukan beberapa file pendukung yaitu :
- jquery-1.3.2.js
- ui.core.js
- ui.datepicker.js
- themes

Setelah file tersebut anda miliki barulah anda bisa menggunakan datepicker dengan jquery pada website anda.
Langkahnya adalah sebagai berikut :
1. Letakan script berikut diantara <head> dan </head> :
<link type="text/css" href="themes/base/ui.all.css" rel="stylesheet" />

<script type="text/javascript" src="lib/jquery-1.3.2.js"></script>

<script type="text/javascript" src="lib/ui.core.js"></script>

<script type="text/javascript" src="lib/ui.datepicker.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("#dtp").datepicker();

});

</script>
Berikut penjelasan singkat dari script diatas :
- href="themes/base/ui.all.css" pemanggilan css library jquery ui
- src="lib/jquery-1.3.2.js" pemanggilan library jquery (jquery-1.3.2.js)
- src="lib/ui.core.js" pemanggilan library utama jquery (ui.core.js)
- src="lib/ui.datepicker.js" pemanggilan library komponen jquery (ui.datepicker.js)

2. Kemudian untuk memanggil datepickernya cukup tambahkan id="dtp"contoh :
Masukan Tanggal : <input id="dtp" type="text">
Selesai sudah, berikut tampilannya :

File pendukung yang dibutuhkan dapat anda download di download datepicker dengan jquery
READ MORE - Datepicker Dengan JQuery

Menambahkan Rule Pada JQuery Validation

17 September 2010

Pada artikel saya terdahulu yang berjudul Validasi Pada Form dengan JQuery dijelaskan bagaimana sebuah form dapat melakukan validasi terlebih dahulu sebelum form tersebut disubmit. Dalam artikel ini akan dijelaskan bagaimana menambahkan rule pada jquery validation untuk melakukan Validasi Pada Form dengan JQuery

Dokumentasi dari JQuery Validation Plugin sendiri bisa anda lihat pada link berikut ini :
http://docs.jquery.com/Plugins/Validation/Validator#Options_for_the_validate.28.29_method

Pada artikel sebelumnya untuk melakukan validasi pada sebuah form kita hanya perlu menempatkan script berikut ini diantara <head> dan </head> :
<script type="text/javascript" src="includefile/jquery.js"></script>
<script type="text/javascript" src="includefile/jquery.validate.js"></script>
<script type="text/javascript">
  jQuery(document).ready(function() {
  jQuery("#myForm").validate({
  })
</script>
Sebenarnya dengan hanya menambahkan script tersebut diantara  <head> dan </head> anda sudah dapat melakukan validasi terhadap sebuah form. Tapi bagaimana bila anda ingin memvalidasi jika suatu field pada sebuah form hanya boleh angka, memvalidasi apakah penulisan sebuah email valid, dll?
Untuk melakukan hal tersebut anda perlu menambahkan rule pada jquery validation. Lalu bagaimanakah caranya untuk menambahkan rulenya? Berikut langkahnya :
Dalam kasus ini saya memberikan contoh apabila kita menginput nomor telepon field nomor telepon pada form hanya akan menerima input dalam bentuk angka dan dibatasi sebanyak 13 digit angka saja.
Berikut scriptnya :

<script type="text/javascript">
  jQuery(document).ready(function() {
jQuery("#myForm").validate({
rules: {
txttelp: {
maxlength: 13,
number: true
}
},
messages: {
txttelp: {
maxlength: jQuery.format("Maksimal {0} angka"),
number: "Hanya boleh angka"
}
}
});
})
</script>
Terlihat dari script diatas tidak jauh berbeda dengan script sebelumnya hanya terdapat penambahan rule dan message. rule merupakan aturan yang diterapkan pada form saat melakukan validasi sedangkan message merupakan pesan yang akan ditampilkan saat terjadi kesalahan penginputan.
Selain terdapat penambahan rule dan message dalam penggunaan pada formpun ada sedikit perbedaan bila pada contoh sebelumnya scriptnya seperti berikut ini :
<input name="txttelp" type="text" id="txttelp"   size="20" maxlength="13" class="required" title="Telphone tidak boleh   kosong"/>
Setelah anda menambahkan rule dan messagenya maka penggunaannya adalah sebagai berikut :
<input id='txttelp' name='txttelp' type='text' size='20'>
Lalu bagaimana caranya untuk memvalidasi penginputan email?
Khusus untuk memvalidasi penginputan email cukup menambahkan script berikut ini pada message karena rule untuk email ini sendiri sudah terdapat pada plugin sehingga kita hanya perlu untuk menambahkan messagenya saja :
email: {
required: "E-mail harus diisi",
email: "Masukkan E-mail yang valid"
}
Lalu penggunaannya pada form adalah sebagai berikut :
<input name="email" id="email" class="required email" size="30" type="text" />
Selamat mencoba
READ MORE - Menambahkan Rule Pada JQuery Validation

EASEUS Data Recovery

11 September 2010


EASEUS Data Recovery merupakan salah satu software yang dibuat oleh CHENGDU YIWO Tech Development Co., Ltd (YIWO Tech Ltd) yang berfungsi untuk merecovery data yang hilang yang disebabkan oleh penghapusan file secara tidak disengaja, virus, terformat, hilang akibat salah partisi, korup, dan banyak macam masalah yang bukan diakibatkan oleh kerusakan fisik.

EASEUS Data Recovery dapat merecover file dan folder dari yang komponen-kompenen berikut ini telah rusak bahkan hilang :
- Partisi
- Boot Record
- File Alocation Tabl
- Root Folder
- Master File Table

EASEUS Data Recovery mendukung file system :
- FAT12
- FAT16
- FAT32
- NTFS
- EXT2/EXT3 (Linux)

Media yang didukung oleh EASEUS Data Recovery adalah :
- IDE HDD
- SCSI HDD
- SATA HDD
- Fire Wire HDD
- Floppy Drive
- Dynamic Disc (Simple Volume, Stripped Volume, Spanned Volume, Mirrored Volume, RAID 5 Volume)
- Compact Flach Card yang menggunakan FAT/NTFS/EXT2/EXT3 File System

Adapun Requirements untuk dapat menggunakan EASEUS Data Recovery adalah :
- OS = Windows 2000, XP, 2003, Vista, 2008, dan Windows 7
- Ram = Minimal 128Mb
- Sejumlah ruang yang cukup pada harddisk untuk melakukan recovery

Fitur-fitur dari EASEUS Data Recovery adalah :
- Merecover file/folder yang terhapus bahkan jika file tersebut sudah tidak ada di recycle bin atau menghapus dengan menggunakan Shift+Del
- Merecover file/folder dari partisi yang terhapus/hilang/terformat
- Merecover file yang terkompres dan terenkrip pada NTFS File System
- Kemampuan untuk mengulang hasil recovery yang terakhir, dll

Yang harus diingat adalah jangan melakukan recovery pada volume yang sama dengan dimana data tersebut hilang contoh file anda hilang berada di C:\Folder maka restorelah file tersebut ke drive lain misal D:\Folder

EASEUS Data Recovery dapat anda download dengan mengklik EASEUS Data Recovery Download
READ MORE - EASEUS Data Recovery

Mengatasi bugs pada file content.php pada cms lokomedia v1

07 September 2010

Pada postingan saya yang sebelumnya dengan judul Bugs pada cms lokomedia versi 1 dijelaskan bahwa CMS Lokomedia memiliki bugs yang dapat mengakibatkan seorang yang belum login dapat masuk kehalaman admin.

Bugs ini penyebabnya adalah tidak digunakannya session pada pemanggilan file content.php sehingga siapapun dapat mengaksesnya sebagai seorang administrator/user.

Nah untuk dapat mengatasi bugs pada cms lokomedia cukup mudah anda hanya perlu menambahkan beberapa baris script pada file content.php
Pertama-tama carilah script berikut ini :
if ($_GET[module]=='home'){
Sebelum script tersebut tambahkanlah script berikut ini :
if($_SESSION[leveluser]=="admin")

{
Berikutnya carilah scrit berikut ini :
else{

echo "<p><b>MODUL BELUM ADA</b></p>";

}
Setelah script tersebut, tambahkanlah script berikut ini :
}
else
{
echo "<center><b>Anda Tidak Dapat Mengakses Halaman Ini</b></center>";
}
Nantinya secara keseluruhan script anda akan menjadi seperti ini :

<?php
  include "../config/koneksi.php";
  include "../config/library.php";
  include "../config/fungsi_indotgl.php";
  include "../config/fungsi_combobox.php";
  include "../config/class_paging.php";

if($_SESSION[leveluser]=="admin")
  {
  // Bagian Home
  if ($_GET[module]=='home'){
  echo "<h2>Selamat Datang</h2>
  <p>Hai <b>$_SESSION[namauser]</b>, silahkan klik menu pilihan yang berada
  di sebelah kiri untuk mengelola content website. </p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p align=right>Login Hari ini: ";
  echo tgl_indo(date("Y m d"));
  echo " | ";
  echo date("H:i:s");
  echo "</p>";
  }

// Bagian Profil Lembaga
  elseif ($_GET[module]=='profil'){
  $sql  = mysql_query("SELECT * FROM modul WHERE id_modul='11'");
  $r    = mysql_fetch_array($sql);

echo "<h2>Profil Lembaga</h2>
  <form method=POST enctype='multipart/form-data' action=aksi.php?module=profil&act=update>
  <input type=hidden name=id value=$r[id_modul]>
  <table>
  <tr><td><img src=foto_berita/$r[gambar]></td></tr>
  <tr><td>Ganti Foto : <input type=file size=30 name=fupload></td></tr>
  <tr><td><textarea name=isi cols=94 rows=30>$r[static_content]</textarea></td></tr>
  <tr><td><input type=submit value=Update></td></tr>
  </form></table>";
  }

// Bagian User
  elseif ($_GET[module]=='user'){
  include "modul/mod_user.php";
  }

// Bagian Modul
  elseif ($_GET[module]=='modul'){
  include "modul/mod_modul.php";
  }

// Bagian Agenda
  elseif ($_GET[module]=='agenda'){
  include "modul/mod_agenda.php";
  }

// Bagian Berita
  elseif ($_GET[module]=='berita'){
  include "modul/mod_berita.php";
  }

// Bagian Pengumuman
  elseif ($_GET[module]=='pengumuman'){
  include "modul/mod_pengumuman.php";
  }


// Bagian Banner
  elseif ($_GET[module]=='banner'){
  include "modul/mod_banner.php";
  }

// Bagian Hubungi Kami
  elseif ($_GET[module]=='hubungi'){
  include "modul/mod_hubungi.php";
  }

// Apabila modul tidak ditemukan
  else{
  echo "<p><b>MODUL BELUM ADA</b></p>";
  }
  }
  else
  {
  echo "<center><b>Anda Tidak Dapat Mengakses Halaman Ini</b></center>";
  }
  ?>

Dengan menggunakan script diatas yang bisa mengakses file content.php adalah hanya administrator saja. bagaimana jika anda ingin membuat jika modul bisa diakses oleh administrator dan user ?
Tinggal rubah scriptnya menjadi seperti berikut ini :

<?php
  include "../config/koneksi.php";
  include "../config/library.php";
  include "../config/fungsi_indotgl.php";
  include "../config/fungsi_combobox.php";
  include "../config/class_paging.php";

// Bagian Home
  if ($_GET[module]=='home'){
  if($_SESSION[leveluser]=="admin" OR $_SESSION[leveluser]=="user")
  {
  echo "<h2>Selamat Datang</h2>
  <p>Hai <b>$_SESSION[namauser]</b>, silahkan klik menu pilihan yang berada
  di sebelah kiri untuk mengelola content website. </p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p align=right>Login Hari ini: ";
  echo tgl_indo(date("Y m d"));
  echo " | ";
  echo date("H:i:s");
  echo "</p>";
  }
  else
  {
  echo "<center><b>Anda tidak dapat mengakses halaman ini</b></center>";
  }
  }

// Bagian Profil Lembaga
  elseif ($_GET[module]=='profil'){
  if($_SESSION[leveluser]=="admin")
  {
  $sql  = mysql_query("SELECT * FROM modul WHERE id_modul='11'");
  $r    = mysql_fetch_array($sql);

echo "<h2>Profil Lembaga</h2>
  <form method=POST enctype='multipart/form-data' action=aksi.php?module=profil&act=update>
  <input type=hidden name=id value=$r[id_modul]>
  <table>
  <tr><td><img src=foto_berita/$r[gambar]></td></tr>
  <tr><td>Ganti Foto : <input type=file size=30 name=fupload></td></tr>
  <tr><td><textarea name=isi cols=94 rows=30>$r[static_content]</textarea></td></tr>
  <tr><td><input type=submit value=Update></td></tr>
  </form></table>";
  }
  else
  {
  echo "<center><b>Anda tidak dapat mengakses halaman ini</b></center>";
  }
  }

// Bagian User
  elseif ($_GET[module]=='user'){
  if($_SESSION[leveluser]=="admin")
  {
  include "modul/mod_user.php";
  }
  else
  {
  echo "<center><b>Anda tidak dapat mengakses halaman ini</b></center>";
  }
  }

// Bagian Modul
  elseif ($_GET[module]=='modul'){
  if($_SESSION[leveluser]=="admin")
  {
  include "modul/mod_modul.php";
  }
  else
  {
  echo "<center><b>Anda tidak dapat mengakses halaman ini</b></center>";
  }
  }

// Bagian Agenda
  elseif ($_GET[module]=='agenda'){
  if($_SESSION[leveluser]=="admin" OR $_SESSION[leveluser]=="user")
  {
  include "modul/mod_agenda.php";
  }
  else
  {
  echo "<center><b>Anda tidak dapat mengakses halaman ini</b></center>";
  }
  }

// Bagian Berita
  elseif ($_GET[module]=='berita'){
  if($_SESSION[leveluser]=="admin" OR $_SESSION[leveluser]=="user")
  {
  include "modul/mod_berita.php";
  }
  else
  {
  echo "<center><b>Anda tidak dapat mengakses halaman ini</b></center>";
  }
  }

// Bagian Pengumuman
  elseif ($_GET[module]=='pengumuman'){
  if($_SESSION[leveluser]=="admin")
  {
  include "modul/mod_pengumuman.php";
  }
  else
  {
  echo "<center><b>Anda tidak dapat mengakses halaman ini</b></center>";
  }
  }


// Bagian Banner
  elseif ($_GET[module]=='banner'){
  if($_SESSION[leveluser]=="admin")
  {
  include "modul/mod_banner.php";
  }
  else
  {
  echo "<center><b>Anda tidak dapat mengakses halaman ini</b></center>";
  }
  }

// Bagian Hubungi Kami
  elseif ($_GET[module]=='hubungi'){
  if($_SESSION[leveluser]=="admin")
  {
  include "modul/mod_hubungi.php";
  }
  else
  {
  echo "<center><b>Anda tidak dapat mengakses halaman ini</b></center>";
  }
  }

// Apabila modul tidak ditemukan
  else{
  echo "<p><b>MODUL BELUM ADA</b></p>";
  }
  ?>

Nah setelah anda ubah script pada file content.php cobalah akses kembali web dengan memanggil URLnya seperti berikut :

http://www.apaajadeh.com/admin/content.php?module=home

Hasilnya akan tampak seperti berikut ini :


Selamat mencoba..
READ MORE - Mengatasi bugs pada file content.php pada cms lokomedia v1

Bugs pada cms lokomedia versi 1

CMS Lokomedia merupakan CMS (Content Management System) yang dibuat oleh Lukmanul Hakim dimana CMS ini bersifat opensource yang source codenya diberikan dalam bundling buku yang ditulis oleh Lukmanul Hakim dengan judul "Membongkar Trik Rahasia Para Master PHP". Dalam buku itu sendiri kita diajarkan untuk membuat sebuah website lebih khususnya kepada project untuk membuat sebuah CMS.

CMS Lokomedia Versi 1 merupakan CMS versi pertama yang diluncurkan karena setelahnya memang dikeluarkan lagi versi terbarunya pada buku yang berikutnya bahkan pada bukunya yang terakhir CMS ini sudah diupdate sedemikian rupa bahkan sudah menggunakan framework jquery didalamnya.

Berdasarkan penglihatan saya melalui mesin pencari google dengan menggunakan keyword inurl:media.php
saya menemukan cukup banyak situs yang menggunakan CMS ini. Keyword ini saya pergunakan dikarenakan setiap web yang menggunakan CMS ini urlnya pasti berbentuk seperti ini :

http://www.apaajadeh.com/media.php?module=home

Lalu ada apa gerangan dengan CMS ini?
Ada satu hal yang hendak saya bahas disini terutama mengenai bugs yang ada pada CMS Lokomedia. sebenarnya bugs pada cms lokomedia sudah lama ditemukan dan sang pembuat CMS pun sudah memberikan update pada buku berikutnya yaitu pada buku "Trik Rahasia Master PHP Terbongkar Lagi". Namun entah kenapa masih saja ada beberapa situs yang belum melakukan update sehingga hal ini sangat riskan untuk website tersebut.
Ini telah saya buktikan sendiri pada beberapa situs yang saya dapati melalui google.
Bugs yang paling utamanya adalah memungkinkan user yang tidak login dan tanpa level admin dapat merubah / mengutak-atik isi website dengan sesuka hatinya hal ini dikarenakan adanya suatu bugs pada file content.php

Bagaimana itu bisa terjadi langkah dibawah ini menjelaskan bagaimana seorang yang tidak login dapat melakukan perubahan terhadap isi/konten dari website yang menggunakan CMS ini.
Sebelum lebih jauh membahasnya berikut gambar tampilan CMS Lokomedia Versi 1.


Dari struktur file yang ada pada CMS ini untuk dapat mengakses halaman admin kita dapat menambahkan kata admin setelah domain web.
Contoh :

http://www.apaajadeh.com/admin

Lalu akan tampil halaman untuk melakukan login seperti gambar dibawah ini :


Lalu bagaimanakah seseorang yang tanpa login dapat mengakses halaman admin?
Apakah dengan menggunakan teknik SQL Injection atau sejenisnya?
Jawabannya adalah tidak perlu menggunakan teknik SQL Injection bagi seseorang yang tidak login untuk dapat masuk kehalaman admin.
Lalu bagaimana caranya?
Pada url ubahlah menjadi :

http://www.apaajadeh.com/admin/content.php?module=home

apa yang terjadi?? Baaamm... website menunjukan bahwa ada sedang dalam keadaan login sebagai seorang admin/user


Begitu mudahnya seorang yang tanpa login untuk bisa mengakses halaman admin.
Lalu apakah hanya sampai disini?
Tentu tidak.. dengan memanfaatkan bugs ini kita bisa merubah isi/konten website bahkan bisa juga untuk menambahkan user. hmm.. kalau sudah begini website kita sudah sangat tidak aman.
Berikut contoh pemanfaatan bugs ini untuk menambahkan sebuah user baru..
pada URL ubah menjadi seperti berikut ini :

http://www.apaajadeh.com/admin/content.php?module=user

maka akan tampil halaman untuk melakukan manajemen user. dari situ kita bisa menambah, mengedit, bahkan menghapus user yang ada.


Jadi jika anda ingin merubah suatu modul cukup dengan menyertakan nama modulnya setelah content.php?module=

Dalam kondisi standardnya (yang diberikan pada bukunya) terdapat 8 buah modul yang digunakan untuk memanage isi/konten web yaitu :
- Manajemen User
- Manajemen Modul
- Profil
- Berita
- Agenda
- Pengumuman
- Banner
- Hubungi Kami

Untuk dapat melihat modul apa saja yang ada pada CMS tersebut ubahlah URL menjadi seperti berikut ini :

http://www.apaajadeh.com/admin/content.php?module=modul

Kalau sudah begini sisanya tinggal terserah anda mau melakukan apa :)
Nah contoh berikut ini adalah yang bisa terjadi pada website apabila belum dilakukan patch (saya melakukan perubahan pada profil) :


Ok.. semoga informasi  ini berguna khususnya bagi yang webnya menggunakan CMS ini tetapi belum melakukan patch..
Next time saya akan memposting trick untuk mengatasi bugs ini.
READ MORE - Bugs pada cms lokomedia versi 1

Artikel Lain

 
 
 

Go To Link

  »  A1VBCode
  »  Bina Sarana Informatika
  »  Blogger
  »  Deconstruction Code
  »  Diskusiweb
  »  dremi.info
  »  Echo
  »  Facebook
  »  Gary Abraham
  »  Ilmu Website
  »  JQuery
  »  Mahesajenar Widget
  »  STMIK Nusa Mandiri
  »  OOM Blog
  »  Planet Source Code
  »  Rahma Blog
  »  Terren Jr
  »  VB-Bego
  »  Herry Blog

Advertisement