modul codeigniter- studi kasus posting seperti facebook #3 menambahkan fitur like

Modul Codeigniter

Studi Kasus: Posting Seperti Facebook

#1 : Membuat Fitur Post

#2 : Menambahkan Fitur Comment

#3 : Menambahkan Fitur Like

http://toniharyanto.cs.upi.edu

[email protected]

@yllumi

http://toniharyanto.cs.upi.edu/

Pendahuluan

Selamat datang di Modul Tutorial Codeigniter. Modul ini adalah lanjutan dari modul #1 Membuat Fitur Post

dan modul #2 Menambahkan Fitur Komentar. Apabila Kamu belum mencoba modul pertama dan kedua, saya

anjurkan untuk mencobanya dahulu, karena dalam modul ini kita akan menggunakan program yang sudah kita

buat di modul pertama dan menambahkan beberapa scripting di bagian-bagian tertentu.

Spesifikasi Modul

Bahan yang diperlukan: Codeigniter versi 2, Jquery versi 1.5 atau yang terbaru;

Level: Medium

Prasyarat: Pemrograman PHP dan pengaturan awal Codeigniter, aturan dasar Jquery

Dependensi: Program dari Studi Kasus: Posting Seperti Facebook modul #1 : Membuat Fitur Post.

Tahapan Modul #3

1. Membuat tabel like pada database

2. Menambahkan beberapa fungsi pada controller post, membuat model, dan view untuk like

3. Menambahkan fitur ajax dengan jquery

Membuat Tabel `comment`

Setelah menyiapkan codeigniter pada localhost dan membuat database, kita buat sebuah table dengan nama 'post'.

