Kupas Tuntas Web Responsive + CD Source Code

7

UCAPAN TERIMA KASIH

Buku ini saya persembahkan khusus untuk:

1. Kedua orang tuaku yang selalu memberikan do’a

2. Isteriku Umie yang selalu memberikan motivasi dalam suka maupun

duka, anak-anakku Fascal Galih Hariyanto, Izal Fathoni dan Cahyani

Putri Riyanto yang selalu menghibur di saat lelah

3. Rekan-rekan kerja di PDII-LIPI: Budi Nugroho, Sjaeful Afandi,

Ekawati Marlina, Al Hafidz Akbar Maulana S., Rishadi, Endang

Mulus Rahayu, dan Ratih Keumala Sari

4. Romi Satria Wahono dan Hendro Subagyo, selaku guru dan

inspirator

5. Rekan-rekan lain yang tidak dapat saya sebutkan satu persatu.

Semoga buku ini bermanfaat

7

KATA PENGANTAR

Jika kita perhatikan perkembangan internet semakin tidak terkendali, hal

ini mengubah pola hidup seseorang. Dulu orang harus ke pasar atau

hypermarket untuk membeli barang namun sekarang dapat dilakukan

melalui smartphone. Dulu untuk membeli tiket pesawat harus datang ke

agen terdekat namun sekarang dapat dipesan melalui smartphone. Dulu

para mahasiswa maupun peneliti harus datang ke perpustakaan untuk

mendapatkan infromasi yang diinginkan, namun sekarang dapat

ditemukan hanya melalui smartphone.

Pada tahun 2011-2012, Google melakukan riset "Trends in digital device

& internet usage" (Smartphone, Tablet, Netbooks, dan TV Internet)

dengan total 3.000 responden terhadap lima negara yaitu: Amerika

Serikat, Inggris, Jerman, Perancis, dan Jepang. Riset dilakukan dengan

berbagai metodologi yang menghasilkan output dari berbagai sudut

pandang, salah satunya adalah akses internet melalui smartphone,

Amerika Serikat 44%, Inggris 51%, Perancis 38%, Jerman 29%, dan

Jepang 20%. Cisco System, Inc juga memprediksi bahwa pada tahun 2015

jumlah pengguna dan fitur perangkat mobile akan meningkat secara

eksponensial yang akan mencapai sekitar 788 juta ponsel untuk

mengakses halaman website. Hal ini dikarenakan browser berbasis mobile

sudah dapat menampilkan halaman situs web sama bagusnya dengan

browser berbasis PC/Notebook.

Melihat perkembangan teknologi dan hasil riset yang dilakukan oleh

perusahaan terkemuka, kita seharusnya dapat mengambil hikmah untuk

mempersiapkan dalam menghadapi tantangan 10 tahun ke depan,

8

minimal jangka pendek. Bagaimana mengubah mindset seseorang yang

awalnya hanya menggunakan PC/Notebook untuk mengakses halaman

situs web beralih ke smartphone ? Kuncinya adalah Web Responsif,

karena dengan teknologi tersebut akan memudahkan pengguna dalam

mencari informasi yang diinginkan. Tampilan situs web harus disesuaikan

dengan media dan resolusi yang digunakan oleh pengguna.

Pengguna akan “malas” untuk mengakses sebuah situs web jika tampilan

versi mobile sama dengan versi PC/Notebook. Betapa tidak? Teks akan

terlihat sangat kecil jika diakses melalui smartphone, harus diperbesar

dulu tampilannya kemudian harus sering melakukan scroll. Semua

kendala dan kesulitan tersebut harus segera diatasi agar pengguna lebih

nyaman membaca informasi yang disajikan.

Buku ini wajib dibaca agar permasalahan situs web Anda segera dapat

diatasi, pada akhirnya pengunjung makin banyak dan sering berkunjung

kembali di lain waktu.

Bogor, Februari 2014

Slamet Riyanto

7

DAFTAR ISI

BAB I PENDAHULUAN

BAB II PERBEDAAN FIXED, LIQUID, ADAPTIVE, DAN

RESPONSIVE WEB

2.1 Fixed Web Design

2.2 Liquid/Flexible Web Design

2.3 Adaptive Web Design

2.4 Responsive Web Design

BAB III CSS FRAMEWORK

3.1 What is CSS Framework?

3.2 960 Grid System

3.3 Blueprint

3.4 Bootstrap

3.5 Cardinal

3.6 Cascade Framework

3.7 Columnal

3.8 Floatz

3.9 Fluidable

3.10 Foundation

3.11 Gumby Framework

3.12 Skeleton

3.13 YAML (Yet Another Multicoloumn Layout)

3.14 YU CSS Grids

BAB IV WEB DESIGN WIREFRAME FOR MOCKUP

4.1 MockFlow

8

4.2 Axure

4.3 Balsamiq Mockup

4.4 Pencil Project

4.5 HotGloo

4.6 Mockingbird

4.7 Cacoo

4.8 ProtoShare

4.9 iPlotz

4.10 JustinMind

BAB V DESAIN RESPONSIF UNTUK MEROMBAK ALUR KERJA

5.1 Mobile First

5.2 Content Strategy

5.3 Sketch and Prototype

5.4 Frameworks

5.5 Breakpoints

5.6 Scalable Images

5.7 Minicifation

BAB VI PRAKTIKUM MEMBUAT WEB RESPONSIF

6.1 Merancang Template yang Keren

6.2 Menentukan CSS Framework

6.3 Management File dan Direktori

6.4 Merancang Template dengan Sistem Grid

6.5 Membagi Tata Letak berdasarkan Kolom

6.6 Praktek Sederhana dalam Format HTML5

BAB VII CSS3 MEDIA QUERY

7.1 General Style

7.2 Desktop and Notebook Widescreen High Resolution

7.3 Desktop and Notebook

7.4 Netbook and Tablet

7.5 Smartphones

9

BAB VIII BEST PRACTICE: DYNAMIC WEB WITH PHP & MYSQL

8.1 Persiapan Awal

8.2 Membuat Function

8.3 Proses Query untuk Frontend

BAB IX HALAMAN ADMINISTRATOR

9.1 Menggunakan Free Admin Template

9.2 Merancang Halaman Administrator

9.3 Membuat Panel Menu

9.4 Membuat Halaman Login

9.5 Membuat Dashboard

9.6 Membuat Modul Berita

9.6.1 Menampilkan Daftar Berita

9.6.2 Form Input

9.6.3 Multilevel Dropdown Menu

9.6.4 Insert into MySQL

9.6.5 Form Edit

9.6.6 Update into MySQL

9.6.7 Delete from MySQL

1

BAB 1 PENDAHULUAN

Jika Anda berpikir harus mengembang website versi mobile, pikir ulang

kembali sebelum melaksanakan. Tampilan website yang ideal harus

memiliki berbedaan tampilan ketika diakses melalui mobile, tablet

maupun PC/Notebook. Hal ini untuk memberikan kenyaman kepada

pengguna ketika mencari informasi dalam website tersebut. Apa yang

terjadi jika website diakses melalui mobile ? Teks tidak mungkin terbaca

dan harus memperbesar tampilan beberapa kali. Ini akan membuang

waktu dan energi hanya sekadar ingin melihat sebuah menu yang

ditampilkan. Mengapa hal ini bisa terjadi? Sistem yang digunakan untuk

membangun website tersebut tidak mendukung teknologi responsive web.

Diskusi tentang Responsive Web Design (RWD) sudah populer sejak

tahun 2012, namun belum banyak yang menerapkan teknologi tersebut.

Jumlah pengguna dan fitur untuk perangkat mobile telah meningkat

secara eksponen dalam beberapa tahun terakhir. Browser versi mobile

sekarang dapat menampilkan halaman web sama bagusnya dengan versi

desktop, sehingga sekarang menjadi hal biasa bagi orang untuk

melakukan browsing melalui website dari ponsel atau tablet. Cisco

memprediksi bahwa pengguna ponsel akan tumbuh lebih besar di masa

depan sehingga pada tahun 2015 akan bertambah menjadi 788 juta

pengguna ponsel.

Beberapa website luar negeri sudah banyak yang menerapkan karena hal

ini memang sangat penting. Sedangkan di Indonesia belum banyak yang

menerapkannya, banyak faktor yang mempengaruhinya. Bisa

menyangkut masalah dana, waktu, sumberdaya manusia, pengetahuan,

2

dan faktor lainnya. Bagaimana jika ingin mengembangkan responsive web

tanpa mengganggu website yang sudah ada? Hal ini akan dijelaskan secara

mendetail pada bagian lain dalam buku ini.

Menurut sebuah survei yang dilakukan oleh Proyek Pew Research Center

for Excellence in Journalism (PEJ) bekerjasama dengan The Economist

Group, merinci berita yang digunakan pada perangkat mobile

mengungkapkan bahwa setengah dari semua orang dewasa di Amerika

Serikat kini memiliki koneksi mobile ke web melalui sebuah smartphone

atau tablet, secara signifikan pada tahun 2011, dan ini memiliki implikasi

besar terhadap mekanisme berita yang akan dikonsumsi dan dibayar.

Pengguna ponsel, tidak hanya memeriksa berita utama pada perangkat

mereka, walaupun hampir semua menggunakan perangkat untuk update

berita terbaru. Banyak juga membaca berita lama - 73% orang dewasa

mengkonsumsi berita melalui tablet mereka untuk membaca artikel-

artikel secara mendalam atau setidaknya kadang-kadang, termasuk 19%

yang melakukannya setiap hari. Sepenuhnya 61% dari konsumen berita

setidaknya kadang-kadang membaca cerita yang lebih panjang, dan 11%

secara teratur.

Tahun 2013 menjadi tahun RWD untuk lepas landas, mengingat adopsi

yang cepat dari tablet dan smartphone - dan fakta bahwa pengguna saat

ini tampaknya lebih suka membaca berita mereka melalui web mobile

dibanding dalam bentuk aplikasi.

“Now more than ever, we’re designing work meant to be viewed along a

gradient of different experiences. Responsive web design offers us a way

forward, finally allowing us to 'design for the ebb and flow of things” – Ethan

Marcotte, seorang penulis Responsive Web Design.

Dasar desain web responsif Pada dasarnya RWD memungkinkan situs web untuk menanggapi atau

beradaptasi dengan ukuran viewport yang berbeda, lebih kecil atau lebih

besat tanpa mengatur domain atau subdomain khusus untuk pengguna

yang menggunakan perangkat ponsel ketika mengakses situs web.

3

Tampilan dan nuansa warna dapat dipertahankan untuk memiliki

pengalaman yang sama meski menggunakan ukuran perangkat yang

berbeda. Hal ini dimungkinkan dengan penggunaan viewport meta tag

dan CSS3 media query.

Viewport meta tag dan CSS3 media queries Sebuah web responsif utamanya dibangun dengan dua komponen.

Komponen pertama adalah meta tag viewport. Tag ini ditempatkan dalam

tag <head> dan digunakan untuk mengontrol skala dari halaman website.

Misalnya, menambahkan viewport meta tag dengan mengatur skala awal

1 yang akan memungkinkan halaman web untuk ditingkatkan sebesar 100

persen dari skala ukuran viewport saat membuka untuk pertama kalinya.

Komponen kedua adalah CSS3 media query (http://www.w3.org/TR/css3-

mediaqueries/) yang menentukan gaya untuk ukuran viewport tertentu.

Misalnya potongan kode berikut menunjukkan bagaimana kita dapat

menyembunyikan gambar ketika ukuran viewport adalah antara 321 px

dan 480 px. (@media screen and (min-width: 321px) and (max-

width: 480px) {img { display: none; }}).

Keterbatasan desain web responsif Point penting di sini adalah RWD tidak cukup sempurna, ada beberapa

masalah yang harus diselesaikan, termasuk membuat gambar menjadi

responsif. Praktek saat ini untuk membuat gambar responsif adalah

menggunakan skala agar sesuai dengan viewport dengan maksimal lebar

(max-width: 100%) atau mungkin menyembunyikan tampilan (display:

none) ketika gambar tidak ingin ditampilkan.

Masalah lain yang saat prakte di lapangan adalah bahwa hanya mengubah

presentasi gambar, sedangkan gambar yang sebenarnya apda dokumen

HTML tetap ditidak berpengaruh. Ini berarti bahwa pengguna masih bida

mengunduh resolusi gambar yang sama dengan ukuran lebih besar

terlepas dari perangkat dan viewport yang digunakan, hal ini

4

mengakibatkan konsumsi bandwidth terbuang dan juga mengurangi

kinerja situs web, khususnya pengguna mobile.

Gambar Responsif dengan elemen <picture> Baru-baru ini di World Wide Web Consortium (W3C), sebuah kelompok

yang disebut Kelompok Komunitas Gambar Responsif

