Shoutbox CodeIgniter

Posted: July 19, 2010 in Pendidikan

Langkah-langkah dalam membuat shoutbox menggunakan CodeIgniter sebagai berikut:

  1. Edit routes.php di C:/xampp/htdocs/codeigniter/system/application/config sebagai berikut:
  2. $route[‘default_controller’] = “shoutbox”; –> memanggil controller shoutbox

  3. Edit autoload.php di C:/xampp/htdocs/codeigniter/system/application/config sebagai berikut:
  4. $autoload[‘libraries’] = array(‘database’); –> load library otomatis
    $autoload[‘helper’] = array(‘form’, ‘url’); –> load helper otomatis

  5. Edit database.php di C:/xampp/htdocs/codeigniter/system/application/config sebagai berikut:
  6. $active_group = “default”;
    $active_record = TRUE;
    $db[‘default’][‘hostname’] = “localhost”; –> nama server
    $db[‘default’][‘username’] = “root”; –> username mysql
    $db[‘default’][‘password’] = “”; –> password mysql
    $db[‘default’][‘database’] = “shout”; –> menggunakan database pagination
    $db[‘default’][‘dbdriver’] = “mysql”; –> menggunakan mysql

  7. Tambahkan library shoutbox dengan cara buat MY_shoutbox.php di C:/xampp/htdocs/codeigniter/system/application/libraries dan isikan listing program sebagai berikut:
  8. <?php
    class MY_shoutbox extends CI_shoutbox
    {

    function MY_shoutbox($data)
    {
    parent::Controller();
    $this->load->model(‘Shoutbox_model’, ”, TRUE);
    }

    function index($data)
    {
    $this->show($data);
    }

    function show($data)
    {
    $data[‘shout_list’] = $this->shoutbox_model->get_shoutbox_list();
    $this->load->view(‘_shoutbox’, $data);
    }

    function ajax_add_shout($data)
    {
    if($this->input->is_ajax_request())
    {
    $this->load->library(‘validation’);
    $rules[‘shout_message’]           = “trim|xss_clean|htmlspecialchars|required”;
    $rules[‘shout_author_user_name’]  = “trim|xss_clean|htmlspecialchars|required”;
    $fields[‘shout_message’]          = “Message”;
    $fields[‘shout_author_user_name’] = “Name”;

    $this->validation->set_rules($rules);
    $this->validation->set_fields($fields);

    if ($this->validation->run() == TRUE)
    {
    $this->shoutbox_model->add_shout();
    }
    $this->ajax_update_shoutbox($data);
    }
    else{
    $this->index();
    }
    }

    function ajax_update_shoutbox($data)
    {
    if($this->input->is_ajax_request())
    {
    $data[‘shout_list’] = $this->shoutbox_model->get_shoutbox_list();
    $this->load->view(‘_shout_list’, $data);
    }
    else{
    $this->index();
    }
    }
    }

    ?>

  9. Buat controller baru dengan nama shoutbox.php di C:/xampp/htdocs/codeigniter/system/application/controllers dan isikan listing program sebagai berikut:
  10. <?php
    class Shoutbox extends Controller {

    function Shoutbox()
    {
    parent::Controller();
    $this->load->model(‘Shoutbox_model’, ”, TRUE); –> load shoutbox_model pada folder models
    }

    function index()
    {
    $this->show();
    }

    function show()
    {
    $this->load->library(‘MY_shoutbox’); –> load library MY_shoutbox pada folder libraries
    $this->load->model(‘Shoutbox_model’, ”, TRUE);
    $data[‘shout_list’] = $this->Shoutbox_model->get_shoutbox_list(); –> refer ke function get_shoutbox_list pada shoutbox_model di folder models
    $data[‘shoutbox’]  = $this->load->view(‘_shoutbox’, $data, TRUE); –> menampilkan _shoutbox pada folder views
    }

    function ajax_add_shout()
    {
    if($this->input->is_ajax_request())
    {
    $this->load->library(‘validation’); –> load library validation
    $rules[‘shout_message’] = “trim|xss_clean|htmlspecialchars|required”;
    $rules[‘shout_author_user_name’] = “trim|xss_clean|htmlspecialchars|required”;
    $fields[‘shout_message’] = “Message”;
    $fields[‘shout_author_user_name’] = “Name”;

    $this->validation->set_rules($rules);
    $this->validation->set_fields($fields);

    if ($this->validation->run() == TRUE)
    {
    $this->Shoutbox_model->add_shout(); –> refer ke function add_shout pada shoutbox_model di folder models
    }

    $this->ajax_update_shoutbox(); –> refer ke function ajax_update_shoutbox pada shoutbox di folder controllers
    }
    else
    {
    $this->index();
    }
    }

    function ajax_update_shoutbox()
    {
    if($this->input->is_ajax_request())
    {
    $data = array();
    $data[‘shout_list’] = $this->Shoutbox_model->get_shoutbox_list(); –> refer ke function get_shoutbox_list pada shoutbox_model di folder models
    $this->load->view(‘shout_list’, $data); –> menampilkan shout_list pada folder views
    }
    else
    {
    $this->index();
    }
    }

    }

    ?>

  11. Buat model baru dengan nama shoutbox_model.php di C:/xampp/htdocs/codeigniter/system/application/models dan isikan listing program sebagai berikut:
  12. <?php
    class Shoutbox_model extends Model {

    function Shoutbox_model()
    {
    parent::Model();
    }

    function get_shoutbox_list()
    {
    $this->db->limit(25, 0);
    $this->db->order_by(“shout_date_create”, “desc”);
    $this->db->from(‘shout’); –> menggunakan tabel shout
    $result = $this->db->get();
    if($result->num_rows() > 0)
    {
    $rows = $result->result_array();
    return $rows;
    }
    else{
    return array();
    }
    }

    function add_shout()
    {
    $this->db->set(‘shout_author_user_name’, $this->input->post(‘shout_author_user_name’)); –> field shout_author_user_name
    $this->db->set(‘shout_message’, $this->input->post(‘shout_message’)); –> field shout_message
    $this->db->set(‘shout_date_create’, “NOW()”, FALSE); –> field shout_date_create
    $this->db->insert(‘shout’); –> masukkan data ke tabel shout
    return TRUE;
    }
    }

    ?>

  13. Buat view baru dengan nama _shoutbox.php di C:/xampp/htdocs/codeigniter/system/application/views dan isikan listing program sebagai berikut:
  14. <legend>Shoutbox</legend>
    <form action=”javascript:void(0)” method=”post” id=”add_shout_form” accept-charset=”utf8″ style=’padding:0′>
    <dl style=’margin:0; padding:0′>
    <dt>Username:</dt>
    <dd>
    <?php
    $data = array(
    ‘name’        => ‘shout_author_user_name’,
    ‘id’          => ‘shout_author_user_name’,
    ‘size’        => ’20’,
    ‘maxlength’   => ’30’
    );
    echo form_input($data);
    ?>
    </dd>
    <dt>Message:</dt>
    <dd>
    <?php
    $data = array(
    ‘name’        => ‘shout_message’,
    ‘id’          => ‘shout_message’,
    ‘size’        => ’62’,
    ‘maxlength’   => ‘140’
    );
    $js = ‘onclick=”new Ajax.Updater(\’shout_list\’, \”.site_url().’/shoutbox/ajax_add_shout\’, {method: \’post\’, parameters: $(\’add_shout_form\’).serialize(true)}); $(\’shout_message\’).value = \’\’; $(\’shout_author_user_name\’).value = \’\’;”‘;
    echo form_input($data);
    echo ‘&nbsp;’;
    echo form_submit(‘submit’, ‘Shout’, $js);
    ?>
    </dd>
    </dl>
    <?= form_close() ?>

    <dl id=’shout_list’ style=’height:220px; border:solid 1px #ccc; overflow:scroll’>
    <? $this->load->view(‘_shout_list’, $data); ?>
    </dl>

  15. Buat view baru dengan nama _shout_list.php di C:/xampp/htdocs/codeigniter/system/application/views dan isikan listing program sebagai berikut:
  16. <?php
    if(count($shout_list) > 0)
    {
    foreach($shout_list as $shout):
    ?>
    <dt style=’width:6em’><?=$shout[‘shout_author_user_name’]?>:</dt>
    <dd style=’margin:-1.4em 0 0.54em 6em’><?=$shout[‘shout_message’]?></dd>
    <?php
    endforeach;
    }
    else{
    ?>
    <dt>No shouts</dt>
    <?php } ?>

  17. Ketik http://localhost/codeigniter di browser dan silahkan memulai shoutbox.
