Tutorial Code Igniter Part 7: Menampilkan daftar berita dan detailnya

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.

Tutorial ini dibuat berdasarkan User Guide resmi yang dikeluarkan oleh Code Igniter sendiri, jadi tidak ada library tambahan yang digunakan. User Guide ini dapat Anda baca di http://localhost/tutorial_ci/user_guide/.

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. Mengunduh hasil akhir tutorial Part 6 di: https://drive.google.com/file/d/0B5BhV6c89_2Yc25JLUJVMEVyZWM/edit?usp=sharing
8. Hasil akhir Tutorial Part 7 bisa Anda download di sini: https://drive.google.com/file/d/0B5BhV6c89_2YbkxUTkxtVTJwS1k/view?usp=sharing

Seperti dijelaskan dalam tutorial Tutorial Code Igniter Part 1: Installasi Code Igniter, metode kerja dalam CI  adalah berbasis MVC (Model, View and Controller) terdiri atas 3 elemen utama, yaitu:

1. Model: adalah kode yang khusus digunakan untuk melakukan query database
2. View: berfungsi sebagai sarana menampilkan halaman web
3. Controller: mengatur model mana dan view mana yang harus diload oleh suatu fungsi atau link.

Membuat model berita (berita_model.php dalam folder tutorial_ci/application/model)

Selanjutnya Anda akan membuat sebuah model dengan nama berita_model yang fungsinya untuk memanggil database yang telah Anda setiing sebelumnya.

Berikut adalah langkah-langkah dalam menampilkan berita ke halaman web Anda.

1. Buat file PHP baru dengan nama berita_model.php di dalam folder tutorial_ci/application/model/
2. Kemudian 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($read = FALSE) {
    if ($read === FALSE) {
    $query = $this->db->query('SELECT * FROM berita WHERE status_berita ="Publish" ORDER BY id_berita DESC');
    return $query->result_array();
    }
    $query = $this->db->get_where('berita', array('slug' => $read));
    return $query->row_array();
    }

   }

3. Simpan file berita_mode.php

Mengubah Controller home.php (dalam folder tutorial_ci/application/controllers)

Dalam Tutorial Code Igniter Part 2: Membuat halaman home Anda telah membuat sebuah controller halaman home dengan nama file home.php yang tersimpan dalam folder tutorial_ci/application/controllers/. Nah file yang dibuat dalam Tutorial Part 2 tersebut sifatnya masih statis dan belum ada muatan databasenya.

Maka agar dapat me-load/memuat database, maka Anda harus melakukan perubahan:

1. Buka file home.php dalam folder tutorial_ci/application/controllers/
2. Lihat kode di bawah ini:
   

   class Home extends CI_Controller {

3. Setelah kode tersebut, tekan Enter sebanyak 2 kali. Anda akan menambahkan kode baru seperti di bawah ini:
   

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

   Kode tersebut adalah kode untuk meload fungsi model database berita yang telah dibuat pada file berita_model.php

4. Kemudian lakukan perubahan kode di bawah ini:
   

   $data=array(‘title’ =>’Tutorial Code Igniter – Java Web Media’,
   ‘isi’ =>’home/index_home’
   );

   Sehingga kode menjadi:

   $data=array(‘title’ =>’Tutorial Code Igniter – Java Web Media’,
   ‘berita’ => $this->berita_model->daftar_berita(),
   ‘isi’ =>’home/index_home’
   );

   Data berita => $this->berita_model->daftar_berita() adalah fungsi model berita yang telah didefinisikan dalam file berita_model.php

5. Simpan kembali file home.php tersebut.

Menampilkan berita di view (file index_home.php dalam folder tutorial_ci/application/views/)

Langkah selanjutnya adalah menampilkan berita yang sudah ada ke dalam view.

Maka Anda harus mencetak data berita yang telah dibuat di berita_model.php dan yang telah diatur di controller home.php.

1. Buka file index_home.php yang adalam folder tutorial_ci/application/views/
2. Hapus mulai dari kode <div class=”ringkasan”> sampai dengan </div>. Atau lihat kode di bawah ini (baris ke-28 sampai ke-39):<div class=”ringkasan”>
   <p>Layanan Kursus</p> <p>Saat ini Java Web Media juga memiliki layanan kursus desain web (web design) dan desain grafis (graphic design), antara lain:</p> <ul> <li><a title=”Web Design Course” href=”http://javawebmedia.com/course/web-design-course/”>Kursus Web Design (10 -12 sesi @ 2 jam/sesi)</a></li> <li><a title=”Web Programming Course” href=”http://javawebmedia.com/course/web-programming-course/”>Kursus Web Programming (10 – 12 sesi @ 2 jam/sesi)</a></li> <li><a title=”Web Development Course” href=”http://javawebmedia.com/course/web-development-course/”>Kursus Web Development (15 sesi @ 2 jam/sesi)</a></li> <li><a title=”Graphic Design Course” href=”http://javawebmedia.com/course/graphic-design-course/”>Kursus Graphic Design (10 – 12 sesi @ 2 jam/sesi)</a></li> </ul> <p>Layanan Inhouse Training</p> <p>Java Web Media juga melayani pelatihan di tempat Anda (inhouse training), dimana kami akan hadir ke tempat Anda untuk memberikan training dan pelatihan.</p>
   </div>
3. Lalu setelah dihapus, tambahkan kode di bawah ini:
   

   <?php foreach($berita as $list) { ?>
   <div class=”ringkasan”>
   <h3><a href=”<?php echo base_url() ?>home/read/<?php echo $list[‘slug’]; ?>”><?php echo $list[‘judul’]; ?></a></h3>
   <?php echo $list[‘ringkasan’]; ?>
   </div>
   <?php } ?>

4. Lihat link yang ada di <h3><a href="<?php echo base_url() ?>home/read/<?php echo $list['slug']; ?>"><?php echo $list['judul']; ?></a></h3>.

   Link tersebut nantinya akan menghasilkan alamat http://localhost/tutorial_ci/home/read/slug-berita.

5. Simpan file index_home.php
6. Lakukan pengetesan dengan membuka alamat http://localhost/tutorial_ci/. Gambar berikut ini adalah hasilnya.

 

Menampilkan judul berita di sidebar

Langkah selanjutnya adalah menampilkan listing judul berita di sidebar.

Berikut langkah-langkahnya:

1. Buka file index_home.php lagi
2. Hapus kode di bawah ini (lihat sekitar baris ke-38 s/d 54).
   

   <ul>
   <li><a href=”#”>Lorem ipsum dolor sit amet</a></li>
   <li><a href=”#”>Consectetur adipisicing elit</a></li>
   <li><a href=”#”>Sed do eiusmod tempor incididunt</a></li>
   <li><a href=”#”>Ut labore et dolore magna aliqua</a></li>
   <li><a href=”#”>Ut enim ad minim veniam</a></li>
   <li><a href=”#”>Quis nostrud exercitation</a></li>
   <li><a href=”#”>Ullamco laboris nisi</a></li>
   <li><a href=”#”>Ut aliquip ex ea commodo consequat</a></li>
   <li><a href=”#”>Duis aute irure dolor</a></li>
   <li><a href=”#”>In reprehenderit in voluptate</a></li>
   <li><a href=”#”>Velit esse cillum dolore</a></li>
   <li><a href=”#”>Eu fugiat nulla pariatur</a></li>
   <li><a href=”#”>Excepteur sint occaecat</a></li>
   <li><a href=”#”>Cupidatat non proident</a></li>
   <li><a href=”#”>Sunt in culpa</a></li>
   </ul>

3. Lalu setelah dihapus, tambahkan kode ini:
   

   <ul>
   <?php foreach($berita as $list) { ?>
   <li><a href=”<?php echo base_url() ?>home/read/<?php echo $list[‘slug’]; ?>”><?php echo $list[‘judul’]; ?></a></li>
   <?php } ?>
   </ul>

4. Simpan kembali file home_index.php
5. Lakukan pengetesan dengan membuka alamat http://localhost/tutorial_ci/. Gambar berikut ini adalah hasilnya.

Menampilkan detail berita

Anda telah dapat menampilkan listing berita, maka langkah selanjutnya adalah menampilkan detail berita yang sudah ada.

Ada dua tahapan yang harus dilakukan, yaitu:

1. Menambahkan fungsi read pada controller home.
2. Membuat file view khusus untuk menampilkan detail berita, dalam contoh ini akan dibuat file read_view.php.

Membuat fungsi read pada controller home 

Fungsi untuk menampilkan berita ini nanti akan ada di bawah controller home. Sehingga nanti jika dilihat detail beritanya akan menghasilkan sebuah link contohnya seperti ini http://localhost/tutorial_ci/home/read/menampilkan-berita.

Home adalah nama controller parrent-nya (controller utama), sedangkan read adalah anaknya.

Langkah selanjutnya adalah sebagai berikut:

1. Buka file home.php yang ada dalam folder tutorial_ci/application/controllers/
2. Lalu setelah kode penutup fungsi index() yang berupa kurung kurawal tutup (}). Tekan Enter dua kali, lalu ketik kode di bawah ini:
   

   // Read berita
   public function read($read) {
   $data[‘berita’] = $this->berita_model->daftar_berita();
   $data[‘detail’] = $this->berita_model->daftar_berita($read);
   $data=array(‘title’ =>$data[‘detail’][‘judul’],
   ‘berita’ => $this->berita_model->daftar_berita(),
   ‘detail’ => $this->berita_model->daftar_berita($read),
   ‘isi’ =>’home/read_view’
   );
   $this->load->view(‘layout/wrapper’,$data);
   }

3. Simpan file home.php

Membuat file read_view.php (dalam folder tutorial_ci/application/views)

File read_view.php nantinya akan digunakan untuk menampilkan detail masing-masing berita.

Berikut langkah-langkahnya:

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

   <div class=”konten”>
   <div class=”posting”>
   <h3><?php echo $detail[‘judul’] ?></h3>
   <div class=”ringkasan”><?php echo $detail[‘isi’] ?></div>
   </div>
   <div class=”anggota”>
   <h3>Berita terbaru</h3>

   <ul>
   <?php foreach($berita as $list) { ?>
   <li><a href=”<?php echo base_url() ?>home/read/<?php echo $list[‘slug’]; ?>”><?php echo $list[‘judul’]; ?></a></li>
   <?php } ?>
   </ul>
   </div>
   </div>

3. Simpan file read_view.php
4. Lakukan pengetesan dengan mengklik salah satu judul berita

Hasilnya adalah sebagai berikut:

Download source code Part 7

Anda dapat mendownloadnya di link ini: https://drive.google.com/file/d/0B5BhV6c89_2YbkxUTkxtVTJwS1k/view?usp=sharing