Sunday, April 2, 2017

ExtJs | Membuat Login Web ExtJs Dengan Php Dan MySQL

Basic Code | Dalam sebuah aplikasi baik itu aplikasi desktop maupun website terkadang kita sering menemukan adanya tampilan Halaman Login sebagai tampilan awal ketika Aplikasi Desktop ataupun Website dijalankan. 


Yang dimana dalam penggunaannya Login merupakan salah satu fitur yang berguna untuk memastikan bahwa sebuah sistem hanya bisa digunakan oleh pengguna yang berhak menggunakan aplikasi tersebut atau jika di breakdown lagi bisa sampai ke level penggunaan modul tertentu oleh level pengguna tertentu misalnya dalam sebuah perusahaan terdapat aplikasi manajemen keuangan yang bersifat rahasia yang sudah tentu dilengkapi dengan fitur Login sebagai pengamanannya.

Nah di artikel ini penulis akan membahas tentang Membuat Login Web ExtJs Dengan Php Dan MySQL, yang dimana artikel kali ini sangat berkaitan dengan artikel-artikel sebelumnya. Tetapi sebelum itu adapun alat dan bahan yang diperlukan sebelum kita memulai pembuatan yang sebelumnya telah dibahas pada artikel : Pengenalan Framework ExtJs.

Jika peralatan dan bahan telah dipersiapkan langkah selanjutnya ialah Mendesain tampilan Login Web yang sebelumnya juga telah di bahas pada artikel : Membuat Tampilan Login Web Layaknya Aplikasi Desktop. 

Setelah tampilan Login juga telah siap. selanjutnya kita langsung saja ke tahap-tahap pembuatan koding dan databasenya.

1. Membuat Database

