MEMBUAT POSTING STATUS MENGGUNAKAN AJAX ~ Trigger Software

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>&nbsp;</td>

            <td>&nbsp;</td>

            <td><input type="text" name="name" id="name"></td>

        </tr>

        <tr>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td><textarea name="status" id="status" cols="25" rows="5"></textarea></td>

        </tr>

        <tr>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td align="right"><input type="button" id="submit_status" value="Posting Status"></td>

        </tr>

    </table>

<hr/>

<div id="list_status"></div>

#Tarraaaaa... Hasilnya bisa Anda lihat sendiri :D

MEMBUAT POSTING STATUS MENGGUNAKAN AJAX

4/ 5

Oleh ilyunal

ilyunal 09:30

Wednesday, 29 July 2015