Tkinter, GUI library untuk Python

Tkinter adalah pustaka standart yang dimiliki oleh Python. Kombinasi Python dan Tkinter ini menghasilkan sebuah tampilan grafik yang menarik sekaligus mudah untuk membuatnya.Tkintermenyediakan berbagai komponen grafis diantaranya tombol, label, kotak teks, yang mana komponen-komponen ini sangatlah sering digunakan dalam aplikasi GUI. Komponen Tkinter ini sering kita sebut widget.

Berikut langkah-langkah sederhana untuk membuat aplikasi GUI berbasis Tkinter di Python:

  1. Memanggil modul Tkinter.
  2. Membuat jendela aplikasi GUI.
  3. Menambahkan komponen pada aplikasi.
  4. Menuliskan kode mainloop.

Memanggil Modul Tkinter

Modul Tkinter berisi berbagai kelas dan komponen yang diperlukan untuk membangun sebuah aplikasi GUI. Untuk menggunakan komponen Tkinter, kita harus memanggilnya terlebih dahulu. Contoh di bawah ini akan menunjukkan bagaimana kita memanggil modul Tkinter.

import Tkinter

Kita juga bisa memanggil semua metode, kelas, dan atribut dari modul Tkinter dengan menggunakan cara seperti di bawah ini.

from Tkinter import *

Membuat Jendela Aplikasi GUI

Setiap aplikasi GUI seharusnya memiliki sebuah jendela utama (root window), yang dapat berisi berbagai komponen yang diperlukan dalam aplikasi yang akan dibuat. Untuk membuat jendela utama dari suatu aplikasi, kita menggunakan pernyataan seperti berikut:

top = Tkinter.Tk()

Jika kita menggunakan pernyataan from-import untuk memanggil modul Tkinter, maka kita cukup menuliskan:

top = Tk()

Menambahkan Komponen Pada Aplikasi

Dengan menggunakan Tkinter, kita dapat menambahkan beberapa komponen pada aplikasi yang kita buat. Komponen ini bisa berdiri sendiri atau dapat diisi komponen lain (disebut Container). Komponen yang berdiri sendiri merupakan komponen yang tidak dapat diisi oleh komponen lain, misalkan tombol, cekbox, dan label. Komponen container merupakan komponen yang bisa berisi/ditempeli oleh komponen lain seperti frame dan window.

Komponen-komponen Tkinter
KOMPONEN DESKRIPSI
Button Komponen Button berfungsi untuk menampilkan sebuah tombol.
Canvas Komponen Canvas digunakan untuk menggambar bentuk seperti garis, lingkaran, poligon, dan kotak.
Checkbutton Komponen Checkbutton berfungsi menampilkan sejumlah pilihan yang ditandai dengan tanda ‘centang’. Pengguna aplikasi dapat memilih lebih dari satu pilihan.
Entry Komponen Entry berfungsi menampilkan kotak teks satu-baris untuk menerima masukan dari pengguna.
Frame Komponen Frame berfungsi sebagai kontainer bagi komponen lain.
Label Komponen Label berfungsi memberikan keterangan untuk komponen lain. Komponen ini juga dapat diisi gambar.
Listbox Komponen Listbox berfungsi menyediakan daftar pilihan untuk pengguna.
Menubutton Komponen Menubutton berfungsi menampilkan menu.
Menu Komponen Menu berfungsi memberikan berbagai perintah kepada pengguna. Perintah-perintah ini juga tercantum dalam Menubutton.
Message Komponen Message berfungsi menampilkan teks yang terdiri dari sejumlah baris untuk menerima beberapa nilai dari pengguna.
Radiobutton Komponen Radiobutton berfungsi menampilkan sejumlah pilihan dalam bentuk tombol radio.
Scale Komponen Scale berfungsi menampilkan skala geser.
Scrollbar Komponen Scrollbar berguna untuk menambahkan fungsi geser (scroll) pada beberapa komponen, seperti komponen Listbox.
Text Komponen Text berfungsi menampilkan teks dalam multi baris.
Toplevel Komponen Toplevel digunakan untuk membuat sebuah kontainer window yang terpisah.

Menambahkan Kode mainLoop

Setelah kita mendesain sebuah aplikasi, tentu saja dengan menambahkan beberapa komponen di dalamnya, kita perlu mengeksekusi program tersebut. Ketika sebuah program kita eksekusi, maka program tersebut akan mengalami perputaran tak berhingga (infinite loop). Kode untuk memasukkan program kita dalam kondisi perputaran ini yaitu