Advertisements
Comments
  1. Lucky Mahrus says:

    Pada no:
    4. Tambahkan library shoutbox dengan cara buat MY_shoutbox.php di C:/xampp/htdocs/codeigniter/system/application/libraries dan isikan listing program sebagai berikut:

    <?php
    class MY_shoutbox extends CI_shoutbox
    ….
    ….

    nah itu "class MY_shoutbox extends CI_shoutbox" kalau extends CI_shoutbox berarti My_shoutbox adalah turunan atau mengekor pada CI_shoutbox kan ya pak?

    Nah, di CI 2.0 saya cari kok ga ada ya pak CI_shoutbox? mohon bantuan nya ya pak.

    Terima kasih.

    • wajarsana says:

      mohon maaf pak, sementara ini saya belum dapat menjawab pertanyaan karena saya belum pernah mencoba CI 2.0

    • Lucky Mahrus says:

      Klo ga pke CI yg lama gmn pak?

      klo migrasi dari CI lama (1.xx) ke CI 2.0 cukup lakukan perubahan spt ini:

      File index.php replace dg file index.php dari bawaan CI 2.0..
      kemudian untuk semua controller & model perubahannya masing2 seperti di bawah ini:

      ==========================================

      /* CONTROLLER – ASLINYA */
      class Xxx extends Controller {
      /**
      * Constructor
      */
      function xxx()
      {
      parent::Controller();
      }
      }

      /* CONTROLLER – MODIFIKASI */
      class Xxx extends CI_Controller {
      /**
      * Constructor
      */
      function __construct()
      {
      parent::__construct();
      }
      }

      ==========================================

      /* MODEL – ASLINYA */
      class Xxx_model extends Model {
      /**
      * Constructor
      */
      function xxx_model()
      {
      parent::Model();
      }
      }

      /* MODEL – MODIFIKASI */
      class Xxx_model extends CI_Model {
      /**
      * Constructor
      */
      function __construct()
      {
      parent::__construct();
      }
      }

      =========================================

      hanya itu saja perubahan nya pak..

  2. abdurrahman sami says:

    menurut saya harus nya di controller ga perlu load model lagi, kalau memang di library emang sudah di load

  3. ada demonya g nih gan??

  4. idek says:

    Kalo mau pake Smiley gimana ya mas??

  5. lagingetes says:

    minta database ny dong

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s