Membangun Responsive Website Dengan Twitter Bootstrap 2

I
II
Membangun Responsive Website dengan Twitter Bootstrap 2.0 _

+ PHP dan MySQL
Sopian Hadianto
Bootstrap
Sleek, intuitive, and powerful front-end

framework for faster and easier web
development.
Download Bootstrap
Introducing Bootstrap.
Need reasons to love Bootstrap? Look no further
By nerds, for
nerds.
Made for
everyone.
Packed with
features.
BUilt at Twrttor by @mdo and

@fat, Bootstrap utilizes LESS
Oootslrap was modo to not

only look end bohavo groat In
tho latosldesktop browsers (as
well fl<; IE II), but In lAbialanrt
srmrrlphonA hrow-;ar-; Vlfl
lllSp011!.IV9 C!iS loiS Willi
A 12-column rosponsrvo
gnd, dozens of components,
.J 1Vf1Sr11pl phr!11115, typof)raphy,
lmm c:nnlrol. tuld !lVHn tr
r.ss, rs compllfld vra Node,

tmd Is mHnfJged lhrnll!Jh OilHuh
lo
help rurds do rJWesorrre

slullon lhe web
W!JI.J I.Jfls!Jtl Cw;lnrulmr lo llll1k9
Uootslrap your own
Sopian Hadianto - founder of Geek House - geekhouse.biz
Kata
Pengantar
Membangun Responsive Website dengan Twitter Bootstrap 2.0 +

PHP dan Mysql
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
bermanfaat. Amin
ini
bisa
Bandung, 20 Maret
2014
Sopian
Hadianto
2
Sopian Hadianto ~ founder of Geek House ~
geekhouse.biz
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
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
4
geekhouse.biz
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
............................................................................. 254
6.4.3. Section
Portfolio............................................................................. 260
5
geekhouse.biz

PHP dan Mysql
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
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 dicompile 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
Node.js :
atau
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
pemrogaman.
kode
Sekilas
GitHub:
GitHub
GitHub adalah layanan berbasis web hosting untuk proyekproyek 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.
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
Bootstrap, contohnya :
yang
menggunakan
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
menggunakannya dengan aturan
aturan khas sebuah
Framework.
dan
bagaimana
cara
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.
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
[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-
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]

PHP dan Mysql
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.
[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
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
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.
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:\bootstrap\latihan
Dan file bootstrap.css berada di
folder : E:\bootstrap\assets\css
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 ../
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
Maka tampilan responsivenya adalah sebagai berikut.
[ 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-denganbootstrap.html
Cara 2 :
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
footer
Sub
konten
/
sidebar
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
ke-2
Kolom ke-2 baris
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
System/Fixed Grid
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.
Bingun
g?
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 zoomin pada website
saat dibuka di mobile
device.
[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
b.
Coba buka di browser anda. Apakah berhasil?
Lalu kecilkan layar browser anda. Apakah tampilannya belum
responsive?
Tentu saja, hal ini karena bootstrap juga menghendaki tampilan

non-responsive, jika kita tidak memasukan bootstrapresponsive.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.
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-layoutoffset.html, lalu bukalah di browser.
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.
Latiha
n
a.
Bukalah file Latihan-3-container-layoutofset.html anda b.
Gantilah kelas .container
nya menjadi kelas .row-fluid.
c.
Simpanlah dengan nama Latihan-4-fluid-layout.html,
lalu bukalah file tersebut
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 mencustom CSS berdasarkan beberapa kondisi seperti ratios,
width, display type, dll. Tetapi biasanya difokuskan sekitar minwidth dan max-width (batas minimal lebar dan maksimalnya)
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.
Kapan menggunakan
kelas
ini? saat kita
ingin
menampilkan
atau menyembunyikan
konten pada sebuah device.
Berikut adalah cara menggunakannya :
a.
Buatlah file html berikut
b.
Simpanlah dengan nama Latihan-5-Responsive-VisibilityTest.html, lalu bukalah file tersebut.
Maka tampilannya desktopnya adalah :
Kecilkan layar browser anda ke ukuran tablet, maka tampilan

tabletnya :
Kecilkan
layar
smartphone,
browser
maka
anda
ke
ukuran
tampilan smartphonenya:
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 :
Simpanlah dengan nama template.html di dalam folde bbostrap

anda.
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
template.html anda.
dalam
file
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>.
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
maknanya :
Warning
: kuning
Error
: merah
Info
: biru
Success
: hijau
Muted
: abu abu
Contoh penggunaanya :
dan
: sebagai tanda peringatan
: tanda error atau aksi yang
:negatif
tanda informasi
: tanda keberhasilana atau aksi
positif
:yang
tanda
tidak aktif
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
7.
Blockquotes
<blockquote> : untuk melakukan pengutipan dari sumber yang
lain, contoh dalam mengutip pendapat orang lain di dalam
artikel.
Secara default <blockquote> akan mengapung/float ke

sebelah kiri, untuk menampilkannya mengapung di sebelah
kanan gunakan kelas .pull-right.
8.
a.
dll)
List
Unordered : daftar/list dari item tanpa nilai (angka, huruf,
b.
dll)
Ordered : daftar/list dari item dengan nilai (angka, huruf,
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>
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.
[ .table-bordered ] tabel dengan border
[ .table-hover ] baris akan berubah warna

ketika disorot. Kelas baris/row opsional
lainnya :
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.
Style
Default
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.
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.
Ket. :
.form-horizontal
.control-group =
.control-label =
.controls
= letakan di dalam tag <form>

menyatukan label dan inputan dalam satu baris
kelas untuk tag <label>
= kelas untuk tag tag inputan
Placeholder= menampilkan teks buram di dalam inputan
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
diinputka
n.
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.
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.
o
Button instead of text
Style ini menyatukan button dengan textbox.
Button Dropdown
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.
Relative Sizing (ukuran yang relative/tetap)
Grid sizing
f.
Uneditable inputs
Untuk inputan yang tidak dapat di edit.
g.
Form Actions
Button untuk mengeksekusi data inputan dari form.
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.
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.
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.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan IV!ysql
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 :
Y icon-glass
Jl icon-music
Q icon-search
icon-envelope
icon-heart
* icon-star
1< icon-star-empty
.1. icon-user
B icon-film
::icon-th-large
m icon-th
icon-ok
X icon-remove
icon-zoom-in
icon-zoom-out
Cl icon-off
11 icon-signal
0 icon-cog
IIicon-trash
icon-home
li icon-file
0 icon-time
.. icon-download-alt
<D icon-download
<D icon-upload
C icon-inbox
0 icon-play-circle
C icon-repeat
C icon-refresh
til icon-list-alt
lili icon-lock
1 icon-flag
(,) icon-headphones
"" icon-volume-off
icon-volume-down
oeo icon-volume-up
ill! icon-qrcode
1!111 icon-barcode
icon-tag
icon-tags
IIicon-book
Ill icon-bookmark
a icon-print
B icon-camera
A icon-font
B icon-bold
icon-italic
IT icon-text-height
icon-text-width
::icon-th-list
icon-road
icon-align-left
:ll; icon-align-center
icon-align-right
s icon-align-justify
is icon-list
il:. icon-indent-left
i} icon-indent-right
.,icon-facetime-video
I:Oil icon-picture
/ icon-pencil
Q icon-map-marker
<t icon-adjust
icon-tint
0 icon-edit
B icon-check
+icon-move
IC icon-step-backward
ICC icon-fast-backward
icon-backward
J> icon-play
11 icon-pause
icon-stop
.. icon-foiWard
Mt icon-fast-foiWard
M icon-step-foiWard
<!> icon-eject
< icon-chevron-left
) icon-chevron-right
0 icon-plus-sign
0 icon-minus-sign
0 icon-remove-sign
0 icon-ok-sign
0 icon-question-sign
0 icon-info-sign
+ icon-screenshot
icon-remove-
icon-share
circle
58
Sopian Hadianto -founder of Geek House - geekhouse.biz

PHP dan Mysql
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 iconwhite"></i> Untuk icon

warna hitam
a.
Icon in Button
59
geekhouse.biz
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.
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.
b.
Basic pill
c.
Stacked tabs
Tab vertical yang terpasang secara menumpuk,
ini cocok untuk sidebar/menu kiri/kanan.
style
d.
Stacked pills
e.
Tabs with dropdown
Menambahkan dropdown pada navigasi menu.
f.
Nav List/sidebar
Komponen ini dapat digunakan sebagai sidebar.
g.
Tabbable nav
tab nav yang memiliki kontennya/sectionnya masing masing.
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, .tabsbelow, .tabs-left, .tabs- right.
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).
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.
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.
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.
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.
70
geekhouse.biz
Desktop view
Tablet/Smartphone view
Inverse style (Navbar hitam)

