Selamat Datang

Membuat Form Login dengan PHP, Jquery & CSS3 + Download

Membuat halaman login yang elegan dengan menggunakan  CSS3, Jquery + Ajax serta diproses dengan PHP.

Layout untuk halaman login administrator ini sebenarnya saya gunakan untuk project web aplikasi yang sedang saya kerjakan, setelah aplikasi selesai akhirnya terpikir untuk membagikan kepada teman-teman di Wakaka Design. Siapa tau bisa berguna dan membantu mempercepat pekerjaan teman-teman yang sedang membutuhkan sebuah desain halaman login administrator untuk pekerjaan nya.

Login Form Jquery

Konsep.

Konsep desain yang akan dibuat yaitu minimalis dan tetap terlihat modern.

Yang kita butuhkan

Kita membutuhkan sebuah background dengan tekstur kayu, bisa didapatkan disini.

Kita juga membutuhkan sebuah font untuk mempercantik halaman tersebut, kita sertakan font “Oleo Script” yang kita embed dari Google Webfonts.

Jangan lupa Jquery yang bisa didownload dari jquery.com

Oke peralatan sudah lengkap, sekarang kita mulai bagian kode program.

Struktur HTML

Head

	<link rel="stylesheet" href="style.css" />
	<link href='http://fonts.googleapis.com/css?family=Oleo+Script' rel='stylesheet' type='text/css'>
	<script type="text/javascript" src="jquery-1.7.min.js"></script>
	<script type="text/javascript">
		<!-- Javascript code here -->
	</script>

Body

	<div class="lg-container">
		<h1>Admin Area</h1>
		<form action="waka-login.php" id="lg-form" name="lg-form" method="post">

			<div>
				<label for="username">Username:</label>
				<input type="text" name="username" id="username" placeholder="username"/>
			</div>

			<div>
				<label for="password">Password:</label>
				<input type="password" name="password" id="password" placeholder="password" />
			</div>

			<div>
				<button type="submit" id="login">Login</button>
			</div>

		</form>
		<div id="message"></div>
	</div>

Kode html diatas sederhana sekali, yang paling penting yaitu field text username dan password, serta sebuah div dengan id message yang akan menampung pesan/respon.

Kode Javascript/Jquery

	$(document).ready(function(){
		$("#login").click(function(){

			var action = $("#lg-form").attr('action');
			var form_data = {
				username: $("#username").val(),
				password: $("#password").val(),
				is_ajax: 1
			};

			$.ajax({
				type: "POST",
				url: action,
				data: form_data,
				success: function(response)
				{
					if(response == "success")
						$("#lg-form").slideUp('slow', function(){
							$("#message").html('<p class="success">You have logged in successfully!</p><p>Redirecting....</p>');
						});
					else
						$("#message").html('<p class="error">ERROR: Invalid username and/or password.</p>');
				}
			});
			return false;
		});
	});

Jadi logikanya ketika kita melakukan klik pada tombol Login, maka javascript akan mengirim request Ajax ke file waka-login.php untuk mengetahui user dan password yang dimasukan benar atau tidak.
Jika salah maka menampilkan pesan error, jika benar maka akan terjadi slide, dan muncul pesan redirecting…

* Semua itu bisa anda rubah sesuai dengan keperluan anda nantinya.

Kode CSS

Setelah struktur html selesai kita saat nya kita percantik halaman ini dengan css

body{
	background-image:url(bg.png);
	font-family: 'Oleo Script', cursive;
}

.lg-container{
	width:275px;
	margin:100px auto;
	padding:20px 40px;
	border:1px solid #f4f4f4;
	background:rgba(255,255,255,.5);
	-webkit-border-radius:10px;
	-moz-border-radius:10px;

	-webkit-box-shadow: 0 0 2px #aaa;
	-moz-box-shadow: 0 0 2px #aaa;
}
.lg-container h1{
	font-size:40px;
	text-align:center;
}
#lg-form > div {
	margin:10px 5px;
	padding:5px 0;
}
#lg-form label{
	display: none;
	font-size: 20px;
	line-height: 25px;
}
#lg-form input[type="text"],
#lg-form input[type="password"]{
	border:1px solid rgba(51,51,51,.5);
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	padding: 5px;
	font-size: 16px;
	line-height: 20px;
	width: 100%;
	font-family: 'Oleo Script', cursive;
	text-align:center;
}
#lg-form div:nth-child(3) {
	text-align:center;
}
#lg-form button{
	font-family: 'Oleo Script', cursive;
	font-size: 18px;
	border:1px solid #000;
	padding:5px 10px;
	border:1px solid rgba(51,51,51,.5);
	-webkit-border-radius:10px;
	-moz-border-radius:10px;

	-webkit-box-shadow: 2px 1px 1px #aaa;
	-moz-box-shadow: 2px 1px 1px #aaa;
	cursor:pointer;
}
#lg-form button:active{
	-webkit-box-shadow: 0px 0px 1px #aaa;
	-moz-box-shadow: 0px 0px 1px #aaa;
}
#lg-form button:hover{
	background:#f4f4f4;
}
#message{width:100%;text-align:center}
.success {
	color: green;
}
.error {
	color: red;
}