(http://www.w3.org/community/respimg/) mengusulkan elemen baru

yang disebut <picture> untuk mengatasi situasi. Elemen <picture> ini

memungkinkan pengiriman ukuran gambar yang tepat dan resolusi

didasarkan pada situasi tertentu. Perlu dicatat bahwa unsur baru ini, pada

saat penulisan, masih dalam tahap rancangan, yang berarti bahwa itu

belum diterapkan oleh vendor browser. Spesifikasi ini dapat berubah atau

bahkan dihapus di masa depan. Perhatikan contoh script berikut:

<picture alt="responsive images"> <source src=big.jpg media="min-width:768px"> <source src=medium.jpg media="min-width:320px"> <source src=small.jpg> <img src=medium.jpg alt="responsive images">

</picture>

Perhatikan potongan kode di atas, akan memberikan file gambar big.jpg

dengan resolusi tinggi dan mungkin lebar yang lebih luas hanya ketika

viewport minimal 768px, sedangkan file gambar medium.jpg dengan

resolusi yang lebih rendah dan ukuran file akan disampaikan saat

viewport minimal 320px. Kemudian, bila kondisi tersebut tidak

terpenuhi, gambar small.jpg kecil akan ditampilan. Terakhir, di bagian

bawah daftar, kami juga memiliki satu gambar lagi dengan elemen <img>,

hal ini juga digunakan untuk memberikan gambar cadangan untuk

browser yang tidak mendukung elemen <picture>.

5

BAB 2 PERBEDAAN FIXED,

LIQUID, ADAPTIVE, DAN RESPONSIVE WEB

.

Situs web (dalam bahasa Inggris: Web site, web site, atau sites) adalah

sejumlah halaman web yang memiliki topik saling terkait, terkadang

disertai pula dengan berkas-berkas gambar, video, atau jenis-jenis berkas

lainnya. Sebuah situs web biasanya ditempatkan setidaknya pada sebuah

server web yang dapat diakses melalui jaringan seperti internet, ataupun

Local Area Network (LAN) melalui alamat internet yang dikenali sebagai

Uniform Resources Locator (URL). Gabungan atas semua situs yang

dapat diakses publik di internet disebut pula sebagai Word Wide Web

atau disingkat WWW.

Tampilan sebuah website dapat mempengaruhi pengguna dalam mencari

informasi. Jika tampilan awal sudah membingungkan, dalam hitungan

detik pengguna tersebut akan segera meninggalkan situs web yang baru

saja diakses. Halaman situs web yang ditampilkan kepada pengunjung

bergantung pada beberapa aspek diantaranya resolusi monitor, browser,

dan media yang digunakan.

Dalam sebuah situs resmi http://www.w3schools.com menampilkan

statistik data pengguna internet berdasarkan resolusi yang digunakan,

seperti nampak pada gambar berikut.

6

Gambar 2.1 Statisk pengguna internet berdasarkan resolusi monitor

Dari data tersebut, dapat dijadikan referensi untuk mengembangkan situs

web agar dapat diakses melalui berbagai macam resolusi tanpa

mengurangi prinsip esetika desain, kegunaan, dan kemudahan akses.

Berikut ini sedikit penjelasan beberapa rancangan web yang dapat

digunakan sebagai bahan pertimbangan sebelum mengembangkan situs

web yang dinamis.

2.1 Fixed Web Design Fixed web design tetap adalah tata letak dimulai dengan ukuran tertentu

yang ditentukan oleh perancang web. Para perancang web telah

menetapkan lebar, terlepas dari ukuran tampilan halaman jendela

browser. Sebuah situs web yang menggunakan tipe ini memiliki

pembungkus (wrapper) yaitu lebar tetap (fixed-width), dan komponen di

dalamnya memiliki lebar dalam presentase (percent) maupun tetap (fixed)

dalam format pixels. Yang terpenting adalah pengaturan wrapper agar

tidak berubah. Situs web ini tidak memperdulikan resolusi layar yang

dimiliki pengunjung, mereka akan melihat lebar yang sama seperti

pengunjung lainnya. Berikut beberapa alasan pro dan kontra sebagai

bahan pertimbangan dalam mendesain halaman situs web berbasis fixed.

7

Pro

− Fixed-width layout lebih mudah digunakan dan lebih mudah untuk

menyesuaikan dalam hal desain.

− Lebar adalah sama untuk setiap browser, sehingga mengurangi

kerumitan terhadap gambar, form, video dan konten lainnya yang

menerapkan fixed-width

− Tidak perlu untuk mengatur lebar minimal (min-width) dan lebar

maksimal (max-width), yang tidak didukung oleh setiap browser.

− Bahkan, jika sebuah situs web yang dirancang agar kompatibel

dengan resolusi terkecil 800x600, konten masih akan cukup lebar

pada resolusi yang lebih besar agar mudah dibaca.

Kontra

− Tata letak menggunakan fixed-width dapat membuat ruang putih

berlebihan bagi pengguna dengan resolusi layar yang lebih besar,

sehingga mengganggu jarak proporsional, keseimbangan, dan

prinsip-prinsip desain lainnya

− Resolusi layar yang kecil mungkin memerlukan scroll bar horizontal,

bergantung lebar layout tetap tersebut

− Tekstur mulus, pola dan gambar lanjutan diperlukan untuk

mengakomodasi pengunjung dengan resolusi yang lebih besar

− Umumnya memiliki nilai keseluruhan yang lebih rendah ketika

dinilaid dari sisi kegunaan

8

Gambar 2.2 Tata letak rancangan situs web berbasis “Fixed”

Gambar 2.3 Contoh situs web menggunakan teknologi fixed web design

9

2.2 Liquid/Flexible Web Design Tata letak situs web yang menerapkan liquid didasarkan pada persentase

dari ukuran jendela browser saat itu. Teknologi ini melenturkan ukuran

jendela browser, bahkan tampilan saat ini mengubah ukuran browser

secara otomatis saat pengunjung melihat situs web. Tata letak liquid

memungkinkan penggunaan yang sangat efisien dari ruang yang

disedikan oleh jendela browser web yang diberikan atau bergantung pada

resolusi monitor. Teknologi ini disukai para perancang web yang

memiliki banyak informasi yang didapat dalam ruang yang terbatas,

karena mereka tetap konsisten dalam ukuran dan bobot halaman relatif

dari orang yang melihat halaman situs web.

Di sini lain, beberapa perancang web mungkin tidak menggunakan desain

dengan teknologi fluid karena berbagai alasan, namun sering melupakan

beberapa manfaat jika menggunakan tata letak liquid. Berikut beberapa

alasan pro dan kontra sebagai bahan pertimbangan dalam mendesain

halaman situs web berbasis liquid.

Pro

− Rancangan halaman situs web berbasis liquid terlihat lebih user-

friendly karena menyesuaikan pengaturan pengguna

− Jumlah spasi ekstra putih mirip antara semua browser dan resolusi

layar, yang menjadi lebih menarik secara visual

− Jika dirancang dengan baik, tata letak liquid dapat menghilangkan

scroll bar horizontal dalam resolusi layar yang lebih kecil.

Kontra

− Perancang kurang memiliki kendali atas apa yang dilihat pengguna

dan dapat mengabaikan masalah karena karena tata letak terlihat baik

pada resolusi layar khusus mereka

10

− Gambar, video, dan jenis konten lainnya dengan set lebar mungkin

perlu diatur pada beberapa kasus untuk mengakomodasi resolusi

layar yang berbeda

− Dengan resolusi yang sangat besar, kurangnya konten dapat

menciptakan ruang putih berlebih yang dapat mengurangi estetika.

Gambar 2.4 Tata letak rancangan situs web menggunakan teknologi liquid

Gambar 2.5 (http://www.stuffandnonsense.co.uk/)

15

BAB 3 CSS FRAMEWORKS

.

3.1 What is CSS Framework? Framework adalah bentuk dasar struktur konseptual yang dapat

digunakan sebagai "awal" untuk mengerjakan proyek web. Misalnya,

mendefinisikan ulang secara global, dasar yang konsisten, pengaturan

tipografi atau gaya standar untuk bentuk berulang-ulang setiap kali

mengerjakan proyek web baru. Dengan memanfaatkan Framework, Anda

dapat mempersiapkan default-style sekali dan menggunakan kembali

dalam semua proyek web masa depan. Ini yang disebut sebagai kerangka

CSS (CSS Framework).

CSS Famework merupakan kumpulan library dokumen CSS yang

digunakan untuk membuat pengembangan halaman web yang lebih

standar, cepat dan tidak rumit dalam bahasa Cascading Style Sheet (CSS).

CSS Framework biasanya menyediakan CSS style untuk mengatur

tipografi (typography), tata letak (layout) - umumnya dalam sistem grid,

serta menata ulang browser.

Dalam dunia desain web, untuk memberikan definisi yang lebih

sederhana, Framework didefinisikan sebagai paket terdiri dari struktur file

dan folder kode standar (dokumen HTML, CSS, JS, dan lain-lain) yang

dapat digunakan untuk mendukung pengembangan website, sebagai

dasar untuk mulai membangun sebuah situs.

16

“[Framework is] a set of tools, libraries, conventions, and best

practices that attempt to abstract routine tasks into generic modules

that can be reused. The goal here is to allow the designer or

developer to focus on tasks that are unique to a given project, rather

than reinventing the wheel each time around.” [Framework For

Designers, by Jeff Croft].

Pada dasarnya ada 2 jenis Framework untuk membedakan yaitu backend

dan frontend. Perbedaan ini diambil bergantung pada kerangka tersebut

lapisan presentasi (presentation layer) atau lapisan aplikasi/logis

(application/logic layer).

Gambar 3.1 Pembagian kerangka lapisan Framework (http://www.awwwards.com)

KENTUNGAN

− Meningkatkan produktifitas dan menghindari kesalahan umum. Jika

Anda mengembangkan beberapa situs yang sifatnya sama, sebuah

abstraksi dari kode CSS secara dramatis dapat mempercepat

produktifitas Anda, membantu untuk menghindari kesalahan secara

umum dan menyederhanakan manajemen kode CSS.

17

− Menormalkan basis kode/klas. Anda memiliki kode default CSS dan

markup XHTML sehingga akan selalu menggunakan ID dan nama

kelas yang sama dalam proyek Anda. Konsistensi kode pada seluruh

proyek sehingga mempermudah bagi Anda dan menjaga situs web

tanpa menggali ke dalam sumber kode dari setiap proyek yang pernah

dilakukan

− Memiliki alur kerja yang lebih baik dalam tim. Jika CSS Framework

didokumentasikan dengan baik, dapat digunakan dalam sebuah tim

sebagai common ground-up, sehingga dapat menghindari

kesalahpahaman dan memastikan alur kerja secara optimal. Hasil

terakhir dalam menghindari kesalahan dan membantu Anda untuk

memenuhi tenggat waktu tanpa mengorbankan kualitas produk dan

tanpa biaya mahal

− Browser yang kompatibel secara optimal. CSS Framework disebut

sebagai "bulletproof", sehingga Anda tidak perlu khawatir tentang

masalah kompatibilitas browser dan bisa segera mulai coding

− Memiliki kode yang bersih, baik, terstruktur dan lengkap. CSS

Framework menyediakan dengan dasar pemikiran dengan baik untuk

situs Anda, menggunakan styling dasar dari semua tag html – elemen

yang Anda akan merasa perlu untuk gaya dari awal proyek Anda.

KERUGIAN

− Perlu waktu untuk memahami Framework. Dibutuhkan untuk

memahami arsitektur dari Framework jauh melampaui tugas kasar

coding dari awal

− Membutuhkan keakraban yang erat dengan arsitektur kode Anda.

Menggunakan CSS Framework eksternal, Anda masih perlu

pemahaman yang mendalam tentang kode Anda. Anda perlu

mengetahui persis bagaimana kerangka kerja Anda benar-benar

dibangun. "Dengan membangun sebuah situs dari bawah ke atas,

Anda mendapatkan pengetahuan tentang arsitektur situs Anda yang

tidak bisa dipelajari melalui studi atau dokumentasi”

18

− Mungkin mewarisi bug atau kesalahan seseorang. Jika Anda

menggunakan CSS Frameworks eksternal Anda mungkin mendapat

masalah untuk memperbaiki bugs orang lain yang jauh lebih

memakan waktu daripada memperbaiki bug Anda sendiri

− Mengembangkan situs pada kerangka kerja, bukan pada pengetahuan

yang solid CSS. Masalah besar dengan Framework adalah ketika

sudah naik dan datang pengembang yang menempelkan pada

Framework yang bertentangan dengan kode tersebut

− Mendapatkan kode sumber yang membengkak. Apakah itu dalam

kerangka bahasa pada sisi server atau JavaScript library, sering

muncul persentase besar dari kode yang tidak akan pernah

dieksekusi. Meskipun sisi server utama tidak menjadi masalah,

namun hal ini dapat menurunkan kinerja kerangka sisi klien seperti

JavaScript library

− CSS tidak dapat dibingkai semantik. CSS dan (X) HTML berjalan

beriringan. (X) HTML adalah bahasa semantik di alamnya, yang tidak

mungkin untuk membungkus dalam gaya kerangka. Kerangka CSS

pasif menghilangkan sebagian besar dari nilai semantik dari markup

dokumen dan ini harus dihindari

− Mengabaikan keunikan proyek Anda. Desain harus didasarkan pada

konten, bukan pada template standar yang Anda gunakan berulang-

ulang.

3.2 960 Grid System 960 Grid System merupakan upaya untuk merampingkan alur kerja

pengembangan web dengan menyediakan dimensi yang umum

digunakan, berdasarkan lebar 960 piksel. Ada dua varian: 12 dan 16

kolom, yang dapat digunakan secara terpisah atau bersama-sama.

12-column grid dibagi menjadi bagian-bagian yang 60 piksel lebar. 16-

column grid terdiri dari penambahan 40 pixel. Setiap kolom memiliki 10

pixel margin di sebelah kiri dan kanan, yang membuat 20 pixel celah lebar

19

antara kolom. Premis dari sistem ini cocok untuk prototyping cepat, tapi

itu akan bekerja sama dengan baik ketika diintegrasikan ke dalam

lingkungan produksi. Ada lembar sketsa untuk cetak, desain tata letak,

dan file CSS yang memiliki pengukuran secara identik.

Bagi mereka lebih nyaman merancang pada 24-column grid, versi

alternatif juga disertakan. Ini terdiri dari kolom 30 piksel lebar, dengan 10

pixel gutters, dan 5 pixel buffer pada setiap container. Hal ini membuat

teks menyentuh pada browser Chrome. Dengan memanfaatkan push_XX

dan kelas pull_XX, unsur-unsur dapat disusun kembali, independen dari

urutan di mana mereka muncul dalam markup. Hal ini memungkinkan

Anda untuk menyimpan info lebih relevan yang lebih tinggi dalam

HTML, tanpa mengorbankan presisi terhadap tata letak halaman Anda.

Misalnya, melihat kode sumber halaman ini untuk melihat bagaimana tag

H1 telah diposisikan kembali.

Untuk mengunduh aplikasi ini, silakan kunjungi website resmi di

http://960.gs/.

Gambar 3.2 Tampilan halaman utama website 960 Grid System

3.3 Blueprint Blueprint adalah kerangka CSS yang dirancang untuk mengurangi waktu

pengembangan dan memastikan kompatibilitas cross-browser ketika

bekerja dengan Cascading Style Sheets (CSS). Hal ini juga berfungsi

20

sebagai landasan bagi banyak alat yang dirancang untuk membuat

pengembangan CSS lebih mudah dan mudah diakses oleh pemula.

Blueprint dirilis di bawah versi modifikasi dari Lisensi MIT, sehingga

perangkat lunak bebas. Hal ini dapat digunakan baik sebagai, atau lebih

diadaptasi untuk digunakan melalui sebuah alat kompresi yang ditulis

dalam Ruby.

Fitur utama kerangka kerja CSS ini adalah: Grid mudah disesuaikan,

Sensible default typography, tipografi dasar, atur ulang browser CSS

dengan sempurna, stylesheet untuk pencetakan, script powerfull untuk

kustomisasi, penggembungan (bloat) diperkecil sebanyak mungkin.

Untuk mengunduh CSS Frameworks ini, silakan kunjungi website resmi

di http://www.blueprintcss.org/.

Gambar 3.3 Tampilan halaman utama website bluprint

3.4 Bootstrap Bootstrap adalah kumpulan alat yang gratis untuk membuat website dan

aplikasi web. Ini berisi HTML dan CSS berbasis desain template untuk

tipografi, bentuk, tombol, navigasi dan komponen antarmuka lainnya,

serta opsional ekstensi JavaScript. Bootstrap dikembangkan oleh Mark

21

Otto dan Jacob Thornton di Twitter sebagai kerangka untuk mendorong

konsistensi di alat internal. Sebelum Bootstrap, berbagai perpustakaan

yang digunakan untuk pengembangan antarmuka, yang menyebabkan

inkonsistensi dan beban pemeliharaan tinggi.

Bootstrap memiliki dukungan yang relatif lengkap untuk HTML5 dan

CSS 3, sehingga kompatibel dengan semua browser utama. Informasi

dasar dari kompatibilitas situs atau aplikasi yang tersedia untuk semua

perangkat dan browser. Terdapat konsep kompatibilitas parsial yang

membuat informasi dasar dari sebuah situs web yang tersedia untuk

semua perangkat dan browser. Misalnya, sifat diperkenalkan pada CSS3

untuk sudut dibulatkan, gradien dan bayangan yang digunakan oleh

Bootstrap meskipun kurangnya dukungan oleh browser web lama.

Bootstrap adalah modular dan pada dasarnya terdiri dari serangkaian

stylesheet LESS yang menerapkan berbagai komponen toolkit. Sebuah

stylesheet disebut bootstrap.less mencakup komponen-komponen

stylesheet. Pengembang dapat menyesuaikan file Bootstrap sendiri,

memilih komponen yang ingin mereka gunakan dalam proyek mereka.

CSS Framework ini hadir dengan lebar standar 940 pixel, layout grid.

Pengembang dapat menggunakan tata letak variable-width. Untuk kedua

kasus, toolkit memiliki empat variasi untuk menggunakan resolusi yang

berbeda dan jenis perangkat: ponsel, portrait dan landscape, tablet dan PC

dengan resolusi rendah dan tinggi. Setiap variasi menyesuaikan lebar

kolom.

Bootstrap dilengkapi dengan beberapa komponen JavaScript dalam

bentuk plugin jQuery. Mereka menyediakan elemen antarmuka pengguna

tambahan seperti kotak dialog, tooltips, dan carousels. Mereka juga

memperluas fungsionalitas dari beberapa elemen antarmuka yang ada,

termasuk misalnya fungsi auto-complete untuk bidang masukan. Dalam

versi 2.0, plugin JavaScript berikut ini didukung: Modal, Dropdown,

Scrollspy, Tab, Tooltip, Popover, Alert, Button, Tutup, Carousel dan

Typeahead.

22

Untuk menggunakan Bootstrap dalam sebuah halaman HTML,

pengembang cukup mengunduh Bootstrap CSS stylesheet dan termasuk

link dalam file HTML yang tersedia di website resmi

http://getbootstrap.com/.

Gambar 3.4 Tampilan halaman utama website Bootstrap

3.5 Cardinal Cardinal adalah Framework CSS kecil "mobile first", dengan gaya standar

yang berguna, fluid tipography, dan sistem grid responsif. Kerangka kerja

ini menghilangkan keputusan desain estetika yang dapat berati lebih

besar, kerangka CSS lebih rumit. Cardinal mendukung "mobile first,"

pendekatan device-agnostic untuk desain responsif. Artinya, desain

aplikasi Anda seharusnya tidak peduli tentang dimensi pixel dari

perangkat itu sedang dilihat. Isi dalam desain harus menentukan

bagaimana dan di mana tata letak harus mengubah atau merespon.

Idenya adalah bahwa jika Anda merancang untuk perangkat pertama,

memaksa Anda untuk memprioritaskan dan menentukan data apa yang

paling penting dan tindakan dalam aplikasi Anda. Hasil akhirnya adalah

sebuah aplikasi yang difokuskan pada tugas utama pengguna seharusnya

untuk menyelesaikan, tanpa masalah kinerja, konten asing, dan

23

antarmuka yang mengganggu banyak aplikasi yang mengambil top-down,

pendekatan "PC first".

Cardinal menggunakan konvensi penamaan sederhana untuk kelas CSS

yang dapat dibaca manusia dan mudah untuk ditafsirkan. Sementara

terinspirasi oleh pendekatan Block, Element, dan Modifier (BEM),

konvensi penamaan yang digunakan dalam Cardinal jauh lebih kompleks.

Untuk menggunakan aplikasi ini, silakan unduh melalui website resmi di

http://cardinalcss.com/.

Gambar 3.5 Tampilan halaman utama website Cadinal

3.6 Cascade Framework Cascade Framework adalah kerangka frontend gratis untuk membuat

website dan aplikasi web. Mirip dengan Bootstrap yang berisi berbagai file

HTML dan komponen antarmuka berbasis CSS, serta opsional ekstensi

JavaScript. Tidak puas dengan arsitektur Bootstrap, John Slegers ingin

menciptakan alternatif yang menawarkan lebih banyak fleksibilitas dan

kinerja yang lebih baik tanpa memotong kembali pada fitur. Framework

ini hadir dengan nama Cascade Framework untuk proyek dan dirilis di

bawah Lisensi MIT pada Maret 2013.

24

Cascade Framework 2 saat ini sedang dalam pengembangan dan akan

melibatkan penulisan ulang dari basis kode ke dalam bahasa Sass

(Syntactically Awesome Stylesheets).

Cascade CSS framework adalah sebuah proyek yang unik saat ini. Tidak

seperti kebanyakan kerangka CSS yang berfokus pada User Interface (UI),

Cascade berfokus pada kode organisasi dan kepatuhan cross-browser,

sesuatu yang kebanyakan pengembang CSS frontend saat ini tidak peduli

lagi. Sementara pengembang kerangka CSS telah sibuk dalam kemasan

modul sebanyak UI karena mereka dapat dalam inti kerangka kerja

mereka, kebanyakan dari mereka lupa masalah utama dengan

pengembangan Web, masalah yang sudah ada sejak awal 2000-an:

kepatuhan cross-browser.

Untuk menggunakan aplikasi ini, silakan unduh melalui website resmi di

http://www.cascade-framework.com/.

Gambar 3.6 Tampilan halaman utama website Cascade Framework

3.7 Columnal Columnal CSS sistem grid adalah "remix" dari beberapa orang lain dengan

beberapa kode kustom di dalamnya. Columnal merupakan jaringan

elastis, sementara beberapa inspirasi kode (dan ide untuk subcolumns)

diambil dari 960.gs. Columnal membuat prototyping responsif sedikit

lebih mudah. Dengan pengaturan lebar 1140p dalam fluid, akan

25

merespon dengan lebar kebanyakan browser. Hal ini tidak dianjurkan

untuk penggunaan produksi, hal ini dimaksudkan hanya sebagai alat

prototipe secara cepat.

Columnal adalah proyek Pulp + Pixels (http://www.pulpandpixels.com/).

Hal ini didasarkan pada pekerjaan dari orang-orang yang fantastis

cssgrid.net dan 960.gs, yang pertama kali membuat kode mereka terbuka

dan tersedia. Beberapa kelebihan Framework ini diantaranya : Built-in

debugging CSS untuk menunjukkan struktur dari setiap halaman yang

sedang dibangun, sub-kolom (kolom dalam kolom) untuk lebih pilihan

tata letak, awalan dan akhiran untuk ruang ekstra dalam kolom sebelum

atau setelah konten, kelas jarak vertikal CSS, PDF sistem grid untuk

membuat sketsa situs sebelum membangun, wireframing template.

Silakan kunjungi situs mereka untuk informasi lebih lanjut di

http://www.columnal.com/.

Gambar 3.7 Tampilan halaman utama website Columnal

3.8 Floatz Floatz adalah kerangka CSS yang fleksibel, kuat dan mudah digunakan.

Ini menyediakan set kelas kaya yang dapat digunakan kembali CSS dan

potongan kode yang membantu web designer dan programmer untuk

membangun state of the art,, semantik sehingga situs web lebih mudah

26

diakses dan aplikasi, berdasarkan standar we dalam waktu relatif singkat.

Floatz adalah hasil dari bertahun-tahun menggunakan CSS dalam

berbagai jenis proyek-proyek berbasis web, mencoba untuk menemukan

cara untuk meringankan penggunaan. Hal ini digunakan dalam berbagai

jenis situs web konten berbasis serta aplikasi web modern dan dengan

demikian sangat kuat.

Keutamaan Framework ini dapat diringkas sebagai berikut: flexible

layouts, better accessibility, increased productivity, less bandwidth, dan broad

browser support. Untuk menggunakan aplikasi ini, silakan unduh melalui

website di https://code.google.com/p/floatz/.

Gambar 3.8 Tampilan halaman utama website Floatz

3.9 Fluidable Fluidable adalah mobile first, sistem grid responsif yang tetap memiliki

gutter dan mendukung variabel kolom. Framework ini mandiri, ringan

dan dibangun menggunakan LESS. LESS merupakan ekstensi dari CSS,

yang menambahkan perilaku dinamis seperti variabel, mixin, operasi, dan

fungsi. LESS dapat dijalankan pada sisi klien (Chrome, Safari, FIrefox)

maupun server (menggunakan Node.js dan Rhino).

27

Fitur utama Fluidable adalah: Fluid Layout, Mobile First, Responsive,

Variable Column, Nestable, dan Fixed Gutters.

Setiap set kolom dibungkus dengan .col-group dan dapat berisi sejumlah

kolom. Saat ini, kolom menggunakan model border-box untuk

meningkatkan kenyamanan. Anda memiliki lima pilihan untuk

menyesuaikan grid dengan kebutuhan Anda: jumlah kolom, lebar

maksimal situs Anda, dan lebar gutter yang ditetapkan dalam standar

ukuran ems. Variabel @screen menentukan break point responsif.

Anda dapat mengkonfigurasi Fluidable untuk sejumlah kolom

menggunakan variabel @column. Fluidable memiliki tiga set kelas

jaringan yaitu: Mobile .col-mb-x untuk perangkat kecil seperti ponsel.

Tablet .col-x dan Desktop .col-dt-x untuk layar yang lebih besar. Satu set

kelas untuk mendorong kolom menggunakan margin kiri. Hal ini baik

untuk digunakan, bukan menciptakan kolom kosong. Gunakan .offset-0

untuk tidak ada offset.

Silakan kunjungi website resmi http://fluidable.com/ untuk informasi

lebih lanjut dan mengunduh aplikasi ini.

Gambar 3.9 Tampilan halaman utama website Fluidable

35

BAB 4 WEB DESIGN WIREFRAME

FOR MOCKUP

Ketika memulai sebuah proyek desain web baru, hal tersebut merupakan

ide yang baik untuk memulai dengan prototipe. Tujuan dari prototipe

adalah untuk mengkomunikasikan tata letak halaman tanpa terperangkap

dalam elemen warna dan desain. Wireframes dapat menghemat waktu

karena membantu semua pihak yang terlibat mencapai kesepakatan

tentang penempatan elemen halaman utama seperti header, area konten,

menu navigasi, dan footer. Kuncinya adalah untuk mendapatkan tata

letak sehingga jika terjadi perubahan yang sangat drastis tidak akan

mengubah detail rinci terhadap elemen yang telah ditempatkan dalam

prototipe.

Ada beberapa cara yang berbeda bagi seorang perancang web untuk dapat

mengambil sebuah aplikasi wireframes, dan bahkan ada aplikasi yang

dirancang khusus untuk ini. Berikut ini, ada beberapa aplikasi yang dapat

berfungsi sebagai wireframe untuk merancang web dalam bentuk

prototipe atau mockup.

4.1 MockFlow MockFlow memungkinkan Anda untuk merancang dan berkolaborasi

(secara real-time) maket user interface untuk perangkat lunak Anda dan

situs web. Muncul dengan berbagai built-in komponen & ikon.

36

Mockflow merupakan alat wireframe online untuk pengembang

perangkat lunak dan website. Web developer dapat menggunakan aplikasi

untuk mendapatkan konsep visual yang siap dalam beberapa menit.

Mockflow adalah solusi yang lebih cepat daripada gambar atau coding

wireframes. Pengguna dapat langsung menggunakan Mockflow dan

berbagi desain dengan klien. Pengguna juga dapat menyusun strategi

hampir dengan built-in SiteMap Visualizer tersebut.

MockFlow dilengkapi dengan berbagai komponen dan ikon maupun item

tambahan yang dapat dibeli dari "MockStore." Halaman dapat diatur

dengan Sitemaps dan pengguna dapat menentukan link untuk

menyajikan prototipe yang dapat diklik. MockFlow juga kompatibel

dengan perangkat mobile seperti tablet dan smartphone yang

menjalankan iOS atau sistem operasi Android. Melalui MockFlow,

pengguna dapat mengedit prototipe mereka, memanfaatkan perpustakaan

yang luas objek dan gambar dan mempublikasikan seluruh proyek

mereka baik format HTML offline atau bahkan ke aplikasi lain seperti

Adobe PDF atau Powerpoint.

Gambar 4.1 Tampilan halaman utama website MockFlow

37

4.2 Axure Axure memungkinkan aplikasi desainer untuk membuat wireframes,

diagram alur, prototipe, dan spesifikasi untuk aplikasi dan situs web. Ini

memungkinkan Anda menggunakan widget siap pakai termasuk tombol,

kolom formulir, bentuk, dan unsur-unsur dinamis yang bisa Anda edit

dan format yang di lingkungan yang akrab. Anda dapat pula membuat

sendiri widget kustom library.

Gunakan Axure untuk membangun wireframes sederhana atau prototipe

yang kaya dengan logika kondisional, konten dinamis, dan perhitungan

tanpa coding. Setelah Anda dapat menguasainya, mereka akan kagum

berapa banyak yang dapat Anda lakukan dan seberapa cepat.

Gambar 4.2 Tampilan aplikasi Axure

4.3 Balsamiq Mockups Balsamiq Mockups merupakan aplikasi yang dapat digunakan untuk

menggambar dalam format digital, sehingga Anda dapat mengubah dan

mengatur ulang kontrol dengan mudah, dan hasil akhirnya adalah jauh

lebih bersih. Dengan 75 kontrol pre-built untuk memilih dari, Anda dapat

merancang sesuatu dari kotak dialog super-sederhana untuk aplikasi

penuh, dari sebuah situs web sederhana untuk sebuah Rich Internet

Application.

38

Balsamiq Mockup memungkinkan Anda menambahkan dan mengedit

User Interface wireframes langsung dari Google Drive. Ilterasi secara real-

time dengan stake holder Anda untuk pindah dari desain untuk

pengembangan lebih cepat. Didirikan pada tahun 2008, Balsamiq adalah

sebuah perusahaan kecil yang bertujuan membuat software sederhana.

Gambar 4.3 Tampilan aplikasi Balsamiq Mockup

4.4 Pencil Project Pencil dibangun dengan tujuan memberikan secara gratis dan open-source

GUI prototyping tool yang dapat dengan mudah menginstal dan

digunakan untuk membuat mockup pada platform desktop yang populer.

Pensil menyediakan berbagai built-in bentuk koleksi untuk menggambar

berbagai jenis antarmuka pengguna mulai dari desktop untuk platform

mobile. Mulai dari 2.0.2, Pencil dikirimkan dengan Android dan iOS UI

stensil pra-instal. Hal ini membuat lebih mudah untuk memulai protyping

aplikasi dengan instalasi sederhana.

39

Fitur gambar yang populer juga diimplementasikan dalam Pencil untuk

menyederhanakan operasi menggambar. Ada juga banyak koleksi lain

yang dibuat oleh masyarakat dan didistribusikan secara bebas di Internet.

Anda dapat dengan mudah mengambil koleksi dan menginstalnya ke

Pensil dengan operasi drag-and-drop sederhana.

Gambar 4.4 Tampilan aplikasi Pencil Project

4.5 HotGloo HotGloo benar-benar berbasis web dengan banyak fitur yang

memungkinkan anda bekerja dengan cara drag & drop dan skala item

dengan mudah. Ini juga memiliki dukungan untuk kolaborasi real time.

Beberapa fitur yang menjadi unggulan wireframe ini adalah : 1) Mudah

digunakan. Perangkat lunak yang baik tidak perlu kompleks. Itu sebabnya

HotGloo sangat intuitif dan mudah digunakan; 2) Kolaboratif. Wireframe

secara real-time dengan tim Anda untuk mendapatkan pekerjaan yang

dilakukan lebih cepat dan berkomunikasi dengan rekan kerja melalui

pengembangan pada fungsi chatting untuk menghindari gangguan; 3)

Independen. Bekerja pada proyek Anda di manapun Anda berada dan

kapanpun Anda inginkan. Akun Anda dapat diakses 24/7, terlepas sistem

operasi atau browser yang Anda gunakan; 4) Interactive. Elemen link ke