Kelas .navbar-inverse dapat digunakan
menempatkannya setelah kelas .navbar.
E.
Breadcumbs
dengan
Breadcumbs biasanya digunakan untuk menampilkan history

dari link link yang berhubungan secara struktur link yang telah
dan sedang dibuka.
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 : .paginationlarge, .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

PHP dan Mysql
Penanda halaman lainnya.
Aigned links
G.
Labels and
badges a. Labels
b.
Badges
H.
Typography a.
Hero Unit
Hero unit salah satu typography yang mungkin anda dapat
menggunakannya.
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
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.
J.
Alerts
Alert biasanya digunakan untuk memberikan pemberitahuan
kepada user, setelah user melakukan suatu aksi tertentu.
a.
Defalut alert
Untuk pesan yang lebih banyak tambahan kelas

.alert-block setelah kelas .alert.
b.
Alert Error atau danger
c.
Alert Success
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
d.
Stacked / Progress bar warna warni yang tertumpuk
e.
Striped color bars
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.
b.
Media list
Dengan tambahan ekstra tag/markup, kita bisa menggunakan
media di dalam list/
tag <li> (berguna untuk threads komentar atau daftar artikel).
M. Miscellaneous/Lain
lain a.
Wells
Gunakan kelas .well untuk memberikan effect isian (inset efect)
pada grid.
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
.
clearfi
x
Clear/bersihkan
float
elemen/komponen
style
dari
1.6.
JavaScript
A.
Transitions
Bootstraptransition.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.
Tampilan kode diatas adalah tombol di bawah.
Ketika tombol diklik maka akan muncul modal dialod/kotak dialog

berikut.
C.
Dropdown
Dropdown dengan javascript hampir sama dengan
dropdown dengan CSS
sebelumnya, hana berbeda dari kodenya saja.
D.
Scrollspy
bootstrapscrollspy.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 :
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 :
E.
Tab
bootstraptab.js
Ketika tab profile diklik maka tab profile akan terbuka secara
automatis.
Untuk membuat tab diatas, silahkan ketikan kode berikut.
F.
Tooltip
bootstrap-tooltip.js
Tooltip biasanya digunakan untuk menampilkan keterangan
tambahan dari sebuah teks, button,dll.
G.
Popover
Popover hampir sama dengan tooltip, dengan style yang sangat
berbeda.
H.
Alert
bootstrapalert.js
I.
Button
bootstrapbutton.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.
97
geekhouse.biz
b.
Single toggle
98
geekhouse.biz
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 sebelum ditekan.
Button dapat dipilih lebih dari satu.
d.
Radio button
Dengan button kita dapat juga
membuat radio. Button sebelum
ditekan.
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
99
geekhouse.biz
Ketika diklik item #2 maka akan berubah menjadi seperti

berikut.

geekhouse.biz
10
0
K.
Carousel
Carousel adalah slideshow gambar yang akan berganti secara
automatis (dalam beberapa detik) atau pun dengan mengklik
gambar tersebut.
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-onepage.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.
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>
<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">
<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-webportfolio.
Kita sudah memiliki kerangka webnya, sekarang kita akan

