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



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



Daftar Isi

Kata Pengantar ....................................................................................................... 2

Daftar Isi ................................................................................................................. 3

BAB 1 ...................................................................................................................... 6

MENGENAL BOOTSTRAP ........................................................................................ 6

1.1. Apa itu Bootstrap ?................................................................................. 6

1.2. Memulai Bootstrap ................................................................................ 9

1.3. Sistem Responsive Layout .................................................................... 21

1.4. Dasar – dasar CSS Bootstrap ................................................................ 34

1.5. Component/Widget Bootstrap ............................................................. 60

1.6. JavaScript ............................................................................................. 87

BAB 2 .................................................................................................................. 103

MERANCANG DESAIN WEBSITE RESPONSIVE/FRONT END ................................ 103

2.1. Layout Website Company Profile/Portfolio ........................................ 103

2.2. Halaman Index ................................................................................... 104

2.2.2. Section Layanan ............................................................................. 119

2.2.3. Section Portfolio ............................................................................. 123

2.2.4. Section Blog .................................................................................... 126

2.2.6. Section Footer ................................................................................ 132

BAB 3 .................................................................................................................. 134

MEMBANGUN WEB SERVER............................................................................... 134

3.1. Mengenal Web Server ........................................................................ 134

3.2. Instalasi Webserver ............................................................................ 134

3.3. Mengenal MySQL dan PHPMyAmin ................................................... 141



BAB 4 .................................................................................................................. 155

MEMBANGUN SISTEM WEBSITE DINAMIS DENGAN PHP .................................. 155

4.1. Mempersiapkan Website Company Profile/Portfolio ke Web Server 155

4.2. Membangun Website dinamis dengan PHP ....................................... 157

4.2.1. Membuat templating website ........................................................ 157

BAB 5 .................................................................................................................. 176

MEMBANGUN CONTROL PANEL ADMIN/BACK END .......................................... 176

5.1. Konfigurasi Database yang akan digunakan ....................................... 176

5.2. Kerangka template halaman admin. .................................................. 178

5.3. Halaman – halaman pendukung yang dibutuhkan ............................. 181

5.4. Menambahkan kondisi untuk variable templating ............................. 187

5.5. Membuat folder – folder untk setiap konten menu admin. ............... 189

5.6. Konten menu ...................................................................................... 190

5.7. Membangun halaman login ............................................................... 241

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



6.4.4. Section Blog .................................................................................... 266

6.4.5. Section Kontak................................................................................ 273

6.5. Menambahkan efek Smooth Scroll untuk mempercantik one-page

website............................................................................................................... 279

6.5.1. Menambahkan jquery.min.js dan smoothscroll.js............................. 279

6.5.2. Menambahkan kelas smoothScroll pada link – link menu navigasi .. 280

6.5.3. Memodifikasi tag <body> pada index.php ........................................ 280

Referensi ............................................................................................................ 282

Daftar Pustaka ................................................................................................... 283

Tentang Penulis.................................................................................................. 284



BAB 1 MENGENAL BOOTSTRAP

1.1. Apa itu Bootstrap ? “Sleek, intuitive, and powerful front-end framework for faster and easier web development.” “Sebuah Framework yang manis, intuitif dan powerfull untuk pengembangan web yang lebih cepat dan lebih mudah”. “By nerds, for nerds.” Dari kutu buku, untuk kutu buku.

Bootstrap adalah sebuah Framework yang dikembangkan di Twitter oleh @mdo dan @fat, Bootstrap menggunakan LESS CSS, yang 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 :



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.



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 :



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.

http://soundready.fm/

http://kippt.com/

http://www.gathercontent.com/

http://www.tugaskampus.web.id/

http://sublimetext.com/2



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

https://github.com/twbs/bootstrap/



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

Bootstrap.css dan bootstrap.min.css, adalah file yang sama perbedaannya adalah bootstrap.css adalah kode css murni yang belum di-compile (menungkinkan kita untuk memodifikasi kode – kode css) sedangkan bootstrap.min.css adalah kode css yang sudah di-compile (tidak memungkinkan kita untuk memodifikasi, dengan .min ini kita dapat langsung menggunakan Framework Bootstrap ini tanpa harus memodifikasinya).

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

Sama halnya dengan bootstrap.js dan bootstrap.min.js, dan file – file css, dan js lainnya. Selain itu bootstap juga menyediakan icon – icon glyphicons-



halflings.png dan glyphicons-halflings-white.png yang dapat digunakan untuk mempercantik tampilan website dari Glyphicons Free licensed under CC BY 3.0.

[Glyphicons Free licensed under CC BY 3.0.]

Selain itu bootstap juga menyediakan JQuery, dan plugin – plugin javascript* (membutuhkan JQuery) dan file – file tambahan lainnya.

Untuk keperluan latihan dan pemahaman lebih dalam tentang bootstap, maka saya telah menyertakan file – file pendukung dalam CD di buku ini. Silahkan Ekstraks bootstrap.zip yang ada di dalam CD, ke drive D atau E Anda. 3. Basic HTML Template Untuk dapat menggunakan Bootstrap maka kita perlu untuk memasukan file – file css, dan javascript kita ke dalam file html. Berikut adalah contoh file html tanpa dan dengan bootstrap. File HTML yang umum, tanpa bootstrap :

