Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto

Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
1
Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Membangun Responsive Website dengan Twitter Bootstrap 2.0
+ PHP dan MySQL
Sopian Hadianto

2
Kata Pengantar
Assalamualaikum Wr. Wb.
Alhamdulillahirobbilalamin, segala puji bagi Allah tuhan semesta alam, zat yang
Maha mengetahui atas segala sesuatu apa yang ada di bumi dan apa yang ada di
langit. Dan syukur Alhamdulillah saya panjatkan, karena atas rahmat-Nya buku ini
dapat diselesaikan.
Buku ini saya persembahkan kepada Ayah saya semoga beliau diberi kesehatan
dan almarhum Ibu saya semoga amal ibadahnya diterima disisi Allah SWT. Amin.
Kepada kaka – kaka dan keluarga saya yang selalu mendukung saya untuk
melanjutkan kuliah. Tak lupa kepada rekan - rekan saya atas segala dukungannya,
saya ucapkan terima kasih.
Kritik dan saran terhadap buku ini akan saya terima dengan baik sebagai koreksi
membangun demi kemajuan pengembangan website programming di Indonesia.
Semoga buku ini bisa bermanfaat. Amin
Bandung, 20 Maret 2014
Sopian Hadianto

3
Daftar Isi
Kata Pengantar.......................................................................................................2
Daftar Isi.................................................................................................................3
BAB 1......................................................................................................................6
MENGENAL BOOTSTRAP ........................................................................................6
1.1. Apa itu Bootstrap ?.................................................................................6
1.2. Memulai Bootstrap ................................................................................9
1.3. Sistem Responsive Layout....................................................................21
1.4. Dasar – dasar CSS Bootstrap ................................................................34
1.5. Component/Widget Bootstrap.............................................................60
1.6. JavaScript .............................................................................................87
BAB 2..................................................................................................................103
MERANCANG DESAIN WEBSITE RESPONSIVE/FRONT END ................................103
2.1. Layout Website Company Profile/Portfolio........................................103
2.2. Halaman Index ...................................................................................104
2.2.2. Section Layanan .............................................................................119
2.2.3. Section Portfolio.............................................................................123
2.2.4. Section Blog....................................................................................126
2.2.6. Section Footer................................................................................132
BAB 3..................................................................................................................134
MEMBANGUN WEB SERVER...............................................................................134
3.1. Mengenal Web Server........................................................................134
3.2. Instalasi Webserver............................................................................134
3.3. Mengenal MySQL dan PHPMyAmin ...................................................141

4
BAB 4..................................................................................................................155
MEMBANGUN SISTEM WEBSITE DINAMIS DENGAN PHP ..................................155
4.1. Mempersiapkan Website Company Profile/Portfolio ke Web Server 155
4.2. Membangun Website dinamis dengan PHP.......................................157
4.2.1. Membuat templating website........................................................157
BAB 5..................................................................................................................176
MEMBANGUN CONTROL PANEL ADMIN/BACK END..........................................176
5.1. Konfigurasi Database yang akan digunakan .......................................176
5.2. Kerangka template halaman admin. ..................................................178
5.3. Halaman – halaman pendukung yang dibutuhkan.............................181
5.4. Menambahkan kondisi untuk variable templating.............................187
5.5. Membuat folder – folder untk setiap konten menu admin................189
5.6. Konten menu......................................................................................190
5.7. Membangun halaman login ...............................................................241
5.8. Membuat halaman logout..................................................................246
5.9. Membuat folder – folder sebagai tempat upload gambar.................247
BAB 6..................................................................................................................249
MEMBANGUN KONTEN DINAMIS TIAP SECTION DENGAN MYSQL DAN PHP.....249
6.1. Sistem templating pada index.php.....................................................249
6.2. Koneksi.php untuk konfigurasi database............................................251
6.3. Home.php untuk menampilkan section - section...............................251
6.4. Memodifikasi section dengan menambahkan konten dari database
MySQL dengan menggunakan PHP ................................................................252
6.4.2. Section Layanan .............................................................................254
6.4.3. Section Portfolio.............................................................................260

5
6.4.4. Section Blog....................................................................................266
6.4.5. Section Kontak................................................................................273
6.5. Menambahkan efek Smooth Scroll untuk mempercantik one-page
website...............................................................................................................279
6.5.1. Menambahkan jquery.min.js dan smoothscroll.js.............................279
6.5.2. Menambahkan kelas smoothScroll pada link – link menu navigasi ..280
6.5.3. Memodifikasi tag <body> pada index.php ........................................280
Referensi............................................................................................................282
Daftar Pustaka ...................................................................................................283
Tentang Penulis..................................................................................................284

6
BAB 1
MENGENAL BOOTSTRAP
1.1. Apa itu Bootstrap ?
“Sleek, intuitive, and powerful front-end framework for faster and
easier web development.”
“Sebuah Framework yang manis, intuitif dan powerfull untuk
pengembangan web yang lebih cepat dan lebih mudah”.
“By nerds, for nerds.” Dari kutu buku, untuk kutu buku.
Bootstrap adalah sebuah Framework yang dikembangkan di Twitter oleh
@mdo dan @fat, Bootstrap menggunakan LESS CSS, yang di-compile via Node,
dan dikelola melalui GitHub untuk membantu nerds membangun web yang keren.
Sekilas tentang Bootstrap Creator :
@mdo (Mark Otto) dan @fat (Jacob) adalah desainer dan programmer Twitter
yang membuat dan mengembangkan Bootstrap.
Sekilas LESS CSS:
LESS CSS
LESS adalah preprosesor CSS yang memberikan sentuhan dinamis kepada CSS
dengan fitur variabel, mixin, serta operasi dan fungsi yang dimilikinnya. Tujuan
dibuatnya LESS sendiri adalah untuk memberikan kemudahan dan keringkasan
dalam membangun tampilan website yang menggunakan CSS. Proses kompilasi
LESS menjadi CSS dapat berjalan baik di sisi klien dengan javascript maupun di sisi
server dengan bantuan Node.js dan Rhino. Berkas LESS yang memiliki format
*.less dan akan diubah menjadi file berformat CSS oleh file javascript less.js pada
sisi klien atau melalui kompilasi pada sisi server.
Sekilas Node atau Node.js :

7
Node.js adalah sebuah platform software yang dipakai untuk membangun aplikasi
– aplikasi serverside yang fleksibel di sebuah network / jaringan. Node.js
menggunakan JavaScript sebagai bahasa pemrogaman dan dapat dengan mudah
menghasilkan throughput / pemrosesan tingkat tinggi melalui non-blocking I/O.
Node.js memiliki fitur built-in HTTP server library yang menjadikannya mampu
menjadi sebuah web server tanpa bantuan software lainnya seperti Apache atau
Nginx.
Node.js pertama kali dibuat oleh Ryan Dahl pada tahun 2009 yang kemudian
berkembang pesat di bawah licensi Open Source MIT oleh sebuah perusahaan
bernama Joyent Inc.
Pada hakekatnya Node.js dikembangkan berdasarkan teknologi Google V8
JavaScript engine serta berisi kompilasi skrip inti dan banyak modul siap pakai
yang bermanfaat sehingga pengguna (dalam hal ini web developer) tidak perlu
melakukan coding dan mendesain segalanya dari awal.
Jadi, apa sebenarnya isi dari software Node.js itu? Pada dasarnya Node.js adalah
2 hal: sebuah runtime environment dan script library.
Sebuah runtime environment adalah sebuah software yang berfungsi untuk
mengeksekusi, menjalankan dan mengimplementasikan fungsi – fungsi dan cara
kerja inti dari suatu bahasa pemrograman. Contoh: Agar sebuah server bisa
mengeksekusi script PHP maka harus terlebih dulu diinstall PHP runtime
environment-nya. Mungkin anda sudah pernah dengar LAMP (Linux, Apache,
MySQL dan PHP). Begitu pula Node.js. Agar sebuah server bisa mengeksekusi
script JS, maka terlebih dahulu harus diinstall Node.js sebagai runtime
environment untuk JavaScript.
Sedangkan Script Library adalah kumpulan, kompilasi atau bank data berisi skrip /
kode – kode pemrogaman.
Sekilas GitHub:
GitHub
GitHub adalah layanan berbasis web hosting untuk proyek-proyek pengembangan
perangkat lunak yang menggunakan sistem kontrol revisi Git. GitHub menawarkan
fasilitas berbayar untuk repositori pribadi, dan akun gratis untuk proyek-proyek
open source. Pada Mei 2011, GitHub adalah situs yang paling populer untuk situs
repositori terbuka.

8
GitHub juga merupakan tempat terbaik untuk berbagi kode dengan teman-teman,
rekan kerja, teman sekelas, dan orang asing. Lebih dari dua juta orang
menggunakan GitHub untuk membangun hal-hal menakjubkan bersama-sama.
Dengan fitur kolaboratif GitHub.com, desktop dan aplikasi mobile, dan GitHub
Enterprise, belum pernah lebih mudah bagi individu dan tim untuk menulis kode
yang lebih baik, lebih cepat.
“Made for everyone”. Dibuat untuk semua orang.
Bootstrap ini dibuat tidak hanya untuk dapat terlihat luar biasa di browser desktop
saja, namun di browser tablet dan smartphone melalui responsive CSS (CSS yang
responsive, saat halaman HTML dan CSS dibuka di Browser Tablet dan
SmartPhone maka tampilannya akan menyesuaikan dengan resolusi layarnya).
“Packed with features.” Dikemas dengan banyak fitur.
12 kolom untuk grid yang responsive, lusinan komponen/widget, plugin – plugin
JavaScript, typography, form controls, dan sebuah web-based Customizer untuk
membuat Bootstrap milik kita sendiri.
Sudah banyak website yang menggunakan Bootstrap, contohnya :

