Tutorial menggunakan WYSIWYG Summernote Codeigniter
WYSIWYG merupakan singkatan dari What You See Is What You Get, ini merupakan sebuat text editor yang di lengkapi ui menarik, yang disertai custom font, paragaph, dan upload photo, video dan link.
Di sini saya menggunakan text editor WYSIWYG dengan summernote, sebenarya masih ada banyak text editor yang lain seperti CKeditor, Redactor, TinyMCE dan lain-lain
Summernote menurut saya pribadi lebih simple serta konfigurasinya juga tidak ribet ^_^. dan saya akan menggunakan framework php juga yaitu CodeIgniter.
Okeh langsung saja, Tutorial cara menggunakan summnernote di CodeIgniter :
Silahkan download dulu plugin summernotenya free, dan CodeIgniter, owh yah .. di saya juga menggunakan Bootstrap sebagai Frond-end nya.
untuk Controller saya buat Summer.php
dan berikut untuk modelnya Mdata.php
Sedikit Penjelesan untuk dapat menggunakan summernote, silahkan set tag id atau name, disini saya menggunakan id di element textarea
Review Video berikut => Review Summernote CodeIgniter 3
Terima kasih, semoga membantu..
Di sini saya menggunakan text editor WYSIWYG dengan summernote, sebenarya masih ada banyak text editor yang lain seperti CKeditor, Redactor, TinyMCE dan lain-lain
 |
