Membuat Form Login dengan JQuery

Yap.. Libur ngepos beberapa hari buat nyari judul yang enak buat bahan postingan tapi tetep aja ga nemu bahan yang bagus. :p

Kemaren sempet bikin aplikasi web buat bahan iseng-iseng belajar pake jQuery. Ternyata asik juga pake jQuery, website yang kita bikin jadi lebih dinamis. Buat yang belum tahu jQuery itu apaan sini gue kasih tahu sedikit, gampangnya jQuery tuh Library dari banyak  Java Script. Jadi lebih gampangnya lagi jQuery juga adalah java script yang dikumpulin jadi satu paket. Itu menurut gue aja, kalau mau tau lebih lanjut masuk aja ke websitenya di sini. Jenis-jenisnya juga banyak ada jQuery UI, jQuery Tools, dsb. Kan udah dibilangin kalo mau tau lebih lanjut masuk aja ke websitenya atau tanya ke mbah google.

Nah kebetulan kemaren gue bikin form login pake efek exposenya jQuery. Kaya gimana sih efeknya?? Nih liat gambar di bawah :

(ini gambar form awal sebelum kena efek expose)

(ini gambar pas texfield atau formnya di klik. Sebenernya ada animasinya, transisi gelap ke terang)

Pengen tau cara bikinnya ayo terusin dulu bacanya…..

Ya sekarang kita bakalan bikin form kaya gitu. Pertama download dulu script jQuerynya di website jQuery.

Karena bikin masukin kode di sini nya agak ribet. Mending download aja dah sourcenya di sini.

Read More

Cara Upload, Menyimpan, dan Menampilkan Gambar dengan PHP dan Mysql

Cara Upload, Menyimpan, dan Menampilkan Gambar dengan PHP dan Mysql

  

Membuat script untuk menguload image,menyimpan lokasi image ke database dan menampilkannya

Ikuti langkah-langkah dibawah.

Step 1 : Persiapkan Database

1. Buat database dengan nama db_tutorial
2. Siapkan tabel dengan nama tb_image, dengan struktur tabel seperti gambar dibawah ini.
3. Done with the database!

Step 2 : Persiapkan Folder Kerja

1. Buat folder dengan nama helloMobile dalam document root anda
2. Buat lagi folder dengan nama image didalam folder helloMobile yang telah anda buat sebelumnya. Folder image ini adalah folder yang akan digunakan untuk menyimpan gambar hasil upload.
3. Simpan semua file dalam praktikum ini dalam folder helloMobile tersebut.

Step 3 : Membuat script koneksi ke DB

1. Ketikkan script berikut,

<?php $host = "localhost"; $user = "root"; $pass = ""; $dbName = "db_tutorial"; mysql_connect($host, $user, $pass); mysql_select_db($dbName) or die ("Connect Failed !! : ".mysql_error()); ?>

2. simpan dengan nama connect.php, dan simpan dalam folder helloMobile

Step 4 : Membuat form upload image

1. Ketikkan script berikut,

<form name="form" method="post" enctype="multipart/form-data" action="proses.php"> Image : <input name="picture" type="file" /> <input type="submit" name="upload" value="Upload" /> </form>

2. simpan dengan nama formupload.php, simpan dalam folder helloMobile

Step 5 : Membuat script pemrosesan dan menampilkan gambar hasil upload

1. Ketikkan script berikut,

<?php include "connect.php"; $fileName = $_FILES['picture']['name']; //get the file name $fileSize = $_FILES['picture']['size']; //get the size $fileError = $_FILES['picture']['error']; //get the error when upload if($fileSize > 0 || $fileError == 0){ //check if the file is corrupt or error $move = move_uploaded_file($_FILES['picture']['tmp_name'], 'E:/DocumentRootYuni/helloMobile/image/'.$fileName); //save image to the folder if($move){ echo "<h3>Success! </h3>"; $q = "INSERT into tb_image VALUES('','$fileName','image/$fileName')"; //insert image property to database $result = mysql_query($q); $q1 = "SELECT location from tb_image where filename = '$fileName' limit 1 "; //get the image that have been uploaded $result = mysql_query($q1); while ($data = mysql_fetch_array($result)) { $loc = $data['location']; ?> <br/> <h2> This is the Image : </h2> <img src="<?php echo $loc; ?>" /> <!-- show the image using img src --> <?php } } else{ echo "<h3>Failed! </h3>"; } } else { echo "Failed to Upload : ".$fileError; } ?>

2. simpan dengan nama prosesupload.php