9
http://soundready.fm/,http://kippt.com/, http://www.gathercontent.com/,dan
masih banyak lagi dan website saya sendiri http://www.tugaskampus.web.id
(masih dalam tahap pengembangan - under-construction) yang dibangun dengan
Bootstrap.
Persiapan sebelum menggunakan Bootstrap, minimal kita harus :
Menguasai dasar – dasar HTML, CSS (JavaScript dan LESS CSS bila diperlukan).
Kemampuan diatas mutlak diperlukan karena intinya dalam pengembangan
website berbasis Bootstrap ini adalah bagaimana kita memodifikasi HTML, CSS
serta JavaScriptnya sekreatif mungkin.
Kebutuhan Software :
Website Editor : disarankan Notepad++ atau Sublime Text 2
Browser : Google Chrome, Mozilla Firefox, IE ( diatas IE7 ) dll.
*untuk sementara cukup 2 software itu saja, karena untuk saat ini kita belum
masuk ke web dinamis dengan PHP.
Alasan kita menggunakan Bootstrap :
OpenSource, bebas untuk dikembangkan oleh siapapun. Banyak referensi desain
dari pengambang – pengembang Bootstrap lainnya.
Desain Responsive untuk Desktop, Tablet, dan Smartpone. Jadi pengembang web
hanya perlu membuat 1 buah website saja yang ketika dibuka di Desktop, Tablet,
dan Smartpone tampilannya akan luar biasa responsive berbeda dengan website
biasanya.
Bootstrap menawarkan kecepatan dan kemudahan pengembangan website.
Modifikasi desain tanpa batasan, kita dapat memanipulasi atau menambahkan
CSS dan javascript untuk mempercantik website kita.
Jadi dapat dikatakan bahwa Bootstrap ini adalah framework yang berisi kumpulan
CSS, JavaScript, Font, icon dan bagaimana cara menggunakannya dengan aturan
– aturan khas sebuah Framework.
1.2. Memulai Bootstrap
Bootstrap sendiri telah berkembang kedalam beberapa versi, sepengetahuan saya
sudah versi 3.0.3 (mungkin sudah ada versi terbarunya) namun pada kali ini saya
menggunakan Bootstrap versi 2.3.2, karena versi 2.x.x ini memiliki dokumentasi
yang lengkap dan merupakan dasar bagi versi – versi selanjutnya.

10
1. Download
Anda dapat mendownload Bootstrap versi 2.3.2 atau versi 2.x.x lainnya di Github,
https://github.com/twbs/bootstrap/ (tidak disarankan untuk mendownload versi
3.x.x ke atas karena akan sedikit berbeda dalam kode – kodenya, serta kelas –
kelas CSS yang digunakannya.
[ Dokumentasi Bootstrap versi 2.3.2 ]
2. Struktur File
bootstrap/assets
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.min.css
├── js/
│ ├── bootstrap.js
│ ├── bootstrap.min.js
└── img/
├── glyphicons-halflings.png
└── glyphicons-halflings-white.png

11
[Struktur File Bootstrap versi 2.3.2, un-compiled file ]
Bootstrap.css dan bootstrap.min.css, adalah file yang sama perbedaannya
adalah bootstrap.css adalah kode css murni yang belum di-compile
(menungkinkan kita untuk memodifikasi kode – kode css) sedangkan
bootstrap.min.css adalah kode css yang sudah di-compile (tidak memungkinkan
kita untuk memodifikasi, dengan .min ini kita dapat langsung menggunakan
Framework Bootstrap ini tanpa harus memodifikasinya).
[bootstrap.js (un-compiled) dan bootstrap.min.js (compiled)]
Sama halnya dengan bootstrap.js dan bootstrap.min.js, dan file – file css,
dan js lainnya. Selain itu bootstap juga menyediakan icon – icon glyphicons-

12
halflings.png dan glyphicons-halflings-white.png yang dapat digunakan untuk
mempercantik tampilan website dari Glyphicons Free licensed under CC BY 3.0.
[Glyphicons Free licensed under CC BY 3.0.]
Selain itu bootstap juga menyediakan JQuery, dan plugin – plugin
javascript* (membutuhkan JQuery) dan file – file tambahan lainnya.
Untuk keperluan latihan dan pemahaman lebih dalam tentang bootstap,
maka saya telah menyertakan file – file pendukung dalam CD di buku ini.
Silahkan Ekstraks bootstrap.zip yang ada di dalam CD, ke drive D atau E Anda.
3. Basic HTML Template
Untuk dapat menggunakan Bootstrap maka kita perlu untuk memasukan file – file
css, dan javascript kita ke dalam file html.
Berikut adalah contoh file html tanpa dan dengan bootstrap.
File HTML yang umum, tanpa bootstrap :
[File HTML yang umum, tanpa bootstrap]

13
File HTML dengan bootstrap :
[File HTML dengan bootstrap]
1. Bukalah Editor anda, lalu ketikan kode diatas :
2. Simpan dengan nama html-dengan-bootstrap.html di Folder Bootstrap
anda, di E:bootstrap
[Menyimpan file html]
3. Lalu buka di browser Anda.

14
[File HTML dengan bootstrap – diuji di browser]
Latihan
Buatlah folder “latihan” di dalam folder bootstrap anda.
Cara 1 :
a. Bukalah file index.html yang ada di dalam folder bootstrap/docs/index.html
di browser anda.
b. Pilihlah menu “Get Started”, lalau pilihlah submenu “Examples”

15
c. Klik salah satu template yang tersedia misalnya “Strater template”
d. Klik kanan pada area kosong, lalu pilihlah View Page Source untuk melihat
source koding dari halaman html tersebut

16
e. Lalu ketiklah koding html tersebut di editor anda, dan simpanlah di folder
latihan dengan nama latihan-1.html
(*jangan copy and paste ya, supaya ngetiknya lancar dan faham kelas – kelas
bootstrap nantinya).
f. Lalu bukalah file latihan-1.html di browser anda
Apakah tampilannya seperti gambar di atas?
Apa tampilan tersebut sangat berbeda dengan contoh?
Jika ia coba anda buka kembali file latihan-1.html di editor anda.

17
Kenapa tampilan tidak sesuai ?
Hal ini karena tag :
<link href="../../assets/css/bootstrap.css" rel="stylesheet">
Pada atribut href=”{merujuk pada folder tempat file css ataupun file javascript
yang akan digunakan berada}”
Jika kita lihat file latihan-1.html berada di folder :
E:bootstraplatihan
Dan file bootstrap.css berada di folder :
E:bootstrapassetscss
Maka karena file latihan-1.html berada di folder latihan yang berada di folder
bootstrap, dan file letihan-1.html ingin mengambil/merujuk bootstrap.css yang
ada di luar folder latihan, maka file latihan-1.html perlu keluar satu folder dengan
kode :
“ ../ ” = “keluar satu folder dari folder dimana file berada”
Lalu masuk ke folder assets -> css -> bootstrap.css,
Replace-lah “../../” dengan “ ../”

18
g. Bukalah kembali file latihan-1.html
[ Tampilan Desktop ]
Berhasilkah ?
Bagaimana menguji bahwa latihan-1.html anda juga sudah responsive ?
Cara 1 :
1. Ikuti langkah gambar di bawah ini

19
Maka tampilan responsivenya adalah sebagai berikut.

20
[ Tampilah Mobile – Tool Responsive Mozilla FireFox ]
Tools di Mozilla firefox ini cukup berguna bagi para develover website.
Atau
Cara 2 :
Kecilkanlah resolusi browser anda
[ Tampilah Mobile – mengecilkan jendela browser ]
Berhasilkah?
h. Cobalah berlatih dengan template – template lainnya dan jangan copy
paste.
NB:
../ = keluar satu folder
../../ = keluar dua folder
./ atau / atau tanpa “/” = tetap di folder yang sama, lihat contoh html-dengan-
bootstrap.html
Cara 2 :

21
b. Cara 2 hampir sama dengan cara 1, bedanya adalah pada cara dua anda
cukup membuka filenya dengan editor anda
Selanjutnya sama saja dengan cara 1, ingat jangan copas.
1.3. Sistem Responsive Layout
 Bootstrap membutuhkan HTML 5 doctype untuk disertakan di dalam setiap
file HTML nya.
<!DOCTYPE html> <!—html 5 doctype -->
<html lang="en"> <!—html language english -->
...
</html>
Apa itu Layout?
 Layout adalah suatu kerangka dasar atau suatu tempat yang nantinya dapat
menampung konten – konten dari website, biasanya sebuah layout umumnya
akan berisi : header, navigasi, konten, dan footer.
Header
Navigasi/menu
Konten utama Sub
konten/
sidebar
footer

