Berikutnya adlaah bagaimana membuat form login.
Saya mendapatkan banyak informasi dari buruh internet dan berikut setelah diimplementasikan pada web dan pemahamana saya sendiri.. he he masih newbie niih
paling awal adalah mebuat sebuah database untuk loginnya
CREATE TABLE `form_login` (
`username` varchar(100) NOT NULL,
`password` varchar(100) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;
2. setelah itu buat form koneksinya dengan nama koneksi.php
<?php
$nameSer = “localhost”;
$username =”root”;
$pass = “bismillah”;
$dbname = “belajarextjs”;
$koneksi = mysql_connect($names,$username,$pass)or die(’error’.mysql_errno());
$selecdb = mysql_select_db($dbname);
?>
3. kemudian membuat file index.php yang menghubungkan file extjs dan login itu sendiri
<html>
<head>
<title>Form Login</title>
<link rel=”stylesheet” type=”text/css” href=”http://localhost/ext-3.0.0/resources/css/ext-all.css” />
<link rel=”stylesheet” type=”text/css” href=”http://localhost/ext-3.0.0/resources/xtheme-slate/css/xtheme-slate.css” />
<script type=”text/javascript” src=”http://localhost/ext-3.0.0/adapter/ext/ext-base.js”></script>
<script type=”text/javascript” src=”http://localhost/ext-3.0.0/ext-all.js”></script>
<script type=”text/javascript” src=”login.js”></script>
</head>
<body bgcolor=”#FFFFFF”>
<div style=”height:180px”></div>
<div id=”form” align=”center”></div>
</body>
</html>
ternyata tipe 3 dan 2 itu berbeda dalam hal property css nya oleh karena itu beberapa perubahan mendasar dibuat diantaranya
<html>
<head>
<title>Selamat Datang di Sistem Informasi SAI</title>
<link rel=”stylesheet” type=”text/css” href=”http://localhost/ext-2.3.0/resources/css/ext-all.css” />
<!–<link rel=”stylesheet” type=”text/css” href=”ext-2.3.0/resources/xtheme-slate/css/xtheme-slate.css” />–>
<script type=”text/javascript” src=”http://localhost/ext-2.3.0/adapter/ext/ext-base.js”></script>
<script type=”text/javascript” src=”http://localhost/ext-2.3.0/ext-all.js”></script>
<script type=”text/javascript” src=”login.js”></script>
</head>
<body bgcolor=”#FFFFFF”>
<div style=”height:180px”></div>
<div id=”form” align=”center”></div>
</body>
</html>
3. kemudian buat tampilannya di halaman login.js
Ext.onReady(function(){
Ext.QuickTips.init();
var login = new Ext.FormPanel({
labelWidth:90,
url:’login.php’,
frame:true,
width:300,
autoHeight:true,
padding:200,
defaultType:’textfield’,
monitorValid:true,
items:[{
xtype:'box',
autoEl:{
tag:'img',
src:'im48x48.png'
}
},
{
fieldLabel:'Username',
name:'username',
allowBlank:false
},{
fieldLabel:'Password',
name:'password',
inputType:'password',
allowBlank:false
}],
buttons:[{
text:'Login',
handler:function(){
login.getForm().submit({
method:'POST',
waitTitle:'Harap Tunggu',
waitMsg:'Mengirim data...',
success:function()
{
Ext.Msg.alert('Status', 'Login Berhasil!', function(btn, text)
{
if (btn == 'ok')
{
var redirect = 'index1.php';
//jika sukses akan langsung masuk ke halaman berikutnya
window.location = redirect;
}
});
},
failure:function(form, action)
{
if(action.failureType == 'server')
{
obj = Ext.util.JSON.decode(action.response.responseText);
Ext.Msg.alert('Login Failed!', obj.errors.reason);
}
else
{
Ext.Msg.alert('Warning!', 'Authentication server is unreachable : ' + action.response.responseText + "abcd");
}
login.getForm().reset();
}
});
}
},
{
text: 'Reset',
handler: function(){
login.getForm().reset();
}
}]
});
var createwindow = new Ext.Window({
//frame:true,
title:’Please Login’,
width:315,
height:155,
closable: false,
items: login
});
createwindow.show();
});
4. Kemudian buat login.php untuk mengecheck kebenaran loginnya
<?php
session_start();
include “koneksi.php”;
$nama = $_POST["username"];
$password = $_POST["password"];
$query = “select * from form where username=’$nama’ and password=’$password’”;
$sql = mysql_query($query);
$ada = mysql_fetch_row($sql);
if($ada>1)
{
$_SESSION['nama']=$nama;
echo “{success: true}”;
}
else
{
echo “{success: false, errors: { reason: ‘Login failed. Try again.’ }}”;
}
?>
5. kemudian buat index1.php untuk mengecheck kebenaran dari session tersebut
<?php
session_start();
echo “selamat datang ” .$_SESSION['nama'];
?>
silahkan dicoba
Posted in Uncategorized
Tags:
