Membuat PHP Captcha Sendiri
Pernah denger istilah Captcha? captcha itu harfiahnya “Completely Automated Public Turing test to tell Computers and Humans Apart” ( dari Wikipedia ). Dibuat untuk membedakan antara mesin ( bot ) dan manusia. Captcha dibuat untuk melakukan validasi input pada website2 yang mempersilahkan pengunjung memberikan inputan baik berupa komentar, shoutout, kotak pendaftaran, atau apapun dimana pengunjung menginputkan sesuatu.
Kenapa harus divalidasi? soalnya banyak banget program2 SPAM COmment yang bisa aja menyerang situs kita. Kebayang kan klo kita bikin website, terus isi dari Comment/guestbook di website kita itu isinya Link2 ad ato penawaran tentang produk ato ga link ke situs2 porno. Jadi gak sedap dipandang. Biasanya yg ngisi Comment adalah program yang secara otomatis melakukan submit ke buku tamu / halaman comment website/blog kita.. Nah, klo pernah kejadian kayak gitu ato ga ngeliat yang kayak gitu, sebaiknya lengkapi websitenya dengan Captcha.
Captcha = Gambar Samar2
Simpelnya, Captcha merupakan sebuah gambar (image) yang berisi Angka / Teks atau kombinasi Angka & teks yang disamar2kan bentuk & rupanya sehingga memerlukan ketelitian dari pengunjung / orang yang ingin melakukan inputan data disebuah website.
Menambahkan Captcha pada website kita
Cara yang pertama adalah dengan download library Captcha dari thecaptcha.com Kita tinggal menambahkan librarynya dan disisipkan dengan website kita.
Cara yang kedua adalah dengan membuat PHP Captcha kita sendiri. Kode ini saya dapat dari somewhere setelah googling2. Eh ga taunya baru tau kalo di rumahweb.com tutorial kayak gini udah pernah ditulis. Jadi klo mau lebih detail boleh liat ke situsnya.
Cara Kerjanya:
Nah, cara kerjanya adalah bermain2 dengan session, pada saat form pendaftaran di Load, maka dibuatkan String Random dari MD5 yang diambil 5 digit pertamanya. Kemudian string itu disimpen di SESSION, Dari String itu dibuatkan Image dengan menggunakan GDLIbrary bawaan dari PHP dan ditampilkan di halaman Form tersebut. Pada saat User Submit String tersebut, dilakukan pengecekan dengan Session yang sudah tersimpan sebelumnya.
File: php_captcha.php
<?php session_start(); $RandomStr = md5(microtime());// md5 to generate the random string $ResultStr = substr($RandomStr,0,5);//trim 5 digit $NewImage =imagecreatefromjpeg("img.jpg");//image create by existing image and as back ground $LineColor = imagecolorallocate($NewImage,233,239,239);//line color $TextColor = imagecolorallocate($NewImage, 255, 255, 255);//text color-white imageline($NewImage,1,1,40,40,$LineColor);//create line 1 on image imageline($NewImage,1,100,60,0,$LineColor);//create line 2 on image imageline($NewImage,5, 1, 200, 50, $LineColor); imagestring($NewImage, 5, 15, 5, $ResultStr, $TextColor);// Draw a random string horizontally $_SESSION['key'] = $ResultStr;// carry the data through session header("Content-type: image/jpeg");// out out the image imagejpeg($NewImage);//Output image to browser ?>
File: form.php
<?php session_start(); ?> <html> <head> <title>PHP-CAPTCHA </title> </head> <body onload="return focuson();"> <script language="javascript"> function focuson() { document.form1.number.focus()} function check() { if(document.form1.number.value==0) { alert("Please enter your Category Name"); document.form1.number.focus(); return false; } } </script> <?php if(isset($_REQUEST['Submit'])){ $key=substr($_SESSION['key'],0,5); $number = $_REQUEST['number']; if($number!=$key){ echo '<center><font face="Verdana, Arial, Helvetica, sans-serif" color="#FF0000"> Validation string not valid! Please try again!</font></center>';} else{ echo '<center><font face="Verdana, Arial, Helvetica, sans-serif" color="#66CC00"> Your string is valid!</font></center>';} } ?> <form name="form1" method="post" action="form.php" onsubmit="return check();"> <img src="php_captcha.php" /></td> <input name="number" type="text" id="number" /></td> <input name="Submit" type="submit" value="Submit" /></td> </form> </body> </html>
Kode lengkapnya Bisa di download disini
XHTML Validator Lokal buat para web developer
Ceritanya lagi in progress waktu ngerjain websitenya Tabloid Computer News (http://www.tabloidcomputernews.com). Nah, dalam tahap pembuatan website kali ini saya kepingin supaya website saya ini sudah valid XHTML sesuai standar dari W3C. Buat yg belum tau apa itu XHTML standar dan w3C bisa menuju kesini. Nah, w3c telah menyediakan web untuk mengecek apakah website yang ada sudah valid/belum. Alamat validatornya ada disini http://validator.w3.org/
Waktu ngoding, tentu saja kita ngoding lokal alias dikomputer sendiri yg tidak terhubung dengan jaringan internet supaya bisa lebih cepat. Nah, buat rekan2 yang mau ngecek apakah kodingan yang di komputer lokal sudah valid atau belum XHTMLnya, kita bisa menggunakan AddOns dari Firefox yang bernama HTML Validator. Yang mau download bisa menuju kesini: http://users.skynet.be/mgueury/mozilla/download.html . Linknya saya dapet dari si dimas “blekok” yg juga programmer web di kant0r. Sebenerna w3c juga menyediakan library yg bisa didownload dan kita install untuk ngecek valid/tidaknya sebuah website. Tapi setelah saya baca2 kok agak ribet ya? hehe, pingin yg cepet aja. Tapi klo yg mau download library dari w3cnya bisa menuju kesini, http://validator.w3.org/docs/install.html . Cara install nya juga ada kok.
Kembali ke HTML Validator. Fitur2nya apa aja? ya itu tadi, kita bisa ngecek apakah website yang sedang kita bangun sudah valid atau belum XHTMLnya. Kenapa harus XHTML valid? jawaban paling simple adalah supaya website yang kita bikin bisa terbaca oleh browser apapun, pada device apapun (komputer,pda,hp,etc). beberapa syarat dari format XHTML standar adalah semua tag harus ditutup, tidak boleh ada huruf besar didalam tag, dan masih banyak lagi. Saya juga gak hapal satu2. Sambil belajar juga sih… Add Ons ini merupakan punyanya Mozilla Firefox, jadi ya kita harus pake firefox dong. Download firefox disini.
Di halaman download validator tadi ada Screenshootnya. Kita bisa melihat apakah website kita sudah standar / belum di taskbar bagian kanan bawah browser firefox kita.
Cheers, semoga berguna buat web2 developer yg belum ngeh untuk men-standarkan Websitenya.
bikin CV kamu di Web
Kemaren saya ada kelas di LPKIA, tepatnya dimatakuliah “pemrograman web”… ironis sekali (atau kebetulan sekali)… seperti biasa.. dikantor saya ngoding, malemnya ngajarin orang buat ngoding… dan karena kerjaan sampingan saya ini, saya nggak bisa ikut nomat bareng temen sekantor. Mereka nomat Die Hard 4.0 gitu, tapi gak apa2 juga sih coz waktu hari rabu nya saya udah nonton bareng mimi di BIP. Filmnya tob banget deh.
Balik lagi ke waktu ngajar tadi… saya ngasih tugas ke anak – anak (seperti saya sudah tua saja V___V ) buat bikin website berbasis MySQL – PHP. Tugas ini dikategorikan sebagai tugas besar dan akan dijadikan tambahan untuk nilai mereka… plus ada tambahan juga sih.. sebagai appreciate / penghargaan dari hasil karya mereka, saya janjikan untuk publish (online) kan tiap2 Web Terbaik dari tiap – tiap kelas yang saya ajarkan.. Rencananya mau ditaruh dihostingan saya ini. Untuk nambah motivasi aja sih, Untuk nambah semangat. biar mereka serius ngerjainnya.
Saya jadi inget dulu waktu saya ngelamar kerja ke i-moov (kantor saya sekarang) untuk posisi web programmer, saya ditanya beberapa pertanyaan berikut:
- apakah pernah mempunyai webblog/website??
- apakah pernah membuat sebuah website?
- kalau pernah, apakah dipublish dan dimana alamatnya??
Saya setuju dengan tulisan bapak Budi Rahardjo yang menuliskan tentang kita bisa membangun CV (Curiculum Vitae) kita di web. Alasannya simple, saat ini orang banyak ingin tau sesuatu selalu mencari lewat web melalu search engine yg ada baik itu Google, Yahoo, dll… nah.. keren kan kalau kita mau ngelamar kerja, trus waktu dinterview mau tau lebih banyak tentang diri kita, kita tinggal bilang:
“silahkan masuk ke google.com dan masukkan kata kuncinya adalah nama saya”…
(mudah2an hasil pencarian yang keluar yang baik2nya ya…, makanya bangunlah image positif anda di Web).
Alasan lain adalah agar web yang dibuat bisa online diinternet sebagai bahan portofolio. Dulu saya masih lulusan D3 dan beberapa web yang saya bikin saya paksain di upload di hostingan gratisan… tapi alhasil jadi punya lumayan portofolio dan bisa jadi bahan pertimbangan waktu proses seleksi penerimaan kerja… Hmm.. mulai lagi ah.. bikin image & portofolio positif di web.
Semoga bermanfaat….!!
WYSIWYG Web Based Editor
WYSIWYG (What You See Is What You Get) Web Based Editor merupakan editor yang sering digunakan di banyak blog engine atau CMS (Content Management System) dalam dunia web development. kenapa dikasih nama WYSIWYG? ya karena emang sesuai sama artinya: “Apa yang kau lihat adalah apa yang kau dapatkan”. Artinya dengan menggunakan editor ini kita bisa sesuka hati mengedit kontent / isi kita layaknya ketika mengetik di aplikasi Office. Pengertian dari WYSIWYG ada disini.
“Kita bisa memasukkan gambar, mengedit style, size dari font, menambahkan hyperlink, dan bahkan bisa menambahkan tabel.”
Kali ini saya akan mereview penggunaan dari salah satu WYSIWYG Editor ini yang berbasis Javascript. Kelak ketika suatu saat kita harus membuat web yang didalamnya disertai dengan Content Management System, kita sudah tau kemana harus mencari Editor pengganti textarea ini. Namanya adalah TinyMce. Salah satu blog engine yang menggunakan plugin Editor ini adalah wordpress.com (kebetulan engine blog saya ini juga menggunakan wordpress). TinyMce merupakan software gratis (opensource). kita bisa mendownloadnya disini. (versi yg saya coba adalah versi 2.1.0 Berikut adalah cara penggunaannya:
- Ekstrak tinymce_2_1_0.zip yang sudah selesai didownload.
- Hasil Ekstrak akan menghasilkan folder tinymce dengan subfolder docs,examples,jscripts.
- Contoh dari penggunaan TinyMce ini ada di folder examples/example_advanced.htm
- File library javascript yang digunakan ada di dalam folder jscripts yaitu: jscripts/tiny_mce/tiny_mce.js
Untuk mengedit tipe dari editor yang digunakan dapat dengan melihat contoh2 yang ada di folder examples, kemudian lihat sourcenya.
Selamat Mencoba…
Instalasi XAMPP (Satu Paket PHP)
Kenapa dibilang satu paket? karena menurut yang saya lansir dari situsnya di http://www.apachefriends.org/en/xampp-windows.html, program ini udah menginclude-kan hampir semua kebutuhan di bidang Web Development, bahkan sampai ke FTP segala. Ini lengkapnya :
The XAMPP 1.6.1 is available!
We’ve released a new version of XAMPP, including:
- MySQL 5.0.37
- PHP 4.4.6
- OpenSSL 0.9.8e
- phpMyAdmin 2.10.02
- FileZilla FTP Server 0.9.23
- ZEND Optimizer 3.2.4
Nah, buat yang mau cara termudah belajar PHP dirumahnya… ini gak ada salahnya nih kita donlod… Cara instalasinya mudah banget lagi. Cukup jalanin file executablenya, next…next…next… finish…. Nah yg mungkin rada ribet waktu instalasi udah selesai. Bagi pemula, kita harus tau dulu dimana harus menyimpan file2 php kita.
Default instalasi XAMPP mengkonfigurasikan DOCUMENT ROOT (adalah root dokumen tempat menyimpan file2 web dan merupakan path/alamat yg dituju ketika kita mengetikkan alamat web kita pada browser) adalah di c:/Program Files/xampp/htdocs/
Jadi kopikan file2 php kita ke folder itu… trus untuk mengaksesnya via Web Browser (Firefox or IE), cukup ketikkan http://localhost/Namafile.php jika kita misalkan punya file php dengan nama NamaFile.php yang ditaruh di DOCUMENT ROOT tersebut. Detail mengenai konfigurasi untuk mengganti dokumen root akan dijelaskan dipostingan yang lain.
Selamat Mencoba
Recent Comments