Tkinter.mainloop()

Jika kita menggunakan from-import untuk mengambil semua fungsi pada Tkinter, kita cukup menuliskan

root.mainloop()

dengan root pada kode di atas mengacu pada window utama (toplevel). Berikut ini merupakan sebuah listing program untuk menampilkan sebuah window.

1
2
3
4
5
6
7
8
9
# file: winTk.py
import Tkinter
root = Tkinter.Tk()
# Kode untuk menambahkan komponen
root.mainloop()

Kita juga bisa menuliskan kode di atas seperti ini,

1
2
3
4
5
6
7
8
9
# file: winTk1.py
from Tkinter import *
root = Tk()
# Kode untuk menambahkan komponen
root.mainloop()

Tampilan yang dihasilkan dari program di atas seperti berikut ini,

Instalasi dan membuat Controller sederhana di CodeIgniter

Untuk memahami artikel ini sebaikya membaca terlebih dahulu artikel tentang XAMPP dan bahasa pemrograman PHP

Instalasi CodeIginiter

  • Download file instalasi code igniter di https://codeigniter.com/download
  • Ekstrak file instalasi di di direktori htdocs XAMPP, dalam contoh ini saya menggunakan c:/xampp/htdocs
  • Aktifkan apache pada Xampp Control Panel

2017-11-23 07_51_59-htdocs

  • Buka localhost di web browser, dan akan tampil tampilan berikut

2017-11-23 07_57_26-Welcome to CodeIgniter

  • Instalasi telah berhasil

Selanjutnya kita akan membuat controller, controller adalah bagian  software yang mengatur lalu lintas data. Dalam code iginiter sebuah controller disimpan di folder application/controller. Didalam folder itu sudah ada controller bawaan CodeIgniter yatu Welcome.php. Maka kita harus membuat controller versi kita sendiri, misal kita beri nama Pages.php

2017-11-23 08_01_17-controllers.png

Kemudian didalam controller kita, kita tambahkan perintah untuk menampilkan tulisan di berikut

class Pages extends CI_Controller { //Controller dalam CI harus selalu mengextends CI_Controller

public function index() //Nama fungsi 
{
echo "Hello world"; //Menampilkan tulisan pada layar
}
}

Untuk mengaksesnya kita membuka link http://localhost/ci2/index.php/Pages pada web browser. Tampilannya adalah

2017-11-23 08_19_45-localhost_ci2_index.php_Pages

Jika ingin membuat fungsi lain maka kita menambahkan pada file controller tadi

class Pages extends CI_Controller {

public function index()
{
echo "Hello world";
}
public function coba (){

echo "Fungsi kedua"

}

}

Untuk mengaksesnya cukup kita tulis http://localhost/ci2/index.php/Pages/coba

2017-11-23 08_24_13-404 Page Not Found

Agile, RAD, XP ,DSDM dan XP dalam Software Engineering

Agile

Sebelum kita membahas lebih jauh tentang Agile, sejenak kita flashback kebelakang, melihat bagimana software dikembangkan pada masa awal perkembangan komputer.  Dulu perangkat lunak  dikembangkan dengan metode waterfall. Dimana proses pembangunan perangkat lunak dimulai dari analisa kebutuhan, desain, penulisan sourcecode, pengujian dan pengoperasian software. Dalam metode waterfall suatu tahap tidak akan dijalankan sebelum tahap sebelumnya benar benar telah sempurna. Ciri lain dari metode waterfall adalah banyaknya dokumentasi dari tiap tahap.

hqdefault

Salah satu kelemahan dari metode waterfall adalah ketidak mampuan untuk menghadapi perubahan kebutuhan software, jika terjadi perubahan pada salah satu tahap, maka seluruh proses akan diulang dari awal.

figure-4-salmon-life-cycle-as-the-critique-of-the-waterfall-model-4

Kemudian datanglah metodologi baru yang dikenal dengan nama agile , kata agile berarti bersifat cepat, ringan, bebas bergerak. Metodologi ini mengutamakan fleksibilitas terhadap perubahan spesifikasi perangkat lunak yang terjadi selama pengembangan. Bahkan perubahan ataupun penambahan pada saat fase terakhir pun teratasi apabila menggunakan metodologi ini.

dilbert-agile_programming