membuat layout dasar sesuai dengan gambar rancangan di
atas.
Silahkan tambahkan kode berikut setelah di dalam tag <body>.


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

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

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

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


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

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

</div>

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

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

</div>


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

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



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

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

</div>


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

<div class="row-fuid">
</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-fuid" id="section-navigasi">
<div class="navbar navbar-inverse navbar-fxed-top" id="home"

style="position:fxed;">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" datatoggle="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>
</div>
Penjelasan
berdasarkan
nomor :
4042
membuat navbar fixed, agar posisisnya menetap
di atas layar.
4649
membuat toggle button untuk menampilkan menu pada
tampilan mobile.
5255
menampilkan icon logo web dan
nama web.
5864
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=sectionlayanan.
<div class='row-fuid' id='section-layanan'>

Simpanlah, lalu bukalah di browser anda.

geekhouse.biz
11
0
Coba anda buka file index.html dengan tampilan mobile

responsivenya, hal ini penting dilakukan untuk memastikan
kesesuaian desain desktop dan mobile.

geekhouse.biz
11
1
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-fxed-top" id="home"
style="position:fxed;">
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.
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
berikut.
kode
/* 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
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 */

geekhouse.biz
11
3
Coba bukalah file index.html anda lagi.

geekhouse.biz
11
4
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 */
Coba
buka
lagi
index.html anda.
file
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
tambahakanlah koding berikut pada main.css anda.
navigasi,
.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 sectionslide-show.
Bukalah index.html anda, lalu tambahkan koding berikut.
<div class='row-fuid' 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%'>
<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='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 :
Dalam hitungan beberapa detik slide-show nya akan merubah

(gambarnya akan berganti).
Sekarang kita akan memodifikasi tampilan slide-shownya supaya

lebih menarik.

geekhouse.biz
11
7
Maka tampilan modifikasinya seperti berikut :
Memberi warna latar (background pada tag <body>) dan

menetapkan warna default untuk teks.

Pada section-layanan ini, akan ditampilkan daftar layanan
layanan (produk) yang ditawarkan oleh perusahaan.
Silahkan ketiklah kode di bawah di dalam section-layanan.
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.

geekhouse.biz
12
0
Lalu kita akan memberikan efek tranparant pada image

ketika image disorot
(hover)
Selanjutnya kita akan memberikan efek transisis (-webkittransition) dan border radius (untuk membulatkan sisi sisi
image)
Tampilan section-layanan.
Tampilan gambar setelah disorot.
[Section Layanan]
[Section Layanan]
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

membuat konten section- porfolio.
section-porfolio
untuk
Membangun Responsive Website dengan Twitter Bootstrap 2.0 i>Hi> dan Mysql
<di'"tl class= Y'O\t- f luid-black
11
11
>
<div class= 11 container section-2 11 >

<div class= 11 t'OW 11 Xhl>Portfolio </hlX/div>
<div class= 11 t'OW 11 >

<div class= 11 spanl 11 > </div>
<div class= 11 span311 >
<brXbr>
<img src= 11 /assets/OO/example -sites/site-4 W:W" alt= 1111
class="JJ!Ig JJ!Ig-Qg ">

<h4>id non mi.</h4>
</div>
<img src= 11 /assets/OO/example -sites/site -5 -.l)SJ'1 a lt=1111
<h4>id 1& non mi.</h4>

</div>
<brXbr>
<img src= 11 /assets/OO/example -sites/site- 6 W:W" alt= 1111

<h4>id non mi.</h4>
</div>
<div class= 11 spanl 11 > </div>
</div>
124
Sopian Hadiantofounder of Geek Housegeekhouse. biz

PHP dan Mysql
Tampilan section-porfolionya seperti berikut.

geekhouse.biz
12
5
[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.
Selanjutnya kita buat modifkasi kelas .img-rounded untuk

merubah style-nya.
Tampilan section blog.
Untuk mengisi section-blog anda dapat menambahkan

konten lagi di bawah konten sebelumnya.
Sehingga tampilannya seperti berikut.
Anda juga dapat menambahkan konten lagi pada sectionlayanan supaya terlihat memenuhi layar.
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
section-kontak.
membuat
konten

geekhouse.biz
13
0

geekhouse.biz
13
0
Sekarang buatlah kelas .section-3.
Tampilan section-kontak.

geekhouse.biz
13
1
2.2.6. Section Footer

Section ini biasanaberisi 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.
Sekarang kita buat kelas baru, kelas .bg-black-2 dan kelas

.section-4.
Tampilannya sebagai berikut.
BAB
3
MEMBANGUN
SERVER
WEB
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).
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
4.
Tekan enter untuk menambahkan shortcut Xampp di desktop
5. Enter [y] untuk membiarkan Xampp me-relocate ulang

directory
6.
Enter [n], untuk tidak mengaktifkan fasilitas portable Xampp.
7.
Enter, untk melanjutkan instalasi
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
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.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
13. Buka web browser anda, lalu ketikan http://localhost. Jika tampilannya
seperti di bawahini, maka Xampp anda sudah terinstal dengan benar.
-"
c II J'
P ll..
fll
XAMPP
iOllhib / lll!.lt:lidl / / / fmki // / OiQct / / fi/
I pm"mti2 lfnal!/ B.:UI
SapianHadianto
founder of Geek House
geekhouse.biz
14
0

PHP dan Mysql
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
geekhouse.biz
14
1
PHPyang
dan Mysql
FreeSoftware
berada dibawah Lisensi GNU/GPL ( General
Public License ).

geekhouse.biz
14
2
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.
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.

geekhouse.biz
14
3
3. Sekarang anda dapat menggunakan phpMyAdmin

untuk membangun
Database
3.4.
1.
2.
Merancang Database
Pastikan anda masih di halaman phpMyAdmin
Untuk membuat database baru, caranya pada ketikan
nama database anda misalnya portfolio_db pada text box
Create New Database, lalu klik tombol Create
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.
3.
Akan muncul tampilan seperti berikut
4.
Anda rancang struktur tabel admin seperti berikut.
5.
Lalu isilah buatlah seperti berikut, lalu klik tombol save.
Server:localhost @II Database:portfolio_db