22
layout di dalam Bootstrap mirip halnya dengan membuat layout dengan tag
<table>di html.
Contoh menggunakan tag <table>:
<table>
<tr> <!—tr = tag untuk membuat satu baris kosong -->
<td>Kolom ke-1 baris ke-1</td>
<!—td = tag untuk membuat kolom -->
</tr>
<tr> <!—tr = tag untuk membuat satu baris kosong -->
</tr>
</table>
Maka hasilnya sebagai berikut :
Kolom ke-1 baris ke-1
Kolom ke-1 baris ke-2 Kolom ke-2 baris ke-2
Selain menggunakan tag <table>dalam merancang layout, biasanya pengembang
website menggunakan tag <div> untuk merancang website, karena dianggap lebih
dinamis daripada tag <table>.
Bootstrap juga menggunakan tag <div> untuk merancang desain layout website.
Layout Bootstrap
 Default Grid System/Fixed Grid
 Live grid example
Default bootstrap grid system terdiri dari 12 kolom, jika tanpa memakai fitur
responsive maka lebar container nya menjadi 940pixel. Dengan memakai file CSS,
the Grid (maksudnya adalah baris dan kolom yang dibuat) akan beradaptasi
menjadi 724px dan 1170px tergantung dari resolusi device kita. Jika resolusi layar
dibawah 767px maka, baris dan kolom akan menjadi fluid(mengapung) dan
tertumpuk secara vertikal.

23
Bingung?
Ayo lihat ke contoh gambar.
[Layout ketika resolusi layar device lebih dari 767px]
[Layout ketika resolusi layar device kurang dari 767px]
Inilah yang dinamakan dengan responsive, sehingga kita tidak usah khawatir
konten website kita tidak akan user friendly lagi saat dibuka di device dengan layar
yang kecil.
Selain itu responsive design juga menghilangkan proses “zoom-in” pada website
saat dibuka di mobile device.

24
[Tampilan website non-responsive]
Untuk dapat melihat konten maka kita perlu melakukan zoom-in pada konten.
Hal itu lah salah satu perbedaan antara website non-responsive dengan website
responsive.
Saatnya merancang layout.
Karena kita akan menggunakan Framework Bootstrap, maka kita perlu mengikuti
aturan pemakaian kelas yang sesuai.
Aturan untuk membuat layout :
 Untuk membuat 1 baris kosong kita memakai kelas .row (nilai default dari
kelas .row adalah span12, maka jumlah kolom – kolom span* harus sama dengan
12 untuk menjaga kepersisian layout kita )
 Untuk membuat kolam kita menggunakan kelas .span* (*adalah nilai lebar
kolom mulai dari span1 - span12)
Latihan
a. Bukalah editor anda, ketikan kode berikut dan simpanlah dengan nama
Latihan-2-container-layout-sederhana.html di folder latihan anda

25
b. Coba buka di browser anda. Apakah berhasil?
Lalu kecilkan layar browser anda. Apakah tampilannya belum responsive?

26
Tentu saja, hal ini karena bootstrap juga menghendaki tampilan non-responsive,
jika kita tidak memasukan bootstrap-responsive.css.
c. Sekarang tambahkan ootstrap-responsive.css pada file latihan-2 anda.
d. Buka kembali filenya
Apakah tampilannya seperti ini? Jika yam aka anda sukses membuat layout
responsive.

27
Offsetting columns
Pindahkan kolom ke sebelah kanan dengan kelas .offset*. setiap kelas
menambahkan margin kiri sebesar nilai offsetnya.
Latihan
a. Bukalah file Latihan-2-container-layout-sederhana.html anda
b. Lalu pada bagian baris 1, gantilah kodingnya menjadi seperti ini,
c. Save as dengan nama Latihan-3-container-layout-offset.html, lalu
bukalah di browser.

28
Terlihat adanya jarak antara kolom 1 dan 2, itu karena di kolom 2 ditambahkan
kelas offset.
Nesting Columns
Untuk menjaringkan kolom di dalam kolom, kita dapat membuatnya dengan kode
sebagai berikut :
Live Fluid Grid
Fluid Grid System menggunakan persentase dari pixel untuk lebar kolomnya. Ia
memiliki kemampuan responsive sama halnya dengan default drid/fixed grid,
Fluid Grid akan memenuhi layar device jika berada diluar kelas .container.
Latihan
a. Bukalah file Latihan-3-container-layout-offset.html anda
b. Gantilah kelas .container nya menjadi kelas .row-fluid.
c. Simpanlah dengan nama Latihan-4-fluid-layout.html, lalu bukalah file
tersebut

29
Tampak bahwa, grid rapat ke sisi jendela browser atau memenuhi layar.
Responsive Design
Mengaktifkan fitur responsive
Seperti yang saya katakana sebelumnya, bahwa Bootstrap mendukung responsive
design dan juga un-respnsive design, karena itu untuk dapat menggunakannya
kita perlu memasukan .bootstrap-responsive.css di dalam tag <head>.
Akan tetapi jika kita memakai bootstrap.min.css (compiled css) maka sudah
automatis menjadi responsive.
Tentang Bootstrap yang responsive
Dengan queri – queri tertentu memungkinkan untuk men-custom CSS
berdasarkan beberapa kondisi seperti – ratios, width, display type, dll. Tetapi
biasanya difokuskan sekitar min-width dan max-width (batas minimal lebar dan
maksimalnya)

30
Responsive Bootstrap akan :
 Memodifikasi lebar dari kolom di grid
 Menumpuk element secara mengambang/float saat dibutuhkan
 Me-resize heading dan teks supaya lebih sesuai dengan device
Supported devices/Perangkat yang didukung
Bootstrap mendukung perangkat – perangkat sebagai berikut :
Responsive utility classes
Untuk mempercepat mobile-friendly development, gunakanlah kelas utility ini
untuk menampilkan dan menyembunyikan pada device. Dibawah adalah sebuah
tabel dari kelas – kelas yang tersedia dan efek – efeknya dengan label sesuai
dengan nama – nama device.

31
Kapan menggunakan kelas ini? saat kita ingin menampilkan atau
menyembunyikan konten pada sebuah device.
Berikut adalah cara menggunakannya :
a. Buatlah file html berikut

32
b. Simpanlah dengan nama Latihan-5-Responsive-Visibility-Test.html, lalu
bukalah file tersebut.
Maka tampilannya desktopnya adalah :

33
Kecilkan layar browser anda ke ukuran tablet, maka tampilan tabletnya :
Kecilkan layar browser anda ke ukuran smartphone, maka tampilan
smartphonenya:

34
Mudah bukan?
Sekarang anda dapat membuat layout apa saja dengan mudah.
1.4. Dasar – dasar CSS Bootstrap
Untuk memulai latihan dasar – dasar css, komponen css dan komponen javascript
dari bootstrap, buatlah file template html latihan berikut :

35
Simpanlah dengan nama template.html di dalam folde bbostrap anda.

36
Sebenarnya file javascript tidak usah dimasukan semua, tergantung kebutuhan.
Misalnya kita ingin membuat image slide-show kita butuh file bootstrap-
carousel.js, maka kita harus memasukan file tersebut.
Akan tetapi supaya kita tidak kerepotan dalam berlatih (file mana – mana saja
yang harus dimasukan), kita dapat memasukan semua file javascript maupun
cssnya.
A. Typography
Typography kurang lebih adalah suatu seni bagaimana menampilkan tulisan yang
indah dan enak dilihat.
Bootstrap telah mengatur style tag – tag html, agar memiliki typography yang baik.
Untuk mengefisiensikan waktu penjelasan, saya akan menjelaskan fungsi inti dan
bagaimana cara menggunakan tag – tag html dan kelas – kelas di bagian Base CSS
ini. Anda dapat mempelajari lebih jauh dengan membuka dokumentasi bootstrap
docs, dan pilih menu “Base CSS” lalu membuka source code-nya.
1. Heading : <h1> - <h6>
Tempatkan kode berikut di dalam file template.html anda.

37
Maka tampilannya seperto berikut :
Lakukan hal yang sama pada kode – kode dibawah.
2. Paragraf
<p>
<p class=”lead”>
gunakan kelas .lead untuk membuat judul pada tag <p> atau <span>.

38
3. Emphasis
<small> : tag ini untuk membuat teks kecil
4. Teks berwarna
Untuk menampilkan teks berwarna kita dapat menggunakan kelas – kelas berikut.
Pada bootstrap sudah disediakan warna – warna default yang setiap warnanya
memiliki arti masing – masing. Warna – warna ini sudah diberi nama sesuai
dengan namanya masing – masing. Biasanya nama – nama ini akan dipakai
bersamaan dengan kelas yang lain, untuk memberi arti tampilan kelas tersebut
dengan warnanya.
Daftar nama, warna dan maknanya :
Warning : kuning : sebagai tanda peringatan
Error : merah : tanda error atau aksi yang negatif
Info : biru : tanda informasi
Success : hijau : tanda keberhasilana atau aksi yang positif
Muted : abu – abu : tanda tidak aktif
Contoh penggunaanya :