40

halaman dalam sitemap Anda atau mengatur skenario pengguna yang

berbeda dengan negara-negara, viewstacks dan masih banyak lagi.

Gambar 4.5 Tampilan halaman utama aplikasi HotGloo

4.6 Mockingbird Mockingbird adalah aplikasi web lain dengan fokus pada kolaborasi. Hal

ini memungkinkan Anda untuk menghubungkan beberapa maket

bersama-sama dan melihat mereka secara interaktif untuk mendapatkan

imajinasi rancangan tampilan melalui aplikasi Anda. Mockingbird adalah

sebuah online tools untuk memudahkan Anda membuat rancangan

maket, link bersama-sama, pratinjau, dan berbagi maket situs web atau

aplikasi.

Untuk informasi lebih lanjut silakan mengunjungi website resmi di

https://gomockingbird.com/.

41

Gambar 4.6 Beberapa fitur Mockingbird

4.7 Cacoo Cacoo adalah alat gambar online yang user friendly, memungkinkan Anda

untuk membuat bermacam-macam diagram, seperti: peta situs, wire

frames, UML dan bagan network. Cacoo dapat dipakai secara gratis.

Beberapa fitur utama yang dimiliki aplikasi ini di antaranya: 1)

Digunakan untuk membuat diagram yang menarik dengan mudah di

dalam Web. Membuat diagram sangat mudah - yang anda butuhkan

hanyalah menjatuhkan stensil yang Anda suka. Selesaikan diagram

dengan konektor jika perlu. Dalam sekejap, Anda mempunyai diagram

bagus secara cepat; 2) Bermacam macam jenis stensil. Ada banyak jenis

stensil sehingga Anda dapat menggambar diagram pada Cacoo untuk

berbagai tujuan. Ini sangat mudah untuk memvisualisasikan apa yang ada

dalam pikiran Anda; 3) Siap siap! dan... Mulai! Jika Anda pindahkan

sebuah objek,objek akan sejajar dengan benda-benda terdekat secara

otomatis. Rancangan, seperti menyelaraskan dan mendistribusikan secara

merata, semua tersedia. Setiap orang dapat menggambar diagram yang

seimbang dengan mudah; 4) Beberapa lembar kerja dan Latar Belakang.

Masing masing diagram dapat dibuat sampai beberapa lembar,semuanya

menjadi mudah saat membuat diagram secara bersama sama. Dengan

menggambar bagian umum pada lembar latar belakang, pembuatan

47

BAB 5 DESAIN RESPONSIVE UNTUK MEROMBAK

ALUR KERJA

Desain responsif dengan cepat menjadi standar baru dalam industri

pengembangan web. Gerakan ini telah menyebabkan pergeseran dalam

berpikir, terutama penyesuaian alur kerja untuk proses proyek lebih

efisien. Pada awalnya, membedah desain alur kerja responsif, memang

cukup sulit namun jika sudah menemukan maka proyek yang berulang

dapat menjadi lebih efisien dengan memanfaatkan workflow sebelumnya.

Dari struktur konten gambar scalable, kita akan membahas beberapa

teknik yang perlu dipertimbangkan dalam desain responsif berikutnya.

Jika Anda seorang desainer atau pengembang, apakah Anda memiliki

beberapa strategi untuk desain web responsif? Berikut ini beberapa

rekomentasi tips dan strategi dalam merancang web responsif.

5.1 Mobile First Dimulai dengan pendekatan ponsel pertama (mobile first) dan merancang

dengan peningkatan progresif yang mencakup semua basis, hal ini

membantu Anda lebih fokus dan memprioritaskan kendala terhadap

desain ponsel, ketika pengalaman baru dalam membangun desain yang

inovatif. Ini berarti penampilan yang standar dan konten berbasis mobile,

48

dioptimalkan untuk perangkat sederhana pertama. Perangkat dengan

layar kecil dan media dukungan query, kemudian disajikan dalam tata

letak yang canggih. Selanjutnya, isi dan tata letak ditingkatkan untuk

kepentingan "Desktop atau Notebook." Ini merupakan strategi

pendekatan yang optimal, bahkan Google juga telah mengadopsi teknik

tersebut.

Merancang untuk perangkat mobile yang lebih canggih, sekarang harus

menjadi titik awal bukan akhir. Hal ini memaksa kita untuk lebih fokus

pada konten penting, untuk optimasi pengembangan, fast-loading

perangkat mobile canggih yang semakin ditingkatkan, namun pengguna

lebih diutamakan.

Ketika teknik desain responsif untuk mobile first dalam masa

pertumbuhan, dan menyajikan berbagai tantangan teknis, mengubah

workflow yang berarti Anda sedang membangun pada hal adaptif,

terfokus, ramping, pondasi dasar ramah di masa depan (future-friendly).