Field
Iilli Table: admin

Type
LengthNalues
Is
0e1au1r
l iNT
vi
Iusername
IVARCHAR
vi 130
INone
Ipassword
IVARCHAR
vi
1 30
INone
vi
IVARCHAR
vi
110
None
vi
id
Storage Engine:
Table comments:
IMyiSAM
vi
vi
INone
I
I
I
I
I
vi
Collat on:
v
PARTITOI N definit on:
147
Sopian Hadianto- founder of Geek Housegeekhouse.biz
6.
Jika berhasil maka tampilannya seperti berikut.

geekhouse.biz
14
8
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
`password`
VARCHAR(
30
)
NOT
`ket` VARCHAR( 10 ) NOT NULL
) ENGINE = MYISAM ;
7.
NULL
NULL
,
,
Selanjutnya dengan cara yang sama, anda akan

membuat tabel tabel web site yang dibutuhkan lainnya.
Berikut adalah rancangan tabelnya :
Tabel artikel
Tabel bukutamu
Tabel kategori
Tabel kontak
Tabel slide_show

geekhouse.biz
15
0
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
2.
Klik menu import.
3. Klik tombol browse, dan pilihlah database di dalam folder

data base.
Klik open, lalu klik Go.
4.
Jika tampilannya seperti berikut maka anda telah

berhasil mengimport database
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.
3.
Pindahkan ke dalam folder htdocs anda.
Copy dan pindahkan juga folder assets anda ke dalam

folder proyek-webportfolio anda.
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 fle index.html. Bukalah file index.html anda, lalu
ubahlah lokasi link dan script nya.
6. Gantilah ../ dengan ./.
7.
Simpan dan bukalah di browser anda.
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.
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.
5.
6.
Buatlah file baru, lalu paste di file baru tersebut.
Simpanlah dengan nama meta.php di folder yang

sama dengan file index.php
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.
geekhouse.biz
16
0
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.
b.
1.
2.
Templating website lanjut Section-Navigasi

Cut kode yang terblok.
Paste di file baru dan simpanlah dengan nama navigasi.php
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

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

index.php.
M em bangun Responsive Website dengan Twitter Boatstrap 2.0 + PHP dan M ysql

<?php require ( "slide-shoi") ; ?>


d. Templating website Ia njut- Section-Lava nan

Kdiv class= 11 row-fluid 11 id=11 section-
11
>

site-l.RO,g11 alt =11 11
>
site-3 .RO,g11 alt =11 11
>
165
Sopian Hadianto founder ofGeek Housegeekhouse.biz

PHP dan Mysql
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.

geekhouse.biz
16
6
4.
Lalu masukan file layanan.php anda di dalam file index.php.
e. Templating website lanjut Section-Portfolio



<div
<div class= 11 f'0\'111 >

<div
=--....,-;-=.,....
site-4 . ROSJ
</div>
<di v cl
11
a=l
11 11
a--=""''"s ">'.
_e_s_/'"s"''"-' e--""5'"-. IWS-I;,;,xamp"e - a"l" !O'"="''""'".,

e JJ!Igt,JJg-!">
l"'" - s"''"'
class="JJ!Ig
<h4>idnon mi .</ h4>
< img
src=n Iass
pan4""
. ': s-
</div> -;;----:=-.
<img src= 11 , /assets/example-sites/site- 6
. W)_g
11
a=l
11
class="JJ!Ig JJ!Ig- !">

<h4>idnon mi .</ h4>
<I div>
'---=--"""":--.----:-;-=.,....
site-7 . ROSJ11 a=l
11 11
168
So pian Hadianto founder of Geek Housegeekhouse.
biz

PHP dan Mysql
2.
3.
Buatlah folder portfolio, di dalam folder section.

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.
1.
Templating website lanjut Section-Blog


geekhouse.biz
16
9
< 1 -- Section-->
<div class= 11 t'0\'1-fluid11 id= 11 section-&l,Q;{:' 1 >j_

< ?php require ( "!ooter.Qbp") ; ?>
66
67
68

</div>
69
70

"1
< ?php require ( "scr>p t"-) ;
72

73
74
</body>
</html>

geekhouse.biz
?>
250
Penjelasan :

geekhouse.biz
251
Baris
29 63
Penjelasan
Sistem templating seperti pada halaman admin
6.2. Koneksi.php untuk konfigurasi database

Untuk membuat koneksi.php, anda dapat meng-copy dan paste
file koneksi.php yang sudah anda buat sebelumnya.
Atau ketikanlah kode berikut, dan simpanlah dengan naman
koneksi.php di folder utama anda.
Koneksi.php
6.3. Home.php untuk menampilkan section - section

geekhouse.biz
25
1
Penjelasan :
Baris
1 19
Penjelasan
Menampilkan section section konten
6.4. Memodifikasi section dengan menambahkan konten dari

database MySQL
dengan
menggunakan PHP
Kita akan melakukan modifikasi atau perbaikan perbaikan
pada halaman halaman php yang sudah kita buat
sebelumnya. Kita akan mengganti dummy konten dengan
data yang tersimpan dalam database MySQL.
6.4.1. Slide-show.php
Membangun Responsive Website dengan Twitter Bootstrap 2.0+ PHP dan Mysql
<div class='row-fluid' id='section-slide-show'>

