Scribd
Unggah
60 tayangan

Bootstrap Codeigniter

Bootstrap adalah framework untuk membangun desain web yang responsif secara cepat. Dengan Bootstrap, pengembang dapat membuat antarmuka pengguna yang responsif di berbagai perangkat tanpa menulis kode CSS dan JavaScript dari awal. Bootstrap dapat diinstal secara online menggunakan CDN atau secara offline dengan mendownload file dari situs resmi.

Diunggah oleh

dwiarin1997
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
60 tayangan

Bootstrap Codeigniter

Bootstrap adalah framework untuk membangun desain web yang responsif secara cepat. Dengan Bootstrap, pengembang dapat membuat antarmuka pengguna yang responsif di berbagai perangkat tanpa menulis kode CSS dan JavaScript dari awal. Bootstrap dapat diinstal secara online menggunakan CDN atau secara offline dengan mendownload file dari situs resmi.

Diunggah oleh

dwiarin1997
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 5

BOOTSTRAP

Bootstrap merupakan framework untuk membangun desain web secara responsif dan cepat.
Artinya, tampilan web yang dibuat oleh bootstrap akan menyesuaikan ukuran layar dari
browser yang kita gunakan baik di desktop, tablet ataupun mobile device. Sehingga, user
akan mendapatkan pengalaman yang lebih baik dalam berselancar tanpa mempertimbangkan
perangkat apa yang harus digunakan.
Dengan menggunakan bootstrap, develover hanya tinggal menggunakan nama class (untuk
css) dan library (javascript) yang sudah ditentukkan oleh bootstrap tanpa perlu menulis kode
dari 0 (awal) sehingga, bisa menghemat waktu dalam pengembangan website untuk urusan
UI (User Interface). Bootstrap memiliki tampilan yang indah dan dapat di customisasi.

INSTALLASI BOOTSTRAP
Ada 2 cara untuk dapat menggunakan Bootstrap dalam pembuatan desain web
1. Secara offline dengan mendownload file Bootstrap dari getbootstrap.com
2. Secara online dengan menautkan Bootstrap dari a CDN

A. Secara online
Dengan menggunakan cara pertama, develover dapat men-skip proses download tinggal
menggunakan file dari CDN (Content Delivery Network). Seperti pada contoh berikut.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-
fit=no">

<!-- Bootstrap CSS -->


<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-
ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">

<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>

<!-- Optional JavaScript -->


<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-
q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-
UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W
1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-
JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
</body>
</html>

B. Secara offline
a. Untuk menggunakan bootstrap, download resource file atau file distribusi yang
disediakan oleh bootstrap di situs resminya getbootstrap.com. Tombol link diatas
merupakan link download resmi dari bootstrap berisi file css dan javascript siap
pakai untuk dikembangkan dalam sebuah website. Ada dua jenis file yang bisa
didownload dari website resmi bootstrap, yaitu :
1. File standar yang siap untuk digunakan, dimana hanya terdapat file inti dari
bootstrap tanpa file dokumentasi, source file, dan tambahan lain.
2. File lengkap yang terdapat semua file pendukung untuk mengembangkan
web dengan bootstrap termasuk dokumentasinya.
b. Setelah didownload, kemudian extract menggunakan program seperti 7zip (Gratis)
atau winRAR (shareware).
c. Copykan file bootstrap yang telah didownload ke folder project kita, dengan
membuat folder baru dengan nama resources.

Catatan :
- Jika mendownload file standar, copykn semua file yang didownload di folder
resources/bootstrap
- Jika mendownload file lengkap, silakan copy semua file jika memang
membutuhkannya atau hanya yang ada di folder dist.
d. Untuk bisa mengaplikasikan bootstrap component seperti modal dialog, navigation
bar dan lainnya yang membutuhkan boostrap JS, Bootstrap JS juga membutuhkan
jQuery library agar bisa berjalan normal. Bootstrap tidak menyertakan jQuery di
dalam file download-nya untuk itu, developer harus mendownloadnya secara
terpisah. Hal ini dilakukan agar kita bekerja dan menggunakannya secara offline
(tanpa koneksi internet). K unjungi situs resminya di jquery.com kemudian pilih link
Download the compressed, sesuai dengan versi yang dibutuhkan.
e. Copy jquery yang telah didownload, ke dalam folder project, dengan membuat
sebuah folder baru dengan nama js di dalam folder resources.
MENGGUNAKAN FRAMEWORK BOOTSTRAP DI CODEIGNITER
1. Buat sebuah folder di view, dengan nama templates. Dan buatlah sebuah file
header.php dan footer.php untuk menggunakan library bootstrap, dengan isi sebagai
berikut.
a. header.php

b. footer.php

2. Sebagai contoh, silakan buat file view/halaman_tampil.php, dengan isi sebagai


berikut.

3. Selanjutnya, silakan tambahkan file header dan footer tadi, di controller yang
sebelumnya telah dibuat
4. Setelah membuat file-file diatas, cek hasilnya dibrowser, maka akan tampil seperti
berikut.
TUGAS
1. Praktikan dan terapkan step-step diatas ke dalam project yang kita buat sebelumnya
2. Setelah selesai, silakan buat sebuah file baru yang berisi desain form untuk inputan
ke dalam database
3. Kirimkan hasil yang telah dikerjakan (coding dan output) ke email berikut.
Username : [email protected]
Subject : TUGASBOOTSTRAP_NAMASISWA

Anda mungkin juga menyukai