قم بإنشاء نموذج تسجيل دخول باستخدام PHP Jquery Mysqli Bootstrap
Hai All ketemu lagi bersama saya portgastea pria ganteng asli sunda, tutorial di minggu awal ramadhon ini saya akan mencoba membuat form login dengan PHP, Jquery & التمهيد. Ok Langsung saja yang pertama download jquery.validate.min.js, untuk download nya biasa cari di google dan donwload juga bootstrapnya, taruh folder assets di htdocs berserta file jquery.validate.min.js di folder assets/js, skrang kita buat database dengan nama tutorial atau terseran anda di phpmyadmin seperti ini dan buat tabel tbl_user seperti dibawah ini :
CREATE TABLE IF NOT EXISTS `tbl_user` (
`id_user` int(10) NOT NULL,
`username` varchar(100) NOT NULL,
`pass` varchar(100) NOT NULL,
`level_user` int(5) NOT NULL,
`email` varchar(50) NOT NULL,
`nip` varchar(5) NOT NULL,
`status` int(5) NOT NULL,
`w_login` datetime NOT NULL,
`w_daftar` datetime NOT NULL,
`photo` varchar(100) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=8 ;Selanjutnya kita buat koneksinya dan buat file php baru dengan nama koneksi.php atau terserah anda dan buat script seperti dibawah ini :
<?بي أتش بي
$db = جديد mysqli("مضيف محلي",'جذر', ", 'tutorial');
إذا($db->connect_errno > 0){
ال('Unable to connect to database [" . $db->connect_error . "]");
}
?>Jika sudah selesai kita buat tampilan form login dengan membuat file baru dengan nama index php seperti dibawah ini
<!DOCTYPE html>
<html lang="en">
<رئيس>
<meta charset="utf-8">
<عنوان>Kumpulan SourceCode Andeznet</عنوان>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- الأنماط ->
<link href="assets/css/bootstrap.css" rel="stylesheet" media="screen">
<link href="assets/css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">
<script src="assets/js/jquery.js"></النصي>
<script src="assets/js/bootstrap.min.js"></النصي>
<أسلوب>
الجسم {
أعلى الحشو: 60مقصف; /* 60بكسل لجعل الحاوية تذهب طوال الطريق إلى أسفل الشريط العلوي */
}
</أسلوب>
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="../assets/js/html5shiv.js"></النصي>
<![إنهاء إذا]-->
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="assets/ico/logoandeznet.png">
</رئيس>
<الجسم>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></امتداد>
<span class="icon-bar"></امتداد>
<span class="icon-bar"></امتداد>
</زر>
<a class="brand" href="http://andeznet.com">AndezNet</أ>
<div class="nav-collapse collapse">
<ul class="nav pull-right">
<li class="active"><a href="index.php">الصفحة الرئيسية</أ></في ال>
<في ال><a href="register.php">تسجيل</أ></في ال>
<li class="divider-vertical"></في ال>
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">Log In <strong class="caret"></قوي></أ>
<div class="dropdown-menu" style="padding: 15مقصف; padding-bottom: 0مقصف;">
</شعبة>
</في ال>
</ال>
</شعبة><!--/.nav-collapse ->
</شعبة>
</شعبة>
</شعبة>
<div class="container">
<div class="hero-unit">
<h2>Selamat datang di Aplikasi KSC Ver 1.0.0</h2>
<ص>Kumpulan Source Code <a href="http://andeznet.com">ANDEZNET</أ> </ص>
<ص>Untuk Login mohon melakukan <a href="register.php">تسجيل</أ> terlebih dahulu</ص>
</شعبة>
</شعبة> <!-- /container -->
</الجسم>
<div class="row-fluid">
<div class="span12">
<div class="row-fluid">
<div class="alert alert-info">
<a name="contact"></أ>
<h2>www.andeznet.com</h2>
<p class="text-info">مستودع التكنولوجيا & معلومات</ص>
<ص>&نسخ; <a href="http://andeznet.com">www.andeznet.com</أ>&نبسب<?بي أتش بي صدى صوت تاريخ("Y");?></ص>
</شعبة><!--/امتداد-->
</شعبة><!--/صف-->
</شعبة><!--/امتداد-->
</شعبة><!--/صف-->Selanjutnya kita akan membuat validasi dengan file jquery.validate.min.js yang sebelumnya kita download masukan script dibawah ini di file index setelah <script src=”assets/js/bootstrap.min.js”></النصي>
<النصي src="assets/js/jquery.validate.min.js" نوع="text/javascript"></النصي>
<script type="text/javascript">
$.validator.setDefaults({
submitHandler: وظيفة() { login(); },
});
$().ready(وظيفة() {
$("#loginF").validate();
});
وظيفة login(){
$("#loading").لغة البرمجة("<div class="alert alert-block alert-success">Mohon Tunggu....</شعبة>");
$.post('cek_login.php', $("form").serialize(), وظيفة(hasil){
$('form input[type="text"],form input[type="password"]").فال(");
$("#loading").لغة البرمجة(hasil);
});
}
</النصي>Ok jika sudah selesai kita buat form login nya seperti script dibawah ini di file index di bawah فئة div =”dropdown-menu” style=”حشوة: 15مقصف; padding-bottom: 0مقصف;”>
<form action="" هوية شخصية="loginF" name="form" method="post">
<شعبة صف دراسي="form-group">
<ضع الكلمة المناسبة إلى عن على="username" صف دراسي="control-label">اسم المستخدم</ضع الكلمة المناسبة>
<input type="text" صف دراسي="form-control" هوية شخصية="username" name="username" placeholder="username" البيانات-error="Username anda masih kosong" required>
<شعبة صف دراسي="help-block with-errors"></شعبة>
</شعبة>
<شعبة صف دراسي="form-group">
<ضع الكلمة المناسبة إلى عن على="inputPassword" صف دراسي="control-label">Password</ضع الكلمة المناسبة>
<شعبة صف دراسي="form-group col-sm-6">
<input type="password" البيانات-minlength="10" صف دراسي="form-control" هوية شخصية="password" name="password" placeholder="Password" required>
</شعبة>
</شعبة>
<input type="submit" صف دراسي="btn btn-info" value="Login" />
</form>Selanjutnya kita masukan script seperti ini diatas form login <div id=”loading” style=”text-align: مركز”></شعبة> yang dimana script ini akan menunjukan keterangan validasi login dari username & password yang kita masukan. Lalu kita buat file cek_login.php dengan script seperti dibawah ini :
<?بي أتش بي
error_reporting(0);
تضمن "koneksi.php";
$user = $_بريد['username'];
$pass = md5($_بريد['password']);
// pastikan username dan password adalah berupa huruf atau angka.
$cek_lagi=mysqli_query($db,"SELECT * FROM tbl_user WHERE username='$user' AND pass='$pass"");
$ketemu=mysqli_num_rows($cek_lagi);
$r=mysqli_fetch_array($cek_lagi,MYSQL_ASSOC);
// Apabila username dan password ditemukan
إذا ($ketemu > 0){
session_start();
$_SESSION['kode'] = $r['id_user'];
$_SESSION['namauser'] = $r['username'];
$_SESSION['passuser'] = $r['pass'];
$_SESSION['leveluser'] = $r['level_user'];
$_SESSION['w_login'] = $r['w_login'];
$id_user=$_SESSION['kode'];
إذا($_SESSION['leveluser']==1){
صدى صوت "<div id='sukses' class='alert alert-info'><قوي>BERHASIL...</قوي><button type='button' class='close' data-dismiss='alert'><i class='ace-icon fa fa-times'></أنا></زر></شعبة><النصي>window.location ='media.php'</النصي>";
mysqli_query($db,"update tbl_user set status=1,w_login=NOW() where id_user='$id_user"");
} آخر إذا($_SESSION['leveluser']==2){
صدى صوت "<div id='sukses' class='alert alert-info'><قوي>BERHASIL...</قوي><button type='button' class='close' data-dismiss='alert'><i class='ace-icon fa fa-times'></أنا></زر></شعبة><النصي>window.location ='media.php'</النصي>";
mysqli_query($db,"update tbl_user set status=1,w_login=NOW() where id_user='$id_user"");
}
}
آخر{
صدى صوت "<div id='gagal' class='alert alert-danger'>Mohon maaf username & password anda salah<button type='button' class='close' data-dismiss='alert'><i class='ace-icon fa fa-times'></أنا></زر></شعبة>";
}
?>OK, Sudah selesai sekarang kita tes masuk ke http://المضيف المحلي / البرنامج التعليمي jika berhasil maka akan muncul seperti gambar dibawah ini :
Ok sekian Tutorial saya di minggu awal bulan Ramadhan ini. لتنزيل SourceCode ، يمكنك تنزيل تطبيق KSC Ver.1.0.0 مباشرةً, يوجد بالداخل نموذج تسجيل الدخول, تسجيل, & kumpulan soucecode dari Tutorial AndezNET.com saya bagikan مجانا.
Weh..mantabs gan..tampilannya bagus agak mirip sama extjs..
OK Gan
Thx gan Keren.
Ok Gan, semoga bermanfaat
kang @portgastea.
bagaimana cara membuat form pendaftaran yang di dalam nya terdapat fungsi melarang pendaftar mendaftarkan username yang sudah terpakai.
mohon tutorialnya kang…
nuhun.
Download ASKA gan cari web ini ada, disana ada form pendaftaran , pelajari script nya
gan buat registrasinya kok gagal ??
Gagalnya muncul erorr apa?
munculnya kaya gini mas
Unable to connect to database [Access denied for user ‘root’@’localhost’ (using password: YES)]
gimana ya solusinya ??
thanks sebelumnya 😀
Cek file koneksi nya gan sesuaikan username dan password nya
I’ve been surfing online more than 2 hours today, yet I never found any interesting article like yours. It’s pretty worth enough for me. In my opinion, if all site owners and bloggers made good content as you did, the net will be a lot more useful than ever before.
thanks you for visit in My Website
ndak jadi gan.udah bisa.salah download aja ternyata.hahaha
ok sip