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

Tutorial Code Igniter Part 8: CRUD Modul Berita (Bagian 1)

Kursus Web Programming Depok
Kursus Web Programming Depok

Alhamdulillah, Tutorial Code Igniter Part 8: CRUD Modul Berita akhirnya release juga. Pada Tutorial Part 8 ini Anda akan belajar untuk menggunakan fasilitas CRUD (Create, Read, Update & Delete) yang ada dalam Code Igniter. Setelah mengikuti tutorial ini diharapkan Anda dapat menambah, mengubah dan menghapus konten berita yang ada 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. Mengunduh hasil akhir tutorial Part  7  di sini: https://drive.google.com/file/d/0B5BhV6c89_2YbkxUTkxtVTJwS1k/view?usp=sharing
  9. Hasil akhir Tutorial Part 8 ini bisa diunduh di: https://drive.google.com/file/d/0B5BhV6c89_2YNzJRS3k2ZFhLOGM/view?usp=sharing

Mengkatifkan library dan helper form

Untuk bekerja dengan form, Anda harus mengaktifkan library dan helper form yang ada di Code Igniter.

Tutorial Code Igniter Java Web Media
Tutorial Code Igniter Java Web Media

Berikut langkah-langkahnya:

  1. Buka file autotoload.php yang ada dalam folder tutorial_ci/application/config/
  2. Pada baris ke-55, aktifkan library untuk vaslidasi form sehingga kode menjadi:

    $autoload[‘libraries’] = array(‘database’,’form_validation’);

  3. Pada baris ke-67, aktifkan helper form untuk fungsi form CI sehingga menjadi:

    $autoload[‘helper’] = array(‘url’,’form’);

  4. Simpan file autoload.php

Membuat berita_model.php di folder tutorial_ci/application/models/admin

Class dengan nama berita_model ini nanti kita simpan di dalam folder tutorial_ci/application/model/admin berfungsi untuk menampilkan, menambah, mengubah dan menghapus data berita.

Membuat folder admin

Folder admin digunakan untuk menyimpan seluruh model yang akan digunakan di halaman administrator.

  1. Buka folder tutorial_ci/application/models
  2. Buat folder baru dalam folder models tersebut dengan nama admin
Kursus Web Design Depok
Kursus Web Design Depok

Membuat berita_model di folder tutorial_ci/application/models/admin

Selanjutnya adalah membuat file model yang nantinya akan meng-handle seluruh aktivitas data modul berita.

Kursus Web Programming Java Web Media
Kursus Web Programming Java Web Media

Berikut langkah-langkahnya:

  1. Buat file PHP baru dengan nama berita_model dalam folder tutorial_ci/application/models/admin
  2. Ketik kode di bawah ini:

    <?php
    class Berita_model extends CI_Model {
    public function __construct() {
    $this->load->database();
    }

    // Menampilkand data berita
    public function daftar_berita() {
    $query = $this->db->query(‘SELECT berita.judul, berita.status_berita, berita.slug, berita.id_berita, berita.tanggal, users.nama FROM berita, users WHERE berita.id_user = users.id_user ORDER BY id_berita DESC’);
    return $query->result_array();
    }
    }

  3. Simpan file berita_model.php tersebut

Membuat controller berita.php dalam folder tutorial_ci/application/controllers/admin

Controller berita ini nantinya akan dipakai untuk mengontrol model dan view mana yang harus tampil untuk menampilkan data berita yang ada.

Kursus Web Development Java Web Media
Kursus Web Development Java Web Media

Berikut langkah-langkahnya:

  1. Buat file PHP baru dengan nama berita.php dalam folder tutorial_ci/application/controllers/admin
  2. Ketik kode di bawah ini:

    <?php if ( ! defined(‘BASEPATH’)) exit(‘No direct script access allowed’);
    class Berita extends CI_Controller {

    public function __construct() {
    parent::__construct();
    $this->load->model(‘admin/berita_model’);
    }

    public function index() {
    $query = $this->berita_model->daftar_berita();
    $data=array(‘title’=>’Manajemen Berita – Java Web Media’,
    ‘berita’ => $query,
    ‘isi’ =>’admin/berita/berita_view’
    );
    $this->load->view(‘admin/layout/wrapper’,$data);
    }
    }

  3. Simpan file berita.php

Membuat view untuk modul berita di administrator

