Tampilkan postingan dengan label Tutorial. Tampilkan semua postingan
Tampilkan postingan dengan label Tutorial. Tampilkan semua postingan

Sabtu, 12 November 2011

Security Number

0 komentar

Anda pernah melihat angka-angka aneh yang dicorat-coret atau melengkung-lengkung ketika ingin mengisi form? Dan anda diharuskan untuk mengisi angka yang tertera disitu. Atau pada bagian komentar dibawah artikel ini anda juga akan menemukan security number. Saya banyak menerima email dan komentar bagaimana cara membuatnya, nah kali ini saya akan mengajarkan cara membuat security number.
Saya hanya mengajarkan bagaimana membuat Security Number ini, saya tidak akan mengajarkan bagaimana memasangnya di Wordpress, blogspot dan CMS-CMS lainnya. Terus terang pengetahuna saya mengenai Wordpress, blogspot, Jomlaa dan CMS-CMS lainnya hampir tidak tahu apa-apa. Terakhir kali saya memakai CMS sekitar tahun 2001 an waktu itu saya pakai PHPNuke, jadi saya tidak tahu apa-apa tentang CMS jaman sekarang. Tapi saya yakin CMS seperti Wordpress dan kawan-kawan pasti memiliki cara penanggulangan SPAM yang lebih baik daripada security number.

Apa sih gunanya Security Number?

Tentu saja untuk menanggulangi SPAM. Jika dalam website anda memiliki buku tamu atau sistem komentar yang tidak mengharuskan orang-orang untuk login untuk mengisinya, maka 100% website anda akan kena spam. Apa itu spam? jika anda menerima komentar yang tidak diinginkan pada buku tamu atau sistem komentar anda, maka anda bisa menyebutkan itu sebagai SPAM.
Para spammers melakukan SPAM biasanya dengan menggunakan software otomatis (istilah kerennya: bots) yang secara otomatis mengisi form-form yang ada di internet. Nah untuk mencegah software tersebut mengisi form, kita perlu menambahkan sebuah field yang hanya bisa diisi jika pengisinya adalah manusia. Bagaimana caranya? Dengan membuat sebuah angka acak yang ditampilkan sebagai gambar, nah kita diharuskan mengisi angka tersebut. Bagi kita mudah saja untuk mengisi angka, karena kita dapat dengan mudah melihatnya, tapi bagi software otomatis tadi tentu susah untuk membaca angka tersebut.
Software-software spammers sekarang sudah sangat canggih dan sudah mampu membaca security number!!!

CAPTCHA

Apa itu CAPTCHA? CAPTCHA merupakan sebuah program untuk menggenerate andka yang sulit dikenali oleh bots tadi tapi mudah dikenali oleh manusia. Algoritma CAPTCHA yang paling bagus diciptakan oleh Carnegie Mellon University, sayangnya algoritma CAPTCHA merupakan trademark dari Carnegie Mellon University dan algoritma tersebut tidak bisa sembarangan digunakan, algoritma tersebut digunakan oleh Yahoo, Google dan situs-situs besar lainnya. Tapi kita jangan menyerah, jika anda jago anda bisa membuat algoritma sendiri :)
Atau kita bisa juga menggunakan images, jadi kita memiliki kumpulan gambar huruf-huruf dan angka yang berbeda-beda, nah gambar tersebut kita tampilkan secara acak. Atau menggunakan cara saya, cara yang paling sederhana dan nggak perlu banyak mikir :) yaitu menggenerate angka acak biasa kemudian diatasnya kita coret-coret dengan acak. Seperti yang terlihat pada sistem komentar dibawah artikel ini, sangat sederhana :D

Memanfaatkan GD Library dan Session