39
Selain digunakan untuk teks, nama – nama warna/tanda ini ada yang digunakan
pada kelas lainnya, misalnya pada kelas btn (button), alert dll.
5. Abbreviations
<abbr> : untuk menampilkan kepanjangan dari teks, dan menampilkanya ketika
teksnya disorot.
6. Addresses
<address> : format untuk menampilkan alamat, biasanya digunakan untuk alamat
di footer

40
7. Blockquotes
<blockquote> : untuk melakukan pengutipan dari sumber yang lain, contoh dalam
mengutip pendapat orang lain di dalam artikel.

41
Secara default <blockquote> akan mengapung/float ke sebelah kiri, untuk
menampilkannya mengapung di sebelah kanan gunakan kelas .pull-right.
8. List
a. Unordered : daftar/list dari item tanpa nilai (angka, huruf, dll)

42
b. Ordered : daftar/list dari item dengan nilai (angka, huruf, dll)
Untuk menonatifkan angka/symbol dari list, gunakanlah kelas .unstyled didalam
tag <ul>/<ol> nya.
B. Code
Untuk menampilkan tag – tag kode html anda di dalam halaman html anda,
gunakanlah tag <code>

43
C. Tables
Sama seperti membuat tabel html biasa, namun gunakanlah kelas .table untuk
menampilkan tabel dengan style bootstrap.
[Default Table]
Style lain untuk table, anda dapat menambahkan kelas – kelas style lain untuk tag
<table> sebagai berikut :
[ .table-striped ]
Karena kelas .table-striped adalah subkelas dari kelas .table, maka untuk
menggunakannya kita harus menyertakan kelas .table terlebih dahulu.

44
[ .table-bordered ] tabel dengan border
[ .table-hover ] baris akan berubah warna ketika disorot.
Kelas baris/row opsional lainnya :

45
Dengan menyertakan kelas – kelas warna diatas di dalam tag – tag table maka
akan mewarnai tabel tersebut.
D. Forms
Seperti yang kita tahu bahwa Form adalah salah satu media untuk
mengndapatkan inputan dari user, desain form yang userfriendly harus menjadi
acuan utama dalam pembuatan form.
a. Default Style

46
Ket. :
o <legend> = untuk nama dari Form
o <label> = untuk label dari media inputan (textbox, radio, checkbox dll)
o .help-block = tempat untuk menempatkan informasi tambahan bagaimana
cara mengisi form dengan benar
b. Optional layouts
Bootstrap telah menyediakan beberapa pilihan layout form tentang beberapa
kasus desain form yang sering kita temui.
o Search Form
Form untuk melakukan pencarian.

47
Ket. :
.input-medium = ukuran dari inputan, bootstrap menyediakan berbagai ukuran
untuk inputan.
o Inline Form
Form ini menempatkan semua komponen form ke dalam satu baris saja, bisanya
digunakan untuk form login, pencarian dll.
o Horizontal form
Digunakan untuk membuat tampilan komponen – komponen form tertata dengan
rapi.

48
Ket. :
.form-horizontal = letakan di dalam tag <form>
.control-group= menyatukan label dan inputan dalam satu baris
.control-label = kelas untuk tag <label>
.controls = kelas untuk tag – tag inputan
Placeholder = menampilkan teks buram di dalam inputan

49
c. Inputan form yang didukung (Supported form controls)
Inputan – inputan dalam form yang didukung bootstrap.
o Input
Untuk menampung data karakter yang sedikit.
o Textarea
Untuk menampung data karakter yang banyak atau menampung suatu teks artikel.
o Checkbox dan radio
Checkbox biasanya digunakan untuk memberikan beberapa pilihan yang dapat
diinputkan.
Contohnya checkbox “hobi”, kita dapat mem
Radio biasanya digunakan untuk memberikan hanya satu pilihan yang dapat
diinputkan dari beberapa pilihan yang tersedia.
Ket. :
Biasanya nama kelas – kelas inputan akan sama dengan nama tag htmlnya dan
diletakan di dalam tag <label>, karena inputan selalu berdampingan dengan label
keterangannya.

50
o Select
Select atau combo box, inputan untuk memasukan hanya satu inputan dari
beberapa pilihan yang tersedia, contohnya combobox “agama”, kita hanya boleh
memilih satu agama saja dari banyak agama yang tersedia.
d. Style Inputan yang lain.
o Prepended and appended inputs
Style ini biasanya digunakan untuk memberikan keterangan pada textbox,
sebelum dan sesudah textbox.

51
o Button instead of text
Style ini menyatukan button dengan textbox.
o Button Dropdown

52
Daftar submenu ditempatkan di antara tag <li>.
e. Control Sizing/Ukuran untuk inputan/komponen form
Gunakanlah relative sizing (ukuran yang tetap) seperti kelas .input-large atau
cocokan ukuran inputan anda dengan ukuran grid/layout kelas .span.
o Block Level Inputs
Ukuran inputan akan menyesuaikan secara penuh pada ukuran grid/layout.
o Relative Sizing (ukuran yang relative/tetap)

53
o Grid sizing

54
f. Uneditable inputs
Untuk inputan yang tidak dapat di edit.
g. Form Actions
Button untuk mengeksekusi data inputan dari form.

55
h. Validation states
Bootstrap menyertakan style validasi untuk pesan error, warning, info dan success,
style ini berguna untuk memberitahukan kepada user tentang status inputan yang
ia berikan.

56
E. Buttons
a. Default Button
Button style ini dapat kita gunakan dengan mengaplikasikan kelas .btn, kelas ini
paling baik dikombinasikan dengan tag <a> atau <button>.
Berikut adalah daftar button – button yang dapat kita gunakan :
Setiap style button memiliki arti yang hampir sama dengan style text warna,
disesuaikan dengan warnanya.
b. Button Size
Ukuran button dapat disesuaikan dengan menggunakan kelas .btn-large, .btn-
small, .btn-mini.

57
c. Disable state
Me-nonaktifkan button.
F. Images
Kita dapat menggunakan kelas berikut untuk memanupulasi style gambar kita,
style sudut tumpul, lingkaran dan efek kamera polaroid.

58
G. Icons by Glyphicons
Bootstrap bekerja sama dengan Glyphicon.com untuk menyediakan icon gratisan
yang dapat kita gunakan secara bebas.
Tersedia 140 icon dengan warna hitam dan putih, berikut adalah sebagian dari
icon – icon tersebut :

59
Untuk menggunakannya kita membutuhkan tag <i>, didalam tag <i> inilah kita
dapat memasukan nama kelasnya.
Icon ini dapat dikombinasikan dengan button, dan element – element html yang
lain.
<i class="icon-search"></i>
Untuk icon warna hitam.
<i class="icon-search icon-white"></i>
Untuk icon warna hitam
a. Icon in Button

60
Kita dapat menempatkan icon seperti kita menempatkan teks, datau digabung
dengan teks.
1.5. Component/Widget Bootstrap
A. Button groups
Digunakan untuk mengelompokan button.
B. Button dropdowns
Memberikan dropdown menu/submenu pada sebuah button.

61
a. Split button dropdown
style lain dari button dropdown diatas, yaitu menyisipkan satu buah button
tambahan sebagai tombol pembuka dropdown menu.
C. Navs
Navs adalah pilihan navigasi untuk menu yang disediakan oleh bootstrap, yaitu
tabs, pills dan list. Untuk mendapatkan komponen ini kita hanya perlu
menyisipkan kelasnya di dalam tag <ul>, berikut cara penggunaannya.
a. Basic tabs
Style komponen ini berisi daftar tab/tabulasi.

62
b. Basic pill
c. Stacked tabs
Tab vertical yang terpasang secara menumpuk, style ini cocok untuk
sidebar/menu kiri/kanan.

63
d. Stacked pills
e. Tabs with dropdown
Menambahkan dropdown pada navigasi menu.
f. Nav List/sidebar
Komponen ini dapat digunakan sebagai sidebar.

64
g. Tabbable nav
tab nav yang memiliki kontennya/sectionnya masing – masing.

65
Saat kita memilih tab Section 2, maka konten akan berubah ke tag <div> yang
memiliki id “tab2”.
h. Tabbable on left
Selain style diatas ada pula kelas align lainnya yaitu, .tabs-below, .tabs-left, .tabs-
right.

66
D. Navbar
Navbar itu dapat dikatakan sebagai menu bar, yakni berisi daftar menu - menu
utama di dalam website kita menu – menu tersebut seperti home, profil, kontak
dll.
Pada mulanya navbar itu static (atau posisinya tidak menetap ketika layar kita
scroll ke bawah/not fixed to the top).

67
Komponen - komponen dari navbar yaitu sebagai berikut :
a. Brand
Kelas .brand ini digunakan sebagai judul atau nama website.
b. Nav links
Menambahkan item menu melalui tag <li> pada tag <ul>, disini kita dapat
menambahkan menu – menu utama dari website.

68
Kelas .active menunjukan bahwa halaman yang sedang terbuka adalah halaman
menu tersebut.
Kita dapat menambahkan pemisah/divider antar menu, dengan menambahkan
kelas .divider-vertical di dalam setiap tag <li>.
Terlihat ada pemisah antar link menu pada navbar diatas.
c. Form
Selain memasukan menu pada navbar, kita juga dapat memasukan komponen
form.
Tag <form> dapat sebelum tag <ul> atau pun setelah tag </ul>, dengan
menempatkan kelas .navbar-form.

