Loading

21 Mei 2010

Medeteksi Browser Yang Digunakan User Menggunakan Javasript

Untuk medeteksi browser yang digunakan oleh user yang sedang digunakan untuk browsing bisa menggunakan banyak cara, salah satunya dengan menggunakan Javasript. Berikut ini contoh mendeteksi browser dengan menggunakan script Javascript

deteksiBrowser.html

<html>

<head>

<title>MENDETEKSI BROWSER YANG DIGUNAKAN USER DENGAN JAVASCRIPT</title>

</head>

<body>

<script type="text/javascript">

document.write("<p>Browser: ")

document.write(navigator.appName +"</p>")


document.write("<p>BrowserVersion: ")

document.write(navigator.appVersion +"</p>")


document.write("<p>Code:")

document.write(navigator.appCodeName +"</p>")


document.write("<p>Platform: ")

document.write(navigator.platform +"</p>")


document.write("<p>Cookies enabled: ")

document.write(navigator.cookieEnabled +"</p>")


document.write("<p>Browser's User Agen Header: ")

document.write(navigator.userAgent +"</p>")

</script>

</body>

</html>


Keterangan Script:

  • navigator.appName: menampilkan nama browser yang digunakan
  • navigator.appVersion: menampilkan versi browser yang digunakan
  • navigator.appCodeName: menampilkan kode nama browser yang digunakan
  • navigator.cookieEnabled: menampilkan setting cookie pada browser
  • navigator.userAgent: menampilkan informasi browser
[download] [view demo]

18 Mei 2010

Script PHP auto logout system / logout otomatis


Sesuai dengan request untuk postingan baru dan pertanyaan dari salah satu pengunjung blog kami .... yaitu script untuk

membuat sistem logout otomatis jika suatu account sudah login kemudian ia login kembali dengan browser yang berbeda, maka

pada artikel ini akan membahas permasalahan tersebut.

Disini saya tidak menggunakan username dengan password yang dinamis, saya menggunakan username dengan password statis

(untuk mempermudah tutorial saja). Username yang digunakan disini yaitu "catment" dengan password "qwerty" tanpa tanda

petik.

Untuk kali ini saya hanya membuat sistem yang sederhana saja.

Sebelumnya kita buat halaman konfigurasi database, simpan dengan nama db_config.php

<?php
$hostname_conn="localhost"; //hostname
$username_conn=""; //username database
$password_conn=""; //password
$db_conn=""; //nama database yang digunakan
mysql_connect($hostname_conn,$username_conn,$password_conn,$db_conn) or die ("Koneksi gagal!");
mysql_select_db($db_conn);
?>
Selanjutnya buat halaman login yang disini saya buat sekaligus menjadi halaman index, maka beri nama halaman ini dengan

index.php
<?php
session_start();
include"db_config.php";
include"session.php";
if($_SESSION['login_stat']=="fail")
{
echo"$_SESSION[message]<hr />";
unset($_SESSION['login_stat'],$_SESSION['message']);
}
?>
<form action="login_proses.php" method="post">
Username - Password : <input type="text" name="username" /> - <input type="password" name="pass" /> <input

type="submit" name="act" value="Login" />
</form>

Selanjutnya halaman proses login maupun logout (saya buat jadi 1file), beri nama dengan login_proses.php

<?php
session_start();
include"db_config.php";
$username=$_POST['username'];
$pass=$_POST['pass'];
$act=$_POST['act'];
$do=$_GET['do'];
/**login**/
if(isset($_REQUEST['act']) && $act=="Login")
{
if($username=="catment" && $pass=="qwerty") //misalkan username dan password yg sesuai yaitu user "catment" dengan

password "qwerty"
{
$sesi=md5(microtime());
/*cek data login sblmnya*/
$command="SELECT * FROM log_login WHERE username='$username'";
$row=mysql_fetch_array(mysql_query($command));
if($row[username]!=="")
{
$command="DELETE FROM log_login WHERE username='$row[username]'";
$delete=mysql_query($command);
}
/*--------*/
/*input database*/
$command="INSERT INTO log_login VALUES ('$username','$sesi')";
$input=mysql_query($command);
/*--------*/
/*cek input database*/
if($input==1)
{
$_SESSION['username']="$username";
$_SESSION['login_stat']="ok";
$_SESSION['sesi']=$sesi;
$_SESSION['message']="Welcome, $username..!! [<a href='login_proses.php?do=logout'>Logout</a>]";
header("Location: index.php");
}
else
{
$_SESSION['login_stat']="fail";
$_SESSION['message']="Maaf ada gangguan, silahkan coba login kembali.";
header("Location: index.php");
}
/*--------*/
exit();
}
else
{
header("Location: index.php");
$_SESSION['login_stat']="fail";
$_SESSION['message']="Maaf username dengan password salah!!";
exit();
}
}
/**--------**/
/**logout**/
if($do=="logout")
{
/*delete database*/
$command="DELETE FROM log_login WHERE username='$_SESSION[username]'";
$delete=mysql_query($command);
/*--------*/
/*cek delete database*/
if($delete==1)
{
session_destroy();
header("Location:index.php");
}
else
{
echo"Maaf logout gagal! Ada gangguan, silahkan coba <a href='login_proses.php?do=logout'>logout</a> kembali.";
}
/*--------*/
}
/**--------**/
?>