[File HTML yang umum, tanpa bootstrap]

http://glyphicons.com/

http://creativecommons.org/licenses/by/3.0/

http://glyphicons.com/

http://creativecommons.org/licenses/by/3.0/



File HTML dengan bootstrap :

[File HTML dengan bootstrap] 1. Bukalah Editor anda, lalu ketikan kode diatas : 2. Simpan dengan nama html-dengan-bootstrap.html di Folder Bootstrap anda, di E:\bootstrap

[Menyimpan file html] 3. Lalu buka di browser Anda.



[File HTML dengan bootstrap – diuji di browser] Latihan Buatlah folder “latihan” di dalam folder bootstrap anda.

Cara 1 : a. Bukalah file index.html yang ada di dalam folder bootstrap/docs/index.html di browser anda.

b. Pilihlah menu “Get Started”, lalau pilihlah submenu “Examples”



c. Klik salah satu template yang tersedia misalnya “Strater template”

d. Klik kanan pada area kosong, lalu pilihlah View Page Source untuk melihat source koding dari halaman html tersebut



e. Lalu ketiklah koding html tersebut di editor anda, dan simpanlah di folder latihan dengan nama latihan-1.html (*jangan copy and paste ya, supaya ngetiknya lancar dan faham kelas – kelas bootstrap nantinya). f. Lalu bukalah file latihan-1.html di browser anda

Apakah tampilannya seperti gambar di atas? Apa tampilan tersebut sangat berbeda dengan contoh? Jika ia coba anda buka kembali file latihan-1.html di editor anda.



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



g. Bukalah kembali file latihan-1.html

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



Maka tampilan responsivenya adalah sebagai berikut.



[ Tampilah Mobile – Tool Responsive Mozilla FireFox ] Tools di Mozilla firefox ini cukup berguna bagi para develover website. Atau Cara 2 : Kecilkanlah resolusi browser anda

[ Tampilah Mobile – mengecilkan jendela browser ] Berhasilkah? h. Cobalah berlatih dengan template – template lainnya dan jangan copy paste. NB: ../ = keluar satu folder ../../ = keluar dua folder ./ atau / atau tanpa “/” = tetap di folder yang sama, lihat contoh html-dengan-bootstrap.html Cara 2 :



b. Cara 2 hampir sama dengan cara 1, bedanya adalah pada cara dua anda cukup membuka filenya dengan editor anda

Selanjutnya sama saja dengan cara 1, ingat jangan copas. 1.3. Sistem Responsive Layout Bootstrap membutuhkan HTML 5 doctype untuk disertakan di dalam setiap file HTML nya. <!DOCTYPE html> <!—html 5 doctype --> <html lang="en"> <!—html language english --> ... </html> Apa itu Layout? Layout adalah suatu kerangka dasar atau suatu tempat yang nantinya dapat menampung konten – konten dari website, biasanya sebuah layout umumnya akan berisi : header, navigasi, konten, dan footer.

Header

Navigasi/menu

Konten utama Sub konten/ sidebar

footer



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.



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.



[Tampilan website non-responsive] Untuk dapat melihat konten maka kita perlu melakukan zoom-in pada konten. Hal itu lah salah satu perbedaan antara website non-responsive dengan website responsive. Saatnya merancang layout.

Karena kita akan menggunakan Framework Bootstrap, maka kita perlu mengikuti aturan pemakaian kelas yang sesuai. Aturan untuk membuat layout : Untuk membuat 1 baris kosong kita memakai kelas .row (nilai default dari kelas .row adalah span12, maka jumlah kolom – kolom span* harus sama dengan 12 untuk menjaga kepersisian layout kita ) Untuk membuat kolam kita menggunakan kelas .span* (*adalah nilai lebar kolom mulai dari span1 - span12) Latihan

a. Bukalah editor anda, ketikan kode berikut dan simpanlah dengan nama Latihan-2-container-layout-sederhana.html di folder latihan anda



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



Tentu saja, hal ini karena bootstrap juga menghendaki tampilan non-responsive, jika kita tidak memasukan 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.



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.



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



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)



Responsive Bootstrap akan : Memodifikasi lebar dari kolom di grid Menumpuk element secara mengambang/float saat dibutuhkan Me-resize heading dan teks supaya lebih sesuai dengan device

Supported devices/Perangkat yang didukung

Bootstrap mendukung perangkat – perangkat sebagai berikut :

Responsive utility classes

Untuk mempercepat mobile-friendly development, gunakanlah kelas utility ini untuk menampilkan dan menyembunyikan pada device. Dibawah adalah sebuah tabel dari kelas – kelas yang tersedia dan efek – efeknya dengan label sesuai dengan nama – nama device.



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



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



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

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



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



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



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



Maka tampilannya seperto berikut :