69
Kelas .pull-left, dimaksudkan untuk menempatkan form ke sisi kiri navbar,
atau .pull-right ke sisi kanan navbar.
d. Optional display variations
Variasi pilihan display navbar yang lain.
o Fixed to top
Navbar akan ditempatkan menetap di atas layar, ketika layar digulung kebawah.
Untuk menggunakan kelas ini, kita harus menambahkan style padding minimal
40px di dalam tag body, misalnya <body> di file bootstrap.css anda.

70
o Fixed to bottom
Navbar akan ditempatkan menetap di bawah layar.
o Static top navbar
Buatlah full-width navbar yang akan tergulung bersama halaman dengan
menambahkan .navbar-static-top.
e. Responsive Navbar
Responsive navbar dapat dibuat dengan mengaplikasikan komponen – komponen
diatas.

71
Desktop view
Tablet/Smartphone view

72
Inverse style (Navbar hitam)
Kelas .navbar-inverse dapat digunakan dengan menempatkannya setelah
kelas .navbar.
E. Breadcumbs
Breadcumbs biasanya digunakan untuk menampilkan history dari link – link yang
berhubungan secara struktur link yang telah dan sedang dibuka.

73
F. Pagination
Pagination digunakan untuk penomoran/penandaan halaman.
o Size
Untuk menentukan ukuran pagination kita dapat menempatkan kelas – kelas
berikut setelah kleas .pagination, kelas – kelas : .pagination-large, .pagination-
small, atau .pagination-mini.
o Aligment
Untuk menentukan arah pagination kita dapat menempatkan kelas – kelas berikut
setelah kleas .pagination, kelas – kelas : .pagination-centered dan .pagination-
right.
 Pager

74
Penanda halaman lainnya.
Aigned links
G. Labels and badges
a. Labels

75
b. Badges
H. Typography
a. Hero Unit
Hero unit salah satu typography yang mungkin anda dapat menggunakannya.

76
b. Page header
Kelas ini dapat digunakan untuk membuat teks header.
I. Thumbnail
Thumbnail dari Bootstrap dapat digunakan untuk membuat galeri, foto profil dll.
a. Default thumbnails

77
Maksud dari data-src=”holder.js/260x180” adalah untuk memampilkan data
dumy untuk image dengan ukuran tersebut.
b. Highly customizable
Kita dapat mengkombinasikan kelas .thumbnail dengan kelas – kelas lain.

78
J. Alerts
Alert biasanya digunakan untuk memberikan pemberitahuan kepada user, setelah
user melakukan suatu aksi tertentu.
a. Defalut alert

79
Untuk pesan yang lebih banyak tambahan kelas .alert-block setelah
kelas .alert.
b. Alert Error atau danger
c. Alert Success

80
d. Alert Information
K. Progress bars
Progress bar ini biasanya digunakan untuk proses loading, redirecting, atau pun
status dari aksi yang kita lakukan.
Progress bar akan bekerja dari width 0% - 100%.
a. Basic / Progress bar dasar
b. Striped / Bergaris
c. Animated
Untuk mengaktifkesan animasi dari progress bar, kita dapat menambahkan
kelas .active setelah kelas .progress-striped

81
d. Stacked / Progress bar warna – warni yang tertumpuk
e. Striped color bars
,

82
Browser support, progress bar menggunakan CSS3 gradient,s transisi, dan animasi
untuk menerapakan efek – efeknya. Fitur ini tidak didukung oleh Internet Explorer
9 kebawah dan Firefox versi lama.
L. Media object
Abstraksi dari style object untuk membangun variasi dari macam – macam
komponen (seperti komentar blog, Tweets dll) fitur ini memiliki gambar dan text
yang dapat align-nya dapat di kiri maupun di kanan.
a. Default example
Default media mengijinkan mengambangkan (float) media objeck (image, video,
audio) ke kiri atau ke kanan.

83
b. Media list
Dengan tambahan ekstra tag/markup, kita bisa menggunakan media di dalam list/
tag <li> (berguna untuk threads komentar atau daftar artikel).

84

85
M. Miscellaneous/Lain – lain
a. Wells
Gunakan kelas .well untuk memberikan effect isian (inset effect) pada grid.

86
b. Helper classes/ kelas – kelas pembantu
Berikut adalah kelas – kelas pembantu yang biasanya sangat berguna untuk
digunakan.
.pull-left
Men-float element ke sisi kiri
.pull-right
Men-float element ke sisi kanan
.muted
Mengganti warna element/komponen dengan warna #999

87
.clearfix
Clear/bersihkan float style dari elemen/komponen
1.6. JavaScript
A. Transitions
Bootstrap-transition.js
Untuk efek transisi sederhana, masukanlah Bootstrap-transition.js
Diantara file js (javascript) lainnya. Akan tetapi jika kita menggunakan bootstrap.js
yang di-compile ataupun yang tidak di-compile kita tidak perlu memasukan file js
ini karena sudah ada di file bootstrap.js.
Contoh kasus penggunaan transisi
o Sliding (menampilkan) atau fading (menyembunyikan) di dalam modal
o Fading out tab – tab
o Fading out alert
o Sliding carousel/sliding image slide show
B. Modal
Modal itu seperti prompt dialog/kotak dialog yang akan muncul ketika button atau
tombol modalnya di klik.
a. Live modal
Untuk membuat modal kita membutuhkan elamen <div> yang akan dijadikan
tempat dialog box dan tombol atau link untuk mengaktifkannya.

88
Tampilan kode diatas adalah tombol di bawah.
Ketika tombol diklik maka akan muncul modal dialod/kotak dialog berikut.

89
C. Dropdown
Dropdown dengan javascript hampir sama dengan dropdown dengan CSS
sebelumnya, hana berbeda dari kodenya saja.

90
D. Scrollspy
bootstrap-scrollspy.js
Plugin ScrollSp ini akan merubah otomatis nav targets berdasarkan posisi dari
scroll. Untuk lebih jelas mari kita lihat gambar berikut :
Pada saat area belum digulung, maka area akan seperti berikut :

91
Dapat kita lihat pula bahwa, nav target ada pada target “#fat”.
Dan ketika layar digulung kea rah teks “@mdo”, maka area akan seperti berikut :
Dapat kita lihat pula bahwa, nav target ada pada target “#mdo”.
Untuk lebih memahami ScrollSpy, silahkan buatlah dengan kode berikut :

92
E. Tab
bootstrap-tab.js

93
Ketika tab profile diklik maka tab profile akan terbuka secara automatis.
Untuk membuat tab diatas, silahkan ketikan kode berikut.

94
F. Tooltip
bootstrap-tooltip.js
Tooltip biasanya digunakan untuk menampilkan keterangan tambahan dari
sebuah teks, button,dll.

95
G. Popover
Popover hampir sama dengan tooltip, dengan style yang sangat berbeda.

96
H. Alert
bootstrap-alert.js

97
I. Button
bootstrap-button.js
Lakukan lebih dengan button dengan javascript.
a. Stateful
Digunakan untuk menyatakan status, misalnya status data yang sedang di-load.
Button ketika belum diklik
Button setelah diklik.
b. Single toggle

98
Tombol ini dapat digunakan sebagai tombol yang dapat ditekan secara menetap,
contohnya untuk menyalakan atau mematikan sesuatu.
Button sebelum ditekan.
Button setelah ditekan.
c. Checkbox button
Dengan button kita dapat juga membuat checkbox.
Button dapat dipilih lebih dari satu.

99
d. Radio button
Dengan button kita dapat juga membuat radio.
Button yang dapat dipilih hanya boleh satu.
J. Collapse
bootstrap-collapse.js, juga membutuhkan plugin transitions.
Accordion ini konsepnya mirip dengan tab, untuk lebih memperjelas mari lihat
gambar berikut.
Tampilan awal

100
Ketika diklik item #2 maka akan berubah menjadi seperti berikut.

101
K. Carousel
Carousel adalah slideshow gambar yang akan berganti secara automatis (dalam
beberapa detik) atau pun dengan mengklik gambar tersebut.

102

103
BAB 2
MERANCANG DESAIN WEBSITE RESPONSIVE/FRONT END
Untuk merancang tampilan website responsive dengan bootstrap ini, kita
kan menggunakan konsep one-page template, maksudnya adalah semua konten
yang ada dalam website ini akan ditampilkan dalam satu halaman html saja
(halaman index).
Jadi nantinya akan ada beberapa bagian (section) untuk konten – konten
utama, yang akan disusun berbaris kebawah, sehingga saat menu konten dipilih
maka halaman akan secara otomatis tergulung ke section konten tersebut.
Template seperti ini sangat cocok digunakan untuk company profile atau
pun portfolio, hal ini karena website seperti ini memiliki konten yang sedikit
sehingga template simple yang seperti ini cukup baik untuk dipakai.
Untuk lebih jelasnya anda dapat membuka, file contoh-website-one-
page.html yang ada di folder “contoh-website-one-page”.
2.1. Layout Website Company Profile/Portfolio
Berikut adalah desain layout website yang akan anda buat.

