Tutorial Memakai Wysiwyg Summernote Codeigniter
WYSIWYG merupakan akronim 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 memakai text editor WYSIWYG dengan summernote, sebenarya masih ada banyak text editor yang lain ibarat CKeditor, Redactor, TinyMCE dan lain-lain
Summernote berdasarkan saya pribadi lebih simple serta konfigurasinya juga tidak ribet ^_^. dan saya akan memakai framework php juga ialah CodeIgniter.
Okeh pribadi saja, Tutorial cara memakai summnernote di CodeIgniter :
Silahkan download dulu plugin summernotenya free, dan CodeIgniter, owh yah .. di saya juga memakai Bootstrap sebagai Frond-end nya.
untuk Controller saya buat Summer.php
dan berikut untuk modelnya Mdata.php
Sedikit Penjelesan untuk sanggup memakai summernote, silahkan set tag id atau name, disini saya memakai id di element textarea
Live Demo => Source
Review Video berikut => Review Summernote CodeIgniter 3
Terima kasih, semoga membantu..
Sumber https://fahmiffa.blogspot.com/
Di sini saya memakai text editor WYSIWYG dengan summernote, sebenarya masih ada banyak text editor yang lain ibarat CKeditor, Redactor, TinyMCE dan lain-lain
 |
| Summernote CodeIgniter 3 |
Okeh pribadi saja, Tutorial cara memakai summnernote di CodeIgniter :
Silahkan download dulu plugin summernotenya free, dan CodeIgniter, owh yah .. di saya juga memakai Bootstrap sebagai Frond-end nya.
- Summernote
- CodeIgniter
- Bootstrap (saya pakai V3, dulu)..
- Database Mysql
Silahkan lakukan konfigurasi CodeIgniter ibarat route, database dan lain-lain, untuk database saya sudah sudah siapkan di link dibawah.
berikut file coding tuk view ada dua ialah file vsummer.php dan vnews.php,
tak jadiiin satu semua file css semoga 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 sanggup memakai summernote, silahkan set tag id atau name, disini saya memakai id di element textarea
$('#editordata').summernote Silahkan sanggup dibaca tag comment nya untuk sanggup di pelajari, tuk file demonya dan ddownload di link berikut :Live Demo => Source
Review Video berikut => Review Summernote CodeIgniter 3
Terima kasih, semoga membantu..
Sumber https://fahmiffa.blogspot.com/