Lakukan hal yang sama pada kode – kode dibawah. 2. Paragraf <p>

<p class=”lead”>

gunakan kelas .lead untuk membuat judul pada tag <p> atau <span>.



3. Emphasis <small> : tag ini untuk membuat teks kecil

4. Teks berwarna Untuk menampilkan teks berwarna kita dapat menggunakan kelas – kelas berikut. Pada bootstrap sudah disediakan warna – warna default yang setiap warnanya memiliki arti masing – masing. Warna – warna ini sudah diberi nama sesuai dengan namanya masing – masing. Biasanya nama – nama ini akan dipakai bersamaan dengan kelas yang lain, untuk memberi arti tampilan kelas tersebut dengan warnanya. Daftar nama, warna 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 :



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

6. Addresses <address> : format untuk menampilkan alamat, biasanya digunakan untuk alamat di footer



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



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



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>



C. Tables Sama seperti membuat tabel html biasa, namun gunakanlah kelas .table untuk menampilkan tabel dengan style bootstrap.

[Default Table] Style lain untuk table, anda dapat menambahkan kelas – kelas style lain untuk tag <table> sebagai berikut :

[ .table-striped ] Karena kelas .table-striped adalah subkelas dari kelas .table, maka untuk menggunakannya kita harus menyertakan kelas .table terlebih dahulu.



[ .table-bordered ] tabel dengan border

[ .table-hover ] baris akan berubah warna ketika disorot. Kelas baris/row opsional lainnya :



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



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



Ket. : .input-medium = ukuran dari inputan, bootstrap menyediakan berbagai ukuran untuk inputan. o Inline Form Form ini menempatkan semua komponen form ke dalam satu baris saja, bisanya digunakan untuk form login, pencarian dll.

o Horizontal form Digunakan untuk membuat tampilan komponen – komponen form tertata dengan rapi.



Ket. : .form-horizontal = 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



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.



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



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

o Button Dropdown



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

o Relative Sizing (ukuran yang relative/tetap)



o Grid sizing



f. Uneditable inputs Untuk inputan yang tidak dapat di edit.

g. Form Actions Button untuk mengeksekusi data inputan dari form.



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



E. Buttons a. Default Button Button style ini dapat kita gunakan dengan mengaplikasikan kelas .btn, kelas ini paling baik dikombinasikan dengan tag <a> atau <button>. Berikut adalah daftar button – button yang dapat kita gunakan :

Setiap style button memiliki arti yang hampir sama dengan style text warna, disesuaikan dengan warnanya. b. Button Size Ukuran button dapat disesuaikan dengan menggunakan kelas .btn-large, .btn-small, .btn-mini.



c. Disable state Me-nonaktifkan button.

F. Images Kita dapat menggunakan kelas berikut untuk memanupulasi style gambar kita, style sudut tumpul, lingkaran dan efek kamera polaroid.



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 :



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



Kita dapat menempatkan icon seperti kita menempatkan teks, datau digabung dengan teks. 1.5. Component/Widget Bootstrap A. Button groups Digunakan untuk mengelompokan button.

B. Button dropdowns Memberikan dropdown menu/submenu pada sebuah button.



a. Split button dropdown style lain dari button dropdown diatas, yaitu menyisipkan satu buah button tambahan sebagai tombol pembuka dropdown menu.

C. Navs Navs adalah pilihan navigasi untuk menu yang disediakan oleh bootstrap, yaitu tabs, pills dan list. Untuk mendapatkan komponen ini kita hanya perlu menyisipkan kelasnya di dalam tag <ul>, berikut cara penggunaannya. a. Basic tabs Style komponen ini berisi daftar tab/tabulasi.



b. Basic pill

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



d. Stacked pills

e. Tabs with dropdown Menambahkan dropdown pada navigasi menu.

f. Nav List/sidebar Komponen ini dapat digunakan sebagai sidebar.



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



Saat kita memilih tab Section 2, maka konten akan berubah ke tag <div> yang memiliki id “tab2”.

h. Tabbable on left Selain style diatas ada pula kelas align lainnya yaitu, .tabs-below, .tabs-left, .tabs-right.



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



Komponen - komponen dari navbar yaitu sebagai berikut : a. Brand Kelas .brand ini digunakan sebagai judul atau nama website.

b. Nav links Menambahkan item menu melalui tag <li> pada tag <ul>, disini kita dapat menambahkan menu – menu utama dari website.



Kelas .active menunjukan bahwa halaman yang sedang terbuka adalah halaman menu tersebut. Kita dapat menambahkan pemisah/divider antar menu, dengan menambahkan kelas .divider-vertical di dalam setiap tag <li>.

Terlihat ada pemisah antar link menu pada navbar diatas. c. Form Selain memasukan menu pada navbar, kita juga dapat memasukan komponen form. Tag <form> dapat sebelum tag <ul> atau pun setelah tag </ul>, dengan menempatkan kelas .navbar-form.



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



o Fixed to bottom Navbar akan ditempatkan menetap di bawah layar.