Semoga Beramanfaat bagi yang mau belajar dan memahami,,,,

Read More

Membuat sistem login multi user menggunakan cookie pada php

Membuat sistem login multi user menggunakan cookie pada php

Assalamualaikum wr wb

Tempo dulu sudah saya tulis tutorial serupa tentang cara membuat sistem login multi user, hanya saja bedanya kalo sebelumnya menggunakan sessions, dan sekarang saya akan mencoba menggunakan fungsi cookie yang dimiliki oleh php. dan pada kesempatan kali ini fungsi cookie ini akan saya gunakan untuk menyimpan informasi username, pasword, status user, dan lain-lain untuk keperluan dalam proses login dan logout seorang pengguna.

Lalu apa sih bedanya menggunakan sessions dan cookie itu?

Baiklah, saya akan coba sedikit menjelaskan apa perbedaannya menggunakan sessions dan cookie!
Jika kita menyimpan suatu informasi menggunakan cookie, maka informasi tersebut akan disimpan pada browser pengguna, karena cookie ini disimpan pada browser yang di gunakan oleh seorang pengguna atau pengunjung website tersebut, berbeda halnya dengan sessions, jikalau kita menggunakan sessions maka informasi tersebut akan tersimpan di server yang kita gunakan, dan sessions ini sipatnya sementara/temporary.

Kedua fungsi ini kegunaanya hampir sama, yaitu untuk menyimpan informasi website yang mencakup informasi apa saja yang diperlukan, artinya bukan hanya informasi tentang username dan pasword saja, melainkan bisa di pergunakan sebagai acuan guna ketetapan dalam pengaturan pengunjung website, dan sebagainya... Seperti misalnya fungsi cookie yang digunakan untuk menetapkan informasi bahasa yang di gunakan oleh seorang user atau pengunjung website, maka dengan adanya Cookie ini website tersebut akan menyesuaikan bahasa yang akan digunakan oleh pengunjung itu, dan informasi ini tersimpan pada browser yang digunakan oleh pengunjung tersebut, dan kelebihan dari cookie ini adalah selama data history pada browser pengguna masih ada dan belum di bersihkan, maka cookie ini akan selalu berguna jika suatu saat user tersebut mendatangi website tersebut, asalkan masa dari cookie itu masih berlaku.

Lalu, jika kita membuat Applikasi website, sebaiknya menggunakan sessions apacookie?

Tergantung keadaan dan kebutuhan si pembuat Applikasi, jika kita menginginkan keamanan website dan tidak menggunakan protokol https alangkah baiknya dalam proses login dan logout menggunakan sessions, karena seperti yang saya jelaskan di atas, bahwa sessions ini sipatnya sementara, dan selain itu informasi yang tersimpan bukan ada pada browser pengguna, melainkan pada directory server yang kita gunakan, tetapi jika kebutuhan applikasi tersebut mengharuskan untuk menggunakan Cookie yaitu demi kenyamanan seorang user seperti yang digunakan oleh situs-situs jejaring atau komunitas user, seperti Facebook.com dan lain-lain, maka tidak menutup kemungkinan untuk menggunakan Cookie.

Mungkin dengan sedikit penjelasan mengenai sessions dan cookie di atas dapat menjadikan gambaran suatu ide buat anda. Sekarang saatnya saya akan membuat sistem login dan logout yang menggunakan cookie sesuai dengan judul di atas.

Fungsi perintah cookie ini adalah:

setcookie("nama_cookie", "isi_cookie", "waktu_kadalwarsa", "lokasi_directory", "nama_domain", "guna_secure_domain");

Contoh Penggunaanya adalah:

setcookie("username", "ujangrohidin", time()+3600 ,"/path/","namadomain.com", false);

Seting cookie di atas adalah untuk waktu 1 jam, lihat pada field 3 menggunakantime()+3600, dan cookie diatas dapat di akses oleh semua koneksi baik protokol httpataupun dengan https oleh karena itu pada field terakhir terisikan False, karena jika kita isikan True maka cookie tersebut hanya dapat di akses dengan menggunakan protokol https (Secure Domain). 

Sedangkan untuk penghapusan informasi mengenai cookie ini adalah: 

setcookie("nama_cookie", "", time() ,"", "", false); 

Sebenarnya fungsi Cookie ini bisa kita sederhanakan dengan menghilangkan atau mengabaikan beberapa field string, seperti menghilangkan path, nama domain, dan info secure domain.

Contoh:
Jika kita ingin menyimpan informasi nama seorang user maka buat kode perintah seperti ini:

