Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql

Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql

Apa itu Bootstrap

“Sleek, intuitive, and powerful front-end framework for faster and easier web development.”

“Sebuah Framework yang manis, intuitif dan powerfull untuk pengembangan web yang lebih cepat dan lebih mudah”.

“By nerds, for nerds.” Dari kutu buku, untuk kutu buku.

Bootstrap adalah sebuah Framework yang dikembangkan di Twitter oleh @mdo dan @fat, Bootstrap menggunakan LESS CSS, yang di-compile via Node, dan dikelola melalui GitHub untuk membantu nerds membangun web yang keren.

Sekilas tentang Bootstrap Creator : @mdo (Mark Otto) dan @fat (Jacob) adalah desainer dan programmer Twitter yang membuat dan mengembangkan Bootstrap.

Sekilas Less CSS

LESS adalah preprosesor CSS yang memberikan sentuhan dinamis kepada CSS dengan fitur variabel, mixin, serta operasi dan fungsi yang dimilikinnya. Tujuan dibuatnya LESS sendiri adalah untuk memberikan kemudahan dan keringkasan dalam membangun tampilan website yang menggunakan CSS. Proses kompilasi LESS menjadi CSS dapat berjalan baik di sisi klien dengan javascript maupun di sisi server dengan bantuan Node.js dan Rhino. Berkas LESS yang memiliki format *.less dan akan diubah menjadi file berformat CSS oleh file javascript less.js pada sisi klien atau melalui kompilasi pada sisi server.

Sekilas Node atau Node.js

Node.js adalah sebuah platform software yang dipakai untuk membangun aplikasi – aplikasi serverside yang fleksibel di sebuah network / jaringan. Node.js menggunakan JavaScript sebagai bahasa pemrogaman dan dapat dengan mudah menghasilkan throughput / pemrosesan tingkat tinggi melalui non-blocking I/O. Node.js memiliki fitur built-in HTTP server library yang menjadikannya mampu menjadi sebuah web server tanpa bantuan software lainnya seperti Apache atau Nginx.

Node.js pertama kali dibuat oleh Ryan Dahl pada tahun 2009 yang kemudian berkembang pesat di bawah licensi Open Source MIT oleh sebuah perusahaan bernama Joyent Inc.

Pada hakekatnya Node.js dikembangkan berdasarkan teknologi Google V8 JavaScript engine serta berisi kompilasi skrip inti dan banyak modul siap pakai yang bermanfaat sehingga pengguna (dalam hal ini web developer) tidak perlu melakukan coding dan mendesain segalanya dari awal.

Jadi, apa sebenarnya isi dari software Node.js itu? Pada dasarnya Node.js adalah 2 hal: sebuah runtime environment dan script library.

Sebuah runtime environment adalah sebuah software yang berfungsi untuk mengeksekusi, menjalankan dan mengimplementasikan fungsi – fungsi dan cara kerja inti dari suatu bahasa pemrograman. Contoh: Agar sebuah server bisa mengeksekusi script PHP maka harus terlebih dulu diinstall PHP runtime environment-nya. Mungkin anda sudah pernah dengar LAMP (Linux, Apache, MySQL dan PHP). Begitu pula Node.js. Agar sebuah server bisa mengeksekusi script JS, maka terlebih dahulu harus diinstall Node.js sebagai runtime environment untuk JavaScript.

Sedangkan Script Library adalah kumpulan, kompilasi atau bank data berisi skrip / kode – kode pemrogaman.

Alasan kita menggunakan Bootstrap

OpenSource, bebas untuk dikembangkan oleh siapapun. Banyak referensi desain dari pengambang – pengembang Bootstrap lainnya.

Desain Responsive untuk Desktop, Tablet, dan Smartpone. Jadi pengembang web hanya perlu membuat 1 buah website saja yang ketika dibuka di Desktop, Tablet, dan Smartpone tampilannya akan luar biasa responsive berbeda dengan website biasanya.

Bootstrap menawarkan kecepatan dan kemudahan pengembangan website. Modifikasi desain tanpa batasan, kita dapat memanipulasi atau menambahkan CSS dan javascript untuk mempercantik website kita.

Jadi dapat dikatakan bahwa Bootstrap ini adalah framework yang berisi kumpulan CSS, JavaScript, Font, icon dan bagaimana cara menggunakannya dengan aturan – aturan khas sebuah Framework.

Memulai Bootstrap

Bootstrap sendiri telah berkembang kedalam beberapa versi, sepengetahuan saya sudah versi 3.0.3 (mungkin sudah ada versi terbarunya) namun pada kali ini ..

 

 

1 Comment

Add a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.