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.

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.

Belajar Web Programming Java Web Media
Belajar Web Programming Java Web Media

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.

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

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.

Kursus Web Desain - Java Web Media
Kursus Web Desain – Java Web Media

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.

 

Kursus Code Igniter Depok
Kursus Code Igniter Depok

Menampilkan judul berita di sidebar

Langkah selanjutnya adalah menampilkan listing judul berita di sidebar.

Kursus Web Development Depok
Kursus Web Development Depok

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.

Kursus Web Programming Depok
Kursus Web Programming Depok

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.

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

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:

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

Download source code Part 7

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

Java Web Media: Web Design di Kota Depok

Java Web Media adalah perusahaan yang bergerak di bidang web design, web programming, web application, web education, graphic design dan graphic education yang berbasis di kota depok.

12 thoughts to “Tutorial Code Igniter Part 7: Menampilkan daftar berita dan detailnya”

  1. mas punyaku yg tahap ini uda jalan dan sudah tampil, akan tetapi ketika saya tambahkan berita baru tidak bisa tampil dihalaman utama, mohon bantuanya mas, saya sudah menambahkan user. jadi cuman 3 berita aja yg nampil yg bawaanya. selai itu tidak bisa nampil

  2. mas maksih atas tutorialnya saya udah ikut semuah tutorial mas sampai akhir tapi saya buat beberapah perubahan di menu y saya tambah satu ya itu visimisi dan saya mencoba menggunakan langkah2 part7 untuk menu visi misi tetapi saya mengalami masalah sepertti ini

    A PHP Error was encountered

    Severity: Notice

    Message: Undefined variable: visimisi

    Filename: home/visimisi_view.php

    Line Number: 33

    Backtrace:

    saya mohon bantuanya ,sukses selalu

  3. maaf min, mau nanya kok fungsi read saya error yah?? kata nya seperti ini Missing argument 1 for Home::read()
    Mohon bantuannya min -_-

  4. Parse error: syntax error, unexpected ‘public’ (T_PUBLIC) in C:\xampp\htdocs\tutorial_ci\application\controllers\home.php on line 18
    Kenapa ada eror spt ini?

  5. min mau tanya kalau misalnya saya di form pemesanan mau munculin secara otomati nama dan harga mobil itu gmna ya caranya??
    mohon bantuannya

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.