Dalam Agile, terdapat  empat nilai yang biasa di sebut Agile Alliance’s Manifesto yaitu

  1. Interaksi dan personel lebih penting daripada proses dan alat
  2. Perangkat lunak yang berfungsi lebih penting daripada dokumentasi yang lengkap
  3. Kolaborasi dengan klien lebih penting daripada negosiasi kontrak.
  4. Respon terhadap perubahan lebih penting daripada mengikuti rencana

Kelebihan dari Agile Modeling:

  1. Meningkatkan kepuasan kepada klien
  2. Pembangunan system dibuat lebih cepat
  3. Mengurangi resiko kegagalan implementasi software dari segi non-teknis
  4. Jika pada saat pembangunan system terjadi kegagalan,kerugian dar segi materi relative kecil.

Kelemahan dari Agile Modeling:

Developer harus selalu siap dengan perubahan karena perubahan akan selalu diterima.

Agile adalah sebuah filosofi yang kemudian diimplementasikan  model pengembangan perangkat lunak lain seperti RAD, DSDM dan XP.

RAD (Rapid Application Development)

RAD Adalah metodologi pengembangan perangkat lunak yang menggunakan prototipe. Prototipe adalah contoh software yang dipresenstasikan kepada pengguna. Dalam model RAD, bagian bagian software dikembangkan secara bersamaan sebagai prototipe. Dikarenakan tidak ada rincian perencanaan yang detail, maka memudahkan untuk melakukan perubahan pada saat proses pengembangan software berjalan. Dalam model RAD , tahap analisis, perancangan, pembuatan dan pengujian dilakukan dalam jangka pendek yang singkat. Proses tersebut akan menghasilkan prototipe yang kemudian dipresentasikan ke klien. Dari presentasi tersebut kemudian klien akan memberikan saran dan kritik. Dari saran dan kritik tadi dilakukan pengembangan ulang software dan kemudian dipresentasikan ulang hingga klien merasa puas dengan software yang dihasilkan. Dalam RAD juga sering digunakan generator aplikasi untuk membuat aplikasi secara otomatis .

rad-methodology

DSDM ( Dynamic Systems Development Method )

DSDM adalah adalah pengembangan Rapid Appliation Development (RAD). DSDM mengutamakan keterlibatan pengguna dalam pembangunan perangkat lunak, dan mengakomodir adanya perubahan spesifikasi perangkat lunak sehingga perangkat lunak dapat dibangun tepat waktu dan tepat anggaran. Sebagai perluasan dari RAD, DSDM difokuskan untuk proyek sistem informasi yang biasanya memiliki tenggat waktu dan dana yang terbatas.

software_development_methodology

DSDM terdiri dari 3 tahapan utama, dan 5 sub tahap :

Sebelum proyek

Dimana kandidat proyek diidentifkasi, pembiayaan proyek dipenuhi dan jaminan proyek dipastikan. Penanganan hal-hal tersebut pada tahap ini menghindari masalah pada tahap-tahap berikutnya.

Selamaproyek

Merupakan inti dari DSDM, yang terdiri dari 5 sub tahap yaitu :

Studi kelayakan

Studi bisnis

Perulangan model fungsional

Perancangan dan pembuatan

Setelah proyek

Memastikan sistem berjalan secara efektif dan efisien. Hal ini diwujudkan dengan perawatan, peningkatan dan perbaikan.

Extreme Programming ( XP )

XP merupakan suatu model yang tergolong dalam pendekatan agile yang diusulkan oleh Kent Back. Tahapan-tahapan yang harus dilalui antara lain: Planning, Design, Coding, dan Testing. Sasaran Extreme Programming adalah tim yang dibentuk berukuran antara kecil sampai medium saja, tidak perlu menggunakan sebuah tim yang besar. Hal ini dimaksudkan untuk menghadapi kebutuhan yang tidak jelas maupun terjadinya perubahan-perubahan kebutuhan yang sangat cepat.

Salah satu yang unik dari XP adalah bagaimana melakukan pengujian software. Jika pada metode lain tes baru dikembangkan setelah perangkat lunak selesai menjalani proses coding maka pada XP tim pengembang harus membuat terlebih dahulu tes yang hendak dijalani oleh perangkat lunak. Berbagai model tes yang mengantisipasi penerapan perangkat lunak pada sistem dikembangkan terlebih dahulu. Saat proses coding selesai dilakukan maka perangkat lunak diuji dengan model tes yang telah dibuat tersebut. Metode pengembangan seperti ini juga dikenal dengan Test Driven Development ( TDD )

