Pada Tutorial Code Igniter Part 9: CRUD Modul Berita (Bagian 2: Tambah berita dan Installasi TinyMCE) ini Anda akan belajar:
- Membuat form untuk menambah data berita dan sekaligus memasang
- Installasi text editor TinyMCE
Sebelum mengikuti tutorial ini, pastikan Anda telah mengikuti:
- Mengikuti Tutorial Code Igniter Part 1: Installasi Code Igniter
- Mengikuti Tutorial Code Igniter Part 2: Membuat halaman home
- Mengikuti Tutorial Code Igniter Part 3: Membuat halaman kontak
- Mengikuti Tutorial Code Igniter Part 4: Membuat halaman login administrator
- Mengikuti Tutorial Code Igniter Part 5: Membuat halaman dasbor administrator
- Mengikuti Tutorial Code Igniter Part 6: Mempersiapkan database dan konfigurasinya di Code Igniter
- Mengikuti Tutorial Code Igniter Part 7: Menampilkan daftar berita dan detailnya
- Mengikuti Tutorial Code Igniter Part 8: CRUD Modul Berita (Bagian 1)
- Mengunduh hasil akhir tutorial Part 8 ini bisa diunduh di: https://drive.google.com/file/d/0B5BhV6c89_2YNzJRS3k2ZFhLOGM/view?usp=sharing
- Hasil akhir tutorial Part 9 ini bisa diunduh di: https://drive.google.com/file/d/0B5BhV6c89_2YZFI4X1ZTQmdzTTQ/view?usp=sharing
Menggunakan TinyMCE
TinyMCE adalah sebuah teks editor yang akan membantu web programmer maupun content administrator untuk mempermudah proses memasukkan data berita.Mengunduh TinyMCE
Anda dapat mengunduh file dasar TinyMCE di website http://www.tinymce.com/download/download.php. Pilih yang Development Package.
Menginstall TinyMCE
Proses selanjutnya adalah installasi TinyMCE.Berikut langkah-langkahnya:
Silakan Copy file unduhan TinyMCE tersebut lalu Paste ke folder tutorial_ci/assets/
- Klik kanan pada file TinyMCE tersebut lalu pilih Extract here
- Hal ini akan menghasilkan folder tinymce dalam folder tutorial_ci/assets/
Integrasi TinyMCE dengan Code Igniter
Proses selanjutnya adalah integrasi TinyMCE dengan framework Code Igniter.Berikut langkah-langkahnya:
Dengan menggunakan Code Editor (saya memakai Dreamweaver), buka file development.html yang ada dalam folder tutorial_ci/assets/tinymce/tests/manual.
- Lalu Copy kode baris ke-12 sampai dengan ke-15, atau lihat kode di bawah ini:
<script src=”../../js/tinymce/tinymce.dev.js”></script>
<script src=”../../js/tinymce/plugins/table/plugin.dev.js”></script>
<script src=”../../js/tinymce/plugins/paste/plugin.dev.js”></script>
<script src=”../../js/tinymce/plugins/spellchecker/plugin.dev.js”></script> - Buka file head.php yang ada dalam folder tutorial_ci/application/views/admin/layout.
- Pada baris ke-10 pada file head.php tekan Enter sebanyak 2 kali.
- Lalu Paste kode yang telah Anda Copy pada area kosong tersebut (Lihat Gambar).
Installasi TinyMCE
- Lakukan perubahan kode tersebut sehingga menjadi sebagai berikut:
<script src=”<?php echo base_url(); ?>assets/tinymce/js/tinymce/tinymce.dev.js”></script>
<script src=”<?php echo base_url(); ?>assets/tinymce/js/tinymce/plugins/table/plugin.dev.js”></script>
<script src=”<?php echo base_url(); ?>assets/tinymce/js/tinymce/plugins/paste/plugin.dev.js”></script>
<script src=”<?php echo base_url(); ?>assets/tinymce/js/tinymce/plugins/spellchecker/plugin.dev.js”></script>Tutorial Code Igniter - Simpan file head.php
Integrasi TinyMCE dengan form tambah berita
Langkah berikutnya adalah meng-Copy javascript yang berfungsi untuk memanggil fungsi TinyMCE.Berikut langkah-langkahnya:
- Dengan menggunakan Code Editor (saya memakai Dreamweaver), buka file development.html yang ada dalam folder tutorial_ci/assets/tinymce/tests/manual.
- Lalu Copy kode baris ke-16 sampai dengan ke-94 dari kode yang ada dalam file development.html tersebut
<script>
tinymce.init({
selector: “textarea#elm1″,
theme: “modern”,
plugins: [
“advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker”,
“searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking”,
“save table contextmenu directionality emoticons template paste textcolor importcss colorpicker textpattern”
],
external_plugins: {
//”moxiemanager”: “/moxiemanager-php/plugin.js”
},
content_css: “css/development.css”,
add_unload_trigger: false,
toolbar: “insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons table”,
image_advtab: true,
style_formats: [
{title: ‘Bold text’, format: ‘h1′},
{title: ‘Red text’, inline: ‘span’, styles: {color: ‘#ff0000′}},
{title: ‘Red header’, block: ‘h1′, styles: {color: ‘#ff0000′}},
{title: ‘Example 1′, inline: ‘span’, classes: ‘example1′},
{title: ‘Example 2′, inline: ‘span’, classes: ‘example2′},
{title: ‘Table styles’},
{title: ‘Table row 1′, selector: ‘tr’, classes: ‘tablerow1′}
],
template_replace_values : {
username : “Jack Black”
},
template_preview_replace_values : {
username : “Preview user name”
},
link_class_list: [
{title: ‘Example 1′, value: ‘example1′},
{title: ‘Example 2′, value: ‘example2′}
],
image_class_list: [
{title: ‘Example 1′, value: ‘example1′},
{title: ‘Example 2′, value: ‘example2′}
],
templates: [
{title: ‘Some title 1′, description: ‘Some desc 1′, content: ‘<strong class=”red”>My content: {$username}</strong>’},
{title: ‘Some title 2′, description: ‘Some desc 2′, url: ‘development.html’}
],
setup: function(ed) {
/*ed.on(
‘Init PreInit PostRender PreProcess PostProcess BeforeExecCommand ExecCommand Activate Deactivate ‘ +
‘NodeChange SetAttrib Load Save BeforeSetContent SetContent BeforeGetContent GetContent Remove Show Hide’ +
‘Change Undo Redo AddUndo BeforeAddUndo’, function(e) {
console.log(e.type, e);
});*/
},
spellchecker_callback: function(method, data, success) {
if (method == “spellcheck”) {
var words = data.match(this.getWordCharPattern());
var suggestions = {};
for (var i = 0; i < words.length; i++) {
suggestions[words[i]] = [“First”, “second”];
}
success({words: suggestions, dictionary: true});
}
if (method == “addToDictionary”) {
success();
}
}
});
</script> - Buat file PHP baru dengan nama tinymce.php dalam folder tutorial_ci/application/views/admin/berita
- Lalu Paste kode tersebut ke dalam file tinymce.php.
- Cari kode ini: selector: “textarea#elm1″,
- Lalu ubah (buang kode #elm1) sehingga menjadi: selector: “textarea”,
- Simpan file tinymce.php
Membuat form untuk menambah berita
Form berita ini akan disimpan dalam folder tutorial_ci/application/views/admin/berita. Form tambah berita ini nantinya akan dilengkapi dengan text editor TinyMCE. Terkait dengan TinyMCE Anda bisa melihat website resminya di www.tinymce.com. Action dari form akan di-handle oleh controller htttp://localhost/tutorial_ci/berita/tambah/.
Kursus Web Programming Java Web Media
- Buat file PHP baru dengan nama tambah_berita.php dalam folder tutorial_ci/application/views/berita
- Ketik kode di bawah ini:
<div class=”konten”>
<h1>Menambah berita</h1>
<?php require_once(‘tinymce.php’) ?>
<?php echo validation_errors(); ?>
<form name=”form1″ method=”post” action=”<?php echo base_url() ?>admin/berita/tambah” class=”myform”>
<p>
<label for=”judul”>Judul berita</label>
<input name=”judul” type=”text” id=”judul” size=”70″>
</p>
<p>
<label for=”ringkasan”>Ringkasan berita</label>
<textarea name=”ringkasan” id=”ringkasan” cols=”45″ rows=”5″></textarea>
</p>
<p>
<label for=”isi”>Isi berita</label>
<textarea name=”isi” id=”isi” cols=”45″ rows=”5″></textarea>
</p>
<p>
<label for=”status_berita”>Status berita</label>
<select name=”status_berita” id=”status_berita”>
<option value=”Publish”>Publikasikan</option>
<option value=”Draft”>Simpan sebagai draft</option>
</select>
<input name=”id_user” type=”hidden” id=”id_user” value=”1″>
</p>
<p>
<input type=”submit” name=”submit” id=”submit” value=”Submit”>
<input type=”reset” name=”submit2″ id=”submit2″ value=”Reset”>
</p>
</form>
<p> </p>
</div> - Simpan file tambah_berita.php
- <?php require_once(‘tinymce.php’); ?> : kode tersebut adalah kode untuk memanggil fungsi TinyMCE yang nanti akan diterapkan di form tambah berita.
- <?php echo validation_errors(); ?> : kode tersebut dipakai untuk mencetak data error jika form tidak diisi.
Menambahkan model untuk menambah
Pada Tutorial Code Igniter Part 8: CRUD Modul Berita (Bagian 1) telah dibuat model dengan nama berita_model. Nah Anda akan menambahkan anak/sub model dari berita_model tersebut.
Kursus Desain Web
- Buka file berita_model.php yang ada dalam folder tutorial_ci/application/models/admin/
- Pada baris ke-12 (atau sebelum kode kurung kurawal terakhir), tekan Enter sebanyak 4 kali (Lihat gambar).
Kursus Graphic Design Depok
- Lalu tambahkan kode ini pada area yang telah di Enter tersebut.
// Model untuk menambah berita
public function tambah($data) {
return $this->db->insert(‘berita’, $data);
} - Simpan kembali file berita_model.php
Menambah fungsi tambah dalam controller berita
Form tambah berita akan berada di bawah controller utama, yaitu controller berita, sehingga nantinya dapat diakses dengan alamat http://localhost/tutorial_ci/admin/berita/tambah. File controller berita ini nanti juga akan me-load model berita_model > tambah.
Kursus Web Design Depok
- Buka file berita.php yang ada dalam folder tutorial_ci/application/controllers/admin/
- Pada baris ke-17 (atau sebelum kurung kurawal yang terakhir), tekan Enter sebanyak 4 kali (Lihat gambar).
Kursus Web Development Depok
- Lalu tambahkan kode di bawah ini:
// Controler tambah berita di sini
}
public function tambah() {
$this->form_validation->set_rules(‘judul’, ‘Judul’, ‘required’);
$this->form_validation->set_rules(‘ringkasan’, ‘Ringkasan’, ‘required’);
$this->form_validation->set_rules(‘isi’, ‘Isi berita’, ‘required’);
if ($this->form_validation->run() === FALSE) {
$data=array(‘title’=>’Menambah Berita – Java Web Media’,
‘isi’ =>’admin/berita/tambah_berita’
);
$this->load->view(‘admin/layout/wrapper’,$data);
}else{
$slug = url_title($this->input->post(‘judul’), ‘dash’, TRUE);
$data = array(
‘judul’ => $this->input->post(‘judul’),
‘slug’ => $slug,
‘ringkasan’ => $this->input->post(‘ringkasan’),
‘isi’ => $this->input->post(‘isi’),
‘status_berita’ => $this->input->post(‘status_berita’),
‘id_user’ => $this->input->post(‘id_user’)
);
$this->berita_model->tambah($data);
redirect(base_url().’admin/berita/’);
} - Simpan kembali file berita.php
- Lalu tambahkan kode di bawah ini:
Melakukan uji coba
Langkah selanjutnya adalah uji coba. Silakan akses di browser Anda dengan alamat http://localhost/tutorial_ci/admin/berita/tambah.File hasil akhir tutorial ini dapat diunduh di link berikut ini: https://drive.google.com/file/d/0B5BhV6c89_2YZFI4X1ZTQmdzTTQ/view?usp=sharing
Dan hasilnya adalah sebagai berikut.
Kursus Web Design Java Web Media
Tidak ada komentar:
Posting Komentar