Modul berita yang di administrator nantinya dapat diakses melalui alamat http://localhost/tutorial_ci/admin/berita atau bisa Anda akses dengan mengklik link navigasi berita yang ada di halaman http://localhost/tutorial_ci/admin/dasbor/.

Membuat folder berita dalam folder tutorial_ci/application/views/admin

Folder berita ini nanti akan digunakan sebagai tempat penyimpanan seluruh view untuk modul berita.

Kursus Code Igniter Depok
Kursus Code Igniter Depok

Berikut langkah-langkahnya:

  1. Buka folder tutorial_ci/application/views/admin 
  2. Buat folder baru dengan nama berita

Membuat view berita dalam folder tutorial_ci/application/views/admin/berita

View berita untuk menampilkan daftar berita yang telah ada, menampilkan link untuk mengedit dan menghapus berita.

Kursus Web Development Depok
Kursus Web Development Depok

Berikut langkah-langkahnya:

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

    <div class=”konten”>
    <h1>Manajemen berita</h1>
    <div align=”right”>
    <a href=”<?php echo base_url() ?>admin/berita/tambah” class=”tambah”>Tambah berita</a>
    </div>
    <p>Daftar berita</p>
    <table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″ class=”myform”>
    <tr>
    <th scope=”col”>Judul</th>
    <th scope=”col”>Status</th>
    <th scope=”col”>Penulis</th>
    <th scope=”col”>Tanggal</th>
    <th scope=”col”>&nbsp;</th>
    </tr>
    <?php foreach($berita as $list) { ?>
    <tr>
    <td>
    <a href=”<?php echo base_url() ?>home/read/<?php echo $list[‘slug’] ?>” target=”_blank”>
    <?php echo $list[‘judul’]; ?></a></td>
    <td><?php echo $list[‘status_berita’]; ?></td>
    <td><?php echo $list[‘nama’]; ?></td>
    <td><?php echo $list[‘tanggal’]; ?></td>
    <td>
    <a href=”<?php echo base_url() ?>admin/berita/edit/<?php echo $list[‘id_berita’] ?>”>EDIT</a> | <a href=”<?php echo base_url() ?>admin/berita/delete/<?php echo $list[‘id_berita’] ?>”>DELETE</a></td>
    </tr>
    <?php } ?>
    </table>

    </div>
  3. Simpan file berita_view.php

Menguji hasil pembuatan

Untuk mengetesnya, Anda bisa mengaksesnya secara langsung di http://localhost/tutorial_ci/admin/berita.

Anda bisa mendownload hasil tutorial ini di link ini: https://drive.google.com/file/d/0B5BhV6c89_2YNzJRS3k2ZFhLOGM/view?usp=sharing

Berikut hasil akhirnya:

Kursus Web Programming Depok
Kursus Web Programming Depok
Tutorial Code Igniter Java Web Media

Tutorial Code Igniter Part 7: Menampilkan daftar berita dan detailnya

Tutorial Code Igniter Java Web Media
Tutorial Code Igniter Java Web Media

Jika pada Tutorial Code Igniter Part 6: Mempersiapkan database dan konfigurasinya di Code Igniter Anda telah belajar melakukan konfigurasi database, membuat dan mengimport database, maka pada Tutorial Code Igniter Part 7 ini Anda akan belajar bagaimana menampilkan daftar berita tersebut di halaman website yang telah Anda buat sebelumnya. Read More

Tutorial Code Igniter Depok

Tutorial Code Igniter Part 6: Mempersiapkan database dan konfigurasinya di Code Igniter

Tutorial Code Igniter Depok
Tutorial Code Igniter Depok

Setelah 5 tutorial membahas tentang bagaimana membuat halaman statis dengan framework Code Igniter, maka pada Tutorial Code Igniter Part 6: Mempersiapkan database dan konfigurasinya di Code Igniter ini Anda akan belajar membuat database. Database ini nantinya akan menjadi tempat penyimpanan dari konten website Anda.

Sebelum mengikuti tutorial ini, pastikan Anda telah:

  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. Mengunduh file database tutorial_ci.sql di: https://drive.google.com/file/d/0B5BhV6c89_2YT2laV3JqaktJRm8/edit?usp=sharing
  7. Mengunduh hasil akhir tutorial Part 5 bisa diunduh di sini:  https://drive.google.com/file/d/0B5BhV6c89_2YVU5zdkZjVGFERE0/edit?usp=sharing
  8. Kode akhir dari tutorial ini dapat Anda download di: https://drive.google.com/file/d/0B5BhV6c89_2Yc25JLUJVMEVyZWM/edit?usp=sharing