o Static top navbar Buatlah full-width navbar yang akan tergulung bersama halaman dengan menambahkan .navbar-static-top.

e. Responsive Navbar Responsive navbar dapat dibuat dengan mengaplikasikan komponen – komponen diatas.



Desktop view

Tablet/Smartphone view



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.



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



Penanda halaman lainnya.

Aigned links

G. Labels and badges a. Labels



b. Badges

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



b. Page header Kelas ini dapat digunakan untuk membuat teks header.

I. Thumbnail Thumbnail dari Bootstrap dapat digunakan untuk membuat galeri, foto profil dll. a. Default thumbnails



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



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



Untuk pesan yang lebih banyak tambahan kelas .alert-block setelah kelas .alert.

b. Alert Error atau danger

c. Alert Success



d. Alert Information

K. Progress bars Progress bar ini biasanya digunakan untuk proses loading, redirecting, atau pun status dari aksi yang kita lakukan. Progress bar akan bekerja dari width 0% - 100%. a. Basic / Progress bar dasar

b. Striped / Bergaris

c. Animated Untuk mengaktifkesan animasi dari progress bar, kita dapat menambahkan kelas .active setelah kelas .progress-striped



d. Stacked / Progress bar warna – warni yang tertumpuk

e. Striped color bars

,



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



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



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



b. Helper classes/ kelas – kelas pembantu Berikut adalah kelas – kelas pembantu yang biasanya sangat berguna untuk digunakan. .pull-left Men-float element ke sisi kiri

.pull-right Men-float element ke sisi kanan

.muted Mengganti warna element/komponen dengan warna #999



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



Tampilan kode diatas adalah tombol di bawah.

Ketika tombol diklik maka akan muncul modal dialod/kotak dialog berikut.



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



D. Scrollspy 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 :



Dapat kita lihat pula bahwa, nav target ada pada target “#fat”. Dan ketika layar digulung kea rah teks “@mdo”, maka area akan seperti berikut :

Dapat kita lihat pula bahwa, nav target ada pada target “#mdo”. Untuk lebih memahami ScrollSpy, silahkan buatlah dengan kode berikut :



E. Tab bootstrap-tab.js



Ketika tab profile diklik maka tab profile akan terbuka secara automatis.

Untuk membuat tab diatas, silahkan ketikan kode berikut.



F. Tooltip bootstrap-tooltip.js

Tooltip biasanya digunakan untuk menampilkan keterangan tambahan dari sebuah teks, button,dll.



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



H. Alert bootstrap-alert.js



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



Tombol ini dapat digunakan sebagai tombol yang dapat ditekan secara menetap, contohnya untuk menyalakan atau mematikan sesuatu. Button sebelum ditekan.

Button setelah ditekan.

c. Checkbox button Dengan button kita dapat juga membuat checkbox. Button sebelum ditekan.

Button dapat dipilih lebih dari satu.



d. Radio button Dengan button kita dapat juga membuat radio. Button sebelum ditekan.

Button yang dapat dipilih hanya boleh satu.

J. Collapse bootstrap-collapse.js, juga membutuhkan plugin transitions. Accordion ini konsepnya mirip dengan tab, untuk lebih memperjelas mari lihat gambar berikut. Tampilan awal



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



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



BAB 2 MERANCANG DESAIN WEBSITE RESPONSIVE/FRONT END

Untuk merancang tampilan website responsive dengan bootstrap ini, kita kan menggunakan konsep one-page template, maksudnya adalah semua konten yang ada dalam website ini akan ditampilkan dalam satu halaman html saja (halaman index).

Jadi nantinya akan ada beberapa bagian (section) untuk konten – konten utama, yang akan disusun berbaris kebawah, sehingga saat menu konten dipilih maka halaman akan secara otomatis tergulung ke section konten tersebut. Template seperti ini sangat cocok digunakan untuk company profile atau pun portfolio, hal ini karena website seperti ini memiliki konten yang sedikit sehingga template simple yang seperti ini cukup baik untuk dipakai. Untuk lebih jelasnya anda dapat membuka, file contoh-website-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.

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



<!DOCTYPE html>

<html>

<head>





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



<link rel="apple-touch-icon-precomposed" sizes="144x144"

href="./assets/ico/apple-touch-icon-144-precomposed.png">





<link rel="apple-touch-icon-precomposed"


<link rel="shortcut icon" href="./assets/ico/favicon.png">



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









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



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



<link href="./assets/css/bootstrap-responsive.css"

rel="stylesheet" media="screen">

Silahkan tambahkan kode berikut setelah di dalam tag <body>.  <div class="row-fluid" id="section-index">  <div class="row-fluid" id="section-beranda">  <div class="row-fluid" id="section-navigasi"> </div>

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

</div> 

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

 </div>

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

<div class="row-fluid"> </div>  </div>   <div class="row-fluid" id="section-kontak">  <div class="row-fluid bg-gray'"> </div>  </div>   <div class="row-fluid" id="section-footer">  <div class="row-fluid"> </div>  </div>  </div>

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