104
2.2. Halaman Index
Pertama kita akan membuat desain layoutnya terlebih dahulu, setelah itu kita
akan mengisi konten – konten pada layout tersebut.
Silahkan buatlah rancangan layout di bawah ini :

<!DOCTYPE html>

105
<html>
<head>


<title>Proyek-Web-Portfolio</title>

<link rel="apple-touch-icon-precomposed" sizes="144x144"
href="./assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed"
<link rel="shortcut icon" href="./assets/ico/favicon.png">

<meta name="viewport" content="width=device-width, initial-scale=1.0">




<link href="./assets/css/bootstrap.css" rel="stylesheet" media="screen">

<link href="./assets/css/main.css" rel="stylesheet" media="screen">

<link href="./assets/css/bootstrap-responsive.css"
rel="stylesheet" media="screen">

106
<link href="./assets/css/docs.css" rel="stylesheet" media="screen">
</head>


<script src="./assets/js/jquery.js"></script>
<script src="./assets/js/bootstrap-transition.js"></script>
<script src="./assets/js/bootstrap-alert.js"></script>
<script src="./assets/js/bootstrap-modal.js"></script>
<script src="./assets/js/bootstrap-dropdown.js"></script>
<script src="./assets/js/bootstrap-scrollspy.js"></script>
<script src="./assets/js/bootstrap-tab.js"></script>
<script src="./assets/js/bootstrap-tooltip.js"></script>
<script src="./assets/js/bootstrap-popover.js"></script>
<script src="./assets/js/bootstrap-button.js"></script>
<script src="./assets/js/bootstrap-collapse.js"></script>
<script src="./assets/js/bootstrap-carousel.js"></script>
<script src="./assets/js/bootstrap-typeahead.js"></script>
<script src="./assets/js/holder/holder.js"></script>
<script src="./assets/js/google-code-prettify/prettify.js"></script>
<script src="./assets/js/application.js"></script>

</body>
</html>
Simpanlah dengan nama index.html di folder “proyek-web-portfolio”.
Kita sudah memiliki kerangka webnya, sekarang kita akan membuat layout dasar
sesuai dengan gambar rancangan di atas.

107
Silahkan tambahkan kode berikut setelah di dalam tag <body>.

<div class="row-fluid" id="section-index">

<div class="row-fluid" id="section-beranda">

<div class="row-fluid" id="section-navigasi">
</div>

<div class='row-fluid' id='section-slide-show'>
</div>
</div>


<div class='row-fluid' id='section-layanan'>

<div class='row-fluid bg-gray'>
</div>

</div>

<div class="row-fluid" id="section-portfolio">

<div class="row-fluid ">
</div>

</div>


<div class="row-fluid" id="section-blog">

108
<div class="row-fluid">
</div>

</div>


<div class="row-fluid" id="section-kontak">

<div class="row-fluid bg-gray'">
</div>

</div>


<div class="row-fluid" id="section-footer">

<div class="row-fluid">
</div>

</div>

</div>
atribut “id” pada tag <div> digunakan sebagai tanda pengenal section (bagian) di
dalam halaman html.
Selanjutnya kita akan membuat konten - konten yang akan kita masukan ke dalam
section – section di layout web kita.
2.2.1. Section Beranda
Pada section beranda ini akan ditampilkan konten navigasi (menu bar) dan image
slide-show.
2.2.1.1. Section Navigasi
Tambahkan kode berikut di dalam tag <div> yang memiliki id=”section-navigasi”.
<div class="row-fluid" id="section-navigasi">

109
<div class="navbar navbar-inverse navbar-fixed-top" id="home"
style="position:fixed;">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-
toggle="collapse" data-target=".nav-collapse">
<img src="./assets/img/toggle.png" alt=""
width="25px">
</button>
<span>
<a class="brand" href="index.php">
   
<img src="./assets/img/toggle.png" alt=""
width="25px">
Portfolio
</a>
</span>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="">
<a href="index.php#section-index">Beranda</a>
</li>
<li class="">
<a href="index.php#section-layanan">Layanan</a>
</li>
<li class="">
<a href="index.php#section-portfolio">Portfolio</a>
</li>
<li class="">
<a href="index.php#section-blog">Blog</a>
</li>
<li class="">
<a href="index.php#section-kontak">Kontak</a>
</li>
</ul>
</div>
</div>
</div>
</div>

110
</div>
Penjelasan berdasarkan nomor :
40-42
membuat navbar fixed, agar posisisnya menetap di atas layar.
46-49
membuat toggle button untuk menampilkan menu pada tampilan mobile.
52-55
menampilkan icon logo web dan nama web.
58-64
membuat menu bar, yaitu Beranda, Layanan, Portfolio, Blog dan Kontak.
Coba lihat nomor 59 ada link index.html, artinya ketika tombol Beranda ditekan
maka halaman akan membuka halaman index.html. Lalu coba lihat baris
dibawahnya, ada link index.html#section-layanan. Link tersebut ketika diklik maka
halaman akan menuju ke tag html yang memiliki id=”section-layanan”.
<div class='row-fluid' id='section-layanan'>

Simpanlah, lalu bukalah di browser anda.
Coba anda buka file index.html dengan tampilan mobile responsivenya, hal ini
penting dilakukan untuk memastikan kesesuaian desain desktop dan mobile.

111
Ternyata ketika melihat bahwa judul website dan button toggle tampak masuk ke
sisi kiri dan kanan, kita perlu untuk memperbaikinya. Tampilan error ini terjadi
karena kita memasukan style-inline (style yang ada di dalam halaman html) secara
langsung, yaitu style=”position:fixed;”. Alasan kita memasukan style ini karena,
tanpa style tambahan ini maka navbar dalam tampilan mobile posisinya tidak akan
fixed/tetap.
<div class="navbar navbar-inverse navbar-fixed-top" id="home"
style="position:fixed;">
Kita dapat memanupulasi tampilan icon logo dan judul dengan menambahkan
spasi kosong sebelum icon logo.
<a class="brand" href="index.php">
   
<img src="./assets/img/toggle.png" alt="" width="25px">
Portfolio
</a>
Silahkan reload file index.html anda.

112
Sekarang kita akan memanipulasi tampilan toggle buttonnya, untuk kasus yang
satu ini kita akan memanipulasi tampilannya dengan memanipulasi kelas
bootstrapnya di file main.css. Untuk memodifikasi suatu objek/element kita dapat
melihat kelas dari objek tersebut lalu mengubah atribut – atribut kelas tersebut
ataupun dengan menambahkan kelas baru.
Sekarang buatlah file main.css, di folder css bootstrap anda.
Lalu ketikan kode berikut.
/* main.css */
/* navbar */
.navbar-inverse .btn-navbar {
margin-right:20px;
}
/* navbar */
Lalu bukalah lagi index.html tersebut.
Tampak tampilah sudah lebih baik dari sebelumnya, anda dapat memanipulasi
langsung kelas di atas di file bootstrap.css nya, namun lebih baik kita

113
memodofikasi kelas tersebut di file css yang lain, supaya tidak mengubah file asli
bootstrap.css.
Tampak juga bahwa tampilan dropdown menunya tidak mepet ke sebelah kiri
atau tidak memiliki padding, coba anda lihat menu – menu tersebut berada di
kelas apa.
<ul class="nav">
<li class="">
<a href="index.php#section-index">Beranda</a>
</li>
<li class="">
<a href="index.php#section-layanan">Layanan</a>
</li>
<li class="">
<a href="index.php#section-portfolio">Portfolio</a>
</li>
<li class="">
<a href="index.php#section-blog">Blog</a>
</li>
<li class="">
<a href="index.php#section-kontak">Kontak</a>
</li>
</ul>
Ternyata menu – menu tersebut berada di kelas .nav.
Sekarang kita buka lagi file main.css nya, lalu modifikasilah kelas .nav dengan
menambahkan atribut padding, seperti berikut :
/* main.css */
/* navbar */
margin-right:20px;
}
.nav{
Padding-left:30px;
}
/* navbar */
Coba bukalah file index.html anda lagi.

114
Jika kita lihat menu sudah memiliki padding, namun ketika menu di sorot/hover,
ternyata style hover tidak memenuhi layar. Kenapa?
Coba anda cari kelas .nav di file bootstrap.css anda.
Jika kita lihat lagi ternyata, teks menu ini ada di dalam tag <li>. Karena tag <li>
berada di tag <ul> yang memiliki kelas .nav, maka untuk memberikan jarak antara
layar dan menu kita dapat menambahkan margin pada kelas .nav yang merujuk
ke tag <li>. Silahkan editlah kode yang tadi dengan kode berikut.
/* main.css */
/* navbar */
margin-right:20px;
}
.nav >li{
margin-left:10px;
}
/* navbar */

