Advanced Web Programming – Kursus Web Depok

Belajar WebGL dan Framework Code Igniter

Alhamdulillah, sejak Februari hingga awal Maret 2015 lalu Java Web Media menyelenggarakan Inhouse Training di salah satu client kami yaitu “Mankind” (www.bymankind.com). “Mankind” adalah salah satu perusahaan creative innovation technology yang fokus pada pengembangan teknologi kreatif untuk diterapkan dalam kehidupan sehari-hari.

Advanced Web Programming – Kursus Web Depok
Advanced Web Programming – Kursus Web Depok

Pada Inhouse Training Advanced Web Programming ini, kami bersama-sama belajar menggunakan framework dan teknologi web terbaru, antara lain:

  1. PHP MySQL
  2. Framework Code Igniter
  3. Data Visualization
  4. WebGL
  5. Interactive web design berbasis WebGL

Data Visualization, interactive web design dan WebGL

Saat ini banyak sekali teknologi web terbaru. Teknologi baru ini nantinya memungkinkan sebuah web tampil dengan konsep dan kemampuan baru, misalnya untuk Geotaging, HTML5 Game, Data Visualization, Face Detection, Interactive web dan sebagainya.

Saat ini Java Web Media juga telah mulai mempelajari dan mendalami teknologi baru tersebut untuk kemudian diterapkan dalam desain website-website terbarunya.

Berikut beberapa contoh web yang telah menerapkan teknologi terbaru tersebut:

  1. www.chromeexperiments.com/webgl. Berisi kumpulan contoh-contoh WebGL
  2. www.futureself.orange.com. Adalah contoh website dengan fasilitas face detection
  3. www.greensock.com/examples-showcases
  4. Dan masih banyak lagi

Nah, dalam rangka menyongsong teknologi baru tersebut saat ini Java Web Media membuka program kursus khusus, yaitu Advanced Web Programming.

Saat ini kursus ini tersedia dalam beberapa paket, antara lain:

  1. Paket Kursus Kelas
  2. Paket Kursus Private
  3. Inhouse Training Kelas
  4. Inhouse Training Private

Informasi lebih detail bisa kontak kami di:

Java Web Media
Perumahan Ferari Tirtajaya Indah No. 36
Jl. Romo – Tirtajaya Grand Depok City Depok
Telepon: 021-34135720, HP. 085715100485.
Email: andoyoandoyo@gmail.com
Website: www.javawebmedia.com

 

Kursus Web Design Depok | Java Web Media

Tutorial Code Igniter 3 – Part 1: Review dan Installasi

Yee… Akhirnya Code Igniter siap-siap me-release versi terbarunya, yaitu versi 3.0. Mudah-mudahan bisa segera direlease.

Oleh banyak web developer Code Igniter awalnya dikhawatirkan akan mati karena Ellislab tidak sanggup melanjutkan pengembangan framework ini. Alhamdulillah akhirnya  British Columbia Institute of Technology bersedia mengambil alih project ini dan menyiapkan release berikutnya. Read More

Kursus Web Design Depok

Tutorial Code Igniter Part 10: CRUD Modul Berita (Bagian 3: Update dan Delete Berita)

Kursus Web Design Depok
Kursus Web Design Depok

Pada Tutorial Part 10 ini, Anda akan belajar mengupdate dan menghapus berita yang telah tersimpan di database.

Sebelum mengikuti tutorial ini, pastikan Anda telah mengikuti:

  1. Mengikuti Tutorial Code Igniter Part 1: Installasi Code Igniter
  2. Mengikuti Tutorial Code Igniter Part 2: Membuat halaman home
  3. Mengikuti Tutorial Code Igniter Part 3: Membuat halaman kontak
  4. Mengikuti Tutorial Code Igniter Part 4: Membuat halaman login administrator
  5. Mengikuti Tutorial Code Igniter Part 5: Membuat halaman dasbor administrator
  6. Mengikuti Tutorial Code Igniter Part 6: Mempersiapkan database dan konfigurasinya di Code Igniter
  7. Mengikuti Tutorial Code Igniter Part 7: Menampilkan daftar berita dan detailnya
  8. Mengikuti Tutorial Code Igniter Part 8: CRUD Modul Berita (Bagian 1)
  9. Mengikuti Tutorial Code Igniter Part 9: CRUD Modul Berita (Bagian 2: Tambah berita dan Installasi TinyMCE)
  10. Mengunduh hasil akhir tutorial Part  9: https://drive.google.com/file/d/0B5BhV6c89_2YZFI4X1ZTQmdzTTQ/view?usp=sharing
  11. Mengunduh hasil akhir tutorial Part 10 sebagai  bahan review: https://drive.google.com/file/d/0B5BhV6c89_2YRUQzSTZYYjB1eXM/view?usp=sharing

Menambahkan fungsi update dan delete berita pada model (berita_model)

Pada tutorial Part sebelumnya Anda telah membuat model untuk mengelola database berita, yaitu berita_model.php yang ada di folder tutorial_ci/application/models/admin/. Model yang sudah ada tersebut baru meng-cover fungsi untuk menampilkan listing data (daftar_berita)  dan menambah data (tambah_berita).

Dalam tutorial kali ini, Anda akan menambahkan fungsi untuk menampilkan per-item data yang akan diedit/hapus.

Fungsi menampilkan detail berita (detail_berita)

Fungsi model detail_berita adalah untuk memanggil item berita dengan parameter id_berita.

Kursus Web Programming Depok
Kursus Web Programming Depok

Berikut langkah-langkahnya:

  1. Buka file berita_model.php yang ada di folder tutorial_ci/application/models/admin/
  2. Letakkan cursor Anda sebelum kurung kurawal terakhir (sekitar baris ke-18), lalu tekan Enter.
  3. Lalu ketik kode ini:

    // Detail berita
    public function detail_berita($id = FALSE) {
    if ($id === FALSE) {
    $query = $this->db->get(‘berita’);
    return $query->result_array();
    }
    $query = $this->db->get_where(‘berita’, array(‘id_berita’ => $id));
    return $query->row_array();
    }

  4. Simpan kembali file berita_model.php

Fungsi mengupdate/mengedit data berita (edit_berita) dan menghapus berita (delete_berita)

Kedua model ini nanti akan digunakan untuk mengubah dan menghapus berita.

Kursus Web Programming
Kursus Web Programming

Berikut langkah-langkahnya:

  1. Buka file berita_model.php yang ada di folder tutorial_ci/application/models/admin/
  2. Letakkan cursor Anda sebelum kurung kurawal terakhir (sekitar baris ke-28), lalu tekan Enter.
  3. Lalu ketik kode ini:

    // Update berita
    public function edit_berita($data) {
    $this->db->where(‘id_berita’, $data[‘id_berita’]);
    return $this->db->update(‘berita’, $data);
    }

    // Hapus berita
    public function delete_berita($id) {
    $this->db->where(‘id_berita’,$id);
    return $this->db->delete(‘berita’);
    }

  4. Simpan kembali file berita_model.php

Membuat view untuk form update berita

Untuk mengedit berita, Anda membutuhkan form yang akan digunakan untuk mengeditnya.

Kursus Desain Web di Depok
Kursus Desain Web di Depok

Berikut langkah-langkahnya:

  1. Buat file PHP baru dengan nama edit_berita.php dalam folder tutorial_ci/application/views/admin/berita/
  2. Lalu ketik kode di bawah ini:

    <div class=”konten”>
    <h1>Mengubah berita</h1>
    <?php require_once(‘tinymce.php’) ?>
    <form name=”form1″ method=”post” action=”<?php echo base_url(); ?>admin/berita/edit” class=”myform”>
    <p><label for=”judul”>Judul berita</label>
    <input name=”judul” type=”text” id=”judul” size=”70″ value=”<?php echo $detail[‘judul’] ?>”>
    </p>
    <p><label for=”ringkasan”>Ringkasan berita</label>
    <textarea name=”ringkasan” id=”ringkasan” cols=”45″ rows=”5″><?php echo $detail[‘ringkasan’] ?></textarea>
    </p>
    <p><label for=”isi”>Isi berita</label>
    <textarea name=”isi” id=”isi” cols=”45″ rows=”5″><?php echo $detail[‘isi’] ?></textarea>
    </p>
    <p>
    <label for=”status_berita”>Status berita</label>
    <select name=”status_berita” id=”status_berita”>
    <option value=”Published” <?php if($detail[‘status_berita’]==”Published”) { echo ‘selected’; } ?>>Publikasikan</option>
    <option value=”Draft” <?php if($detail[‘status_berita’]==”Draft”) { echo ‘selected’; } ?>>Simpan sebagai draft</option>
    </select>
    <input name=”id_user” type=”hidden” id=”id_user” value=”1″>
    <input name=”id_berita” type=”hidden” id=”id_berita” value=”<?php echo $detail[‘id_berita’] ?>”>
    </p>
    <p>
    <input type=”submit” name=”submit” id=”submit” value=”Submit”>
    <input type=”reset” name=”submit2″ id=”submit2″ value=”Reset”>
    </p>
    </form>
    </div>

  3. Simpan kembali file edit_berita.php

 Menambahkan controller untuk mengubah berita

