Kamis, 22 September 2011

Membuat Form login Anti SQL Injection

Membuat form login anti SQL injeksi, SQL injection


Nah temen-temen mungkin pernah bikin web padahal halaman adminnya sudah dikasih halaman validasi atau login supaya tidak semua orang bisa masuk sebagai admin koq ya tetep aja ada yang iseng merusaknya.. nah mungkin itu karena form login temen-temen belum sepenuhnya aman. Coba dah temen-temen tuliskan ‘OR 1=1”// pada form username dengan password bebas da… apa hasilnya? Jika muncul tanda error seperti ketika temen-temen error menjalankan script PHP ketika belajar, nah itu tandanya  formnya belum aman,dengan  SQL tertentu bisa saja seorang hacker bisa masuk meskipun tanpa otoritas melakukan operasi yang tidak seharusnya.


Untuk menangani hal tersebut, temen-temen sebaginya merubah tiap masukkan dari form menjadi teks biasa, jadi tulisan yang dimasukkan lewat form tidak dikenali sebagai perintah. Nah teman-teman bisa memanfaatkan fungsi yang disediakan oleh PHP,  seperti stripslashes(),strip_tags(),htmlspecialchars(). Itu fungsinya buat apa, nah kalo untuk itu secara umum untuk merubah tiap masukkan dari form menjadi text biasa, untuk jelasnya silakan baca di manual PHP gratis yang dapat di unduh di  <sini>


Terus bagaimana praktiknya? Liat aja ni…









function anti_injection($data){

$filter = stripslashes(strip_tags(htmlspecialchars($data,ENT_QUOTES)));

return $filter;

}

NOTE: $data berupa masukan dari form.

Login.php






<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

<title>

</title>

<link href="default.css" rel="stylesheet" type="text/css" media="screen">

<script language="javascript">

function validasi(form){

if (form.user_name.value == ""){

alert("Anda belum mengisikan Username.");

form.user_name.focus();

return (false);

}

if (form.password.value == ""){

alert("Anda belum mengisikan Password.");

form.password.focus();

return (false);

}

return (true);

}

</script>

</head>

<body bgcolor="#edeff3">

<div id="loginbox">

<div class="top-login">

</div>

<div class="main-login">

<div class="login-header">

<div class="logo">

<span class="title">

<img src="images/logo.png" alt="" width="185" height="80" class="picture" />

</span>

</div>

</div>

<form name="login" action="validasi.php" method="POST" onSubmit="return validasi(this)">

<div class="login-inside">

<div class="login-data">

<table width="100%" border="0" cellspacing="0" cellpadding="0">

<tr>

<td><div align="center">

<table cellpadding="0" cellspacing="0">

<tr>

<td height="25">Username</td>

<td> :

<input type="text" name="user_name"  class="text" /></td>

</tr>

<tr>

<td height="26">Password</td>

<td> :

<input type="password" class="text" name="password" /></td>

</tr>

<tr>

<td colspan="2"><div align="right">

<input name="submit"  class="submit" type="submit" value="LOGIN" />

</div></td>

</tr>

</table>

</div></td>

</tr>

</table>

</div>

</div>

</form>

</div>

<div class="bottom-login"></div>

</div>

<p align="center"><small>&copy;&nbsp; Copy Right 2011 &nbsp;&nbsp; Design by Islah Production</p>

</body>

</html>

Validasi.php






<?php

include("../konfigurasi/config.php");

konek_db();

$user      =anti_injection($_POST['user_name']);

$password  =anti_injection(md5($_POST['password']));

if (!(ctype_alnum($user)) OR !(ctype_alnum($password))){

header("location:notifi.php?tanda=tipe_data");

}else{

$sql="SELECT * FROM users WHERE user_name='$user' AND password='$password' AND status_blokir='N'";

$login=mysql_query($sql) or die("ERROR".mysql_error());

$ketemu=mysql_num_rows($login);

// Apabila user dan password ditemukan

if ($ketemu > 0){

$r=mysql_fetch_array($login);

session_start();

include "timeout.php";

//menginstance session dengan data di database

$_SESSION[namauser]     = $r[user_name];

$_SESSION[namalengkap]  = $r[nama_lengkap];

$_SESSION[passuser]     = $r[password];

$_SESSION[leveluser]    = $r[level];

$_SESSION[status_blokir]= $r[status_blokir];

// session timeout

$_SESSION[login] = 1;

timer();

$sid_lama = session_id();

session_regenerate_id();

$sid_baru = session_id();

//update session user supaya lebih aman

$sql_update_session="UPDATE users SET id_session='$sid_baru' WHERE user_name='$user'";

mysql_query($sql_update_session) or die("ERROR".mysql_error());

header('location:media.php?module=home');

}else{

header("location:notifi.php?tanda=user");

}

}