115
Coba buka lagi file index.html anda.
Sekarang tampilan menu hover nya sudah memenuhi layar.
Sebenarnya untuk melakukan modifikasi style pada bootstrap.css itu tergantung
dari daya kreatifitas anda, anda dapat melakukan modifikasi kelas – kelas
bootstrap sesuai selera anda. Saya sarankan untuk banyak – banyak berlatih atau
istilah lainnya “ngulik” kode – kode html, css, javascript dan lain – lain. Terkadang
kita dapat langsung memodifikasi langsung di file bootstrap.css, tergantung
dengan kebutuhan.
Sekarang kita akan memperbesar ukuran navigasi, tambahakanlah koding berikut
pada main.css anda.
.navbar-inner {
padding-bottom:5px;
padding-top:5px;
}
2.2.1.2. Section Slide Show
Efek animasi akan mempercantik tampilan suatu web, sekarang kita akan
menambahkan slide show pada section-slide-show.
Bukalah index.html anda, lalu tambahkan koding berikut.
<div class='row-fluid' id='section-slide-show'>
<div id='myCarousel' class='carousel slide'>
<div class='carousel-inner'>
<div class='item active'>
<img src='../assets/img/examples/slide-01.jpg'
alt='Mobile Application' width='100%'>

116
<div class='container'>
<div class='carousel-caption'>
<h2>Mobile Application</h2>
<p class='lead'>Mobile Application
</p>
</div>
</div>
</div>
<div class='item '>
<img src='../assets/img/examples/slide-02.jpg'
alt='Mobile Application' width='100%'>
<div class='container'>
<div class='carousel-caption'>
<h2>Mobile Application</h2>
<p class='lead'>Mobile Application
</p>
</div>
</div>
</div>
</div>
<a class='left carousel-control' href='#myCarousel'
data-slide='prev'>&lsaquo;</a>
<a class='right carousel-control' href='#myCarousel'
data-slide='next'>&rsaquo;</a>
</div>
</div>
Maka tampilannya seperti berikut :

117
Dalam hitungan beberapa detik slide-show nya akan merubah (gambarnya akan
berganti).
Sekarang kita akan memodifikasi tampilan slide-shownya supaya lebih menarik.

118
Maka tampilan modifikasinya seperti berikut :

119
Memberi warna latar (background pada tag <body>) dan menetapkan warna
default untuk teks.
2.2.2. Section Layanan
Pada section-layanan ini, akan ditampilkan daftar layanan – layanan (produk) yang
ditawarkan oleh perusahaan.
Silahkan ketiklah kode di bawah di dalam section-layanan.

120
Sekarang kita akan membuat kelas baru, kelas .section-1. Kelas ini digunakan
untuk membedakan dan sebagai pemisah antar section – section.
Bukalah file main.css anda dan ketikan kodo berikut.

121
Lalu kita akan memberikan efek tranparant pada image ketika image disorot
(hover)
Selanjutnya kita akan memberikan efek transisis (-webkit-transition) dan border
radius (untuk membulatkan sisi – sisi image)
Tampilan section-layanan.

122
Tampilan gambar setelah disorot.
[Section Layanan]
[Section Layanan]

123
Warna gambar terlihat lebih transparan dan bentuknya menjadi bulat.
2.2.3. Section Portfolio
Section portfolio ini digunakan untuk menampilkan portfolio dari perusahan,
portfolio ini adalah produk perusahaan yang sudah dipakai oleh pelanggan.
Misalnya di section portfolio perusahaan menampilkan jasa pembuatan website
maka di portfolio ini ditampilkan website pelanggan yang dibuat oleh perusahaan.
Tambahkan kelas .bg-black seperti kode berikut.
Kita akan membuat kelas .section-2, style kelas ini akan berbeda dengan
kelas .section-1.
Ketikanlah kode berikut di dalam section-porfolio untuk membuat konten section-
porfolio.

124

125
Tampilan section-porfolionya seperti berikut.

126
[Section Portfolio]
2.2.4. Section Blog
Halaman Blog biasanya digunakan untuk menyampaikan informasi/artikel/berita
baik kabar dari perusahaan maupun dari luar.
Ketiklah kode berikut untuk membuat konten section blog.

127
Selanjutnya kita buat modifikasi kelas .img-rounded untuk merubah style-nya.

128
Tampilan section blog.
Untuk mengisi section-blog anda dapat menambahkan konten lagi di bawah
konten sebelumnya.
Sehingga tampilannya seperti berikut.

129
Anda juga dapat menambahkan konten lagi pada section-layanan supaya terlihat
memenuhi layar.

130
2.2.5. Section Kontak
Section kontak biasanya digunakan sebagai sarana untuk melakukan komunikasi
dengan pelanggan atau pengunjung website, biasanya akan ditampilkan informasi
perusahaan, kontak sosial media perusahaan, dan buku tamu, dan lain – lain.
Berikut kode untuk membuat konten section-kontak.

131
Sekarang buatlah kelas .section-3.
Tampilan section-kontak.

132
2.2.6. Section Footer
Section ini biasana berisi copyright website, tahun pembuatan dan
pengembangan, perusahaan/orang yang membuatnya dll.
Untuk mengisi konten ini kita hanya cukup menambahkan teks sederhana saja.
Ketikanlah kode berikut pada section-footer.

133
Sekarang kita buat kelas baru, kelas .bg-black-2 dan kelas .section-4.
Tampilannya sebagai berikut.

134
BAB 3
MEMBANGUN WEB SERVER
3.1. Mengenal Web Server
Web Server adalah sebuah perangkat lunak server yang berfungsi untuk
menerima permintaan HTTP atau HTTPS dari klien yang dikenal dengan web
browser dan mengirimkan kembali hasilnya dalam bentuk halaman - halaman
web yang umumnya berbentuk dokumen HTML. Web Server yang terkenal adalah
Apache dan Microsoft Internet Information Service (IIS).
Apache ( Server HTTP Apache atau Server Web/WWW Apache) adalah web server
yang dapat dijalankan di berbagai Sistem Operasi yang beruna untuk melayani
dan memfungsikan situs web. Protocol yang digunakan untuk melayani fasilitas
web ini adalah menggunakan HTTP. Dengan Apache anda dapa membangun
server web pribadi untuk pengembangan web.
Setelah anda memahami apa iti web server beserta fungsinya. Tahap selanjutnya
anda akan belajar bagaimana cara membangun web server local pada computer
anda sendiri
Dikarenakan situs web yang akan anda buat menggunakan script PHP
(PHP:Hypertext Preprocessor). Maka web sever yang digunakan adalah Apache
web server.
Kalli ini kita akan menggunakan web server Xampp salah satu Apache Friends yang
memiliki fitur yang lengkap dalam pengembangan website. Xampp juga ini open
source dan dapat di download secara bebas di alamat :
htttp://www.apachefriends.org .
3.2. Instalasi Webserver
Jika anda sudah memilikinya, anda dapat melakukan instalasi dengan langkah –
langkah sebagai berikut :
1. Jalankan file xampp-win32-1.7.3 (atau versi lainnya).

135
2. Setting directory tempat file xampp akan diinstal.
Misalnya di directory D, lebih baik tidak di directory C (OS) untuk menghindari
sesuatu yang tidak diinginkan misalnya ketika computer kita di uninstall, data
di folder xampp akan hilang semua.
3. Klik install

136
4. Tekan enter untuk menambahkan shortcut Xampp di desktop
5. Enter [y] untuk membiarkan Xampp me-relocate ulang directory

137
6. Enter [n], untuk tidak mengaktifkan fasilitas portable Xampp.
7. Enter, untk melanjutkan instalasi

138
8. Enter, Xampp mengatur timezone pada file php.ini, anda dapat mengubah
timezone disana
9. Ketikan ‘ x ’ untuk keluar dari Xampp, lalu tekan Enter. Sekarang anda telah
menyelesaikan instalasi

139
10. Sampai tahap ini anda sudah berhasil menginstal XAMPP, artinya anda sudah
menginstal semua paket softwarenya yaitu, Apache, PHP dan MySQL.
Selanjutnya kita akan menjalankan servicenya.
11. Jalankan XAMPP Control Panel yang ada di desktop.
12. Start Apache untuk memulai menjalankan Xampp.

140
13. Buka web browser anda, lalu ketikan http://localhost. Jika tampilannya
seperti di bawah ini, maka Xampp anda sudah terinstal dengan benar.

141
Instalasi web server xampp telah berhasil.
3.3. Mengenal MySQL dan PHPMyAmin
Sebelumnya pernah dikatakan bahwa Xampp ini memili fasilitas sepert Apache
web server, MySQL dan phpMyAdmin dll.
MySQL adalah Sebuah program database server yang mampu menerima dan
mengirimkan data dengan cepat, multi user serta menggunakan perintah dasar
SQL ( Structured Query Language ).
MySQL merupakan dua bentuk lisensi, yaitu FreeSoftware dan Shareware. MySQL
yang biasa kita gunakan adalah MySQL FreeSoftware yang berada dibawah Lisensi
GNU/GPL ( General Public License ).

142
MySQL Merupakan sebuah database server yang free, artinya kita bebas
menggunakan database ini untuk keperluan pribadi atau usaha tanpa harus
membeli atau membayar lisensinya. MySQL pertama kali dirintis oleh seorang
programmer database bernama Michael Widenius . Selain database server,
MySQl juga merupakan program yang dapat mengakses suatu database MySQL
yang berposisi sebagai Server, yang berarti program kita berposisi sebagai Client.
Jadi MySQL adalah sebuah database yang dapat digunakan sebagai Client mupun
server.
Database MySQL merupakan suatu perangkat lunak database yang berbentuk
database relasional atau disebut Relational Database Management System
( RDBMS ) yang menggunakan suatu bahasa permintaan yang bernama SQL
(Structured Query Language ).
Logo MySQL
Sedangkan PHPMYADMIN adalah database admin panel yang ada pada web server.
Fungsinya adalah sebagai pengendali dan alat manupulasi database MySQL
menggunakan web server.
Logo phpMyAdmin.