setcookie("username", "ujangrohidin", time()+3600");

Nah, sekarang saya akan memberikan contoh penggunaanya untuk dijadikan pembelajaran bagi anda, mudah-mudahan berguna, dan contoh ini adalah menyangkut sistem login multi user, dimana tiap-tiap user memiliki akses yang berbeda-beda sesuai informasi yang tersimpan pada database, kemudian informasi tersebut nantinya akan disimpan pada cookie di browser pengguna.

Pertama-tama silahkan buat terlebih dahulu database nya dengan menggunakan MySQL, karena dalam contoh ini saya menggunakan database MySQL sebagai penyimpanan data nya. Silahkan buat database baru bernama terserah anda, kemudian tambahkan table baru beserta field-field nya, silahkan copy paste saja contoh table pada database dibawah ini : 

Table tab_user

CREATE TABLE `tab_user` (
  `user_id` int(11) NOT NULL auto_increment,
  `username` varchar(50) collate latin1_general_ci NOT NULL,
  `password` varchar(50) collate latin1_general_ci NOT NULL,
  `user_nama` varchar(50) collate latin1_general_ci NOT NULL,
  `user_akses` enum('gratis','premium','admin') collate latin1_general_ci NOT NULL default 'gratis',
  PRIMARY KEY  (`user_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci AUTO_INCREMENT=5 ;

Contoh isi data untuk table tab_user

INSERT INTO `tab_user` VALUES (1, 'andi', '1234', 'Andi Doang', 'gratis');
INSERT INTO `tab_user` VALUES (2, 'toto', '1234', 'Toto Kuncoro', 'premium');
INSERT INTO `tab_user` VALUES (3, 'calim', '1234', 'Calim Weh', 'admin');
INSERT INTO `tab_user` VALUES (4, 'widia', '1234', 'Widia Yatin', 'gratis');

Kemudian setelah database dibuat, buatlah file php yang bernama index.php

File index.php

<?php
//Koneksi ke database MySQL
//Anda bisa menggunakan include "koneksi.php";
$server = "localhost:3308"; //Saya menambahkan Port karena saya menggunakan "LocalServer"
$username = "root"; //Sesuaikan username database nya, biasanya "root"
$password = "1234"; //Sesuaikan password database nya
$database = "NAMADATABASE"; //Sesuaikan NAMA DATABASE nya
mysql_connect($server,$username,$password) or die("Koneksi gagal");
mysql_select_db($database) or die("Database tidak bisa dibuka");
//Dibawah ini adalah Script Untuk memproses Login User 
//Jika Cookie username dan Cookie password ada
if (isset($_COOKIE['username']) && isset($_COOKIE['password']))
{
$username = $_COOKIE['username'];
$password = $_COOKIE['password'];
//Buat Query ke MySQL dengan Where Cookie username dan Cookie password
//Untuk mendapatkan kelengkapan Informasi yang lainya, seperti nama dan lainya.
$query_user = mysql_query("SELECT * FROM tab_user WHERE username = '$username' AND password = '$password' LIMIT 1");
while ($data_user = mysql_fetch_array($query_user))
{
 $user_nama = $data_user['user_nama'];
} 
//Dibawah ini adalah Script untuk Proses Logout, jika Cookie masih ada
//Buat proses Logout untuk menghapus Cookie username, password, dan user_akses
if ($_REQUEST['user'] == "logout"){
setcookie("username", "", time());
setcookie("password", "", time());
setcookie("user_akses", "", time());
//Setelah Cookie dihapus kembalikan halaman ke index.php 
echo "Anda telah keluar! Jika tidak di alihkan silahkan <a href='index.php'>Klick Disini!</a>
<script>window.location = 'index.php';</script>";
}  
//Masih didalam jika Cookie username dan Cookie Password ada
//Dalam hal ini anda bisa menggunakan include file
//Seperti contoh user_akses adalah gratis maka gunakan: include "gratis.php";
//Karena ini hanya contoh, jadi saya hanya menggunakan string sapaan saja!
//Jika Cookie user_akses adalah gratis
 if ($_COOKIE['user_akses'] == "gratis"){
 echo "Selamat datang <b>$user_nama</b>, Anda login sebagai user Gratis... silahkan di Upgrade! <a href='?user=logout'>Logout</a>";
 }
 //Jika Cookie user_akses adalah premium
 elseif ($_COOKIE['user_akses'] == "premium"){
  echo "Selamat datang <b>$user_nama</b>, Anda login sebagai user Premium... Thank's! <a href='?user=logout'>Logout</a>";
 }
 //Jika Cookie user_akses adalah admin
 elseif ($_COOKIE['user_akses'] == "admin"){
  echo "Selamat datang <b>$user_nama</b>, Anda login sebagai Admin! <a href='?user=logout'>Logout</a>";
 }
 //Jika tidak ada Cookie user_akses
//Dibawah ini setelah else, Anda bisa membuatkan form untuk user memberikan Password kembali
 else{
  echo "Selamat datang <b>$user_nama</b>, Anda tidak memiliki akses kemanapun!
  Silahkan melakukan proses Login kembali! <a href='?user=logout'>Logout</a>";
 }
}
//Jika salah satu atau kedua Cookie username dan Cookie password tidak ada
//Maka perlihatkan Form Login lengkap dengan Proses login nya 
else
{
//Proses login jika tombol submit di tekan
if (isset($_POST['login']))
{
$loguser = $_POST['username'];
$logpass = $_POST['password'];
//Jika form username kosong
if ($loguser == ""){echo "Kolom Username jangan dikosongkan!";}
//Jika form password kosong
elseif ($logpass == ""){echo "Kolom Password jangan dikosongkan!";}
//Jika kedua form username dan password di isi maka akan di proses
else
{
  //Buat Query untuk mengambil dan mencocokan data login dengan yang ada di database
  //Anda bisa mencocokan data login satu-persatu dengan yang ada di database
  //Disini saya sekaligus dengan kedua nya, silahkan anda variasikan sendiri 
 $query = mysql_query("SELECT * FROM tab_user WHERE username = '$loguser' AND password = '$logpass' LIMIT 1");
 $jumquery = mysql_num_rows($query);
 //Jika data login ada pada database maka akan di cocokan dan di simpan pada Cookie
 if ($jumquery > 0)
 {
  while ($data = mysql_fetch_array($query))
  {
   $hasil_user = $data['username'];
   $hasil_pass = $data['password'];
   $hasil_akses = $data['user_akses'];
  }
  //Buat Cookie username, password, dan user_akses untuk disimpan di Browser
  //Masa Cookie di set ke 3600 untuk 1 jam kadalwarsa 
  setcookie("username", "$hasil_user", time()+3600);
  setcookie("password", "$hasil_pass", time()+3600);
  setcookie("user_akses", "$hasil_akses", time()+3600);
  //Pengalihan (Refresh halaman) menggunakan JavaScript
  echo "Silahkan Tunggu... Jika Anda tidak di alihkan silahkan
  <a href='index.php'>Klick Disini!</a><script>window.location = 'index.php';</script>";
 }
 //Jika username tidak ada atau password salah maka Login Gagal.
 else {
 echo "<font color='#EE0000'>Login GAGAL, Username tidak ada atau Password Salah!</font>";
 }
 }
}
?>
<!-- Ini adalah form login, yang hanya diperlihatkan apabila tidak ada Cookie username dan Cookie password. Anda bisa menggunakan Fungsi Include file seperti contoh: include "form.php"; -->
<h2>Anda harus login!</h2>
<form name="formlogin" action="<?php $_SERVER['PHP_SELF']; ?>" method="post" onsubmit="return true">
Username : <input type="text" name="username"><br>
Password : <input type="password" name="password"><br>
<input type="submit" name="login" value="Login">
</form>
<?php
}
?>

CreenShot :

Dalam contoh di atas saya membuatnya menjadi satu file saja yaitu index.php, dan jika anda membuat sistem login dengan metode yang serupa, silahkan di modifikasi sendiri, buatlah terpisan satu-persatu, seperti file form untuk login, file untuk memproses dan mencocokan data login, halaman user akses, dan sebagainya, supaya lebih gampang untuk dibuatnya.

Untuk Tes kode php di atas sebaiknya anda jangan mengcopykan kode di atas, silahkan download kode lengkapnya disini http://www.ziddu.com/download/21014247/login-cookie.zip.html

Jika komputer anda belum bisa untuk menjalankan php, sebaiknya download dan Install terlebih dahulu LocalServer, silahkan anda mendownload nya disini http://sourceforge.net/projects/local-server

Semoga dengan tutorial singkat ini anda mendapatkan ide-ide yang lebih cemerlang lagi, silahkan untuk memberikan tanggapan tentang tutorial di atas, dan bagi anda yang sedang belajar semoga dapat membantu.

Terimakasih, Wassalam...

Read More