membuat slider dari database Codeigniter

Hallo blogger kali ini saya akan menjelaskan tentang bagaimana cara membuat slider yang mengambil data dari database menggunakan framework Codeigniter. Postingan ini saya buat sebagai tindak lanjut dari permintaan teman saya di facebook yang menginginkan tutorial ini beliau adalah Angg* Andr*an.

slider merupakan salah satu tampilan html yang menampilkan gambar bergerak biasanya digunakan untuk menampilkan produk-produk unggulan yang ada di sebuah web contohnya adalah seperti gambar dibawah ini.

membuat slider dari database Codeigniter

slider biasanya ditandai dengan 
  1. gambar yang berubah-ubah dalam durasi waktu tertentu
  2. adanya pilihan untuk memilih gambar seperti yang saya beri kotak warna hitam
  3. beberapa slider jiga terdapat button untuk next maupun prev
Slider sendiri di internet sangat banyak beberapa framework css biasanya sudah menyediakan plugin ini contoh Bootstrap dan Materializecss. Pada kesempatan kali ini saya akan menggabungkan antara slider Materialize css dengan Codeigniter dan database mysql tentunya. lansung saja masuk pada pembahasan bagaimana cara membuat slider dengan mengambildata dari database Codeigniter.

  1. Karena saya menggunakan framework css Materialize maka alangkah baiknya anda download framework css ini disini
  2. pasangkan dengan core Codeigniter anda
  3. buat sebuah table dengan nama slider yang berisi id_slider, gambar, keterangan
  4. jika sudah buat sebuah file php didalam folder view core CI anda dengan nama bg_slider.php

    <?php
    echo " <!DOCTYPE html>
      <html>
        <head>
    <title>
    arifweb.com slider
    </title>
          <!--Import Google Icon Font-->
          <link href='http://fonts.googleapis.com/icon?family=Material+Icons' rel='stylesheet'>
          <!--Import materialize.css-->
          <link type='text/css' rel='stylesheet' href='css/materialize.min.css'  media='screen,projection'/>
          <!--Let browser know website is optimized for mobile-->
          <meta name='viewport' content='width=device-width, initial-scale=1.0'/>
        </head>
        <body>
    <div class='container'>
    <div class='slider'>
        <ul class='slides'>";

    foreach ($data->result() as $slide) {
         echo " <li>
            <img src='".$slide->gambar."'> <!-- random image -->
            <div class='caption center-align'>
              <h3>Keterangan</h3>
              <h5 class='light grey-text text-lighten-3'>".$slide->keterangan."</h5>
            </div>
          </li>";
    }
    Baca juga membuat dropdown dependent list
        echo "</ul>
      </div>
      </div>
          <!--Import jQuery before materialize.js-->
          <script type='text/javascript' src='https://code.jquery.com/jquery-2.1.1.min.js'></script>
          <script type='text/javascript' src='js/materialize.min.js'></script>
     <!-- create by arifweb.com -->
     <script type='text/javascript' > 
     $(document).ready(function(){
          $('.slider').slider({full_width: true});
    });
    </script>
    <a href='arifweb.com' > ©2016 </a>
        </body>
      </html>
  5.  ";

    ?>
  6. buat fungsi get_slider di model model_slider untuk mengambil data id_slider, gambar dan keterangan dari database.

    function get_slider(){
    return $this->db->get('slider');
    }
  7. buat fungsi pada controller slider.php didalam folder controller dengan isi seperti berikut

     public function index(){
    $data = $this->model_slider->get_slider();
                           $this->load->view('bg_slider',$data); }
  8. jika sudah coba anda jalankan filenya :) SEMOGA BERHASIL :D
Bagi anda yang ingin sourchcode lengkap membuat slider silahkan share artikel ini lalu ketikkan email anda di kolom komentar dengan hastag #arifwebkeren
wkwkwkwk
INGAT NO SPAM !!!!