Dalam XP juga dikenal istilah pair programming. Pair programming adalah melakukan proses menulis program dengan berpasangan. Dua orang programer saling bekerjasama di komputer yang sama untuk menyelesaikan sebuah unit. Dengan melakukan ini maka keduanya selalu dapat berdiskusi dan saling melakukan koreksi apabila ada kesalahan dalam penulisan program. Karena itu dalam XP harus ada coding standards yang telah disepakati terlebih dahulu, sehingga maka pemahaman terhadap program akan menjadi mudah untuk semua programer dalam tim.

dilbert-xp03

XP cocok diterapkan jika ..

  • Keperluan berubah dengan cepat
  • Resiko tinggi dan ada proyek dengan tantangan yang baru
  • Tim programmer sedikit, yaitu 2-10 orang
  • Mampu mengotomatiskan tes
  • Ada peran serta pelanggan secara langsung

Kelemahan XP

  • Kebutuhan kemungkinan besar tidak lteriddentifikasi dengan lengkap sehingga harus selalu siap dengan perubahan karena perubahan akan selalu diterima.
  • Tidak bisa membuat kode yang detail di awal (prinsip simplicity dan juga anjuran untuk melakukan apa yang diperlukan hari itu juga).
  • XP tidak memiliki dokumentasi formal yang dibuat selama pengembangan. Satu-satunya dokumentasi adalah dokumentasi awal yang dilakukan oleh user.

 

SCRUM

0_JBZZB1V6701lJ3t0_

Pada dasarnya Scrum merupakan salah satu komponen dari metodologi pengembangan Agile yang lebih fokus membahas proses untuk mengidentifikasi, mengelompokkan dan menentukan prioritas pekerjaan yang perlu dilakukan dan memiliki tujuan utama untuk mendapatkan perkiraan lama waktu pembangunan software. Scrum merupakan suatu kerangka kerja. Jadi tidak menyediakan deskripsi rinci tentang bagaimana segala sesuatu harus dilakukan pada proyek. Berbeda dengan XP yang lebih fokus pada proses teknis penulisan kode program, Scrum lebih difokuskan pada manajemen organisasi dalam pembuatan perangka lunak.

Ada 3 elemen organisasi utama pada scrum yaitu product owner, Scrum master, dan the Scrum team. Scrum Master dapat dianggap sebagai penasehat bagi tim, membantu anggota tim menggunakan kerangka Scrum . Product Owner mewakili bisnis, pelanggan atau pengguna dan memandu tim ke arah pegembangan produk yang tepat. Sedangkan The Scrum Team merupakan grup pengembang kecil biasanya terdiri dari 5-9 orang. Untuk projek yang sangat besar, pekerjaan biasanya dibagi ke grup-grup kecil. Jika sangat dibutuhkan the scrum master juga dapat ikut membantu dalam koordinasi team.

Scrum tepat digunakan saat kondisi:

  • Keperluan berubah dengan cepat
  • Tim programmer sedikit, yaitu 5-9 orang
  • Pelanggan tidak terlalu paham dengan apa yang diinginkan

Scrum memiliki prinsip yaitu:

  • Ukuran tim yang kecil melancarkan komunikasi, mengurangi biaya, dan memberdayakan satu sama lainProses dapat beradaptasi terhadap perubahan teknis dan bisnis
  • Proses menghasilkan beberapa software increment
  • Pembangunan dan orang yang membangun dibagi dalam tim yang kecil
  • Dokumentasi dan pengujian terus menerus dilakukan setelah software dibangun
  • Proses scrum mampu menyatakan bahwa produk selesai kapanpun diperlukan

Kelebihan Scrum antara lain:

  • Keperluan berubah dengan cepat
  • Tim berukuran kecil sehingga melancarkan komunikasi, mengurangi biaya dan memberdayakan satu sama lain
  • Pekerjaan terbagi-bagi sehingga dapat diselesaikan dengan cepat
  • Dokumentasi dan pengujian terus menerus dilakukan setelah software dibangun
  • Proses Scrum mampu menyatakan bahwa produk selesai kapanpun diperlukan

Kelemahan Scrum antara lain:

Developer harus selalu siap dengan perubahan karena perubahan akan selalu diterima.

Bootstrap Framework

 