Anda telah berhasil membuat model dan view untuk mengubah dan menghapus berita. Langkah selanjutnya adalah menambahkan fungsi pada controller yang memungkinkan untuk mengupdate dan menghapus berita.

Kursus Code Igniter
Kursus Code Igniter

Berikut langkah-langkahnya:

  1. Buka file berita.php yang ada dalam folder tutorial_ci/application/controllers/admin/
  2. Letakkan kursor Anda sebelum kurung kurawal tutup yang terakhir (sekitar baris 42). Tekan Enter
  3. Masukkan kode di bawah ini:

    // Menampilkan halaman edit
    public function edit($id) {
    $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[‘berita’] = $this->berita_model->detail_berita();
    $data[‘detail’] = $this->berita_model->detail_berita($id);
    $data=array(‘title’ => ‘Mengubah berita: ‘.$data[‘detail’][‘judul’],
    ‘berita’ => $this->berita_model->detail_berita(),
    ‘detail’ => $this->berita_model->detail_berita($id),
    ‘isi’ =>’admin/berita/edit_berita’
    );
    $this->load->view(‘admin/layout/wrapper’,$data);
    // Kalau tidak ada error berita diupdate
    }else{
    $slug = url_title($this->input->post(‘judul’), ‘dash’, TRUE);
    $data = array(
    ‘id_berita’ => $this->input->post(‘id_berita’),
    ‘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->edit_berita($data);
    redirect(base_url().’admin/berita/’);
    }
    }

  4. Simpan kembali file berita.php

Menambahkan controller untuk mengghapus berita (delete)

Langkah selanjutnya adalah menambahkan controller yang berfungsi untuk menghapus berita.

Kursus Desain Grafis Depok
Kursus Desain Grafis Depok

Berikut langkah-langkahnya:

  1. Buka file berita.php yang ada dalam folder tutorial_ci/application/controllers/admin/
  2. Letakkan kursor Anda sebelum kurung kurawal tutup yang terakhir (sekitar baris 73). Tekan Enter
  3. Masukkan kode di bawah ini:

    // Menghapus berita
    public function delete($id) {
    $this->berita_model->delete_berita($id);
    redirect(base_url().’admin/berita/’);
    }

  4. Simpan kembali file berita.php

Uji coba mengubah dan menghapus berita

Langkah selanjutnya adalah melakukan uji coba.

Kursus Web Design Depok
Kursus Web Design Depok

 

Untuk mengubah berita, berikut langkah-langkahnya:

  1. Buka halaman daftar berita http://localhost/tutorial_ci/admin/berita/
  2. Klik salah satu link Edit yang ada di halaman tersebut
  3. Form edit berita akan muncul, lakukan perubahan pada judul, ringkasan dan isi berita
  4. Klik tombol Submit. Pastikan berita mengalaman perubahan

Untuk menghapus berita, berikut langkah-langkahnya:

  1. Buka halaman daftar berita http://localhost/tutorial_ci/admin/berita/
  2. Klik salah satu link Delete yang ada di halaman tersebut
  3. Pastikan berita terhapus

Source Code hasil akhir tutorial

Anda dapat mendownload hasil akhir tutorial ini di: https://drive.google.com/file/d/0B5BhV6c89_2YRUQzSTZYYjB1eXM/view?usp=sharing

Kursus Web Design Java Web Media

Tutorial Code Igniter Part 9: CRUD Modul Berita (Bagian 2: Tambah berita dan Installasi TinyMCE)

Kursus Web Design Java Web Media
Kursus Web Design Java Web Media

Pada Tutorial Code Igniter Part 9: CRUD Modul Berita (Bagian 2: Tambah berita dan Installasi TinyMCE) ini Anda akan belajar:

  1. Membuat form untuk menambah data berita dan sekaligus memasang
  2. Installasi text editor TinyMCE

Note: tutorial Part 9 ini belum menggunakan fasilitas SESSION untuk memasukkan data id_user dan akan di-set secara manual. Tutorial tentang Session akan dijelaskan dalam satu Part tersendiri.