Pada tahap ini kita akan membuat sebuah database pada phpMyAdmin dengan nama DatabaseExtjs kemudian buatlah lagi sebuah tabel dengan nama tb_user seperti berikut :
CREATE TABLE IF NOT EXISTS `tb_user` ( `user_id` bigint(10) NOT NULL AUTO_INCREMENT, `user_name` varchar(50) NOT NULL, `user_password` varchar(20) NOT NULL, `group_id` char(7) NOT NULL, PRIMARY KEY (`user_id`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ; -- -- Dumping data for table `tb_user` -- INSERT INTO `tb_user` (`user_id`, `user_name`, `user_password`, `group_id`) VALUES (1, 'demo', 'demo', 'G000002'), (2, 'admin', 'admin', 'G000001');

2. Membuat Script Koneksi Ke Database

Di tahap ini kita akan membuat sebuah file baru dengan nama Koneksi.php tapi sebelumnya buatlah 2 folder baru pada Folder Login-Framework-ExtJS yang telah dibuat tadi dan beri nama folder yang akan dibuat dengan nama Server dan Inc lalu simpan script Koneksi.php pada folder inc contoh path : "C:\xampp\htdocs\Login-Framework-ExtJS\server\inc". seperti berikut :


file inilah yang nantinya akan menyimpan konfigurasi dan perintah untuk melakukan koneksi ke database, untuk scriptnya sbb :
<'?php $my['host'] = 'localhost'; $my['user'] = 'root'; $my['password'] = ''; $my['dbs'] = 'databaseextjs'; $con = mysql_connect($my['host'],$my['user'],$my['password']); if(!$con){ echo "Connection failed!"; mysql_error(); } mysql_select_db($my['dbs'])or die("Database not found".mysql_error()); ?'>

3. Membuat Script Proses Login

Pada tahap kali ini kita akan membuat sebuah file baru lagi dengan nama Service.php tapi sebelumnya it buatlah jg folder baru pada Folder Login-Framework-ExtJS seperti pada tahap 2 dan beri nama folder yang akan dibuat dengan nama login lalu simpan script Service.php pada folder Server/login contoh path : "C:\xampp\htdocs\Login-Framework-ExtJS\server\login". seperti berikut :



Adapun fungsi dari file ini dimana ketika pengguna sistem telah memasukan username dan password maka proses login akan dilakukan di tahapan ini, selanjutnya sistem akan mengechek apakah username dan password yang dimasukan oleh pengguna terdaftar di database atau tidak. jika terdaftar maka pengguna akan dialihkan ke halaman welcome.php tapi jika sebaliknya maka pengguna akan menemui sebuah tampilan pesan bahwa proses Login gagal dan pengguna akan dikembalikan ke halaman login untuk melakukan proses login kembali. dan untuk script-nya sbb :
<'?php $response=array(); include('../inc/koneksi.php'); $username=$_POST['txtUsername']; $password=$_POST['txtPassword']; $query=mysql_query("select * from tb_user where user_name='".$username."' AND user_password='".$password."'")or die(mysql_error()); if($query){ $row=mysql_num_rows($query); if($row>0){ $response = array('success'=>true, 'data'=>true); }else{ $response = array('success'=>false,'data'=>true); } }else{ $response = array('success'=>false ,'data'=>false); } echo json_encode($response); ?'>

4. Memodifikasi Design Form Login

Sebelumnya buka kembali file Login.js pada folder Login-Framework-ExtJS/js yang telah di buat tadi , jika belum buat silahkan kunjungi kembali artikel Membuat Tampilan Login Web Layaknya Aplikasi Desktop.

Setelah itu tambahkan Function Button dan Method Post pada file Login.js caranya copy script method di bawah ini : 
url:'server/login/service.php', method:'POST', monitorValid:true,
kemudian pastekan script di atas tepat di bawah script :
Ext.onReady(function(){ Ext.QuickTips.init(); var login = new Ext.form.FormPanel({
selanjutnya copy lagi script  di bawah ini : 
type:'submit', name:'signin', handler:function(btn){ login.getForm().submit({ method:'POST', waitTitle:'Please wait...', waitMsg:'Validasi user..,', success:function(){ Ext.Msg.alert('Sukses', 'Login Berhasil!', function(btn,text){ if(btn == 'ok'){ var redirect = 'index.php'; window.location = redirect; } }); }, failure:function(response){ //Ext.Msg.alert('Message', 'Login failed! Please try again...'); Ext.MessageBox.show({ title: 'Salah', msg: 'Login gagal! Silahkan coba lagi...', buttons: Ext.Msg.OK, icon: Ext.MessageBox.ERROR }); login.getForm().reset(); var txtUser=Ext.getCmp('txtUsername'); txtUser.focus('',10); } }); }
lalu pastekan script tadi tepat di bawah script :
buttons:[{ text:'Login',

Sehingga script keseluruhannya nanti seperti berikut :
Ext.onReady(function(){ Ext.QuickTips.init(); var login = new Ext.form.FormPanel({ url:'server/login/service.php', method:'POST', monitorValid:true, frame: true, border: false, labelWidth: 90, width:347, autoHeight:true, waitMsgTarget: true, bodyStyle:'padding: 10px 15px 15px 15px', //defaultType:'textfield', items:[{ xtype: 'fieldset', title: 'Login', defaultType: 'textfield', defaults: { width: 350, padding: 5 }, items: [{ fieldLabel:'Username', id:'txtUsername',name:'txtUsername', width: 280, allowBlank:false },{ fieldLabel:'Password', id:'txtPassword',name:'txtPassword', width: 280, allowBlank:false, inputType:'password' } ] }] }); var loginWindow = new Ext.Window({ title: 'Please Login', layout: 'fit', closable: false, resizable: false, draggable: false, border: false, modal: true, widht:325, height:193, items:login.show(), /* Memunculkan Form Panel */ buttons:[{ text:'Login', type:'submit', name:'signin', handler:function(btn){ login.getForm().submit({ method:'POST', waitTitle:'Please wait...', waitMsg:'Validasi user..,', success:function(){ Ext.Msg.alert('Sukses', 'Login Berhasil!', function(btn,text){ if(btn == 'ok'){ var redirect = 'index.php'; window.location = redirect; } }); }, failure:function(response){ //Ext.Msg.alert('Message', 'Login failed! Please try again...'); Ext.MessageBox.show({ title: 'Salah', msg: 'Login gagal! Silahkan coba lagi...', buttons: Ext.Msg.OK, icon: Ext.MessageBox.ERROR }); login.getForm().reset(); var txtUser=Ext.getCmp('txtUsername'); txtUser.focus('',10); } }); } }] }); loginWindow.show(); /* Memunculkan Window */ });

5. Memanggil Halaman Web

Jika semua tahapan telah dilakukan dengan benar langkah selanjutnya ialan dengan memanggil Halaman web yang telah dibuat tadi melalui Aplikasi Browser dan pada URL-nya langsung saja ketikkan "localhost/Login-Framework-ExtJs" lalu Enter.

maka hasilnya nanti akan nampak seperti berikut :


dengan preview dibawah ini :


atau download source code lengkapnya melalui link di bawah ini :

Link Download : Login-Framework-Extjs.rar
Password : mediadasar-basiccode-EXTJS

0 komentar

Post a Comment