1 UCAPAN TERIMA KASIH Buku ini saya persembahkan khusus untuk: 1. Kedua orang tuaku yang selalu memberikan do a 2. Isteriku Umie yang selalu memberika...
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, 7
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
8
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 7
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
8
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
9
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, 1
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 artikelartikel 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. 2
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 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/css3mediaqueries/) 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 (maxwidth: 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
3
mengakibatkan konsumsi bandwidth terbuang dan juga mengurangi kinerja situs web, khususnya pengguna mobile.
Gambar Responsif dengan elemen 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 untuk mengatasi situasi. Elemen 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: <source src=big.jpg media="min-width:768px"> <source src=medium.jpg media="min-width:320px"> <source src=small.jpg>
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 , hal ini juga digunakan untuk memberikan gambar cadangan untuk browser yang tidak mendukung elemen .
4
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. 5
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.
6
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
7
Gambar 2.2 Tata letak rancangan situs web berbasis “Fixed”
Gambar 2.3 Contoh situs web menggunakan teknologi fixed web design
8
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 userfriendly 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
9
−
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/)
10
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.
15
“[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 −
16
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.
−
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” 17
−
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 berulangulang.
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. 16column grid terdiri dari penambahan 40 pixel. Setiap kolom memiliki 10 pixel margin di sebelah kiri dan kanan, yang membuat 20 pixel celah lebar 18
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 19
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 20
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.
21
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
22
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. 23
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 24
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
25
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).
26
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
27
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. 35
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
36
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. 37
Balsamiq Mockup memungkinkan Anda menambahkan dan mengedit User Interface wireframes langsung dari Google Drive. Ilterasi secara realtime 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.
38
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
39
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/.
40
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 41
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, 47
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 48
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/wpcontent/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. 49
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 ideide 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
50
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 51
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 57
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)
58
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. Bendabenda ini diatur sedemikian rupa sehingga, meskipun perbedaanperbedaan, 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 59
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
60
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, 61
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 62
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.
63
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. 64
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/)
65
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 66
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 67
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
68
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
69
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)
70
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
71
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)
72
−
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. 73
2
Mengatur file ke dalam subdirektori. Buat subdirektori untuk mengatur file HTML Anda dengan topik tertentu. Sebagai contoh, Anda dapat membuat beberapa subdirektori, termasuk masingmasing 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 74
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.
75
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
76
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 RESPONSIVE WEB DESIGN <meta name="viewport" content="width=device-width, initialscale=1.0"> <script type="text/javascript" src="assets/js/jquery2.0.3.min.js"> <script type="text/javascript" src="assets/js/bootstrap.js">
77
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
78
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.
Navigasi
79
Gambar 6.27 Mengelola class=col-md-7
13. Kemudian tambahkan beberapa division dan class=col-md-7.
KOLOM 7
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.
KOLOM 7
KOLOM 3
80
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.
KOLOM 7
KOLOM 3
KOLOM 2
KOLOM 4 kiri
KOLOM 4 tengah
KOLOM 4 kanan
KOLOM 12
FOOTER
19. Lihat hasilnya di browser.
81
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
111
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
112
Untuk memodifikasi class=container, buka file style.css kemudian tambahkan baris berikut.
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
113
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
114
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)
115
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 116
.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; -webkitborder-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, -webkituntuk Safari, Netscape, dan Chrome.
Gambar 7.13 Tampilan label HEADLINES sebelum dan sesudah dimodifikasi
117
26 Jenis huruf (font) perlu diganti agar tampilan lebih menarik. Buatlah class=sans kemudian atur properti dan value. .sans{font-family:'PT Sans Narrow'; texttransform: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; marginbottom: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; }
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=headlinespanel dan masukkan property dan value. .headlines-panel{color:#ffffff; font-weight:600; textalign: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. 119
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
120
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.
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
123
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
124
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
125
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. 126
/* Smartphones (portrait) ----------- */ @media only screen and (max-device-width :320px){} /* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width :321px) and (maxdevice-width :480px){} /* Smartphones (600 x 400)------ */ @media only screen and (min-device-width :481px) and (maxdevice-width :767px){} /* Smartphones (800 x 600)----- */ @media only screen and (min-device-width:768px) and (maxdevice-width:991px){} /* Desktop, Netbook and Tablet (minimal 1024 x 768)----- */ @media only screen and (min-device-width:992px) and (maxdevice-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
127
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
128
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-columncount: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). 129
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'; fontsize:110%;}
15. Lihat hasilnya di browser.
Gambar 7.45 Mengubah teks judul berita
130
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 157
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
158
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. 159
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,
160
`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,
161
`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
162
Pilih menu Insert.
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
163
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),
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
166
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', '
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.
', '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', '
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.
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.
2. Lakukan perintah SQL untuk menghubungkan ke database tersebut.
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. 168
Gambar 8.19 Membuat file untuk koneksi ke database
4. Ujilah melalui browser, ketikkan http://localhost/responsive/config/config_db.php.
alamat
URL
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
169
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. $limit){ for($i=0;$i<$limit;$i++){ @$str_s.=$ex_str[$i]." "; } RETURN $str_s; }ELSE{ RETURN $str; } }ELSE{ RETURN $str;
170
} } ?>
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.
171
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.
172
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.
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. 173
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
174
3. Sebelum melakukan query, sisipkan file koneksi dalam file index.php dengan perintah include. Letakkan kode php paling atas, setelah tag . Simpan file tersebut.
Gambar 8.26 Menyisipkan file lain dengan metode INCLUDE
8.3.1 Menampilkan Top Menu 1. Tambahkan sintaks php setelah tag
.
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.
3. Setelah berhasil memilih tabel kategori, ambil data array yang tersimpan dalam tabel tersebut.
175
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
dengan perintah echo untuk menampilkan data. //Konversi menjadi huruf kapital @$capcat = strtoupper($rcat[nama_kategori]); echo "
"; echo "
";
6. Letakkan variabel yang menyimpan data list nama kategori setelah tag
. //Konversi menjadi huruf kapital @$capcat = strtoupper($rcat[nama_kategori]); echo "
7. Sekarang buatlah variabel baru dan lakukan query untuk mengambil sub menu dari tabel submenu. $capcat<span class='caret'>"; $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 "
9. Berikut script lengkap untuk menampilkan top menu secara dinamis yang diambil dari tabel kategori dan sub kategori. $capcat<span class='caret'>"; $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 "
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.
3. Setelah berhasil memilih data array dari tabel berita, ambil data tersebut dan tampilkan. 178
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. 203
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
204
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). 205
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.
206
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.
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
208
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. 209
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.
6. Lihatlah hasilnya di browser, ketik http://localhost/responsive/adminweb/index.php.
alamat
URL
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 212
administrator atau file dashboard.php. Buatlah file baru dengan nama ceklogin.php yang posisinya sejajar dengan file index.php. Masukkan script berikut. <meta charset="utf-8"> Validasi <style type="text/css"> body { padding-bottom: 40px; } .sidebar-nav { padding: 9px 0; } 0){
$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 ""; echo "
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. 214
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. 215
Silakan memilih salah satu menu yang ada di sebeleh kiri untuk mengelola
"; } //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"; }
216
?>
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.
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
218
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. alert('Anda telah keluar dari halaman administrator'); window.location = '../adminweb/index.php'"; ?>
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 219
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.
220
//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 "
DAFTAR BERITA
NO
JUDUL
ISI BERITA
KATEGORI
TANGGAL POSTING
TANGGAL UPDATE
FITUR
STATUS
AKSI
221
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-webdesign-look-good.html (02-01-2014) [8] CSS Frameworks + CSS Reset: Design From Scratch (http://coding.smashingmagazine.com/2007/09/21/css-frameworkscss-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
[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-101adaptive-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-bestresponsive-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-differencebetween-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-thedifference-between-fixed-fluid-adaptive-and-responsive-webdesign-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/.