Sebelum mengikuti tutorial ini, pastikan Anda telah mengikuti:

  1. Mengikuti Tutorial Code Igniter Part 1: Installasi Code Igniter
  2. Mengikuti Tutorial Code Igniter Part 2: Membuat halaman home
  3. Mengikuti Tutorial Code Igniter Part 3: Membuat halaman kontak
  4. Mengikuti Tutorial Code Igniter Part 4: Membuat halaman login administrator
  5. Mengikuti Tutorial Code Igniter Part 5: Membuat halaman dasbor administrator
  6. Mengikuti Tutorial Code Igniter Part 6: Mempersiapkan database dan konfigurasinya di Code Igniter
  7. Mengikuti Tutorial Code Igniter Part 7: Menampilkan daftar berita dan detailnya
  8. Mengikuti Tutorial Code Igniter Part 8: CRUD Modul Berita (Bagian 1)
  9. Mengunduh hasil akhir tutorial Part 8 ini bisa diunduh di: https://drive.google.com/file/d/0B5BhV6c89_2YNzJRS3k2ZFhLOGM/view?usp=sharing
  10. 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.

Kursus Web Development Depok
Kursus Web Development Depok

Menginstall TinyMCE

Proses selanjutnya adalah installasi TinyMCE.

Berikut langkah-langkahnya:

  1. Silakan Copy file unduhan TinyMCE tersebut lalu Paste ke folder tutorial_ci/assets/ 
    Kursus Desain Web Depok
    Kursus Desain Web Depok

     

     

  2. Klik kanan pada file TinyMCE tersebut lalu pilih Extract here
  3. 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:

  1. Dengan menggunakan Code Editor (saya memakai Dreamweaver), buka file development.html yang ada dalam folder tutorial_ci/assets/tinymce/tests/manual. 
    Kursus Graphic Design
    Kursus Graphic Design

     

     

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

  3. Buka file head.php yang ada dalam folder tutorial_ci/application/views/admin/layout.
  4. Pada baris ke-10 pada file head.php tekan Enter sebanyak 2 kali.
  5. Lalu Paste kode yang telah Anda Copy pada area kosong tersebut (Lihat Gambar).

    Installasi TinyMCE
    Installasi TinyMCE
  6. 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
    Tutorial Code Igniter
  7. 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:

  1. Dengan menggunakan Code Editor (saya memakai Dreamweaver), buka file development.html yang ada dalam folder tutorial_ci/assets/tinymce/tests/manual.
  2. 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>

  3. Buat file PHP baru dengan nama tinymce.php dalam folder tutorial_ci/application/views/admin/berita
  4. Lalu Paste kode tersebut ke dalam file tinymce.php.
  5. Cari kode ini: selector: “textarea#elm1”,
  6. Lalu ubah (buang kode #elm1) sehingga menjadi: selector: “textarea”,
  7. 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
Kursus Web Programming Java Web Media

Dalam form tambah berita ini, input id_user masih diset secara default dengan value=1. Nanti dalam tutorial berikutnya akan kita set menjadi dynamic content yang berasal dari data session id_user. Berikut langkah-langkahnya:

  1. Buat file PHP baru dengan nama tambah_berita.php dalam folder tutorial_ci/application/views/berita
  2. 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>&nbsp;</p>
    </div>

  3. Simpan file tambah_berita.php

Di dalam file tambah_berita.php tersebut ada 2 baris kode PHP, yaitu:

  • <?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
Kursus Desain Web

Berikut langkah-langkahnya:

  1. Buka file berita_model.php yang ada dalam folder tutorial_ci/application/models/admin/
  2. Pada baris ke-12 (atau sebelum kode kurung kurawal terakhir), tekan Enter sebanyak 4 kali (Lihat gambar).

    Kursus Graphic Design Depok
    Kursus Graphic Design Depok
  3. 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);
    }

  4. 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
Kursus Web Design Depok

Berikut langkah-langkahnya:

  1. Buka file berita.php yang ada dalam folder tutorial_ci/application/controllers/admin/
  2. Pada baris ke-17 (atau sebelum kurung kurawal yang terakhir), tekan Enter sebanyak 4 kali (Lihat gambar).
    Kursus Web Development Depok
    Kursus Web Development Depok
    1. 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/’);
      }

      }

    2. Simpan kembali file berita.php

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
Kursus Web Design Java Web Media