Membuat Posting Status Menggunakan Ajax
Bro …Bro … nih postingan tepat banget buat yang lagi belajar ajax ,kaya gue …hehehe 😀
Sebelum ngoding kita kenalan dulu yukk sama ajax bro , ada pepatah yang bilang gini Bro “tak kenal maka tak sayang “. yuukk… yuuukk mari kita kenalan , Hayu ….yuuuu ….Kita Kenalan….hahaha
Ajax Merupakan singkatan dari Asynchrounous Javascript Dan XML.dari kepanjangan tersebut , terdapat tiga bagian penting yaitu Asynchronous ,Javascript dan XML.Asynchronous di kenal juga dengan istilah non-blocking .selama prosses asynchronous terjadi ,proses yang lain (Proses Utama) tidak akan terganggu dan tetap dapat berjalan.Dalam Ajax dilakukan dengan melakukan request background,sehingga apa yang sedang kita lakukan disebuah halaman website tidak akan terganggu dengan request yang dilakukan oleh ajax tersebut.
Pada Dasarnya ajax menggunakan XML HttpRequest object Javascript untuk membuat halaman request ke server secara asynchronous atau tanpa melakukan refresh halaman website.yang dibutuhkan agar ajax dapat berjalan adalah javascript harus di-enable pada browser yang digunakan. Walaupun javascript merupakan dasar dari ajax ,dimana Javascript sangat susah pada implementasi dan maintenance tetapi ajax memiliki sturuktur pemrograman yang lebih mudah untuk dipahami.Anda Tinggal Membuat Object XMLHttpRequest dan memastikan object tersebut terbentuk dengan benar kemudian menentukan kemana hasilnya akan ditampilkan atau dikirim.
Berikut Tekhnologi Yang termasuk dalam aplikasi AJAX.
- HTML yang digunakan untuk membuat Web form dan mengidentifikasi field-field yang akan digunakan dalam aplikasi
- JavaScript adalah kode inti untuk menjalankan aplikasi ajax dan unutk membantu memfasilitasi komunikasi dengan aplikasi
- DHTML atau Dynamic HTML , membantu anda untuk membuat form atau web dinamis .anda akan menggunakan <div> ,<span> dan elemen html dinamis lainnya.
- DOM (Document Object Model) akan digunakan (melalui kode javascript) untuk berkerja dengan kedua struktut dari html dan XML anda yang dalam beberapa kasus berasal dari server
XML Merupakan bentuk data yang digunakan dalam ajax .saat ini , lebih populer menggunakan data dalam bentuk JSON .Bentuk data yang digunakan tidak ada batasan ,Boleh juga Teks HTML ataupun teks biasa.
Untuk Memahami ajax setidaknya anda perlu mengetahui apa itu HTTP Request dan HTTP Response
- HTTP Request Merupakan Komunikasi yang dilakukan dari browser ke server .Browser lah yang memulai komunikasi tersebut.
- HTTP Response Merupakan komunikasi yang dilakukan server ke browser sebagai Hasil Dari Request .
Dalam Ajax Request memiliki Beberapa Method dan yang paling sering digunakan adalah GET dan POST .
- GET Merupakan Method request dimana data dikirim melalui query string (bagian URL setelah Tanda Tanya missal view.php?page=5)Request dengan get biasanya bertujuan mengambil data jumlah data yang diletakan di jquery String ini terbatas.
- POST merupakan Metode request dimana data dikirim melalui document,request dengan metode post ini biasanya bertujuan mengirimkan data. Jumlah data yang dapat diletakan didokumen ini tidak terbatas.
Bro… gw rasa cukup kenalan sama ajaxnya, jangan kelamaaan juga bisa disikat orang lewat bro.#eh Curcol …Maap …Maap …ahahaha
#Contoh ini meggunakan Codeigniter dan library Jquery -1.11.2
#Database
/* Navicat MySQL Data Transfer Source Server : Local-127.0.0.1 Source Server Version : 50611 Source Host : 127.0.0.1:3306 Source Database : status Target Server Type : MYSQL Target Server Version : 50611 File Encoding : 65001 Date: 2015-03-29 14:25:42 */ SET FOREIGN_KEY_CHECKS=0; -- ---------------------------- -- Table structure for post_status -- ---------------------------- DROP TABLE IF EXISTS `post_status`; CREATE TABLE `post_status` ( `id_status` int(5) NOT NULL AUTO_INCREMENT, `status` text, `name` varchar(50) DEFAULT NULL, `date_status` datetime DEFAULT NULL, PRIMARY KEY (`id_status`) ) ENGINE=InnoDB AUTO_INCREMENT=29 DEFAULT CHARSET=latin1; -- ---------------------------- -- Records of post_status -- ---------------------------- INSERT INTO `post_status` VALUES ('1', 'Tes Status ; Masih Jomblo ...Hahaha', 'Anif', '2015-03-28 21:26:48'); INSERT INTO `post_status` VALUES ('2', 'Boneka Emmonya Warna Ungu ... :*', 'Anneu', '2015-03-28 21:58:03'); INSERT INTO `post_status` VALUES ('3', 'Ungu {()}', 'Arrum', '2015-03-28 23:05:12');
#CONTROLLER
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); class Main extends CI_Controller { function __construct() { parent::__construct(); $this->load->model('mod_main','mm'); } public function index() { $this->load->view('view_timeline'); } public function get_request_post(){ $data = array( 'name' => $_POST['name'], 'status' => $_POST['status'], 'date_status'=> date('Y-m-d H:i:s') ); $this->mm->save_status($data); } public function load_status(){ $namabulan = array( 1=>"Januari", 2=>"Februari", 3=>"Maret", 4=>"April", 5=>"Mei", 6=>"Juni", 7=>"Juli", 8=>"Agustus", 9=>"September", 10=>"Oktober", 11=>"November", 12=>"Desember" ); $data = $this->mm->load_status(); foreach ($data as $records) { $explode=explode(" ",$records->date_status); $d=list($thn,$bln,$tgl)=explode('-',$explode[0]); $indate=$tgl.' '.$namabulan[(int)$d[1]].' '.$thn; echo $indate.' - '.$explode[1]."<br/>"; echo "Nama :".$records->name."<br/>"; echo "Status :".$records->status."<hr/>"; } } }
#MODEL
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); class Mod_main extends ci_model { public function save_status($data){ $this->db->insert('post_status',$data); } public function load_status(){ $this->db->order_by('id_status', 'DESC'); $this->db->from('post_status'); //$this->db->limit(1); $query = $this->db->get(); return $query->result(); } }
#VIEW
<script type="text/javascript" src="<?=base_url();?>assets/js/jquery-1.11.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#submit_status").click(function(){ var status = $('#status').val(); var name = $('#name').val(); $.ajax({ type:"POST", url :"main/get_request_post", data:{ status:status, name:name }, success:function(html){ //alert('Posting Berhasil'); load_list_status(); } }); }); }); load_list_status(); function load_list_status(){ $.ajax({ type:"POST", url :"main/load_status", data:'', success:function(html){ $('#list_status').html(html); } }); } </script> <table> <tr> <td> </td> <td> </td> <td><input type="text" name="name" id="name"></td> </tr> <tr> <td> </td> <td> </td> <td><textarea name="status" id="status" cols="25" rows="5"></textarea></td> </tr> <tr> <td> </td> <td> </td> <td align="right"><input type="button" id="submit_status" value="Posting Status"></td> </tr> </table> <hr/> <div id="list_status"></div>
#Tarraaaaa ini dia Hasilnya :)
tutorial nya sangat membantu sekali
terima kasih mas anif
this is great do you mind if I share it?