Untuk membuat gambar didalam PHP kita tentu saja memanfaatkan GD Library. Saya tidak akan mengajarkan GD Library disini, silahkan anda lihat artikel saya yang lalu tentang dasar-dasar GD Library. Dan kita akan memanfaatkan sesssion untuk mengirim nilai pada security number tersebut agar lebih aman. Saya banyak melihat website yang menggunakan security number tetapi jawaban dari angka tersebut tersimpan di form, bisanya disimpan didalam <input type="hidden" />. Atau ada juga yang disimpan didalam link pada browsernya. Kalau begitu sama saja bohong, kita sama saja membuat security number plus jawaban dari angka tersebut. Nah, disini kita akan mengirim jawabannya dengan menggunakan Session, paling tidak agar terenkripsi lah. Oke tidak usah berlama-lama, sekarang anda coba lihat dulu seperti apa hasilnya yang akan kita buat disini.
Pertama-tama kita buat script PHP untuk menggenerate angkanya dulu, buatlah file capcay.php dan isilah dengan kode berikut ini:
<?
$sid=trim($HTTP_GET_VARS["sid"]);
session_id($sid);
session_start();
$angka = $HTTP_SESSION_VARS["angka"];
mt_srand((double)microtime()*1000000);
$jarak1 = mt_rand(0,10);
$jarak2 = mt_rand(0,10);
$jarak3 = mt_rand(0,10);
$jarak4 = mt_rand(0,10);
$ujung1 = mt_rand(0,60);
$ujung2 = mt_rand(0,60);
$ujung3 = mt_rand(0,60);
$ujung4 = mt_rand(0,60);
$ujung5 = mt_rand(0,60);
$ujung6 = mt_rand(0,60);
$ujung7 = mt_rand(0,60);
$ujung8 = mt_rand(0,60);
$warna1 = mt_rand(0,150);
$warna2 = mt_rand(0,150);
$warna3 = mt_rand(0,150);
$warna4 = mt_rand(0,150);
$warna5 = mt_rand(0,150);
$warna6 = mt_rand(0,150);
$height = 13; 
$width = 62; 
$im = ImageCreate($width, $height); 
$background = ImageColorAllocate($im, 255,255,255); 
$warnagaris = ImageColorAllocate($im, $warna1, $warna2, $warna3); 
$warnaangka = ImageColorAllocate($im, $warna4, $warna5, $warna6); 
ImageFill($im, 0, 0, $background); 
ImageLine($im, 0, $jarak1, $ujung1, $ujung2, $warnagaris); 
ImageLine($im, 0, $jarak2, $ujung3, $ujung4, $warnagaris); 
ImageLine($im, 60, $jarak3, $ujung5, $ujung6, $warnagaris); 
ImageLine($im, 60, $jarak4, $ujung7, $ujung8, $warnagaris); 
ImageString ($im, 6, 10, 0,  $angka, $warnaangka);
Imagejpeg($im); 
?>
Itu nanti akan menghasilkan images dalam format .jpg, tenang saja akan saya jelaskan nanti, sekarang buatlah file form.php dan isilah dengan kode berikut ini:
<?
$sid = session_id();
if(!$sid){
session_start();
$sid = session_id();
}
if ($submit) {
  if ($code!=$angka) {
    echo "Security number salah.<br />";
  } else {
    echo "Selamat Anda benar menuliskan angkanya";
  }
}
?>
<h4>Kirim Komentar:</h4>
<form method="post" action="<?=$PHP_SELF?>">
<p>
Security Number: <input type="text" name="code" class="textbox"  />
<?
mt_srand((double)microtime()*1000000);
$angka1 = mt_rand(0,9);
$angka2 = mt_rand(0,9);
$angka3 = mt_rand(0,9);
$angka4 = mt_rand(0,9);
$angka5 = mt_rand(0,9);
$angka="$angka1$angka2$angka3$angka4$angka5";
$HTTP_SESSION_VARS["angka"] = $angka;
?>
<img src="capcay.php?sid=<?=$sid?>" alt="Security Number" /> <br /><br />
<input type="submit" name="submit" value="Kirim Komentar" />
</p>
</form>
Silahkan anda jalankan form.php, muncul kan angkanya, cukup mudah kan? sekarang akan saya jelaskan satu persatu. Pertama-tama kita bahas form.php. Pada awal form.php kita memiliki kode:
<?
$sid = session_id();
if(!$sid){
session_start();
$sid = session_id();
}