?>

Timeout.php






<?php

session_start();

function timer(){

$time=6;

return $_SESSION[timeout]=time()+$time;

}

function cek_login(){

$timeout=$_SESSION[timeout];

if(time()<$timeout){

timer();

return true;

}else{

unset($_SESSION[timeout]);

return false;

}

}

?>

Notify.php

<?php

if ($_GET['tanda']=='tipe_data'){

$alert="TIPE DATA MASUKKAN TIDAK DIKENALI!";

}else if ($_GET['tanda']=='user'){

$alert="KOMBINASI PASSWORD DAN USER TIDAK DIKENALI!";

}else if ($_GET['tanda']=='time'){

$alert="TIME UP!";

}else if ($_GET['tanda']=='autority'){

$alert="SILAKAN LOGIN TERLEBIH DAHULU!";

}

echo"

<p align='center' style='margin-top:130px;color:#e93f0a;'>

<img src='images/Warnings.png' width='140px' height='140px'><br />

<b>$alert</b><br />

<a href=index.php>[back]</a>

</p>

";

?>

Penjelasan

Login.php untuk tampilan form login

Validasi.php untuk melakukan pengecekkan dan fungsi antiinjection dipanggil disini

Notify.php untuk peringatan

Timeout.php untuk automatis log out jika tidak ada operasi

Default.css untuk tampilan yang bagus

download kelengkapannya disini

dokumen

Source code


Membuat Menu horizontal dan vertikal halaman web

Membuat menu dan sub menu halaman web


Setelah posting-posting sebelumnya membahas tentang blogging dari pembuatan sampai operasi sederhananya, untuk kali ini akan berbagi sedikit ilmu tentang bagaimana membuat menu dan sub menu dalam membangun suatu halaman web. Sedikit diulang seperti yang pernah dijelaskan di blog ini pada wal posting mengenai apa saja yang diperlukan untuk membangun halaman web,  pada sesi kali ini hanya diperlukan notepad (rekomendasi notepad ++) dan browser untuk melihat hasilnya. Loh koq sederhana banget cuma butuh dua aplikasi? Bukanya sebelumnya diceritakan bagaimana cara menginstal aplikasi localhost/server local?. Sip… sip… wah kritis juga ente, berarti telah membaca posting sebelumnya hehe..


Jadi kalau dilihat lagi juga pada posting sebelumnya penjelasan tentang client side dan server side atau perbedaan PHP dan html, javascript, css. Secara singkatnya perbedaannya terletak pada eksekusi atau tempat dijalankannya kode, wah dikoreksi ya kalau salah jelasinnya hehe… intinya PHP butuh suatu server untuk menjalankan fungsi-fungsinya, sedangkan html, javascrip, css tidak membutuhkan cukup hanya dengan aplikasi client saja contohnya browser (firefox, IE, safari, dll)


Sudah jelaskan? Nah itulah sedikit alas an mengapa Cuma membutuhkan hanya dua aplikasi tersebut.


OK tidak usah berpanjang lebar lagi mengenai hal tersebut langsung saja kita mulai langkah-langkah membuat menu pada engineering web. Menu yang biasa kita kenal ada dua macam menu horizontal yang biasanya terletak dibagian atas web dan menu vertical yang terletak dibagian samping, sidebar, kanan atau kiri.


Pertama akan dibuat menu sidebar


Yang perlu dipahami terlebih dahulu adalah sintak dasal html seperti yang dijelaskan sebelumnya, nah untuk kali ini perlu ditambah pemahamanya tentang sintak bullet n numbering kalo dalam ms word, bagaimana sintaknya? Seperti ini


<ul>

<li>coba 1</li>

<li>coba 2</li>

<li>coba 3</li>

</ul>

Diletakkan diantara body, nah selain sintak itu juga perlu diketahui tentang sedikit css.

Liat contohnya ni






<html><head>

<title>

</title>

<style type="text/css">

#menu{

background:#6699CC url(images/menu.png);

position:relative;

width:100px;

border: 1px solid #000;

}

#menu ul{

list-style:none;

padding: 0px;