| Summernote CodeIgniter 3 |
Okeh langsung saja, Tutorial cara menggunakan summnernote di CodeIgniter :
Silahkan download dulu plugin summernotenya free, dan CodeIgniter, owh yah .. di saya juga menggunakan Bootstrap sebagai Frond-end nya.
- Summernote
- CodeIgniter
- Bootstrap (saya pakai V3, dulu)..
- Database Mysql
Silahkan lakukan konfigurasi CodeIgniter seperti route, database dan lain-lain, untuk database saya sudah sudah siapkan di link dibawah.
berikut file coding tuk view ada dua yaitu file vsummer.php dan vnews.php,
tak jadiiin satu semua file css biar simple ^_^..
vsummer.php
<!doctype html>
<html lang="en">
<head>
<title><?php echo $title;?></title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="<?php echo base_url();?>asset/bootstrap.min.css">
<link rel="stylesheet" href="<?php echo base_url();?>asset/datatable/dataTables.bootstrap.min.css" />
<link rel="stylesheet" href="<?php echo base_url();?>asset/summernote/summernote.css" />
<noscript>
<style>html{display:none;}</style>
Sorry, your browser does not support JavaScript!
</noscript>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-6">
<h3><?php echo $title;?></h3><hr/>
<?php echo form_open('home/datasummernote', 'id="mydata" '); ?>
<input type="hidden" name="id" value="<?php echo (rand(1,1000));?>">
<div class="form-group">
<label for="usr">Ttitle :</label>
<input type="text" class="form-control" id="title" name="title">
</div>
<div class="form-group">
<textarea class="form-control" rows="5" cols="9" id="editordata" name="editordata"></textarea>
</div>
<button type="submit" class="btn btn-primary">Save</button>
</form>
</div>
<div class="col-sm-6">
<h3>Data</h3><hr/>
<div class="table-responsive">
<table id="datanote" class="table table-bordered table-striped">
<thead>
<tr>
<th>id</th>
<th>Title</th>
<th>View</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
<br><br><br>
</div>
<!-- Javascripts-->
<script src="<?php echo base_url();?>asset/jquery.min.js"></script>
<script src="<?php echo base_url();?>asset/bootstrap.min.js"></script>
<script src="<?php echo base_url();?>asset/datatable/jquery.dataTables.min.js"></script>
<script src="<?php echo base_url();?>asset/datatable/dataTables.bootstrap.min.js"></script>
<script src="<?php echo base_url();?>asset/summernote/summernote.js"></script>
<script type="text/javascript">
//datatable
var dataTable = $('#datanote').DataTable({
"serverSide":true,
"order":[],
"ajax":{
url:"<?php echo base_url();?>summer/datanote",
type:"POST"
},
"columnDefs":[
{
"targets":[0, 1],
"orderable":true,
},
],
});
//edtor summernote
$('#editordata').summernote({
height: 200,
toolbar: [
['style', ['bold', 'italic', 'underline', 'clear']],
['fontsize', ['fontsize']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['insert',['picture']]
],
//set callback image tuk upload ke serverside
callbacks: {
onImageUpload: function(files) {
uploadFile(files[0]);
}
}
});
function uploadFile(file) {
data = new FormData();
data.append("file", file);
$.ajax({
data: data,
type: "POST",
url: "<?php echo base_url();?>summer/saveGambar",
cache: false,
contentType: false,
processData: false,
success: function(url) {
console.log(url);
$('#editordata').summernote("insertImage", url);
}
});
}
//input form
$('#mydata').submit(function(e){
e.preventDefault();
var fa = $(this);
$.ajax({
url: fa.attr('action'),
type: 'post' ,
data: fa.serialize(),
dataType: 'json',
success: function(response) {
if(response.success == true) {
$('.form-group').removeClass('is-invalid')
.removeClass('is-valid');
$('.text-danger').remove();
fa[0].reset();
location.reload();
} else {
$.each(response.messages,function(key, value){
var element = $('#' + key);
element.closest('div.form-group')
.removeClass('is-invalid')
.addClass(value.length > 0 ? 'is-invalid' : 'is-valid')
.find('.text-danger')
.remove();
element.after(value);
});
}
}
});
});
</script>
</body>
</html>
vnews.php
<!doctype html>
<html lang="en">
<head>
<title><?php echo $title;?></title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="<?php echo base_url();?>asset/bootstrap.min.css">
<link rel="stylesheet" href="<?php echo base_url();?>asset/datatable/dataTables.bootstrap.min.css" />
<link rel="stylesheet" href="<?php echo base_url();?>asset/summernote/summernote.css" />
<noscript>
<style>html{display:none;}</style>
Sorry, your browser does not support JavaScript!
</noscript>
</head>
<body>
<div class="container">
<div class="page-header"><strong><?php echo $judul;?></strong></div>
<div class="card card-body">
<?php echo $editor;?>
</div>
</div>
<!-- Javascripts-->
<script src="<?php echo base_url();?>asset/jquery.min.js"></script>
<script src="<?php echo base_url();?>asset/bootstrap.min.js"></script>
<script src="<?php echo base_url();?>asset/datatable/jquery.dataTables.min.js"></script>
<script src="<?php echo base_url();?>asset/datatable/dataTables.bootstrap.min.js"></script>
<script src="<?php echo base_url();?>asset/summernote/summernote.js"></script>
</body>
</html>
untuk Controller saya buat Summer.php
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Summer extends CI_Controller {
function __construct()
{
parent::__construct();
$this->load->model('mdata', '', TRUE);
$this->load->helper(array('form', 'url', 'file'));
}
public function index()
{
$data['title'] = "WYSIWYG text editor summernote";
$this->load->view('vsummer',$data);
}
public function saveGambar()
{
if(isset($_FILES["file"]["name"]))
{
$config['upload_path'] = './asset/img/';
$config['allowed_types'] = 'jpg|jpeg|png|gif';
$this->load->library('upload', $config);
if(!$this->upload->do_upload('file'))
{
$this->upload->display_errors();
return FALSE;
}
else
{
$data = $this->upload->data();
echo base_url().'asset/img/'.$_FILES['file']['name'];
}
}
}
public function datasummernote() {
$data = array ('success' => false, 'messages' => array());
$this->load->library('form_validation');
$this->form_validation->set_rules('title', 'Title', 'trim|required|min_length[5]|is_unique[tbnote.title]');
$this->form_validation->set_rules('editordata', 'Tex', 'required|min_length[10]');
$this->form_validation->set_error_delimiters('<p class="text-danger">', '</p>');
if($this->form_validation->run()) {
$data1 = array (
'id' => $this->input->post('id'),
'title' => $this->input->post('title'),
'editor' => $this->input->post('editordata')
);
$this->mdata->insert_all('tbnote',$data1);
$data['success'] = true;
} else {
foreach ($_POST as $key => $value) {
$data['messages'][$key] = form_error($key);
}
}
echo json_encode($data);
}
function datanote() {
$fetch_data = $this->mdata->make_datatables1();
$data = array();
foreach($fetch_data as $row)
{
$sub_array = array();
$sub_array[] = $row->id;
$sub_array[] = $row->title;
$sub_array[] = '<a href="'.base_url().'summer/news/'.$row->id.'" class="btn btn-info btn-md">post</a>';
$data[] = $sub_array;
}
$output = array(
"draw" => intval($_POST["draw"]),
"recordsTotal" => $this->mdata->get_all_data('tbnote'),
"recordsFiltered" => $this->mdata->get_filtered_data1(),
"data" => $data
);
echo json_encode($output);
}
public function news($data)
{
$cek = $this->mdata->check_all('tbnote',array('id'=>$data),1);
if($cek)
{
foreach ($cek as $row)
{
$isi['judul'] = $row->title;
$isi['editor'] = $row->editor;
}
$isi['title'] = "Data News";
$this->load->view('vnews',$isi);
}
else
{
show_404();
}
}
}
dan berikut untuk modelnya Mdata.php
<?php
if ( ! defined('BASEPATH')) exit('No direct script access allowed');
Class Mdata extends CI_Model
{
public $table1 = "tbnote";
public $select_column1 = array("id", "title",);
public $order_column1 = array("id", "title",);
function make_datatables1(){
$this->db->select($this->select_column1);
$this->db->from($this->table1);
if(isset($_POST["search"]["value"]))
{
$this->db->like("id", $_POST["search"]["value"]);
$this->db->or_like("title", $_POST["search"]["value"]);
}
if(isset($_POST["order"]))
{
$this->db->order_by($this->order_column1[$_POST['order']['0']['column']], $_POST['order']['0']['dir']);
}
else
{
$this->db->order_by('id', 'DESC');
}
if($_POST["length"] != -1)
{
$this->db->limit($_POST['length'], $_POST['start']);
}
$query = $this->db->get();
return $query->result();
}
function get_filtered_data1()
{
$this->db->select($this->select_column1);
$this->db->from($this->table1);
if(isset($_POST["search"]["value"]))
{
$this->db->like("id", $_POST["search"]["value"]);
$this->db->or_like("title", $_POST["search"]["value"]);
}
if(isset($_POST["order"]))
{
$this->db->order_by($this->order_column1[$_POST['order']['0']['column']], $_POST['order']['0']['dir']);
}
else
{
$this->db->order_by('id', 'DESC');
}
$query = $this->db->get();
return $query->num_rows();
}
function get_all_data($table)
{
$this->db->select("*");
$this->db->from($table);
return $this->db->count_all_results();
}
//query insert data
function insert_all($table,$data)
{
$this->db->insert($table,$data);
}
}
?>
Sedikit Penjelesan untuk dapat menggunakan summernote, silahkan set tag id atau name, disini saya menggunakan id di element textarea
$('#editordata').summernote
Review Video berikut => Review Summernote CodeIgniter 3
Terima kasih, semoga membantu..
Keren mas
ReplyDeleteterimakaish, sudah mampir om
ReplyDeleteUntuk link database nya dimana kak ?
ReplyDeletemas ngga ada link downloadnya toh mas
ReplyDelete