Nah, kode tersebut berfungsi untuk mengambil nilai session yang nantinya akan kita kirim melalui form.php, karena pada awalnya kita belum mengirim apa-apa maka kita lewatkan saja kode tersebut dan langsung perhatikan formnya. PAda form kita memiliki field Security Number: <input type="text" name="code" class="textbox" />, ingat bahwa name nya adalahcode, nanti kita perlu melakukan pengencekan code ini dengan angka yang kita generate. Oke berikutnya kita akan menemui:
mt_srand((double)microtime()*1000000);
$angka1 = mt_rand(0,9);
$angka2 = mt_rand(0,9);
$angka3 = mt_rand(0,9);
$angka4 = mt_rand(0,9);
$angka5 = mt_rand(0,9);
$angka="$angka1$angka2$angka3$angka4$angka5";
$HTTP_SESSION_VARS["angka"] = $angka;
Disini kita membuat fungsi random, jadi saya membuat variabel $angka1 s/d $angka5 yang isinya adalah angka acak dari 0 sampai 9. Kemudian ke 5 angka tersebut digabung kedalam variabel angka, $angka="$angka1$angka2$angka3$angka4$angka5";. Nah setelah itu disini kuncinya, kita menyimpan variabel angka kedalam session angka dengan perintah$HTTP_SESSION_VARS["angka"] = $angka;. Yang nantinya session ini akan kita ambil pada awal kode tadi.
Sekarang kita akan membuat gambarnya, anda tentu sudah tahu cara menampilkan gambar pada HTML, disini yang kita load bukan gambar tetapi file PHP yang telah menjadi gambar <img src="capcay.php?sid=<?=$sid?>" alt="Security Number" />. Perhatikan, kita perlu mengirim nilai session tersebut kedalam capcay.php yang nantinya akan diproses oleh capcay.php. Nilai session tersebut sudah tersimpan pada variabel $sid karena pada awal kode kita sudah mengisi $sid dengan session $sid = session_id();. Sampai sini, sistem mulai memproses file cpacay.php dengan mengirim session yang berisi angka-angka yang benar. Kita akan bahas capcay.php belakangan. Dan ketika seseorang mengklik tombolnya maka sistem akan memproses kembali file form.php dari awal dan kembali mengambil session tersebut.
Karena anda telah menekan tombol submit, maka bagian kode dibagian atas ini akan dijalankan.
if ($submit) {
  if ($code!=$angka) {
    echo "Security number salah.<br />";
  } else {
    echo "Selamat Anda benar menuliskan angkanya";
  }
}
Itu merupakan kode sederhana untuk melakukan pengecekan apakah angka yang kita masukkan (variabel $code) sudah sama dengan angka yang kita generate yang tadi kita kirim melalui session (variabel $angka). Jika sudah sama silahkan anda tulis perintah yang diinginkan dan jika salah juga silahkan anda ingin sistem melakukan apa.
Oke, mudah kan sekarang kita akan bahas file capcay.php yang tadi kita panggil sebagai images. Sebenarnya file capcay.php hanya menggenerate angka yang kita kirim melalui session dan dicoret-coret. Jika anda membuka file capcay.php saja maka anda hanya akan menemukan coret-coretan tanpa adanya angka.
Pada bagian awal kode di file capcay.php kita akn menemukan kode seperti ini:
$sid=trim($HTTP_GET_VARS["sid"]);
session_id($sid);
session_start();
$angka = $HTTP_SESSION_VARS["angka"];
Kode tersebut berguna untuk mengambil session yang kita kirim pada form.php tadi, session tersebut tentu saja berisi angka acak yang kita buat pada form.php tadi. Dan kita simpan isinya pada variabel angka, $angka = $HTTP_SESSION_VARS["angka"];.
Setelah itu anda akan melihat variabel jarak, ujung dan warna. Untuk menggambar garis kita menggunakan fungsi imageline ( resource $image, int $x1, int $y1, int $x2, int $y2, int $color). Nah untuk mengisi x1, y1, x2, y2 dan warnasaya menggunakan nilai acak (random) yang saya simpan di variabel jarak, ujung dan warna. Dengan demikian garis-garis yang muncul dan warna yang muncul tidak akan pernah sama. Coba perhatikan kode berikut ini:
$height = 13; 
$width = 62; 
$im = ImageCreate($width, $height); 
$background = ImageColorAllocate($im, 255,255,255); 
$warnagaris = ImageColorAllocate($im, $warna1, $warna2, $warna3); 
$warnaangka = ImageColorAllocate($im, $warna4, $warna5, $warna6); 
ImageFill($im, 0, 0, $background); 
ImageLine($im, 0, $jarak1, $ujung1, $ujung2, $warnagaris); 
ImageLine($im, 0, $jarak2, $ujung3, $ujung4, $warnagaris); 
ImageLine($im, 60, $jarak3, $ujung5, $ujung6, $warnagaris); 
ImageLine($im, 60, $jarak4, $ujung7, $ujung8, $warnagaris); 
ImageString ($im, 6, 10, 0,  $angka, $warnaangka);
Imagejpeg($im); 
Variabel $width dan $height merupakan panjang dan tinggi bidang gambar kita. KEmudian kita membuat bidang gambar $im = ImageCreate($width, $height); yang disimpan dalam variabel $im. Setelah itu saya membuat background putih $background = ImageColorAllocate($im, 255,255,255); dan memberi warna pada garis dan angkanya, nilai warnanya acak yang telah kita buat pada variabel angka tadi $warnagaris = ImageColorAllocate($im, $warna1, $warna2, $warna3); dan warna angka$warnaangka = ImageColorAllocate($im, $warna4, $warna5, $warna6);.
Berikutnya kita menggambar bidangnya dengan memberi warna putih, ImageFill($im, 0, 0, $background);. Setelah itu kita membuat 4 coretan yang acak dan berbeda-beda dengan fungsi ImageLine($im, 0, $jarak1, $ujung1, $ujung2, $warnagaris);dst. Untuk menuliskan angka yang sudah kita dapatkan tadi, kita menggunakan fungsiimagestring (resource $image, int $font, int $x, int $y, string $string, int $color) dimana tadi kita menggunakan variabel $angka dan untuk warnanya kita menggunakan warna acak dari variabel $warnaangka, ImageString ($im, 6, 10, 0, $angka, $warnaangka);
Langkah terakhir adalah dengan membuatnya menjadi gambar jpg menggunakan fungsiImagejpeg($im);. Selesai sudah gambar anda sudah tampil yang berisi angka-angka acak, dan angka-angka itu juga dikirim melalui session agar kita bisa melakukan pengecekan.
Bingung? pada file capcay.php itu hanya berisi fungsi-fungsi dasar dari GD Library, jadi pastikan bahwa anda telah mengerti dasar-dasar GD Libary. Jika anda kreatif anda dapat menggambar coretan yang lebih bagus, angka yang lebih menarik dan semakin sulit dibaca. Tetapi perlu diingat juga dalam membuat security number jangan sampai terlalu sulit dibaca oleh manusia. Tujuan membuat security number agar manusia dapat dengan mudah membacanya, tetapi mesin akan kesulitan membacanya.
Jika gambar tidak muncul, pastikan GD Library anda sudah aktif. Tanyakan pada jasa penyedia hosting anda mengenai cara mengaktifkan GD Library di server anda.

newer post

Minggu, 30 Oktober 2011

Cara menambah gadget 4 kolom pada bagian footer

0 komentar

 
Menambahkan gadget pada bagian bawah atau pada bagian footer tidaklah sulit dan kode yang di gunakan juga hampir sama dengan cara menambah gadget dibawah header, bedanya kita tinggal menempatkan pada bagian footer. Bagi sobat blogger yang templatenya belum menggunakan fasilitas ini, anda juga bisa menambahkan gadget pada bagian footer. Dan memang cara ini sangat bermanfaat sekali. Sebab ketika pengunjung atau pembaca artikel blog kita sudah sampai pada bagian bawah, disitu kita sudah suguhkan menu, link atau hal - hal penting lain yang kita juga berharap pengunjung juga tertarik untuk membaca.

Artikel ini saya buat atas permintaan sobat blogger yang ingin tahu cara menambah gadget pada bagian bawah atau footer.

OK..., Bila anda berminat dengan cara ini, silahkan anda bisa ikuti langkah - langkah berikut :
1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.

4. Seperti biasa alangkah baiknya setiap edit Html, Download dulu Template Lengkap (back-up Template) agar template aman, bila terjadi kesalahan.

5. Jangan lupa Klik tombol "Expand Widget Templates"

6. Cari kode di bawah ini atau yang mirip dengan kode ini :
<b:section class='footer' id='footer'/>
 