143
Kita akan mencoba untuk menjalankan phpMyAdmin, berikut langkah –
langkahnya :
1. Pastikan anda sudah mengaktifkan Apache dan MySQL Service pada Xampp
Control Panel anda
2. Buka browser anda dan ketikan http://localhost/phpmyadmin atau
http://localhost/phpmyadmin/index.php pada address bar.

144
3. Sekarang anda dapat menggunakan phpMyAdmin untuk membangun
Database
3.4. Merancang Database
1. Pastikan anda masih di halaman phpMyAdmin
2. Untuk membuat database baru, caranya pada ketikan nama database anda
misalnya “ portfolio_db ” pada text box Create New Database, lalu klik tombol
Create

145
3. Jika sukse maka tampilannya seperti berikut
3.5. Membuat Tabel
Membuat database selesai, tahap selanjutnya adalah membuat tabel (table),
tabel ini digunakan untuk menyimpan data – data yang akan ditampilkan di situs.
Untuk pembuatan tabel ini saya membaginya menjadi dua cara yaitu :
A. Membuat tabel secara manual
1. Pastikan anda membukan phpMyAdmin dan membuka database yang
baru saja anda buat.
2. Ketikanlah nama tabel “admin” dengan jumlah field 4.

146
3. Akan muncul tampilan seperti berikut
4. Anda rancang struktur tabel admin seperti berikut.
5. Lalu isilah buatlah seperti berikut, lalu klik tombol save.

147

148
6. Jika berhasil maka tampilannya seperti berikut.

149
Jika menggunakan kode dan MySQL Console, kodenya akan seperti
berikut :
CREATE TABLE `portfolio_db`.àdmin` (
ìd` INT( 5 ) NOT NULL AUTO_INCREMENT PRIMARY KEY ,
ùsername` VARCHAR( 30 ) NOT NULL ,
`password` VARCHAR( 30 ) NOT NULL ,
`ket` VARCHAR( 10 ) NOT NULL
) ENGINE = MYISAM ;
7. Selanjutnya dengan cara yang sama, anda akan membuat tabel – tabel
web site yang dibutuhkan lainnya. Berikut adalah rancangan tabelnya :
Tabel “artikel”

150
Tabel “bukutamu”
Tabel kategori
Tabel “kontak”
Tabel “slide_show”

151
Tabel “tentang”
B. Meng-import database
Untuk mengimpor database yang sudah jadi, ikuti langkah – langkah berikut :
1. Jika sebelumnya anda telah membuat database “portfolio_db”, anda
dapat menghapusnya terlebih dahulu.
1. Buatlah kembali database “portfolio_db”

152
2. Klik menu import.
3. Klik tombol browse, dan pilihlah database di dalam folder data base.

153
Klik open, lalu klik Go.

154
4. Jika tampilannya seperti berikut maka anda telah berhasil mengimport
database

155
BAB 4
MEMBANGUN SISTEM WEBSITE DINAMIS DENGAN PHP
4.1. Mempersiapkan Website Company Profile/Portfolio ke Web Server
Sekarang kita akan memindahkan website kita ke dalam web server/localhost.
Silahkan ikuti langkah – langkah berikut :
1. Copy folder proyek-web-portfolio.
2. Pindahkan ke dalam folder htdocs anda.
3. Copy dan pindahkan juga folder assets anda ke dalam folder proyek-web-
portfolio anda.

156
4. Bukalah breowser anda, lalu ketikanlah alamat berikut pada address bar.
http://localhost/proyek-web-portfolio/
5. Tampilannya terlihat tidak sesuai dengan sebelumnya, hal ini karena lokasi
folder assets berbeda dari sebelumnya. Sekarang folder assets berada pada
folder yang sama dengan file index.html. Bukalah file index.html anda, lalu
ubahlah lokasi link dan script nya.
6. Gantilah “../” dengan “./”.
7. Simpan dan bukalah di browser anda.

157
4.2. Membangun Website dinamis dengan PHP
4.2.1. Membuat templating website
Maksud dari templating website adalah kita akan membagi – membagi satu
halaman website menjadi beberapa halaman/bagian.
Kita akan membagi – bagi section – section, lalu menggabungkannya
kembali dengan fungsi php.
Silahkan ikuti langkah – langkah berikut :
1. Bukalah kembali file index.html anda.
2. Lalu save-as lah file anda dengan ekstensi .php.

158
3. Hapuslah file index.html anda, karena kita sudah memiliki file index.php.
4. Bukalah file index.php anda, lalu potonglah (cut) bagian ang terblok seperti
gambar berikut.

159
5. Buatlah file baru, lalu paste di file baru tersebut.
6. Simpanlah dengan nama meta.php di folder yang sama dengan file
index.php

160
7. Sekarang kita akan memasukan file meta.php ke dalam file index.php.
letakan kursor pada area pemotongan yang tadi lalu ketikan kode fungsi
php berikut pada area tersebut.
Sekarang kita akan melakukan hal yang sama pada section – section yang
lainnya.
a. Templating website lanjut – Link CSS
1. Cut kode yang terblok.

161
2. Paste di file baru dan simpanlah dengan nama link-css.php
3. Lalu masukan file link-css.php anda di dalam file index.html.

162
b. Templating website lanjut – Section-Navigasi
2. Paste di file baru dan simpanlah dengan nama navigasi.php

163
3. Lalu masukan file navigasi.php anda di dalam file index.html.
4. Karena file index.html telah diganti dengan file index.php, maka kita perlu
mengganti pula link – link index.html dengan index.php.
Bukalah file navigasi.php anda, lalu gantilah “index.html” menjadi
“index.php”.
c. Templating website lanjut – Section-Slide-Show

164
2. Paste di file baru dan simpanlah dengan nama slide-show.php
3. Lalu masukan file slide-show.php anda di dalam file index.php.

165
d. Templating website lanjut – Section-Layanan

166
2. Buatlah folder section, di dalam folder utama anda, dan buatlah folder
layanan di dalam folder section anda.
3. Paste di file baru dan simpanlah dengan nama layanan.php di dalam folder
layanan anda.

167
4. Lalu masukan file layanan.php anda di dalam file index.php.
e. Templating website lanjut – Section-Portfolio

168

169
2. Buatlah folder portfolio, di dalam folder section.
3. Paste di file baru dan simpanlah dengan nama portfolio.php di dalam folder
portfolio anda.
4. Lalu masukan file portfolio.php anda di dalam file index.php.
f. Templating website lanjut – Section-Blog

170

171
2. Buatlah folder blog, di dalam folder section.
3. Paste di file baru dan simpanlah dengan nama blog.php di dalam folder blog
anda.
4. Lalu masukan file blog.php anda di dalam file index.php.

172
g. Templating website lanjut – Section-Contact

173
2. Buatlah folder contact, di dalam folder section.
3. Paste di file baru dan simpanlah dengan nama contact.php di dalam folder
contact anda.
4. Lalu masukan file contact.php anda di dalam file index.php.

174
h. Templating website lanjut – Section-Footer
2. Paste di file baru dan simpanlah dengan nama footer.php di dalam folder
utama anda.
3. Lalu masukan file footer.php anda di dalam file index.php.
i. Templating website lanjut – Script-Js

175
4. Paste di file baru dan simpanlah dengan nama script-js.php di dalam folder
utama anda.
5. Lalu masukan file script-js.php anda di dalam file index.php.

176
BAB 5
MEMBANGUN CONTROL PANEL ADMIN/BACK END
5.1.Konfigurasi Database yang akan digunakan
Sekarang kita akan membuat halaman koneksi.php yang berfungsi untuk
menghubungkan halaman html/php kita dengan server MySQL.
Koneksi.php
1. Ketikanlah kode berikut dalam editor anda.
2. Buatlah folder admin dalam folder utama anda.
3. Simpan lah file tersebut dengan nama “koneksi.php” di dalam folder
admin anda.

177
4. Sekarang kita akan mengecek koneksi tersebut, apakah berhasil atau
gagal. Tambahkan kode di bawah pada file koneksi.php lalu simpan
kembalilah.
5. Lakukan seperti gambar di bawah untuk memeriksa koneksi database.

178
Klik koneksi.php, jika tampil seperti di bawah maka koneksi berhasil.
6. Karena kode di koneksi.php sudah berhasil, maka kita perlu menghapus
kode pengecekannya. Hal ini untuk tidak menampilkan pemberitahuan
berhasil atau gagal koneksi.
Lalu simpan kembali file tersebut.
5.2.Kerangka template halaman admin.
home.php

179
Penjelasan home.php:

180
Penjelasan home.php :
1-6
Memulai session, session itu seperti cookies, dapat menampung data sementara.
28-29

Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto

Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto

Recommandé

Recommandé

Contenu connexe

Similaire à Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto

Similaire à Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto (20)

Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto