You are on page 1of 10

Modul Codeigniter Studi Kasus: Posting Seperti Facebook

#1 : Membuat Fitur Post #2 : Menambahkan Fitur Comment

#3 : Menambahkan Fitur Like

http://toniharyanto.cs.upi.edu toha.samba@gmail.com @yllumi

Membuat tabel like pada database 2. aturan dasar Jquery Dependensi: Program dari Studi Kasus: Posting Seperti Facebook modul #1 : Membuat Fitur Post. Menambahkan fitur ajax dengan jquery . karena dalam modul ini kita akan menggunakan program yang sudah kita buat di modul pertama dan menambahkan beberapa scripting di bagian-bagian tertentu. Modul ini adalah lanjutan dari modul #1 Membuat Fitur Post dan modul #2 Menambahkan Fitur Komentar.5 atau yang terbaru. membuat model. Jquery versi 1.Pendahuluan Selamat datang di Modul Tutorial Codeigniter. Menambahkan beberapa fungsi pada controller post. Spesifikasi Modul Bahan yang diperlukan: Codeigniter versi 2. Level: Medium Prasyarat: Pemrograman PHP dan pengaturan awal Codeigniter. Apabila Kamu belum mencoba modul pertama dan kedua. saya anjurkan untuk mencobanya dahulu. dan view untuk like 3. Tahapan Modul #3 1.

controllers/post. // include model like_m di function __construct() $this­>load­>model('like_m').php Untuk membuat fitur like.   `post_id` int(11) NOT NULL. $this­>load­>model('post_m').   PRIMARY KEY (`id`) ) ENGINE=MyISAM  DEFAULT CHARSET=latin1 . Membuat Fungsi Berbeda dengan penambahan fitur komentar di modul #2. $this­>load­>model('comment_m'). penjelasan: id untuk indentitas setiap baris data. Tambahkan beberapa fungsi berikut di controller post. karena nantinya akan ada function yang dipanggil langsung di view seperti firut komentar. $this­>load­>helper(array('url'.*/ // fungsi untuk mengambil data like user atas suatu post public function get_like($post_id = null){ return $this­>like_m­>get_like($post_id). untuk fitur like ini sangat mudah. 'form')). models/   |– like_m. user_id untuk menyimpan id user yang menyukai post. } // fungsi untuk menyimpan like user atas suatu post function like_post($post_id = null){ //ganti dengan user id aktif . } /* LIKE FUNCTIONS ----------------------------------------------.php function __construct(){ parent::__construct().php.kita hanya akan membuat fungsi di controller post dan file model like_m. CREATE TABLE `like` (   `id` int(11) NOT NULL AUTO_INCREMENT. post_id untuk menyimpan id post yang disukai.Membuat Tabel `comment` Setelah menyiapkan codeigniter pada localhost dan membuat database.   `user_id` int(11) NOT NULL. kita akan menggunakan controller post yang sudah ada. kita buat sebuah table dengan nama 'post'.

 $data).php <?php  if ( ! defined('BASEPATH')) exit('No direct script access allowed'). $this­>load­>database(). } models/like_m. } // fungsi untuk menghapuslike user atas suatu post function unlike_post($post_id = null){ //ganti dengan user id aktif $res = $this­>like_m­>unlike($post_id. $post_id) ­>order_by('id'. $this­>db­>insert('like'. } // fungsi untuk menambil data like dari suatu post function get_like($post_id){ return $this­>db­>where('post_id'.$res = $this­>like_m­>like($post_id. } // fungsi untuk menyimpan data like user untuk suatu post function like($post_id. $user_id){ $data = array( 'post_id' => $post_id. . $user_id){ $data = array( 'post_id' => $post_id.  if($res){ redirect(getenv('HTTP_REFERER')). } // fungsi untuk menghapus data like user untuk suatu post function unlike($post_id. } return false. 1). 'user_id' => $user_id ). class Like_m extends CI_Model { function __construct(){ parent::__construct(). } return false. 1). 'user_id' => $user_id ). return $this­>db­>insert_id(). 'desc') ­>get('like'). if($res){ redirect(getenv('HTTP_REFERER')).