Catatan :
Pada bagian HTML biasanya tampak seperti berikut :

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>


7. Silahkan ganti kode berwarna merah dengan kode dibawah ini :
  <div id='footer-column-container'>
<div id='footer1' style='width: 225px; float: left; margin:0; '>
<b:section class='footer-column' id='footer-column-1' preferred='yes' style='float:left;'>
<b:widget id='Text1' locked='false' title='About B-G' type='Text'/>

</b:section>
</div>
<div id='footer2' style='width: 225px; float: left; margin:0; '>
<b:section class='footer-column' id='footer-column-2' preferred='yes' style='float:left;'>
<b:widget id='Text4' locked='false' title='About Author' type='Text'/>
</b:section>
</div>

<div id='footer3' style='width: 225px; float: right; margin:0; '>
<b:section class='footer-column' id='footer-column-3' preferred='yes' style='float:right;'>
<b:widget id='Text3' locked='false' title='Subscribe in Reader' type='Text'/>
</b:section>
</div>

<div id='footer4' style='width: 225px; float: right; margin:0; '>
<b:section class='footer-column' id='footer-column-4' preferred='yes' style='float:right;'>
<b:widget id='Text2' locked='false' title='Access B-G on Go' type='Text'/>
</b:section>
</div>
<div style='clear:both;'/>
</div>
Catatan :
Anda bisa ganti kode berwarna merah pada kode diatas, itu adalah nilai lebar setiap gadgetnya. Silahkan anda sesuaikan dengan lebar template milik anda.

8. Kemudian anda cari lagi kode di bawah ini atau yang mirip dengan kode ini :
]]></b:skin>

