Cara Menggunakan Bootstrap Offline


Menggunakan Bootstrap Offline – Untuk Anda yang berprofesi sebagai web developer atau pernah mempelajari hal-hal seputar web tentu pernah mendengar Bootstrap. Bootstrap adalah library framework CSS yang dibuat khusus untuk bagian pengembangan front-end website.

Bootstrap menjadi salah satu framework HTML, CSS dan javascript yang populer serta banyak digunakan oleh web developer. Bootstrap memberikan kemudahan kepada web developer. Di samping itu Bootstrap juga sangat cepat, sebab kita hanya perlu menambahkan class-class tertentu untuk membuat suatu elemen, seperti tombol, navigasi, grid dan lain sebagainya.

Kelebihan Bootstrap

Ada beberapa kelebihan dari Bootstrap yang membuatnya diminati banyak orang. Berikut adalah beberapa keunggulan bootstrap:

  • Pemakaian bootstrap lebih hemat waktu
  • Tampilan bootstrap tampak modern
  • Tampilan bootstrap juga mobile friendly, artinya bootstrap mempunyai tampilan yang responsif untuk semua perangkat, baik PC, smartphone maupun tablet
  • Sangat ringan, sebab bootstrap dibuat dengan sangat terstruktur

Baca juga: Cara Menggunakan Font Awesome

Cara Menggunakan Bootstrap

Berikutnya kita bahas bagaimana cara menggunakan Bootstrap pada suatu website. Sebelum mulai, pastikan Anda telah mengunduh dan melakukan instalasi Bootstrap. Anda bisa mendownload Bootstrap pada situs resminya di http://getbootstrap.com/getting-started/.

Bootstrap terbaru yang tersedia di website resminya adalah versi 4.5.2. Sebelum mengunduh Bootstrap nantinya Anda bisa menentukan sendiri atau melakukan kustomisasi sesuai dengan keinginan. Adapun struktur isi Bootstrap terbaru adalah sebagai berikut:

Instalasi Bootstrap

Install Bootstrap dengan npm, composer dan bower

Tahap berikutnya adalah melakukan instalasi Bootstrap. Cara install Bootstrap ada beberapa macam. Kita bisa melakukan instalasi dengan composer, bower, ataupun dengan npm. Selain itu kita juga bisa menginstal Bootstrap secara online ataupun offline.

Jika menggunakan bower, kita bisa menginstal Bootstrap dengan perintah berikut:

bower install bootstrap

Lalu jika ingin menginstal Bootstrap dengan npm bisa dengan mengetikkan perintah:

npm install bootstrap

Sementara instalasi Bootstrap dengan composer adalah dengan perintah di bawah ini:

composer require twbs/bootstrap

Install Bootstrap secara online

Install Bootstrap secara online menjadi salah satu opsi yang banyak dipilih oleh web developer. Pada cara ini file-file Bootstrap tersimpan di server luar. Di bawah ini ada tiga contoh untuk menginstall Bootstrap secara online. Anda bisa memilih salah satu dan meletakkannya di bagian <head> di halaman HTML Anda. Berikut syntax yang bisa Anda simak.

Install Bootstrap secara offline

Selain secara online, install Bootstrap secara offline juga sering dilakukan oleh developer. Sebab dengan cara ini kita tetap bisa bekerja dengan Bootstrap walaupun tidak terhubung dengan internet. Sebab file framework Bootstrap sudah tersimpan pada PC kita.

Berbeda dengan cara online yang file-file Bootstrap-nya tersimpan di server luar sehingga kita membutuhkan koneksi internet untuk mengaksesnya. Caranya download framework CSS Bootstrap, lalu ekstrak pada project yang sedang Anda kerjakan. Contohnya http://localhost/contohsaja/bootstrap/.

Menghubungkan Bootstrap dengan HTML atau PHP 

Setelah itu untuk menghubungkan Bootstrap buat file HTML atau PHP yang akan disambungkan dengan Bootstrap. Misalnya kita buat file dengan nama index.php.

Perlu diketahui bahwa Bootstrap membutuhkan jquery. Sebab bagian javascript Bootstrap menggunakan jquery. Sehingga jangan lupa untuk menambahkan file jquery pada folder js Bootstrap. Atau letakkan di sembarang tempat, asalkan direktori saat menghubungkan file CSS dan js nanti sesuai.

Berikut adalah kode yang perlu dimasukkan dalam file index.php:

Untuk menghubungkan file html atau php dengan Bootstrap.css kita gunakan kode:

<link rel=”stylesheet” type=”text/css” href=”css/bootstrap.css”>

Setelah itu hubungkan file html atau php dengan bootstrap.js dan jquery.js. Jangan lupa untuk meletakkan jquery.js pada bagian atas, sebab Bootstrap bekerja dengan bantuan jquery. Script yang perlu dimasukkan adalah sebagai berikut:

<script type=”text/javascript” src=”js/jquery.js”></script>

<script type=”text/javascript” src=”js/bootstrap.js”></script>

