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

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

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

<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,’
’));

//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=’ + md5Email + ‘&size=80&rating=G&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>

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

<strong>Your Email:</strong>

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

<strong>Your Website:</strong>

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

<strong>Your Comment:</strong>

<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/postingan selanjutnya….:D

kalo salah mohon di perbaiki ya om
CodeIgneter(CI) with Mootools comment and preview 3529815765

CodeIgneter(CI) with Mootools comment and preview 3529815765

ane masih bingung CodeIgneter(CI) with Mootools comment and preview 489233

:mbelajar:

bingung sebelaha mana gan CodeIgneter(CI) with Mootools comment and preview 1513430891

keren om tapi saya belum paham bener..ijin nyimak dulu,,kasih yang lengkap ya kk lo yang baru nya

» Mengatasi Konflik jQuery dengan Mootools
» Threaded Comment styles dengan CSS
» Exploit Wordpress "/easy-comment-uploads/upload-form.php"