Tutorial Membuat Carousel dinamis dengan Codeigniter + Bootstrap

Assalamu’alaikum wr. wb.

Salam buat buat semua teman-teman coder dan selamat datang di blog saya pirwablog.blogspot.com
tempat saya sharing coding dan pengalaman saya di dunia web developer.

Tutorial kali ini saya akan berbagi cara membuat carousel dinamis menggunakan Codeigniter dan bootstrap. Carousel bisa diartikan sebagai gambar atau slide bergerak di suatu halaman, yang biasanya dipakau untuk menampilkan topik-topik terbaru dari suatu situs dan diletakkan di halaman awal suatu situs. Selain topik atau berita biasa juga dipakai untuk menunjukkan kelebihan dari produk atau jasa yang ditawarkan. Saya sendiri pernah memanfaatkan bootstrap carousel untuk membuat sistem ujian dengan tampilan slide persoal. Pada kesempatan kali ini kita akan membuat carousel untuk menampilkan berita terbaru di suatu halaman web.

Dalam pembuatannya saya akan menggunakan bahasa pemrograman PHP dengan Framework Codeigniter, DBMS menggunakan MySQL, dan UI library menggunakan Bootstrap. Berikut adalah tampilan dari aplikasi yang akan kita buat:

Berikut adalah urutan langkah pembuatannya:

1. Buat database
2. Buat Tabel
3. Insert Data-Data
4. Instalasi Codeigniter dan Bootstrap
5. Buat Controler
6. Buat Model
7. Buat View
8.  Selesai

 Ok tanpa berlama-lama kita langsung saja mulai membuatnya:
1. Buat Database

-- Buat database dengan nama carousel 
CREATE DATABASE carousel;

 -- Mengaktifkan database carousel 
USE carousel;

2.Buat Tabel

