Education center

Mumpung lagi ada waktu, saya ingin melanjutkan tutorial tentang extjs, Tutorial ini baru saya buat tadi pagi setelah pulang dari jaga warnet,, Sebenarnya ingin tidur karena sudah ngantuk, tapi entah kenapa nyampek di kosan tidak bisa tidur atau turu kata orang jawa,, padahal temen sekamarku pas saya nyampek kosan kelihatannya nyenyak buanget tidurnya,, dan tau gak sampek jam berapa dia bngun? setengah 1 coy mantap buanget ,, (moga temanku tidak baca blog ini nanti di cerai bisa-bisa saya di cerai hehehe..hehe..). Lho kok malah melenceng dari topik? sory kawan.. :D

Ok kita mulai aja tutorialnya,, kali in buruh internet ongin menjelaskan tentang cara membuat paging grid menggunakan Exjs,, maksud paging disni yaitu mensplit data yang ingin kita tampilkan di web (pemberian nomor) benar nggak? tujuannya sich biar nggak banyak makan space halaman di web kita dan biar enak juga kalau di lihat.

Disini saya menganggap teman-teman sudah membaca postingan saya sebelumnya: membuat form upload file dengan menggunakan extjs dan php, dan Free download theme extjs , jadi teman-teman sudah mempunyai file extjsnya (ext-2.2). Dan saya anggap teman- teman dah mengerti cara memanggil file extjs tersebut. Ok lansung aja masuk ke pokok pembahasan. Berikut adalah file yang dibutuhkan dalam membuat form login ini:

1. koneksi.php file ini digunakan untuk koneksi ke databse



2. index.php file ini digunakan untuk memanggil file extjs dan dan file form login itu sendiri

<html>
<head>
<title>Form Login</title>
<link rel="stylesheet" type="text/css" href="ext-2.2/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="ext-2.2/resources/xtheme-slate/css/xtheme-slate.css" />
<script type="text/javascript" src="http:ext-2.2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="http:ext-2.2/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>

script yang berwarna merah itu urutannya jangan dirubah,, so jika temen-temen merubahnya maka pasti akan ada pesan error yaitu formnya tidak muncul.

3. login.js buat tampilan formnya.

Ext.onReady(function(){
Ext.QuickTips.init();

var login = new Ext.FormPanel({
labelWidth:90,
url:'login.php', //manggil file.php
frame:true,
width:300,
autoHeight:true,
padding:200,
defaultType:'textfield',
monitorValid:true,

items:[{
xtype:'box', //buat naruh gambar icon
autoEl:{
tag:'img',
src:'im48x48.png'
}
},
{
fieldLabel:'Username', //buat ngisi username
name:'username',
allowBlank:false
},{
fieldLabel:'Password', // buat ngisi 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 di redirec ke index1.php
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.login.php digunkan untuk proses loginnya. mencocokkan data yang dimasukkan user dengan databse.

<?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.' }}";
}
?>

Contoh diatas saya menggunakan session, dan yang saya session disini adalah username. jika login berhasil maka akan di redirect ke ke file index1.php

5. index1.php hanya untuk mengecek login kita berhasil apa tidak

<?php
session_start();
echo "selamat datang " .$_SESSION['nama'];
?>

6. dan yang terakhir adalah code dari sql itu sendiri.

CREATE TABLE `form` (
`username` varchar(100) NOT NULL,
`password` varchar(100) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

OK saya rasa tutorialnya sudah cukup jelas..

kamu bisa mendownload source code lengkapnya dini

jika ada pertanyaan silahkan meninggalkan comment.

Salam hangat buat para blogger dari Buruh Internet ... pada kesempatan kali ini Buruh Internet akan membagikan sedikit ilmu tentang Extjs Sebenaranya Buruh Internet masih newbie juga dalam pemrograman web ini,,, tapi gak ada salahnya kan kalo Buruh Internet ingin berbagi ilmu (benar kagak?? siks...siks...siks...).

OK Kita langsung masuk aja ke materi... Materi yang akan saya bahas adalah bagaimana caranya mempercantik tampilan (form) dari Extjs. Materi ini cukup simple karena hanya manambahkan satu baris script pada codingan yang kita buat. Yang dimaksud mempercantik disini adalah merubah theme dari Extjs itu sendiri.

Untuk mendapatkan framework javascript ini, kamu bisa mendownloadnya dari websitenya langsung http://www.extjs.com/products/extjs/download.php. Oh ya disini Buruh Internet menggunakan Extjs versi 2.2.