PHP

Untuk memproses username dan password yang diinput user, kita membutuhkan PHP, berikut code php yang digunakan, disini tidak melakukan pengecekan pada database, karena ini hanya konsep, query yang diperlukan nantinya bisa diletakan di file PHP itu juga.

<?php

	$is_ajax = $_REQUEST['is_ajax'];
	if(isset($is_ajax) && $is_ajax)
	{
		$username = $_REQUEST['username'];
		$password = $_REQUEST['password'];

		/*
			:: Note to Wakaka Friends
			-----------------------------------------------------------------------------------------
			You can put your MySQL query here to check availability Username & Password from database
		*/

		if($username == 'demo' && $password == 'demo')
		{
			echo "success";
		}
	}

?>

DEMO | DOWNLOAD

Username: wakaka
Password: design
Oke sekian tutorial kali ini, semoga berguna untuk anda.
Terima kasih, Salam Wakaka Design :D





Penulis :

Website yang berisi Tutorial, Tips, Trik, Inspirasi, Opini, Cerita, Studi kasus, dan berbagai hal menarik tentang Web Design, Web Development dan Graphic Design untuk orang-orang kreatif di Indonesia. View all posts by TWD Editorial

Comments

95 thoughts on “Membuat Form Login dengan PHP, Jquery & CSS3 + Download

  1. Sisca says:

    Wah,.,.akhirnya nemu juga disini,.,.
    makasih banyak gan,.

  2. Toro says:

    Makasih artikel nya sangat membantu,..,

  3. natan says:

    gan, giman koding tambahannya kalo pakai database…. ?

  4. sayang outline nya masih ada klo di chrome, coba pke outline:0 di style inputnya, jadi tampilan di firefox & chrome sama

  5. 22 Beautiful CSS/HTML Login Form Templates says:

    […] 19. Form Login dengan PHP, Jquery […]

  6. zain says:

    gan saya mau tanya kalau input type yang text itu jika kita mengklik ada efek tulisan username dan pasword keduanya tersebut seperti contoh diatas. kodingnya apa ya. sebelumnya terimakasih, maaf newbie soal beginian

  7. Mas says:

    mohon pencerahan bro dr kode berikut, hasil otak-atik dari contoh skrip diatas
    …..
    $num_row=mysql_num_rows($result);
    if( $num_row >=1 )
    {
    echo “success”;
    } else
    {
    echo “failed”;
    }

    dengan kondisi diatas mengapa selalu “failed” y?
    padahal kondisinya record ketemu (harusnya success).
    pas diotak atik langsung menggunakan variabel: misal :
    $x=1;
    if ($x==1) echo “success”; else “failed”; …. baru bisa.

    thx for help :)

  8. ananad says:

    nah trus kalo itu diredirect ke file php lain gmana

  9. ananda says:

    gan klo udah login trs mau redirect ke hlaman admin + start_session gmn cranya?
    sya coba masukin ini dibawah kode echo “success”;
    session_start();
    $_SESSION[“usernama”] = $username;
    header(“location:http://localhost/latihan/index.php“);
    tp hasilnya username / password invalid trus, tlong pncerahan agan2

    • Kalau munculnya seperti itu mungkin query untuk username & password nya yang salah

      • ananda says:

        sya ga pake query gan, sya pke username & password bawaan dr file yg sya download diatas, cma dibawah kode echo “success”; sya tambahin kode itu, hasilnya invalid terus padahal username & password yg sya input benar
        mungkin msalahnya ada di kode jquery di file index.html tu, dsana ada kode ‘ response == “success” ‘, jd mungkin dia hanya mnerima satu baris echo “success”; aja ga bsa ditambah kode lain, asumsi sya gu tp sya blm tau cara ngatasinya, maklum sya blm ngerti jquery

        • Ow…
          untuk session silahkan letakan sebelum pesan “success”.

          session_start();
          $_SESSION["usernama"] = $username;
          echo "success";
          

          Untuk Redirect nya di htmlnya.
          Ganti kode dibawah ini

          $("#message").html('

          You have logged in successfully!

          Redirecting....

          ');

          Ganti dengan

          window.location='page_redirect.php';
          • ananda says:

            iya gan udah bisa, mkasih ya gan ilmunya sngat brmanfaat, sya jg bookmark webnya soalnya tutorialnya bgus2 :)

  10. wesler says:

    gan misal sukses , gmn carany nge link kan web kita

  11. wesler says:

    ini kode yang uda di otak atik ;

    pertanyaanya , dengan posisi gni kita hanya bisa login menggunakan chrome sedangkan di web browser firefox and IE selalu invalid

    mohon pencerahannya , terima kasih

  12. wesler says:

    pada awal nya bisa di ff tapi setelah ane kasih data base , ternyata invalid trus . .. tetapi pas ane buka di chrome bisa padahal format login yang di masukan sama

  13. cpaix says:

    nice info gan
    tinggal bikin database nya ane,
    makasih banyak

  14. Tổng hợp một số giao diện login form đẹp | Share and learning… says:

    […] 19. Form Login dengan PHP, Jquery […]

  15. Felix says:

    Sebelumnya terima kasih authornya yang telah membuat artikel ini..

    saya mau bertanya, saya mengalami kendala pada waka-login.php
    $username dan $passwordnya saya rubah menjadi seperti ini

    if($username == ‘coba’ && $password == ‘demo’)

    dan setelah saya jalankan index.html di browser
    lalu menginput username : coba , password : demo
    keterangannya seperti ini ERROR: Invalid username and/or password.

    mohon pencerahannya..
    ditunggu.

    • Tidak ada masalah kok, saya coba download script nya, saya rubah username menjadi ‘coba’ dan password menjadi ‘demo’ di waka-login.php, hasilnya tetap berjalan normal dan login sukses, tidak muncul errror.
      Mungkin scriptnya sudah ada yang anda rubah dan tambah-tambah.

    • Kalau mau jalanin itu pastikan anda sudah menginstall PHP di komputer anda (bisa menggunakan XAMPP, LAMP atau MAMP).

      lalu script nya di taruh di folder htdocs, kalau tidak ada PHP nya ya script waka-login.php tidak akan di proses, makanya selalu Error yang muncul.

  16. Cut two 2-inch-wide strips of fabric the length you want your handles to be.

  17. alan says:

    gan setelah ada tulisan ” it works ” diweb gmana lagi?

    modon bantuannya

  18. galih says:

    ijin sedot gan, lagi males bikin soalnya, :P

    tidak lupa saya ucapkan terima kasih banyak , desainya nice, sipp pokoknya, :D

    • hilman says:

      min mau tanya tentang login ini, saya kan newbie di laptop belum ada aplikasi php ataupun yg lainnya, jadi saya langsung download aja file ini, eh ternnyata pas di buka tidak bisa redirect pas login berhasil atau gagal, tolong pencerahannya ? apakah saya harus install aplikasinya

  19. alan says:

    hahahah …. oke gan …. ni kan barusan ane buat udh bisa …. cuma username ama password nya ane ganti ….. tp waktu login knp jadi error ya

    mohon bantu ya mimin :)

  20. alan says:

    gan nanya yang tdi ga jadi

    saya mau tanya … misalkan udh login ….page nya kosong….padahal saya ingin setelah login itu langsung menuju page selanjutnya …. itu gimanna tambahannya ya gan???

    terimakasih sebelum nya

  21. Arul says:

    Gan, Kamu Bikin itu pake apa????Hosting atau apa??

  22. jasawebcipta says:

    tutorial yang bermanfaat

  23. maaf sotoy, ane baru belajar php, utak ati2 dari semalam g bisa2, akhirny bisa connect k db
    :asek:

    cuma share aja gan mas berro

    ——————————–
    = 1)
    {
    $_SESSION[‘username’] = $username;
    echo “success”;
    }
    else
    {
    header(“location: login.html”);
    }

    }
    ?>

    = 1)
    {
    $_SESSION[‘username’] = $username;
    echo “success”; //biar sukses, jangan rubah isi echony, soalny berhubungan dg file htmlny :D
    }
    else
    {
    header(“location: login.html”);//jika gagal lempar kesini
    }

    }

    ?>

    —————————-

  24. maaf diatas ke potong, g tau knp, mgkin karakter dibatasi :D

    ———–ini codenya—————-

    ambil disini aja : http://pastebin.com/uMfecVrJ
    ——————————————

    tolong commentny

  25. Rino says:

    gan mau tnya . wktu saya cek yng versi demo di atas trnyata brhasil . tpi stlah saya download file’a lalu saya coba trnyata tidak ad prubahn sama skali saat mnekan login .

  26. Pablo says:

    Hello:

    Hope you can help me out with this. The example works fine for me. But when i add my mysql code something goes wrong and always gives user/password error. Thing is that i chequed the mysql code printing the variables and seems to be pretty fine i post it here so that someone can help me out why it doesn’t shows the correct message when the values are the correct ones. i attach my code :

    root@stocks:/var/www# more waka-login.php
    <?php
    include '/var/www/inc/mysql-connect.php';

    E_ALL;
    $is_ajax = $_REQUEST['is_ajax'];

    if(isset($is_ajax) && $is_ajax) {

    $username = $_REQUEST['username'];
    $password = $_REQUEST['password'];

    //Connect to mySQL database
    mysql_select_db($mysqldb, $connection) or die("Could not connect to database");
    $qry = "SELECT * FROM Logins" ;
    $res = mysql_query($qry) or die("Ungültiger Query! " . mysql_error());
    if(mysql_num_rows($res) != 0)
    { $result = mysql_query("SELECT * FROM Logins")or die("No success");
    while($row = mysql_fetch_array($result)){
    $user = "$row[User]";
    $pass = "$row[Password]";
    if( $username == $user && $password == $pass ) {
    echo "success";
    mysql_close($connection);
    break;

    }//while
    } //if
    }
    }

    Thanks in advance

    BR,
    Pablo

  27. Arga says:

    gan mau tanya, ini saya sudah berhasil koneksi ke dbnya, sekarang saya mau redirecting linknya
    script yg saya buat gni gan
    if(response == “success”)
    $(“#lg-form”).slideUp(‘slow’, function(){
    $(“#message”).html(‘You have logged in successfully!Redirecting….’);

    tp hasilnya Notice: Undefined index: is_ajax in C:\xampp\htdocs\contoh\waka-login.php on line 3

  28. Mas Adi says:

    Kalo mau nambah fitur “remember me / ingat saya” gimana ya gan? :)
    thanks

  29. fajar says:

    Tolong donk di kasih contoh loginnya nyambung ke database, menggunakan xampp :)
    Tolong mas…. saya ada tugas soalnya

  30. jamal cyber says:

    mas mw tanya kalu ini pan buat loginy y.klau mw registernya gima mas tolong penjelasanya http://downloadcyber.byethost31.com http://downloadsoftware.byethost5.com

  31. firman says:

    bagus nih tutorialnya, sangat bermanfaat… trimakasih. ijin donlot ya :)

  32. Anggit says:

    permisi gan.. ane lagi buat jsp nih.. kan kalo di jsp php gamau jalan tuh..
    kira2 kalo begitu phpnya diganti codingannya gimana ya?

  33. Fahriansyah says:

    ini betuk cody saya untuk form login

    LOGIN

    Username :

    Password :

    tapi saya mau tambah kan captha sebelum kita melakukan login
    ini contoh coding captha nya

    Captcha Google

    User Nama

    Password

    Ganti Teks

    save dengan nama index.php
    coding captha nya di taruh di mana gan,,soal nya sudah saya coba masukan masih error

    makasih atas bantuan nya

    • santi says:

      gan. sudah saya coba DEMO nya, tapi ko ERROR: Invalid username and/or password. padahal username dan passwordnya udah demo.

      trus saya coba di localhost saya juga sama, error mulu.

      itu kenapa ya. thx..

      • Coba baca komentar-komentar sebelum nya, sudah ada yang nanya

        • santi says:

          udah bisa gan.
          ternyata setelah tanda ?> di akhir ga boleh ada enter enter lagi kebawahnya meskipun itu kosong.
          setelah di hapus2 sampe mentok ?> baru jalan deh.
          apa bener itu bisa ngaruh ya? :D

          maklum baru belajar.

  34. thata says:

    mas tlg bantuannya dunk .. saya sudah download scriptnya, trus udah saya taruh d folder htdocs, pas dijalanin muncul gini ..

    Notice: Undefined index: is_ajax in C:\xampp\htdocs\php-jquery-login\waka-login.php on line 3

    trus gimana ya solusinya ? and tlg jlasin juga is_ajax itu bwt apa?
    saya msh baru jd msh bingung

    • kalau lihat script js nya, kamu akan temuin
      is_ajax: 1

      nah itu adalah variable yang dikirim lewat javascript, nanti di php di cek, apakah ada kiriman variable dengan naam is_ajax seperti ini
      $is_ajax = $_REQUEST['is_ajax'];
      if(isset($is_ajax) && $is_ajax)

      kalau undefined berarti variable is_ajax kamu tidak terbaca, coba lihat lagi script js nya.

      atau coba2 rubah pada bagian ini
      $_REQUEST['is_ajax'];
      menjadi
      $_POST['is_ajax'];

  35. Dyas Satria says:

    owh jadi kalo mau redirect tinggal edit script
    $(“#message”).html(‘
    You have logged in successfully!
    Redirecting….
    ‘);

    trus di ganti dengan window.location=’page_redirect.php’;

    trus misalkan mw dipake bwt login wifi bisa gak om ? n caranya gimana ? biar kyk di kampus2 gitu, jadi kalo mw connect wifi harus login dari situ.
    Thanks, ane bookmark web nya.

  36. nani says:

    aku coba yach thnks sgt berguna

  37. tiny says:

    gan klo loginnya ttep ga bsa pdhl udah sesuai ama yang di database itu kenapa ya.. jadi terdeteksi salah terus??

  38. Yoan wiguna says:

    makasih gan ,,
    tpi saya mau nnya kenapa javasriptnya gak muncul pas udah sukses login kan harusnya muncul,, klo di demo man muncul tpi pas wktu d ketik ulang terus tempat form method action nya sy ganti tpi syntaknya tetep kok nurutin yang wakaka-login.php tpi kenapa gk muncul ya ???
    minta pencerahannya
    ~makasih~

    • Kalau kamu mengikuti dengan benar script nya harusya muncul, atau coba cek php nya pada bagian validasi username dan password. Baca logikanya dengan banar

  39. makasih mas atas artikelnya, saya lagi belajar soal php mz meskipun html dan css blm se expert mas

  40. dhe says:

    gan kalo yang pake database gmana utek2 waka-login.php nya??
    puseeng nih :(

  41. Usul -> tampilan mobile dipercantik lagi :)

  42. menarik sekali sy senang dengan blognya

  43. petdro says:

    Wahh! senangnya! nyari kemana” akhirnya nemu jga.. thanks ya!

  44. mebel jati says:

    makasih mas atas artikelnya, saya lagi belajar soal php mz meskipun html dan css blm se expert mas, saya akan mencoba ulasan ulasan yang ada disini, ke dalam web saya di jualfurniturejepara.com. semoga menjadi yang terbaik.. dan sukses selalu buat admin wb ini,,

  45. wahyudi says:

    bagus banget gan..

  46. nazir says:

    when i use this login page
    i got error massage as

    Notice: Undefined index: is_ajax in C:\xampp\htdocs\login5\waka-login.php on line 3

    can u pls help for me…

  47. yogi says:

    kenapa selalu invalid?

  48. habib says:

    klo misalkan dibawah password itu ditambah kolom inputan lagi apa aja yang harus ditambah di form cssnya?

  49. Nuahta says:

    Keren, makasih ya…

  50. khairil says:

    mau bertanya

    saya kan nyoba pake ajax loginnya kok kenapa kalau saya input username password yang benar nya malah invalid username / password terus ya ? padahal saya mengikuti sama pada tutorial

  51. Khairil says:

    mas mau bertanya kalau mau nerapin multi user editnya di bagian mana? kalau diedit di login process malah invalid terus nih

  52. terima kasih telah berbagi Mas, senang sekali rasanya membaca tulisan2 di blog ini, jadi tambah wawasan.. semoga selalu di beri kesehatan dan sukses selalu..

  53. ini kok selalu gk bsa iya kalau di unduh kenapah ea gan

  54. putrianggun says:

    berhasil gan, terima kasih:D

  55. hamdan says:

    gan, membuat redirecting kesuatu halaman setelah login gmna ya

  56. keren juga form loginnya hehehe

  57. yogga says:

    gan.. mau tanya..
    setelah sukses login dan redirecting, gimana caranya langsung ganti otomatis ke halaman baru ?
    thanks

Leave a Comment

XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Klik Tombol Like / Suka ya kawan..

Klik tombol "Like" atau "Suka" untuk mendapatkan update tutorial, tips & tricks serta info terbaru seputar dunia web design & development