Skip to content
Menu
Blog Java Web Media
  • Home
  • Kursus Offline dan Online
  • Blog
  • Kontak
Blog Java Web Media
Tutorial Code Igniter Java Web Media

Tutorial Code Igniter Part 7: Menampilkan daftar berita dan detailnya

Posted on October 3, 2014October 3, 2014
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

14 thoughts on “Tutorial Code Igniter Part 7: Menampilkan daftar berita dan detailnya”

  1. Pingback: Tutorial Code Igniter Part 10: CRUD Modul Berita (Bagian 3: Update dan Delete Berita) | Blog Java Web Media
  2. maximus says:
    August 10, 2015 at 5:27 am

    Makasi gan..sangat tuctox…

    Reply
  3. agus says:
    August 21, 2015 at 6:48 pm

    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

    Reply
  4. azwar says:
    August 27, 2015 at 6:50 pm

    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

    Reply
  5. Joe says:
    September 28, 2015 at 9:04 am

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

    Reply
  6. enjang ruslan says:
    March 10, 2016 at 10:35 am

    setelah download… halaman adminnya gak bisa… soalnya saya butuh proses inputingnya….

    Reply
  7. billy says:
    March 15, 2016 at 4:08 pm

    tutorialnya sangat sangat membantu, terima kasih sudah berbagi ilmu, semoga ilmunya semakin berkembang

    Reply
  8. deny says:
    June 8, 2016 at 3:38 am

    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?

    Reply
  9. Fauzan says:
    April 21, 2017 at 7:05 am

    makasih mas saya udah coba dan sukses, tapi ketika tampilan baca atau read_view cara menampilkan penulisnya bagaimana ya mas?

    Reply
  10. Theofilus says:
    May 12, 2017 at 6:37 am

    gan minta mysql juga dong buat tutorial ci part 6 dan 7 final

    Reply
  11. umam says:
    December 2, 2017 at 3:33 pm

    Gan, untuk menampilkan tanggal dan penulis gmn ya? makasih :)

    Reply
  12. tiwi says:
    August 13, 2018 at 7:19 am

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

    Reply
  13. dhandy says:
    March 14, 2019 at 4:15 pm

    layout/wrapper isinya apa mas

    Reply
  14. Irman says:
    June 29, 2019 at 6:07 am

    Assalammualaikum…, Gimana cara membuat Model untuk Berita terkait ???

    Reply

Leave a Reply Cancel 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.

Recent Posts

  • 9 Kursus yang Menjanjikan & Dibutuhkan di Dunia Kerja
  • 7 Tren Digital Marketing Yang Akan Booming di Tahun 2021
  • 8 Tren SEO di tahun 2020 dan Teknik SEO 2020
  • 15 JavaScript Data Visualization Libraries in 2020
  • Fitur-fitur baru PHP 8

Categories

  • Adobe Illustrator
  • Code Igniter Depok
  • Composer
  • CSS
  • Decor
  • Design
  • Dreamweaver
  • Dynamic Website
  • Javascript
  • Kursus Codeigniter 3
  • Kursus Graphic Design Depok
  • Kursus Laravel
  • Kursus Statistik
  • Kursus Web Design di Depok
  • Laravel
  • Login
  • Login Codeigniter
  • MySQL
  • PHP
  • PHP MySQL
  • PHP MySQL
  • Programmer
  • Spry Menu Bar
  • SPSS
  • STATA
  • Statistik
  • Tips Progammer
  • Tutorial
  • Tutorial Codeigniter
  • Tutorial Laravel
  • Uncategorized
  • Upload File
  • Web Course Depok
  • Web Design
  • Web Design
  • Web Design Depok
  • Web Design Depok
  • Web Design di Kota Depok
  • Web Programming
  • Web Programming Depok
  • Web Server
  • Website
  • Wirausaha

Java Web Media

Pusat Kursus Private dan Reguler bidang Desain Grafis, Web Programming, Mobile Application dan Statistik

Java Web Media
MALL DEPOK TOWN SQUARE
Lantai 2 Unit SS1 No. 5-7
Jl. Margonda Raya No 1 Kota Depok
Jawa Barat 16424
Telepon: 085715100485
Whatsapp: +6281210697841
Email: contact@javawebmedia.co.id
Email: javawebmedia@gmail.com

Pendaftaran Kursus

Tanya Kursus Programming (+6285715100485)

Tanya Kursus Statistik (+6285716275299)

Formulir Pendaftaran

©2021 Blog Java Web Media | Powered by SuperbThemes & WordPress