Perlu diketahui, class “btn” pada element <button> yang tertulis pada kode di atas merupakan class bootstrap yang dapat dipakai untuk membuat tombol. Sedangkan “btn-danger” dan “btn-primary” digunakan untuk menentukan warna tombol yang akan dibuat.

Setelah selesai, coba jalankan pada web browser Anda. Berdasarkan contoh di atas, project yang dikerjakan adalah http://localhost/contohsaja/bootstrap/. Maka buka alamat tersebut di web browser. Hasilnya akan seperti di bawah ini.

Menggunakan Bootstrap di Codeigniter

Tidak sedikit yang bertanya-tanya dan mencari tahu tentang cara menggunakan Bootstrap di Codeigniter. Seperti yang sudah Anda ketahui Bootstrap merupakan framework CSS yang populer dan diterapkan pada banyak website.

Tentu saja hal ini tidak lepas dari beberapa kelebihan yang dimilikinya. Seperti pengoperasiannya yang lebih mudah. Bahkan Bootstrap bisa menjadi pilihan menarik bagi programmer yang masih belajar mendesain tampilan web dengan css dan javascript. Bootstrap memudahkan penggunanya untuk membuat style komponen atau tampilan.

Mengintegrasikan Bootstrap dengan Codeigniter bukanlah hal yang mustahil. Kita bisa melakukannya. Berikut langkah-langkah yang bisa Anda ikuti.

Download Bootstrap

Pertama-tama Anda perlu mendownload Bootstrap dengan langkah seperti yang sudah dijelaskan di atas. Silakan unduh Bootstrap di website resminya. File yang diunduh memiliki format .zip. Yang artinya saat akan digunakan nantinya Anda perlu melakukan ekstraksi file tersebut terlebih dahulu ke folder tujuan.

Integrasi Bootstrap ke Codeigniter

Setelah selesai mengunduh, tahap berikutnya adalah melakukan integrasi dengan Codeigniter. Langkahnya adalah sebagai berikut.

  • Buat folder baru dan beri nama assets pada project Codeigniter yang Anda buat.

  • Setelah itu ekstrak file Bootstrap yang sudah Anda unduh tadi ke dalam folder assets. Jika menggunakan web browser Google Chrome, lokasi file yang Anda unduh bisa dilihat pada folder Download di This PC. Anda bisa mengekstrak dengan program bawaan Windows atau menggunakan aplikasi file compressed pihak ketiga.

  • Hasil ekstrak file Bootstrap akan berupa folder yang memuat nama dan versi dari Bootstrap tersebut. Misalnya bootstrap-4.5.2-dist. Agar lebih mudah, Anda bisa mengganti nama tersebut menjadi lebih sederhana. Misalnya kita ganti menjadi bootstrap saja.

  • Langkah instalasi sudah selesai. Selanjutnya kita coba untuk memakainya. Yang perlu Anda lakukan buat controller baru dengan nama Bootstrap.php di bagian controller. Dan isi dengan kode berikut:
<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Bootstrap extends CI_Controller {

	function index()
	{
		$this->load->view('v_bootstrap');
	}

}
?>
  • Berikutnya kita buat view sederhana dengan nama v_bootstrap.php di bagian view. Masukkan kode berikut pada file yang baru kita buat:
<!DOCTYPE html>
<html>
<head>
 <!-- Load file CSS Bootstrap offline -->
<link rel="stylesheet" href="<?php echo base_url()?>/assets/bootstrap/css/bootstrap.min.css">
  <script src="<?php echo base_url()?>/assets/bootstrap/js/jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="jumbotron text-center">
  <h1>Halaman HTML dengan bootstrap offline</h1>
  <p>Halaman ini responsive untuk semua jenis perangkat</p> 
</div>
  
<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <h3>Kolom pertama</h3>
      <p>Paragraf pertama</p>
      <p>Paragraf kedua</p>
    </div>
    <div class="col-sm-4">
      <h3>Kolom kedua</h3>
    <p>Paragraf pertama</p>
      <p>Paragraf kedua</p>
    </div>
    <div class="col-sm-4">
      <h3>Kolom ketiga</h3>        
      <p>Paragraf pertama</p>
      <p>Paragraf kedua</p>
    </div>
  </div>
</div>

</body>
</html> 

Perhatikan bagian <head>. Pada bagian tersebut kita memuat file css bootstrap yang sudah disimpan pada folder assets/bootstrap.

  • Langkah terakhir adalah melakukan uji coba. Jalankan controller bootstrap yang telah kita buat tadi pada web browser. Misalnya http://localhost/akademik/bootstrap. Tampilannya akan seperti di bawah ini.

Baca juga: Cara Membuat Halaman Login Dengan Bootstrap

Demikian tutorial menggunakan Bootstrap yang bisa kami sampaikan untuk Anda. Jangan berhenti untuk belajar, karena kita bisa mempelajari banyak hal yang berkaitan dengan pembuatan web. Anda bisa juga mengembangkan cara-cara di atas sehingga bisa menghasilkan web yang lebih menarik lagi.



Loading...

Leave a Comment