Tag Archives: Desain Web

Buku Pemrograman Web untuk Pemula dan Akademisi

Buku Pintar Pemrograman Web ini merupakan salah satu buku saya yang paling banyak di kutip di google scholar dan menjadi buku laris di beberapa cabang Gramedia. Pada intinya buku pemrograman web ini berisi tiga pilar penting dalam pemrograman web yaitu HTML, PHP dan MySQL. Berikut saya ambil kutipan buku ini yang saya cuplik dari website penerbitnya yaitu mediakita.

Jika Anda ingin menjadi webmaster, WAJIB membaca buku ini! Di buku ini, Anda akan belajar semua hal tentang membuat sebuah website, baik statis maupun dinamis. Buku ini direkomendasikan bagi Anda yang ingin mempelajari pembuatan web dinamis. Mulai dari belajar HTML, PHP & MySQL, desain, komposisi warna, CSS, JavaScript, dan jQuery. Bukan hanya teori, di buku ini juga disertai penjelasan cara membuat web dinamis seperti blog dan shopping cart. Buku ini cocok bagi Anda yang ingin belajar ke tingkat lanjut pembuatan web desain, atau bagi Anda yang baru mulai belajar. Tidak percaya? Silakan buktikan sendiri!

Buku Pintar Pemrograman Web
Buku Pintar Pemrograman Web

Berbeda dengan buku saya sebelumnya yairu Cara Mudah Membuat Desain Web untuk Pemula yang membahas cara membuat website statis berbekal HTML saja, dalam buku pemrograman web ini fokus pembahasan adalah pada bagaimana cara membuat sebuah website yang dinamis. Pendekatan dalam buku ini agak berbeda dibanding buku-buku sejenis, karena saya mencoba menyampaikan hal yang paling penting terlebih dahulu di bagian awal buku ini yaitu bagaimana cara menghubungkan HTML, PHP dan MySQL. Setelah pembaca memahami konsepnya, maka baru dilanjutkan dengan materi detil dari masing-masing komponen pemrograman web tersebut.

Pendekatan lain adalah konsep pengulangan. Dengan mengadopsi prinsip tersebut, materi yang saya susun di buku tersebut, memberikan pengulangan berkali-kali untuk sebuah konsep penting dan menjadi basis pemahaman tentang cara membuat website dinamis agar lebih paham.

Apa konsep penting yang saya maksud?

Saya melakukan pengulangan materi secara bertahap dan makin mendalam terutama mengenai konsep hubungan HTML, PHP dan MySQL yang merupakan kunci utama dalam proses pembuatan web site.

Konsep hubungan HTML, PHP dan MySQL merupakan kunci utama dalam proses pembuatan web site.

Saya mengulangi penjelasan konsep tersebut paling tidak sebanyak 5 kali, dengan berbagai cara. Mulai dari materi berupa penjelasan singkat, proyek mini membuat guest book, tutorial teoritis dan 2 proyek lainnya.

Selain konsep penting tentang hubungan HTML, PHP dan MySQL tersebut, di bagian akhir buku tersebut ada tambahan materi tentang CSS, Javascript dan JQuery. Materi-materi ini akan membantu membuat website menjadi lebih indah dan interaktif.

Saya juga menuliskan konsep-konsep baru yang penting untuk Anda ketahui dalam bentuk catatan kecil s saat saya menjelaskan tentang konsep hubungan HTML, PHP dan MySQL. Dengan cara ini, maka pembaca bisa lebih fokus memahami konsep penting mana yang dibahas di tiap bab.

Terus terang saja, materi yang dicakup dalam buku tersebut sangat luas dan saya perlu menjelaskan terlebih dahulu tentang bagaimana pengaturan bab-bab yang ada dalam buku ini. Tujuan saya adalah agar anda lebih mudah memahami seluruh materi yang tersedia dan dapat mengambil manfaat yang maksimal dari  kekuatan teknik penulisan yang saya lakukan dalam buku ini.

Saya membagi buku tersebut menjadi 4 bagian yaitu:

Bagian 1, “Konsep Dasar dan Persiapan”, menyediakan penjelasan mengenai beberapa konsep dasar yang perlu anda ketahui terkait dengan bagaimana proses sebuah halaman web dapat muncul ke browser serta persiapan praktik yang akan anda lakukan pada bagian-bagian berikutnya. Dalam bab ini anda akan mengenal mulai diperkenalkan dengan konsep hubungan dan fungsi PHP, HTML dan MySQL dalam sebuah pembuatan website. Di akhir bagian 1 ini, anda juga akan mendapat pengalaman awal tentang bagaimana implementasi konsep HTML, PHP dan MySQL tersebut dalam sebuah proyek sederhana membuat guestbook. Pengalaman awal ini akan bermanfaat bagi anda untuk mulai berkenalan langsung dengan proses pembuatan website dalam tahap yang sederhana.

Bagian 2, “The Basic HTML, PHP dan MySQL”, memberikan berbagai macam tutorial dasar tentang HTML, PHP dan MySQL. Tutorial ini akan memberikan gambaran yang lengkap mengenai berbagai macam tag dan perintah ketiga teknologi tersebut sebagai bekal bagi anda untuk lebih memahami apa yang dapat dilakukan oleh masing-masing teknologi tersebut. Sebagai penutup bagian ini, anda akan mendapatkan sebuah proyek yang sedikit lebih kompleks untuk lebih memperdalam pemahaman anda tentang bagaimana peranan HTML, PHP dan MySQL dalam membuat sebuah blog sederhana. Anda akan dituntun secara bertahap untuk memahami proses penerimaan data menggunakan form HTML, menerimanya dengan PHP dan menyimpan data tersebut dalam database MySQL. Selain itu anda akan memahami juga bagaiman cara mengambil data tersebut dan menampilkannya kembali melalui halaman web.

Bagian 3, “Tambahkan Bumbu dengan CSS, Javascript dan jQuery”, akan memberikan tutorial yang bertujuan untuk menambah fleksibilitas, tampilan dan interaktivitas website anda. Materi CSS, Javascript dan jQuery di bahas secara mendalam disertai contoh-contoh untuk membantu pemahaman anda. Pada akhir bagian 3 ini, sekali lagi anda akan mendapatkan tutorial yang akan memanfaatkan semua pengetahuan yang sudah anda peroleh sampai tahap ini yaitu membuat aplikasi shopping cart menggunakan CSS, PHP, jQuery dan MySQL. Ini merupakan akhir perjalanan anda bersama buku ini dalam mempelajari berbagai teknologi pendukung proses membuat website.

Bagian 4, “Desain Web, Domain dan Hosting”, berisi materi terkait proses development website termasuk bagaimana menentukan warna yang tepat untuk website anda. Di bagian akhir, anda akan mendapatkan semua informasi penting yang diperlukan untuk membuat website anda online dan bisa diakses semua orang. Informasi tersebut meliputi tentang bagaimana cara menyewa domain, hosting, proses upload file, pembuatan database di server dan berbagai tips untuk memilih hosting dan domain yang baik.

Buku Pintar Pemrograman Web tersebut tersedia di Gramedia dan website toko online penerbitnya di sini.

Mobilegeddon, Pukulan Telak bagi Situs Web yang Tidak Mobile-Friendly

Contoh Mobile Friendly Website

Trafik pengunjung situs web Anda tiba-tiba menurun dengan signifikan? Waspadai, bisa jadi ini merupakan dampak dari update Mobilegeddon pada mesin pencari Google. Perubahan algoritma dari google ini juga sering saya sampaikan pada saat saya menjadi pembicara digital marketing di manapun

Pada tanggal 21 April 2015, Google mengimplementasikan algoritma baru yang cukup signifikan. Algoritma baru ini berfungsi untuk mengatur ulang peringkat dari situs web yang ramah perangkat mobile (mobile-friendly). Dengan kata lain, tujuan utama dari algoritma baru ini adalah menaikkan peringkat hasil pencarian dari situs web yang mobile-friendly.

Perubahan tersebut berjalan sekitar seminggu dan memiliki sebutan yang dramatis karena dampaknya yang besar pada hasil pencarian. Sebagian ada yang menyebutnya mobilegeddon atau mobilepocalyse karena seolah-olah menjadi kiamat bagi situs web yang tidak mobile-friendly alias mobilegeddon. 

Salah satu alasan perlunya perubahan algoritma ini adalah karena proporsi penggunaan perangkat mobile dibandingkan penggunaan komputer untuk melakukan pencarian sudah semakin besar. Dalam blog resminya di adwords.blogspot.com, Google menyatakan bahwa saat ini pengguna internet semakin banyak yang menggunakan smartphone mereka untuk melakukan search. Bahkan pencarian menggunakan perangkat mobile tersebut sudah lebih banyak dilakukan dibandingkan komputer di 10 negara termasuk Jepang dan Amerika.