Dan terakhir adalah membuat halaman session.php

<?php
$command="SELECT * FROM log_login WHERE username='$_SESSION[username]'";
$row=mysql_fetch_array(mysql_query($command));
if($_SESSION['login_stat']=="ok" && $_SESSION['sesi']==$row[sesi])
{
echo"$_SESSION[message]<hr />";
exit();
}
if($_SESSION['login_stat']=="ok" && $_SESSION['sesi']!==$row[sesi])
{
session_destroy();
}
?>

Untuk tabel database yang saya gunakan yaitu:
CREATE TABLE `log_login` (
`username` varchar(100) NOT NULL default '',
`sesi` varchar(32) NOT NULL default '',
PRIMARY KEY (`username`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1;
Maka tabelnya akan seperti ini:

Untuk mencoba demonya silahkan buka catment.co.cc/demo/login
Untuk mendownload file yang sudah jadi secara lengkap silahkan [DOWNLOAD]

2 Mei 2010

Javascript Calendar Date Picker / Javascript Calendar Popup / Kalender Javascript


Javascript Calendar Date Picker / Javascript Calendar Popup / Kalender Javascript


Javascript calendar date picker digunakan untuk memilih tanggal dengan menggunakan calendar fixed yang sesuai dengan calendar sesungguhnya yang dapat dipanggil melalui popup window, sehingga ini juga termasuk javascript calendar popup. Pengembangan dari javascript calendar ini dapat digunakan juga sebagai javascript calendar event. Untuk kali ini saya menunjukan cara membuat javascript calendar date picker dengan popup window.
Javascript Calendar Date Picker / Javascript Calendar Popup / Kalender Javascript
Halaman pertama:

<head>
<title>Script Javascript Kalender / Pick Date Calendar</title>
</head>
<body>
<center>
<h1>Script Javascript Kalender / Pick Date Calendar</h1>
<ol>
<li>
Pilih Tanggal :
<input type="text" name="pick_date[0]" id="pick_date[0]" disabled="disabled" />
<input type="button" value="" style="background-image:url(cal.gif); background-repeat:no-repeat; background-position:center; border:none;" onClick="pick('pick_date[0]');" />
</li>
<li>
Pilih Tanggal :
<input type="text" name="pick_date[1]" id="pick_date[1]" disabled="disabled" />
<input type="button" value="" style="background-image:url(cal.gif); background-repeat:no-repeat; background-position:center; border:none;" onClick="pick('pick_date[1]');" />
</li>
</ol>
</center>
<script type="text/javascript" language="javascript">
<!--
function pick(tgt)
{
window.open("kalender_pick.php?rand="+Math.random()+"&tgt="+tgt,"Kalender","width=500,height=400,alwaysRaised=yes,scrollbars=yes,directories=no,location=no,menubar=no,toolbar=no")
}
//-->
</script>
</body>

Halaman javascript calendar date picker / javascript calendar popup, simpan dengan nama file kalender_pick.php

<html>
<head>
<meta name="description" content="javascript calendar date picker / javascript calendar popup / kalender javascript" />
<meta name="keyword" content="javascript calendar date picker,script calendar javascript,javascript,calendar,script,kalender" />
<script language="javascript" type="text/javascript">
/*blocker*/
if(window.opener==null)
{
window.location="index.php";
}
/*--------*/
</script>
<title>Script Javascript Kalender / Pick Date Calendar</title>
</head>
<body>
<center>
<h1>Script Javascript Kalender / Pick Date Calendar</h1>
<div id="kalender"></div>
</center>
<script type="text/javascript" language="javascript">
<!--
var array_day=["Minggu","Senin","Selasa","Rabu","Kamis","Jumat","Sabtu"];
var array_month=["Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember"];
var date;
var year;
var month;
var day;
var go_year;
var go_month;
var fulldate;
var isi;
var now_date=new Date();
var now_day=now_date.getDate();
var now_month=now_date.getMonth();
var now_year=now_date.getYear();
var url=document.location.href;
var tgt=url.lastIndexOf("tgt=");
tgt=url.slice(tgt+4);
tgt=window.opener.document.getElementById(tgt);
now();
/*now*/
function now()
{
date=new Date();
calendar(date);
}
/*--------*/
/*newdate*/
function newdate()
{
go_month=document.getElementById("sel_month");
date=new Date(go_year,go_month.value);
return calendar(date);
}
/*--------*/
/*calendar*/
function calendar(date)
{
year=date.getFullYear();
month=date.getMonth();
day=date.getDate();
isi="<form>";
isi+="<table align='center' border=1 cellpadding=3 cellspacing=0>";
/**baris 1 (menu2 perintah)**/
isi+="<tr>";
isi+="<td colspan='7' align='center'>";
/*today button*/
isi+="<input type='button' name='today' value='Today' onClick='now();' /> ";
/*--------*/
/*select month*/
date.setDate(1);
isi+="<select name='sel_month' id='sel_month'>";
for(i=0;i<10;i++)
{
if(i==month)
{var selected="selected='selected'";}
else{selected="";}
isi+="<option value=\"0"+i+"\" "+selected+">"+array_month[i]+"</option>";
}
for(i=10;i<12;i++)
{
if(i==month)
{var selected="selected='selected'";}
else{selected="";}
isi+="<option value=\""+i+"\" "+selected+">"+array_month[i]+"</option>";
}
isi+="</select> ";
/*--------*/
/*decrease tahun*/
go_year=year;
isi+="<input type='button' name='year_down' value='<' onClick=\"go_year=document.getElementById('sel_year').value-1; document.getElementById('sel_year').value=go_year;\" /> ";
/*--------*/
/*output tahun*/
if(go_year==year)
{go_year=year;}
else{go_year=go_year;}
isi+="<input type='text' name='sel_year' id='sel_year' value='"+go_year+"' size='3' disabled='disabled' /> ";
/*--------*/
/*increase tahun*/
isi+="<input type='button' name='year_up' value='>' onClick=\"go_year=document.getElementById('sel_year').value-1+2; document.getElementById('sel_year').value=go_year;\" /> ";
/*--------*/
/*go button*/
isi+="<input type='button' name='go' id='go' value='Go' onClick=\"newdate();\" />";
/*--------*/
isi+="</td>";
isi+="</tr>";
/**--------**/
/*baris 2 (bulan, tahun)*/
isi+="<tr>";
isi+="<td colspan=7 align='center'><b>"+ array_month[month]+", "+year+"</b></td>";
isi+="</tr>";
/*--------*/
/*baris 3 (header hari)*/
isi+="<tr bgcolor='#00CCFF'>";
for(i=0;i<7;i++)
{
isi+="<td align='center'>"+array_day[i]+"</td>";
}
isi+="</tr>";
/*--------*/
/**baris kalender**/
/*cell tanpa tanggal bagian atas*/
if(date.getDay()!=0)
{
isi+="<tr>";
for(i=0;i<date.getDay();i++)
{
isi+="<td>&nbsp;</td>";
}
}
/*--------*/
/*cell yang ada tanggalnya*/
while(date.getMonth()==month)
{
fulldate=year+"-"+(month+1);
if(date.getDay==0)
{
isi+="<tr>";
}
/*hari ini*/
if(date.getDate()==now_day && date.getMonth()==now_month && date.getYear()==now_year)
{
isi+="<td align='center' bgcolor='#00FF00'><b><a href='#' onClick=\"tgt.value=fulldate+'-'\+"+date.getDate()+"; window.close();\">"+date.getDate()+"</a></b></td>";
}
/*--------*/
/**hari lain**/
else
{
/*minggu+sabtu*/
if(date.getDay()==0 || date.getDay()==6)
{var bgcolor="bgcolor='#FEC281'";}
/*--------*/
/*hari biasa*/
else{bgcolor="";}
/*--------*/
isi+="<td align='center' "+bgcolor+"><a href='#' onClick=\"tgt.value=fulldate+'-'\+"+date.getDate()+"; window.close();\">"+date.getDate()+"</a></td>";
}
/**--------**/
if(date.getDay()==6)
{
isi+="</tr>";
}
date.setDate(date.getDate()+1);
}
/*--------*/
/*cell tanpa tanggal bagian bawah*/
for(i=date.getDay();i<=6;i++)
{
isi+="<td>&nbsp;</td>";
}
/*--------*/
isi+="</table>";
isi+="</form>";
/**--------**/
document.getElementById("kalender").innerHTML=isi;
}
/*--------*/
//-->
</script>
</body>
</html>


Selesai! ^_^
Untuk melihat demo dari javascript calendar date picker atau bisa juga disebut javascript calendar popup ini silahkan kunjungi: catment.co.cc/demo/calendar
Atau download langsung filenya disini: [DOWNLOAD]

1 Mei 2010

Tutorial Script PHP : Menampilkan data dari database

menampilkan data dari database mysql dengan script PHP

dalam contoh kasus kali ini menyimpan data buku ke dalam database dan menampikannya ke dalam halaman web,.

langka pertama buat databasenya terlebih dahulu


CREATE TABLE buku (

kode_buku int(4) NOT NULL auto_increment,

judul varchar(50) NOT NULL ,

penerbit varchar(60) NOT NULL ,

pengarang varchar(60) NOT NULL ,

PRIMARY KEY (kode_buku)

);


langkah berikutnya buat halaman index.php dan di dalamnya ada form inputan


<html>

<head>

<title>Form Input Buku</title>

</head>

<body>

<center>

<a style="text-decoration:none" href="view.php"><h4>++Lihat data++</h4></a><h3>or</h3>

</center>

<form method="post" action="simpan.php">

<table align="center" border="0" cellpadding="0" cellspacing="0">

<tr>

<td align="center" colspan="3"><h3>Form Input</h3></td>

</tr>

<tr>

<td width="79" height="27">Judul</td>

<td width="9">:</td>

<td width="172"><input type="text" name="judul" maxlength="50" /></td>

</tr>

<tr>

<td width="79" height="27">Penerbit</td>

<td width="9">:</td>

<td width="172"><input type="text" name="penerbit" maxlength="60" /></td>

</tr>

<tr>

<td width="79" height="28">Pengarang</td>

<td width="9">:</td>

<td width="172"><input type="text" name="pengarang" maxlength="60" /></td>

</tr>

<tr>

<td width="79">&nbsp;</td>

<td width="9"></td>

<td width="172"><input type="submit" value="Simpan" /></td>

</tr>

</table>

</form>

<p align="center">created by <a style="text-decoration:none" href="catment.blogspot.com">catment.blogspot.com</a></p>

</body>

</html>


selanjutnya membuat konfigurasi/koneksi ke mysql, dan berinama file dengan config.php



<?php

//tentukan host, bila anda menggunakan local biasanya localhost

$hostname_conn="localhost";

//username, bila anda menggunakan local biasanya root

$username_conn="root";

//password MySQL

$password_conn="";

//nama database

$db_conn="db_buku";


mysql_connect($hostname_conn,$username_conn,$password_conn,$db_conn) or die ("Koneksi gagal total". mysql_error());

mysql_select_db ($db_conn);

?>



berikutnya membuat script php untuk menyimpan data ke dalam database, simpan file dengan nama simpan.php


<?php

//meng-includ-kan config.php ke dalam halaman ini

include"config.php";

$judul=$_POST['judul'];

$pengarang=$_POST['pengarang'];

$penerbit=$_POST['penerbit'];

//jika data-data dia atas tidak kosong maka akan di lakukan penyimpanan ke dalam database

if($judul!="" and $pengarang!="" and $penerbit!=""){

$insert=mysql_query("INSERT INTO buku ( kode_buku, judul, penerbit, pengarang) VALUES ('', '$judul', '$penerbit', '$pengarang')");

if ($insert){

header("location:view.php");

}

}else{

//dan jika kosong maka akan ditulis dibawah ini

echo"<p>data Kosong<a href='index.php'>| back |</a>";

}

?>

selanjutnya buat script PHP dan simpan file dengan nama view.php


<?php

//meng-includ-kan config.php ke dalam halaman ini

include"config.php";

//query untuk menampilkan semua data yang tersimpan di database buku dan di tampilkan dengan link yang membawa kodebuku

$query=mysql_query("SELECT * FROM buku");

while($row=mysql_fetch_array($query))

{

echo"kode_buku=$row[kode_buku]>>><a href='full_view.php?kode_buku=$row[kode_buku]'>lihat lengkap</a><br />";

}

echo"<p><a href='index.php'>| home |</a></p>";

?>

terakhir buat file script php dan simpan dengan nama full_view.php


<?php

include"config.php";

//meng-includ-kan config.php ke dalam halaman ini

$kode_buku=$_GET['kode_buku'];

//hampir sama dengan view.php hanya saja di sini di berikan kondisi where, dimana data yang di tampilkan berdasar kode_buku yang di bawa link yang ada di view.php

$query=mysql_query("SELECT * FROM buku WHERE kode_buku='$kode_buku'");

$row=mysql_fetch_array($query);

if($query){

echo"kode_buku = $row[kode_buku] <br />judul = $row[judul]<br />penerbit = $row[penerbit]<br />pengarang = $row[pengarang]";

}

echo"<p><a href='view.php'>| back |</a> &nbsp;&nbsp; <a href='index.php'>| home |</a></p>";

?>


script-script PHP di atas masih sangat sederhana, untuk hal lain seperti tampilan dan lain-lain silahkan di kembangkan lagi,.

[download script] <<>> [view demo @catment.co.cc]