Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
-
Upload
sopian-hadianto -
Category
Technology
-
view
149 -
download
11
description
Transcript of Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
1 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan MySQL
Sopian Hadianto
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
2 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Kata Pengantar Assalamualaikum Wr. Wb. Alhamdulillahirobbilalamin, segala puji bagi Allah tuhan semesta alam, zat yang Maha mengetahui atas segala sesuatu apa yang ada di bumi dan apa yang ada di langit. Dan syukur Alhamdulillah saya panjatkan, karena atas rahmat-Nya buku ini dapat diselesaikan. Buku ini saya persembahkan kepada Ayah saya semoga beliau diberi kesehatan dan almarhum Ibu saya semoga amal ibadahnya diterima disisi Allah SWT. Amin. Kepada kaka – kaka dan keluarga saya yang selalu mendukung saya untuk melanjutkan kuliah. Tak lupa kepada rekan - rekan saya atas segala dukungannya, saya ucapkan terima kasih. Kritik dan saran terhadap buku ini akan saya terima dengan baik sebagai koreksi membangun demi kemajuan pengembangan website programming di Indonesia. Semoga buku ini bisa bermanfaat. Amin Bandung, 20 Maret 2014 Sopian Hadianto
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
3 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
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
4 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
BAB 4 .................................................................................................................. 155
MEMBANGUN SISTEM WEBSITE DINAMIS DENGAN PHP .................................. 155
4.1. Mempersiapkan Website Company Profile/Portfolio ke Web Server 155
4.2. Membangun Website dinamis dengan PHP ....................................... 157
4.2.1. Membuat templating website ........................................................ 157
BAB 5 .................................................................................................................. 176
MEMBANGUN CONTROL PANEL ADMIN/BACK END .......................................... 176
5.1. Konfigurasi Database yang akan digunakan ....................................... 176
5.2. Kerangka template halaman admin. .................................................. 178
5.3. Halaman – halaman pendukung yang dibutuhkan ............................. 181
5.4. Menambahkan kondisi untuk variable templating ............................. 187
5.5. Membuat folder – folder untk setiap konten menu admin. ............... 189
5.6. Konten menu ...................................................................................... 190
5.7. Membangun halaman login ............................................................... 241
5.8. Membuat halaman logout .................................................................. 246
5.9. Membuat folder – folder sebagai tempat upload gambar ................. 247
BAB 6 .................................................................................................................. 249
MEMBANGUN KONTEN DINAMIS TIAP SECTION DENGAN MYSQL DAN PHP ..... 249
6.1. Sistem templating pada index.php ..................................................... 249
6.2. Koneksi.php untuk konfigurasi database ............................................ 251
6.3. Home.php untuk menampilkan section - section ............................... 251
6.4. Memodifikasi section dengan menambahkan konten dari database
MySQL dengan menggunakan PHP ................................................................ 252
6.4.2. Section Layanan ............................................................................. 254
6.4.3. Section Portfolio ............................................................................. 260
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
5 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
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
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
6 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
BAB 1 MENGENAL BOOTSTRAP
1.1. Apa itu Bootstrap ? “Sleek, intuitive, and powerful front-end framework for faster and easier web development.” “Sebuah Framework yang manis, intuitif dan powerfull untuk pengembangan web yang lebih cepat dan lebih mudah”. “By nerds, for nerds.” Dari kutu buku, untuk kutu buku.
Bootstrap adalah sebuah Framework yang dikembangkan di Twitter oleh @mdo dan @fat, Bootstrap menggunakan LESS CSS, yang di-compile via Node, dan dikelola melalui GitHub untuk membantu nerds membangun web yang keren. Sekilas tentang Bootstrap Creator : @mdo (Mark Otto) dan @fat (Jacob) adalah desainer dan programmer Twitter yang membuat dan mengembangkan Bootstrap. Sekilas LESS CSS: LESS CSS LESS adalah preprosesor CSS yang memberikan sentuhan dinamis kepada CSS dengan fitur variabel, mixin, serta operasi dan fungsi yang dimilikinnya. Tujuan dibuatnya LESS sendiri adalah untuk memberikan kemudahan dan keringkasan dalam membangun tampilan website yang menggunakan CSS. Proses kompilasi LESS menjadi CSS dapat berjalan baik di sisi klien dengan javascript maupun di sisi server dengan bantuan Node.js dan Rhino. Berkas LESS yang memiliki format *.less dan akan diubah menjadi file berformat CSS oleh file javascript less.js pada sisi klien atau melalui kompilasi pada sisi server. Sekilas Node atau Node.js :
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
7 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Node.js adalah sebuah platform software yang dipakai untuk membangun aplikasi – aplikasi serverside yang fleksibel di sebuah network / jaringan. Node.js menggunakan JavaScript sebagai bahasa pemrogaman dan dapat dengan mudah menghasilkan throughput / pemrosesan tingkat tinggi melalui non-blocking I/O. Node.js memiliki fitur built-in HTTP server library yang menjadikannya mampu menjadi sebuah web server tanpa bantuan software lainnya seperti Apache atau Nginx. Node.js pertama kali dibuat oleh Ryan Dahl pada tahun 2009 yang kemudian berkembang pesat di bawah licensi Open Source MIT oleh sebuah perusahaan bernama Joyent Inc. Pada hakekatnya Node.js dikembangkan berdasarkan teknologi Google V8 JavaScript engine serta berisi kompilasi skrip inti dan banyak modul siap pakai yang bermanfaat sehingga pengguna (dalam hal ini web developer) tidak perlu melakukan coding dan mendesain segalanya dari awal. Jadi, apa sebenarnya isi dari software Node.js itu? Pada dasarnya Node.js adalah 2 hal: sebuah runtime environment dan script library. Sebuah runtime environment adalah sebuah software yang berfungsi untuk mengeksekusi, menjalankan dan mengimplementasikan fungsi – fungsi dan cara kerja inti dari suatu bahasa pemrograman. Contoh: Agar sebuah server bisa mengeksekusi script PHP maka harus terlebih dulu diinstall PHP runtime environment-nya. Mungkin anda sudah pernah dengar LAMP (Linux, Apache, MySQL dan PHP). Begitu pula Node.js. Agar sebuah server bisa mengeksekusi script JS, maka terlebih dahulu harus diinstall Node.js sebagai runtime environment untuk JavaScript. Sedangkan Script Library adalah kumpulan, kompilasi atau bank data berisi skrip / kode – kode pemrogaman. Sekilas GitHub: GitHub GitHub adalah layanan berbasis web hosting untuk proyek-proyek pengembangan perangkat lunak yang menggunakan sistem kontrol revisi Git. GitHub menawarkan fasilitas berbayar untuk repositori pribadi, dan akun gratis untuk proyek-proyek open source. Pada Mei 2011, GitHub adalah situs yang paling populer untuk situs repositori terbuka.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
8 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
GitHub juga merupakan tempat terbaik untuk berbagi kode dengan teman-teman, rekan kerja, teman sekelas, dan orang asing. Lebih dari dua juta orang menggunakan GitHub untuk membangun hal-hal menakjubkan bersama-sama. Dengan fitur kolaboratif GitHub.com, desktop dan aplikasi mobile, dan GitHub Enterprise, belum pernah lebih mudah bagi individu dan tim untuk menulis kode yang lebih baik, lebih cepat.
“Made for everyone”. Dibuat untuk semua orang. Bootstrap ini dibuat tidak hanya untuk dapat terlihat luar biasa di browser desktop saja, namun di browser tablet dan smartphone melalui responsive CSS (CSS yang responsive, saat halaman HTML dan CSS dibuka di Browser Tablet dan SmartPhone maka tampilannya akan menyesuaikan dengan resolusi layarnya).
“Packed with features.” Dikemas dengan banyak fitur. 12 kolom untuk grid yang responsive, lusinan komponen/widget, plugin – plugin JavaScript, typography, form controls, dan sebuah web-based Customizer untuk membuat Bootstrap milik kita sendiri. Sudah banyak website yang menggunakan Bootstrap, contohnya :
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
9 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
http://soundready.fm/,http://kippt.com/, http://www.gathercontent.com/,dan masih banyak lagi dan website saya sendiri http://www.tugaskampus.web.id (masih dalam tahap pengembangan - under-construction) yang dibangun dengan Bootstrap. Persiapan sebelum menggunakan Bootstrap, minimal kita harus : Menguasai dasar – dasar HTML, CSS (JavaScript dan LESS CSS bila diperlukan). Kemampuan diatas mutlak diperlukan karena intinya dalam pengembangan website berbasis Bootstrap ini adalah bagaimana kita memodifikasi HTML, CSS serta JavaScriptnya sekreatif mungkin. Kebutuhan Software : Website Editor : disarankan Notepad++ atau Sublime Text 2 Browser : Google Chrome, Mozilla Firefox, IE ( diatas IE7 ) dll. *untuk sementara cukup 2 software itu saja, karena untuk saat ini kita belum masuk ke web dinamis dengan PHP. Alasan kita menggunakan Bootstrap : OpenSource, bebas untuk dikembangkan oleh siapapun. Banyak referensi desain dari pengambang – pengembang Bootstrap lainnya. Desain Responsive untuk Desktop, Tablet, dan Smartpone. Jadi pengembang web hanya perlu membuat 1 buah website saja yang ketika dibuka di Desktop, Tablet, dan Smartpone tampilannya akan luar biasa responsive berbeda dengan website biasanya. Bootstrap menawarkan kecepatan dan kemudahan pengembangan website. Modifikasi desain tanpa batasan, kita dapat memanipulasi atau menambahkan CSS dan javascript untuk mempercantik website kita. Jadi dapat dikatakan bahwa Bootstrap ini adalah framework yang berisi kumpulan CSS, JavaScript, Font, icon dan bagaimana cara menggunakannya dengan aturan – aturan khas sebuah Framework.
1.2. Memulai Bootstrap Bootstrap sendiri telah berkembang kedalam beberapa versi, sepengetahuan saya sudah versi 3.0.3 (mungkin sudah ada versi terbarunya) namun pada kali ini saya menggunakan Bootstrap versi 2.3.2, karena versi 2.x.x ini memiliki dokumentasi yang lengkap dan merupakan dasar bagi versi – versi selanjutnya.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
10 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
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
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
11 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
[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-
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
12 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
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
13 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
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.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
14 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
[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”
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
15 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
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
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
16 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
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.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
17 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
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 “ ../”
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
18 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
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
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
19 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Maka tampilan responsivenya adalah sebagai berikut.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
20 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
[ Tampilah Mobile – Tool Responsive Mozilla FireFox ] Tools di Mozilla firefox ini cukup berguna bagi para develover website. Atau Cara 2 : Kecilkanlah resolusi browser anda
[ Tampilah Mobile – mengecilkan jendela browser ] Berhasilkah? h. Cobalah berlatih dengan template – template lainnya dan jangan copy paste. NB: ../ = keluar satu folder ../../ = keluar dua folder ./ atau / atau tanpa “/” = tetap di folder yang sama, lihat contoh html-dengan-bootstrap.html Cara 2 :
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
21 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
b. Cara 2 hampir sama dengan cara 1, bedanya adalah pada cara dua anda cukup membuka filenya dengan editor anda
Selanjutnya sama saja dengan cara 1, ingat jangan copas. 1.3. Sistem Responsive Layout Bootstrap membutuhkan HTML 5 doctype untuk disertakan di dalam setiap file HTML nya. <!DOCTYPE html> <!—html 5 doctype --> <html lang="en"> <!—html language english --> ... </html> Apa itu Layout? Layout adalah suatu kerangka dasar atau suatu tempat yang nantinya dapat menampung konten – konten dari website, biasanya sebuah layout umumnya akan berisi : header, navigasi, konten, dan footer.
Header
Navigasi/menu
Konten utama Sub konten/ sidebar
footer
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
22 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
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 Kolom ke-2 baris ke-2
Selain menggunakan tag <table>dalam merancang layout, biasanya pengembang website menggunakan tag <div> untuk merancang website, karena dianggap lebih dinamis daripada tag <table>. Bootstrap juga menggunakan tag <div> untuk merancang desain layout website. Layout Bootstrap
Default Grid System/Fixed Grid Live grid example Default bootstrap grid system terdiri dari 12 kolom, jika tanpa memakai fitur responsive maka lebar container nya menjadi 940pixel. Dengan memakai file CSS, the Grid (maksudnya adalah baris dan kolom yang dibuat) akan beradaptasi menjadi 724px dan 1170px tergantung dari resolusi device kita. Jika resolusi layar dibawah 767px maka, baris dan kolom akan menjadi fluid(mengapung) dan tertumpuk secara vertikal.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
23 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Bingung? Ayo lihat ke contoh gambar.
[Layout ketika resolusi layar device lebih dari 767px]
[Layout ketika resolusi layar device kurang dari 767px] Inilah yang dinamakan dengan responsive, sehingga kita tidak usah khawatir konten website kita tidak akan user friendly lagi saat dibuka di device dengan layar yang kecil. Selain itu responsive design juga menghilangkan proses “zoom-in” pada website saat dibuka di mobile device.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
24 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
[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
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
25 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
b. Coba buka di browser anda. Apakah berhasil? Lalu kecilkan layar browser anda. Apakah tampilannya belum responsive?
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
26 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Tentu saja, hal ini karena bootstrap juga menghendaki tampilan non-responsive, jika kita tidak memasukan bootstrap-responsive.css. c. Sekarang tambahkan ootstrap-responsive.css pada file latihan-2 anda.
d. Buka kembali filenya Apakah tampilannya seperti ini? Jika yam aka anda sukses membuat layout responsive.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
27 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Offsetting columns
Pindahkan kolom ke sebelah kanan dengan kelas .offset*. setiap kelas menambahkan margin kiri sebesar nilai offsetnya. Latihan
a. Bukalah file Latihan-2-container-layout-sederhana.html anda b. Lalu pada bagian baris 1, gantilah kodingnya menjadi seperti ini,
c. Save as dengan nama Latihan-3-container-layout-offset.html, lalu bukalah di browser.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
28 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Terlihat adanya jarak antara kolom 1 dan 2, itu karena di kolom 2 ditambahkan kelas offset. Nesting Columns
Untuk menjaringkan kolom di dalam kolom, kita dapat membuatnya dengan kode sebagai berikut :
Live Fluid Grid
Fluid Grid System menggunakan persentase dari pixel untuk lebar kolomnya. Ia memiliki kemampuan responsive sama halnya dengan default drid/fixed grid, Fluid Grid akan memenuhi layar device jika berada diluar kelas .container. Latihan
a. Bukalah file Latihan-3-container-layout-offset.html anda b. Gantilah kelas .container nya menjadi kelas .row-fluid.
c. Simpanlah dengan nama Latihan-4-fluid-layout.html, lalu bukalah file tersebut
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
29 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Tampak bahwa, grid rapat ke sisi jendela browser atau memenuhi layar. Responsive Design
Mengaktifkan fitur responsive
Seperti yang saya katakana sebelumnya, bahwa Bootstrap mendukung responsive design dan juga un-respnsive design, karena itu untuk dapat menggunakannya kita perlu memasukan .bootstrap-responsive.css di dalam tag <head>.
Akan tetapi jika kita memakai bootstrap.min.css (compiled css) maka sudah automatis menjadi responsive.
Tentang Bootstrap yang responsive
Dengan queri – queri tertentu memungkinkan untuk men-custom CSS berdasarkan beberapa kondisi seperti – ratios, width, display type, dll. Tetapi biasanya difokuskan sekitar min-width dan max-width (batas minimal lebar dan maksimalnya)
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
30 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
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.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
31 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Kapan menggunakan kelas ini? saat kita ingin menampilkan atau menyembunyikan konten pada sebuah device. Berikut adalah cara menggunakannya : a. Buatlah file html berikut
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
32 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
b. Simpanlah dengan nama Latihan-5-Responsive-Visibility-Test.html, lalu bukalah file tersebut. Maka tampilannya desktopnya adalah :
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
33 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Kecilkan layar browser anda ke ukuran tablet, maka tampilan tabletnya :
Kecilkan layar browser anda ke ukuran smartphone, maka tampilan smartphonenya:
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
34 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
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 :
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
35 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Simpanlah dengan nama template.html di dalam folde bbostrap anda.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
36 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Sebenarnya file javascript tidak usah dimasukan semua, tergantung kebutuhan. Misalnya kita ingin membuat image slide-show kita butuh file bootstrap-carousel.js, maka kita harus memasukan file tersebut. Akan tetapi supaya kita tidak kerepotan dalam berlatih (file mana – mana saja yang harus dimasukan), kita dapat memasukan semua file javascript maupun cssnya. A. Typography Typography kurang lebih adalah suatu seni bagaimana menampilkan tulisan yang indah dan enak dilihat. Bootstrap telah mengatur style tag – tag html, agar memiliki typography yang baik. Untuk mengefisiensikan waktu penjelasan, saya akan menjelaskan fungsi inti dan bagaimana cara menggunakan tag – tag html dan kelas – kelas di bagian Base CSS ini. Anda dapat mempelajari lebih jauh dengan membuka dokumentasi bootstrap docs, dan pilih menu “Base CSS” lalu membuka source code-nya. 1. Heading : <h1> - <h6> Tempatkan kode berikut di dalam file template.html anda.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
37 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
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>.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
38 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
3. Emphasis <small> : tag ini untuk membuat teks kecil
4. Teks berwarna Untuk menampilkan teks berwarna kita dapat menggunakan kelas – kelas berikut. Pada bootstrap sudah disediakan warna – warna default yang setiap warnanya memiliki arti masing – masing. Warna – warna ini sudah diberi nama sesuai dengan namanya masing – masing. Biasanya nama – nama ini akan dipakai bersamaan dengan kelas yang lain, untuk memberi arti tampilan kelas tersebut dengan warnanya. Daftar nama, warna dan maknanya : Warning : kuning : sebagai tanda peringatan Error : merah : tanda error atau aksi yang negatif Info : biru : tanda informasi Success : hijau : tanda keberhasilana atau aksi yang positif Muted : abu – abu : tanda tidak aktif Contoh penggunaanya :
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
39 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
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
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
40 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
7. Blockquotes <blockquote> : untuk melakukan pengutipan dari sumber yang lain, contoh dalam mengutip pendapat orang lain di dalam artikel.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
41 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Secara default <blockquote> akan mengapung/float ke sebelah kiri, untuk menampilkannya mengapung di sebelah kanan gunakan kelas .pull-right. 8. List a. Unordered : daftar/list dari item tanpa nilai (angka, huruf, dll)
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
42 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
b. Ordered : daftar/list dari item dengan nilai (angka, huruf, dll)
Untuk menonatifkan angka/symbol dari list, gunakanlah kelas .unstyled didalam tag <ul>/<ol> nya.
B. Code Untuk menampilkan tag – tag kode html anda di dalam halaman html anda, gunakanlah tag <code>
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
43 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
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.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
44 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
[ .table-bordered ] tabel dengan border
[ .table-hover ] baris akan berubah warna ketika disorot. Kelas baris/row opsional lainnya :
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
45 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Dengan menyertakan kelas – kelas warna diatas di dalam tag – tag table maka akan mewarnai tabel tersebut. D. Forms Seperti yang kita tahu bahwa Form adalah salah satu media untuk mengndapatkan inputan dari user, desain form yang userfriendly harus menjadi acuan utama dalam pembuatan form. a. Default Style
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
46 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
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.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
47 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
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.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
48 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Ket. : .form-horizontal = letakan di dalam tag <form> .control-group = menyatukan label dan inputan dalam satu baris .control-label = kelas untuk tag <label> .controls = kelas untuk tag – tag inputan Placeholder = menampilkan teks buram di dalam inputan
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
49 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
c. Inputan form yang didukung (Supported form controls) Inputan – inputan dalam form yang didukung bootstrap. o Input Untuk menampung data karakter yang sedikit.
o Textarea Untuk menampung data karakter yang banyak atau menampung suatu teks artikel.
o Checkbox dan radio Checkbox biasanya digunakan untuk memberikan beberapa pilihan yang dapat diinputkan. Contohnya checkbox “hobi”, kita dapat mem Radio biasanya digunakan untuk memberikan hanya satu pilihan yang dapat diinputkan dari beberapa pilihan yang tersedia. Ket. : Biasanya nama kelas – kelas inputan akan sama dengan nama tag htmlnya dan diletakan di dalam tag <label>, karena inputan selalu berdampingan dengan label keterangannya.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
50 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
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.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
51 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
o Button instead of text Style ini menyatukan button dengan textbox.
o Button Dropdown
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
52 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Daftar submenu ditempatkan di antara tag <li>. e. Control Sizing/Ukuran untuk inputan/komponen form Gunakanlah relative sizing (ukuran yang tetap) seperti kelas .input-large atau cocokan ukuran inputan anda dengan ukuran grid/layout kelas .span. o Block Level Inputs Ukuran inputan akan menyesuaikan secara penuh pada ukuran grid/layout.
o Relative Sizing (ukuran yang relative/tetap)
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
53 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
o Grid sizing
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
54 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
f. Uneditable inputs Untuk inputan yang tidak dapat di edit.
g. Form Actions Button untuk mengeksekusi data inputan dari form.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
55 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
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.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
56 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
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.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
57 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
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 Mysql
58 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
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 :
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
59 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Untuk menggunakannya kita membutuhkan tag <i>, didalam tag <i> inilah kita dapat memasukan nama kelasnya. Icon ini dapat dikombinasikan dengan button, dan element – element html yang lain. <i class="icon-search"></i>
Untuk icon warna hitam. <i class="icon-search icon-white"></i> Untuk icon warna hitam
a. Icon in Button
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
60 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.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
61 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
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.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
62 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
b. Basic pill
c. Stacked tabs Tab vertical yang terpasang secara menumpuk, style ini cocok untuk sidebar/menu kiri/kanan.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
63 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
d. Stacked pills
e. Tabs with dropdown Menambahkan dropdown pada navigasi menu.
f. Nav List/sidebar Komponen ini dapat digunakan sebagai sidebar.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
64 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
g. Tabbable nav tab nav yang memiliki kontennya/sectionnya masing – masing.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
65 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Saat kita memilih tab Section 2, maka konten akan berubah ke tag <div> yang memiliki id “tab2”.
h. Tabbable on left Selain style diatas ada pula kelas align lainnya yaitu, .tabs-below, .tabs-left, .tabs-right.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
66 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
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).
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
67 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
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.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
68 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
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.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
69 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
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.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
70 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
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.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
71 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Desktop view
Tablet/Smartphone view
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
72 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Inverse style (Navbar hitam) Kelas .navbar-inverse dapat digunakan dengan menempatkannya setelah kelas .navbar.
E. Breadcumbs Breadcumbs biasanya digunakan untuk menampilkan history dari link – link yang berhubungan secara struktur link yang telah dan sedang dibuka.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
73 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
F. Pagination Pagination digunakan untuk penomoran/penandaan halaman.
o Size Untuk menentukan ukuran pagination kita dapat menempatkan kelas – kelas berikut setelah kleas .pagination, kelas – kelas : .pagination-large, .pagination-small, atau .pagination-mini. o Aligment Untuk menentukan arah pagination kita dapat menempatkan kelas – kelas berikut setelah kleas .pagination, kelas – kelas : .pagination-centered dan .pagination-right. Pager
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
74 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Penanda halaman lainnya.
Aigned links
G. Labels and badges a. Labels
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
75 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
b. Badges
H. Typography a. Hero Unit Hero unit salah satu typography yang mungkin anda dapat menggunakannya.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
76 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
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
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
77 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
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.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
78 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
J. Alerts Alert biasanya digunakan untuk memberikan pemberitahuan kepada user, setelah user melakukan suatu aksi tertentu. a. Defalut alert
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
79 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Untuk pesan yang lebih banyak tambahan kelas .alert-block setelah kelas .alert.
b. Alert Error atau danger
c. Alert Success
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
80 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
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
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
81 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
d. Stacked / Progress bar warna – warni yang tertumpuk
e. Striped color bars
,
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
82 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
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.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
83 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
b. Media list Dengan tambahan ekstra tag/markup, kita bisa menggunakan media di dalam list/ tag <li> (berguna untuk threads komentar atau daftar artikel).
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
84 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
85 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
M. Miscellaneous/Lain – lain a. Wells Gunakan kelas .well untuk memberikan effect isian (inset effect) pada grid.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
86 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
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
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
87 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
.clearfix Clear/bersihkan float style dari elemen/komponen
1.6. JavaScript A. Transitions Bootstrap-transition.js Untuk efek transisi sederhana, masukanlah Bootstrap-transition.js Diantara file js (javascript) lainnya. Akan tetapi jika kita menggunakan bootstrap.js yang di-compile ataupun yang tidak di-compile kita tidak perlu memasukan file js ini karena sudah ada di file bootstrap.js. Contoh kasus penggunaan transisi o Sliding (menampilkan) atau fading (menyembunyikan) di dalam modal o Fading out tab – tab o Fading out alert o Sliding carousel/sliding image slide show B. Modal Modal itu seperti prompt dialog/kotak dialog yang akan muncul ketika button atau tombol modalnya di klik. a. Live modal Untuk membuat modal kita membutuhkan elamen <div> yang akan dijadikan tempat dialog box dan tombol atau link untuk mengaktifkannya.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
88 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Tampilan kode diatas adalah tombol di bawah.
Ketika tombol diklik maka akan muncul modal dialod/kotak dialog berikut.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
89 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
C. Dropdown Dropdown dengan javascript hampir sama dengan dropdown dengan CSS sebelumnya, hana berbeda dari kodenya saja.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
90 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
D. Scrollspy bootstrap-scrollspy.js Plugin ScrollSp ini akan merubah otomatis nav targets berdasarkan posisi dari scroll. Untuk lebih jelas mari kita lihat gambar berikut : Pada saat area belum digulung, maka area akan seperti berikut :
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
91 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
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 :
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
92 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
E. Tab bootstrap-tab.js
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
93 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Ketika tab profile diklik maka tab profile akan terbuka secara automatis.
Untuk membuat tab diatas, silahkan ketikan kode berikut.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
94 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
F. Tooltip bootstrap-tooltip.js
Tooltip biasanya digunakan untuk menampilkan keterangan tambahan dari sebuah teks, button,dll.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
95 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
G. Popover Popover hampir sama dengan tooltip, dengan style yang sangat berbeda.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
96 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
H. Alert bootstrap-alert.js
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
97 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
I. Button bootstrap-button.js Lakukan lebih dengan button dengan javascript. a. Stateful Digunakan untuk menyatakan status, misalnya status data yang sedang di-load. Button ketika belum diklik
Button setelah diklik.
b. Single toggle
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
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.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
99 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
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
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
100 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Ketika diklik item #2 maka akan berubah menjadi seperti berikut.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
101 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
K. Carousel Carousel adalah slideshow gambar yang akan berganti secara automatis (dalam beberapa detik) atau pun dengan mengklik gambar tersebut.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
102 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
103 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
BAB 2 MERANCANG DESAIN WEBSITE RESPONSIVE/FRONT END
Untuk merancang tampilan website responsive dengan bootstrap ini, kita kan menggunakan konsep one-page template, maksudnya adalah semua konten yang ada dalam website ini akan ditampilkan dalam satu halaman html saja (halaman index).
Jadi nantinya akan ada beberapa bagian (section) untuk konten – konten utama, yang akan disusun berbaris kebawah, sehingga saat menu konten dipilih maka halaman akan secara otomatis tergulung ke section konten tersebut. Template seperti ini sangat cocok digunakan untuk company profile atau pun portfolio, hal ini karena website seperti ini memiliki konten yang sedikit sehingga template simple yang seperti ini cukup baik untuk dipakai. Untuk lebih jelasnya anda dapat membuka, file contoh-website-one-page.html yang ada di folder “contoh-website-one-page”. 2.1. Layout Website Company Profile/Portfolio Berikut adalah desain layout website yang akan anda buat.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
104 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
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>
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
105 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
<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">
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
106 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
<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-web-portfolio”.
Kita sudah memiliki kerangka webnya, sekarang kita akan membuat layout dasar sesuai dengan gambar rancangan di atas.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
107 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Silahkan tambahkan kode berikut setelah di dalam tag <body>. <!-- Section-Index --> <div class="row-fluid" id="section-index"> <!-- Section-Beranda --> <div class="row-fluid" id="section-beranda"> <!-- Section-Navigasi --> <div class="row-fluid" id="section-navigasi"> </div>
<!-- Section-Navigasi --> <!-- Section-Slide-Show --> <div class='row-fluid' id='section-slide-show'>
</div> <!-- Section-Slide-Show -->
</div> <!-- Section-Beranda --> <!-- Section-Layanan --> <div class='row-fluid' id='section-layanan'> <!-- Section- --> <div class='row-fluid bg-gray'> </div>
<!-- Section- --> </div>
<!-- Section-Layanan --> <!-- Section-Portfolio --> <div class="row-fluid" id="section-portfolio"> <!-- Section- --> <div class="row-fluid "> </div> <!-- Section- --> </div> <!-- Section-Portfolio --> <!-- Section-Blog --> <div class="row-fluid" id="section-blog"> <!-- Section- -->
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
108 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
<div class="row-fluid"> </div> <!-- Section- --> </div> <!-- Section-Blog --> <!-- Section-Kontak --> <div class="row-fluid" id="section-kontak"> <!-- Section- --> <div class="row-fluid bg-gray'"> </div> <!-- Section- --> </div> <!-- Section-Kontak --> <!-- Section-Footer --> <div class="row-fluid" id="section-footer"> <!-- Section- --> <div class="row-fluid"> </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-fluid" id="section-navigasi">
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
109 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
<div class="navbar navbar-inverse navbar-fixed-top" id="home" style="position:fixed;"> <div class="navbar-inner"> <div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <img src="./assets/img/toggle.png" alt="" width="25px">
</button> <span> <a class="brand" href="index.php">
<img src="./assets/img/toggle.png" alt="" width="25px">
Portfolio </a> </span> <div class="nav-collapse collapse"> <ul class="nav"> <li class="">
<a href="index.php#section-index">Beranda</a> </li>
<li class=""> <a href="index.php#section-layanan">Layanan</a> </li>
<li class=""> <a href="index.php#section-portfolio">Portfolio</a> </li>
<li class=""> <a href="index.php#section-blog">Blog</a> </li>
<li class=""> <a href="index.php#section-kontak">Kontak</a> </li>
</ul> </div><!--/.nav-collapse --> </div> </div> </div>
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
110 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
</div> <!-- Section-Navigasi -->
Penjelasan berdasarkan nomor : 40-42 membuat navbar fixed, agar posisisnya menetap di atas layar. 46-49 membuat toggle button untuk menampilkan menu pada tampilan mobile. 52-55 menampilkan icon logo web dan nama web. 58-64 membuat menu bar, yaitu Beranda, Layanan, Portfolio, Blog dan Kontak. Coba lihat nomor 59 ada link index.html, artinya ketika tombol Beranda ditekan maka halaman akan membuka halaman index.html. Lalu coba lihat baris dibawahnya, ada link index.html#section-layanan. Link tersebut ketika diklik maka halaman akan menuju ke tag html yang memiliki id=”section-layanan”. <!-- Section-Layanan --> <div class='row-fluid' id='section-layanan'>
<!-- Section- -->
Simpanlah, lalu bukalah di browser anda.
Coba anda buka file index.html dengan tampilan mobile responsivenya, hal ini penting dilakukan untuk memastikan kesesuaian desain desktop dan mobile.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
111 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Ternyata ketika melihat bahwa judul website dan button toggle tampak masuk ke sisi kiri dan kanan, kita perlu untuk memperbaikinya. Tampilan error ini terjadi karena kita memasukan style-inline (style yang ada di dalam halaman html) secara langsung, yaitu style=”position:fixed;”. Alasan kita memasukan style ini karena, tanpa style tambahan ini maka navbar dalam tampilan mobile posisinya tidak akan fixed/tetap. <div class="navbar navbar-inverse navbar-fixed-top" id="home" style="position:fixed;">
Kita dapat memanupulasi tampilan icon logo dan judul dengan menambahkan spasi kosong sebelum icon logo. <a class="brand" href="index.php"> <img src="./assets/img/toggle.png" alt="" width="25px"> Portfolio </a>
Silahkan reload file index.html anda.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
112 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Sekarang kita akan memanipulasi tampilan toggle buttonnya, untuk kasus yang satu ini kita akan memanipulasi tampilannya dengan memanipulasi kelas bootstrapnya di file main.css. Untuk memodifikasi suatu objek/element kita dapat melihat kelas dari objek tersebut lalu mengubah atribut – atribut kelas tersebut ataupun dengan menambahkan kelas baru. Sekarang buatlah file main.css, di folder css bootstrap anda.
Lalu ketikan kode berikut. /* main.css */
/* navbar */
.navbar-inverse .btn-navbar {
margin-right:20px;
}
/* navbar */
Lalu bukalah lagi index.html tersebut.
Tampak tampilah sudah lebih baik dari sebelumnya, anda dapat memanipulasi langsung kelas di atas di file bootstrap.css nya, namun lebih baik kita
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
113 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
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 */
Coba bukalah file index.html anda lagi.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
114 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
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 */
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
115 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Coba buka lagi file index.html anda.
Sekarang tampilan menu hover nya sudah memenuhi layar. Sebenarnya untuk melakukan modifikasi style pada bootstrap.css itu tergantung dari daya kreatifitas anda, anda dapat melakukan modifikasi kelas – kelas bootstrap sesuai selera anda. Saya sarankan untuk banyak – banyak berlatih atau istilah lainnya “ngulik” kode – kode html, css, javascript dan lain – lain. Terkadang kita dapat langsung memodifikasi langsung di file bootstrap.css, tergantung dengan kebutuhan. Sekarang kita akan memperbesar ukuran navigasi, tambahakanlah koding berikut pada main.css anda. .navbar-inner { padding-bottom:5px; padding-top:5px; }
2.2.1.2. Section Slide Show Efek animasi akan mempercantik tampilan suatu web, sekarang kita akan menambahkan slide show pada section-slide-show. Bukalah index.html anda, lalu tambahkan koding berikut.
<!-- Section-Slide-Show --> <div class='row-fluid' id='section-slide-show'> <div id='myCarousel' class='carousel slide'> <div class='carousel-inner'> <div class='item active'> <img src='../assets/img/examples/slide-01.jpg' alt='Mobile Application' width='100%'>
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
116 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
<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'>‹</a> <a class='right carousel-control' href='#myCarousel' data-slide='next'>›</a> </div> </div> <!-- Section-Slide-Show -->
Maka tampilannya seperti berikut :
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
117 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Dalam hitungan beberapa detik slide-show nya akan merubah (gambarnya akan berganti).
Sekarang kita akan memodifikasi tampilan slide-shownya supaya lebih menarik.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
118 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Maka tampilan modifikasinya seperti berikut :
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
119 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
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.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
120 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
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.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
121 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Lalu kita akan memberikan efek tranparant pada image ketika image disorot (hover)
Selanjutnya kita akan memberikan efek transisis (-webkit-transition) dan border radius (untuk membulatkan sisi – sisi image)
Tampilan section-layanan.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
122 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Tampilan gambar setelah disorot.
[Section Layanan]
[Section Layanan]
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
123 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Warna gambar terlihat lebih transparan dan bentuknya menjadi bulat. 2.2.3. Section Portfolio Section portfolio ini digunakan untuk menampilkan portfolio dari perusahan, portfolio ini adalah produk perusahaan yang sudah dipakai oleh pelanggan. Misalnya di section portfolio perusahaan menampilkan jasa pembuatan website maka di portfolio ini ditampilkan website pelanggan yang dibuat oleh perusahaan. Tambahkan kelas .bg-black seperti kode berikut.
Kita akan membuat kelas .section-2, style kelas ini akan berbeda dengan kelas .section-1.
Ketikanlah kode berikut di dalam section-porfolio untuk membuat konten section-porfolio.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
124 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
125 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Tampilan section-porfolionya seperti berikut.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
126 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
[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.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
127 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Selanjutnya kita buat modifikasi kelas .img-rounded untuk merubah style-nya.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
128 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Tampilan section blog.
Untuk mengisi section-blog anda dapat menambahkan konten lagi di bawah konten sebelumnya. Sehingga tampilannya seperti berikut.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
129 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Anda juga dapat menambahkan konten lagi pada section-layanan supaya terlihat memenuhi layar.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
130 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
2.2.5. Section Kontak Section kontak biasanya digunakan sebagai sarana untuk melakukan komunikasi dengan pelanggan atau pengunjung website, biasanya akan ditampilkan informasi perusahaan, kontak sosial media perusahaan, dan buku tamu, dan lain – lain. Berikut kode untuk membuat konten section-kontak.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
131 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Sekarang buatlah kelas .section-3.
Tampilan section-kontak.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
132 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
2.2.6. Section Footer Section ini biasana berisi copyright website, tahun pembuatan dan pengembangan, perusahaan/orang yang membuatnya dll. Untuk mengisi konten ini kita hanya cukup menambahkan teks sederhana saja. Ketikanlah kode berikut pada section-footer.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
133 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Sekarang kita buat kelas baru, kelas .bg-black-2 dan kelas .section-4.
Tampilannya sebagai berikut.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
134 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
BAB 3 MEMBANGUN WEB SERVER 3.1. Mengenal Web Server Web Server adalah sebuah perangkat lunak server yang berfungsi untuk menerima permintaan HTTP atau HTTPS dari klien yang dikenal dengan web browser dan mengirimkan kembali hasilnya dalam bentuk halaman - halaman web yang umumnya berbentuk dokumen HTML. Web Server yang terkenal adalah Apache dan Microsoft Internet Information Service (IIS). Apache ( Server HTTP Apache atau Server Web/WWW Apache) adalah web server yang dapat dijalankan di berbagai Sistem Operasi yang beruna untuk melayani dan memfungsikan situs web. Protocol yang digunakan untuk melayani fasilitas web ini adalah menggunakan HTTP. Dengan Apache anda dapa membangun server web pribadi untuk pengembangan web. Setelah anda memahami apa iti web server beserta fungsinya. Tahap selanjutnya anda akan belajar bagaimana cara membangun web server local pada computer anda sendiri Dikarenakan situs web yang akan anda buat menggunakan script PHP (PHP:Hypertext Preprocessor). Maka web sever yang digunakan adalah Apache web server. Kalli ini kita akan menggunakan web server Xampp salah satu Apache Friends yang memiliki fitur yang lengkap dalam pengembangan website. Xampp juga ini open source dan dapat di download secara bebas di alamat : htttp://www.apachefriends.org . 3.2. Instalasi Webserver Jika anda sudah memilikinya, anda dapat melakukan instalasi dengan langkah – langkah sebagai berikut : 1. Jalankan file xampp-win32-1.7.3 (atau versi lainnya).
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
135 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
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
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
136 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
4. Tekan enter untuk menambahkan shortcut Xampp di desktop
5. Enter [y] untuk membiarkan Xampp me-relocate ulang directory
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
137 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
6. Enter [n], untuk tidak mengaktifkan fasilitas portable Xampp.
7. Enter, untk melanjutkan instalasi
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
138 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
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
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
139 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
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
140 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
13. Buka web browser anda, lalu ketikan http://localhost. Jika tampilannya
seperti di bawah ini, maka Xampp anda sudah terinstal dengan benar.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
141 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Instalasi web server xampp telah berhasil.
3.3. Mengenal MySQL dan PHPMyAmin Sebelumnya pernah dikatakan bahwa Xampp ini memili fasilitas sepert Apache web server, MySQL dan phpMyAdmin dll. MySQL adalah Sebuah program database server yang mampu menerima dan mengirimkan data dengan cepat, multi user serta menggunakan perintah dasar SQL ( Structured Query Language ). MySQL merupakan dua bentuk lisensi, yaitu FreeSoftware dan Shareware. MySQL yang biasa kita gunakan adalah MySQL FreeSoftware yang berada dibawah Lisensi GNU/GPL ( General Public License ).
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
142 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
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.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
143 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
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.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
144 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
3. Sekarang anda dapat menggunakan phpMyAdmin untuk membangun Database
3.4. Merancang Database 1. Pastikan anda masih di halaman phpMyAdmin 2. Untuk membuat database baru, caranya pada ketikan nama database anda
misalnya “ portfolio_db ” pada text box Create New Database, lalu klik tombol Create
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
145 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
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.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
146 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
3. Akan muncul tampilan seperti berikut
4. Anda rancang struktur tabel admin seperti berikut.
5. Lalu isilah buatlah seperti berikut, lalu klik tombol save.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
147 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
148 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
6. Jika berhasil maka tampilannya seperti berikut.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
149 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
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 NULL , `password` VARCHAR( 30 ) NOT NULL , `ket` VARCHAR( 10 ) NOT NULL ) ENGINE = MYISAM ;
7. Selanjutnya dengan cara yang sama, anda akan membuat tabel – tabel web site yang dibutuhkan lainnya. Berikut adalah rancangan tabelnya : Tabel “artikel”
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
150 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Tabel “bukutamu”
Tabel kategori
Tabel “kontak”
Tabel “slide_show”
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
151 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
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”
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
152 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
2. Klik menu import.
3. Klik tombol browse, dan pilihlah database di dalam folder data base.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
153 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Klik open, lalu klik Go.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
154 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
4. Jika tampilannya seperti berikut maka anda telah berhasil mengimport database
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
155 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
BAB 4 MEMBANGUN SISTEM WEBSITE DINAMIS DENGAN PHP
4.1. Mempersiapkan Website Company Profile/Portfolio ke Web Server Sekarang kita akan memindahkan website kita ke dalam web server/localhost. Silahkan ikuti langkah – langkah berikut : 1. Copy folder proyek-web-portfolio.
2. Pindahkan ke dalam folder htdocs anda.
3. Copy dan pindahkan juga folder assets anda ke dalam folder proyek-web-portfolio anda.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
156 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
4. Bukalah breowser anda, lalu ketikanlah alamat berikut pada address bar.
http://localhost/proyek-web-portfolio/
5. Tampilannya terlihat tidak sesuai dengan sebelumnya, hal ini karena lokasi folder assets berbeda dari sebelumnya. Sekarang folder assets berada pada folder yang sama dengan file index.html. Bukalah file index.html anda, lalu ubahlah lokasi link dan script nya.
6. Gantilah “../” dengan “./”.
7. Simpan dan bukalah di browser anda.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
157 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
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.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
158 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
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.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
159 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
5. Buatlah file baru, lalu paste di file baru tersebut.
6. Simpanlah dengan nama meta.php di folder yang sama dengan file index.php
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
160 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
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.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
161 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
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.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
162 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
b. Templating website lanjut – Section-Navigasi 1. Cut kode yang terblok.
2. Paste di file baru dan simpanlah dengan nama navigasi.php
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
163 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
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.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
164 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
2. Paste di file baru dan simpanlah dengan nama slide-show.php
3. Lalu masukan file slide-show.php anda di dalam file index.php.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
165 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
d. Templating website lanjut – Section-Layanan
1. Cut kode yang terblok.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
166 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
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.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
167 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
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 + PHP dan Mysql
168 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
169 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
2. Buatlah folder portfolio, di dalam folder section. 3. Paste di file baru dan simpanlah dengan nama portfolio.php di dalam folder
portfolio anda.
4. Lalu masukan file portfolio.php anda di dalam file index.php.
f. Templating website lanjut – Section-Blog
1. Cut kode yang terblok.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
170 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
171 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
2. Buatlah folder blog, di dalam folder section. 3. Paste di file baru dan simpanlah dengan nama blog.php di dalam folder blog
anda.
4. Lalu masukan file blog.php anda di dalam file index.php.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
172 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
g. Templating website lanjut – Section-Contact 1. Cut kode yang terblok.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
173 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
2. Buatlah folder contact, di dalam folder section. 3. Paste di file baru dan simpanlah dengan nama contact.php di dalam folder
contact anda.
4. Lalu masukan file contact.php anda di dalam file index.php.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
174 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
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
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
175 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
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.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
176 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
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.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
177 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
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.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
178 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
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
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
179 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Penjelasan home.php:
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
180 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Penjelasan home.php :
1-6
Memulai session, session itu seperti cookies, dapat menampung data sementara.
28-29
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
181 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
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.
31-33
Jika variable “menu” di dapat maka, akan dipanggil halaman “content.php”.
34-38
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.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
182 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
“link.php”
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
183 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Simpanlah dengan nama “link.php” pada folder admin anda.
“menu.php”
Simpanlah dengan nama “menu.php” pada folder admin anda.
“content.php”
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
184 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
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.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
185 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Coba pilih menu admin atau salah satu menu
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
186 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
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
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
187 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
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
188 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
189 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.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
190 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
2. Buatlah folder untuk masing – masing menu admin di dalam folder
content.
3. Buatlah folder lainnya seperti gambar di bawah.
5.6. Konten menu
5.6.1. Menu Slide Show
slide_show.php
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
191 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
192 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
193 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Simpanlah dengan nama slide_show.php pada folder slide_show yang ada di dalam
folder content.
Penjelasan slide_show.php:
Baris Penjelasan
2 - 4 Membuat button untuk menambah data Slide Show.
11 Fungsi include untuk memasukan file koneksi.php, untuk mengkonfigurasi 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 $offset
24 - 25 query untuk menampilkan data perhalaman sesuai $offset
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 31 – 41
31 var. $id akan diisi oleh record dengan nama field “id”.
36 Mencetak record $judul dan $deskripsi
37 Menampilkan gambar
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
194 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
38 – 39 Menampilkan link edit untuk meng-update data, akan dilewatkan var. id untuk menjadi referensi halaman update nya
40 – 41 Menampilkan link hapus untuk meng-hapus data, akan dilewatkan var. id untuk menjadi referensi halaman hapus nya
46 Mencari jumlah semua data dalam tabel 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
53 – 58 Menampilkan link previous jika var. $noPage > 1
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
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
195 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Simpanlah dengan nama slide_show-hapus.php pada folder slide_show yang ada di
dalam folder content.
penjelasan slide_show-hapus.php
Baris Penjelasan
2 Memasukan koneksi.php
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
196 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
4 Mengambil var. $id yang dilewatkan dari halaman slide_show.php
7 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
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
197 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Simpanlah dengan nama slide_show-tambah.php.
penjelasan slide_show-tambah.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 (quote) dalam string untuk mengamankan inputan , strip_tags = menonaktifkan tag html.
9 – 15 Proses mengupload gambar
9 Mengisi var $sumber dengan lokasi file gambar awal yang akan diupload
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
198 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
10 – 11 Mengisi var $tujuan dengan alamat tempat gambar slide show yang diupload (tujuan upload)
14 Mengisi var. $gambar dengan nama gambar
15 Fungsi move_uploaded_file untuk menyalin file 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
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
199 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Simpanlah dengan nama slide_show-update.php
penjelasan slide_show-update.php
Baris Penjelasan
1 – 11 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 file submit diklik maka akan dibuka file slide_show-update-p.php untuk meng-update data.
slide_show-update-p.php
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
200 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Simpanlah dengan nama slide_show-update-p.php.
penjelasan slide_show-update-p.php
Baris Penjelasan
3 – 9 Mendapatkan data yang diinputkan
11 -17 Proses upload gmbar
19 Query untuk update record pada tabel slide_show
22 Jika query sukses, maka akan di-redirect ke halaman home.php?menu=slide_show
23 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.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
201 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
5.6.2. Menu Admin
admin.php
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
202 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
203 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
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
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
204 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
205 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Simpanlah dengan nama admin-tambah.php.
admin-update.php
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
206 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Simpanlah dengan nama admin-update.php
admin-update-p.php
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
207 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Simpanlah dengan nama admin-update-p.php.
5.6.3. Menu Artikel
artikel.php
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
208 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
209 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
210 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Simpanlah dengan nama artikel.php pada folder artikel yang ada di dalam folder
content.
artikel-hapus.php
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
211 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Simpanlah dengan nama artikel-hapus.php pada folder artikel yang ada di dalam
folder content.
artikel-tambah.php
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
212 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
213 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
214 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Simpanlah dengan nama artikel-tambah.php.
artikel-update.php
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
215 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
216 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
217 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Simpanlah dengan nama artikel-update.php
artikel-update-p.php
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
218 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Simpanlah dengan nama artikel-update-p.php.
5.6.4. Menu Kategori
kategori.php
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
219 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
220 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Simpanlah dengan nama kategori.php pada folder kategori yang ada di dalam folder
content.
kategori-hapus.php
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
221 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Simpanlah dengan nama kategori-hapus.php pada folder kategori yang ada di
dalam folder content.
kategori-tambah.php
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
222 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Simpanlah dengan nama kategori-tambah.php.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
223 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
kategori-update.php
Simpanlah dengan nama kategori-update.php
kategori-update-p.php
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
224 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Simpanlah dengan nama kategori-update-p.php.
penjelasan kategori-update-p.php
5.6.5. Menu Kontak
kontak.php
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
225 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
226 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
227 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Simpanlah dengan nama kontak.php pada folder kontak yang ada di dalam folder
content.
kontak-hapus.php
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
228 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Simpanlah dengan nama kontak-hapus.php pada folder kontak yang ada di dalam
folder content.
kontak-tambah.php
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
229 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Simpanlah dengan nama kontak-tambah.php.
kontak-update.php
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
230 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
231 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Simpanlah dengan nama kontak-update.php
kontak-update-p.php
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
232 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Simpanlah dengan nama kontak-update-p.php.
5.6.6. Menu Bukutamu
bukutamu.php
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
233 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
234 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
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
235 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Simpanlah dengan nama bukutamu-hapus.php pada folder bukutamu yang ada di
dalam folder content.
5.6.7. Menu Tentang
tentang.php
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
236 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
237 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Simpanlah dengan nama tentang.php pada folder tentang yang ada di dalam folder
content.
tentang-hapus.php
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
238 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Simpanlah dengan nama tentang-hapus.php pada folder tentang yang ada di dalam
folder content.
tentang-tambah.php
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
239 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Simpanlah dengan nama tentang-tambah.php.
tentang-update.php
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
240 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Simpanlah dengan nama tentang-update.php
tentang-update-p.php
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
241 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
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.php
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
242 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
243 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Penjelasan index.php.
Baris Penjelasan
34 – 42 Menampilkan form login
Simpanlah dengan nama index.php
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
244 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Selanjutnya kita akan membuat halaman untuk melakukan pengecekan data
input dari form login dengan data yang ada di database.
cek-login.php
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
245 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Penjelasan cek-login.php.
Baris Penjelasan
2 Memulai session
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
246 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
6 Membuat var $ket_admin dengan value =”admin”
7 – 8 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 passwordnya juga
12 – 17 Mengeksekusi query dan mengambil record dari tabel
19 – 24 Menyeleksi kesesuaian data inputan dengan record yang ada pada tabel, jika sesuai maka akan dibuat session baru untuk username baris 22, dan akan di-redirect ke home.php
25 -32 Jika data tidak sesuai maka tidak dapat login, maka 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.php
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
247 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Penjelasan logout.php
Baris Penjelasan
11 Men-unset session
12 Menghapus session
14 -16 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.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
248 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
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.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
249 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
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.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
250 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Penjelasan :
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
251 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Baris Penjelasan
29 – 63 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
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
252 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Penjelasan :
Baris Penjelasan
1 – 19 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
253 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Penjelasan :
Baris Penjelasan
6 - 32 Query untuk menampilkan semua record tabel slide_show, jika nilai var $i > 1 maka $status akan “ ” sebaliknya jika $i = 1 $status “active”.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
254 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
6.4.2. Section Layanan
layanan.php layanan.php ini akan ditampilkan pada halaman index.php atau halaman awal anda.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
255 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Penjelasan :
Baris Penjelasan
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
256 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
12 - 16 Menampilkan record artikel yang memiliki nama kategori “layanan” maksimal 6 record terbaru
34 – 35 Jika var $i == 2 dan $i == 4 maka var. $span berisi =”span4”
36 Sebaliknya jika tidak maka var. $span berisi =”span3”, hal ini untuk menampilkan conten pada bagian tengah lebih besar dari sisi – sisinya
38 – 59 Manipulasi tampilan konten layanan
layanan-detail.php halaman ini untuk menampilkan detail dari layanan, ketika link yang ada pada section layanan diklik maka halaman ini akan ditampilkan.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
257 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
258 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
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
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
259 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
layanan-list.php halaman ini untuk menampilkan daftar nama layanan yang disediakan oleh perusahaan.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
260 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
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
261 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
262 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
portfolio-detail.php
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
263 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
264 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
portfolio-list.php
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
265 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
266 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
6.4.4. Section Blog
blog.php
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
267 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
268 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
blog-detail.php
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
269 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
270 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
blog-list.php
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
271 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
blog-detail-category.php
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
272 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
273 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
6.4.5. Section Kontak
contact.php
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
274 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
275 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
276 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Penjelasan :
Baris Penjelasan
14 – 31 Menampilkan form buku tamu
35 – 53 Menampilkan data kontak
57 – 70 Menampilkan daftar social link yang diambil dari tabel tentang yang memiliki keterangan “social_media”
Bukutamu-p.php
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
277 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Penjelasan :
Baris Penjelasan
1 – 17 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
278 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
279 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
6.5. Menambahkan efek Smooth Scroll untuk mempercantik one-page website
6.5.1. Menambahkan jquery.min.js dan smoothscroll.js
a. Buka file link-css.php anda
b. Lalu tambahkan kode berikut
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
280 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
6.5.2. Menambahkan kelas smoothScroll pada link – link menu navigasi
a. Bukalah file navigasi.php anda
b. Editlah seperti berikut
6.5.3. Memodifikasi tag <body> pada index.php
a. Bukalah file index.php anda
b. Editlah tag <body> hingga seperti berikut
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
281 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Sekarang bukalah website anda kembali, lalu klik lah menu – menunya,
maka ketika menu berpindah maka perpindahan akan tergulung secara
lembut.
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
282 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
Referensi
Website
http://getbootstrap.com (official website dari Twitter Bootstrap)
https://github.com/twbs/bootstrap (official site di github.com )
www.blacktie.co/ (free bootstrap template’s site)
www.bootsnipp.com (free bootstrap template’s 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
283 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
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-jalankan-javascript-di-
server/
http://her0satr.staff.ub.ac.id/2012/11/github-apa-itu-fungsi-dan-manfaat-
github/
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
284 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
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 fiksi, 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 : [email protected]
Facebook : facebook.com/sopian.hadianto1
LINE : pianhadi