"</span>" : "<span id='$id'></span>". ?> </div> <div class="post_meta"> <?php echo date("d M Y H:i:s". $link = site_url('post/unlike_post/'. <?php echo ($likes­>num_rows() > 0)  ? "<span class='total_like' id='$id'>". $class = 'like'.$id).$id). $caption = 'Suka'.php <li class="post" id="post­<?php echo $id. ?>"> <?php echo $caption. return $this­>db­>affected_rows().$likes­>num_rows(). $link = site_url('post/like_post/'. ?>"> <div class="post_avatar"> <img src="<?php echo base_url().$this­>db­>delete('like'. } } views/post/post.$id). } } } ?> &middot. $comments['total_comment']. foreach($likers as $value){ if($value['user_id'] == 1){ //ganti 1 dengan user aktif $class = 'unlike'. ?>assets/0. if($likes­>num_rows() > 0){ $likers = $likes­>result_array(). $datetime). ?> <?php $comments = post::get_comments($id). ?> </a> </div> . $data). ?>" class="<?php echo $class. ?> &middot. ?>"  class="comment_link">Komentar</a> <?php  $likes = post::get_like($id).png" /> </div> <div class="post_content"> <a href="#"><?php echo $nama. $caption = 'Tidak suka'. ?>  <a href="<?php echo $link."</span>" : "<span id='$id'></span>". <?php echo ($comments['total_comment'] > 0)  ? "<span class='total_comment' id='$id'>". break. ?> <a href="<?php echo site_url('post/detail_post/'. ?></a> <div class="post_status"> <?php echo $post.

org/1999/xhtml" xml:lang="en" lang="en"> <head> .'assets/delete. .png" /> </div> <div class="post_content"> <a href="#"><?php echo $nama. ?>" /> </a> </div> </li> views/post/detail. $caption = 'Suka'. $datetime).org/TR/xhtml1/DTD/xhtml1­transitional.0 Transitional//EN"  "http://www. ?>"  class="comment_link">Komentar</a> <?php  $likes = post::get_like($id)."</span>" : "<span id='$id'></span>".$id). <li class="post" id="post­<?php echo $id. ?> <?php echo post::comment_form($id).php <!DOCTYPE html PUBLIC "­//W3C//DTD XHTML 1.$comments['total_comment']. ?> &middot. ?> </div> <div class="post_meta"> <?php echo date("d M Y H:i:s". ?> <?php $comments = post::get_comments($id).  <?php echo ($comments['total_comment'] > 0)  ? "<span class='total_comment' id='$id'>". $class = 'like'.$id).$id).w3.<div class="comments"> <?php echo $comments['commentlist']. ?>"> <img src="<?php echo base_url().png'. .dtd"> <html xmlns="http://www.w3. if($likes­>num_rows() > 0){ $likers = $likes­>result_array(). ?>"> <div class="post_avatar"> <img src="<?php echo base_url(). ?> </div> </div> <div class="post_delete"> <a href="<?php echo site_url('post/confirm_delete/'. $link = site_url('post/like_post/'. ?>" class="delete_post"  id="<?php echo $id. . ?> <a href="<?php echo site_url('post/detail_post/'. ?></a> <div class="post_status"> <?php echo $post. $caption = 'Tidak suka'. $link = site_url('post/unlike_post/'.$id). ?>assets/0. foreach($likers as $value){ if($value['user_id'] == 1){ //ganti 1 dengan user aktif $class = 'unlike'.

Sampai disini setiap kali kita mengklik link 'suka'. false).png'.js yang sudah kita buat di modul #1.$likes­>num_rows().$id). assets/myapps. <?php echo ($likes­>num_rows() > 0)  ? "<span class='total_like' id='$id'>". Anda dapat mencoba program Anda.ready(function() { // fungsi untuk menambah data suka untuk suatu post $('.total_like { background:#bbc. Fungsi-fungsi jquery tersebut diantaranya untuk menambahkan dan menghapus data pada saat link 'suka' diklik. Kita akan menambahkan beberapa fungsi pada file myapps.php dan views/post/detail. } } } ?> &middot. margin:0 2px.'assets/delete. program akan mereload halaman browser kemudian kembali ke halaman semula. ?>" onclick="return confirm('yakin akan menghapus post ini?'). ?>  <a href="<?php echo $link. function(){ $elm = $(this).js $(document). ?>"> <?php echo $caption. ?> <?php echo post::comment_form($id.like').js.  padding:0 4px."> <img src="<?php echo base_url().php. border­radius:3px. ?>" class="delete_post"  id="<?php echo $id. . .break.post_meta span. Tambahkan script berikut ke dalam file myapps. ?>" class="<?php echo $class. color:#fff."</span>" : "<span id='$id'></span>".live('click'. ?> </a> </div> <div class="comments"> <?php echo $comments['commentlist']. ?>" /> </a> </div> </li> </ul> </div> </body> </html> Terakhir tambahkan css untuk komentar. ?> </div> </div> <div class="post_delete"> <a href="<?php echo site_url('post/confirm_delete/'.} Menambahkan Fitur AJAX dengan JQuery Fitur like sudah selesai. Dengan ajax kita akan membuat link 'suka' dapat diklik tanpa perlu berpindah halaman. Tambahkan di file views/post/index.

. var total = $('span.  else $elm.total_like#'+id). // bila total suka lebih dari 0 if(total && total > 0)  // tambah total suka 1 $('span.total_like#'+id). data: 'ajax=true&post_id=' + id.children('span:nth(1)') .children('span:nth(1)'). return false..attr('id').  // bila belum ada yang suka sebelumnya else  // tambahkan class 'total_like' pada caption total suka dan isi nilai 1 $elm. // fungsi untuk menghapus data suka untuk suatu post // sama seperti fungsi sebelumnya. class dan url $('. $. // setelah panambahan data suka berhasil success: function(response){ // ganti kata 'sebentar.removeClass('unlike').addClass('like').html('sebentar.removeAttr('href').ajax({ type: "POST". } })..html().html('Suka').attr('href'.' untuk proses loading.addClass('unlike').html('sebentar.addClass('total_like').. var id = $elm.'). tambah class 'unlike'.live('click'. site_url + "post/unlike_post/"+id) . // dan ganti url menjadi post/unlike_post $elm. $elm.ajax({ type: "POST". // ganti kata 'suka' menjadi 'sebentar.html(). url: site_url + "/post/unlike_post". site_url + "post/like_post/"+id) .total_like#'+id).html('Tidak suka'). function(){ $elm = $(this). // menyiapkan variabel untuk memuat nilai total suka suatu post var total = $('span.attr('href'.total_like#'+id). kecuali penggantian caption. // siapkan data untuk dikirim via ajax data: 'ajax=true&post_id=' + id. success: function(response){ $elm. if(total && total > 2)  $('span.// menyiapkan variabel untuk memuat nilai id post yang disuka var id = $elm.parent().removeClass('like').removeAttr('href').'). $.' menjadi 'Tidak suka'.html(++total).attr('id'). hapus class 'like' $elm.parent(). url: site_url + "/post/like_post".html(­­total).html(1).unlike'). }).

removeClass('total_like'). } return false. controllers/post. } . true)  : $post_id. } // fungsi untuk menyimpan like user atas suatu post function like_post($post_id = null){ //prioritaskan id yang dikirim POST via ajax //id dari parameter digunakan bila javascript tidak berjalan $post_id = ($this­>input­>post('post_id'))  ? $this­>input­>post('post_id'. } // fungsi untuk menghapuslike user atas suatu post function unlike_post($post_id = null){ //prioritaskan id yang dikirim POST via ajax //id dari parameter digunakan bila javascript tidak berjalan $post_id = ($this­>input­>post('post_id'))  ? $this­>input­>post('post_id'. true)  : $post_id..  if($res){ redirect(getenv('HTTP_REFERER')).*/ // fungsi untuk mengambil data like user atas suatu post public function get_like($post_id = null){ //prioritaskan id yang dikirim POST via ajax //id dari parameter digunakan bila javascript tidak berjalan $post_id = ($this­>input­>post('post_id'))  ? $this­>input­>post('post_id'. //ganti dengan user id aktif $res = $this­>like_m­>unlike($post_id. 1). if($res){ redirect(getenv('HTTP_REFERER')). }). true)  : $post_id. } }). return $this­>like_m­>get_like($post_id). return false. }).php /* LIKE FUNCTIONS ----------------------------------------------. } return false. //ganti dengan user id aktif $res = $this­>like_m­>like($post_id. 1).html('').

 ?>"> <?php echo $caption. ?>" class="<?php echo $class. <a href="<?php echo $link. *** .php. Horreee! \(^0^)/ Selamat. ?> </a> dan tambahkan script yang dicetak tebal. ?> </a> lakukan hal yang sama pada file views/post/detail. Mudahmudahan lancar. cari script berikut <a href="<?php echo $link.pada file views/post/post. Anda telah menyelesaikan Modul Codeigniter Studi Kasus: Posting Seperti Facebook. Apabila ada kendala. Kritik dan saran akan sangat bermanfaat untuk pembuatan modul selanjutnya. ?>"> <?php echo $caption. ?>" id="<?php echo $id.php. Kontak saja via email atau komentar blog yang alamatnya tertera di cover. saya dengan senang hati membantu. ?>" class="<?php echo $class.