-- Buat tabel berita
CREATE TABLE `carousel`.`berita` (
`id` INT NOT NULL AUTO_INCREMENT ,
`judul` VARCHAR(100) NOT NULL,
`foto` VARCHAR(256) NOT NULL,
`isi` TEXT NOT NULL,
`link` VARCHAR(256) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE = InnoDB;

3. Masukkan Data

-- memasukkan data ke tabel berita, potongan berita dan gambar diambil dari detik.com
INSERT INTO `berita` (`id`, `judul`, `foto`, `isi`) VALUES (NULL, '82 Orang Ditangkap karena Bentrok Buton, Panah-Tombak Disita', 'assets/berita/images/berita1.jpg', 'Tiga hari setelah bentrok antarwarga dan pembakaran 87 rumah di Desa Gunung Jaya, Kabupaten Buton, Sulawesi Tenggara (Sultra), polisi menangkap 82 orang terduga pelaku. Senjata tajam seperti tombak hingga busur panah disita sebagai barang bukti.\r\n\r\nBentrok ini bermula ketika Warga Desa Gunung Jaya merasa terganggu oleh konvoi warga Desa Sampuabalo dengan motor berknalpot racing pada Selasa (4/6) saat malam takbiran. Esoknya, sekitar pukul 13.00 WITa, Rabu (5/6), warga Desa Sampuabalo yang melintas dipanah oleh warga Desa Gunung Jaya.');
INSERT INTO `berita` (`id`, `judul`, `foto`, `isi`) VALUES (NULL, 'Bocah Terjepit Bikin Sopir Transjabodetabek Disanksi, Dibantu Donasi Petisi', 'assets/berita/images/berita2.jpg', 'Sanksi denda Rp 1,2 juta yang diterima Oki, sopir bus TransJabodetabek yang dipaksa mengangkut anak-anak saat malam takbiran, mengundang simpati netizen.');
INSERT INTO `berita` (`id`, `judul`, `foto`, `isi`) VALUES (NULL, 'H+4 Lebaran, Lalu Lintas Pematang Siantar-Medan Macet', 'assets/berita/images/berita3.jpg', 'Arus lalu lintas dari Pematang Siantar menuju Medan, Sumatera Utara macet pagi ini. Kemacetan terjadi di sekitar SMAN 1 Dolok Merawan, Serdang Bedagai');

4. Instalasi Codeigniter
Untuk intall Codeigniter kita harus download terlebih dahulu installer Codeigniter di link ini. Pas tutorial ini dibuat, versi 3.1.9 adalah yang paling baru. Oleh karena itu kita akan menggunakan Codeigniter versi 3.1.9. Setelah itu extract filenya lalu copy folder di localhost anda. Setelah itu lakukan konfigurasi dasar codeigniter:
    a. Menngatur Base url
Buka file application/config/config.php, lalu atur base url seperti berikut

$config['base_url'] = 'http://localhost/carousel/';

    b. Menngatur Koneksi Database
Buka file application/config/database.php, lalu atur koneksi seperti berikut

$db['default'] = array(
    'dsn' => '',
    'hostname' => 'localhost',
    'username' => 'root',
    'password' => '',
    'database' => 'carousel',
    'dbdriver' => 'mysqli',
    'dbprefix' => '',
    'pconnect' => false,
    'db_debug' => (ENVIRONMENT !== 'production'),
    'cache_on' => false,
    'cachedir' => '',
    'char_set' => 'utf8',
    'dbcollat' => 'utf8_general_ci',
    'swap_pre' => '',
    'encrypt' => false,
    'compress' => false,
    'stricton' => false,
    'failover' => array(),
    'save_queries' => true,
);

5. Buat Controler
 Buat file application/controller/Carousel.php, lalu copy script berikut

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Carousel extends CI_Controller {
    public function showCarousel()
    {
        $this->load->helper(array('url'));

        //load carousel_m model
        $this->load->model('carousel_m', '', TRUE);
      
        //load view
        $this->load->view('showCarousel');
    }
}

6. Buat Model
 Buat file application/models/Carousel_m.php, lalu copy script beriku:

<?php if(!defined("BASEPATH")) exit("Tidak dapat mengakses langsung");
Class Carousel_m extends CI_Model {
  function __construct(){
    parent::__construct();
  }
  function beritaGetAll()
  {
      $query="SELECT * FROM berita";
      return $this->db->query($query)->result_array();
  }
}

7. Buat View
Sebelum membuat view,  download terlebih dahulu library bootstrap di link berikut,download yang versi compiled seperti gambar berikut:

Setelah selesai download lalu extract, rename nama foldernya menjadi "bootstrap" dan letakkan di folder assets/ . Karena Bootstrap membutuhkan jquery, maka kita harus install jquery. Caranya buat file di folder assets/jquery/jquery.js dan copy kan semua code di link ini.
Setelah persiapan selesai sekarang kita buat file application/view/showCarousel.php. Copy script berikut:

<!doctype html>
<html lang="en">
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <title>Tutorial Membuat Tree-view dinamis dengan Codeigniter + Bootstrap-treeview.js</title>
      <link href="<?=base_url();?>assets/bootstrap/css/bootstrap.css" rel="stylesheet">

      <script src="<?=base_url();?>assets/jquery/jquery.js"></script>
      <script src="<?=base_url();?>assets/bootstrap/js/bootstrap.js"></script>
   </head>
<body>
<div class="container">
   <div class="col-sm-8">
    <div id="carousel-berita" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <?php
                $berita = $this->carousel_m->beritaGetAll();
                foreach ($berita as $key => $value) {
                    $active = ($key == 0) ? 'active' : '';
                    echo '<li data-target="#carousel-berita" data-slide-to="' . $key . '" class="' . $active . '"></li>';
                }
                ?>
            </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
                <?php
                foreach ($berita as $key => $value) {
                    $active = ($key == 0) ? 'active' : '';
                    echo '<div class="item ' . $active . '">
                                            <img src="' . base_url() . $value['foto'] . '" alt="...">
                                            <div class="carousel-caption">
                                                <h3>' . $value['judul'] . '</h3>
                                            </div>
                                        </div>';
                }
                ?>
            </div>

            <!-- Controls -->
            <a class="left carousel-control" href="#carousel-berita" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#carousel-berita" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
    </div>
   </div>
</div>
</body>
</html>

8. Selesai
Untuk download full source code bisa di download di link berikut.
Carousel.rar

Carousel.sql

Wa’alaikumsalam wr. wb.

Tweet

Postingan terkait:

Ditulis Indra — Sabtu, 08 Juni 2019 — Add Comment