<div class="navbar navbar-inverse navbar-fixed-top" id="home" style="position:fixed;"> <div class="navbar-inner"> <div class="container">

<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <img src="./assets/img/toggle.png" alt="" width="25px">

</button> <span> <a class="brand" href="index.php">

<img src="./assets/img/toggle.png" alt="" width="25px">

Portfolio </a> </span> <div class="nav-collapse collapse"> <ul class="nav"> <li class="">

<a href="index.php#section-index">Beranda</a> </li>

<li class=""> <a href="index.php#section-layanan">Layanan</a> </li>

<li class=""> <a href="index.php#section-portfolio">Portfolio</a> </li>

<li class=""> <a href="index.php#section-blog">Blog</a> </li>

<li class=""> <a href="index.php#section-kontak">Kontak</a> </li>

</ul> </div> </div> </div> </div>

</div> 

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



Simpanlah, lalu bukalah di browser anda.

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



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.



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



memodofikasi kelas tersebut di file css yang lain, supaya tidak mengubah file asli bootstrap.css. Tampak juga bahwa tampilan dropdown menunya tidak mepet ke sebelah kiri atau tidak memiliki padding, coba anda lihat menu – menu tersebut berada di kelas apa. <ul class="nav">

<li class=""> <a href="index.php#section-index">Beranda</a> </li>

<li class=""> <a href="index.php#section-layanan">Layanan</a> </li> <li class=""> <a href="index.php#section-portfolio">Portfolio</a> </li> <li class=""> <a href="index.php#section-blog">Blog</a> </li> <li class=""> <a href="index.php#section-kontak">Kontak</a> </li>

</ul>

Ternyata menu – menu tersebut berada di kelas .nav. Sekarang kita buka lagi file main.css nya, lalu modifikasilah kelas .nav dengan menambahkan atribut padding, seperti berikut : /* main.css */

/* navbar */


margin-right:20px;

}

.nav{

Padding-left:30px;

}

/* navbar */

Coba bukalah file index.html anda lagi.



Jika kita lihat menu sudah memiliki padding, namun ketika menu di sorot/hover, ternyata style hover tidak memenuhi layar. Kenapa? Coba anda cari kelas .nav di file bootstrap.css anda.

Jika kita lihat lagi ternyata, teks menu ini ada di dalam tag <li>. Karena tag <li> berada di tag <ul> yang memiliki kelas .nav, maka untuk memberikan jarak antara layar dan menu kita dapat menambahkan margin pada kelas .nav yang merujuk ke tag <li>. Silahkan editlah kode yang tadi dengan kode berikut. /* main.css */

/* navbar */


margin-right:20px;

}

.nav >li{

margin-left:10px;

}

/* navbar */

Coba buka lagi file index.html anda.

Sekarang tampilan menu hover nya sudah memenuhi layar. Sebenarnya untuk melakukan modifikasi style pada bootstrap.css itu tergantung dari daya kreatifitas anda, anda dapat melakukan modifikasi kelas – kelas bootstrap sesuai selera anda. Saya sarankan untuk banyak – banyak berlatih atau istilah lainnya “ngulik” kode – kode html, css, javascript dan lain – lain. Terkadang kita dapat langsung memodifikasi langsung di file bootstrap.css, tergantung dengan kebutuhan. Sekarang kita akan memperbesar ukuran navigasi, tambahakanlah koding berikut pada main.css anda. .navbar-inner { padding-bottom:5px; padding-top:5px; }

2.2.1.2. Section Slide Show Efek animasi akan mempercantik tampilan suatu web, sekarang kita akan menambahkan slide show pada section-slide-show. Bukalah index.html anda, lalu tambahkan koding berikut.

 <div class='row-fluid' id='section-slide-show'> <div id='myCarousel' class='carousel slide'> <div class='carousel-inner'> <div class='item active'> <img src='../assets/img/examples/slide-01.jpg' alt='Mobile Application' width='100%'>

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

Maka tampilannya seperti berikut :

view-source:http://localhost/htdocs/proyek-web-portfolio/index.php#myCarousel

view-source:http://localhost/htdocs/proyek-web-portfolio/index.php#myCarousel



Dalam hitungan beberapa detik slide-show nya akan merubah (gambarnya akan berganti).

Sekarang kita akan memodifikasi tampilan slide-shownya supaya lebih menarik.



Maka tampilan modifikasinya seperti berikut :



Memberi warna latar (background pada tag <body>) dan menetapkan warna default untuk teks.

2.2.2. Section Layanan Pada section-layanan ini, akan ditampilkan daftar layanan – layanan (produk) yang ditawarkan oleh perusahaan.

Silahkan ketiklah kode di bawah di dalam section-layanan.



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



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.



Tampilan gambar setelah disorot.

[Section Layanan]

[Section Layanan]



Warna gambar terlihat lebih transparan dan bentuknya menjadi bulat. 2.2.3. Section Portfolio Section portfolio ini digunakan untuk menampilkan portfolio dari perusahan, portfolio ini adalah produk perusahaan yang sudah dipakai oleh pelanggan. Misalnya di section portfolio perusahaan menampilkan jasa pembuatan website maka di portfolio ini ditampilkan website pelanggan yang dibuat oleh perusahaan. Tambahkan kelas .bg-black seperti kode berikut.

