Tutorial Pemrograman

Tutorial Mempercantik Tampilan Codeigniter Dengan Bootstrap

Tutorial kali ini akan membahas tentang tampilan website menggunakan Twitter Bootstrap. Bootstrap adalah sebuah library framework CSS yang di buat khusus untuk bagian pengembangan front-end website. Bootstrap merupakan salah satu framework HTML, CSS dan javascript yang paling populer di kalangan web developer. pada saat ini hampir semua web developer telah menggunakan bootstrap untuk membuat tampilan front-end menjadi lebih mudah dan sangat cepat. karena anda hanya perlu menambahkan class-class tertentu untuk misalnya membuat tombol, grid, navigasi dan lainnya.

Bootstrap telah menyediakan kumpulan komponen class interface dasar yang telah di rancang sedemikian rupa untuk menciptakan tampilan yang menarik, bersih dan ringan. selain komponen class interface, bootstrap juga memiliki fitur grid yang berfungsi untuk mengatur layout pada halaman website yang bisa digunakan dengan sangat mudah dan cepat. dengan menggunakan bootstrap kita juga di beri keleluasaan dalam mengembangkan tampilan website yang menggunakan bootstrap yaitu dengan cara mengubah tampilan bootstrap dengan menambahkan class dan CSS sendiri.

Langkah awal dalam mempercantik tampilan website menggunakan bootstrap adalah sebagai berikut:

1. Untuk mempermudah pekerjaan, Anda dapat men-download source code tema yang tersedia di shapebootstrap.

2. Membuat folder bernama assets di dalam C:\xampp\htdocs\CI.

1

3. Ekstrak dan pindahkan folder hasil tema yang telah di download tadi ke dalam folder assets. Sehingga di dalam folder assets akan seperti gambar dibawah ini:

2

4. Lakukan perubahan pada file Welcome.php di dalam folder application → controller.

5. Membuat tampilan index.php di dalam folder views. Caranya dengan memindahkan file index.html yang terdapat di folder assets kedalam folder application → views. Kemudian gunakan perintah “<?php echo base_url();?>assets/” untuk memanggil css, jquery, dan sebagainya. Supaya saat nanti dijalankan, semua element website tidak error.

6. Buka file autoload.php di dalam folder application → config. Lalu tambahkan url dan file di dalam array.

7. Lakukan perubahan pada file config.php di dalam folder application → config.

8. Terakhir, buka browser Anda kemudian ketik URL http://localhost/CI/. Maka akan tampil laman seperti ini:

3

Demikian tutorial kali ini untuk mempercantik website menggunakan twitter bootstrap. Dengan memanfaatkan bootstrap maka akan mempermudah programmer dalam membuat front-end aplikasi website.


nulis di inwepo


Yunan Helmi Al Anbarry
Hello, I’m a UI/UX Designer & Front End Developer from Jakarta, Indonesia. I hold a Bachelor of Informatics Engineering from Gunadarma University.



Click to comment

Leave a Reply

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

Inwepo adalah media platform yang membantu setiap orang untuk belajar dan berbagi tutorial cara penyelesaian suatu masalah di kehidupan sehari-hari dalam bentuk teks, gambar. dan video.

Dengan bergabung bersama kami dan membuat 1 tutorial terbaik yang kamu miliki dapat membantu jutaan orang di Indonesia untuk menyelesaikan masalahnya. Ayo berbagi tutorial terbaikmu.

Download Aplikasi Inwepo

Copyright © 2017 Inwepo. Server by GoCloud

To Top