Anda di halaman 1dari 328

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
Sopian Hadianto ~ founder of Geek House ~
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
6.4.2. Section Layanan
............................................................................. 254
6.4.3. Section
Portfolio............................................................................. 260

5
Sopian Hadianto ~ founder of Geek House ~
geekhouse.biz

Membangun Responsive Website dengan Twitter Bootstrap 2.0 +


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]

Membangun Responsive Website dengan Twitter Bootstrap 2.0 +


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 -->
<td>Kolom ke-1 baris ke-2</td>
<td>Kolom ke-2 baris ke-2</td>
</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

Membangun Responsive Website dengan Twitter Bootstrap 2.0 +


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
Sopian Hadianto ~ founder of Geek House ~
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
Sopian Hadianto ~ founder of Geek House ~
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

Membangun Responsive Website dengan Twitter Bootstrap 2.0 +


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
Sopian Hadianto ~ founder of Geek House ~
geekhouse.biz

b.

Single toggle

98
Sopian Hadianto ~ founder of Geek House ~
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
Sopian Hadianto ~ founder of Geek House ~
geekhouse.biz

Ketika diklik item #2 maka akan berubah menjadi seperti


berikut.

Sopian Hadianto ~ founder of Geek House ~


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 :
<!-- Bootstrap -->
<!DOCTYPE html>

<html>
<head>
<!-- Meta -->
<!-- Judul Website Anda, akan muncul dalam tab di browser-->
<title>Proyek-Web-Portfolio</title>
<!-- Link Favicon (icon website), ditampilkan di sebelah Judul website -->
<link rel="apple-touch-icon-precomposed" sizes="144x144"
href="./assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114"
href="./assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72"
href="./assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed"
href="./assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="./assets/ico/favicon.png">
<!-- Meta, untuk mengenali spesifikasi device (desktop, mobile, tablet)
untuk mendukung fitur responsive Bootstrap -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- fungsi require() digunakan untuk memasukan file .php atau .html -->
<!-- Meta -->
<!-- Link-css -->
<!-- Link file css yang dibutuhkan -->
<link href="./assets/css/bootstrap.css" rel="stylesheet" media="screen">
<!-- Link file css baru untuk memodifikasi Desain di Bootstrap -->
<link href="./assets/css/main.css" rel="stylesheet" media="screen">
<!-- Link file css yang dibutuhkan -->
<link href="./assets/css/bootstrap-responsive.css"
rel="stylesheet" media="screen">

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


</head>
<!-- Script-Js -->
<!-- Link file javascript yang dibutuhkan

-->

<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>
<!-- Script-Js -->
</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>.


<!-- Section-Index -->
<div class="row-fuid" id="section-index">
<!-- Section-Beranda -->
<div class="row-fuid" id="section-beranda">
<!-- Section-Navigasi -->
<div class="row-fuid" id="section-navigasi">
</div>
<!-- Section-Navigasi -->
<!-- Section-Slide-Show -->
<div class='row-fuid' id='section-slide-show'>
</div>
<!-- Section-Slide-Show -->
</div>
<!-- Section-Beranda -->
<!-- Section-Layanan -->
<div class='row-fuid' id='section-layanan'>
<!-- Section- -->
<div class='row-fuid bg-gray'>
</div>
<!-- Section- -->
</div>
<!-- Section-Layanan -->
<!-- Section-Portfolio -->
<div class="row-fuid" id="section-portfolio">
<!-- Section- -->
<div class="row-fuid ">
</div>
<!-- Section- -->
</div>
<!-- Section-Portfolio -->
<!-- Section-Blog -->
<div class="row-fuid" id="section-blog">
<!-- Section- -->

<div class="row-fuid">
</div> </div>
<!-- Section- -->
<!-- Section-Blog -->
<!-- Section-Kontak -->
<div class="row-fuid" id="section-kontak">
<!-- Section- -->
<div class="row-fuid bg-gray'">
</div>
<!-- Section- -->
</div>
<!-- Section-Kontak -->
<!-- Section-Footer -->
<div class="row-fuid" id="section-footer">
<!-- Section- -->
<div class="row-fuid">
</div>
<!-- Section- -->
</div>
<!-- Section-Footer -->
</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.
<!-- 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">
&nbsp;&nbsp;&nbsp;
<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><!--/.nav-collapse -->
</div>
</div>
</div>

</div>
<!-- Section-Navigasi -->

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.
<!-- Section-Layanan -->
<div class='row-fuid' id='section-layanan'>
<!-- Section- -->

Simpanlah, lalu bukalah di browser anda.

Sopian Hadianto ~ founder of Geek House ~


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.

Sopian Hadianto ~ founder of Geek House ~


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">
&nbsp;&nbsp;&nbsp;
<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 */
.navbar-inverse .btn-navbar {
margin-right:20px;
}
.nav{ Padding-left:30px;
}
/* navbar */

Sopian Hadianto ~ founder of Geek House ~


geekhouse.biz

11
3

Coba bukalah file index.html anda lagi.

Sopian Hadianto ~ founder of Geek House ~


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 */
.navbar-inverse .btn-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.
<!-- Section-Slide-Show -->
<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='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>
<!-- Section-Slide-Show -->

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.

Sopian Hadianto ~ founder of Geek House ~


geekhouse.biz

11
7

Maka tampilan modifikasinya seperti berikut :

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.

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.

Sopian Hadianto ~ founder of Geek House ~


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 >&nbsp;</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>
<div class= 11 span411 >
<img src= 11 /assets/OO/example -sites/site -5 -.l)SJ'1 a lt=1111

class="JJ!Ig JJ!Ig-Qg ">

<h4>id 1& non mi.</h4>


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

class="JJ!Ig JJ!Ig-Qg ">


<h4>id non mi.</h4>
</div>
<div class= 11 spanl 11 >&nbsp;</div>
</div>

124

Sopian Hadiantofounder of Geek Housegeekhouse. biz

Membangun Responsive Website dengan Twitter Bootstrap 2.0 +


PHP dan Mysql

Tampilan section-porfolionya seperti berikut.

Sopian Hadianto ~ founder of Geek House ~


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

Sopian Hadianto ~ founder of Geek House ~


geekhouse.biz

13
0

Sopian Hadianto ~ founder of Geek House ~


geekhouse.biz

13
0

Sekarang buatlah kelas .section-3.

Tampilan section-kontak.

Sopian Hadianto ~ founder of Geek House ~


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

Membangun Responsive Website dengan Twitter Bootstrap 2.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
Sopian Hadianto ~ founder of Geek House ~
geekhouse.biz

14
1

Membangun Responsive Website dengan Twitter Bootstrap 2.0 +

PHPyang
dan Mysql
FreeSoftware
berada dibawah Lisensi GNU/GPL ( General
Public License ).

Sopian Hadianto ~ founder of Geek House ~


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.

Sopian Hadianto ~ founder of Geek House ~


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.

Sopian Hadianto ~ founder of Geek House ~


geekhouse.biz

14
8

Jika menggunakan kode dan MySQL Console,


kodenya akan seperti berikut :
CREATE TABLE `portfolio_db`.`admin` (
`id` INT( 5 ) NOT NULL AUTO_INCREMENT
PRIMARY KEY
,
`username` 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

Sopian Hadianto ~ founder of Geek House ~


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-web- portfolio 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.
Sopian Hadianto ~ founder of Geek House ~
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


1. Cut kode yang terblok.

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
<!-- Secton-511de-Show

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

<!-- Seccion-Slide-Show -->


d. Templating website Ia njut- Section-Lava nan
1. Cut kode yang terblok.
<!-- Section--->
Kdiv class= 11 row-fluid 11 id=11 section-

11

>

<!-- Section-->

site-l.RO,g11 alt =11 11

>

site-3 .RO,g11 alt =11 11

>

165
Sopian Hadianto founder ofGeek Housegeekhouse.biz

Membangun Responsive Website dengan Twitter Bootstrap 2.0 +


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.

Sopian Hadianto ~ founder of Geek House ~


geekhouse.biz

16
6

4.

Lalu masukan file layanan.php anda di dalam file index.php.

e. Templating website lanjut Section-Portfolio


1. Cut kode yang terblok.

Membangun Responsive Website dengan Twitter Bootstrap 2.0 i>Hi> dan Mysql

<!-- Section-Portfolio
-->

<!-- Section- -->

<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

Membangun Responsive Website dengan Twitter Bootstrap 2.0 +


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


Cut kode yang terblok.

Sopian Hadianto ~ founder of Geek House ~


geekhouse.biz

16
9

< 1 -- Section-->

<div class= 11 t'0\'1-fluid11 id= 11 section-&l,Q;{:' 1 >j_

<!-- Section-

<div class= 11 t'O

I
I

<div class
<div class

Paste

<hl>c
</div>
<div class
<div class
<div class
<img s

Select All

I
I

alt=11
cl
<h4>Rgj
</div<>p
e

Cut

Copy
Delete

Style token
Remove style

Plugin commands
n

es/site-l. ROSJ11

UPPERCASE
at... s1:>>]

lowercase

