Shoutbox CodeIgniter

Langkah-langkah dalam membuat shoutbox menggunakan CodeIgniter sebagai berikut:

1. Edit routes.php di C:/xampp/htdocs/codeigniter/system/application/config sebagai berikut:

$route['default_controller'] = “shoutbox”; –> memanggil controller shoutbox

2. Edit autoload.php di C:/xampp/htdocs/codeigniter/system/application/config sebagai berikut:

$autoload['libraries'] = array(‘database’); –> load library otomatis
$autoload['helper'] = array(‘form’, ‘url’); –> load helper otomatis

3. Edit database.php di C:/xampp/htdocs/codeigniter/system/application/config sebagai berikut:

$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

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
{

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();
}
}
}

?>

5. Buat controller baru dengan nama shoutbox.php di C:/xampp/htdocs/codeigniter/system/application/controllers dan isikan listing program sebagai berikut:

<?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();
}
}

}

?>

6. Buat model baru dengan nama shoutbox_model.php di C:/xampp/htdocs/codeigniter/system/application/models dan isikan listing program sebagai berikut:

<?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;
}
}

?>

7. Buat view baru dengan nama _shoutbox.php di C:/xampp/htdocs/codeigniter/system/application/views dan isikan listing program sebagai berikut:

<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>

8. Buat view baru dengan nama _shout_list.php di C:/xampp/htdocs/codeigniter/system/application/views dan isikan listing program sebagai berikut:

<?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 } ?>

9. Ketik http://localhost/codeigniter di browser dan silahkan memulai shoutbox.