<div id='mtcarousel' class='carousel slide'>
<div class='carousel-inner >
2
3
4
$select_slide_show = "select * :rom slide_show order by id ";
;sql_slide_show = mysql_query($select_slide_show);
$i=1; $status = "";
1hile($r_slide_show = mysql_fetch_array($sql_slide_show))
10
$slide_show_gambar = stripslashes{$r_slide_show(
11
13
$slide_show_judul = stripslashes(;r_slide_show[
]);
$slide_show_deskripsi = stripslashes($r_slide_show('Qe
2j);
if(H>1){$status="";}
14
15
16
17
18
19
else{$status="active";}
echo"<Qix class= item $status >
<
=
1 ./images/slide_show/$slide_show_gambar1
=
$slide_show_judul width= 100% >
<Qix class= container >
<Qix class= carousel-caption >
12
<h2>$slide_show_judul</h2>
21
<p class=
</p>
25
26
20
<lsU.x>
<lsU.x>
<lsU.x>" ;
] ) ;
23
24
22
lead >$slide_show_deskripsi
1
H++;
27
28
?>
29
</div>
30
31
32
33
<a class='left carousel-control'

href='#mtcarousel'
data-slide='
' >&lsaquo;</a>
<a class='right carousel-control'
href='#mtcarousel'
data-slide='next'>&rsaquo;</a>
34
</divX/div>
Penjela san :
Baris
6-32
Penjelasan
Query untuk menampilkan semua record tabel slide_show, jika nilai var $i
> 1maka $status akan "" sebaliknva iika $i 1$status "active".
253
Sopian Hadianto founder of Geek House ge ekhouse.biz

PHP dan Mysql

layanan.php
layanan.php ini akan ditampilkan pada halaman index.php
atau halaman awal anda.
254
geekhouse.biz
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
if{$i==2 I I $i==51
{ $span="span4";}
else {$span="span3";}
-if{H==l II H==41{
echo"
<class='row'>
<class='spanl'>:</>
".
echo"<class='$span'>
<JJ!o! = . /$gambar ' UJ;=''
class='JJ!ol JJ!ol-QQ>
<h4>$judul</h4> <p>$isi...</p>
<small>
<a ='index.?menu-!e
nen-detail&&
id_artikel=$id_artikel'>
e w:t ao
</aX/small>
".
<>I
-if{H==3 II H==61{
echo"<class:'spanl'>&:<>/
58
</>
"
59
60
H++;
61
62
63
64
else{
?>
65
</div>

</div>
66
67
</div>_
Penjelasan :
I Baris IPenjela san
Sapian Ha dianto
geekhouse.biz
255

PHP dan Mysql
12 - 16 Menampilkan record artikel yang memiliki nama

kategori layanan
maksimal
record
34 35 Jika
var $i 6
==
2 danterbaru
$i == 4 maka var. $span berisi
=span4 jika tidak maka var. $span berisi
36
Sebaliknya
=span3, hal ini untuk
menampilkan
contenkonten
pada bagian
tengah lebih besar dari
38 59 Manipulasi
tampilan
layanan
layanan-detail.php
halaman ini untuk menampilkan detail dari layanan, ketika link
yang ada pada
section layanan diklik maka halaman ini akan ditampilkan.
So
pia
dan Mysql
n Hadianto ~PHP
founder
of Geek House ~
geekhouse.biz
256
Membangun Responsive Website dengan Twitter Bootstrap 2.0
1
2
3
4
- <div class='row-fluid' id='section-'>


<div class='row-fluid'>
<.brXbrXbr>
6
7
<center><h1>Detail< / h1></center>
< /div>
<div class="spanl">
10
11
12
13
14
15
16
17
+ PHP dan Mysql
< /div>
<div class="span2">
<?php require ("seceion/! :t un/! :t un-Hse M2")
:
< /div>
?>
<div class="span8">
- <?php
require ("Mru:li:!W2") :
$id_a rtikel = ; _REQU ST [ 'id_artikel' J;
18
19
20
21
22
$select. = "select. a.id_art.ikel, b.nm_kat.egori,

a., a.headline, a.Mj,, a.as ;:j,ro, a. Mst,
a.
:rom ;:Uli:Sa, l;
tb
where a.id_kat.egori=b.id_kat.egori and a.id_art.ikel ='$id_artikel'
23
24
25
26
order by a. id_artikel";
;query = mysql_query {$se lect ) ;
$r = mysql_f etch_array {$query) ;
27
28
$id_artikel = $r('id_art.ikel'];
$id_kat.egori = $r('id_kat.egori'];
29
$judul = $r ( ' J;
30
$headline = $r('headline'];
31
32
33
34
Hsi = $r ( 'M-J, ' J;

;penqirim = $r ( 'as ;:i,ro ' J:
$ta nqqa l = $r ( ' Mst j;
; qamba r = $r ( ' J:I
257
Sopian Hadiant o founder of Geek House geek
house.biz

PHP dan Mysql
Penjelasan :
Baris
Penjelasan
17
Mendapatkan var. id_artikel yang dilewatkan
19 23 Query untuk menampilkan artikel yang id artikelnya
sama dengan var. id_artikel
25 34 Proses mendapatkan record record dan menyimpannya
dalam variable
35 52 Manipulasi
tanggal supaya berformat tanggal Indonesia
53 61 Menampilkan artikel lengkap/detail
258
geekhouse.biz
I ayan an -list.ph p
h a lam an in i u ntu k men am pilkan d aftar nama I aya nan yang d ised iakan
ol eh peru sah aan.
1
2
3
4
5
7
8
9
10
- <di v class= ' ' >

<h2></ h2>
- <?php
require (' M2 ' ) ;
$se lect = 'select id_kateqori from l;ijl<!: torder by id_kateqori' ;
$kategori
$r('id_kategori'];
echo "<span>";
18
19
20
21
22
23
24
$se lect1 = ''select * from l;ijl<!: twhere

lower (nm_kateqori ) = 'J_ij;t Qij!) "';
;query1 = mysql_query {$select1) ;
$r1 = mysql_f etch_array {$query1) ;
$id_kategoril = $rl ( id_kategori ] ;
$nm_kategoril = $rl ( nm_kategori ] ;
echo "<a ='i'>"
.$nm_kateqori1. "</a>";
$query2 = "select id_kateqori from l;;J;kli:Swhere id_kateqori
= $id_kateqoril order by
ij";
$count1 = mysql_query {$query2 ) ;
$numsf = mysql_num_rot'IS {$countl ) ;
echo "<span>&;1 ".$numsf . " ] &;</span>";
echo "</spanXQt>";
25
26
?>
11
12
13
14
15
16
17
So pian Hadianto founder of Geek Housegeekhouse.

biz
259

PHP dan Mysql
Penjelasan :
Baris
Penjelasan
11 24 Menampilkan nama kategori dan jumlah artikel dengan
kategori tersebut
31 48 Menampilkan
judul artikel
Koding halaman halaman section selanjutnya hampir mirip

dengan kode section layanan di atas.
6.4.3. Section
Portfolio
portfolio.php
PHP dan
Mysql
Sopian Hadianto
~ founder
of Geek House ~
geekhouse.biz
260
1
2
<div class=''row-fluid id="section-portfolio>

< -- Section- -->
<div classrow-fluid lllJ-black ">
.;
5
6
<div class="container section-2>

<div class="row"><hl>Portfolio</hlX/div>
<?php
require( "Qll l>lllm"l
;
9
10
11
12
13
1.;
15
$select
16
1-
;query = llrf Sql_quert (>select) ;

$i=1;
18
$span=Mspan3;
19
20
while(> r = ID"f Sql_Cetcb array ($query))

{
21
22
$id_art.ikel = $r('id_a tikel'];

$id_kat.eqori = $r('id_kategori'];
23
24
25
26
$judul = $r [''1;
$headline = >r [ 'headline' 1 ;
$isi = $r [ ' 1;
$isi = subst r{$isi,O ,l50 ) ;
228
29
30
31
;pengi rin = >r [ >) ;i,OJ ' 1 ;

>ta nggal = >r [ ' &9.>lQa'1:
;gambar = $r ['' 1 ;
iC{$i=2 l l $i==5)
{ $span="spen4";}
32
else {$span="span3";}
33
select a.id_artikel, b.nm_kategori, a., a.headline,
a..>Jg. &a ggij,

:rom ao io e a, l;ij g;;i, b
where a.id_kategori=b.id_kategori and
lower{b.nm_kategori} = 'port:olio'
order by a.id_artikellimit 6 "
261

PHP dan Mysql
portfolio-detail.php
262
geekhouse.biz
1
2
3
4

PHP dan
Mysql
- <div class=
'rot'l-fluid'
id= 'section-l0t en' >
< !-- Section- -->
<div class= ' row- fluid' >
<div class= 'container' >
5
6
<br>
<br>
7
8
<cent.er><h1>Detail Portfolio<
/h1></cent.er>
<h r>
< /div>
10
11
<div class= 'container' >

<div class="spanl">
12
< /div>
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<div class="span2" >

<?php require{'sect.ion/ port.:olio/ port.:olio-list.. Wl.g") ; ?>
< /div>
<div class="span8" >

- <?php
require ( "Mru:l>llOO") ;
$id_a rt ike l =; _REQUEST ( 'id_artikel' ];
$select = "select * :rom l;:l< l>Swhere
$r = mysql_fetch_array {$query) ;
$id_a rt ike l = $r ( 'id_artikel' ];
Hd_kateqori = $r ( 'id_kateqori' ];
$judul = $r ( ' J;
$headline = $r ( 'headline' ];
id_art:ikel=$id_arti.tel";
Hsi = $r ( 'M-i, ' ];

;penqirim = $r ( as ;:i,ro ' J;
$ta nqqa l = $r [ ' J;
;qamba r = $r ( ' J;
2.63
Sopian Ha dianto founder of Geek

Housegeekhouse.biz

PHP dan Mysql
portfolio-list.php
264
geekhouse.biz
- <div cl.! ss= ' ' >
2
3
<h2>< / h2>
- <?php
4
5
6
7
e
9
require ( 'li Hl!:li:M2' ) ;

; select = 'select id_kateqori :rom l; QQt
order by id_kategori' ;
;query = mysql_query (; select ) ;
;r = mysql_f etch_array (;query) ;
$kateqori = $r{ 'id_kateqori' ] ;
10
11
echo "<span>";
12
$se lect1 = "select
13
:rom l; QQtwhere
lower{nm_kategori )
= 'port:olio' ";
14
15
16
17
;query1 = mysql_query {$se lect1) ;

$r1 = mysql_f etch_array (;query1) ;
Hd_kateqori1 = $r1[ 'id_kateqori' ] ;
;nm_kateqori1 = $r1[ 'nm_kateqori' ] ;
18
echo "<a='i'>"
19
.;nm_kateqori1."<I a>" ;
20
;query2 = "select id_kateqori :rom l;:J< li:S
21
where id_kategori
= $id_kateqoril";
22
;count1 = mysql_query (;query2 ) ;
23
$numsf = mysql_num_rot'IS {$count1) ;
24
25
26
27
28
echo "<span>&;[
".;numsf . " ] &;< /span>";
echo "<f spanxm:>";

?>
2.65

Housegeekhouse.biz

PHP dan Mysql
6.4.4. Section Blog

blog.php
266
geekhouse.biz
<di v class= 11 row- f luid11 id= 11 section-Ql,Q:t>


<div class= 11 row-fluid 11 >
2
3
4
5
6
<div class= 11 container section-1 11 >

<div class= 11 t'OW 11 >
<h1>< / h1>
< /div>
e
9
10
11
12
13
14
15
- <?php
require ("Mru:li:IW2"1 :
$se lect = "select a .1d art1kel, b. nm_kategori, a,.
a.headline, a,.
a.Re'
a.,
a.
:rom J; li:Sa, l; J; !mtb
where a.id_kategori=b.id_kategori and lower (b.nm_kategori )
17
18
19
20
21
22
<>
16
nn
and lower(b.nm_kategori) <> port:olio
order by a. id_artikellimit
6 ":
;query = mysql_query (; select ) ;
H=1;
; spa n="span3";
1hile{$r = mysql_f etch array {$query))
-{
23
$id_artikel = $r( 1 id_artikel ];
24
$id_kategori
25
= $r ( id_kategori ] ;
;judul = $r ( ' J ;
26
$headline = $r[headline ];
27
oisi ;or [ ' J ;
28
$is i
29
30
31
;pengirim = or [ 'Re J :
$ta ngga l = $r ( ' J ;
;gambar = or [ ' ] ;
32
33
34
if {$i==2 I I $i==5)
{ ; span="span4";}
else {; spa n="span3";
substr{$is i , 0 , 150 ) ;
267

PHP dan Mysql
blog-detail.php
268
geekhouse.biz
1
2
3
- <div class= 'row- f luid' id= ' section-l0Ismen' >


<div class='row'>
<div class='spanl'></div>
10
<div class='span2'>
11
12
<?php
require ( "section/-list .ruJ2") ; ?>
13
< /div>< !-- /col -->
14
<div class='spanS -'>
15
- <?php
16
require ( "Mru:li:!W2") :
17
$id_kategori = ; _REQU ST [ 'id_kategori' J;
18
19
; se lect = "select * :rom ;:Uli:Swhere
id_kategori
20
;query = mysql_query (; se lect ) ;
21
H=1;
22
; spa n="span3";
23
1hile{$r = mysql_f etch array {$query))
24
25
26
27
28
29
30
31
32
33
$id_kategori";
-{
$id_artikel = $r('id_artikel'];
$id_kategori = $r('id_kategori'];
;judul = $r ( ' J;
Hsi = $r ( 'M-J, ' J;
$isi = substr{$isi,0,150);
;pengirim = ;r ( 'as ;:i,ro ' J:
$ta ngga l = $r ( ' J;
; gamba r = $r ( ' J;
272

PHP dan Mysql
6.4.5. Section Kontak

contact.php
273
geekhouse.biz
1
2
3
- <div class=" row-fluid" id="section"->

<!-- Section- -- >
<div class="row-fluid-black">
4
5
<div class="container section-3">

<div class="row">
<div class="spanl"> < /div>
<div class="span8">
8
9
10
11
<h1>< / h1>
< /div>
< /div>
12
<div class="row">
13
14
15
16
17

<div class="span3">
<h3> iJI! ..l!n J! <br>
<small>..l!n < /small></ h3>
<form method= 'post' action= 'section/contact/-p'.
18
19
20
name= ' input' >
26
<fie ldset>
<labe l>< / labe l>
<input type=" text 11 placeholder=n"ame= ' Xbr>
<labe l>Email< / labe l>
<input type=" text 11 placeholder="Email 11 name= ' email' Xbr>
<labe l>< / labe l>
<input type=" text" placeholder=" name= ' Xbr>
<labe l>,.iW< / labe l>
27
28
<textarea placeholder=n"ame= ' > </ textarea>

<button type="submit11 class="&t.n">Submit</ button>
21
22
23
24
25
29
30
31
< / f ie ldset>
< /form>
< /div>
32
33
<div class= 11 span4 11 >

<aside class= 11 text-left 11 >
34
<h3>< / h3
274
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
- <?p>p
reqJire ( "Mru:li:llb2") ;
$select = "select * :orm ";
;q u ry = mysql_query {$se lect ) ;

$nana = $r ( 'MJru!' ] ;
$a lmat = $r ( ' J ;
$je>is = $r ( ' J ;
$telp = $r ( ' J ;
Hoo = $r ( 'loqo ' ] ;
$ket = $r ( 'MJ;' J ;
?>
<h4X?php echo $nama ?X / h4>

<p>
: <?php echo $a lamat ?X/ p>
<p>
: <?php echo $te lp ?X/ p>
< /aside>
< /div>
<div class= 11 span3 11 >

<aside class= 11 text-left11 >
54
55
56
57
58
59
60
61
62
63
64
65
<h3>Social Link < / h3>

- <?p>p
reqJire ( "Mru:li:llb2") ;
; select = "select * :rom S!ll< OS! where
;q u ry = mysql_query {$se lect ) ;
1hile{$r = mysql_f etch_array {$query))
ru =
'social_media' ";
-{
$nm tenta.ng = $r('nm tentang'];
ae
= ;r (
'ru' l;I -
2.75

Housegeekhouse.biz
Penjelasan :
Baris
14 31
35 53
57 70
Penjelasan
Menampilkan form buku tamu
Menampilkan data kontak
Menampilkan daftar social link yang diambil dari tabel
tentang yang
memiliki keterangan social_media
Bukutamu-p.php

geekhouse.biz
27
6
Penjelasan :
Baris
1 17
Penjelasan
Menginputkan data buku tamu ke dalam tabel bukutamu
Untuk dapat melihat website anda secara utuh, cobalah untuk

mengisikan data data, membuat artikel (buatlah kategori
layanan, portfolio, terlebih dahulu lalu kategori lainnya),
membuat slide show dll.
Berikut adalah tampilan website anda ketika anda telah mengisi
kontennya di halaman admin anda.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan

Mysql
Layanan Kami
----
..._,"" ..
.........
.... --
,_..
SapianHadianto
__ ,. _
__.. _.,____
---
_-,._
....,...
geekhouse.biz
27
8

PHP dan Mysql
6.5. Menambahkan efek Smooth Scroll untuk mempercantik onepage website

6.5.1. Menambahkan jquery.min.js dan
smoothscroll.js a. Buka fle linkcss.php anda
b. Lalu tambahkan kode berikut

geekhouse.biz
27
9
6.5.2. Menambahkan kelas smoothScroll pada link link

menu navigasi a. Bukalah fle navigasi.php anda
b. Editlah seperti berikut
6.5.3. Memodifikasi tag <body> pada

index.php a. Bukalah fle index.php
anda
b. Editlah tag <body> hingga seperti berikut
geekhouse.biz
28
0
Sekarang bukalah website anda kembali, lalu klik lah

menu menunya, maka ketika menu berpindah maka
perpindahan akan tergulung secara lembut.
Referensi
Website
http://getbootstrap.com (oficial website dari Twitter Bootstrap)
https://github.com/twbs/bootstrap (oficial site di github.com )
www.blacktie.co/ (free bootstrap templates site)
www.bootsnipp.com (free bootstrap templates site)
Source Code
https://github.com/twbs/bootstrap/releases
(Master Twitter Bootstrap yang pernah dibuat, mulai dari versi
1.0.0 3.1.1)
http://getbootstrap.com/2.3.2/assets/bootstrap.zip
(Master Twitter Bootstrap 2.3.2)
Software (Open Source)

http://notepad-plus-plus.org/ (Editor)
www.apachefriends.org/ (Xampp Web Server)
http://www.mozilla.org/en-US/ (Web Browser)
www.google.com/chrome/ (Web Browser)
http://www.colorpicker.com/
(Aplikasi untuk mendapatkan warna warna html)

PHP dan Mysql
Daftar Pustaka
Wahana Komputer. 2013. Mudah Membuat Portal Berita Online
Dengan
Php&Mysql, Wahana Komputer
Sadeli, Muhammad. 2011. Membuat Toko Online dengan PHP
untuk Orang Awam. Maxikom
http://www.getbootstrap.com
http://bisakomputer.com/mengenal-less-framework-untuk-css/
http://www.ngulikweb.com/internet/mengenal-node-js-jalankanjavascript-di- server/
http://her0satr.staf.ub.ac.id/2012/11/github-apa-itu-fungsidan-manfaat- github/

PHP dan Mysql
Tentang Penulis
Sopian Hadianto, merupakan Mahasiswa Aktif
Jurusan
Sistem
Informasi
di
Universitas
Komputer Indonesia (UNIKOM)
Bandung.
Penerima
Beasiswa
Unggulan
dari BPKLN
DIKTI ini masih menempuh pendidikan S1 di
UNIKOM semester 5. Selain kuliah, penulis juga
mengerjakan
permintaan
proyek
untuk
pembuatan website. Penulis juga memiliki hobi
menulis, baik buku yang bertema komputer
maupun novel fksi, cerpen dll.
Kegiatan penulis lainnya :
Aktif menulis buku komputer dan novel
Pengembang perangkat lunak lepas terutama pemograman
web
Pengembang situs tugaskampus.web.id
Penulis dapat dihubungi melalui :
Email
: sopian.hadianto1@gmail.com
Facebook : facebook.com/sopian.hadianto1
LINE
: pianhadi

Membangun Responsive Website Dengan Twitter Bootstrap 2

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Membangun Responsive Website Dengan Twitter Bootstrap 2

Uploaded by

Copyright:

Available Formats

I

Membangun Responsive Website dengan Twitter Bootstrap 2.0 _

Sleek, intuitive, and powerful front-end

BUilt at Twrttor by @mdo and

Oootslrap was modo to not

r.ss, rs compllfld vra Node,

help rurds do rJWesorrre

W!JI.J I.Jfls!Jtl Cw;lnrulmr lo llll1k9

Uootslrap your own

Sopian Hadianto - founder of Geek House - geekhouse.biz

Membangun Responsive Website dengan Twitter Bootstrap 2.0 +

2.1. Layout Website Company Profile/Portfolio

5.8. Membuat halaman

Membangun Responsive Website dengan Twitter Bootstrap 2.0 +

6.5. Menambahkan efek Smooth Scroll untuk mempercantik

Apa itu Bootstrap ?

Bootstrap adalah sebuah Framework yang dikembangkan

dengan javascript maupun di sisi server dengan bantuan

Node.js adalah sebuah platform software yang dipakai untuk

GitHub juga merupakan tempat terbaik untuk berbagi kode

Made for everyone. Dibuat untuk

Packed with features. Dikemas dengan

12 kolom untuk grid yang responsive, lusinan komponen/widget,

1.2. Memulai Bootstrap

[ Dokumentasi Bootstrap versi 2.3.2 ]

[Struktur File Bootstrap versi 2.3.2, un-compiled file ]

[bootstrap.js (un-compiled) dan bootstrap.min.js (compiled)]

Sama halnya dengan bootstrap.js dan bootstrap.min.js,

halflings.png dan glyphicons-halflings-white.png yang dapat

[Glyphicons Free licensed under CC BY 3.0.]

[File HTML yang umum, tanpa bootstrap]

Membangun Responsive Website dengan Twitter Bootstrap 2.0 +

File HTML dengan bootstrap :

[File HTML dengan bootstrap]

[Menyimpan file html]

Lalu buka di browser Anda.

[File HTML dengan bootstrap diuji di browser]

Apakah tampilannya seperti gambar di atas?

Kenapa tampilan tidak

../ = keluar satu folder dari folder

Bukalah kembali file latihan-1.html

Maka tampilan responsivenya adalah sebagai berikut.

[ Tampilah Mobile Tool Responsive Mozilla FireFox ]

[ Tampilah Mobile mengecilkan jendela

Selanjutnya sama saja dengan cara 1, ingat jangan copas.

Bootstrap membutuhkan HTML 5 doctype untuk disertakan

Layout adalah suatu kerangka dasar atau suatu tempat

layout di dalam Bootstrap mirip halnya dengan membuat

Kolom ke-2 baris

Selain menggunakan tag <table>dalam merancang layout,

[Layout ketika resolusi layar device lebih

[Layout ketika resolusi layar device kurang

Inilah yang dinamakan dengan responsive, sehingga kita tidak

[Tampilan website non-responsive]

Untuk membuat 1 baris kosong kita memakai kelas .row

Untuk membuat kolam kita menggunakan kelas .span*

Tentu saja, hal ini karena bootstrap juga menghendaki tampilan

Terlihat adanya jarak antara kolom 1 dan 2, itu karena di kolom

Tampak bahwa, grid rapat ke sisi jendela browser atau

Akan tetapi jika kita memakai bootstrap.min.css (compiled css)

Memodifikasi lebar dari

Menumpuk element secara mengambang/float

Me-resize heading dan teks supaya lebih sesuai