Hide Lines
<div class
<img src= . /assetS/JJ!!II/example-sl ces/site-2 !WSI" alt=nn I
clasS=11 00 w-rounded 11 >
I
<h4> ,& id i,J< non mi.</h4I >
<p> ,&. id i.J< . non mi.
at... s1:>>]
</div> I
<div class= 11 span3 11 >1
<img src= 11 /assets/OO/example-sites/site-3 . RO,g11 alt=nn I
class="JJ!!g JJ!!g-rounded">
<h4> ,& id i,J< non mi .4</ h4>
<p>
<ill]
id Ull non miat
</div> I
<div class= 11 span111 >&nbsp;< /div> 1
<i,d. iv>J

Sopian Hadianto founder of Geek House


geekhouse.biz

'>,

17
0

2.
3.

Buatlah folder blog, di dalam folder section.


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.

Sopian Hadianto ~ founder of Geek House ~


geekhouse.biz

17
1

g. Templating website lanjut Section-Contact


1. Cut kode yang terblok.

2.
3.

Buatlah folder contact, di dalam folder section.


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.

h. Templating website lanjut Section-Footer


1. Cut kode yang terblok.

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

1.

Cut kode yang terblok.

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.

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.

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.

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

Penjelasan home.php:

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

Sopian Hadianto ~ founder of Geek House ~


geekhouse.biz

18
0

Advance templating untuk halaman content, menggunakan


variable menu yang di lewatkan di url. Jika variable menu di
dapat maka, akan di eksekusi perintah selanjutnya. Jika tidak ada,
maka akan di lempar ke baris 41-44.
3133
Jika variable menu di dapat maka, akan dipanggil
halaman content.php.
3438
Jika isi variable menu bukan home, maka akan ditampilkan
pemberitahuan bahwa menu yang anda klik halamannya belum
dibuat.
Anda akan lebih memahami system templating ini
selanjutnya.

5.3. Halaman halaman pendukung yang dibutuhkan


meta.php

Simpanlah dengan nama meta.php pada folder admin anda.

link.php

Simpanlah dengan nama link.php pada folder


admin anda. menu.php

Simpanlah dengan nama menu.php pada folder


admin anda. content.php

Simpanlah dengan nama content.php pada folder admin


anda.

footer

Simpanlah dengan nama footer.php pada folder admin


anda.
Coba bukalah halaman home.php anda.

Coba pilih menu admin atau salah satu menu

Dengan variable templating ini, maka konten konten lainnya


dapat ditempatkan pada section content dengan memanfaatkan
variable pada alamat url yang ada di konten.

Terlihat pada alamat url home.php?menu=admin, variable menu


bernilai admin, maka ketika menu admin dikilk, halaman akan
menuju home.php. Dan di home.php akan dilakukan pemeriksaan,
terhadap kecocokan variable menu. Karena pada halaman
home.php, tidak ada kondisi jike $menu==admin, maka akan
ditampilkkan pemberitahuan halaman belum dibuat seperti di
atas.

Selanjutnya anda akan menambahkan kondisi lainnya pada


home.php, sama seperti di atas setiap kondisi yang sesuai
dengan variable yang di lewatkan lewat url akan

diseleksi untuk ditentukan, halaman apa yang harus


ditampilkan pada section contentnya.
5.4. Menambahkan kondisi untuk variable templating
1. Buka home.php anda dan tambahkanlah kode berikut

Membangun Responsive Website dengan Twitter Bootstrap 2.0

+ PHP dan Mysql

34
35

36
37