Membuat database tutorial_ci dan mengimpor tutorial_ci.sql

Sebelum Anda memasuki bagian membuat database tutorial_ci, pastikan Anda telah mengunduh file tutorial_ci.sql. Silakan Anda doanwload dulu di link ini https://drive.google.com/file/d/0B5BhV6c89_2YT2laV3JqaktJRm8/edit?usp=sharing. Dalam database SQL tersebut terdapat dua tabel, yaitu:

  • Tabel berita, berfungsi untuk menyimpan data berita
  • Tabel users, berfungsi sebagai media penyimpanan data user

Sebelum memasuki tahap ini, pastikan Anda telah menguji web server Anda dan fitur phpMyAdmin dapat berjalan dengan baik. Lihat gambar di bawah ini:

Kursus Pembuatan Website Depok
Kursus Pembuatan Website Depok
Belajar database MySQL
Belajar database MySQL

Langkah selanjutnya adalah sebagai berikut:

  1. Aktifkan webserver Anda (XAMPP, WAMP, MAMP atau yang lain)
  2. Buka browser Anda dan akses alamat http://localhost/phpmyadmin
  3. Klik tab menu Databases
  4. Pada input Create database, buat database dengan nama tutorial_ci. Kemudian klik Create
  5. Anda telah berhasil membuat database.

Import database tutorial_ci.sql ke dalam database tutorial_ci

Anda telah membuat database tutorial_ci dan telah mendownload tutorial_ci.sql.

Kursus Pembuatan Website
Kursus Pembuatan Website

Langkah selanjutnya adalah mengimport database SQL tersebut:

  1. Masih di phpMyAdmin, buka database tutorial_ci,
  2. Klik tombol Import
  3. Cari file tutorial_ci.sql yang telah Anda download
  4. Klik tombol Go, tunggu beberapa saat sampai proses import selesai.
  5. Anda telah mengimport database

Berikut ini adalah detail masing-masing tabel:

Kursus Web Design Depok
Kursus Web Design Depok
Kursus Web Design Depok
Kursus Web Design Depok

Setting autoload.php (library database) di Code Igniter

Anda telah berhasil membuat database dan mengimport databasenya. Langkah selanjutnya adalah melakukan pengaturan database pada framework Code Igniter agar dapat secara otomatis me-load database yang ada.

Kursus Web Programming
Kursus Web Programming

Ikuti langkah-langkah berikut ini:

  1. Buka file autoload.php yang ada dalam folder tutorial_ci/application/config/
  2. Pada baris ke-55, ada kode di bawah ini:

    $autoload[‘libraries’] = array();

    Selanjutnya untuk dapat me-load/memuat library database yang dimiliki oleh CI, maka Anda harus menambahkan kode sehingga menjadi:

    $autoload[‘libraries’] = array(‘database’);

  3. Simpan kembali file autoload.php

Setting koneksi database di CI (database.php)

Langkah selanjutnya adalah melakukan seting koneksi database CI agar dapat terhubung dengan database MySQL Anda.

Tutorial Code Igniter Depok
Tutorial Code Igniter Depok

Berikut langkah-langkahnya:

  1. Buka file database.php dalam folder tutorial_ci/application/config/
  2. Lakukan perubahan koneksi database pada baris ke-52 s/d ke-54 yang semula seperti kode di bawah ini:

    $db[‘default’][‘username’] = ”;
    $db[‘default’][‘password’] = ”;
    $db[‘default’][‘database’] = ”;

    Ubahlah kode tersebut dengan menambahkan data database, menjadi:

    $db[‘default’][‘username’] = ‘root’;
    $db[‘default’][‘password’] = ”;
    $db[‘default’][‘database’] = ‘tutorial_ci’;

  3. Simpan kembali file database.php

Akhirnya Anda telah menyelesaikan tutorial Part 6 ini.

Download source code akhir Part 6

Kode akhir dari tutorial ini dapat Anda download di: https://drive.google.com/file/d/0B5BhV6c89_2Yc25JLUJVMEVyZWM/edit?usp=sharing