Gambar 5.1 Ilustrasi desain responsive Mobile First (sumber: http://bradfrostweb.com/wp-content/uploads/2011/06/progressive_enhancement.jpg)

5.2 Content Strategy Tujuan dari desain responsif adalah untuk menyajikan pengalaman

pengguna yang terbaik mungkin dalam konteks apapun. Membangun

website responsif adalah waktu yang tepat untuk memikirkan kembali

49

konten Anda untuk membuatnya lebih mudah dibaca dan diakses,

terlepas dari perangkat apa yang saat itu sedang dilihat. Apakah Anda

memilih graceful degradation atau progressive enhancement, mengadopsi

metodologi "content out" membantu dalam mengembangkan strategi

konten yang menggeser fokus kembali ke pengguna.

Untuk mengembangkan arsitektur informasi dan strategi konten berarti

menempatkan konten pertama dengan menciptakan kerangka kerja

(workflow) dan struktur berdasarkan penelitian tentang pengguna dan

kebutuhan mereka. Gunakan pengetahuan ini dan dimulai dengan

jumlah minimum konten yang diperlukan untuk membuat desain

“useful” adalah sebuah pondasi dasar yang kuat, yang Anda dapat lebih

serius menambahkan layar dan resolusi yang lebih besar. Ini sama

pentingnya untuk menjawab pertanyaan kunci tentang bagaimana

masing-masing jenis konten cocok menjadi situs tujuan dan menetapkan

konten apa yang dimaksudkan untuk menyelesaikan.

Gambar 5.2 Ilustrasi content-strategy web (sumber : http://dashburst.com/wp-content/uploads/2013/02/content-strategy.jpg)

5.3 Sketch and Prototype Setelah Anda memiliki persediaan dan strategi penempatan konten,

mulailah memasukkan sketsa ke dalam alur kerja responsif Anda. Hal ini

akan membantu kreasi cerdas, tata letak yang terorganisir dalam skala.

50

Berbagai ukuran layar, resolusi dan kemampuan perangkat yang tersedia

saat ini berarti lebih banyak layout yang harus direncanakan. Dengan

menggunakan sketsa sebagai alat responsif, Anda dapat mengambil ide-

ide kasar Anda, mengeksposnya untuk bahan diskusi dan kritik,

menyempurnakan dan merumuskan, dan akhirnya meletakkan fondasi

gambar rangka dan prototipe untuk dilanjutkan dalam proyek.

Ada banyak aplikasi yang dapat digunakan untuk membuat prototipe dan

maket (mockup). Salah satu aplikasi yang handal untuk merancang web

adalah Adobe Photoshop. Meski begitu, ada juga aplikasi ringan yang

dapat digunakan untuk merancang prototipe web responsif. Pada bagian

lain dalam buku ini dijelaskan beberapa aplikasi untuk membuat maket.

Prototipe dalam selemabr kertas memiliki visualisasi dan konten rendah,

yang berarti Anda dapat benar-benar fokus pada interaksi pengguna dan

aliran konten, bukan bagaimana hal itu akan terlihat - setelah semua,

gagasan inti di balik sketsa adalah untuk tetap fokus pada adaptasi dari

konten, bukan container.

Dengan satu set sketsa, Anda dapat memindahkan ke prototyping, yang

merupakan tata letak HTML sederhana (atau gambar workflow), dengan

tujuan untuk menentukan apakah struktur konten, navigasi, markup dan

breakpoints masuk akal dan dapat bekerja dalam konteks tertentu.

Prototipe mengaktifkan fungsi halus dan interaksi dan, karena minimal

gaya, memusatkan perhatian pada struktur dan konten. Anda dapat

memulai dengan prototyping dengan berbagai workflow dan boilerplates,

atau Anda dapat memilih untuk memulai dari awal.

Pada beberapa titik dalam tahap sketsa dan prototipe, Anda mungkin

ingin membuat pola library yang dinamis, pendokumentasian library

proyek unsur dan pola dasar, yang digunakan sebagai titik awal untuk

sebuah proyek dan kemudian disesuaikan dengan desain. Hal ini dapat

memungkinkan untuk alur kerja lebih cepat dan sangat berguna untuk

tim yang bekerja bersama-sama. Ada beberapa sumber daya yang tersedia

– Rock Hammer (http://malarkey.github.io/Rock-Hammer/) dari Stuff

dan Nonsense, ini adalah salah satu yang cukup mengesankan. Gunakan

51

sebagai desain atau pola gaya primer atau sebagai dasar untuk

mengembangkan sebuah website responsif.

Gambar 5.3 Contoh prototipe web responsif untuk tablet (landscape)

5.4 Frameworks Pada saat memilih kerangka CSS (CSS Framework) sebagian besar fokus

pada ideologi dan prefensi secara pribadi dan menggabungkkan satu alur

kerja responsif Anda. Hal ini dapat mempercepat proses pengembangan,

menormalkan masalah kompatabilitas antar browser yang umum dan

terstruktur, pendekatan berbasis grid, semua fitur tersebut sangat

berharga saat membuat sebuah web responsif. Mungkin manfaat terbesar

adalah bahwa meminimalkan proses pengujian dan debugging, sebagai

Framework dapat menghilangkan bug pada browser tertentu dan telah

diuji sebagaian besar browser modern dan perangkat mobile.

Ketika memilih sebuah kerangka kerja (Framework) tersebut sangat

penting untuk mempertimbangkan beberapa poin yaitu: Berapa banyak

pembelajaran yang dibutuhkan untuk membangun dan berjalan normal?

Apakah tersedia dokumen dan dukungan? Fitur apa saja yang ditawarkan?

Salah satu kerangka kerja yang menggunakan pendekatan Mobile First

adalah Foundation dari ZURB. Aplikasi ini menggunakan 12 grid kolom

fleksibel yang dapat mengatur skala secara otomatis sesuai resolusi dan

57

BAB 6 PRAKTIKUM MEMBUAT

WEB RESPONSIF

6.1 Merancang Template yang Keren Template profesional sudah banyak tersedia di internet, baik yang

disediakan secara gratis maupun berbayar. Tata letak konten bervariasi,

ada yang membagi dengan beberapa kolom kemudian di bagian bawah

juga dibagi lagi menjadi kolom-kolom kecil untuk menempatkan menu

tambahan, dan masih banyak lagi variasi rancangan template yang

menarik.

Merancang template adalah tugas seorang web designer, dia bertanggung

jawab membuat sketsa, prototipe hingga maket (mockup). Untuk

mendapatkan ide dan gagasan ketika akan merancang tampilan halaman

utama (homepage), perlu melihat dan membandingkan beberapa website

profesional. Tujuannya bukan untuk menjiplak, namun sebagai referensi

dalam memilih warna, menentukan navigasi, menentukan jumlah kolom,

pengaturan tipografi, dan komponen lainnya yang menarik.

Tampaknya tidak semua orang memahami apa bagaimana membuat

rancangan web. Memang, desain web adalah sebagian besar proses kreatif,

oleh karena itu biasa disebut seni (art) yang lebih dari sekadar ilmu

pengetahuan. Namun karena secara intrinsik berfungsi sebagai media

presentasi, maka berlaku beberapa aturan (atau setidaknya prinsip) untuk

58

membuat desain web yang menarik. Dengan mengikuti beberapa

petunjuk sederhana, siapa pun harus mampu membuat desain visual yang

menyenangkan sehingga akan mengambil satu langkah lebih dekat

menuju ketenaran. Ups, itu tidak sesederhana yang dibayangkan, bakat

dan pengalaman memang penting, tapi setiap orang dapat mengubah

homepage mereka menjadi sesuatu yang cantik dalam hitungan menit.

Berikut ini prinsip-prinsip kunci yang membuat desain web terlihat baik:

1. Balance. Dalam arti kiasan, konsep keseimbangan visual, mirip

dengan keseimbangan fisik digambarkan oleh jungkat-jungkit. Sama

seperti benda-benda fisik yang memiliki bobot, begitu juga elemen

layout. Jika unsur-unsur di kedua sisi layout memiliki keseimbangan,

mereka menyeimbangkan satu sama lain. Ada dua bentuk utama dari

keseimbangan visual: simetris dan asimetris. Kesimbangna simetris

atau keseimbangan formal, terjadi ketika unsur-unsur komposisi

yang sama di kedua sisi garis sumbu.

Gambar 6.1 Contoh website yang menerapkan prinsip simetris (sumber: http://www.webdesignstuff.co.uk/ta006/files/2011/01/web5.jpg)

59

Keseimbangan asimetris, atau keseimbangan informal adalah sedikit

lebih abstrak (dan lebih menarik secara visual pada umumnya)

daripada keseimbangan simetris. Daripada gambar cermin di kedua

sisi tata letak, keseimbangan asimetris melibatkan benda-benda

ukuran yang berbeda-beda, bentuk, nada, atau penempatan. Benda-

benda ini diatur sedemikian rupa sehingga, meskipun perbedaan-

perbedaan, mereka menyamakan berat halaman, misalnya, jika Anda

memiliki sebuah objek besar di salah satu sisi halaman, dan pasangan

dengan beberapa item yang lebih kecil di sisi lain, komposisi dapat

masih dianggap seimbang. Meskipun mungkin tidak praktis untuk

semua desain dan klien, jenis simetri-simetri horisontal disebut dapat

diterapkan untuk layout website dengan berpusat konten atau

menyeimbangkan di antara kolom

Gambar 6.2 Contoh website yang menerapkan asimetris (sumber: https://thinkery.me/ )

2. Grid. Konsep grid terkait erat dengan keseimbangan. Grids adalah

serangkaian garis bantu secara horizontal dan vertikal yang

membantu Anda "memilah-milah" desain. Pikirkan tentang kolom,

kolom lebih mudah dibaca, membuat konten halaman lebih mudah

menyerap. Spasi dan penggunaan Rule of Thirds (atau mirip Golden

Ratio) membuat segalanya lebih mudah pada mata. Menggunakan

grid lebih dari sekadar tentang membuat elemen pada halaman

menjadi persegi dan berbaris: ini tentang proporsi pula. Banyak

60

sejarawan seni pelukis Belanda Piet Mondrian sebagai bapak desain

grafis untuk penggunaan canggihnya grid. Namun teori jaringan

klasik telah mempengaruhi upaya artistik yang sukses selama ribuan

tahun. Konsep membagi komposisi elemen kembali meluas ke ide-ide

matematika yang didirikan oleh Pythagoras dan para pengikutnya,

yang didefinisikan sebagai angka rasio daripada unit tunggal.

Pythagorean mengamati pola matematis yang terjadi begitu sering di

alam yang mereka percaya sebagai wahyu. Mereka disebut pola ini

sebagai the golden ratio atau golden ratio atau divide proportion.

Gambar 6.3 Golden Ration

Sebuah versi sederhana dari golden ration adalah aturan pertiga (the

rule of thirds). Sebuah garis membelah dengan rasio emas dibagi

menjadi dua bagian, salah satunya adalah sekitar dua kali ukuran

yang lain. Membagi komposisi menjadi tiga adalah cara mudah untuk

menerapkan proporsi istimewa tanpa kalkulator.

Gambar 6.4 The Rule of Thirds

61

Salah satu alat favorit saya untuk meletakkan komponen situs web

adalah template dan lembar sketsa dari 960 Grid System Nathan

Smith. Terinspirasi oleh artikel dari web designer Khoi Vinh dan

Mark Boulton, 960 Grid System adalah kerangka CSS terpopuler.

Lebar template berasal dari sebuah artikel oleh Cameron Moll. Dalam

merenungkan lebar yang cocok untuk tampilan dengan lebar 1.024

px, Moll menetapkan di 960px, dan menunjukkan bahwa jumlah itu

dibagi 3, 4, 5, 6, 8, 10, 12, 15, dan 16-menjadikannya sebagai lebar

yang ideal untuk grid. Nathan menggabungkan ide-ide tersebut ke

dalam framework dan menciptakan tiga tata letak yayasan: satu

dengan 12 kolom, satu dengan 16 kolom, dan satu dengan 24.

Gambar 6.5 Contoh website menggunakan 16 kolom grid

3. Color. Warna psikologi adalah bidang studi yang dikhususkan untuk

menganalisis efek emosional dan perilaku yang dihasilkan oleh warna

dan kombinasi warna. Pemilik website E-commerce ingin tahu warna

yang akan membuat pengunjung situs web mereka menghabiskan

lebih banyak uang. Rumah dekorator setelah pemberian warna akan

mengubah kamar tidur menjadi tenang. Pemilik restoran cepat saji

yang mengetahui kombinasi warna akan membuat Anda ingin makan

ukuran super (super-size). Seperti yang dapat Anda bayangkan,

62

psikologi warna adalah bisnis besar. Bagaimana jika Anda mengubah

warna website menjadi merah, apakah terlihat bagus? Banyak teori

tentang warna dan kombinasi mereka ada, termasuk konvensi pada

monokrom dan skema kontras.

Menggambarkan hubungan emosional orang yang dapat memiliki

warna bisa menjadi topik yang sangat hippy-esque. Meskipun

sebagian besar desainer hanya mengandalkan makna, karakteristik,

dan kepribadian dari warna tertentu, itu masih berguna untuk

memiliki pemahaman tentang atribut emosional dari beberapa

kelompok warna utama.

Warna merah memiliki reputasi untuk merangsang adrenalin dan

tekanan darah. Seiring dengan efek-efek fisiologis, merah juga dikenal

untuk meningkatkan metabolisme manusia, warna yang menarik,

dramatis, dan kaya. Warna merah juga merupakan warna gairah.

Oranye adalah warna yang sangat aktif dan energik, meskipun tidak

membangkitkan gairah seperti halnya warna merah. Sebaliknya,

oranye bisa mewakili untuk mempromosikan kebahagiaan, dan

mewakili sinar matahari, antusiasme, dan kreativitas.

Kuning adalah warna yang aktif, dan menjadi sangat terlihat, itu

sering digunakan untuk taksi dan tanda-tanda hati-hati. Ini juga

terkait dengan kebahagiaan.

Hijau paling sering dikaitkan dengan alam. Ini adalah warna yang

menenangkan yang melambangkan pertumbuhan, kesegaran, dan

harapan. Ada sedikit keraguan mengapa warna telah terikat begitu

erat dengan perlindungan lingkungan. Secara visual, hijau jauh lebih

mudah pada mata, dan jauh lebih dinamis daripada kuning, oranye,

atau merah.

Ketika masih kecil, warna favorit saya adalah biru. Bukan sembarang

biru biru, tapi biru langit dari Crayola krayon. Sementara sebagian

besar anak-anak lain yang kurang setuju, warna biru sering dianggap

sebagai warna favorit universal. Pada tingkat touchy-feely, biru

melambangkan keterbukaan, intelijen, dan iman, dan telah

63

ditemukan memiliki efek menenangkan. Di sisi lain, biru juga telah

ditemukan untuk mengurangi nafsu makan.

Ungu masih merupakan kekayaan dan pemborosan. Pemborosan

yang terbawa ke alam. Ungu paling sering terhubung dengan bunga,

gemstones, dan anggur. Ini menyeimbangkan stimulasi merah dan

efek biru yang menenangkan.

Dalam budaya Barat, putih dianggap warna kesempurnaan, cahaya,

dan kemurnian. Inilah sebabnya mengapa warna putih digunakan

dalam iklan deterjen, dan mengapa pengantin mengenakan gaun

putih di hari pernikahannya.

Meskipun warna hitam sering menderita konotasi negatif seperti

kematian dan kejahatan, juga dapat menjadi warna kekuasaan,

keanggunan, dan kekuatan, bergantung pada bagaimana itu

digunakan. Jika Anda sedang mempertimbangkan untuk

menggunakan warna tertentu dan bertanya-tanya apa asosiasi untuk

warna itu, hanya bertanya pada diri sendiri.

4. Graphics. Oke, desain besar tidak perlu grafis yang mewah. Tapi

miskin grafis pasti akan mengurangi citra rasa desain. Graphics dapat

menambah pesan visual. Beberapa website memiliki ilustrasi yang

mengesankan, sementara yang lain bersahaja. Anda mungkin bukan

seorang ilustrator atau fotografer yang handal, tapi itu bukan berarti

Anda tidak dapat menempatkan grafis yang besar pada website Anda.

Beberapa keterampilan dasar Photoshop, mungkin beberapa stok

gambar besar dan bagus adalah semua yang Anda butuhkan. Cobalah

untuk membuat grafis bersama-sama dengan baik, dan pastikan

mereka mewujudkan gaya untuk keinginan Anda. Meskipun tidak

semua orang memiliki bakat dengan kemampuan alami yang sama.

Anda dapat mengambil beberapa hal dengan belajar dari orang lain,

tapi kadang-kadang Anda hanya perlu memilih gaya yang cocok

untuk Anda.

64

Gambar 6.6 Contoh website yang kaya dengan grafis

5. Typography. Seni adalah subyek yang rumit untuk dibicarakan

karena meliputi begitu banyak unsur. Meskipun dapat dianggap

sebagai cabang dari desain, orang dapat menghabiskan seumur hidup

untuk menguasai semua aspeknya. Tipografi untuk web sedikit rumit

dibanding dengan tipografi untuk cetak (printing). Perbedaan

terbesar adalah tidak adanya kendali penuh atas jenis penampilan di

web, karena sifatnya yang dinamis. Jelas, render dinamis memiliki

strenght namun perancang web memiliki sedikit kontrol terhadap

pengaturan tipografi. Jenis font yang hilang atau tidak ditemukan

pada komputer pengguna, perbedaan browser dan platform

rendering, dan dukungan standar dalam CSS membuat tipografi web

nampak "menakutkan" jika tidak cocok ketika ditampilkan. Namun

dengan hadirnya CSS3 untuk tipografi web, kita memiliki sarana

untuk membuatnya terlihat lebih menarik, dan yang terpenting

adanya kontrol penuh. Misal efek shadow, border, transparan, dan

lain-lain.

65

Untuk mengatasi font yang tidak ditemukan atau hilang, dapat

menggunakan font online misalnya Google Font. Selain gratis, jumlah

font juga banyak dan bervariasi. Tipe bold, handwriting, serif, san

serif, dan lain-lain.

Ukuran yang digunakan adalah panjang baris, dan leading adalah

tinggi (atau jarak vertikal) baris. Dalam CSS, ukuran dapat dikontrol

dengan mendefinisikan lebar untuk kotak yang berisi (misalnya

elemen paragraf). Keduanya mempengaruhi pembacaan. Jika garis

terlalu pendek atau terlalu panjang, pengguna tidak akan nyaman

membaca konten, ini sering terlihat masalah ini dengan layout fluid.

Antara 40 dan 80 karakter per baris tampaknya lebih ideal.

Leading dapat ditingkatkan (atau diturunkan, sesuai kebutuhan)

dengan mendefinisikan properti CSS line-height. Umumnya,

ketinggian garis 1,5 bekerja dengan baik untuk paragraf. Ini berarti

bahwa ketika ukuran teks adalah 12 poin, ketinggian garis menjadi 18

poin (12 × 1,5), yang memberikan teks beberapa ruang.

Gambar 6.7 Contoh website menggunakan tipografi unik (http://v1.jontangerine.com/)

66

6. White space. Ruang putih ruang atau ruang negatif, harus dilakukan

dengan apa yang tidak ada. Seperti ukuran dan leading, ruang putih

memberikan teks beberapa ruang kosong Anda dapat membuat

elemen menonjol dengan menambahkan spasi di sekitar mereka.

Copy, misalnya, tidak akan terlihat sempit. Agar dapat dibaca,

pastikan paragraf memiliki padding yang cukup.

Ruang putih adalah salah satu yang paling mudah (karena Anda tidak

perlu menambahkan sesuatu). Dan ini merupakan cara yang paling

efektif untuk membuat desain visual yang menyenangkan dan mudah

dibaca. Ruang putih menambah banyak kelas untuk desain. Jangan

takut untuk meninggalkan beberapa lubang yang terbuka, bahkan

menganga. Desainer berpengalaman tergoda untuk memasukkan

sesuatu ke dalam setiap sudut kecil. Desain adalah tentang

komunikasis sebuah pesan. Elemen desain harus mendukung pesan

ini, tidak perlu menambahkan suara untuk itu.

Gambar 6.8 Contoh website yang menerapkan white space (http://astheria.com/)

7. Connection adalah sedikit dari sebuah istilah yang dibuat-buat di

sini, tetapi tampaknya menjadi yang terbaik untuk apa yang kita

maksud. Koneksi di sini mengacu pada desain Web yang memiliki

67

kesatuan dan konsistensi. Kedua atribut menunjukkan

profesionalisme dari desain. Mereka adalah atribut yang sangat luas .

Sebuah desain harus konsisten dalam penggunaan warna, rangkaian

huruf dengan ikonnya, dan lain-lain.

Ketika sebuah desain tidak konsisten, kesatuan bisa hilang pada

pengguna. Persatuan adalah sedikit berbeda dari konsistensi.

Persatuan mengacu pada bagaimana unsur-unsur yang berbeda

dalam interaksi desain dan cocok bersama. Misalnya, apakah warna

dan grafis sesuai? Apakah semuanya berkontribusi untuk satu pesan

terpadu? Konsistensi, di sisi lain ditemukan antara halaman-halaman

desain.

Dari tujuh prinsip yang telah dibahas, koneksi adalah yang paling

penting. Koneksi berkaitan erat dengan bagaimana semua elemen

berkumpul: keseimbangan, grid, warna, grafis, tipografi dan ruang

putih. Ini adalah semacam perekat yang mengikat semuanya

bersama-sama. Tanpa lem ini, desain berantakan. Anda bisa memiliki

banyak jenis dan palet warna yang cemerlang, tetapi jika grafis yang

berantakan maka desain akan gagal.

Dari penjelasan mengenai prinsip pembuatan desain agar kelihatan bagus,

maka seorang web designer harus bisa menciptakan rancangan template

yang impresif. Proses rancangan desain bisa dimulai dengan mencari

referensi tentang bentuk dan model website profesional di internet. Dari

beberapa website yang dijadikan referensi, dapat dipadukan untuk

menghasilkan karya seni yang baru terutama rangancan template

profesional. Mulailah dengan membuat sketsa dasar atau prototipe

dengan aplikasi Wireframe yang telah dijelaskan pada pembahasan

sebelumnya. Nah, dari bentuk sketsa dapat diterjemahkan kembali ke

dalam bentuk mockup agar visualisi dapat tergambar sesuai keinginan.

Dalam bentuk mockup harus sudah mengandung warna, gambar,

tipografi (jenis, ukuran, dan warna huruf), dan elemen lain secara nyata.

Berikut ini beberapa contoh template profesional yang dibuat

menggunakan Adobe Photoshop. Dalam buku ini tidak akan dibahas

proses pembuatan template, silakan baca buku berjudul “Step by Step

68

Photoshop to CSS3” penulis Slamet Riyanto yang ditebitkan oleh

Elexmedia Komputindo.

Gambar 6.9 Desain template untuk high resolution dan desktop/notebook

Gambar 6.10 Desain template untuk tablet dengan orientasi landscape

69

Gambar 6.11 Desain template untuk tablet dengan orientasi portrait

Gambar 6.12 Desain template untuk mobile dengan orientasi landscape

Gambar 6.13 Desain template untuk mobile dengan orientasi portrait

70

6.2 Menentukan CSS Framework Dengan melihat penjelasan pada bagian sebelumnya tentang CSS

Framework, silakan menggunakan dan memanfaatkan sesuai kebutuhan.

Mulai dari CSS yang sangat sederhana hingga yang kompleks sudah

dibahas. Sebagai bahan praktek, penulis menggunakan Bootstrap sebagai

CSS Framework. Selain mudah untuk digunakan, fitur yang disediakan

juga sangat lengkap. Beberapa buku yang mengupas tentang penggunaan

PHP dan Bootstrap juga sudah banyak beredar namun dalam bahasa

Inggris karena di Indonesia belum banyak yang mengupas secara detail.

1 Untuk mengunduh framework tersebut, silakan kunjungi website

http://getbootstrap.com/ kemudian pilih Download Bootstrap.

Gambar 6.14 Mengunduh file Bootstrap

2 Simpan file dalam komputer atau laptop Anda.

Gambar 6.15 Menyimpan file Bootstrap ke komputer pribadi (PC)

71

3 Klik mouse kanan, pilih Extract Here.

Gambar 6.16 Mengekstrak file Bootstrap

4 Setelah berhasil terekstrak, nampak dist dan di dalamnya memuat

beberapa folder. Itu adalah folder dan file standar dari CSS

Framework Bootstrap.

Gambar 6.17 Susunan folder file Bootstrap

5 Bagaimana cara menggunakannya? Ikuti pembahasan berikutnya.

6.3 Management File dan Direktori Hal penting yang harus dilakukan pertama kali sebelum melakukan

coding adalah mengelola file agar program dapat berjalan dengan baik dan

terstruktur. Dokumen-dokumen yang dibutuhkan harus dikelola dengan

baik sehingga pada saat coding tidak membingungkan antara file program

dengan file pendukung.

Bagian ini akan menjelaskan bagaimana membuat nama dan mengatur

file dan direktori dalam sebuah website dan bagaimana mengelola master

dokumen. Ini hal penting, karena nama-nama file dan direktori

menentukan alamat URL untuk halaman website Anda. Nama-nama

72

yang aneh, tidak logis, atau nama file dan direktori panjang akan

menghasilkan URL yang aneh, tidak logis dan panjang.

Setiap sistem operasi yang digunakan, memiliki aturan tersendiri dalam

mengakses sebuah dokumen. Secara umum, sistem operasi UNIX sangat

ketat dalam penamaan file dan direktori. Oleh karena itu, biasakanlah

membuat nama file dan direktori sesuai kaidah umum.

6.3.1 Penamaan

− Hindari spasi. Pengguna Macintosh menyukasi spasi, namum mesin

UNIX dan URL tidak. Hindarilah spasi. Bahkan Fetch, sebuah

program file-transfer Macintosh, secara otomatis akan mengkonversi

spasi menjadi garis bawah (underscore) ketika mentransfer file ke

mesin UNIX.

− Hindari simbol khusus. Jangan gunakan # @ ( ~ dan karakter khusus

lainnya pada file maupun direktori.

− Hindari Pengulangan. Jangan ulangi nama direktori untuk nama file

maupun subdirektori. Sebagai contoh, dalam sebuah direktori

bernama purchasing, Anda mungkin ingin membuat direktori staff.

Anda mungkin menyebutnya staff atau purchasingstaff. Karena Anda

sudah berada di direktori yang disebut purchasing, purchasingstaff

akan mubazir. Perhatikan URL yang dihasilkan.

http://www.sale.com/business/purchasing/staff/ (rekomendasi)

http://www.sale.com/business/purchasing/purchasingstaff/ (buruk)

− Jaga nama yang pendek deskriptif. Berikan file dan subdirektori

pendek namun nama-nama deskriptif. Ingat, nama-nama ini muncul

dalam URL Anda. Juga, menjaga nama pendek menyederhanakan

URL. Jika Anda harus berkomunikasi satu atau memberikan alamat

URL secara lisan kepada seseorang, maka akan mudah diingat.

Contoh:

http://pdii.lipi.go.id/research/ (rekomendasi)

http://pdii.lipi.go.id/Office_VP_Research (buruk)

73

− Gunakan huruf kecil saja. Kecuali Anda memiliki alasan kuat untuk

melakukan sebaliknya, selalu hanya gunakan karakter huruf kecil

untuk nama file dan direktori. Ingat, URL adalah case sensitive.

− Berikan nama file ekstensi bermakna. Ekstensi nama file tiga atau

lebih karakter yang mengikuti nama file dan dipisahkan dari nama

file oleh suatu periode. Ekstensi menyampaikan informasi tentang isi

dari file dan membantu Web browser bagaimana menampilkan atau

melayani dokumen. Contoh : index.html (adalah sebuah file HTML),

graphic.jpg (sebuah file dalam format JPG), newsletter.pdf (sebuah

file dalam format PDF), dan movie.mpeg (sebuah file dalam format

MPEG).

− Nama file index.html adalah file yang utama. Jika file utama dalam

direktori home Anda adalah index.html, Anda tidak perlu

menetapkannya dalam URL. Sebagai contoh, kedua link ini bekerja,

tapi yang lebih pendek lebih konvensional dan mungkin lebih mudah

bagi orang lain untuk mengingat dan bagi Anda untuk mengetik.

http://www.utexas.edu/learn/index.html (bagus)

http://www.utexas.edu/learn/ (sangat bagus)

6.3.2 Organisasi Bagi pengguna Macintosh yang digunakan untuk membuat folder dapat

berisi file dan folder lain. Demikian juga, pengguna PC membuat

direktori, yang dapat berisi file dan direktori lain. Dalam kedua kasus,

Anda menggunakan folder atau direktori untuk mengatur dan

mengkategorikan file ke unit logis. Pada mesin UNIX, menggunakan

direktori untuk mengatur file, seperti yang Anda lakukan pada komputer

mikro.

1 Buatlah file index.html pada setiap direktori dan subdirektori. Secara

umum, setiap subdirektori yang Anda buat harus memiliki file

index.html. Pengecualian untuk aturan ini mungkin subdirektori

grafis di mana Anda menyimpan file grafis dan subdirektori form di

mana Anda menyimpan form komentar.

74

2 Mengatur file ke dalam subdirektori. Buat subdirektori untuk

mengatur file HTML Anda dengan topik tertentu. Sebagai contoh,

Anda dapat membuat beberapa subdirektori, termasuk masing-

masing sebagai berikut: form, images, css, dan lain-lain.

3 Rencanakan untuk pertumbuhan. Web Anda tidak akan pernah

lengkap. Anda akan selalu memperbarui halaman yang ada dan

menambahkan yang baru. Sangat penting untuk merencanakan

pertumbuhan yang sejak awal. Cara terbaik untuk merencanakan

pertumbuhan ini adalah untuk membuat direktori bukan file.

Misalnya, Anda ingin melayani bagian newsletter di Web Anda. Ini

singkat, sederhana, 1-sheet newsletter. Anda memiliki keputusan

untuk membuat. Apakah Anda membuat file, bernama

newsletter.html atau newsletter, atau apakah Anda membuat sebuah

subdirektori yang bernama buletin untuk itu? URL yang akan

menyesuaikan.

6.3.3 Mengelola Dokumen Master Apakah Anda tahu di mana salinan master file Web Anda? Oleh karena

kebanyakan penerbit kampus menghasilkan file Web mereka pada

Notebook atau PC mereka kemudian mengunggah file-file ke server

pusat, ada dua salinan dari setiap dokumen Web: satu di server dan satu

di Mac atau PC. Pertanyaannyaa adalah:

− Yang mana dokumen master?

− Apakah yang berada di web?

− Apakah yang berada di Notebook atau meja Anda? Jika demikian, di

mana?

− Apakah yang berada di Notebook dari anggota staf yang keluar bulan

lalu? Jika demikian, di mana Notebook mereka sekarang?

6.4 Merancang Template dengan Sistem Grid Jika prose pembuatan prototipe menggunakan Wireframe sudah selesai

kemudian dilanjutkan dengan pembuatan mockup menggunakan aplikasi

75

grafis seperti Adobe Photoshop juga sudah dibuat, langkah selanjutnya

adalah mengolah template ke dalam sistem grid yang dimiliki Bootstrap.

Dalam source code Bootstrap tidak menyertakan panduan grid dalam

bentuk gambar. Namun tidak perlu khawatir, Penulis sudah menyiapkan

file gambar yang dapat digunakan untuk grid.

Penulis tidak akan membahas secara detail proses pembuatan template

menggunakan Adobe Photoshop. Silakan membaca buku “Step by Step

Adobe Photoshop to CSS3” yang ditulis oleh Slamet Riyanto dan

diterbitkan oleh Elexmedia Komputindo. Berikut contoh template yang

ditambahkan grid. Untuk melihat tampilan secara penuh, silakan buka

file yang disertakan dalam CD buku ini.

Gambar 6.18 Tampilan template dengan sistem grid

Mengapa harus menggunakan grid? Dengan grid, proses coding lebih

mudah, desain tampilan lebih simetris dan rapi. Dalam Bootstrap

menganut grid dalam 12 kolom. Jika diperhatikan gambar di atas, desain

tersebut terbagai menjadi 12 kolom. Tiap kolom dipisahkan oleh gutter

yang lebarnya sama rata. Untuk mengatur lebar gutter harus mengubah

kode sumber Bootstrap.

76

Secara default, tiap kolom memiliki nilai padding 75pixel pada semua sisi

(atas, kanan, bawah dan kiri). Dalam prakteknya, Penulis menghilangkan

nilai margin dan padding untuk setiap kolom. Hal ini bertujuan agar

tempilan yang dihasilkan sesuai dengan desain template yang telah dibuat.

6.5 Membagi Tata Letak berdasarkan kolom Mengapa harus dibagi-bagi? Bagaimana cara membagi template

berdasarkan kolom? Seperti telah dijelaskan pada bagian sebelumnya,

tujuan pembagian kolom untuk mempermudah proses coding, dengan

pembagian kolom, maka kolom yang satu dengan yang lain tidak saling

menutup atau mempengaruhi. Dengan kolom, kita dapat memodifikasi

kolom tertentu agar berbeda dengan kolom yang lain, misalnya dengan

menambahkan latar belakang warna.

Setiap program akan membaca secara terstruktur mulai dari yang paling

atas kiri kemudian ke kanan lalu ke bawah, dan seterusnya. Program

membaca script yang Anda tulis secara runut. Dengan memperhatikan

cara kerja bahasa pemrograman, kita harus mengikuti pola tersebut.

Perhatikan desain template, paling atas berisi navaigasi menu dan logo.

Sebelum kita mempraktekkan, persiapkan beberapa hal agar dapat

mengikuti petunjuk dalam buku buku. Gunakan Text Editor Sublime

Text, jika tidak ada silakan install terlebih dulu. File instalasi sudah

disiapkan dalam CD buku ini. Setelah terinstall, aktifkan web server yang

Anda miliki (misal: AppServ, XAMPP, Uniform Server, dan lain-lain).

Jika dalam laptop atau PC belum terpasang aplikasi web server, silakan

install XAMPP terlebih dulu.

1. Diasumsikan, Anda telah menyiapkan semua yang dibutuhkan.

Buatlah folder baru dengan nama responsive yang berada dalam

folder xampp/htdocs.

Gambar 6.19 Membuat folder baru

77

2. Selanjutnya, buatlah folder baru dengan nama assets yang berada di

dalam folder responsive. Ekstrak file Bootstrap dalam CD buku ini

dan letakkan dalam folder assets. Terakhir, buatlah folder images

untuk menyimpan semua dokumen dalam bentuk gambar, foto, atau

ilustrasi.

Gambar 6.20 Stuktur folder dan file

3. Buatlah dokumen baru.

Gambar 6.21 Membuat file baru

4. Ketikkan script dasar

<!DOCTYPE html> <html> <head> <title>RESPONSIVE WEB DESIGN</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="assets/css/bootstrap.css" rel="stylesheet"> <script type="text/javascript" src="assets/js/jquery-2.0.3.min.js"></script> <script type="text/javascript" src="assets/js/bootstrap.js"></script> </head> <body> </body> </html>

78

5. Simpan dokumen tersebut dengan nama index.html yang berada di

dalam folder utama (di dalam folder responsive).

Gambar 6.22 Menyimpan dokumen di halaman utama website

6. Dari desain template, kita akan mencoba membagi menjadi beberapa

kolom. Perhatikan bagian navigasi dan logo.

Gambar 6.23 Membagi template berdasarkan kolom

7. Bukalah file bootstrap.css yang berada dalam folder assets/css.

Gambar 6.24 Membuka file bootstrap.css

79

8. Untuk sementara, tambahkan border untuk samua class kolom 1

sampai 12. Jika sudah selesai, simpan dokumen tersebut.

Gambar 6.25 Menambahkan properti border pada semua kolom

9. Sekarang fokus pada bagian logo dan top menu. Tambahkan script

untuk navigasi dengan cara membuat class=nav.

<body> <div class="nav>Navigasi</div> </body>

10. Lihat hasilnya di browser.

Gambar 6.26 Tampilan di browser

11. Perhatikan class=col-md-7 (lihat Gambar 6.27).

12. Buatlah div dan class baru dengan nama container. Class ini akan

membungkus semua konten yang berada di dalamnya. Dengan

adanya class ini, maka posisi konten berada di tengah halaman

browser.

<body> <div class="nav">Navigasi</div> <div class="container"> </div> </body>

80

Gambar 6.27 Mengelola class=col-md-7

13. Kemudian tambahkan beberapa division dan class=col-md-7.

<div class="container"> <div class="col-md-7">KOLOM 7</div> </div>

14. Lihatlah hasilnya di browser.

Gambar 6.28 Tampilan di browser untuk kolom 7

15. Perhatikan class=col-md-3 (lihat Gambar 6.29).

16. Buatlah div baru dan tambahkan class=col-md-3.

<div class="container"> <!-- Start Container --> <div class="col-md-7">KOLOM 7</div> <div class="col-md-3">KOLOM 3</div> </div><!-- End Container -->

81

17. Lihat hasilnya di browser seperti nampak pada Gambar

Gambar 6.29 Posisi kolom 3

Gambar 6.30 Tampilan kolom 7 dan 3

18. Untuk mempersingkat waktu, tambahkan div dan beberapa class

sesuai pembagian kolom yang telah dibuat.

<div class="container"> <!-- Start Container --> <div class="col-md-7">KOLOM 7</div> <div class="col-md-3">KOLOM 3</div> <div class="col-md-2">KOLOM 2</div> <div class="col-md-4">KOLOM 4 kiri</div> <div class="col-md-4">KOLOM 4 tengah</div> <div class="col-md-4">KOLOM 4 kanan</div> <div class="col-md-12">KOLOM 12</div> <div class="col-md-12">FOOTER</div> </div> <!-- End Container -->

19. Lihat hasilnya di browser.

111

BAB 7 CSS3 MEDIA QUERY

7.1 General Style Secara umum, tampilan website yang menggunakan CSS Framework

sudah mendukung teknologi Responsive Web Design (RWD) namun

masih perlu dimodifikasi karena pengaturan CSS dalam Bootstraps atau

CSS Framework lainnya berlaku secara umum. Tipografi, warna, paragraf,

gambar, dan komponen lain bergantung pada selera masing-masing

pengembang web. Ukuran huruf, paragraf antar baris, margin, border,

hyperlink, heading, dan komponen lainnya sudah diatur dengan baik

dalam CSS Framework.

Berikut ini akan dibahas cara memodifikasi CSS Bootstrap tanpa

mengubah CSS aslinya.

1 Pertama kali jalankan program Sublime Text atau Text Editor

lainnya kemudian buatlah file baru dengan nama style.css. Simpan

dan letakkan dalam folder assets/css.

Gambar 7.1 Manajemen file

112

2 Ketikkan baris berikut.

/* -------- GENERAL STYLE -------- */ .border-all{border:1px solid #eaeaea;}

3 Dengan memberikan nilai border=1px, maka halaman utama akan

dikelilingi oleh border tipis pada semua sisi (atas, kanan, bawah, dan

kiri).

Gambar 7.2 Tampilan halaman web setelah diberi efek border

4 Secara default, Bootstraps membuat class=container dan

memberikan nilai padding kiri dan kanan 15px. Jadi, setiap kali

menggunakan class tersebut semua konten yang ada di dalamnya

memiliki ruang kosong pada sisi kiri dan kanan.

Gambar 7.3 Parameter class container secara default

5 Untuk memodifikasi class=container, buka file style.css kemudian

tambahkan baris berikut.

113

.border-all{border:1px solid #777777;}

.container {padding:0;} 6 Lihatlah hasilnya di browser. Jarak gambar sedikit merapat ke garis

tepi (border).

Gambar 7.4 Tampilan jarak border setlah dimodifikasi

7 Langkah selanjutnya, memberikan warna latar belakang pada

Featured. Tambahkan script berikut.

.border-all{border:1px solid #777777;}

.container {padding:0;}

.color-cyan{background-color:#e1e5fc; overflow:auto; } 8 Lihatlah hasilnya di browser.

Gambar 7.5 Tampilan setelah diberi efek latar belakang warna cyan

114

9 Perlahan-lahan tampilan sudah berubah sesuai keinginan kita.

Buatlah class baru sesuai yang ada dalam file index.html. Jika lupa,

buka kembali dokumen tersebut. Perhatikan nama-nama class yang

telah dibuat karena perbedaan nama class pada file html dan CSS

mengakibatkan tampilan tidak akan berubah sesuai keinginan.

Gambar 7.6 Beberapa class yang akan ditambahkan property dan value

10 Masih berada dalam file style.css, tambahkan nama class baru.

/* -------- GENERAL STYLE -------- */ .border-all{border:1px solid #777777;} .container {padding:0;} .color-cyan{background-color:#e1e5fc; overflow:auto;} .strip{} .putih{} .intro{}

11 Pada class=strip, masukkan nilai property seperti berikut.

.strip{padding:3px; background-color:#000000; float:left; width:100%; margin-bottom:10px;}

12 Lihat hasilnya di browser.

Gambar 7.7 Membuat blok untuk judul berita

115

13 Judul dalam strip tidak terlihat. Dont’panic ! Itu sangat mudah untuk

diatasi. Ganti warna teks dengan warna terang misal putih, grey,

oranye, atau kuning. Sekarang fokus pada class=judul-putih,

tambahkan property untuk class tersebut.

.putih{font-family:'PT Sans'; font-weight:600; color:#ffffff;}

14 Jika dilihat di browser, hasilnya seperti gambar berikut.

Gambar 7.8 Tampilan judul berita dengan latar belekang blok hitam

15 Berikutnya, memperbaiki isi berita dalam satu paragraf atau satu

baris. Tambahkan property untuk class=intro.

.intro {font-family:'PT Sans'; color:#7b7c8b; padding:0 0 10px 0; margin-bottom:5px; border-bottom:1px dotted #b1b1b1; line-height:110%;}

16 Tampilan pada browser.

Gambar 7.9 Mengatur paramater untuk isi berita (intro)

116

17 Langkah selanjutnya mengatur nilai property pada untuk class lain,

perhatikan nama class dalam dokumen html.

Gambar 7.10 Nama class yang akan ditambahkan property dan value

18 Class=tepi berfungsi untuk menghilangkan ruang kosong (padding

dan margin) pada class=col-md-8 karena kita menggunakan class

tersebut. Sedangkan nilai property sudah diatur sebelumnya.

Perhatikan nilai padding global untuk semua kolom dalam file

bootstraps.css.

Gambar 7.11 Pengaturan default untuk semua kolom yang telah disediakan

19 Kembali ke file style.css, buatlah beberapa class baru.

.judul{font-family:'PT Sans'; font-weight:600; padding:5px 0 0 0; margin:0; line-height:110%;} .tepi{} .tanggal{} .headlines-title{}

20 Masukkan nilai property untuk class=tepi.

.tepi{padding:0; margin:0;} 21 Masukkan nilai untuk class=tanggal

117

.tanggal{font-family:'PT Sans Narrow'; color:#7b7c8b; padding-top:5px;}

22 Masukkan values untuk class=headlines-text.

.headlines-title {font-weight:600; margin-bottom:5px;} 23 Lihatlah hasilnya di browser.

Gambar 7.12 Tampilan label HEADLINES sebelum dimodifikasi

24 Sekarang kita akan mencoba memodifikasi tampilan class=label

dengan mengubah sudut lengkung menjadi siku tanpa mengubah

CSS asli Bootstraps. Caranya, buatlah class baru pada file style.css.

.label{border-radius:0; -moz-border-radius:0; -webkit-border-radius:0; -ms-border-radius:0; -o-border-radius:0;}

25 Agar website yang kita buat kompatibel dengan beberapa browser

tanpa mempengaruhi tampilan, perlu ditambahkan awal (prefix)

sebelum property, misal –moz- untuk Mozilla Firefox, -webkit-

untuk Safari, Netscape, dan Chrome.

Gambar 7.13 Tampilan label HEADLINES sebelum dan sesudah dimodifikasi

118

26 Jenis huruf (font) perlu diganti agar tampilan lebih menarik. Buatlah

class=sans kemudian atur properti dan value.

.sans{font-family:'PT Sans Narrow'; text-transform:uppercase;}

27 Periksa hasilnya di browser, terlihat berbeda dan lebih “eye catching”.

Gambar 7.14 Mengubah default jenis huruf yang digunakan untuk label HEADLINES

28 Perhatikan judul berita pada bagian MORE HEADLINES, tampilan

masih standar.

Gambar 7.15 Fitur MORE HEADLINES

29 Untuk mengubah tampilan, perlu ditambahkan nilai properti pada

class=arrow_box.

Gambar 7.16 Nama class dalam file html

30 Pada file style.css, tambahkan beberapa baris untuk mengatur

class=arrow_box.

/* ----- Background untuk HEADLINES ------- */ .arrow_box { margin-right:0; margin-top:20px; margin-bottom:30px; position:relative; background:#88b7d5; border:3px solid #c2e1f5; } .arrow_box:after, .arrow_box:before { top:100%; left:50%; border:solid transparent; content:" "; height:0; width:0; position:absolute; pointer-events:none; }

119

.arrow_box:after {border-color:rgba(136, 183, 213, 0); border-top-color:#88b7d5; border-width:10px; margin-left:-10px; } .arrow_box:before { border-color:rgba(194, 225, 245, 0); border-top-color:#c2e1f5; border-width:16px; margin-left:-16px; }

31 Lihatlah hasilnya di browser.

Gambar 7.17 Tampilan blok warna untuk fitur MORE HEADLINES

32 Sekarang tinggal mengatur jenis huruf, warna, dan perataan (align)

untuk label More Headlines tersebut. Tambahkan class=headlines-

panel dan masukkan property dan value.

.headlines-panel{color:#ffffff; font-weight:600; text-align:center;}

33 Hasilnya seperti gambar berikut.

Gambar 7.18 Fitur MORE HEADLINES setelah dimodifikasi

34 Tampilan judul pada bagian ini masih kurang bagus.

Gambar 7.19 Daftar judul berita yang masih standar

35 Untuk memodifikasinya, tambahkan class baru yang sama seperti

dalam file html kemudian aturlah property dan value.

120

.headlines-more{font-weight:700; padding:7px 0 15px 0; border-bottom:1px solid #c2e1f5; }

36 Lihatlah hasilnya di browser.

Gambar 7.20 Daftar judul berita setelah ditambahkan property

37 Langkah berikutnya, memodifikasi tampilan fitur SEMUA BERITA.

Jarak label dengan topmenu cukup renggang, tidak sejajar dengan

bagian lain.

Gambar 7.21 Tampulan fitur SEMUA BERITA sebelum dimodifikasi

38 Untuk memperbaikinya, buatlah class=col-md-3 pada file style.css

kemudian atur nilai property.

.col-md-3{padding-top:0; margin-top:0;} 39 Lihat hasilnya di browser.

Gambar 7.22 Tampilan fitur SEMUA BERITA setelah dimodifikasi

121

40 Sekarang fokus ke bagian footer atau bottom sidebar.

Gambar 7.23 Tampilan standar bottom sidebar/bottom menu

41 Buatalah class=footer dan tambahkan propertinya.

.footer{background-color:#3a3a3a; padding-left:10px; } 42 Tampilan sementar bagian footer. Warna teks judul menu tidak

nampak, harus diganti dengan warna lain. Daftar menu juga muncul

bullet, ini harus dihilangkan juga.

Gambar 7.24 Tampilan bottom menu setelah ditambahkan property

43 Untuk mengubah warna judul menu dan menghilangkan bullet,

perhatikan class yang disorot dalam file html.

Gambar 7.25 Class yang akan ditambahkan property

44 Tambahkan nama class-class tersebut kemudian atur propertinya.

122

.text-orange{color:#ffad00;}

.no-bullet{list-style:none; padding-left:0; font-size:90%;} 45 Tampilan bottom sidebar setelah dimodifikasi.

Gambar 7.26 Judul Kategori setelah diubah warna hurufnya

46 Fokus pada class=text-disclaimer.

Gambar 7.27 Class disclaimer dalam file html

47 Tampilannya masih sangat sederhana, perlu dimodifikasi dengan

cara memberikan warna latar belakang (background).

Gambar 7.28 Tampilan fitur disclaimer dan footer

48 Tambahkan class=disclaimer lalu atur propertinya.

.disclaimer{background-color:#392d3f; padding:7px; font-size:80%; color:yellow;}

49 Lihat hasilnya di browser.

Gambar 7.29 Tampilan fitur disclaimer

123

50 Langkah selanjutnya, memodifikasi teks hak cipta (copyright).

Perhatikan class=copyright.

Gambar 7.30 Class copyright dalam file html

51 Tambahkan class=copyright, lalu atur property dan value.

.copyright{background-color:red; padding:7px; margin-top:0; font-size:9pt; color:#ffffff; border-bottom-left-radius:7px; border-bottom-right-radius:7px; -moz-border-bottom-left-radius:7px; -moz-border-bottom-right-radius:7px; -webkit-border-bottom-left-radius:7px; -webkit-border-bottom-right-radius:7px; -ms-border-bottom-left-radius:7px; -ms-border-bottom-right-radius:7px; -o-border-bottom-left-radius:7px; -o-border-bottom-right-radius:7px;}

52 Tag border-radius akan menghasilkan sudut lengkung terhadap

objek. Agar tampilan dapat diterima oleh beberapa browser harus

ditambahkan awalan pada properti yaitu –moz-, -o-, -webkit-, dan –

ms. Jika sudah menambahkan properti dan value, maka akan

menghasilkan tampilan seperti gambar berikut.

Gambar 7.31 Tampilan fitur copyright setelah diberi paramater dalam CSS

53 Kita akan memodofikasi tampilan Top Menu. Yang ada saat ini,

tampilan kurang menarik sehingga perlu mengganti jenis huruf yang

digunakan.

Gambar 7.32 Tampilan Top Menu standar

124

54 Untuk mengganti jenis huruf, tambahkan nama class kemudian atur

property dan value.

.navbar {padding:0;}

.navbar-brand{font-family:'Gill Sans MT'; font-weight:bold; font-size:170%;} .navbar-nav{font-family:'PT Sans Narrow';} .nav{font-size:110%; color:#ffffff;}

55 Lihat hasilnya di browser.

Gambar 7.33 Tampilan Top Menu setelah dimodifikasi

56 Terakhir, urutkan nama class sesuai abjad agar mudah ditemukan

ketika memodofikasi kembali. Caranya, seleksi semua nama class.

Gambar 7.34 Menyeleksi kode CSS

125

57 Pilih menu Edit > Sort Lines, atau tekan tombol F9 pada keyboard.

Gambar 7.35 Menu untuk mengurutkan kode CSS agar lebih rapi

58 Lihat hasilnya.

Gambar 7.36 Tampilan kode CSS setlah diurutkan

126

7.2 Desktop and Notebook Widescreen High Resolution

Ada beberapa referensi untuk menentukan resolusi layar ponsel tanpa

harus memperhatikan merek tertentu. Dengan standar minimal dan

maksimal, akan menghasilkan tampilan website yang fleksibel. Kita tidak

perlu menentukan resolusi untuk tiap merek ponsel yang beredar. Cukup

dengan membatasi nilai minimal dan maksimal terhadap lebar layar

ponsel maupun tablet secara portrait maupun landscape, maka tampilan

website akan secara otomatis menyesuaikan diri.

Beberapa CSS Framework menentukan batasan resolusi untuk mobile,

tablet, dan desktop yang bervariasi. Misalnya, jika menggunakan

Bootstrap resolusi minimal yang digunakan adalah 768 pixel sehingga

apabila orang melakukan browsing menggunakan ponsel yang resolusinya

di bawah angka tersebut maka akan mengikuti standar acuan yang

diterapkan dalam resolusi 768 pixel. Hal ini menjadi problem, terutama

media yang ditampilkan berupa teks. Jika menggunakan resolusi 768, teks

masih terbaca dengan jelas karena menggunakan tablet dan ukuran huruf

juga cukup besar. Namun akan menjadi sulit terbaca jika menggunakan

ponsel dengan resolusi rendah. Untuk mengatasi hal tersebut, perlu

pengaturan ukuran huruf apabila media yang digunakan berada di bawah

768 pixel atau bahkan di atasnya.

1. Pertama kali, ubah resolusi layar monitor / notebook ke resolusi

tertinggi.

Gambar 7.37 Mengubah resolusi monitor

2. Kembali ke file style.css, ketikkan beberapa baris untuk menentukan

resolusi media yang digunakan.

127

/* Smartphones (portrait) ----------- */ @media only screen and (max-device-width :320px){} /* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width :321px) and (max-device-width :480px){} /* Smartphones (600 x 400)------ */ @media only screen and (min-device-width :481px) and (max-device-width :767px){} /* Smartphones (800 x 600)----- */ @media only screen and (min-device-width:768px) and (max-device-width:991px){} /* Desktop, Netbook and Tablet (minimal 1024 x 768)----- */ @media only screen and (min-device-width:992px) and (max-device-width:1199px){} /* Desktops & laptops Wide Screen High Resolution (minimal 1280 x 600)----- */ @media only screen and (min-device-width:1200px){}

3. Resolusi yang Penulis gunakan 1360 x 768 pixel (widescreen). Fokus

pada widescreen resolusi tinggi. Tambahkan properti dan value untuk

mengatur ukuran judul, intro dan teks putih.

@media only screen and (min-device-width:1200px) { .judul{font-size: 108%; } .putih{font-size: 140%;} .intro{font-size: 100%;} }

4. Hasilnya, teks judul berita dan intro lebih besar dari ukuran semula.

Gambar 7.38 Tampilan teks setelah dimodifikasi ukuran huruf

128

5. Ubahlah ukuran teks HEADLINE dengan cara membuat class dan

memasukkan property dan value sesuai keinginan. Jika mengikuti

petunjuk dalam buku ini, berikut pengaturan property dan value.

.sans{font-size: 120%;}

.head{margin-top: 30px;} 6. Melalui teknologi RWD, ukuran gambar, foto maupun ilustrasi dapat

disesuaikan tampilannya. Misal, jika menggunakan resolusi di atas

1200 pixel maka gambar akan ditampilkan dalam skala 40%

kemudian jika menggunakan resolusi 786 pixel maka gambar akan

ditampilkan dalam skala 65%. Dalam studi kasus berikut, jika

menggunakan resolusi di atas 1200 pixel maka gambar akan

ditampilkan dalam skala 40%. Perhatikan nama class dalam tag img.

Gambar 7.39 Posisi class crop pada dokumen html

7. Masukkan property dan value.

.img-responsive.crop{width: 50%;} 8. Lihat hasilnya di browser.

Gambar 7.40 Tampilan foto setelah diubah lebarnya

129

9. Teks dan gambar menempel, untuk mengatur agar sisi kanan gambar

terdapat ruang kosong (space), tambahkan class=img-responsive yang

letakknya satu kelompok dengan General Style.

.headlines-title {font-weight: 600;margin-bottom: 5px;}

.img-responsive {padding-top: 10px;padding-bottom: 10px; margin-right: 10px;}

10. Berikut hasilnya setelah ditambahkan margin kanan pada foto. Jika

diperhatikan, foto dalam HEADLINES dengan yang berada dalam

bottom sidebar (Hiburan, Bisnis, dan Kesehatan) ukurannya berbeda

meskipun menggunakan class yang sama. Hal ini karena penerapan

teknologi RWD akan secara otomatis mereduksi ukuran gambar

sesuai lebar kolom yang dimiliki.

Gambar 7.42 Tampilan foto setelah ditambahkan jarak

11. Kita ingin agar berita yang ditampilkan dalam HEADLINES dibagi

menjadi dua kolom. Namun ketika menggunakan resolusi di bawah

1200 pixel maka ditampilkan dalam satu kolom dan hanya 4 judul

berita. Berikut script yang digunakan untuk mengatur jumlah kolom.

.kolom{-moz-column-count:2;-o-column-count:2;-ms-column-count:2;-webkit-column-count:2;}

12. Lihatlah hasilnya di browser (lihat Gambar 7.43).

13. Kita akan memodifikasi judul berita pada label HEADLINES,

perhatikan nama class untuk judul tersebut (lihat Gambar 7.44).

130

Gambar 7.43 Tampilan berita dalam dua kolom

Gambar 7.44 Posisi class headlines-title dalam dokumen html

14. Buatlah class baru kemudian atur property dan value.

.headlines-title{font-family:'PT Sans Narrow'; font-size:110%;}

15. Lihat hasilnya di browser.

Gambar 7.45 Mengubah teks judul berita

157

BAB 8 BEST PRACTICE:

DYNAMIC WEB WITH PHP AND MYSQL

PHP dan MYSQL sudah digunakan beberapa tahun lalu untuk beberapa

situs web popular maupun aplikasi berbasis open source. Bukan rahasia

lagi bahwa situs web telah berevolusi. Situs web modern diharapkan

menjadi lebih dinamis dan jumlah pengguna untuk situs populer

sekarang diukur dalam jutaan, bukan lagi ribuan atau ratusan.

Structured Query Language atau SQL merupakan bahasa standar untuk

bekerja dengan database. Dalam SQL, terdapat beberapa statemen yaitu

SELECT, INSERT, UPDATE dan DELETE sebagai perintah dasar SQL's

Data Manipulation Language (DML). Sedangkan statemen seperti

CREATE DATABASE, DROP DATABASE atau CREATE TABLE

merupakan bagian dari SQL's Data Definition Language (DDL)/

Penulis tidak akan menjelaskan perintah dasar SQL, silakan membaca

buku yang khusus membahas tentang database SQL.

8.1 Persiapan Awal Teori tentang relational dabatase, harus sudah dipahami sebelum

membuat tabel. Tanpa memahami konsep dasar tersebut, akan sulit

merancang database dari nol apalagi harus menterjemahkan dari

prototipe yang sudah ada. Seorang perancang web, harus memahami

158

secara benar konsep pembuatan database. Termasuk memilih tipe data

secara benar, misalnya kolom password harus bertipe VARCHAR karena

mengandung kombinasi angka dan huruf. Panjang karakter juga harus

disesuaikan dengan data yang nantinya akan diinput.

Perhatikan desain tampilan website yang sudah dibuat.

Gambar 8.1 Melihat struktur metadata berita

Secara umum, dari tampilan mockup tersebut dapat diuraikan menjadi

beberapa field atau kolom yaitu:

− Judul Berita

− Isi Berita

− Tanggal Publikasi

− URL Gambar

− Kategori

− Sub Kategori

− Subsub Kategori

Sedangkan kolom-kolom lain disesuaikan dengan tabel yang dibuat dan

relasi ke tabel lain. Tiap kolom harus sudah ditentukan pula tipe data

yang akan digunakan agar mempermudah ketika menginput data.

8.1.1

159

Pembuatan Database 1. Untuk membuat database, ada dua cara yaitu melalui User Interface

phpMyAdmin dan perintah SQL. Kita akan membuat melalui user

interface. Aktifkan salah satu browser, kemudian ketikkan alamat

URL http://localhost/phpmyadmin.

Gambar 8.2 Tampilan halaman utama phpMyAdmin

2. Pilih menu Database.

Gambar 8.3 Memilih menu Database

3. Masukkan nama database, misal: responsive. Setelah selesai, klik

tombol Create.

Gambar 8.4 Membuat database baru

4. Tunggu beberapa saat, sistem akan memproses. Jika pembuatan

database berhasil, maka akan muncul seperti gambar berikut.

160

Gambar 8.5 Notifikasi bahwa database sudah berhasil dibuat

5. Aktifkan database responsive.

Gambar 8.6 Mengaktifkan database responsive

6. Kini saatnya membuat tabel dan kolom. Selain dapat ditempuh

melalui user interface, pembuatan tabel dan kolom dapat dilakukan

melalui perintah SQL. Pilih menu SQL.

Gambar 8.7 Memilih menu SQL

7. Masukkan perintah SQL untuk membuat tabel berita. Setelah selesai

klik tombol Go untuk menyimpan data.

CREATE TABLE IF NOT EXISTS `berita` ( `id_berita` int(11) NOT NULL AUTO_INCREMENT, `judul_berita` varchar(255) COLLATE latin1_general_ci NOT NULL, `isi_berita` longtext COLLATE latin1_general_ci NOT NULL, `url_image` varchar(255) COLLATE latin1_general_ci NOT NULL, `tgl_posting` datetime NOT NULL,

161

`tgl_update` datetime NOT NULL, `id_kategori` int(11) NOT NULL, `id_subkategori` int(11) NOT NULL, `id_subsubkategori` int(11) NOT NULL, `id_fitur` int(11) NOT NULL, `id_status` int(11) NOT NULL, `id_user` int(11) NOT NULL DEFAULT '1', `hits` int(11) NOT NULL, PRIMARY KEY (`id_berita`) );

8. Buatlah tabel fitur.

CREATE TABLE IF NOT EXISTS `fitur` ( `id_fitur` int(11) NOT NULL AUTO_INCREMENT, `nama_fitur` varchar(150) COLLATE latin1_general_ci NOT NULL, PRIMARY KEY (`id_fitur`) );

9. Butlah tabel kategori.

CREATE TABLE IF NOT EXISTS `kategori` ( `id_kategori` int(11) NOT NULL AUTO_INCREMENT, `nama_kategori` varchar(150) COLLATE latin1_general_ci NOT NULL, PRIMARY KEY (`id_kategori`) );

10. Buatlah tabel status.

CREATE TABLE IF NOT EXISTS `status` ( `id_status` int(11) NOT NULL AUTO_INCREMENT, `status` varchar(100) COLLATE latin1_general_ci NOT NULL, PRIMARY KEY (`id_status`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci AUTO_INCREMENT=4 ;

11. Buatlah tabel subkategori.

CREATE TABLE IF NOT EXISTS `subkategori` ( `id_subkategori` int(11) NOT NULL AUTO_INCREMENT, `nama_subkategori` varchar(150) COLLATE latin1_general_ci NOT NULL, `id_kategori` int(11) NOT NULL, PRIMARY KEY (`id_subkategori`) ) ;

12. Buatlah tabel subsubkategori.

CREATE TABLE IF NOT EXISTS `subsubkategori` ( `id_subsubkategori` int(11) NOT NULL AUTO_INCREMENT, `nama_subsubkategori` varchar(150) COLLATE latin1_general_ci NOT NULL,

162

`id_subkategori` int(11) NOT NULL, PRIMARY KEY (`id_subsubkategori`) ) ;

13. Buatlah tabel user

CREATE TABLE IF NOT EXISTS `user` ( `id_user` int(11) NOT NULL AUTO_INCREMENT, `username` varchar(100) COLLATE latin1_general_ci NOT NULL, `password` varchar(200) COLLATE latin1_general_ci NOT NULL, `fullname` varchar(255) COLLATE latin1_general_ci NOT NULL, `email` varchar(200) COLLATE latin1_general_ci NOT NULL, PRIMARY KEY (`id_user`) ) ;

8.1.2 Memasukkan Data Oleh karena kita belum memiliki halaman administrator untuk

menginput berita, kita harus memasukkan secara manual. Input data

tidak bisa langsung pada tabel berita karena di dalam tabel berita

memiliki relasi dengan tabel lain, diantaranya: tabel kategori, subkategori,

subsubkategori, dan user. Oleh karena, yang pertama kali dilakukan

adalah membuat data kategori, sub kategori, subsub kategori, dan user.

1 Ada dua cara untuk memasukkan data kategori yaitu melalui

halaman phpmyAdmin secara visual atau melalui perintah SQL.

Untuk memasukkan kategori secara visual, pilih tabel kategori.

Gambar 8.8 Memilih tabel kategori

2 Pilih menu Insert.

163

Gambar 8.9 Memilih menu Insert untuk memasukkan record

3 Masukkan nama kategori pada kolom yang telah disediakan.

phpMyadmin menyediakan dua kolom input sekaligus. Jadi, Anda

dapat memasukkan dua nama kategori pada baris atas dan bawah.

Jika sudah selesai, klik tombol Go untuk menyimpan.

Gambar 8.10 Form untuk memasukkan record pada tabel kategori

4 Tunggu beberapa saat, sistem akan menyimpan data yang diinput.

Ulangi langkah 3 untuk membuat kategori yang lain. Berikut

tampilan nama kategori yang sudah berhasil tersimpan.

Gambar 8.11 Beberapa nama kategori yang telah dibuat

164

5 Cara lain adalah memasukkan menggunakan perintah SQL. Pilih

tabel kategori, kemudian pilih menu SQL.

Gambar 8.12 Memilih menu SQL

6 Akan muncul form SQL. Hapus semua teks yang ada dalam form

tersebut.

Gambar 8.13 Tampilan form query SQL

7 Kemudian masukkan perintah SQL. Berikut ini perintah SQL untuk

memasukkan beberapa kategori secara langsung. Jika sudah yakin,

klik tombol Go untuk menyimpan data tersebut.

INSERT INTO `kategori` (`id_kategori`, `nama_kategori`) VALUES (1, 'Politik'), (2, 'Bisnis'), (3, 'Olah Raga'), (4, 'Hiburan'), (5, 'Teknologi'), (6, 'Kesehatan'), (7, 'Berita');

8 Selanjutnya, masukkan data pada tabel subkategori dan

subsubkategori. Berikut perintah SQL untuk memasukkan data ke

dalam subkategori dan subsubkategori.

INSERT INTO `subkategori` (`id_subkategori`, `nama_subkategori`, `id_kategori`) VALUES (1, 'Badminton', 3), (2, 'Formula 1', 3),

165

(3, 'Sepakbola', 3), (4, 'Golf', 3), (5, 'Tenis', 3), (6, 'Voley', 3), (7, 'Film', 4), (8, 'Entertainment', 4), (9, 'Hobi', 4), (11, 'Aplikasi', 5), (12, 'Elektronik', 5), (13, 'Dadget/Mobile', 5), (14, 'Internet', 5), (15, 'Sains', 5), (16, 'Teknologi', 5), (17, 'Otomotif', 5), (18, 'Nasional', 1), (19, 'Internasional', 1), (20, 'Ekonomi', 2), (21, 'Perbankan', 2), (22, 'Serba-Serbi', 7), (23, 'Transportasi', 2), (24, 'Makanan dan Minuman', 6), (25, 'Ibu dan Anak', 6); INSERT INTO `subsubkategori` (`id_subsubkategori`, `nama_subsubkategori`, `id_subkategori`) VALUES (1, 'Liga Belanda', 3), (2, 'Liga Indonesia', 3), (3, 'Liga Inggris', 3), (4, 'Liga Italia', 3), (5, 'Liga Jerman', 3), (6, 'Liga Perancis', 3), (7, 'Liga Spanyol', 3), (8, 'Fotografi', 9), (9, 'Mancing', 9), (10, 'Berkebun', 9), (11, 'Traveling', 9), (12, 'Melukis', 9), (13, 'Memasak', 9), (14, 'Info Selebritas', 8), (15, 'Berita', 19), (16, 'Informasi', 19), (20, 'Syariah', 21), (19, 'Properti', 20), (21, 'Otomotif', 20), (23, 'Metropolitan', 22), (24, 'Dunia Lain', 22), (25, 'Tenaga Kerja', 20), (26, 'Hukum dan Kriminal', 18), (27, 'KDRT', 18), (28, 'Udara', 23), (29, 'Darat', 23), (30, 'Kehamilan', 25), (31, 'Balita', 25), (32, 'Penyakit', 24), (33, 'Vitamin', 24),

166

(34, 'Smartphone', 13), (35, 'Tablet', 13), (36, 'Musik', 8), (37, 'Sinema', 8);

9 Berikut ini perintah SQL untuk memasukkan data untuk tabel fitur.

INSERT INTO `fitur` (`id_fitur`, `nama_fitur`) VALUES (1, 'Featured'), (2, 'Headlines'), (3, 'Bottom Sidebar');

10 Untuk memasukkan data ke tabel user, input menggunakan menu

Insert. Pertama kali aktifkan tabel user.

Gambar 8.14 Memilih tabel user

11 Pilih menu Insert.

Gambar 8.15 Memilih menu Insert untuk memasukkan record pada tabel user

12 Masukkan beberapa informasi yang dibutuhkan. Perhatikan pada

kolom password, harus diubah dalam format MD5 yang berfungsi

untuk enkripsi. Setelah selesai, klik tombol Go.

Gambar 8.16 Halaman form untuk memasukkan record pada tabel user

167

13 Tunggu beberapa saat, hingga sistem selesai memproses. Jika berhasil,

akan muncul informasi seperti gambar berikut.

Gambar 8.17 Data sudah berhasil dimasukkan ke dalam tabel user

14 Berikut ini tampilan beberapa data pada tabel user. Perhatikan pada

kolom password, teks awal sudah dienkripsi sehingga karakternya

berubah menjadi lebih panjang.

Gambar 8.18 Contoh beberapa data pada tabel user

15 Terakhir, masukkan data ke tabel berita. Berikut scipt untuk

memasukkan data melalui perintah SQL.

INSERT INTO `berita` (`id_berita`, `judul_berita`, `isi_berita`, `url_image`, `tgl_posting`, `tgl_update`, `id_kategori`, `id_subkategori`, `id_subsubkategori`, `id_fitur`, `id_status`, `id_user`, `hits`) VALUES (1, 'Daftar Artis Hollywod dengan bayaran mahal tahun 2014', '<p>Vaniti Fair Magazine mengumumkan artis-artis Hollywod dengan bayaran termahal selama kurun waktu 5 tahun sejak 2009 lalu. Berikut ini daftar tiga artis dengan bayaran mahal tahun 2013 yaitu: Angelina Jolie, Sandra Bullock dan Katherine Heigl.</p>', 'slamet-umi.jpg', '2014-01-20 07:54:01', '0000-00-00 00:00:00', 4, 8, 14, 1, 1, 1, 200), (2, 'Tom Cruise Kembali di Sekuel Jack Reacher', '<p>Berikut ini daftar tiga artis dengan bayaran mahal tahun 2013 yaitu: Angelina Jolie, Sandra Bullock dan Katherine Heigl. Lorem Ipsum adalah contoh teks atau dummy dalam industri percetakan dan penataan huruf atau typesetting. Lorem Ipsum telah menjadi standar contoh teks sejak tahun 1500an, saat seorang tukang cetak yang tidak dikenal mengambil sebuah kumpulan teks dan mengacaknya untuk menjadi sebuah buku contoh huruf. </p>', 'no-photo.jpg', '2014-01-20 06:03:06', '0000-00-00 00:00:00', 4, 8, 14, 1, 1, 1, 100);

168

16 Data tersebut hanya sebagai contoh saja. Silakan memasukkan data

lain sesuai keinginan. Perlu diingat, ketika memasukkan kode

kategori, sub kategori, dan sub sub kategori harus melihat kode

masing-masing. Jangan asal memasukkan nomor, karena akan

berakibat fatal dan parahnya data tidak dapat ditampilkan. Jika

mengikuti pentunjuk dalam buku ini, silakan import database yang

sudah disediakan dalam CD buku ini.

8.1.3 Konfigurasi Server Sebelum melakukan query ke database untuk memanipulasi data, harus

berhasil terhubung ke database yang dimaksud. Dalam pemrograman

PHP, dapat dibuat secara sederhana.

1. Pertama kali, buatlah sebuah file baru. Buatlah variabel baru untuk

menentukan localhost, username, password, dan nama database.

<?php $host = 'localhost'; $user = 'root'; $passw = ''; $db = 'responsive'; ?>

2. Lakukan perintah SQL untuk menghubungkan ke database tersebut.

<?php ..... $connect = mysql_connect($host,$user,$passw); $ok = mysql_select_db("$db",$connect); if($ok){ echo "berhasil terhubung ke database $db"; } else{ echo "gagal terhubung ke database $db"; } ?>

3. Simpan dengan nama config_db.php dan letakkan dalam folder

responsive/config. Jika belum memiliki folder config, silakan buat

folder terlebih dulu kemudian simpan file tersebut. Posisi file

config_db.php seperti nampak pada gambar berikut.

169

Gambar 8.19 Membuat file untuk koneksi ke database

4. Ujilah melalui browser, ketikkan alamat URL

http://localhost/responsive/config/config_db.php.

Gambar 8.20 File koneksi sudah berhasil terhubung ke database

5. Apabila muncul pesan “berhasil terhubung…..” berarti koneksi ke

dabatabase sudah berhasil sehingga dapat memanipulasi data, seperti:

INSERT, UPDATE dan DELETE melalui pemrograman PHP tanpa

harus mengakses melalui phpMyAdmin. Terkhir, ubahlah semua

kondisi if menjadi teks komentar dengan cara menambahkan

karakter /* di awal dan */ di akhir.

Gambar 8.21 Mengubah script menjadi baris komentar

170

8.2 Membuat Function Dengan function, kerja kita lebih mudah dan terstuktur. Mengapa kita

harus menggunakan function ? Salah satu alasan utama adalah membuat

program lebih dinamis. Sebagai contoh, isi berita yang ditampilkan pada

halaman utama harus dibatasi agar tampilan tidak “semwraut”.

Bayangkan, jika tidak ada pembatasan kata atau karakter, halaman

website akan penuh oleh teks isi berita.

Contoh lain, database tidak dapat menginput format tanggal lokal (12

Agustus 2014). Format tanggal yang berlaku secara internasional adalah

2014-08-12. Bagaimana cara mengubah tampilan? Tentunya harus

menggunakan function. Pada bagian ini, kita akan membuat beberapa

function agar sistem dapat bekerja lebih dinamis.

8.2.1 Fungsi Pembatasan kata Ada banyak cara pembatasan sebuah data yang akan ditampilkan. Dapat

menggunakan pembatasan karakter maupun kata. Jika menggunakan

pembatasan karakter, maka sebuah kalimat akan terpotong secara

otomatos. Sebagai contoh, kata seksama bisa jadi akan terpotong menjadi

seks. Oleh karena itu, dengan melihat kekurangan metode tersebut

penulis mencoba menggunakan fungsi pembatasan kalimat berdasarkan

jumlah kata.

1. Pertama kali, buatlah file baru dan masukkan kode berikut.

<?php function word_limit($str,$limit=100) { if(STRIPOS($str," ")){ $ex_str = EXPLODE(" ",$str); IF(COUNT($ex_str)>$limit){ for($i=0;$i<$limit;$i++){ @$str_s.=$ex_str[$i]." "; } RETURN $str_s; }ELSE{ RETURN $str; } }ELSE{ RETURN $str;

171

} } ?>

2. Buatlah folder baru di dalam folder responsive dengan nama

function. Simpan file tersebut dengan nama word_limit.php dan

letakkan dalam folder responsive/function.

Gambar 8.22 Membuat fungsi pembatasan kata

8.2.2 Fungsi Tanggal Indonesia Seperti telah dijelaskan pada bagian sebelumnya, bahwa format tanggal

(date) harus mengikuti standar internasional yaitu yyyy-mm-dd atau jika

diterjemahkan dalam format tanggal akan berbentuk 2014-08-12. Untuk

mengkonversi tanggal tersebut agar berubah menjadi 12 Agustus 2014,

harus dibuatkan fungsi khusus. Melalui fungsi, maka format tanggal akan

berubah sesuai keinginan.

1. Buatlah file baru, tambahkan script berikut untuk fungsi tanggal

Indonesia.

<?php function DateIndo($date) { // fungsi untuk mengubah tanggal ke dalam format Indonesia // variabel BulanIndo merupakan variabel array yang menyimpan nama-nama bulan $BulanIndo = array("Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember"); $tahun = substr($date, 0, 4); // memisahkan format tahun menggunakan substring $bulan = substr($date, 6, 2); // memisahkan format bulan menggunakan substring $tgl = substr($date, 8, 2); // memisahkan format tanggal menggunakan substring

172

$hasil= $tgl . " " . $BulanIndo[(int)$bulan-1] . " ". $tahun; return($hasil); } ?>

2. Simpan file tersebut dengan nama tanggal_indo.php dan letakkan

dalam folder responsive/function.

8.2.3 Fungsi Search Engine Friendly (SEF) Search Engine Optimation adalah serangkaian proses yang dilakukan

secara sistematis yang bertujuan untuk meningkatkan volume dan

kualitas trafik kunjungan melalui mesin pencari menuju situs web

tertentu dengan memanfaatkan mekanisme kerja atau algoritma mesin

pencari tersebut. Tujuan dari SEO adalah menempatkan sebuah situs web

pada posisi teratas, atau setidaknya halaman pertama hasil pencarian

berdasarkan kata kunci tertentu yang ditargetkan. Secara logis, situs web

yang menempati posisi teratas pada hasil pencarian memiliki peluang

lebih besar untuk mendapatkan pengunjung.

Sejalan dengan makin berkembangnya pemanfaatan jaringan internet

sebagai media bisnis, kebutuhan atas SEO juga semakin meningkat.

Berada pada posisi teratas hasil pencarian akan meningkatkan peluang

sebuah perusahaan pemasaran berbasis web untuk mendapatkan

pelanggan baru. Peluang ini dimanfaatkan sejumlah pihak untuk

menawarkan jasa optimisasi mesin pencari bagi perusahaan-perusahaan

yang memiliki basis usaha di internet.

Salah satu teknik mengoptimalkan hasil pencarian adalah menggunakan

alamat URL yang bersahabat. Artinya, alamat URL mudah dibaca secara

kasat mata tanpa mengandung kode atau karakter yang rumit. Berikut

contoh alamat URL yang rumit.

http://lipi.go.id/www.cgi?berita&1389677107&&2014&&ina

Google tidak menyukai alamat URL tersebut, bandingkan dengan alamat

URL yang satu ini.

173

http://slametriyanto.net/ebook-the-best-practice-adobe-photoshop-cs4/

Dengan alamat URL yang bersahabat, tentunya dapat meningkatkan

trafik hasil pencarian. Pada bagian ini, kita akan membuat fungsi untuk

mengubah alamat URL lebih bersahabat.

1. Butlah file baru dan tambahkan script berikut.

<?php function seo_title($s) { $c = array (' '); $d = array ('-','/','\\',',','.','#',':',';','\'','"','[',']','{','}',')','(','|','`','~','!','@','%','$','^','&','*','=','?','+'); $s = str_replace($d, '', $s); // Hilangkan karakter yang telah disebutkan di array $d $s = strtolower(str_replace($c, '-', $s)); // Ganti spasi dengan tanda - dan ubah hurufnya menjadi kecil semua return $s; } ?>

2. Simpan dengan nama seo.php dan letakkan di dalam folder function.

Gambar 8.23 Fungsi SEO sudah berhasil dibuat

8.3 Proses Query untuk Frontend Salah satu kelebihan pemrograman PHP, dapat ditanamkan (embed) di

antara tag HTML. Untuk menanamkan kode PHP pun relatif mudah dan

dapat diatur sesuai kebutuhan. Selain dapat ditanamkan, PHP juga dapat

“memanggil” tag HTML. Artinya, tidak ada masalah apapun ketika

menggunakan PHP murni untuk membangun sebuah aplikasi maupun

yang blended antara tag HTML dengan kode PHP.

174

Yang terpenting adalah format file harus tersimpan dalam .php bukan

.html. Jadi, dokumen yang sudah dibuat sebelumnya dalam format html

harus disimpan dalam format php agar kode php dapat berfungsi dengan

baik.

1. Buka file index.html kemudian simpan dokumen tersebut dalam

format index.php

Gambar 8.24 Mengubah file index.html menjadi index.php

2. Kita memiliki dua buah file index, yaitu index.html dan index.php.

Keduanya dapat berfungsi. Pertanyaannya, mana yang lebih dulu

dieksekusi diantara kedua file tersebut? Jawabnya, index.html.

Meskipun kita memiliki beberapa file index.html, index.php,

index.asp, index.cfm, dll sudah pasti yang dieksekusi pertama kali

adalah index.html. Jika tidak ditemukan index.html maka akan yang

dijalankan adalah index.php. Oleh karena itu, ganti nama index.html

menjadi index2.html agar yang dijalankan adalah index.php.

Gambar 8.25 Mengubah file index.html menjadi index2.html

175

3. Sebelum melakukan query, sisipkan file koneksi dalam file index.php

dengan perintah include. Letakkan kode php paling atas, setelah tag

<body>. Simpan file tersebut.

Gambar 8.26 Menyisipkan file lain dengan metode INCLUDE

8.3.1 Menampilkan Top Menu 1. Tambahkan sintaks php setelah tag <ul class=nav navbar-...>.

Gambar 8.27 Membuat sintaks PHP

2. Buatlah variabel baru untuk menyimpan data, misal $cat kemudian

lakukan perintah SQL untuk memilih semua kategori dengan

perintah SELECT. Tampilkan nama kategori secara berurutan dari A

– Z (Ascending) dengan perintah ORDER BY.

<?php $cat = mysql_query("SELECT * FROM kategori ORDER BY nama_kategori"); ?>

3. Setelah berhasil memilih tabel kategori, ambil data array yang

tersimpan dalam tabel tersebut.

<?php $cat = mysql_query("SELECT * FROM kategori ORDER BY nama_kategori");

176

while($rcat = mysql_fetch_array($cat)) { }

4. Oleh karena top menu ditampilkan dengan huruf kapital (uppercase),

sedangkan data yang diinput belum tentu huruf kapital maka harus

dikonversi agar semua huruf menjadi kapital.

while($rcat = mysql_fetch_array($cat)) { //Konversi menjadi huruf kapital @$capcat = strtoupper($rcat[nama_kategori]); }

5. Tambahkan tag <li> dengan perintah echo untuk menampilkan data.

//Konversi menjadi huruf kapital @$capcat = strtoupper($rcat[nama_kategori]); echo "<li class='dropdown'>"; echo "</li>";

6. Letakkan variabel yang menyimpan data list nama kategori setelah tag

<li class=dropdown>.

//Konversi menjadi huruf kapital @$capcat = strtoupper($rcat[nama_kategori]); echo "<li class='dropdown'> <a href=$rcat[id_kategori] data-toggle='dropdown'>$capcat<span class='caret'></span></a>";

7. Sekarang buatlah variabel baru dan lakukan query untuk mengambil

sub menu dari tabel submenu.

<a href=$rcat[id_kategori] data-toggle='dropdown'>$capcat<span class='caret'></span></a>"; $sub = mysql_query("SELECT a.* FROM subkategori a, kategori b WHERE a.id_kategori = b.id_kategori AND b.id_kategori ='$rcat[id_kategori]'");

8. Setelah berhasil memilih tabel sub menu, ambil semua data array.

$sub = mysql_query("SELECT a.* FROM subkategori a, kategori b WHERE a.id_kategori = b.id_kategori AND b.id_kategori ='$rcat[id_kategori]'"); echo "<ul class='dropdown-menu'>";

177

while($rsub = mysql_fetch_array($sub)) { echo "<li><a href=$rsub[id_subkategori]>$rsub[nama_subkategori]</a></li>"; } echo "</ul></li>";

9. Berikut script lengkap untuk menampilkan top menu secara dinamis

yang diambil dari tabel kategori dan sub kategori.

<?php

$cat = mysql_query("SELECT * FROM kategori ORDER BY nama_kategori"); while($rcat = mysql_fetch_array($cat)) { //Konversi menjadi huruf kapital @$capcat = strtoupper($rcat[nama_kategori]); echo "<li class='dropdown'> <a href=$rcat[id_kategori] data-toggle='dropdown'>$capcat<span class='caret'></span></a>"; $sub = mysql_query("SELECT a.* FROM subkategori a, kategori b WHERE a.id_kategori = b.id_kategori AND b.id_kategori ='$rcat[id_kategori]'"); echo "<ul class='dropdown-menu'>"; while($rsub = mysql_fetch_array($sub)) {

echo "<li><a href=$rsub[id_subkategori]>$rsub[nama_subkategori]</a></li>";

} echo "</ul></li>";

} ?>

10. Lihatlah hasilnya di browser.

Gambar 8.28 Tampilan Top Menu sudah berhasil

178

11. Terakhir, hapus semua tag HTML yang menampilkan kategori dan

sub kategori.

Gambar 8.29 Menghapus kategori dan sub kategori

8.3.2 Menampilkan Featured 1. Pertama kali, tambahkan tag PHP setelah class=col-md-7.

Gambar 8.30 Posisi sintaks PHP untuk menampilkan Featured

2. Buatlah variabel baru untuk menyimpan data kemudian pilih tabel

berita, dengan menampilkan satu judul yang berbaru dan berada

dalam fitur= featured.

<?php //Menampilkan Featured terbaru $f = mysql_query("SELECT * FROM berita WHERE id_status = `1` ORDER BY id_berita DESC LIMIT 0,1"); ?>

3. Setelah berhasil memilih data array dari tabel berita, ambil data

tersebut dan tampilkan.

203

BAB 9 HALAMAN

ADMINISTRATOR

Sebuah sistem pengelolaan konten (content management system) sudah

pasti memiliki halaman administrator untuk mengelola konten yang akan

ditampilkan. Hal ini penting disediakan agar proses input data lebih

mudah dan lebih aman karena tidak mengakses langsung ke database

namun melalui interface tersendiri.

Dalam halaman administrator dapat menampilkan daftar berita yang

telah dibuat, daftar kategori, status, daftar pengguna, dan data lainnya

yang dapat diedit maupun dihapus. Form input juga harus disediakan

agar memudahkan ketika memasukkan data baru.

Pada bagian ini, akan dibahas cara membuat halaman administrator

dengan memanfaatkan template khusus admin yang gratis. Kita dapat

memodifikasinya agar proses pengerjaan lebih cepat namun hasilnya

sangat memuaskan.

9.1 Menggunakan Free Admin Template Di internet, banyak template khusus backend atau sering dikenal dengan

istilah halaman admin. Dari beberapa template admin yang disediakan,

Penulis sudah menyeleksi dengan berbagai pertimbangan diantaranya:

responsive, tampilan menarik, banyak fitur, tersedia beberapa tema dan

warna, plugin lengkap, dan masih banyak lagi. Melalui admin template

yang gratis, kode sumber dapat dimodifikasi sesuai keinginan.

204

1. Esktrak file charisma-master.zip kemudian pilih beberapa folder dan

file.

Gambar 9.1 Memilih beberapa fodler dan file

2. Buatlah folder baru dengan nama adminweb di bawah folder

responsive. Letakkan semua file hasil duplikasi ke dalam folder

adminweb.

Gambar 9.2 Meletakkan hasil duplikasi pada folder adminweb

3. Sekarang akses folder adminweb melalui browser, masukkan alamat

URL http://localhost/responsive/adminweb/

Gambar 9.3 Tampilan Admin Template Charisma

205

9.2 Merancang Halaman Admin 1. Buka file index.html menggunakan aplikasi editor teks (misal:

Sublime Text). Duplikasi semua kode HTML yang ada kemudian

buatlah file baru, masukkan semua tag HTML ke dalam file baru.

Simpan file baru dengan nama dashboard.php yang letaknya berada

di dalam folder adminweb.

Gambar 9.4 Menduplikasi dan mengganti nama file

2. Dengan file dashboard.php masih kondisi terbuka, hapus script yang

diseleksi. Perhatikan baris ke 70 muncul ikon triangle yang dapat

diaktifkan untuk melihat script yang tersembunyi.

Gambar 9.5 Menghapus beberap bagian yang tidak digunakan

3. Hapus script yang diseleksi, perhatikan baris ke 83.

Gambar 9.6 Memilih tag HTML yang akan dihapus

4. Langkah selanjutnya menghapus semua konten yang berada di tengah

halaman admin (lihat Gambar 9.7).

5. Seleksi beberapa beberapa baris yang berhubungan dengan konten

tersebut (lihat Gambar 9.8).

206

Gambar 9.7 Halaman konten yang akan dihapus

Gambar 9.8 Memilih kode halaman konten

6. Setelah terhapus, coba ketikkan teks apa saja sebagai uji coba untuk

melihat dampak dari beberapa baris yang dihilangkan.

Gambar 9.9 Mengetik teks untuk uji coba

7. Lihatlah hasilnya di browser.

207

Gambar 9.10 Teks berada pada halaman konten

8. Terakhir, hapus script yang diseleksi.

Gambar 9.11 Menghapus tag HTML

9.3 Membuat Panel Menu 1. Panel menu sudah disiapkan dalam template, tugas Anda hanya

memodifikasi saja. Hapus beberapa baris yang diseleksi.

Gambar 9.12 Menyeleksi tag HTML yang akan dihapus

2. Setelah terhapus, ketikkan beberapa script untuk membuat menu.

<!-- left menu starts --> <div class="span2 main-menu-span"> <div class="well nav-collapse sidebar-nav"> <ul class="nav nav-tabs nav-stacked main-menu">

208

<li class="nav-header hidden-tablet">Main</li> <li><a class="ajax-link" href="?modul=home"><i class="icon-home"></i><span class="hidden-tablet"> Dashboard</span></a></li> <li><a class="ajax-link" href="?modul=berita"><i class="icon-list-alt"></i><span class="hidden-tablet"> Berita</span></a></li> <li><a class="ajax-link" href="?modul=kategori"><i class="icon-list"></i><span class="hidden-tablet"> Kategori</span></a></li> <li><a class="ajax-link" href="?modul=sub-kategori"><i class="icon-list"></i><span class="hidden-tablet"> Sub Kategori</span></a></li> <li><a class="ajax-link" href="?modul=subsub-kategori"><i class="icon-list"></i><span class="hidden-tablet"> Sub-sub Kategori</span></a></li> <li><a class="ajax-link" href="?modul=fitur"><i class="icon-th"></i><span class="hidden-tablet"> Fitur</span></a></li> <li><a class="ajax-link" href="?modul=user"><i class="icon-user"></i><span class="hidden-tablet"> User</span></a></li> <li><a class="ajax-link" href="logout.php"><i class="icon-tag"></i><span class="hidden-tablet"> Logout</span></a></li>

</ul> </div><!--/.well --> </div><!--/span--> <!-- left menu ends -->

3. Lihatlah hasilnya di browser. Jika diakses dengan resolusi tinggi atau

minimal 1200px akan nampak seperti gambar berikut.

Gambar 9.14 Tampilan panel menu utama

209

4. Jika diakses melalui Tablet atau resolusi minimal 1027 pixel akan

nampak seperti gambar berikut.

Gambar 9.15 Tampilan panel menu jika diakses melalui tablet

5. Dan jika diakses menggunakan mobil atau resolusi rendah akan

nampak seperti gambar berikut.

Gambar 9.16 Tampilan Panel menu ketika diakses melalui smartphone atau resolusi rendah

9.4 Membuat Halaman Login Ketika mengakses halaman administrator harus diproteksi dengan sebuah

halaman yang biasanya berisi nama pengguna dan kata kunci. Tabel user

yang sebelumnya sudah dibuat, perlu dimodifikasi terlebih dulu denngan

cara menambahkan dua kolom yaitu foto user dan id session.

210

1. Masuk ke halaman phpMyAdmin (http://localhost/phpmyadmin),

kemudian aktifkan tabel user.

Gambar 9.17 Mengaktifkan tabel user

2. Klik menu Structure.

Gambar 9.18 Menu Structure

3. Tambahkan dua buah kolom setelah kolom email.

Gambar 9.19 Menambah kolom pada tabel user

4. Masukkan tipe data dan panjang karakter untuk tiap kolom. Jika

sudah yakin, klik tombol Save untuk menyimpan.

Gambar 9.20 Menentukan nama kolom, tipe data, dan panjang ruas

5. Buatlah file baru dengan nama index.php, simpan ke dalam folder

adminweb. Ketik script berikut untuk membuat halaman login.

211

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Halaman Login</title> <!-- The styles --> <link id="bs-css" href="css/bootstrap-cerulean.css" rel="stylesheet"> <style type="text/css"> body { padding-bottom: 40px; } .sidebar-nav { padding: 9px 0; } </style> <link href="css/charisma-app.css" rel="stylesheet"> <link href="css/uniform.default.css" rel="stylesheet"> <link href="css/opa-icons.css" rel="stylesheet"> </head> <body> <div class="container-fluid">

<div class="row-fluid">

<div class="row-fluid"> <div class="span12 center login-header"> <h2>Welcome to Newsmedia</h2> </div><!--/span-->

</div><!--/row-->

<div class="row-fluid"> <div class="well span5 center login-box">

<div class="alert alert-info"> Please login with your Username and Password. </div> <form class="form-horizontal" action="ceklogin.php" method="post">

<fieldset> <div class="input-prepend" title="Username" data-rel="tooltip">

<span class="add-on"><i class="icon-user"></i></span><input autofocus class="input-large span10" name="username" id="username" type="text" value="admin" />

</div> <div class="clearfix"></div>

<div class="input-prepend" title="Password" data-rel="tooltip">

<span class="add-on"><i class="icon-lock"></i></span><input class="input-large span10" name="password" id="password" type="password" value="adminadmin" />

212

</div> <div class="clearfix"></div>

<div class="input-prepend">

<label class="remember" for="remember"><input type="checkbox" id="remember" />Remember me</label>

</div> <div class="clearfix"></div>

<p class="center span5">

<button type="submit" class="btn btn-primary">Login</button>

</p> </fieldset>

</form> </div><!--/span-->

</div><!--/row--> </div><!--/fluid-row--> </div><!--/.fluid-container--> </body> </html>

6. Lihatlah hasilnya di browser, ketik alamat URL

http://localhost/responsive/adminweb/index.php.

Gambar 9.21 Halaman Login

7. Perhatikan baris action="ceklogin.php", maksudnya tombol Login

pada halaman login diekseksi akan diarahkan ke file ceklogin.php.

File ini berisi validasi username dan password yang diinput untuk

dicocokkan dengan data yang berada dalam tabel user. Jika username

dan password ditemukan maka akan diarahkan ke sebuah halaman

213

administrator atau file dashboard.php. Buatlah file baru dengan nama

ceklogin.php yang posisinya sejajar dengan file index.php. Masukkan

script berikut.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Validasi</title> <!-- The styles --> <link id="bs-css" href="css/bootstrap-cerulean.css" rel="stylesheet"> <style type="text/css"> body { padding-bottom: 40px; } .sidebar-nav { padding: 9px 0; } </style> <link href="css/charisma-app.css" rel="stylesheet"> <link href="css/uniform.default.css" rel="stylesheet"> <link href="css/opa-icons.css" rel="stylesheet"> </head> <html> <body> <?php include "../config/config_db.php"; function anti_injection($data){

$filter = mysql_real_escape_string(stripslashes(strip_tags(htmlspecialchars($data,ENT_QUOTES))));

return $filter; } $username = anti_injection($_POST['username']); $pass = anti_injection(md5($_POST['password'])); // pastikan username dan password adalah berupa huruf atau angka. if (!ctype_alnum($username) OR !ctype_alnum($pass)){ echo "Anda tidak bisa menginjeksi."; } else{

$login=mysql_query("SELECT * FROM user WHERE username='$username' AND password='$pass'"); $ketemu=mysql_num_rows($login); $r=mysql_fetch_array($login);

// Apabila username dan password ditemukan if ($ketemu > 0){

214

session_start(); $_SESSION['iduser'] = $r['id_user']; $_SESSION['username'] = $r['username']; $_SESSION['passuser'] = $r['password']; $_SESSION['fullname'] = $r['fullname']; $_SESSION['foto'] = $r['foto_user']; $sid_lama = session_id(); session_regenerate_id(); $sid_baru = session_id(); mysql_query("UPDATE user SET id_session='$sid_baru' WHERE username='$username'"); header('location:dashboard.php?modul=home'); } // Apabila username dan password TIDAK ditemukan else{ echo "<link href=css/style.css rel=stylesheet type=text/css>"; echo "<br><br><center><h1>LOGIN GAGAL! </h1><br> <h2>Username / Password Anda tidak benar</h2> <h3>Atau account Anda sedang diblokir</h3><br><br>"; echo "<a href=index.php><h2><b>ULANGI LAGI</b></h2></a></center>"; } } ?> </body> </html>

8. Sekarang uji script tersebut, akses halaman login kemudian masukkan

username dan password apa saja. Jika username atau password salah,

maka akan muncul pesan seperti berikut.

Gambar 9.22 Tampilan pesan jika username atau password salah

9. Perhatikan baris header('location:dashboard.php?modul=home');

maksudnya apabila username dan password sesuai maka akan

diarahkan ke file dashboard.php?modul=home seperti nampak pada

gambar berikut.

215

Gambar 9.23 Tampilan dashboard jika berhasil Login

10. Variabel global $_SESSION[] digunakan untuk menyimpan dalam

sebuah memori komputer, dan ketika dibutuhkan dapat dipanggil

kembali. Secara analogi, variabel global tersebut berfungsi sebagai

passport atau tanda pengenal. Data yang tersimpan dalam variabel

global akan terus digunakan selama belum keluar (Logout). Nama

variabel global bisa ditentukan secara bebas, namun hal yang tidak

boleh diubah adalah nama indeks data array dari database

($r[id_user], $r[username], dan lain seterusnya) harus sesuai dengan

nama kolom yang ada dalam tabel user.

9.5 Membuat Dashboard Dashboard berisi konten dan menu yang dapat dipilih untuk menuju

sebuah halaman tertentu. Menu Berita akan menampilkan daftar berita

yang sudah dimasukkan, tombol untuk input berita baru, tombol untuk

mengedit atau menghapus berita, dan beberapa fungsi lainnya.

Ketika memilih sebuah menu, maka akan diarahkan ke sebuah halaman

lain. Dalam studi kasus ini, Penulis akan memberikan teknik membuat

modul Berita (input, edit, update, dan delete). Untuk modul-modul lain,

silakan dikembangkan sendiri sebagai latihan.

1. Pertama kali, buka file dashboard.php kemudian ketik script berikut

dan letakkan pada area konten.

216

<div id="content" class="span10"> <!-- content starts --> <div> <ul class="breadcrumb" class='nav nav-pills nav-stacked'> <li> <a href="dashboard.php?modul=home"><h3>DASHBOARD</h3></a> </li> </ul> <div> <?php $m = $_GET['modul']; //Ini ditampilkan pertama kali ketika berhasil Login if($m=='home') {

echo "SELAMAT DATANG <b>$_SESSION[fullname] </b>"; echo "<br><br>"; echo "<p>Silakan memilih salah satu menu yang ada di sebeleh kiri untuk mengelola</p>";

} //Ini untuk memanggil modul berita elseif($m=='berita'){

include "modul/berita.php"; } //Ini untuk memanggil modul kategori elseif($m=='kategori'){ echo "Halaman Kategori"; } //Ini untuk memanggil modul subkategori elseif($m=='sub-kategori'){ echo "Halaman Sub Kategori"; } //Ini untuk memanggil modul subsubkategori elseif($m=='subsub-kategori'){ echo "Halaman Sub-sub Kategori"; } //Ini untuk memanggil modul fitur elseif($m=='fitur'){ echo "Halaman Fitur"; } //Ini untuk memanggil modul user elseif($m=='user'){ echo "Halaman User"; } //Ini akan ditampilkan jika modul tidak ditemukan else{ echo "Halaman yang dicari tidak ditemukan"; }

217

?> </div> </div> <!-- content ends --> </div><!--/#content.span10-->

2. Ujilah script tersebut dengan cara login terlebih dulu. Jika sudah

berhasil login, maka akan muncul pesan error. Hal ini dikarenakan

file dashboard.php belum mengaktifkan session yang berfungsi untuk

menyimpan variabel global $_SESSION. Untuk mengatasinya,

tambahkan script berikut pada awal baris.

<body> <?php include "../config/config_db.php"; include "../function/word_limit.php"; include "../function/tanggal_indo.php"; session_start(); if (empty($_SESSION['username']) AND empty($_SESSION['passuser'])){

echo "<center><h2>Untuk mengakses modul</h2> <h1>Anda harus login</h1><br>"; echo "<a href=index.php><h3>LOGIN</b></h3></center>";

} else{ ?> <!-- topbar starts -->

3. Kurung kurawal pada kondisi else { harus ditutup pada baris paling

akhir.

<?php } ?> </body> </html>

4. Jika sudah selesai simpan file, lalu pilih menu secara bergantian.

Perhatikan alamat URL dan konten yang ditampilkan. Semua menu

sudah berfungsi, kecuali menu Berita akan menghasilkan pesan error

karena file berita.php tidak ditemukan.

218

Gambar 9.24 Memeriksa menu dan alamat URL

5. Untuk mempermudah dalam praktek, harus dibuatkan menu Logout.

Modifikasi beberapa baris berikut, perhatikan teks dengan huruf

tebal.

<!-- user dropdown starts --> <div class="btn-group pull-right" >

<a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> <?php echo "<img src='../assets/images/$_SESSION[foto]'";?> <span class="hidden-phone"></span> <span class="caret"></span> </a> <ul class="dropdown-menu">

<li><a href="?modul=profil">Profile</a></li> <li class="divider"></li> <li><a href="logout.php">Logout</a></li>

</ul> </div> <!-- user dropdown ends -->

6. Agar program berjalan normal, Anda harus memasukkan sebuah file

gambar yang tersimpan dalam folder assets/images.

Gambar 9.25 Menyiapkan foto untuk profil user

219

7. Nama file gambar harus dimasukkan dalam database. Masukkan

nama file gambar pada kolom foto_user.

Gambar 9.26 Memasukkan nama file gambar pada kolom foto_user

8. Lihatlah hasilnya di browser.

Gambar 9.27 Tampilan foto profil user

9. Terakhir, buatlah file baru dengan nama logout.php dan simpan

dalam folder adminweb. Ketikkan script berikut.

<?php session_start(); session_destroy(); echo "<script>alert('Anda telah keluar dari halaman administrator'); window.location = '../adminweb/index.php'</script>"; ?>

9.6 Membuat Modul Berita Ada banyak cara untuk membuat modul berita. Dengan memanfaatkan

statement if-elseif atau switch dapat berisi beberapa kondisi dalam sebuah

file. Kondisi input, save, edit, update maupun delete dapat diatur

menggunakan statemen if-elseif atau swicth secara dinamis. Bagi seorang

programmer pemula, mungkin akan membuat beberapa file sesuai

220

kondisi, misal: berita-input.php, berita-simpan.php, dan seterusnya.

Banyaknya file tersebut tidak menggunakan statemen, namun hanya

mengarahkan ke sebuah file. Pada bagian ini, kita akan membuat modul

berita dengan memanfaatkan statemen if-elseif.

1. Pertama kali, buatlah folder dengan nama modul yang berada di

bawah responsive/adminweb. Kemudian buatlah file baru dengan

nama berita.php dan simpan dalam folder modul.

Gambar 9.28 Membuat file baru untuk modul berita

2. Sebagai langkah awal, ketikkan script berikut.

<?php @$act = $_GET['aksi']; //Halaman form input baru if($act=='add'){ } //Script untuk menyimpan hasil input elseif($act=='simpan'){ } //Script untuk edit berita elseif($act=='edit'){ } //Script untuk update berita elseif($act=='update'){ } //Script untuk menghapus elseif($act=='delete'){ }

221

//Script untuk menampilkan semua berita else{ } ?>

3. Penjelasannya, baris @$act = $_GET['aksi']; maksudnya sebuah

indeks yang ditemukan pada alamat URL modul=berita&aksi=add.

Baris &aksi disimpan sebagai variabel global dengan indeks=aksi.

Variabel $act hanya menyederhanakan bentuk variabel global

tersebut agar script tidak terlalu panjang.

9.6.1 Menampilkan Daftar Berita 1. Fokus pada bagian untuk menampilkan semua berita. Sebagai

langkah awal, buatlah tabel terlebih dulu kemudian masukkan sebuah

data yang diketik secara manual untuk mengisi kolom judul berita, isi

berita, kategori, dan seterusnya sesuai jumlah kolom.

//Script untuk menampilkan semua berita else { echo "

<div class='row-fluid sortable'> <div class='box span12'> <div class='box-header well' data-original-title> <h2><i class='icon-list'></i> DAFTAR BERITA</h2> <div class='box-icon'> <a href='?modul=berita&aksi=add' class='btn btn-default active'><i class='icon-blue icon-plus'></i></a></div>

</div> <div class='box-content'>

<table class='table table-striped table-bordered bootstrap-datatable datatable'>

<thead> <tr>

<th>NO</th> <th>JUDUL</th> <th>ISI BERITA</th> <th>KATEGORI</th> <th>TANGGAL POSTING</th> <th>TANGGAL UPDATE</th> <th>FITUR</th> <th>STATUS</th> <th>AKSI</th>

</tr> </thead>

DAFTAR PUSTAKA

[1] Ben Frain. Responsive Web Design with HTML5 and CSS3.

Birmingham: Packt Publishing, 2012

[2] Benjamin LaGrone. HMTL5 and CSS3 Responsive Web Design

Cookbook. Birmingham: Packt Publishing, 2013.

[3] Craig Sharke & Andrew FisherJump Start Responsive Web Design.

Cambridge Street Collingwood: SitePoint Pty. Ltd, 2013

[4] Ethan Marcotte. Responsive Web Design. New York A Book Apart,

2011

[5] Thoriq Firdaus. Responsive Web Design by Example - Beginner's

Guide. Birmingham: Packt Publishing, 2013

[6] Tim Kadlec. Implementing Responsive Design. Berkeley: New Riders,

2012

[7] 7 Key Principles that Make a Web Design Look Good.

http://www.noupe.com/how-tos/7-key-principles-that-make-a-web-

design-look-good.html (02-01-2014)

[8] CSS Frameworks + CSS Reset: Design From Scratch

(http://coding.smashingmagazine.com/2007/09/21/css-frameworks-

css-reset-design-from-scratch/). Tanggal akses 29 Desember 2013

pukul 08:20 WIB.

[9] Fixed Width Layout.

(http://webdesign.about.com/od/layout/g/bldeffixedlyot.htm).

diakses tanggal: 28 Desember 2013 pukul 21:10WIB

8

[10] Future of Mobile News.

http://www.journalism.org/2012/10/01/future-mobile-news/ Tanggal

akse 07 Januari 2014

[11] http://webdesign.about.com/od/layout/g/bldefliquidlyot.htm. Liquid

Layout . Tanggal akses: 28 Desember 2013 pukul 21:30WIB

[12] Manage File and Directories. http://www.utexas.edu/learn/manage/.

Tanggal akses 04 Januari 2014, pukul 09.00 WIB.

[13] Web Design 101: Adaptive vs. Responsive Design.

http://www.rasmussen.edu/degrees/design/blog/web-design-101-

adaptive-vs-responsive-design/. Tanggal akses: 28 Desember 2013

pukul 22:40WIB.

[14] What are Frameworks? 22 Best Responsive CSS Frameworks for Web

Design (http://www.awwwards.com/what-are-frameworks-22-best-

responsive-css-frameworks-for-web-design.html). Tanggal akses 29

Desember 2013 pukul 08.25.

[15] What is the difference between Responsive and Adaptive web

design?. (http://www.cariadwebdesign.com/blog/what-difference-

between-responsive-and-adaptive-web-design. Tanggal akses: 28

Desember 2013 pukul 22:50WIB

[16] What’s the Difference Between Fixed, Fluid, Adaptive, and

Responsive Web Design?(http://blog.teamtreehouse.com/whats-the-

difference-between-fixed-fluid-adaptive-and-responsive-web-

design-treehouse). Tanggal akses : 28 Desember 2013 pukul 23:30

WIB.

[17] Why 2013 Is the Year of Responsive Web Design.

http://mashable.com/2012/12/11/responsive-web-design/.