II
else if ($menu==" ) {
re<IUire ("content"./) ;

38

39
40

41
42
43
44
45
46

47

else if ($menu==-"
"){
re<IUire ("content") ;
else if ($menu==-" update") {
re<IUire ("content -update". ) ;
IIJ:enJ< OSJ
else if ($menu=="elll: OSI") {
re<IUire ("contentll)l: OSIIelll: OSI") ;

48
49

50
51
52
53

else if ($menu=="elll: OSJ") {


re<IUire ("contentll)l: OSIIelll: OSJ") ;
else if ($menu=="elll: OSJ-Update") {
re<IUire ("contentll)l: OSIIelll: OSJ-Update". ) ;

54

55

11a :Uli:
else if ($menu=="uJ< li:e"l{
re<IUire ("contentl!:l< li:eV !:J; li:e"l;

56
57
58

59
60
61
62

63

else if ($menu=="uJ< li:e"l{


re<IUire ("contenti.:J< li:eV !:J; li:e") ;
else if ($menu=="!:J; li:e-update") {
re<IUire ("contentl!:l< li:eVUJ< li:e-update". l;

64

65
66
67
68

II J; t
else if ($menu=="l;:ijJ; t") {
re<IUire ("contentll;;ij tVli:ij t". ) ;

188
Sopian Hadianto founder of Geek House geekhouse.biz

2.

Simpan kembalilah file home.php anda.

5.5. Membuat folder folder untk setiap konten menu admin.


1. Buatlah folder content, sebagai folder utama konten
admin.
Sopian Hadianto ~ founder of Geek House ~
geekhouse.biz

18
9

2.

3.

Buatlah folder untuk masing masing menu admin


di dalam folder content.

Buatlah folder lainnya seperti gambar di bawah.

5.6. Konten menu


5.6.1. Menu Slide
Show slide_show.php

Sopian Hadianto ~ founder of Geek House ~


geekhouse.biz

19
0

2
3

4
5
6
7
8
9

10

<h4 class="text-info">slide_show</h4>

<a href =''home ?. menu=slide_show- class=-success'' >


slide_show
</a>
<hr>

- <table border= 1 class=" table table-striped" width= ' 100% '>

- <t r class= ' success ' >


<td>Id</td><td></td><td></td><td</td>
<td>edit</td><td></td>
</tr>

11

12
13

14
15
16

17
18
19
20
21
22
23
24

- <?php
include " !: ::!Jo".;
SdaeaPerPage
5;
if(isset(S_GET('page')))

- {

SnoPage = $_GET['page');
else SnoPage = 1;
//s: g n offset
$offset = ($noPage - 1) $dataPerPage;
//query
oos:
n data S: Q n offset
$se lect

"select

//$select

30

31

32

from slide show order by id limit

$o f fse t, $dataPe rPage n ;

25
26
27
28
29

"select

from slide_show";

$sql = mysgl_query($select);
while($hasil = mysql_fetch_array($sql))
$id = $hasil['id');
$judul = $basil [ ' I ;

Sopian Hadianto founder of Geek Housegeekhouse.biz

19
1

33
34

$deskripsi = stripslashes($hasil['
'));
$gambar = stripslashes($hasil['
'));

35

36
37

echo"<u ><U!>$id</U!><U!>$judul</U!><U!>$deskripsi<U!>
<!llla =../images/slide_show/".Sgambar."'
widt.h='lOO'I><IU!>"
"<&,Q><a ='home.?me::lu=slide_show-update&&id=$id'>

38
39

<i

class='icon-edit'></i> Edit</a></&,Q>".

40
41
42
43
44
45

echo"</table>";
echo "<class='container'>";
//mdata slide show

46

$que ry1

47
48
49

$result = mysql_query($query1);
$data = mysql_fetch_array($result);
$jumData = $data['jumData');

50
51
52
53
54

"<&,Q><a ='conte::lt/slide_show/slide_show-.?id=$id'>
<i class=' icon-trash' ></i > Delete</&,Q></a>";

= "select

count( ..) ag jumData from slide_show";

x
yang
n data
$jumPage = ceil($jumData/$dataPerPage);
//link previous
echo "<class='tf_pagination style3 container'><class='inner'>";
- if($noPage>1){
1/m

55

echo "<a

56
57
58
59

='home .?me::lu=slide_show&&page=" . ( $noPage -1) .

60

class='page_prev -success'

for($page = 1; $page <= $jumPage; $page++)


- {

if((($page >= $noPage


1)

62

64

"'>

<spa.!l><</spa.:1></a>";

61

63

- 3) && ($page <= $noPage + 3)) II ($page

if(($showPage 1) && ($page != 2)) echo "..";


if(($showPage != ($jumPage - 1)) && ($page == $jumPage))

192
Sopian Hadiantofounder of Geek Housegeekhouse.biz

Simpanlah dengan nama slide_show.php pada folder slide_show


yang ada di dalam folder content.
Penjelasan slide_show.php:
Baris
2-4
11

Penjelasan
Membuat button untuk menambah data Slide Show.
Fungsi include untuk memasukan fle koneksi.php, untuk
mengkonfgurasi
database MySQL
13
Menentukan
data yang ditampilkan per halamanya maksimal
5
data
14 17 Mendapatkan value dari variable page, lalu mengisi var.
$noPage dengan
value
dari
var. $page
18
Jika
var.
$page
tidak ada maka, var. $noPage valuenya diset
1
21
Perhitungan
$ofset
24 - 25 query untuk menampilkan data perhalaman sesuai $ofset
28
Mengeksekusi query 24 25 dengan fungsi mysql_query
29
mysql_fetch_array digunakan untuk mengambil data dari
database, selama
data masih ada maka akan ditampilkan data dari table
slide_show
baris
record dengan nama field id.
31
var.
$id akan
diisi31
oleh
36
Mencetak record $judul dan $deskripsi
37
Menampilkan gambar

Sopian Hadianto ~ founder of Geek House ~


geekhouse.biz

19
3

38 39 Menampilkan link edit untuk meng-update data, akan


dilewatkan var. id
menjadilink
referensi
update nya data, akan
40 41 untuk
Menampilkan
hapushalaman
untuk meng-hapus
dilewatkan var. id
untuk menjadi
halaman
hapus
46
Mencari
jumlahreferensi
semua data
dalam
tabelnya
slide_show, jumlah
data tersebut
akan dimasukan
ke dalam record alias jumData
47
Mengeksekusi
query
48
Mengambil data dari database
49
Memasukan jumlah data dari record jumData ke dalam var.
$jumData
51
Menentukan jumlah hal. yang muncul berdasarkan jumlah
semua data link previous jika var. $noPage > 1
53 58 Menampilkan
59 72 Menampilkan pagination atau data per halaman
74 78 Menampilkan link previous jika var. $noPage > 1
80
Menampilkan total record

slide_show-hapus.php

Simpanlah dengan nama slide_show-hapus.php pada folder


slide_show yang ada di dalam folder content.
penjelasan slide_show-hapus.php
Baris
2

Penjelasan
Memasukan koneksi.php

4
7

Mengambil var. $id yang dilewatkan dari halaman


slide_show.php
Query
untuk menampilkan record dari tabel slide_show yang
memiliki id =
var
$id
9
Mengeksekusi
query
19
Mengambil record dari tabel
11
Mengisi var $gambar, dengan alamat gambar yang akan
dihapus
12
Jika
gambar ada maka gambar akan dihapus dengan fungsi
unlink
15
Query untuk menghapus record
16
Mengeksekusi query hapus record
18 30 Mengurutkan id auto_increment
32
Me-redirect halaman menuju home.php?menu=slide_show,
atau menuju halaman slide_show.php

slide_show-tambah.php

Simpanlah dengan nama slide_showtambah.php. penjelasan slide_showtambah.php


Baris
Penjelasan
32 55 Menampilkan form untuk menambah data slide_show, jika
data di submit maka akan diproses oleh kode php di baris
yang atasnya
5
Fungsi
trim = menghapus spasi kosong di awal
karakter, addslashes =
menambahkan backslashes (\) di setiap tanda kutip
dalam stringgambar
untuk mengamankan inputan ,
9 15 (quote)
Proses mengupload
9
Mengisi var $sumber dengan lokasi fle gambar awal yang
akan diupload

10 11 Mengisi var $tujuan dengan alamat tempat gambar slide


show yang diupload
(tujuan
14
Mengisi upload)
var. $gambar dengan nama gambar
15
Fungsi move_uploaded_fle untuk menyalin fle gambar dari
alamat awal
gambar ke alamat
tujuan baru
17 29 Memasukan
data slide_show
baru ke dalam tabel slide_show

slide_show-update.php

Simpanlah dengan nama slide_show-update.php


penjelasan slide_show-update.php
Baris
1 11

Penjelasan
Menampilkan record dari tabel slide_show yang memiliki id
yang dilewatkan
dari halaman slide_show.php
12 39 Menampilkan
form yang telah berisi record dari query di atas
14
action='content/slide_show/slide_show-update-p.php', ketika
fle submit
diklik maka akan dibuka file slide_show-update-p.php untuk
meng-update

slide_show-update-p.php

Simpanlah dengan nama slide_show-update-p.php.


penjelasan slide_show-update-p.php

Baris
39
11 -17
19
22
23

Penjelasan
Mendapatkan data yang diinputkan
Proses upload gmbar
Query untuk update record pada tabel slide_show
Jika query sukses, maka akan di-redirect ke
halaman
home.php?menu=slide_show
Jika
query gagal, akan ditampilkan pemberitahuan, upload
gagal

Halaman halaman selanjutnya memiliki koding yang hampir


sama dengan sehingga untuk penjelasannya hampir sama
dengan penjelasan penjelasan di atas.

Sopian Hadianto ~ founder of Geek House ~


geekhouse.biz

20
0

Membangun Responsive Website dengan Twitter Bootstrap 2.0 i>Hi> dan Mysql

5.6.2.

Menu Admin

admin.php
<h4 class="textinfo"></h4>

class="-success">

<a href="home.rum?
menu=-"
2

>

</a>
- <table bo=der-= ' 1 ' class=" table table-striped" width= ' 100% '
6

- <tr class= 'success' >

<td>id</td><td> Q9m</td><td>password</td><td></td>
<td>edit</td><td></td>
</tr>
-<?php
incl.ude "!!!:Ito:!";

!0
!2
3
!
5

!6

$dataPerPage

5;

- {

$noPage = $_GET['page');
else $noPage

20

if(isset($_GET['page'JII

1;

$offset = ($noPage - 1) $dataPerPage;


$adminbaru = "select from orde= by id lt

$offset,

$dataPerPage ;
22
23
2
25
26
2-

$sql. = mysql_query($adminbaru);
whil.e($hasil = mysql._fetch_array($sql))
{

$id = $hasil.['id');
$username
$password

= $hasil['
;n');
= stripslashes($hasil['password']);

2e

$ket = stripsl.ashes($hasil.[''));

29
30

echo..<u >

32

<>$id</><>$username</>$password</>
<>Sket</>

201
Sopian Hadianto founder of Geek Housegeekhouse.biz

Mem bangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
33
34
35
36
37
38
39
40

<><a ='home.?meu=-update&&id=$id'>
<class='icon-edit'></> Edit</a></>
<>
<a ='conte t//-?id=$id'>

<i

class='icon-trash'></i> Delete</&Q>

<Ia>" :
echo "</ table>";

41
42
43
44

echo "<class='col--12'>";
Itms: <s.n d&ta

45

$que ry1

46
47
48

$result = mysql_query($query1);
$data = mysql_fetch_array($result);
$jumData = $data['jumDat&');

49
50
51

//ms:!<S:!<

52

echo

= "se lect count ( ..) as jum.Data f rom "';

!<
yang !:n data
$jumPage = ceil($jumData/$dataPerPage);
//ms:!<
!< link previous

"<class='tf_pagination style3 col--12'><class='inner'>";

53 -if($noPage>1){
54
echo "<a class=-'success'
='home.?me::lu=&&page="
55
. ( $noPage-1) . "'><spa.:l><</spa.:l></a>";
56
57
for($page = 1; $page <= SjumPage; $page++)
58 - {
59
if((($page >= $noPage - 3) && ($page <= $noPage + 3))
60
II ($page == 1) I I ($page == $jumPage))
61
62
if(($showPage == 1) && ($page != 2)) echo " "
if(($showPage != ($jumPage - 1)) && ($page == $jumPage)) echo
63
"..";
if($page == $noP&ge){
64

echo "<a '#' class'paoe-numbers -warnl.nQ'Xb>"

vS
66
67
68
69

.$page."</b></a>";

$showPage = $page;

-1

72

if(SnoPage < SjumPage)

73

echo "<a class-s ccess'

74
75

.{$noPage+1)."'><spa..-:>></span>< a></><. >";

"76

echo"</>" ;

78

?>

echo

"<hS>Total

Record

'home.? enu-&&page"

$jumData records</h5>";

Simpanlah dengan nama admin.php pada folder admin yang


ada di dalam folder content.
admin-hapus.php

Simpanlah dengan nama admin-hapus.php pada folder admin


yang ada di dalam folder content.
admin-tambah.php

Sopian Hadianto ~ founder of Geek House ~


geekhouse.biz

20
3

Membangun Responsive Website dengan Twitter Boatstrap 2.0 + PHP dan Mysql

1
2
3

- <?php
include "Jmm: Jo".;
if(isset($_POST['input')))

- {

5
$username = trim(addslashes(strip_tags($_POST[' j)));
6
$password =
trim(addslashes(strip_tags($_POST['password'))));
7
$ket = trim(addslashes(strip_tags($_POST['
'))));
8

$selectuser = "select from where

10

'Susername'n;

11
12
13

$sqluser = mysql_query($selectuser);
$cek = mysql_num_rows($sqluser);
if($cek==O){

14
15
16
17

$insertquery = ninsert

$sql = mysql_query($insertquery);

18
19

if($sql)

20

21
22

into values

('','Susername','$password','$ket')n;

echo n<h4><font ='blue'>

Data ti &:!:!MU !< !:!!!:</font></h4>";

23
24

else

25
26

27
28
29
30

echo n<h4><font ='blue'>

Data

!<

!:!!!:</font></h4>";

Sopian Hadianto founder ofGeek Housegeekhouse.biz

20
4

Membangun Responsive Website dengan Twitter Bootstrap 2.0 +


PHP dan Mysql

Simpanlah dengan nama admintambah.php. admin-update.php

Sopian Hadianto ~ founder of Geek House ~


geekhouse.biz

20
5

2
3
4
5
6
7
8

9
10
11

12
13
14
15
16

/>
17
18
19
20
21
22
23
24
25

- <?php

include "QS: Jo".;


$id=$_GET['id');
$query = nselect
fromwhere
id='$id'n;
$sql = mysql_query($query);
$hasil = mysql_fetch_array($sql);
$id = $hasil['id');
$username = $hasil[' s : m ru:'I;
$password =
stripslashes($hasil['password'));
$ket
= stripslashes($hasil['
'));
?>
class='container'>
<h4 class='text-info'> Update Data </h4>
<form method='post' action='content//-update-p.'
name='input' class='orange'>
<input type='hi dden' name='id'

<div>
: <input type='text' name='(Q
value='<?php echo $userne; ?>' class='input-' >
</div>
<div>Password : <input type='text' name='password'
value='<?php echo $password; ?>' class='input-'>
</div>
<div>
:
<select name=''
class='input-'>
<option value='
' ></option>

26
27

28
29
30
31
32

<option value='user'>user</option>
<option value='member'>member</option>

</select>
<span style=':red:'>
: <b>
<?php echo $ket; ?></b> </span>
</div>
<ldiv>

33

31
35
36
3
3,

value='<?php echo Sid; ?>'

<input

type='submit' name='input'

value='Opdate
class= -success'>
<a class=-danger'
href='home.?menu'></a>
</div>
</div>

Simpanlah dengan nama admin-update.php


a dm in-upd ate-p.p hp

Sopian Hadianto founder of Geek House


geekhouse.biz

206

Simpanlah dengan nama admin-update-p.php.


5.6.3. Menu
Artikel artikel.php

Sopian Hadianto ~ founder of Geek House ~


geekhouse.biz

20
7

Membangun Responsive Website dengan Twitter Bootstrap 2.0 i>Hi> dan Mysql

1
2
3
4
5

<h4 class="text-info"></h4>
<a href ="home?. menuc-=lass=

11

-success

11

</a>
<hr>

- <table border= ' 1' class= ' table table-striped' width= ' 100 ' >

7
8

- <tr class= ' success' >


<td>Id </td><td></td><td></td>
<td>Headline</td><td></td><td>/td><td></td>
<td/td><td>edit</td><td>Qij</td>
</tr>
- <?php
include "";
$dataPerPage = 5;
if(isset{$_GETI'page']))

10
11

12
13
14
15
16
17

18
19
20

>

-{

;noPage = ; _GET [ 'page'];


else ;noPage = 1;
//e ijn offset

21
$offset = {$noPaqe - 11 $dataPerPaqe://limit $offset,
$dataPerPaqe "
22

//query

23

$art ike lbaru

24
25

26
27
28
29
30
31
32
33

34

men mQik en
=

data

offset

"select a . id_artikel, a . id_kategori, b . nm_kategori,

a.:J.mll!lv a.headline, a.Mj,, a.


;:im. a..
a.
from l;:J; ea,
eJ; ;;b
where a , id_kategori = b . id_kategori
order by a.id_artikel limit
$offset, $dataPerPage "
;sql = mysql_query{$artikelbaru);

while{$hasil = mysql_fetch_array{$sql))
{

$id_artikel = $hasil('id_artikel'];
$id_kategori = $hasil('id_kategori'];

Sopian Hadianto founder of Geek Housegeekhouse. biz

208

Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan


Mysql

35
36

$judul = stripslashes{$hasili'
' J );

37

$headline = nl2br{stripslashes{$hasil['headline']));

38

$headline2=substr($headline,0,10);

39

$isi = nl2br{stripslashes{$hasil['
' ]));

40
41
42
43
44
45
46
47
48

$isi2=substr{$isi,0,30);

$kategori

$penqirim = stripslashes{$hasil['Rej);
$tanqgal = stripslashes{$hasil['
' J );
;gambar = stripslashes{$hasil['
' J );

echo"<><&Q>$id_artikel</&Q><&Q>Sjudul</&Q><&Q>Skateqori<I&Q>
<&Q>$headline2</&Q>
<&Q>$isi2</&Q><&Q>$pengirim</&Q><&Q>$tanggal</&Q>
<&Q><JJ!o!='../$gambar' width='50'>< I&Q>

49

50
51
52
53
54
55
56

= stripslashes{$hasil[nm_kategori ]);

<&Q><a =home.Qbg?menu=-update&&id_artikel=$id_artikel>

<class=icon-editxt> Edit</a></&Q>
<&Q><a ='content/
/-?id_artikel=$id_artikel'>
<class= icon-trash ><!!,> Delete<>/<>/ ";
echo "</table>";

57

58

echo "<Qix class= col--12 >";

59

d at.a

60
61
62
63
64
65
66
67

;queryl = "select count{*) as jum;)ata from ";


$result = mysql_query{$queryl);
$data = mysql_fetch_array{$result);
$jumData = $data('jum0ata'];
yang
daca
ttmenU&ijo
Qe
eo
$jumPaqe = ceil{$jumData/$dataPerPage);
/tmen l eo link previous
echo "<class= tf_pagination style3 col--12 ><class= inner >";

Simpanlah dengan nama artikel.php pada folder artikel yang


ada di dalam folder content.
artikel-hapus.php

Sopian Hadianto ~ founder of Geek House ~


geekhouse.biz

21
0

Simpanlah dengan nama artikel-hapus.php pada folder artikel


yang ada di dalam folder content.
artikel-tambah.php

1
2
3
4

-<?php
include "IW2";
//proses input
if(isset{$_POSTI'input']))

-{

6
7
8
9

10
11

$judul = trim(addslashes(strip_tags{$_POST[
])));
$kategori = $_POST('l;ijJ; t' ] ;
$getnm = "select nm_kategori Erom l;ijJ; twhere id_kategori
$sqlgetnm = mysql_query{$getnm);
$rqetnm = mysql_fetch_array{$sqlgetnm);

$kateqori

$nm = $rgetnm[nm_kategori ];
12
13
$headline =
14
trim(addslashes(strip_tags{$_POST['headline'])));
15
$isi_artikel =
trim(addslashes(strip_tags{$_POS[:'
' ])));
16
$pengirim
trim(addslashes(strip_tags{$_POST['
' ])));
17
$swrber = $_FILE:S[
]['tmp_name'];
18
$tujuan = "../images/".$nm."/".$_FILES[]['name'];
19
$tujuan1= "/images /".$nm."/".$_FILE:S[
]['name'];
20
21
llllllllllllllllllll/1
22
$gambar=$_FILE:S['
' l['name'];
23
llllllllllllllllllll/1
move uploaded file{$sumber, $tujuan);
24
25
llllfllllllllfllll/1
26
//insert
27

fiU::It:!:l.4
Ut:!:y :
'' iu::Sl::i. t.
itll.O
VCilUt:::S

1
1
1

11

(
$k. tl.c\JVC'i

Sopian Hadianto founder of Geek House geekhouse.biz

1l

jUc.lU

212

28
29
30

31
32
33
34

$headline,sisi_artikel,spengir:m, now{),stujuanl )";


$sql = mysql_query{$insertquery);
if{$sql)
1

echo "<h4Xfont =blue>


Qs;;Ml Q J; OO ij!) </EontX/h4>";

Sopian Hadianto founder of Geek House geekhouse.biz

213

35
36
37
38

else
echo "<h4Xfont ='blue'>Q J; IJ!Qi!l!l;ij!) </EontX/h4>";

39
40

41
42

43

44
45
46

47
48
49

50
51
52

- <div class= 'container' >

<a class='-success' href='home.?menu='>Data</a>


<h4 class= ' text-inf o ' > Input< / h4>
- <table>

<form method= 'post' action= '' name= ' input' class= ' orange'
enctype= ' !/ f orm-data' >
<trXtd>< / tdXtd>:< / tdXtd>

<input type='text' name='


'

class='input-' maxlenqth='lOO'>

< / tdX / tr>


<trXtd> .Qti < / tdXtd>:< / tdXtd>

53

<select name='&0

54
55
56
57
58
59
60
61
62
63
64
65
66
67

<?php
$query = "select id_kateqori, nm_kateqori from l;ij t
order by nm_kategori";
$sql = mysql_query {$query) ;
while(Hsi = mysql_f etch_array {$sql ))
{
echo"<option value='$isi ( id_kategori] '>Sisi ( nm_kategori]
</option>";

t' class='input-'>

?>

</select>
< / tdX / tr>

<tr><td>Headline </td><td>:</td><td> <textarea name='headline'


class='input-'></textarea></td></tr>

Simpanlah dengan nama artikeltambah.php. artikel-update.php

Sopian Hadianto ~ founder of Geek House ~


geekhouse.biz

21
4

1
2
3
4
5
6
7
8
9

10
11

12
13
14
15
16
17
18

19
20
21
22
23
24
25
26
27

28
29
30
31
32
33
34

-?php
include "";
$id_artikel=$_GETI'id_artikel'J;
$artikelbaru = "select a .1d art1kel, a. id_kategori, b. nm_kategori,
a,.
a.headline, a.,
a.Re'
a.,
a.
Erom
a, l(ijJ; tb
where a.id_kategori = b.id_kategori and a.id_artikel='$id_artikel'
order by a.id_artikel ";
;sql = mysql_query($artikelbaru);
$hasil = mysql_fetch_array($sql);
$id_artikel = $hasil('id_artikel'];
$id_kategori = $hasil('id_kategori'];
$judul = strip_tags($hasil['
' J );
$kategori = strip_tags{$hasil('nm_kategori']);
$headline = nl2br(strip_tags($hasil['headline']));
$headline2=substr{$headline,0,10);
$isi = nl2br(strip_tags($hasil['
' ]));
$isi3 = $isi;
$isi2=substr($isi,0,30);
;pengirim = strip_tags($hasil['Rej);
$tanggal = stripslashes($hasil['
' J );
;qambar = stripslashes($hasil['
' J );

?>
- <di v class= ' container' >
<hr>
<h4 class='text-info'> Update</h4>
<form method='post' action='content/
/-update-p.'
name='input' class='orange' enctype=' !/form-data'>
<input type='hidden' name='id_artikel' value='<?php echo $id_artikel; ?>'
class='input-'>

Sopian Hadianto founder of Geek House geekhouse.biz

215

35
36

<input type='hidden' name= value='<?php echo $gambar; ?>'

class='input-'>

37
38

<div> h: <input type='text' name='


'

39

</div>
<div>:

40
41

value='<?php echo $judul; ?>' class='input-'>

<select name='
'>

<?php
;query = "select id_kategori, nm_kategori Erom l;ijJ; t

42
43

order by nm_kategori";

44

;sql = mysql_query{$query);
'"hile{Hsi = mysql_fetch_array{$sql))

45
46
47

$id_kategori=$isi(id_kategori];
$kategori=$isi(nm_kategori];
echo"<option value='$id_kateqori'>$kateqori</option>";

48
49
50

51

?>

52
53

</select>

54
55
56

</div>

57

<div>Headline : <textarea name='headline' class='input-'>

58

59
60
61
62
63
64

65
66
67

68
69

<?php echo $headline; ?></textarea></div>

<div> h: <textarea name=


class='input-'>
<?php echo $isi3; ?></textarea></div>

<div>: <input type='text' name='Re


value='<?php echo $pengirim; ?>' class='input-'></div>
<div>*: <input t)='file'
name='
' class=

value='<?php echo $ambar; ?>' class='input-'>

<label>
</labelX/div>
<div>

"1

<br>

12

<input type'submit' name'input' value'Opdate

3
"5

,"6

class=-success'>
<a class='Qtg Rtn-danger' hreE='home.?oenu='></a>
</div>
<br>
<span style:red;'><b>*Required</b> </span>
<!form>
</div>

Simpa nIa h denga n nama a rtikelupdate.php a rtikel-update-p.php

1
2
3
4
5
6

7
8

9
10
11

12
13
14
15
16
17

18
19
20

21
22

23
24

25
26
27
28

29
30
31
32
33
34

-<?php
include "../. ./.ll@";
//proses inpu't
if (isset($_POST['inpu't']))
-{
$id_ar't ikel = $_REQUEST['id_artikel'];
//$id_kateqori = $_REQUEST['id_kateqori'];
$judul = addslashes(strip_taqs($_REQUEST['
' ]));
$kateqori addslashes(strip_taqs($_REQUEST[' ij QQt']));
$headline nl2br(addslashes(strip_taqs($_REQUEST['headline'])));
$isi = addslashes(strip_taqs($_REQUEST['
' ]));
$pengirim = addslashes(strip_tags($_REQUEST['j));
$qambar = addslashes(strip_ags($_REQUEST['
' ]));
IIimage lama
$getgambar = $_REQUEST1 ru: m :: J :
$qetgambar = "../../../".$qetgambar;
if (file_exists($qetgambar)) { unlink($getgamba.r);
IIl{ijJ; QQt
$qetnm = "'select nm_kateqori from l{ij); QQtwhere id_kateqori $kateqori "
$sqlgetnm = mysql_query($getnm);
$rqetnm = mysql_fetch_array($sqlgetnm);
$nm = $rqetnm['nm_kateqori');
//$nm_kateqori = ij(strip_tags($_POST['nm_kateqori']));
$harqa = addslashes(strip_tags($_POST['
' l ));
$detail = addslashes(strip_ags($_POST['detail']));
//if ( $_FILES['
' ])){
$sumber = $_FILES['
' ]['tmp_name'];
$tujuan = "../../../images//".$nm."/".$_FILES[
]['name'];
$tujuan1= "/images//".$nm."/".$_FILES(]('name'];

llllllllllllllllllll/1
$qambar=$_FILES[
]['name'];

Simpanlah dengan nama artikel-update-p.php.


5.6.4. Menu
Kategori
kategori.php

Sopian Hadianto ~ founder of Geek House ~


geekhouse.biz

21
8

1
2
3

<h4 class= text-info


11

11

>

< /h4>

<a href ="home .tWl)?menu-M :t"- class=-"success">


.Qti

<I a>

7
8
9
10

11
12
13
14
15

16
17
18
19
20
21
22

23
24

25
26
27
28

29
30

31

32
33

<hr>
- <table border= ' 1' class=" table table -striped" width= ' 100' >

- <tr class= ' success ' >


<td>id</ td><td>A .Qti</ td><td ll</ td><td>edit</ td><td>Qij</ td>
</ tr>
- <?php

include;$dataPerkategori

S;

H (isset{$_GET [ 'l;ij t' ] ))


-{
onokategori = ; _GET ( 'l;ij

else $nokategori

t' J

:I

1;

$offset = {$nokategori - 1) * $dataPerkategori;


$kategoriba ru = "select * from l;ij torder by nm_kategori limit
$offset, $dataPerkateqori ";
9sql = mysql_query {$kategoriba ru) ;
while{$hasil = mysql_f etch_array {$sql ))
{

9id_kategori ;9hasil('id_kategori'J;
onm_kategori = $hasil ( 'nm_kategori' J;
$deskripsi = stripslashes{$hasil [ 'Qs 2 j ) ;
echo"<><w>Sid_kateqori<tw><w>Snm_kategori<tw><w>Sdeskripsi</W>".
"<w><a ='home .tWl)?menu=l;ij t-update&&id_kategori=$id_kategori' >
<class=' icon-edit'>< > Edit</a></W>".
"<w><a =' content /l;ij tVl;ij t-.tWl)?id_kategori=$id_kategori' >
<class=' icon-trash'>< > Delete<IW>< I>" ;

34

Sopian Hadianto- founder of Geek House- geekhouse.biz

21
9

Simpanlah dengan nama kategori.php pada folder kategori yang


ada di dalam folder content.
kategori-hapus.php

Sopian Hadianto ~ founder of Geek House ~


geekhouse.biz

22
0

Simpanlah dengan nama kategori-hapus.php pada folder


kategori yang ada di dalam folder content.
kategori-tambah.php

1
2
3
4

-<?php
include
// proses input
if {isset{$_POST [ 'input']ll

-{

-.rum:

;nm_lcateqori = trim{addslashes{strip_tags ($_POST [ 'nm_kategcri' ] ))) :


$deslcripsi = trim (addslashes (strip_tags ($_POST [ ' ]))) ;
//Make A Folder
9
; older = "../ il:::ages .;nm_kateqori;
1C
$calcefolder = mlcdir{$f olde r) ;
11 //Make A Folder
//insert
12
13
$inser query = inse=t into egs;
values {'','Snm_lategori,''$deskripsi'
H

15
$sql = ll'f Sql_querJ ( Hnsertquery) ;
if ($sql)
1E
1"
{
echo "<h4x:ont'blue'>
1
19
:ata QQi - iQ - mQ< /!ont>< / h4>":
20
21
else
22
echo <h4><:ont 'blue'>
23
24
:ata QSi Qan <t :ont><!h4>":
25
E

2
2"

2
29
30
31
32

33

?>
- <div class= 'container'>
<a class= '!ll;nsuccess' href = ' home.rum?menuQt!:!mti ' >!o).,lll!!< Data</a>
<h4 class= ' text info' > Inpu t</h4>
<table>
- <form n:er;hod= 'post' acr;.ion= '' narr:e= 'input' class=
'orange' >
<tr><td>
fre ti: </ td><td>:</ td><td> <input type= 'text'

34

na:ne= ' nm_kategori ' class= 'input-' !!:.a.Xlenqth= '30'>

35

</od></ tr>

36

<tr><td> Jl..U </ td><td>:</ td><td> <input type= ' text'

37

name=

38
39
40

</ td></ tr>


<tr><td>

41

42
43
44
45

class='input-' maxlenqth='200'>

<input type= ' submit' name= ' input' va lue=&' El t'


class='-success'>

<a class= ' danger'


</ td></ tr>

bref = '

tilllm ' ></a>

</ form>
</ table>

Simpa nIa h denga n nama kategori-ta mba h.php.

222
Sopian Hadianto founder ofGeek Housegeekhouse.biz

kategori-update.php

Simpanlah dengan nama kategoriupdate.php kategori-update-p.php

Sopian Hadianto ~ founder of Geek House ~


geekhouse.biz

22
3

Simpanlah dengan nama kategoriupdate-p.php. penjelasan kategoriupdate-p.php

5.6.5. Menu
Kontak kontak.php

<h4 class=" text-info" ><


/h4>
2 'TIf; ::rum?menu=-"
3
L</a>
4

class=11

5
6

<hr>
- <table border= ' 1' class=" table table -striped" width= ' 100'

7
8
9
10
11
12
13
14
15
16

- <tr class= ' success ' >


<td>Id</tdXtd>!!eJ!lj!</tdXtd>aJ,J!li!M</td>
<td></tdXtd></tdXtd>Logo</td>
<td></tdXtd>edit</tdXtd>Qij</td>
</tr>

17

-{

18
19
20
21
22
23
24
25

-success" >

- <?php
include "rum" :
$dataPerPaqe = 5;
if(isset{$_GET]'paqe']))
$noPaqe = $_GET['page'];
else $noPaqe
$offset
//query

$se lect

1;
offset
{$noPaqe - 1)

//e & n

menm U n

"select

* $dataPerPaqe;
data eo

offset

* fromorder by idlimit

26
27
28
29

I /$se lect = "se lect * from":


$sql = mysql_query{$select);
while{$hasil = mysql_fetch_array{$sql))

30

31
32
33
34

>

$offset, $dataPerPage "

Hd = $hasil['id'];
$nama = $hasil['MJru!' ] ;
$alamat = stripslashes{$hasil['
' J );
$jenis = stripslashes{$hasil['
' J );

Sopian Hadianto founder of Geek House geekhouse


.biz

22
5

35
36
37
38
39

40
41
42
43
44
45
46
47

$telp = stripslashes{$hasil['
' J );

$loqo = stripslashes(hasil('loqo']):
$ket = stripslashes{$hasil['
' ]);
echo"<><w>Sid<tw><w>Snama<tw><w>Salamat<tw><w>Sjenis<tw>
<W>$telp</W><W><JJ!1>!='../images/la<JO/".HO<Jo."' width='100' I><IW>
<w>Sket<tw>".
"<w><a ='home.IWJ;)?menu=-update&&id=$id'>
< class='icon-edit'>< > Edit</a></W>".
"<w><a ='content//-.IWJ;)?id=$id'><
!class='icon-trash'></ > Delete</W></>";

48

echo"</table>";
echo "<Qix class='container'>";

49
50

d ata
$queryl

51
52
53
54
55
56
57

58
59

60
61
62
63
64
65
66
67
68
69
70
71

"select count {* ) as ju.nOata from";

$result = mysql_query{$queryl);
$data = mysql_fetch_array{$result);
$jumData = $data('jum0ata'];
ttmenU&0 yang Qendata
$jumPage = ceil{$jumData/$dataPerPage);
/tmen ln link previous
echo "<Qix class=' tf_pagination style3 container' xsU,x class=' inner'>";
- if{$noPage>l) {
echo "<a

class='page_prevm-success'

='home.ll J2?menu=&&page=".{$noPage-1)."'><span><</span></a>";
}
for{$page = 1; $page <= $jumPage; $page++)
-{
if({{$page >= $noPage - 3)&& {$page <= $noPage + 3)) I I
{$page == 1) II {$page == $jumPage))
{
if{{$showPage == 1) && {$page != 2)) echo "..";
if{{$showPage != {$jumPage - 1)) && {$page == $jumPage)) echo
if($page

$noPage) (
class='page-n rs -warning'><b>'"

.$page."</b></a>";

72

73
74
75
76
77

$showPage

78
79

==

echo "<a ='#'

if ($noPage

= $page;

< $jumPage) {

echo '"<a class= 'page_next:


w-success' b..ru
.(noPage+ll ."><span>>< span>< a></>'>";

80

81

echo'*< 'Ql.x>'";

82
83

echo "<hS>Toul Record $jumData recordo</hS>";


?>

= 'home. w?menu='page="

Membangun ResponsWe Website dengan Twitter Bootstrap 2.0 + PHP dan My-sql

Simpanlah dengan nama kontak.php pada folder kontak yang ada di dalam folder
content.
kontak-hapus.php
1
2

- <?php
include ".. / .

./Mru:li:M2";

3
4

Hd = ; _REQUEST I' id' ] ;

13

// Query
$se lect = "select logo :romwhere id
//images
Sqselect = mysQl_query (Sselect) ;
;r = mysql_f etch_array (;qse lect ) ;
;gamba r = ".. / . ./images/logo/".$r ( 'logo ' ]
;
if ( f ile_exists (;gamba r)) { unlink{$gamba r)
;
II Query

14
15
16

$query = "delete :romwhere id


; sql = mysql_query (;query)

7
8
9

10
11

12

Sid "

Sid I";

;
17
18
19
20

21
22
23
24
25
26

; sAl! = "select * :romorder by id";


; sqlAll = mysql_query {$sAll ) ;
H=1;
while{$rAll = mysql_f etch_array (; sqlAll ))
-{
Hd = $rAll [ 'id ' ] ;
$update!d = "updateset id = '$i'
where id ='Sid"';
; sqlUpdate id = mysql_query (;update!d) ;

27

;i++;

28
29
30

$a lter = "alter tableauto_increment


; sqlAlter = mysql_query {$a lter) ;

Si";

31

32

header ( ' Location : .. / . ./home .!W2?menu=' ) ;

33

?>

227
Sopian Ha dianto

founder of Geek House

geekhouse.biz

Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql

Simpanlah dengan nama kontak-hapus.php pada folder kontak yang ada di dalam
folder content.
konta k-ta mba h.php

1
2
3
4
5
6
7
8
9
10

- <?php
include "IW2";
// proses input
if (isset ($_ POST I 'input' ] ))
-{
$nama = t rim(addslashes (strip_tags ($_ POST [ 'Mlru!' ] ))) ;
$alamat = t rim(addslashes (strip_tags ($_ POST [ 'WI!JM ' ] ))) ;
$jenis = t rim (addslashes (strip_tags ($_ POST [ ] ))) ;
$te lp = t rim(addslashes (strip_tags ($_ POST [ ] ))) ;
Hogo = t rim(addslashes (strip_tags ($_ POST [ 'logo' ] ))) ;

11
12
13
14
15

$ket = t rim (addslashes (strip_tags ($_ POST [ 'ru ' ] ))) ;

16
17
18
19

llllllllllllllllllll/1

20
21

$sumber = ; _ FILS [ 'logo' ] [ 'tmp_name' ] ;


$tujuan = ", ./images/ logo/" .$nm ."/" .$_ FILES [ 'logo' ] [ 'name' ] ;
$tujuan1= "/ images/ logo/ ".$nm . "/".; _ FILS [ 'logo' ] [ 'name' ] ;
$logo=$_ FILS [ 'logo' ] [ 'name' ] ;

llllllllllllllllllll/1
move_uploaded_file($sumber, $tujuan);
// insert

22
23

$insertquery = "insert intovalues


$telp
$loq0
$ket

24
25

$sql = mysql_query (Hnsertquery) ;


if ($sql )

26

1 I

1 I

(I , snama, salamat, Sjenis,

) ";

27

echo "<h4Xfont=blue>

2e
29

Data maU Q J; mQW3tl </ fontX / h4>":

30
31
32
33
34

else

echo "<h4Xfont =blue>


Data Q

J; UlQWij!l < / fontX/ h4>";

Sopian Hadianto founder of Geek House geekhouse.biz

228

Membangun Responsive Website dengan Twitter Bootstrap 2.0 +


PHP dan Mysql

Simpanlah dengan nama kontak-tambah.php.


kontak-update.php

229
Sopian Hadianto ~ founder of Geek House ~
geekhouse.biz

Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
1
2
3
4

- <?php
include ";
$id=$_GET I 'id' ];

$se lect = "select * fromwhere id=$id";


; sql = mysql_query ($se lect ) ;
$hasil = mysql_f etch_array ($sql ) ;
Hd = $hasil [ 'id' ];
$nama = $has il ( MJ9! ];
$a lamat = stripslashes ($hasil [ 'WI!JM ' ] ) ;
$jenis = stripslashes ($hasil [ ] ) ;
$te lp = stripslashes ($hasil [' ] ) ;
Hogo = stripslashes ($hasil [ 'logo' ] ) ;
$ket = stripslashes ($hasil (
J);

5
6
7
8
9
10
11
12
13
14
15
16

17
18

19
20
21

'ru'

?>
- <di v class= ' container' >
<h4 class= ' text-inf o ' > Input< / h4>

<form method='post' action='content/


/-update-p.'
- name= ' input' enctype= 'mQ;t.l<j.QR. !; f orm-data' >
<table class= ' table' >

24

<input type='hidden' name='id' value='<?php echo $id; ?>' I >


<trXtd>< / t.dXtd>:< / tdXtd> <input type= ' text'
name= 'MJ9l!'
class= ' input'- va lue= ' <?php echo $nama; ?>' >

25
26

< / tdX/ tr>


<trXtd>al,</ tdXtd>:< / tdXtd> <input type= 'text'

22
23

27
28
29

30
31
32

33
34

name=

class= ' input- value= ' <?php echo $a lamat; ?>' >
< / tdX/ tr>
<trXtd>< / tdXtd>:< / tdXtd> <input type= 'text'

name=

class='input-' value='<?php echo $jenis; ?

>'> tr>
< / tdX/
<trXtd>< / t.dXtd>:< / tdXtd> <input type= 'text'

name=

class='input- value='<?php echo $telp; ?

>'>t r>
< / tdX/

Sopian Hadianto founder of Geek House geekhouse.biz

230

Membangun Responsive Website dengan Twitter Bootstrap 2.0 +


PHP dan Mysql

Simpanlah dengan nama kontak-update.php


kontak-update-p.php

231
Sopian Hadianto ~ founder of Geek House ~
geekhouse.biz

Membangun Responsive Website dengan Twitter Boatstrap 2.0

+ PHP dan Mysql

Simpanlah dengan nama kontak-update-p.php.

5.6.6.

Menu Bukutamu

bukutamu.php
1

2
3
4

<h4 class="text-info"></h4>
<a href =''home?. menu-Q t

class=-success'' >

Buk.uTamu
</a>
<hr>

- <table border= 1

<td>Id</td><td>l UQQ</td><td></td><td>Email</td><td></td>
<td></td><td></td><td>Delete</td>
</tr>
- <?php

10
11

20

width=

13

16
17
18
19

- <t r class= success 1>

12
14
15

class= table table-striped

100% >

6
7

include "lm !: Jo".;


$dataPerPaqe = 5;
if(isset($_GET['paqe'l ))
{

$noPaqe = $_GET['page'I;
else $noPage

1;

//sQ: offset
$offset = ($noPaqe - 1) $dataPerPaqe;

21

$1JukuL.cuuulJc.Lu - ..!:H::l.t:t.:l.. " Lum

22
23

$offset, $dataPerPage n ;

!<S!:U>M uult:L l>y .iU

l..im.il.

$sql = mysql_query($bukutamubaru);

24

25
26

27
28
29
30
31

32

while($hasil = mysql_fetch_array($sql))
{

$id = $hasil['id'l ;
$tanqqal = stripslashes($hasil[' QQ'I);
$nama = stripslashes($hasil['
'l );
$email = nl2br(stripslashes($hasil['email'l ));
$subjek stripslashes($hasil[' I)

;I

232
Sopian Hadianto founder ofGeek Housegeekhouse.biz

Mem bangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
33
34
35
36
37
38
39
40
41
42

$pesan = nl2br(stripslashes($hasil['
')));
$pesan2=substr($pesan,0,30);

echo"<u ><U!>$id</U><U!>$tanggal.</U><U!>Snama</U!>
<U!>Semail</U!><U!>Ssubjek.</U!><U!>$pesan2</U!>".
"<U!><a ='home.?me:>u-l! !ll!!-updat.e&&id=$id'>

<i

class=' icon-edit disabled'

></i ></a></&,Q>" .

"<U!><a ='cont.e:>t./!,! OO!!/!,! !ll!!-?id=$id'>


<i class=' icon-trash' ></i > Delete</&,Q></a >";

43

echo "</table>";

44
45

echo "<class='span12'>";

46

$query1

47
48
49
50

$result. = mysql_query($query1);
$dat.a = mysql_fetch_array($result.);
$jumDat.a = $dat.a['jumDat.a');
$jumPage = ceil($jumDat.a/$dat.aPerPage);

51

52
53
54
55
56
57
58
59
60
61
62
63
64

"select

count("') as jumData

from

mM";

echo "<class='tf_pagination style3 spa.!ll2'><class='inner'>";

- if($noPage>1) {
echo "<a class=-'success'=
mM?page="
($noPage-1).'"><3pan>/span></a>";
}
for($page = 1; $page <= $jumPage; $page++)
-{
if((($page >= $noPage - 3) && ($page <= $noPage + 3)) II ($page
1)
($page == $jumPage))
{
if(($showPage == 1) && ($page != 2)) echo "..";
f(($showPage != ($jumPage - 1)) && ($page == $jumPage)){
echo " n ,

233
Sopian Hadianto- founder of Geek House- geekhouse.biz

Simpanlah dengan nama bukutamu.php pada folder bukutamu


yang ada di dalam folder content.
bukutamu-hapus.php

Sopian Hadianto ~ founder of Geek House ~


geekhouse.biz

23
4

Simpanlah dengan nama bukutamu-hapus.php pada folder


bukutamu yang ada di dalam folder content.
5.6.7. Menu
Tentang tentang.php

2
3
4

<h4 class="text-i nf o"></ h4>

'T'f : =lW,R?menu-J<U!<S!!l!l-" class="-success">


L</a>
<hr>

5
6

- <table border= ' 1' class="table table-striped" widt h= ' 100% '

- <t r class= ' success ' >

8
9

<td>ID</td><td></td><td></td><td>Edit</td><td></td>
</tr>
- <?php
include "S! S: Jo.";

10
11

12

$dataPertentang

13

if(isset($_GET['!: !l!l')))
{ $notentang = $_GET['!: !l!l');

14
15
10

17
18
19
20
21
22

>

5;

else $notentang = 1;
Sottset = (Snotentang - 1) Saataertentang;

$tentangbaru

rrselect ..: from

axM order by nm_tentang limit

$offset, $dataPertentang .,

$sql = mysql_query($tentangbaru);
while($hasil = mysql_fetch_array($sql))
{

$id_tentang
$nm_tentang

23

=
=

$hasil['id_tentang');
$hasil['nm_tentang');

$ket = stripslashes($hasil['
'));

24
25
26

echo"<u ><U!>$id_tentang</U!><U!>Snm_tentang</U!><U!

>$k.et</U!>".
27
28
29
30
31

32

"<U!><a ='home.lW,R?menu= s: oo-update&&id_tentang=


Sid_tentang '>< class='ico n-edit'></ > Edit</a></&,Q>rr .
"<U!><a =content/ S:
oo/ S: oo-. lW,R?id_tentang=
Sid_tentang'>< class='icon -trash'></ > Delete</&,Q></a>rr ;

;I

echo"</table>"

Sopian Hadianto founder ofGeek Housegeekhouse.biz

23
6

Simpanlah dengan nama tentang.php pada folder tentang yang


ada di dalam folder content.
tentang-hapus.php

Sopian Hadianto ~ founder of Geek House ~


geekhouse.biz

23
7

Simpanlah dengan nama tentang-hapus.php pada folder tentang


yang ada di dalam folder content.
tentang-tambah.php

1
2
3
4

- <?php
include " !:.";
//proses input
if(isset($_POST['input')))

- {

6
q')));)
7
8

$nm tentanq = trim(addslashes(strip_taqs($_POST['nm_te ta


$ket = trim(addslashes(strip_taqs($_POST['
'))));
//insert
$insertque ry = "insert into

9
10

!;{

values

('','Snm_tentang','$ket')";

11
12

$sql = mysql_query($insertquery);
if($sql)

13

14

echo "<h4><:font ='blue'>

15

Data !<S: <l$1 ti!: MU !< !l!l:l !l!!:</font></h4>";

16
17
18
19
20

21
22
23

else
echo "<h4><:font ='blue'>

Data !<S: <l$1 !< !l!l:l !l!!:</font></h4>";


}
?

<div
class'container'>
25
26
2<form
2P
29
3
332
33

34
35

<a class= -success'


h=ef='home.?menn=Qg'>Data</a>
<h4 class'text-info'> Input t AQg </h4>
<table>
rnethod='post' actionc'' name='input' class=orange'>
<tr><td></td><td>:</td><td> <nput type='text'
name=nm_tentano' class='input-'
maxlenoth='30'>
</td></tr>
<tr><td></td><td>:</td><td> <textarea type=text
name= '.M.1' class= ' input'-></
textarea>

</td></tr>
<tr><td>

36

<input type='submit' ne='input'

37
3=
39
0

cla ss -'success' >


<a class=-danger'
</ed></er>

value=' Qg'

href='tQg.'></a>

</form>
</eable>

Sopian Hadiantofounder of Geek Housegeekhouse.biz

23
9

Simpanlah dengan nama tentang-tambah.php.


te nta n g-update.php

Sopian Hadiantofounder of Geek Housegeekhouse.biz

24
0

Simpanlah dengan nama tentangupdate.php tentang-update-p.php

Sopian Hadianto ~ founder of Geek House ~


geekhouse.biz

24
0

Simpanlah dengan nama tentang-update-p.php.


5.7. Membangun halaman login
Halaman login ini akan ditampilkan sebelum anda dapat
masuk ke admin panel, anda harus memiliki hak akses
untuk dapat masuk ke admin panel yang anda buat
sebelumnya. Hal ini diperlukan untuk keamanan system
yang anda buat dengan pembatasan hak akses.
Pertama anda perlu membuat index.php di dalam folder
admin anda, untuk menampilkan tampilan form loginnya
index.p
hp

1
2

k !1DOCTYPE

html

- <html lang="en">

<head>

<meca
4 charset="-8">

S
6
7

< t i t le>Web Portfolio</ t i t le>


<meta name="
"
content="width=device-width,
initial.-scale=l.O">

<meta narne="description" content="">

<meea narne.. author.. concenc.. " >

10
11
12
13
14
15
16

17
18
19
20

21
22
23
24
2S
26
27
28
29

< link href =" .. /asse ts/boo


rel="l<lc!!il!il!il l<">
tstrap".
<link href =" .. /assets/bootstrap-responsive".
rel "al<l<:J.!!l!M!!l<" >
<link href =" ..
rel="' '>
/assets/docs"< link href =" .. /asse ts/-code-pre tti fy/pre tti
fy". rel="!< M!il!<">
<link rel="apple-touch-icon-"
sizes="144x144"
href =" .. /asse ts/apple-touch-icon-144-R!ilS< U\R !ils!1m&!">
<link rel="apple-touch-icon-RJ::

mRS<!Q"

sizes="114x114"

href " .. /assets/apple-touoh-ioon-114 -R Sl l!!IS!Im&l">


<link rel="apple-touch-icon-"
sizes="72x72"
href =" .. /asse ts/apple-touch-icon-72 R !ilS< mR !ilS!Im&l">
<link rel="apple-touch-icon-R !ilS< mR !ils!"
hret " .. /asse ts/apple-touoh-ioon-!57-RJ: Sl SM! S!1m&!">
<link rel"icon"
href =" .. /asse ts/J:S< tl
lm&l">
</head>
<body daca-spy"scroll" daca-caroec".-docs-sidebar">

Sopian Hadianto founder of Geek Housegeekhouse.biz

24
2

Penjelasan index.php.
Baris
Penjelasan
34 42 Menampilkan form login

Simpanlah dengan nama index.php

Sopian Hadianto ~ founder of Geek House ~


geekhouse.biz

24
3

Selanjutnya kita akan membuat halaman untuk melakukan


pengecekan data input dari form login dengan data yang
ada di database.
cek-login.php

Penjelasan cek-login.php.
Baris
2

Penjelasan
Memulai session

6
78

Membuat var $ket_admin dengan value =admin


Mendapatkan inputan username dan password dan
memasukannya ke dalam variable
10 11 Menampilkan record dari tabel admin yang
username nya sama
dengan data inputan
dan mengambil
passwordnya
juga dari tabel
12 17 Mengeksekusi
query dan
record
19 24 Menyeleksi kesesuaian data inputan dengan record
yang ada pada
tabel, jika sesuai maka akan dibuat session baru untuk
barissesuai maka tidak dapat login, maka
25 -32 username
Jika data tidak
akan ditampilkan
halaman untuk login kembali

5.8. Membuat halaman logout


Halaman ini akan mengeluarkan admin atau user dari admin
panel dengan cara menghapus session, jika session login
terhapus maka admin atau user tidak dapat masuk kembali
ke halaman admin panel kecuali dengan login kembali.
logout.p
hp

Penjelasan logout.php
Baris
11
12
14 -16

Penjelasan
Men-unset session
Menghapus session
Menampilkan halaman untuk login kembali

5.9. Membuat folder folder sebagai tempat upload gambar


1.

Buatlah folder images dalam folder utama anda yaitu


folder proyek- web-portfolio.

2. Buatlah folder artikel di dalam folder images


untuk menampung

gambar artikel yang diupload.

3. Buatlah folder artikel di dalam folder images


untuk menampung
gambar slide show yang diupload.

4. Buatlah folder logo di dalam folder images untuk


menampung gambar
logo yang diupload.

BAB 6

MEMBANGUN KONTEN DINAMIS TIAP SECTION DENGAN MYSQL


DAN PHP
6.1. Sistem templating pada index.php
Sama seperti system templating pada halaman admin
Index.php
Modifikasilah index.php hingga menjadi seperti berikut.

33
34
35

if (:> menu==..home ..) {


requ.ilre (..home .) ;

36

II

37
38

else if (:> menu==-d etail"" ) {


requ.ilre (..section/-detail.) ;

39
40
41

II
else if (:> menu==..detail..) {
requ.ilre (..section/-detail.) ;

42
43

else if (:> menu==..detail-category..) {


require (..section//detail-category .Qbp..) ;

44
45
46

// Portf olio
else if {:;;menu==..portfolio-detail..) {
require{"section/portfolio/portfolio-detail ". ) ;

47
48
49

50
51

else i f {$menu=="portfolio-detail-category") {
require{'section/portfolio/portfolio-detail-category . Qb.g" ) ;

52
53

54
else{
requ.ilre (..home .) ;

55
56
57
58

59
60

else{
requilre{..home . ;

61
62
63

?>

64

<!--' Section-Foocer

-->
< ?php require ( "!ooter.Qbp") ; ?>

66

67
68

<!-- Section-Footer -->


</div>

69

70

<!-- Script-->

"1

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

72

<!-- Script -->

73
74

</body>
</html>

Sopian Hadianto founder of Geek House


geekhouse.biz

?>

250

Penjelasan :

Sopian Hadianto founder of Geek House


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

Sopian Hadianto ~ founder of Geek House ~


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

Membangun Responsive Website dengan Twitter Bootstrap 2.0 +


PHP dan Mysql

6.4.2. Section Layanan


layanan.php
layanan.php ini akan ditampilkan pada halaman index.php
atau halaman awal anda.

254
Sopian Hadianto ~ founder of Geek House ~
geekhouse.biz

Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql

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>
<!-- Section- -->

</div>

66

67

</div>_

Penjelasan :

I Baris IPenjela san

Sapian Ha dianto
geekhouse.biz

founder of Geek House

255

Membangun Responsive Website dengan Twitter Bootstrap 2.0 +


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

Membangun Responsive Website dengan Twitter Bootstrap 2.0 +

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-'>


<!-- Section- -->
<div class='row-fluid'>
<div class='container'>

<.brXbrXbr>

6
7

<center><h1>Detail< / h1></center>
< /div>

<div class='container'>
<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

Membangun Responsive Website dengan Twitter Bootstrap 2.0 +


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
Sopian Hadianto ~ founder of Geek House ~
geekhouse.biz

Membangun Responsive Website dengan Twitter Bootstrap 2.0 i>Hi> dan Mysql

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' ;
;query = mysql_query {$se lect ) ;
$r = mysql_f etch_array {$query) ;

$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

Membangun Responsive Website dengan Twitter Bootstrap 2.0 +


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

Membangun Responsive Website dengan Twitter Bootstrap 2.0 +

PHP dan
Mysql
Sopian Hadianto
~ founder
of Geek House ~
geekhouse.biz

260

Membangun Responsive Website dengan Twitter Bootstrap 2.0+ PHP dan Mysql

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
Sopian Hadianto founder of Geek House ge ekhouse.biz

Membangun Responsive Website dengan Twitter Bootstrap 2.0 +


PHP dan Mysql

portfolio-detail.php

262
Sopian Hadianto ~ founder of Geek House ~
geekhouse.biz

1
2
3
4

Membangun Responsive Website dengan Twitter Bootstrap 2.0 +


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
;query = mysql_query {$se lect ) ;
$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

Membangun Responsive Website dengan Twitter Bootstrap 2.0 +


PHP dan Mysql

portfolio-list.php

264
Sopian Hadianto ~ founder of Geek House ~
geekhouse.biz

Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql

- <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

Sopian Ha dianto founder of Geek


Housegeekhouse.biz

Membangun Responsive Website dengan Twitter Bootstrap 2.0 +


PHP dan Mysql

6.4.4. Section Blog


blog.php

266
Sopian Hadianto ~ founder of Geek House ~
geekhouse.biz

Membangun Responsive Website dengan Twitter Bootstrap 2.0+ PHP dan Mysql

<di v class= 11 row- f luid11 id= 11 section-Ql,Q:t>


<!-- Section- -->
<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
Sopian Hadianto founder of Geek House ge ekhouse.biz

Membangun Responsive Website dengan Twitter Bootstrap 2.0 +


PHP dan Mysql

blog-detail.php

268
Sopian Hadianto ~ founder of Geek House ~
geekhouse.biz

Membangun Responsive Website dengan Twitter Bootstrap 2.0 i>Hi> dan Mysql
1
2
3

- <div class= 'row- f luid' id= ' section-l0Ismen' >


<!-- Section- -- >
<di v class= ' row- f luid' >

<div class='container'>

5
6
7
8
9

<br>
<br>
<centerXh1>Detail m%J< / h1X /cente r>
<hr>
< /div>

10
11

<div class='container'>
<div class= 11 span111 >

12
13
14
15

< /div>

16
17
18
19
20
21
22
23

<div class= 11 span211 >


<?php require ( "section/-list.ruJ2") ;
< /div>

?>

<div class= 11 span811 >


- <?php
require ( "Mru:li:M2"l :
$id_a rt ike l = ; _REQUEST I 'id_artikel' J;
; se lect = "select * :rom l;:J; li:Swhere id_artikel=$id_artikel";
; query = mysql_query (; select ) ;
;r = mysql_fetch_array (; query) ;

24
25

$id_artikel = $r('id_artikel'];
$id_kategori = $r('id_kategori'];

26

;j udul = $r i ' J;

27

$headline = $r('headline'];

28
29
30
31
32
33
34
35

Hsi = $r i 'M-J, ' J;


; penqirim = $r l 'as ;:i,ro ' J:
$ta nqqa l = $r i ' J;
; qamba r = $r i ' J;
$tql=subst r{$ta nqqa l, 0,10 ) ;
$jam=subst r{$ta nqqa l,10 ) ;
$tql_ indo = explode( "-", $tql ) ;

Sopi an Hadi antofounder of Geek Housegee


khouse.biz

269

Membangun Responsive Website dengan Twitter Bootstrap 2.0 +


PHP dan Mysql

blog-list.php

Sopian Hadianto ~ founder of Geek House ~


geekhouse.biz

27
0

blog-detail-category.php
1
2
3
4
5
6
7

e
9

- <div class='container' id='


'
name='
'>
<br>
<div class='row'>
<br>
<h1 class= ' text'->< / h1>
<hr>
</div><!-- /row -->
<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;
$headline = $r('headline'];
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
Sopian Hadianto founder of Geek Housegeekhouse.biz

Membangun Responsive Website dengan Twitter Bootstrap 2.0 +


PHP dan Mysql

6.4.5. Section Kontak


contact.php

273
Sopian Hadianto ~ founder of Geek House ~
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">&nbsp; < /div>

<div class="span8">

8
9
10
11

<h1>< / h1>
< /div>
<div class="spanl">&nbsp; < /div>
< /div>

12

<div class="row">

13
14
15
16
17

<div class="spanl">&nbsp; < /div>


<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= ' >&nbsp; </ 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
Sopian Hadianto founder of Geek Housegeekhouse.biz

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 ) ;


$r = mysql_f etch_array {$query) ;
$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

Sopian Ha dianto founder of Geek


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

Sopian Hadianto ~ founder of Geek House ~


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

__ ,. _
__.. _.,____
---
_-,._

founder of Geek House

....,...

geekhouse.biz

27
8

Membangun Responsive Website dengan Twitter Bootstrap 2.0 +


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

Sopian Hadianto ~ founder of Geek House ~


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
Sopian Hadianto ~ founder of Geek House ~
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)

Membangun Responsive Website dengan Twitter Bootstrap 2.0 +


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/

Membangun Responsive Website dengan Twitter Bootstrap 2.0 +


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