margin: 0px;

display:block;

}

#menu ul li{

position:relative;

}

#menu ul li a{

display:block;

border-bottom: 1px solid #000;

text-decoration:none;

color: #fff;

padding: 10px;

}

#menu ul li a:hover{

background: #000;

color: #fff;

}

#menu ul li ul{

display:none;

}

#menu ul li:hover ul{

display:block;

position:absolute;

width:100px;

left:98px;

}

#menu ul li:hover ul a{

background:#6699CC url(images/menu.png);

}

</style>

</head>

<body>

<div id="menu">

<ul>

<li><a href="#">menu 1</a>

<ul>

<li><a href="#">menu 1</a></li>

<li><a href="#">menu 2</a></li>

<li><a href="#">menu 3</a></li>

<li><a href="#">menu 4</a></li>

<li><a href="#">menu 5</a></li>

</ul>

</li>

<li><a href="#">menu 2</a>

<ul>

<li><a href="#">menu 1</a></li>

<li><a href="#">menu 2</a></li>

<li><a href="#">menu 3</a></li>

<li><a href="#">menu 4</a></li>

<li><a href="#">menu 5</a></li>

</ul>

</li>

<li><a href="#">menu 3</a></li>

<li><a href="#">menu 4</a></li>

<li><a href="#">menu 5</a></li>

</ul>

</div>

</body>

</html>

Maka hasilnya

Kemudian menu horizontal






<html>       <head>

              <title>

              </title>

              <style type="text/css">

                     #menu{

                           position:relative;

                           width:100%;

                           height:30px;

                           background:url(images/menu.png)repeat-x;

                           border: solid 1px #000;

                     }

                     #menu ul{

                           padding:0px;

                           margin:0px;

                           list-style:none;

                     }

                     #menu ul li{

                           float:left;

                           position:relative;

                     }

                     #menu ul li a{

                           float:left;

                           color:#fff;

                           padding:5px;

                           border-right:1px solid #000;

                           text-decoration:none;

                           display:block;

                     }

                     #menu ul li a:hover{

                           background-color:#000;

                     }

                     #menu ul li ul{

                           display:none;

                           padding:0px;

                           margin:0px;

                     }

                     #menu ul li:hover ul{

                           display:block;

                           position:absolute;

                           top:31px;

                           left:0;

                     }

                     #menu ul li:hover ul li a{

                           display:block;

                           color:#fff;

                           background:#6699CC url(images/menu.png)repeat-x;;

                           color:#fff;

                           width:130px;

                     }

                     #menu ul li:hover ul li a:hover{

                           background:#000;

                           color: #fff;

                     }

              </style>

       </head>

       <body>

       <div id="menu">

              <ul>

                     <li><a href="#">menu 1</a>

                           <ul>

                                  <li><a href="#">menu 1</a></li>

                                  <li><a href="#">menu 2</a></li>

                                  <li><a href="#">menu 3</a></li>

                                  <li><a href="#">menu 4</a></li>

                                  <li><a href="#">menu 5</a></li>

                           </ul>

                     </li>

                     <li><a href="#">menu 2</a>

                     <ul>

                                  <li><a href="#">menu 1</a></li>

                                  <li><a href="#">menu 2</a></li>

                                  <li><a href="#">menu 3</a></li>

                                  <li><a href="#">menu 4</a></li>

                                  <li><a href="#">menu 5</a></li>

                           </ul>

                     </li>

                     <li><a href="#">menu 3</a></li>

                     <li><a href="#">menu 4</a></li>

                     <li><a href="#">menu 5</a></li>

              </ul>

       </div>       

       </body>

</html>

Selamat mencoba semoga sukses…

download kelengkapan disini

Key word jangan menyerah, segala sesuatu terasa susah karena belum terbiasa

Minggu, 18 September 2011

Mengoperasikan admin pada wordpress

Untuk melakukan pengaturan, perubahan tampilan, melakukan posting artikel dan lain sebagainya dalam rangka menjalankan fungsi-fungsi blogging, pemahaman tentang  operasi admin menjadi sangat penting. Terutama bagi yang bercita-cita menjadi seorang web master, pengetahuan dasar tentang operasi blog sangatlah penting. Untuk melakukan operasi admin pada wordpress hal pertama yang harus dilakukan adalah mengunjungi halaman otentivikasi atau sign in seperti ketika pembaca masuk kedalam facebook, yahoo, gmail dan lain-lain.