CodeIgneter(CI) with Mootools comment and preview

Ya kali ini aku mau share membuat comment and preview di CI(codeIgneter). Apa cie yang dimaksud dengan comment and preview yaitu bila kita melakukkan comment di sebuah situs maka  akan langsung segera ditampilkan. Loh lalu apa menariknya…ya menariknya dari comment and preview anda dapat mempercantik website anda…:D (alasan yang dibuat2…hahahaha).

yah, tapi karena site tersebut tidak menggunakan CI makanya aku coba buat di CI…ne 12 jam pertamaku berlajar CI. Memang CI ternyata tidak sesulit yang kuduga sebelumnnya. Saya rasa lebih sulit membuat java programming daripada php….:D

oke langsung ja kita mulai liat source codenya…:D Let try;;;:d

buat file codeigneter/system/aplication/view/pageview.php

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”&gt;

<html xmlns=”http://www.w3.org/1999/xhtml”  dir=”ltr”>

<head>

<title>MooTools Comment Preview Using MooTools Example</title>

<meta name=”description” content=”The following is a tutorial on creating very basic comment previewing using MooTools.” />

<style>

.lp-block                               { width:400px; }

.lp-block input, .lp-block textarea { width:90%; }

#live-preview-display    { background:#eee; padding:10px; margin-left:0px; margin-top:20px; }

#lp-name { font-weight:bold; }

#lp-avatar { float:right; margin:0 0 20px 20px; }

#lp-comment { padding-top:10px; font-style:italic; line-height:19px; }

</style>

<script type=”text/javascript” src=”http://localhost/Code/js/mootools.1.2.3.js”></script&gt;

<script type=”text/javascript”>

(function($){

window.addEvent(‘domready’,function(){

//the build process

var build = function() {

//vars (fields) and blocks

var lpcomment = $(‘lp-comment’), lpname = $(‘lp-name’), lpavatar = $(‘lp-avatar’);

var name = $(‘name’), email = $(’email’), website = $(‘website’), comment = $(‘comment’);

//comment

lpcomment.set(‘text’,comment.value);

lpcomment.set(‘html’,lpcomment.get(‘html’).replace(/\n/g,'<br />’));

//name & websites

if(website.value && (website.value).test(/http:\/\/[A-Za-z0-9\.-]{3,}\.[A-Za-z]{3}/)) {

lpname.set(‘html’,'<a href=”‘ + website.value + ‘”>’ + name.value + ‘</a> says:’);

}

else {

lpname.set(‘text’,name.value + ‘ says:’);

}

//gravatar

if(email.value && (email.value).test(/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/)) {

var md5Email = MD5(email.value);

lpavatar.set(‘html’,'<img src=”http://www.gravatar.com/avatar.php?gravatar_id=&#8217; + md5Email + ‘&amp;size=80&amp;rating=G&amp;default=http%3A%2F%2Fdavidwalsh.name%2Fwp-content%2Fthemes%2Fdavid-walsh%2Fgraphics%2Fcom.jpg” alt=”‘ + lpname.value + ‘” />’);

}

};

//comment…easy

$$(‘#live-preview-form input, #live-preview-form textarea’).addEvents({

keyup: build,

blur: build

});

});

})(document.id);

</script>

</head>

<body>

<h1></h1>

<table width=”500″ border=”0″>

<tr>

<td height=”23″>

<?php echo $allview->isi_cont; ?>

</td>

</tr>

</table>

<hr/>

<h3>comment form</h3>

<?=form_open(‘dunia/comment_insert’);?>

<?=form_hidden(‘id_com_cont’,$this->uri->segment(3));?>

<!– comment form with mootools –>

<div id=”live-preview-form”>

<p>

<strong>Your Name:</strong><br />

<input type=”text” value=”” /><br /><br />

<strong>Your Email:</strong><br />

<input type=”text” value=”” /><br /><br />

<strong>Your Website:</strong><br />

<input type=”text” value=”” /><br /><br />

<strong>Your Comment:</strong><br />

<textarea name=”isi_com” rows=”10″></textarea>

<input type=”submit” value=”submit” />

</p>

</div>

</form>

<?php if($query->num_rows() > 0): ?>

<?php foreach($query->result() as $row): ?>

<!– form for call db –>

<div id=”live-preview-display”>

<div id=”lp-avatar”></div>

<a href=”<?=$row->website_com?>”><div id=”lp-name”><?=$row->nama_com?></div></a>

<div id=”lp-comment”><?=$row->isi_com?></div>

</div>

<?php endforeach; ?>

<?php endif; ?>

<!– end closed –>

<div class=”clear” style=”clear:both;”></div>

<?= anchor(‘dunia/comment/’.$allview->id_cont,’comment’); ?>

<?php echo $link_back; ?>

</body>

</html>

Buat function pageview di /controller

KEBETULAN DISINI CONTROLLER YANG KUGUNAKAN TAK BERI NAMA DUNIA..SAYA HARAP ANDA SUDAH MENGERTI MENGENAI PEMODELAN MVC..(MODEL VIEW CONTROLLER)

//menampilkan seluruh halaman file

function pageview($id){

//echo ‘test’;

$data[‘link_back’] = anchor(‘dunia/index/’,’back to home’);

$data[‘allview’] = $this->duniamodel->get_by_id($id)->row();

$data[‘showdata’] = $this->duniamodel->get_all_comm();

$this->db->where(‘id_com_cont’,$this->uri->segment(3));

$data[‘query’] = $this->db->get(‘comment’);

$this->load->view(‘pageview’,$data);

}

Buat function comment di /controller

function comment_insert(){

$this->db->insert(‘comment’,$_POST);

redirect(‘dunia/pageview/’.$_POST[‘id_com_cont’]);

}

Buat model

//comment_view……………….

function get_all_comm(){

return $this->db->get($this->tbl_comm)->result();

}

Klo kurang jelas tunggu article berikutnya….:D:D…screenshot dan filenya bisa didownload setelah di article selanjutnya….:D

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