Bootstrap adalah sebuah framework css yang dapat digunakan untuk mempermudah membangun tampilan web. Bootstrap pertama kali di kembangkan pada pertangahan 2010 di Twitter oleh Mark Otto dan Jacob Thornton. Saat ini Bootstrap dikembangkan secara open source dengan lisensi MIT. Kita bisa memantau perkembangan proyek Bootstrap melalui web resminya di getbootstrap.com dan Githubnya di https://github.com/twbs/bootstrap</a>.Bootstrap sangat memanjakan kita dalam membuat tampilan web dan membuat kerja menjadi lebih cepat. Bagaimana tidak, kita tidak lagi harus memulai semuanya dari nol ketika membuat tampilan web. Bootstrap telah menyediakan banyak sekali class CSS dan plugin JavaScript yang bisa langsung kita pakai untuk membantu mempermudah kita membuat halaman web. Karena kemudahaan penggunaan, banyaknya komponen dan kelengkapan dokumentasinya, saat ini Bootstrap menjadi salah satu front-end framework yang paling banyak digunakan di dunia.

Sebelum kita akan mulai bagaimana cara menggunakan Bootstrap dalam membuat halaman web, kita perlu tahu dulu bagaimana cara Bootstrap itu bekerja. Sehingga nanti kita bisa mengoptimalkan manfaatnya buat pembuatan web kita. Jadi pada dasarnya Bootstrap merupakan sebuah kumpulan class CSS dan plugin JavaScript yang sudah siap pakai. Biasanya kan ketika kita membuat sebuah tampilan web kita akan membuat file HTML yang di dalamnya berisi berbagai macam TAG HTML.

Misalnya saja ketika kita ingin membuat sebuah tombol berwarna merah seperti berikut:

Screen Shot 2015-12-21 at 16.20.05

Maka yang biasa kita lakukan adalah membuat sebuah TAG HTML yaitu TAG BUTTON kemudian memberikan CLASS, contohnya tombol-merah, seperti berikut:

<button type="button" class="tombol-merah">CONTOH TOMBOL</button>

Selanjutnya kita harus membuat file CSS untuk mengatur bagaimana penampilan dari dari CLASS atau ID button yang telah kita buat tadi. Misalnya seperti berikut:

.tombol-merah {
	background: #c0392b;
	color: #ffffff;
	border: 1px solid #c0392b;
	padding: 20px 30px;
}

Nah, dengan Bootstrap kita tidak lagi akan memulainya dari nol. Tidak lagi harus menulis semua kode CSS, terutama yang standar, karena itu sudah dilakukan oleh Bootstrap. Kita hanya perlu menuliskan kode CSS yang kita butuhkan saja yang tidak disediakan oleh Bootstrap. Umpamanya kita ingin membuat sebuah tombol, maka kita bisa melihat bahwa Bootstrap telah menyediakan 6 jenis tombol yang bisa kita gunakan.

Screen Shot 2015-12-21 at 16.37.51

Kalau kita ingin membuat tombol merah, kita cukup memberikan class btn dan btn-danger pada TAG BUTTON yang ingin kita buat merah, maka simsalabim langsung berubah jadi merah dengan indah, bahkan tanpa kita turun tangan untuk menulis kode CSS-nya.

<button type="button" class="btn btn-primary">CONTOH TOMBOL</button>

Hasilnya seperti berikut:

Screen Shot 2015-12-21 at 16.45.56

Wah tombolnya kecil banget, saya pengen tombolnya agak besar

Yasudah tambahkan class btn-lg pada tombol tersebut, maka akan langsung berubah jadi besar tombolnya. Karena Bootstrap punya 4 jenis ukuran untuk tombol, tinggal yang mana yang kita gunakan, tergantung kebutuhan.

<button type="button" class="btn btn-primary btn-lg">CONTOH TOMBOL</button>

Hasilnya:

Screen Shot 2015-12-21 at 16.47.55

Oke, intinya seperti itu. Jadi si Bootstrap itu sudah menyediakan banyak sekali class yang bisa kita gunakan, mulai dari tombol, form, tabel, grid, nav, list, dan lain sebagainya.

Tapi bagaimana jika dari tombol yang disediakan Bootstrap tidak ada yang saya inginkan, atau saya ingin memodifnya?

Nah disitulah baru kita menulis kode CSS tambahan kita. Karena sejatinya Bootstrap hanyalah sebuah framework yang memungkinkan untuk mempermudah kerja kita, namun pasti ada saja sesuatu yang tidak akan ada pada Bootstrap yang kita butuhkan. Tapi paling tidak kerjaan kita pasti menjadi lebih cepat dan terbantu.