Perkembangan jumlah pengguna smartphone ini tentu saja harus diantisipasi oleh pemilik situs web. Pertanyaannya adalah apakah tidak cukup bagi pemilik situs web untuk menyajikan versi desktop saja dari halaman yang mereka miliki? Untuk menjawab pertanyaan itu, kita perlu membahas lebih dulu mengapa situs web harus dijadikan mobile-friendly.

Sebagaimana kita ketahui bersama, smartphone yang tersedia saat ini sudah memiliki kemampuan yang luar biasa dalam menampilkan berbagai jenis situs web. Namun demikian, coba bayangkan ketika pengunjung melihat situs web Anda di perangkat mobile. Apa yang terjadi? Dapatkah pengguna membaca halaman yang ada di situs web Anda dan menemukan informasi yang diperlukan dengan mudah, ataukah halaman web tersebut terlalu sulit untuk digunakan dan dilihat?

Versi desktop dari situs web Anda memang bisa dilihat menggunakan browser yang ada pada smartphone, namun demikian mungkin sulit untuk dilihat dan digunakan di perangkat seluler tersebut. Versi situs web  yang tidak mobile-friendly akan membuat pengguna dipaksa untuk memperkecil atau memperbesar situs web dengan jarinya agar dapat memahami layout sebuah halaman web dan membaca isinya. Hal tersebut berpotensi membuat pengunjung situs web menjadi kurang nyaman dan cenderung meninggalkan situs. Di sinilah perlunya versi mobile-friendly dari sebuah situs web. Versi mobile-friendly akan dapat dibaca dan digunakan secara langsung dengan nyaman dan mudah.

Mengingat banyaknya pengguna mesin pencari yang menggunakan smartphone mereka untuk melakukan pencarian, maka kompatibilitas dengan perangkat mobile menjadi sangat penting bagi bisnis Anda. Tidak peduli apakah Anda hanya menulis blog tentang resep masakan, mengelola situs web untuk komunitas sepeda, atau menjual produk kepada calon pelanggan, Anda harus memastikan bahwa pengunjung akan mendapat pengalaman yang baik di situs web Anda saat mengunjunginya dari perangkat mobile mereka.

Hal yang sama juga dirasakan oleh Google sebagai mesin pencari. Google berkepentingan untuk memastikan bahwa pengguna mesin pencari akan memperoleh hasil pencarian yang sesuai dengan kebutuhan mereka, termasuk situs web yang dapat menampilkan informasi sesuai dengan hardware yang mereka gunakan.

Baiklah, sekarang kita semua sudah mengerti mengapa versi mobile dari sebuah situs web penting dibuat dan latar belakang di balik implementasi algoritma mobilegeddon Google tersebut. Pertanyaan berikutnya adalah, apa yang harus Anda lakukan untuk mengatasi masalah ini?

Pertama yang harus Anda lakukan adalah memastikan apakah situs web Anda mengalami dampak dari Mobilegeddon atau tidak. Ada 3 cara untuk melakukannya yaitu:

  • Mencoba melakukan search untuk kata kunci yang menjadi sumber utama pengunjung situs web kita dari perangkat PC dan smartphone (selain tablet). Bandingkan hasilnya, jika terdapat perbedaan signifikan posisi hasil pencarian dari kedua perangkat itu, maka kemungkinan besar situs web kita mengalami dampak dari Mobilegeddon.
  • Cara lain adalah dengan menggunakan laporan dati Google Analytics. Silakan lihat di menu Pelaporan à Pemirsa à Seluer à Perangkat. Jika terdapat penurunan yang signifikan dan tiba-tiba sejak tanggal peluncuran mobile update Google dari pengunjung yang datang dari seluler, maka ini juga merupakan pertanda bahwa situs web Anda terkena dampak dari Mobilegeddon.
  • Selain kedua cara tersebut, Anda bisa menggunakan tools analisis online dari Google untuk melihat kompatibilitas situs web Anda terhadap perangkat mobile. Tools Pengujian Situs Mobile-Friendly tersebut dapat dilihat di link berikut ini https://www.google.com/webmasters/tools/mobile-friendly/.  Masukkan nama domain dari Situs web yang Anda miliki dan perhatikan hasil analisis. Jika hasilnya menyebutkan hal berikut ini “Mengagumkan! Laman ini mobile-friendly.” maka, selamat, situs web Anda sudah mobile friendly dalam pandangan Google.