Kita akan membuat kelas .section-2, style kelas ini akan berbeda dengan kelas .section-1.

Ketikanlah kode berikut di dalam section-porfolio untuk membuat konten section-porfolio.



Tampilan section-porfolionya seperti berikut.



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



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



Tampilan section blog.

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



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



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



Sekarang buatlah kelas .section-3.

Tampilan section-kontak.



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.



Sekarang kita buat kelas baru, kelas .bg-black-2 dan kelas .section-4.

Tampilannya sebagai berikut.



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



2. Setting directory tempat file xampp akan diinstal.

Misalnya di directory D, lebih baik tidak di directory C (OS) untuk menghindari sesuatu yang tidak diinginkan misalnya ketika computer kita di uninstall, data di folder xampp akan hilang semua.

3. Klik install



4. Tekan enter untuk menambahkan shortcut Xampp di desktop

5. Enter [y] untuk membiarkan Xampp me-relocate ulang directory



6. Enter [n], untuk tidak mengaktifkan fasilitas portable Xampp.

7. Enter, untk melanjutkan instalasi



8. Enter, Xampp mengatur timezone pada file php.ini, anda dapat mengubah timezone disana

9. Ketikan ‘ x ’ untuk keluar dari Xampp, lalu tekan Enter. Sekarang anda telah menyelesaikan instalasi



10. Sampai tahap ini anda sudah berhasil menginstal XAMPP, artinya anda sudah menginstal semua paket softwarenya yaitu, Apache, PHP dan MySQL. Selanjutnya kita akan menjalankan servicenya.

11. Jalankan XAMPP Control Panel yang ada di desktop.

12. Start Apache untuk memulai menjalankan Xampp.



13. Buka web browser anda, lalu ketikan http://localhost. Jika tampilannya

seperti di bawah ini, maka Xampp anda sudah terinstal dengan benar.

http://localhost/



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



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

Logo MySQL Sedangkan PHPMYADMIN adalah database admin panel yang ada pada web server. Fungsinya adalah sebagai pengendali dan alat manupulasi database MySQL menggunakan web server.

Logo phpMyAdmin.



Kita akan mencoba untuk menjalankan phpMyAdmin, berikut langkah – langkahnya : 1. Pastikan anda sudah mengaktifkan Apache dan MySQL Service pada Xampp

Control Panel anda

2. Buka browser anda dan ketikan http://localhost/phpmyadmin atau http://localhost/phpmyadmin/index.php pada address bar.

http://localhost/phpmyadmin

http://localhost/phpmyadmin/index.php



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



3. Jika sukse maka tampilannya seperti berikut

3.5. Membuat Tabel

Membuat database selesai, tahap selanjutnya adalah membuat tabel (table), tabel ini digunakan untuk menyimpan data – data yang akan ditampilkan di situs. Untuk pembuatan tabel ini saya membaginya menjadi dua cara yaitu : A. Membuat tabel secara manual

1. Pastikan anda membukan phpMyAdmin dan membuka database yang baru saja anda buat.

2. Ketikanlah nama tabel “admin” dengan jumlah field 4.



3. Akan muncul tampilan seperti berikut

4. Anda rancang struktur tabel admin seperti berikut.

5. Lalu isilah buatlah seperti berikut, lalu klik tombol save.



6. Jika berhasil maka tampilannya seperti berikut.