Bonus menampilkan dropdown dari database

mungkin cukup sekian tutorial saya kali ini tentang membuat slider dari database codeigniter dengan menggunakan slider materializecss. jika artikel ini bermanfaat dan ada yang ingin ditanyakan silahkan masukkan ke kolom komentar terima kasih telah berkunjung :)


Share this

Related Posts

Previous
Next Post »

25 komentar

komentar
19 Juni 2016 00.07 delete

gan ane mau source code nya dong akun.bobi@gmail.com

Reply
avatar
19 Juni 2016 00.11 delete

gan ane mau source code nya dong akun.bobi@gmail.com

Reply
avatar
19 Juni 2016 09.23 delete

Jika berkenan, kirim source codenya ke email ariez.oey@gmail.com dong ^_^

#arifwebkeren

Reply
avatar
7 Oktober 2016 21.36 delete

ane mau donk gan design11market@gmail.com
terims
#arifwebkeren

Reply
avatar
11 Oktober 2016 11.13 delete

taufiqadinugroho007@gmail.com
#arifwebkeren

Reply
avatar
15 Oktober 2016 00.09 delete

gan mau donk source codenya rafeldo29@gmail.com
#arifwebkeren

Reply
avatar
10 November 2016 13.13 delete

msyaifulhuda0707@gmail.com
#arifwebkeren

Reply
avatar
30 Desember 2016 17.50 delete

gan mau sourcodenya dounk khomzanah@gmail.com
maksih

#arifwebkeren

Reply
avatar
15 Maret 2017 14.08 delete

gan mau sourcodenya divitsmg@gmail.com
maksih

#arifwebkeren

Reply
avatar
Anonim
26 Maret 2017 20.48 delete

sbdasep@gmail.com

Reply
avatar
Anonim
26 Maret 2017 20.49 delete

sbdasep@gmail.com

#arifwebkeren

Reply
avatar
31 Maret 2017 10.32 delete

bastian.mesa12@gmail.com

SUDAH DISHARE GAN TOLONG YA .. :)

Reply
avatar
4 April 2017 14.18 delete

gan mau sourcekode juga dong

kresnayosafat@gmail.com

thanks gan

Reply
avatar
23 Mei 2017 10.24 delete

gan, tlng kirimkan ke itsolution0411@gmail.com ya... thanks
#arifwebkeren

Reply
avatar
12 Juni 2017 19.20 delete

Gan mau source codenya gan.
Mohon bantuannya

sudanar23@gmail.com

#arifwebkeren

Reply
avatar
15 Juni 2017 18.41 delete

eser.krb64@gmail.com

#arifwebkeren

Reply
avatar
13 Juli 2017 08.12 delete Komentar ini telah dihapus oleh pengarang.
avatar
16 September 2017 05.11 delete

antok.djaya@yahoo.co.id

#arifwebkeren

di tunngu gan hehehe

Reply
avatar
5 Januari 2018 16.38 delete

om aku mau sourcecodenya, emailku abiyyuikbarwibowo@gmail.com
terimaksih sebelumnya

#arifwebkeren

Reply
avatar
9 Januari 2018 08.36 delete

thoyani45@gmail.com #arifwebkeren
source codenya gan

Reply
avatar
15 Februari 2018 01.48 delete

source codenya gan rizkynursalim@gmail.com

Reply
avatar
24 Juni 2018 15.16 delete

whyhid47@gmail.com
#arifwebkeren

Reply
avatar
9 Agustus 2018 14.18 delete

Gan mau sourcodenya ilhamependi0318@gmail.com
maksih

#arifwebkeren

Reply
avatar
9 Agustus 2018 19.32 delete

Gan mau sourcodenya mrz120597@gmail.com
maksih

#arifwebkeren

Reply
avatar
30 Maret 2019 12.56 delete

moh.trifaldi@gmail.com

#arifwebkeren

Reply
avatar