Namun demikian, apabila ternyata situs web Anda belum mobile friendly, maka Anda dapat melakukan beberapa hal untuk mengatasinya. Jika kebetulan situs web Anda menggunakan CMS (Content Management System) atau perangkat lunak pihak ketiga lainnya, maka Anda bisa menggunakan setting, plugin atau extension yang tersedia untuk mengatasi masalah kompatibilitas mobile ini. Contoh solusi yang ada adalah sebagai berikut:

  • Blogger. Silakan masuk ke menu Layout, kemudian klik menu setting di bawah Mobile. Pastikan bahwa Anda melakukan ceklis pada “Yes. Show mobile template on mobile devices”.
  • WordPress.com. Secara umum WordPress.com sudah mendukung mobil- friendly. Untuk memastikannya, silakan masuk ke menu Appearance à Mobile pada dashboard, dan pastikan bahwa terdapat ceklis pada pilihan Yes pada “Enable mobile theme”.
  • CMS WordPress. Anda bisa melakukan penyesuaian dengan cepat menggunakan plugin Jetpack atau WPTouch.
  • CMS Joomla. Anda bisa menggunakan extension untuk mengatasi masalah kompatibilitas mobile-friendly ini. Silakan kunjungi halaman extension mobile Joomla ini http://extensions.joomla.org/category/mobile untuk memilih extension yang cocok dengan situs web Anda.
  • Silakan kunjungi halaman ini untuk melihat solusi bagi CMS lainnya https://developers.google.com/webmasters/mobile-sites/situs web-software/?hl=id.

Sayangnya, jika Anda mengembangkan situs web Anda sendiri, maka Anda harus menyesuaikan desain situs web Anda secara manual agar menjadi responsif. Jika kesulitan, maka Anda bisa memanfaatkan jasa web developer. Pastikan bahwa developer yang Anda pilih memahami tentang desain responsif. Oh ya, jangan lupa untuk melakukan pengecekan ulang setelah modifikasi untuk memastikan bahwa situs web Anda sudah mobile-friendly. Semoga bermanfaat.

Buku Cara Mudah Membuat Desain Web untuk Pemula

Buku ini adalah buku pertama saya yang diterbitkan pada tahun 2010. Buku setebal 134 halaman ini diterbitkan oleh mediakita Jakarta. Pada prinsipnya saya menulis buku ini sebagai panduan untuk pemula dalam membuat website yang statis. Sehingga buku ini lebih fokus pada pengenalan desain web menggunakan HTML.

Berikut ini adalah cuplikan deskripsi buku yang saya ambil dari web penerbitnya.

Cara Mudah Membuat Desain Web untuk Pemula
Cara Mudah Membuat Desain Web untuk Pemula

Desain web yang unik dan menarik akan membuat para pengunjung betah melihat website kita. Untuk mewujudkan hal tersebut, Anda bisa saja menggunakan template desain gratis yang tersedia banyak di internet. Namun, hal ini akan terasa menjadi tidak unik lagi karena akan ada banyak orang yang menggunakan template serupa. Dan tentunya, bisa saja template yang Anda gunakan tidak sesuai dengan keinginan Anda. Lalu, bagaimana caranya untuk mengatasi hal ini? Mulai sekarang, Anda bisa membuat desain web sendiri dengan mengikuti langkah demi langkah yang ada di buku ini.

Anda akan dituntun mulai dari membuat pola desain sebuah website, memecahnya menjadi kode-kode HTML dan CSS, sampai memublikasikannya ke hosting gratisan.

Untuk memudahkan belajar, buku ini juga disertai CD yang berisi software pembuat desain website, serta puluhan template website yang bisa dimodifikasi sesuai tema website Anda.

Buku cara mudah membuat desain web untuk pemula ini saat ini sudah dikutip sebanyak 18 kali jika melihat data dari Google Scholar.

Jika anda tertarik untuk melihat sebagian isi buku ini silakan baca dulu di google book. Meskipun saat ini sudah tidak tersedia lagi versi print nya, namun buku ini masih bisa anda peroleh di Google Play Book. Silakan klik link ini jika tertarik untuk membelinya.

Salam hangat.