Jika menggunakan kode dan MySQL Console, kodenya akan seperti berikut : CREATE TABLE `portfolio_db`.àdmin` ( ìd` INT( 5 ) NOT NULL AUTO_INCREMENT PRIMARY KEY , ùsername` VARCHAR( 30 ) NOT NULL , `password` VARCHAR( 30 ) NOT NULL , `ket` VARCHAR( 10 ) NOT NULL ) ENGINE = MYISAM ;

7. Selanjutnya dengan cara yang sama, anda akan membuat tabel – tabel web site yang dibutuhkan lainnya. Berikut adalah rancangan tabelnya : Tabel “artikel”



Tabel “bukutamu”

Tabel kategori

Tabel “kontak”

Tabel “slide_show”



Tabel “tentang”

B. Meng-import database Untuk mengimpor database yang sudah jadi, ikuti langkah – langkah berikut :

1. Jika sebelumnya anda telah membuat database “portfolio_db”, anda

dapat menghapusnya terlebih dahulu.

1. Buatlah kembali database “portfolio_db”



2. Klik menu import.

3. Klik tombol browse, dan pilihlah database di dalam folder data base.



Klik open, lalu klik Go.



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



BAB 4 MEMBANGUN SISTEM WEBSITE DINAMIS DENGAN PHP

4.1. Mempersiapkan Website Company Profile/Portfolio ke Web Server Sekarang kita akan memindahkan website kita ke dalam web server/localhost. Silahkan ikuti langkah – langkah berikut : 1. Copy folder proyek-web-portfolio.

2. Pindahkan ke dalam folder htdocs anda.

3. Copy dan pindahkan juga folder assets anda ke dalam folder proyek-web-portfolio anda.



4. Bukalah breowser anda, lalu ketikanlah alamat berikut pada address bar.

http://localhost/proyek-web-portfolio/

5. Tampilannya terlihat tidak sesuai dengan sebelumnya, hal ini karena lokasi folder assets berbeda dari sebelumnya. Sekarang folder assets berada pada folder yang sama dengan 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.



4.2. Membangun Website dinamis dengan PHP 4.2.1. Membuat templating website

Maksud dari templating website adalah kita akan membagi – membagi satu halaman website menjadi beberapa halaman/bagian. Kita akan membagi – bagi section – section, lalu menggabungkannya kembali dengan fungsi php. Silahkan ikuti langkah – langkah berikut :

1. Bukalah kembali file index.html anda. 2. Lalu save-as lah file anda dengan ekstensi .php.



3. Hapuslah file index.html anda, karena kita sudah memiliki file index.php.

4. Bukalah file index.php anda, lalu potonglah (cut) bagian ang terblok seperti gambar berikut.



5. Buatlah file baru, lalu paste di file baru tersebut.

6. Simpanlah dengan nama meta.php di folder yang sama dengan file index.php



7. Sekarang kita akan memasukan file meta.php ke dalam file index.php. letakan kursor pada area pemotongan yang tadi lalu ketikan kode fungsi php berikut pada area tersebut.

Sekarang kita akan melakukan hal yang sama pada section – section yang lainnya.

a. Templating website lanjut – Link CSS 1. Cut kode yang terblok.



2. Paste di file baru dan simpanlah dengan nama link-css.php

3. Lalu masukan file link-css.php anda di dalam file index.html.



b. Templating website lanjut – Section-Navigasi 1. Cut kode yang terblok.

2. Paste di file baru dan simpanlah dengan nama navigasi.php



3. Lalu masukan file navigasi.php anda di dalam file index.html.

4. Karena file index.html telah diganti dengan file index.php, maka kita perlu mengganti pula link – link index.html dengan index.php. Bukalah file navigasi.php anda, lalu gantilah “index.html” menjadi “index.php”.

c. Templating website lanjut – Section-Slide-Show

1. Cut kode yang terblok.



2. Paste di file baru dan simpanlah dengan nama slide-show.php

3. Lalu masukan file slide-show.php anda di dalam file index.php.



d. Templating website lanjut – Section-Layanan




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.



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

e. Templating website lanjut – Section-Portfolio




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




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.



g. Templating website lanjut – Section-Contact 1. Cut kode yang terblok.



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.



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




4. Paste di file baru dan simpanlah dengan nama script-js.php di dalam folder utama anda.

5. Lalu masukan file script-js.php anda di dalam file index.php.



BAB 5 MEMBANGUN CONTROL PANEL ADMIN/BACK END

5.1. Konfigurasi Database yang akan digunakan

Sekarang kita akan membuat halaman koneksi.php yang berfungsi untuk

menghubungkan halaman html/php kita dengan server MySQL.

Koneksi.php

1. Ketikanlah kode berikut dalam editor anda.

2. Buatlah folder admin dalam folder utama anda.

3. Simpan lah file tersebut dengan nama “koneksi.php” di dalam folder

admin anda.



4. Sekarang kita akan mengecek koneksi tersebut, apakah berhasil atau

gagal. Tambahkan kode di bawah pada file koneksi.php lalu simpan

kembalilah.

5. Lakukan seperti gambar di bawah untuk memeriksa koneksi database.



Klik koneksi.php, jika tampil seperti di bawah maka koneksi berhasil.

6. Karena kode di koneksi.php sudah berhasil, maka kita perlu menghapus

kode pengecekannya. Hal ini untuk tidak menampilkan pemberitahuan

berhasil atau gagal koneksi.

Lalu simpan kembali file tersebut.

5.2. Kerangka template halaman admin.

home.php



Penjelasan home.php:



Penjelasan home.php :

1-6

Memulai session, session itu seperti cookies, dapat menampung data sementara.

28-29



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.



“link.php”



Simpanlah dengan nama “link.php” pada folder admin anda.

“menu.php”

Simpanlah dengan nama “menu.php” pada folder admin anda.

“content.php”



Simpanlah dengan nama “content.php” pada folder admin anda.

“footer”

Simpanlah dengan nama “footer.php” pada folder admin anda.

Coba bukalah halaman home.php anda.



Coba pilih menu admin atau salah satu menu



Dengan variable templating ini, maka konten – konten lainnya dapat ditempatkan

pada section content dengan memanfaatkan variable pada alamat url yang ada di

konten.

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

maka ketika menu admin dikilk, halaman akan menuju home.php. Dan di home.php

akan dilakukan pemeriksaan, terhadap kecocokan variable menu. Karena pada

halaman home.php, tidak ada kondisi jike $menu==admin, maka akan ditampilkkan

pemberitahuan halaman belum dibuat seperti di atas.

Selanjutnya anda akan menambahkan kondisi lainnya pada home.php, sama seperti

di atas setiap kondisi yang sesuai dengan variable yang di lewatkan lewat url akan



diseleksi untuk ditentukan, halaman apa yang harus ditampilkan pada section

contentnya.

5.4. Menambahkan kondisi untuk variable templating

1. Buka home.php anda dan tambahkanlah kode berikut



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.



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



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



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



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



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



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



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



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



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.



5.6.2. Menu Admin

admin.php



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



Simpanlah dengan nama admin-tambah.php.

admin-update.php



Simpanlah dengan nama admin-update.php

admin-update-p.php



Simpanlah dengan nama admin-update-p.php.

5.6.3. Menu Artikel

artikel.php



Simpanlah dengan nama artikel.php pada folder artikel yang ada di dalam folder

content.

artikel-hapus.php



Simpanlah dengan nama artikel-hapus.php pada folder artikel yang ada di dalam

folder content.

artikel-tambah.php



Simpanlah dengan nama artikel-tambah.php.

artikel-update.php



Simpanlah dengan nama artikel-update.php

artikel-update-p.php



Simpanlah dengan nama artikel-update-p.php.

5.6.4. Menu Kategori

kategori.php



Simpanlah dengan nama kategori.php pada folder kategori yang ada di dalam folder

content.

kategori-hapus.php



Simpanlah dengan nama kategori-hapus.php pada folder kategori yang ada di


kategori-tambah.php



Simpanlah dengan nama kategori-tambah.php.



kategori-update.php

Simpanlah dengan nama kategori-update.php

kategori-update-p.php



Simpanlah dengan nama kategori-update-p.php.

penjelasan kategori-update-p.php

5.6.5. Menu Kontak

kontak.php



Simpanlah dengan nama kontak.php pada folder kontak yang ada di dalam folder

content.

kontak-hapus.php



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

folder content.

kontak-tambah.php



Simpanlah dengan nama kontak-tambah.php.

kontak-update.php



Simpanlah dengan nama kontak-update.php

kontak-update-p.php



Simpanlah dengan nama kontak-update-p.php.

5.6.6. Menu Bukutamu

bukutamu.php



Simpanlah dengan nama bukutamu.php pada folder bukutamu yang ada di dalam

folder content.

bukutamu-hapus.php



Simpanlah dengan nama bukutamu-hapus.php pada folder bukutamu yang ada di


5.6.7. Menu Tentang

tentang.php



Simpanlah dengan nama tentang.php pada folder tentang yang ada di dalam folder

content.

tentang-hapus.php



Simpanlah dengan nama tentang-hapus.php pada folder tentang yang ada di dalam

folder content.

tentang-tambah.php



Simpanlah dengan nama tentang-tambah.php.

tentang-update.php



Simpanlah dengan nama tentang-update.php

tentang-update-p.php



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



Penjelasan index.php.

Baris Penjelasan

34 – 42 Menampilkan form login

Simpanlah dengan nama index.php



Selanjutnya kita akan membuat halaman untuk melakukan pengecekan data

input dari form login dengan data yang ada di database.

cek-login.php



Penjelasan cek-login.php.

Baris Penjelasan

2 Memulai session



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



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.



3. Buatlah folder “artikel” di dalam folder images untuk menampung

gambar slide show yang diupload.

4. Buatlah folder “logo” di dalam folder images untuk menampung gambar

logo yang diupload.



BAB 6 MEMBANGUN KONTEN DINAMIS TIAP SECTION DENGAN MYSQL DAN PHP

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



Penjelasan :



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



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



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



6.4.2. Section Layanan

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



Penjelasan :

Baris Penjelasan



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.



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



layanan-list.php halaman ini untuk menampilkan daftar nama layanan yang disediakan oleh perusahaan.



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



portfolio-detail.php



portfolio-list.php



6.4.4. Section Blog

blog.php



blog-detail.php



blog-list.php



blog-detail-category.php



6.4.5. Section Kontak

contact.php



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



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.



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



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



Sekarang bukalah website anda kembali, lalu klik lah menu – menunya,

maka ketika menu berpindah maka perpindahan akan tergulung secara

lembut.



Referensi

Website

http://getbootstrap.com (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)

http://getbootstrap.com/

https://github.com/twbs/bootstrap

http://www.blacktie.co/

http://www.bootsnipp.com/

https://github.com/twbs/bootstrap/releases

http://getbootstrap.com/2.3.2/assets/bootstrap.zip

http://notepad-plus-plus.org/

http://www.apachefriends.org/

http://www.mozilla.org/en-US/

http://www.google.com/chrome/

http://www.colorpicker.com/



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/

http://www.getbootstrap.com/

http://www.ngulikweb.com/internet/mengenal-node-js-jalankan-javascript-di-server/

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/

http://her0satr.staff.ub.ac.id/2012/11/github-apa-itu-fungsi-dan-manfaat-github/



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

mailto:[email protected]

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

Technology