CREATE TABLE `like` ( ìd` int(11) NOT NULL AUTO_INCREMENT, `post_id` int(11) NOT NULL, ùser_id` int(11) NOT NULL, PRIMARY KEY (ìd`)) ENGINE=MyISAM DEFAULT CHARSET=latin1 ;

penjelasan:

id untuk indentitas setiap baris data;

post_id untuk menyimpan id post yang disukai;

user_id untuk menyimpan id user yang menyukai post;

Membuat Fungsi

Berbeda dengan penambahan fitur komentar di modul #2, untuk fitur like ini sangat mudah,kita hanya akan membuat fungsi di controller post dan file model like_m.php.

models/

|– like_m.php

Untuk membuat fitur like, kita akan menggunakan controller post yang sudah ada, karena nantinya akan ada function yang dipanggil langsung di view seperti firut komentar. Tambahkan beberapa fungsi berikut di controller post.

controllers/post.phpfunction __construct(){

parent::__construct();$this>load>helper(array('url', 'form'));$this>load>model('post_m');$this>load>model('comment_m');

// include model like_m di function __construct()$this>load>model('like_m');

}

/* LIKE FUNCTIONS ----------------------------------------------- */// fungsi untuk mengambil data like user atas suatu postpublic function get_like($post_id = null){

return $this>like_m>get_like($post_id);}

// fungsi untuk menyimpan like user atas suatu postfunction like_post($post_id = null){

//ganti dengan user id aktif

$res = $this>like_m>like($post_id, 1);if($res){

redirect(getenv('HTTP_REFERER'));}

return false;}

// fungsi untuk menghapuslike user atas suatu postfunction unlike_post($post_id = null){

//ganti dengan user id aktif$res = $this>like_m>unlike($post_id, 1); if($res){

redirect(getenv('HTTP_REFERER'));}

return false;}

models/like_m.php<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Like_m extends CI_Model{

function __construct(){parent::__construct();$this>load>database();

}

// fungsi untuk menambil data like dari suatu postfunction get_like($post_id){

return $this>db>where('post_id', $post_id)>order_by('id', 'desc')>get('like');

}

// fungsi untuk menyimpan data like user untuk suatu postfunction like($post_id, $user_id){

$data = array('post_id' => $post_id,'user_id' => $user_id

);$this>db>insert('like', $data);return $this>db>insert_id();

}

// fungsi untuk menghapus data like user untuk suatu postfunction unlike($post_id, $user_id){

$data = array('post_id' => $post_id,'user_id' => $user_id

);

$this>db>delete('like', $data);return $this>db>affected_rows();

}

}

views/post/post.php<li class="post" id="post<?php echo $id; ?>">

<div class="post_avatar"><img src="<?php echo base_url(); ?>assets/0.png" />

</div><div class="post_content">

<a href="#"><?php echo $nama; ?></a><div class="post_status">

<?php echo $post; ?></div><div class="post_meta">

<?php echo date("d M Y H:i:s", $datetime); ?>

<?php $comments = post::get_comments($id); ?>· <?php echo ($comments['total_comment'] > 0)

? "<span class='total_comment' id='$id'>".$comments['total_comment']."</span>"

: "<span id='$id'></span>"; ?><a href="<?php echo site_url('post/detail_post/'.$id); ?>"

class="comment_link">Komentar</a>

<?php $likes = post::get_like($id);$class = 'like';$link = site_url('post/like_post/'.$id);$caption = 'Suka';if($likes>num_rows() > 0){

$likers = $likes>result_array();foreach($likers as $value){

if($value['user_id'] == 1){ //ganti 1 dengan user aktif$class = 'unlike';$link = site_url('post/unlike_post/'.$id);$caption = 'Tidak suka';break;

}}

}?>· <?php echo ($likes>num_rows() > 0)

? "<span class='total_like' id='$id'>".$likes>num_rows()."</span>": "<span id='$id'></span>"; ?>

<a href="<?php echo $link; ?>" class="<?php echo $class; ?>"><?php echo $caption; ?>

</a></div>

<div class="comments"><?php echo $comments['commentlist']; ?><?php echo post::comment_form($id); ?>

</div></div><div class="post_delete">

<a href="<?php echo site_url('post/confirm_delete/'.$id); ?>" class="delete_post" id="<?php echo $id; ?>">

<img src="<?php echo base_url().'assets/delete.png'; ?>" /></a>

</div></li>

views/post/detail.php<!DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>...

<li class="post" id="post<?php echo $id; ?>"><div class="post_avatar">

<img src="<?php echo base_url(); ?>assets/0.png" /></div><div class="post_content">

<a href="#"><?php echo $nama; ?></a><div class="post_status">

<?php echo $post; ?></div><div class="post_meta">

<?php echo date("d M Y H:i:s", $datetime); ?>

<?php $comments = post::get_comments($id); ?>· <?php echo ($comments['total_comment'] > 0) ? "<span class='total_comment' id='$id'>".$comments['total_comment']."</span>": "<span id='$id'></span>"; ?><a href="<?php echo site_url('post/detail_post/'.$id); ?>" class="comment_link">Komentar</a>

<?php $likes = post::get_like($id);$class = 'like';$link = site_url('post/like_post/'.$id);$caption = 'Suka';if($likes>num_rows() > 0){

$likers = $likes>result_array();foreach($likers as $value){

if($value['user_id'] == 1){ //ganti 1 dengan user aktif$class = 'unlike';$link = site_url('post/unlike_post/'.$id);$caption = 'Tidak suka';

break;}

}}

?>· <?php echo ($likes>num_rows() > 0)

? "<span class='total_like' id='$id'>".$likes>num_rows()."</span>": "<span id='$id'></span>"; ?>

<a href="<?php echo $link; ?>" class="<?php echo $class; ?>"><?php echo $caption; ?>

</a>

</div><div class="comments">

<?php echo $comments['commentlist']; ?><?php echo post::comment_form($id, false); ?>

</div></div><div class="post_delete">

<a href="<?php echo site_url('post/confirm_delete/'.$id); ?>" class="delete_post" id="<?php echo $id; ?>" onclick="return confirm('yakin akan menghapus post ini?');">

<img src="<?php echo base_url().'assets/delete.png'; ?>" /></a>

</div></li>

</ul>

</div>

</body></html>

Terakhir tambahkan css untuk komentar. Tambahkan di file views/post/index.php dan views/post/detail.php..post_meta span.total_like { background:#bbc; color:#fff; margin:0 2px;

padding:0 4px; borderradius:3px;}

Menambahkan Fitur AJAX dengan JQuery

Fitur like sudah selesai. Anda dapat mencoba program Anda. Sampai disini setiap kali kita mengklik link 'suka', program akan mereload halaman browser kemudian kembali ke halaman semula. Dengan ajax kita akan membuat link 'suka' dapat diklik tanpa perlu berpindah halaman.

Kita akan menambahkan beberapa fungsi pada file myapps.js yang sudah kita buat di modul #1. Fungsi-fungsi jquery tersebut diantaranya untuk menambahkan dan menghapus data pada saat link 'suka' diklik.

Tambahkan script berikut ke dalam file myapps.js.

assets/myapps.js$(document).ready(function() {

// fungsi untuk menambah data suka untuk suatu post$('.like').live('click', function(){

$elm = $(this);

// menyiapkan variabel untuk memuat nilai id post yang disukavar id = $elm.attr('id');

// menyiapkan variabel untuk memuat nilai total suka suatu postvar total = $('span.total_like#'+id).html();

// ganti kata 'suka' menjadi 'sebentar..' untuk proses loading, hapus class 'like'$elm.removeAttr('href').removeClass('like').html('sebentar..');$.ajax({

type: "POST",url: site_url + "/post/like_post",

// siapkan data untuk dikirim via ajaxdata: 'ajax=true&post_id=' + id,

// setelah panambahan data suka berhasilsuccess: function(response){

// ganti kata 'sebentar..' menjadi 'Tidak suka', tambah class 'unlike', // dan ganti url menjadi post/unlike_post$elm.attr('href', site_url + "post/unlike_post/"+id).addClass('unlike').html('Tidak suka');

// bila total suka lebih dari 0if(total && total > 0)

// tambah total suka 1$('span.total_like#'+id).html(++total);

// bila belum ada yang suka sebelumnyaelse

// tambahkan class 'total_like' pada caption total suka dan isi nilai 1$elm.parent().children('span:nth(1)').addClass('total_like').html(1);

}});return false;

});

// fungsi untuk menghapus data suka untuk suatu post// sama seperti fungsi sebelumnya, kecuali penggantian caption, class dan url$('.unlike').live('click', function(){

$elm = $(this);var id = $elm.attr('id');var total = $('span.total_like#'+id).html();$elm.removeAttr('href').removeClass('unlike').html('sebentar..');$.ajax({

type: "POST",url: site_url + "/post/unlike_post",data: 'ajax=true&post_id=' + id,success: function(response){

$elm.attr('href', site_url + "post/like_post/"+id).addClass('like').html('Suka');if(total && total > 2)

$('span.total_like#'+id).html(total); else

$elm.parent().children('span:nth(1)')

.removeClass('total_like').html('');}

});return false;

});

});

controllers/post.php/* LIKE FUNCTIONS ----------------------------------------------- */// fungsi untuk mengambil data like user atas suatu postpublic 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', true) : $post_id;

return $this>like_m>get_like($post_id);}

// fungsi untuk menyimpan like user atas suatu postfunction like_post($post_id = null){



//ganti dengan user id aktif$res = $this>like_m>like($post_id, 1);if($res){

redirect(getenv('HTTP_REFERER'));}return false;

}

// fungsi untuk menghapuslike user atas suatu postfunction unlike_post($post_id = null){



//ganti dengan user id aktif$res = $this>like_m>unlike($post_id, 1); if($res){

redirect(getenv('HTTP_REFERER'));}return false;

}

pada file views/post/post.php, cari script berikut<a href="<?php echo $link; ?>" class="<?php echo $class; ?>">

<?php echo $caption; ?></a>

dan tambahkan script yang dicetak tebal.<a href="<?php echo $link; ?>" class="<?php echo $class; ?>" id="<?php echo $id; ?>">

<?php echo $caption; ?></a>

lakukan hal yang sama pada file views/post/detail.php.

Horreee! \(^0^)/

Selamat, Anda telah menyelesaikan Modul Codeigniter Studi Kasus: Posting Seperti Facebook. Mudah-mudahan lancar. Kritik dan saran akan sangat bermanfaat untuk pembuatan modul selanjutnya. Apabila ada kendala, saya dengan senang hati membantu. Kontak saja via email atau komentar blog yang alamatnya tertera di cover.

* * *

modul codeigniter- studi kasus posting seperti facebook #3 menambahkan fitur like

Documents