9. Copy kode dibawah ini dan paste atau letakkan kode dibawah ini, sebelum kode ]]></b:skin>:
#footer-column-container { border: .3px dotted #cccccc;} .footer-column { margin: 0 10px 0 10px; padding:5px;
color: #666666; line-height: 1.5em; font-size:12px;}
.footer-column h2 {
padding-bottom:.15em; text-align:center;
font:"normal normal 80% 'Comic Sans MS','Lucida Sans Unicode','Trebuchet MS',Sans-serif";
color:#333333;
line-height:1em; letter-spacing:.1em;
border-bottom: 1px solid #cccccc;}
.footer-column ul { list-style:none; margin:0 0 0; padding:0 0 0;}
.footer-column ul li {
background: url(http://i421.photobucket.com/albums/pp296/rnbutpur/bullet-1.gif) no-repeat;
margin:0 0 0; padding-left: 16px;
padding-bottom: 0.5em; line-height:1.2em;}
.footer-column .widget {margin:0 0 .5em; padding:0 0 1em;}

10. SIMPAN TEMPLATE.

Selamat mencoba dan Semoga bermanfaat....
newer post

Membuat Halaman Member, Login dan Daftar

10 komentar

Dalam setiap website pasti ada halaman khusus dimana halaman tersebut hanya bias diakses oleh member ataupun administrator. Untuk mengakses halaman tersebut kita login untuk mendapatkan jalan masuk ke halaman yang dituju. Sekarang kita akan membuat halaman yang hanya bisa diakses jika user telah login terlebih dahulu.
Dalam permasalahan kali ini kita menggunakan fungsi  $_SESSION[]  yang dimiliki oleh php untuk melindungi halaman yang kita proteksi. Kita juga akan membuat halaman login dimana session akan selalu digunakan saat pemanggilan file.

MEMBUAT DATABASE MEMBER

Kita buat database-nya terlebih dahulu. Buat database latihan terlebih dahulu. jika sudah ada anda dapat mengunakan nama lain.
Lalu Copy kode dibawah ini dan paste pada menu SQL untuk menciptakan sebuah tabel member.
CREATE TABLE IF NOT EXISTS `member` (
  `no` int(10) NOT NULL AUTO_INCREMENT,
  `nama` varchar(20) NOT NULL,
  `email` varchar(50) NOT NULL,
  `password` varchar(12) NOT NULL,
  `level` int(2) NOT NULL,
  PRIMARY KEY (`no`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;
Anda masukan beberapa data pada tabel member dengan user yang akan anda gunakan untuk login nantinya.

MEMBUAT KONEKSI DATABASE

Lalu Anda buat koneksi kedatabsenya seperti script dibawah ini.
<?php
$host = "localhost";
$user = "root";
$pass = "";
$konek =mysql_connect($host,$user,$pass) or die ("koneksi gagal");
?>

MEMBUAT FORM USER LOGIN

Setelah itu anda copy script dibawah ini dan simpan dengan nama login.php.
Disini kita menggunakan  session_start();  untuk memulai session yang telah diciptakan.
<?php
include("koneksi.php");
session_start();

if(isset($_POST[login]))
{
@mysql_select_db("latihan");
$qr=@mysql_query("SELECT *
FROM member
WHERE nama =  '$_POST[nama]'
AND password=  '$_POST[pass]'",$konek) or die ("Login gagal");
$row=mysql_fetch_array($qr);
if (!empty($row['nama']))
{
echo "Selamat datang $row[nama] <br>Anda berhak mengakses halaman 
<a href=member.php>member</a>";
$nama=$row[nama];
$_SESSION[nama]=$nama;
}
else
{
echo "$row[nama]  Login Gagal";
}
}
?>
<form name="form" method="post" action="">
  <table width="52%" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td colspan="2"><strong>Login Member </strong></td>
    </tr>
    <tr>
      <td width="30%">Nama</td>
      <td width="70%"><label>
        <input type="text" name="nama" id="nama">
      </label></td>
    </tr>
    <tr>
      <td>Password</td>
      <td><label>
        <input type="password" name="pass" id="pass">
      </label></td>
    </tr>
    <tr>
      <td> </td>
      <td><label>
        <input type="submit" name="login" value="Submit">
      </label>
        <label>
        <input type="reset" name="reset"  value="Reset">
      </label></td>
    </tr>
  </table>
</form>

penjelasan file login.php

Pada script diatas kita menggunakan fungsi  session_name();  dan variabel  $_SESSION[nama]  yang digunakan utuk mengecek apakah user tersebut sudah login atau belum.

MEMBUAT HALAMAN MEMBER

Anda Copy dan simpan script dibawah ini denga nama member.php
<?php
session_start();
include("koneksi.php");

if(empty($_SESSION['nama']))
{
echo "Anda belum Login, Login <a href='login.php'>disini</a>";
}
else
{
if(isset($_POST['logout']))
{
session_destroy();
header("location:member.php");
echo "Anda telah Logout";
}

?>
<form name="form1" method="post" action="">
  <label>
  Terimakasih telah Login, Apakah anda mau 
  <input type="submit" name="logout" id="logout" value="Logout">
  </label>
</form>

<?php
}
?>
Setelah itu anda test megunakan server local anda.
Anda juga dapat men-download full scriptnya yang berisi file daftar.php, login.php,member.php.
newer post
older post Home