Baik, untuk bisa menggunakan Bootstrap berikut ini langkah-langkahnya:

1. Download File Bootstrap

Untuk memulainya, pertama-tama kita harus mendownload file Bootstrap terlebih di http://getbootstrap.com/getting-started/</a>.

Screen Shot 2015-12-21 at 17.01.00

Kemudian klik tombol Download Bootstrap yang paling kiri. FYI, di situ kan ada beberapa jenis file Bootstrap yang bisa didownload, untuk sementara abaikan saja dulu. Dua tombol sisanya itu merupakan pembahasan yang terpisah 😀

Setelah selesai mendownload maka kita akan mendapatkan sebuah file zip dengan nama bootstrap-3.3.6-dist.zip.

2. Ekstrak File Bootstrap

Selanjutnya ekstraklah file Bootstrap yang telah didownload tadi (bootstrap-3.3.6-dist.zip) kemudian simpan di sebuah folder tertentu. Akan muncul sebuah folder dengan nama bootstrap-3.3.6-dist dan di dalamnya ada beberapa folder lagi yaitu cssjs dan fonts. Jika file Bootstrap yang kamu download sama versinya dengan saat tulisan ini dibuat, maka kurang lebih seperti berikut isi file bootstrap-3.3.6-dist.zip yang telah diekstrak tadi.

bootstrap-3.3.6-dist/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css │ ├── bootstrap.min.css.map │ ├── bootstrap-theme.css │ ├── bootstrap-theme.css.map │ ├── bootstrap-theme.min.css │ └── bootstrap-theme.min.css.map ├── js/ │ ├── bootstrap.js │ └── bootstrap.min.js └── fonts/

├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2

3. Buatlah Sebuah File

Selanjutnya, buatlah sebuah file sebagai bahan percobaan. Misalnya dengan nama index.html, simpan file tersebut di dalam folder bootstrap-3.3.6-dist tadi, kemudian tuliskan kode berikut:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      http://a%20class=
      http://a%20class=
    <![endif]-->
  </head>
  <body>
    <div class="container">
      <h1>Hello, world!</h1>

      <p><button class="btn btn-primary btn-lg">SAMPLE BUTTON</button></p>
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Kode di atas merupakan format standar Bootstrap. Yang perlu diperhatikan adalah:

1. Pastikan link stylesheet Bootstrap mengarah pada path yang tepat dimana file CSS Bootstrap berada, relative terhadap file html yang memanggilnya.

Karena kebetulan file index.html yang kita buat berada di dalam folder bootstrap-3.3.6-dist dan di dalamnya langsung bersisi file Bootstrap, maka kita tulis css/bootstrap.min.css.

2. Pastikan juga script JavaScript Bootstrap mengarah pada path yang tepat dimana file JavaScript Bootstrap berada, relative terhadap file html yang memanggilnya.

<script src="js/bootstrap.min.js"></script>

Karena pada contoh kita, file index.html yang kita buat di dalam folder bootstrap-3.3.6-dist dan di dalamnya sudah ada file Bootstrap, maka path-nya bisa kita tulis js/bootstrap.min.js. Jika nanti kamu membuat file index.html nya tidak seperti path yang kita buat di atas nggak usah masalah, tinggal disesuaikan saja path-nya.

3. Pastikan JQuery terpanggil

Bootstrap membutuhkan JQuery agar berjalan dengan sempurna. Karena JavaScript-nya Bootstrap tidak akan bekerja jika tidak ada JQuery. So, pastikan JavaScript-nya terpanggil dengan baik. Sebagai contoh di atas, kita panggil JQuery langsung dari library-nya Google:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

Sebenernya kamu bisa juga sih memanggil JQuery-nya offline (karena mungkin aplikasi kamu tidak harus online) yaitu dengan download file JQuery-nya terlebih dahulu, itu bebas-bebas saja.

Oke, jika semuanya sudah aman, coba silahkan buka file index.html yang tadi dibuat dengan menggunakan browser. Jika tampilannya sudah seperti berikut, maka itu artinya kamu telah berhasil menginstall Bootstrap pada halaman web yang kamu buat.

Screen Shot 2015-12-21 at 17.36.04

Untuk ebook tutorial boostrap bahasa indonesia bisa dicek di https://drive.google.com/file/d/0B9DgUai4CKYSR3ZreEdLS0hGMzA/view