Dalam pemrograman web anda pasti sudah tidak asing dengan
nama AJAX (Asynchronous Javascript XML).
Ya alat untuk komunikasi data dari client ke server ataupun sebaliknya , di
artikel ini saya akan membuat AJAX ini lebih mudah dengan JQUERY . Tentu pasti
anda sudah tidak asing lagi karena ini framework Javascript yang paling
populer. OK sekarang saya akan membuat server nya dengan PHP + Codeigniter ,
kenapa saya lebih memilih Codeigniter ? Karena ini sangat mudah nan powerfull
dan juga efisien penulisan kode. Codeigniter juga menyediakan library agar
memudahkan programmer tidak menulis kode program dari nol (scratch) dan juga
Codeigniter menyediakan kelas Helper atau kelas untuk memudahkan juga dalam hal
pengerjaan proyek programming anda. Disini saya akan memberi contoh yaitu
simple Signin form , saya menggunakan framework CSS Materialize , dan juga
Jquery untuk clientnya . sebelum melihat source code , alasan menggunakan AJAX adalah agar membuat komunikasi data antara server dan client tidak harus mereload halaman . OK kita lanjut
Baca juga : Pengenalan Framework Materialize
Langkah pertama yaitu kita akan membuat tampilan selanjutnya program Codeigniter dan Ajaxnya .Sebelum kita mulai banyak konfigurasi seperti yang saya bilang sebelumnya yaitu mulai dari pembuatan folder hingga penamaan database.
- Pertama , buat folder yang bernama “form” di folder C:/Local Disk/xampp/htdocs/
- Kedua , Copy Paste kan file Codeigniter mulai dari application ke
folder form tadi
- Ketiga , buka folder config di application/config/config.php dan ganti
Note : Untuk index_page bisa dihapus jika punya file .htaccess di codeigniter
- Keempat , buat database serupa dengan ini
Note : Tabel database disarankan agar sama karena akan bekerja dengan form ini
-
Kelima, konfigurasi database di application/config/database.php
Itulah langkah konfigurasinya , selanjutnya design, Untuk design admin kasih full source code , untuk tampilan seperti ini :
Untuk source code nya :
<!Doctype HTML>
<html>
<head>
<title>Signin dengan Materialize dan Codeigniter</title>
<link rel="stylesheet" type="text/css" href=<?php echo base_url('asset/css/materialize.css');?>>
<link rel="stylesheet" type="text/css" href=<?php echo base_url('asset/css/materialize.min.css');?>>
<link rel="stylesheet" type="text/css" href=<?php echo base_url('asset/css/font-awesome.css');?>>
<link rel="stylesheet" type="text/css" href=<?php echo base_url('asset/css/font-awesome.min.css');?>>
<link rel="stylesheet" type="text/css" href=<?php echo base_url('asset/css/style.css');?>>
<script type="text/javascript" src = <?php echo base_url('asset/js/jquery.js');?>></script>
<script type="text/javascript" src = <?php echo base_url('asset/js/materialize.js');?>></script>
<script type="text/javascript" src = <?php echo base_url('asset/js/script.js');?>></script>
</head>
<body>
<div class="progress" id="show">
<div class="indeterminate"></div>
</div>
<div class="row">
<div class="col l5 m12 s12">
<form id="form">
<div class="card hoverable" id="wrap-form">
<div class="progress" id="progress">
<div class="indeterminate"></div>
</div>
<div class="isi">
<div class="card-title">
<div class="center" id="logo"><i class="fa fa-user-o setting-icon fa-3x"></i></div>
<div class="text center">Signin</div>
<div class="divider"></div>
</div>
<div class="card-content">
<i class="fa fa-user-circle-o setting-icon fa-2x" id="username"></i>
<div class="input-field">
<input id="name" type="text" name = "username"class="active validate" required>
<label for="name">Username</label>
</div>
<i class="fa fa-envelope settingicon fa-2x" id="email"></i>
<div class="input-field">
<input id="email" type="email" class="active validate" name="email" required>
<label for="email">Gmail</label>
</div>
<i class="fa fa-key setting-icon fa-2x" id="password"></i>
<div class="input-field">
<input id="password" type="password" name = "password" class="active validate" required>
<label for="password">Password</label>
</div>
</div>
<div class="card-action">
<button class="btn waves-effect waves-light red center" type="button" id="btn-sub">Submit <i class="fa fa-paper-plane"></i></button>
</div>
</div>
</div>
</form>
</div>
</div>
</body>
</html>
Copy pastekan kode diatas dan simpan dengan nama signin.php, setelah anda membuat file tersebut , lalu anda membuat file script jquery . Sebelumnya anda harus membuat folder asset di folder home bukan di application isinya adalah “js, css ,fonts” OK langsung saja script nya :
$(document).ready(function(){
//global variable start
$('#show').hide();
$('#progress').hide();
$('#modal1').hide();
var error = $('.error').hide();
$('input').css({
'width' : '50px'
});
$('#btn-sub').addClass('disabled');//event statement start
$('input').on('focus' , function(){
$(this).css({
'width' : '250px',
'transition' : '2s'
});
var tern = ($(this).val() != '') ? $('#btnsub').removeClass('disabled') : $('#btn-sub').addClass('disabled');
});
$('input').on('keyup' , function(){
//logic ternary statement
var tern = ($(this).val() != '') ? $('#btnsub').removeClass('disabled') : $('#btn-sub').addClass('disabled');
});
//signin button click event
$('#btn-sub').click(function(){
var username_val = $('input#name').val();
var email_val = $('input#email').val();
var password_val = $('input#password').val();
var userAgent = browser();//ajax sending data
$.ajax({
url : 'http://localhost/form/signin',
contentType : 'application/json',
data : {'username' : username_val , 'email' : email_val , 'password' : password_val , 'userAgent' : userAgent},
success : function (response){//response value
var rs = JSON.parse(response);
switch(rs.data){
case 'username_empty':
Materialize.toast('No username', 1000);
break;
case 'username_too_short' :
Materialize.toast('username is too short',1000);
break;
case 'email_empty' :
Materialize.toast('email is empty',1000);
break;
case 'email_not_add' :
Materialize.toast('you must add"@" sign for your email' , 1000);
break;
case 'email_empty_domain' :
Materialize.toast('your email must have domain' , 1000);
break;
case 'email_not_contain_name' :
Materialize.toast('you must add character before @ sign' , 1000);
break;
case 'password_empty' :
Materialize.toast('password is empty',1000);
break;
case 'password_weak' :
Materialize.toast('password is too weak minimum character is 4',1000);
break;
default : //success response
alert('You are signed in');
$('#progress').show();
$('.isi').css('opacity' , '0.1');$('input').attr('disabled' , '');
break;
}
}
});
});
$('#close').click(function(){
$('#modal1').hide(1000);
});
//browser detection
function browser(){
var userAgent = navigator.userAgent;
var opera = (userAgent.indexOf('Opera') != -1);
var ie = (userAgent.indexOf('MSIE') != -1);
var gecko = (userAgent.indexOf('Gecko') != -1);
var netscape = (userAgent.indexOf('Mozilla') != -1);
var version = navigator.appVersion;
if (opera) {
return 'Opera browser ' + version;
}else if (gecko) {
return 'Chrome browser ' + version;
}else if (ie) {
return 'Internet Explorer damn browser ' + version;
}else if(netscape){
return 'Netscape browser ' + version;
}else{
return 'Unknown';
}
}
})
Seperti yang anda lihat di bari ajax kita melakukan request ke server
tapi tidak dengan filenya tetapi route nya atau penunjukkan fungsi
untuk routingnya akan dibahas , setelah request server memberikan
response ke client nanti client mengolahnya menjadi pesan error.
Note : Untuk request admin menggunakan JSON agar lebih mudah
Selanjutnya kita membuat file controller , admin menggunakan nama
file “Form.php” karena mengikuti nama projectnya disarankan anda
juga sama. Berikut kodenya boleh di copy paste :
<?php
class Form extends CI_Controller{
protected $username ;
protected $email ;
protected $password;
protected $userAgent;
public function __construct(){
parent::__construct();
}
public function index(){
$this->load->view('signin');
}
public function request($data){
return $_REQUEST[$data];
}
public function signin(){
$data = array('data' => '' , 'logged' => '');
if($this->input->is_ajax_request()){
header('application/json');
$this->username = $this->request('username');
$this->email = $this->request('email');
$this->password = $this->request('password');
$this->userAgent = $this->request('userAgent');
if(empty($this->username)){
$data = array('data' => 'username_empty' , 'logged' => false);
echo json_encode($data);
}elseif (strlen($this->username) <= 3) {$data = array('data' => 'username_too_short' , 'logged' => false);
echo json_encode($data);
}elseif(empty($this->email)) {
$data = array('data' => 'email_empty' , 'logged' => false);
echo json_encode($data);
}elseif (preg_match('/\.(com|co\.id|net|[az])$/i', $this->email) == false) {
$data = array('data' => 'email_empty_domain' , 'logged' => false);
echo json_encode($data);
}elseif (preg_match('/^(\d|[a-z])/i', $this->email) == false) {
$data = array('data' => 'email_not_contain_name' , 'logged' => false);
echo json_encode($data);
}elseif (strpos($this->email, '@') == false) {
$data = array('data' => 'email_not_add' , 'logged' => false);
echo json_encode($data);
}elseif (empty($this->password)) {
$data = array('data' => 'password_empty' , 'logged' => false);echo json_encode($data);
}elseif (strlen($this->password) <= 3) {
$data = array('data' => 'password_weak' , 'logged' => false);
echo json_encode($data);
}else{
$data = array('data' => 'success' , 'logged' => true);
$this->Form_model->save_data_signin($this->username , $this->email , $this->password ,$this->input->ip_address(), $this->userAgent);
$this->session->set_userdata(array('nama'=> $this->username , 'ip_address' => $this->input->ip_address() ,'user_agent' => $this->userAgent));
echo json_encode($data);
}
}
else{
echo 'Ajax request failed drained systems compromised';
}
}
File ini berguna untuk mengambil request dari client dan mengirim
response ke client. Selanjutnya admin membuat file “Form_model.php”
untuk menyimpan data ke database , berikut copy paste kode ini :
<?php
error_reporting(E_ALL^(E_WARNING | E_NOTICE));
class Form_model extends CI_Model{
protected $query;
public function __construct(){
parent::__construct();
}
public function save_data_signin($nama , $email , $password , $ip_address , $user_agent){
$data = array(
'username' => $nama,
'gmail' => $email,
'password' => $password,
'ip_address' => $ip_address,
'user_agent' => $user_agent
);
return $this->db->insert('signin' , $data);
}
}
?>
Setelah copy paste , simpan file tersebut di application/models lalu
registerkan file model ini di application/config/autoload.php agar
memudahkan.
Selanjutnya kita routing , untuk routing caranya kita tunjuk kelas
controller lalu methodnya yang kita pilih contoh nya :
Setelah semuanya anda lakukan mari kita testing , hasilnya seperti ini :
Itu adalah errornya lalu pesan successnya seperti ini :
Setelah success nanti muncul animasi nya . sebelumnya banyak sekali yang harus anda perhatikan pertama file .htaccess , jika anda belum mempunyai file htaccess jangan menghapus index_page di config , lalu semua animasi dan response ada di file jquery tersebut, dan untuk asset isinya adalah file tambahan seperti css , js , dan fonts. AJAX memiliki beberapa kelemahan yaitu kita harus melakukan request baru mendapatkan response dari server jadi disini kalian bisa memodifikasinya dengan sistem reload . Itu saja artikel yang saya bisa buat mohon maaf atas kesalahan kata , yang benar hanyalah Allah SWT , sekian terima kasih . SALAM PROGRAMMER .
Kalau ada yang ingin bertanya silahkan di kolom komentar jangan malu malu OK . Karena saya juga sama - sama belajar atau bisa juga save nomor WhatsApp saya hanya dengan klik link ini dan untuk DEMO