MENGENAL FRAMEWORK BOOTSTRAP

Pada pemebahasan sebelumnya, kita telah mengenal macam-macam framework. Salah satu framework adalah bootstrap. Bootstrap sendiri adalah sebuah framework CSS dari twitter yang menyediakan komponen-komponen antar muka siap pakai dan telah dirancang sedemikian rupa untuk keperluan desain halaman website yang artistic.

Selain komponen-komponen dasar untuk membangun antar muka. Bootstrap juga menyediakan grid 12 kolom yang dapat menunjang kinerja anda dalam mendesain layout yang rapi. Sebagai CSS Framework, bootstrap tergolong paket lengkap.Tekhnologi Html, Css dan JavaScript yang ada pada Bootstrap. Kita tidak hanya dapat melakukan styling dengan CSS saja, akan tetapianda juga dapat menggunakan komponen-komponen seperti icon, tombol dan navigasidengan desain unik khas bootstrap. Selain itu, tersedia banyak Plugin JQuery yang dapat membantu kita untuk membuat tampilan website yang lebih atraktif.

Framework Bootstrap dibangun menggunakan Less, yaitu sebuah preprocessor dengan fungsi tambahan seperti variable, mixin, dan fungsi untuk mengompilasi CSS. Fitur-fitur yang ditawarkan bootstrap dapat membuat sang developer Bootstrap kaya jika dia berorientasi dengan uang. Framework ini seharusnya layak untuk menjadi framework berbayar, mengingat fitur-fitur yang ditawarkan sangat lengkap. Kenyataanya, framework ini justru tersedia gratis, yaitu dengan menggunakan lisensi MIT. MIT merupaan lisensi open source, dimana semua kalangan bebas menggunakan framework ini secara gratis tanpa takut terkena masalah legalitas.

Baca juga artikel lainnya : Mengenal Framework Bootstrap Cara Menerapkan Bootstrap Pada Website Grid / Pembagian kolom Pada Bootstrap

MENDOWNLOAD BOOTSTRAP

Framework Bootstrap dapat anda download secara gratis di alamat http://getbootstrap.com/, saat anda mengklik tombol download, maka anda akan diberikan 3 pilihan metode download seperti berikut :

• Download Bootstrap : berisi file CSS, JavaScript, dan font yang telah dikompilasi. Tidak ada dokumen atau file asli yang disertakan.
• Download Source : pilihan ini berisi JavaScript, Font, Dokumen asli Bootstrap dan Source dari Less yang merupakan preprocessor untuk membangun framework bootstrap. Tetapipillihan ini membutuhkan sebuah Less compiler dan beberapa pengaturan.
• Download Sass : berisi file bootstrap yang telah di-porting dari Less ke Sass supaya mudah dimasukkan ke dalam rails, Compass, atau Sass itu sendiri.

Berdasarkan ketiga pilihan download, anda pilih Download Bootstrap, karena file tersebut telah dikompilasi dan siap untuk digunakan. Pilihan ini membuat anda tidak perlu ragu lagi memikirkan apa itu Preprocessor CSS, cara mengompilasi, dan lain sebagainya. Anda cukup mengerti sedikit tentang CSS dan anda dapat memulai menggunakan Bootstrap.

Bootstrap termasuk Framework yang rajiin update. Saat penulisan, Bootstrap yang didownload pada awal Januari 2017, Bootstrap telah merilis versi 3.3.7. untuk mengikuti perkembangan Bootstrap, anda dapat men-follow Twitternya di @twbootstrap.

FITUR

Pada Bootstrap versi 3 terdapat banyak perubahanyang menarik, fitur baru dan telahsepenunhya diperbarui untuk memenuhi tren webterbaru dan kebutuhan pengguna.

MOBILE-FIRST APPROACH

Pada versi 3, bootstrap mengikuti pendekatan mobiledan membuat situs anda selalu responsive secara default. Bootstrap didesain ulang dan dibangun kembali mulai dari perangkat mobile anda dan perangkat dengan skala diatasnya. File CSS responsive tidak lagi terpisah dan semua fitur responsive sekarang termasuk kedalam file utama. Jika anda tidak menginginkan situs responsive, anda dapat mematikan fitur ini dengan menambahkan beberapa CSS ekstra. Anda dapat menemukan cara untuk melakukan hal ini di dokumentasi bootstrap yang disertai contoh untuk menonaktifkan fitur adaptif atau responsive.

STRUKTUR FILE BOOTSTRAP

Jka Bootstrap telah selesai di download, anda eksstrak file tersebut. Berikut ini susunan atau struktur file pada bootstrap :

Pada folder CSS terdapat empat file CSS sebagai berikut :

• Boostrap.css, adalah file CSS utamayang harus dissertakan dalam halaman HTML yang anda buat. Banyaknya komentar/ keterangan di dalam baris kode pada file tersebut membuat Bootstrap sangat tepat digunakan untuk keperluan development.
• Boostrap.min.css, adalah hasil minify/kompres dari boostrap.css. ukuran file ini lebih kecil. File ini digunakan jika desain situs yang anda buat untuk online.
• Bootstrap-theme.css; diibaratkan sebuah kebutuhan sekunder. Anda boleh tidak menyertakan pada file HTML. Fungsi file ini untuk memberikan efek 3D pada tombol dan beberapa elemen lainnya.
• Bootstrap-theme.min.css, adalah file CSS hasil minify dari Bootstrap.css. file ini digunakan jika desain situs yang anda buat untuk online.

Di dalam folder js, terdapat dua file sebagai berikut :

• Bootstrap.js, adalah library JavaScript untuk memberikan efek seperti modal, dropdown, scrollspy, dan lain sebagainya.
• Bootstrap.min.js, digunakan sebagai pengganti bootstrap.js jika situs yang anda buat untuk online.

Terakhir, yang menjadi pembeda pada versi sebelumnya adalah folder fonts. Folder ini berisi ikon gambar/glyphicon. Beralihnya ikon dari gambar datar ke font ini akan mempercepat performa website, karena karakter font memakan bandwidth yang lebih sedikit jika dibandingkan gambar datar.

Artikel Terkait : Penggunaan Grid Untuk Perangkat handphone Penggunaan Grid Untuk Perangkat Tablet dan desktop Penggunaan Grid Untuk Perangkat handphone, Tablet dan Desktop Membuat Nesting Column/ Kolom di dalam kolom

Sekian dan semoga Bermanfaat ...

DAFTAR KOMPONEN BOOTSTRAP

Selamat datang buat teman-teman yang tlah mampir di blog ini dan terima kasih. jadi ini merupakan artikel terbaru setelah sebelumnya selama 3 minggu tidak buat artikel, maklum urus tugasyang lagi numpuk. Okey, kita langsung saja ke pembahasan.

Di dalam bootstrap terdapat 3 komponen yang dapat kita gunakan untuk mendesain halaman, yaitu komponen CSS, komponen dasar (Base Component), dan javascript.

Komponen Css

Komponen css berisi pengaturan global CSS, elemen dasar HTML yang telah diberi style, dan grid system 12 kolom yang dapat anda gunakan sebagai perangkat bantu untuk merancang layout. Berikut adalah komponen-komponen CSS yang terdapat pada framework Bootstrap :

• Grid System
  Sepertiyang telah kita bahas pada artikel sebelumnya, Grid system berfungsi untuk membuat layout halaman melalui serangkaian baris dan kolom. Pada bootstrap, grid system yang digunakan adalah 12 kolom.
  
  


• Tipografi
  Berisi pengaturan dan style font seperti heading, bold, italic, dan lain sebagainya.


• Tabel
  Dengan kompnen tabel yang telah diberi style oleh bootstrap, menjadikan data yang ditampilkan lebih menarik.
  
  

Baca juga artikel lainnya : Mengenal Framework Bootstrap Cara Menerapkan Bootstrap Pada Website Grid / Pembagian kolom Pada Bootstrap



• Form
  Anda tidak perlu lagi mengatur style pada elemen form, karena bootstrap telah menyediakan form yang telah diberi style.
  
  


• Button
  Dengan berbagai warna dan ukuran, menjadikan user senang berinteraksi dengan website anda. Warna akan membuat pengunjung tidak cepat bosan.
  
  


• Images
  Merupakan gambar dengan beberapa pilihan bentuk bingkai.
  
  

Komponen Dasar

Bootstrap juga menyediakan komponen-komponen dasar yang asli dan khas framework Bootstrap. Tampilan khas ala Twitter dari Bootstrap akan menambah nilai seni pada tampilan situs anda. Berikut adalah komponen-komponenn dasar yang tersedia di dalam framework bootstrap :

• Glyphicon
• Dropdown
• Button Group
• Button Dropdown
• Input Group
• Navs
• Navbar
• Breadcrumbs
• Pagination
• Label
• Badge
• Jumbroton
• Page Header
• Thumbnails
• Alerts
• Progress Bar
• Panels
• Responsive Embed

Komponen Javascript

Selain komponen CSS dan komponen dasar, Bootstrap juga menyediakan banyak pilihan plugin jQuery yang dapat memberikan efek animasi pada komponen Bootstrap. Hal ini akan membuat website anda menjadi lebih hidup. Komponen javascript pada Bootstrap sebagai berikut :

• Transitions
• Modal
• Dropdown
• Scrollspy
• Tab
• Tooltip
• Popover
• Alert
• Button
• Collapse
• Carousel
• Affix

Setelah mengetahui komponen apa saja yang terdapat pada bootstrap, kita mengharapkan mampu memahami dari setiap pemanggilan komponen tersebut. Sehingga jika kita ingin melakukan suatu modifikasi terhadap suatu tampilan, maka kita harus mengubah script didalam komponen tersebut.

Artikel Terkait : Penggunaan Grid Untuk Perangkat handphone Penggunaan Grid Untuk Perangkat Tablet dan desktop Penggunaan Grid Untuk Perangkat handphone, Tablet dan Desktop Membuat Nesting Column/ Kolom di dalam kolom

Sekian dan semoga Bermanfaat ...

CARA MENGGUNAKAN BOOTSTRAP

Selamat datang buat teman-teman dan terima kasih. Disini kita akan membahas bagaimana cara mengimplementasikan bootstrap ke dalam suatu website. Dengan menggunakan berbagai fitur atau properti class yang telah disediakan di dalam bootstrap baik itu CSS ataupun JavaScirptnya.

Pada pembahasan sebelumnya, kita diarahkan untuk mendownload Bootstrap, kemudian anda ekstrak file Bootstrap, yaitu bootstrap-3.3.7. Salin folder tersebut dan masukkan ke dalam folder proyek yangakan kita buat. Sebagai contoh, masukkan folder tersebut ke dalam direktori C:/xampp/htdoct/latihan. Susunan folder akan seperti gambar di bawah :

Untuk percobaan, anda buat dokumen HTML sederhana seperti gambar dibawah ini :

Baca juga artikel lainnya : Mengenal Framework Bootstrap Cara Menerapkan Bootstrap Pada Website Grid / Pembagian kolom Pada Bootstrap

Jika anda tampilkan pada browser, hasilnya akan seperti gambar berikut :

Anda panggil style CSS Bootstrap dan ketikkan '<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">' diantara tag '<head> & </head>'. Jika susunan direktori dan markup HTML yang akan diketikkan benar, hasilnya akan seperti gambar di bawah :

Silahkan lanjutkan dengan materi selanjutnya :

• Grid pada Bootstrap
• Tipografi pada Bootstrap
• Penggunaan Bootstrap untuk Tabel
• Penggunaan Bootstrap untuk Form
• Penggunaan Bootstrap untuk Button
• Penggunaan Bootstrap untuk Image
• Helper Class dan Komponen Dasar Bootstrap
• Plugin JavaScript pada Bootstrap

Artikel Terkait : Penggunaan Grid Untuk Perangkat handphone Penggunaan Grid Untuk Perangkat Tablet dan desktop Penggunaan Grid Untuk Perangkat handphone, Tablet dan Desktop Membuat Nesting Column/ Kolom di dalam kolom

Sekian artikel kali ini, silahkan lanjut ke materi selanjutnya dan budayakan berbagi dan semoga Bermanfaat ...

RESPONSIVE WEB DESIGN

Pertengahan tahun 2010 lalu, desain web yang responsive popular pada saat itu. Ethan Marcotte menulis pada artikel Design Web Responsive pada website alistapart.com. pada artikel tersebut, dia mengusulkan bagaimana sebuah desain web bisa menyesuaikan sendiri ukuran tampilannya pada device yang digunakan. Baik itu dari perangkat Mobile atau Desktop yang secara Fleksibel tanpa harus membuat dua desain untuk device atau perangkat yang berbeda dengan konten yang isinya sama. dari permasalahan itulah maka lahirlah konsep Responsive Web Design yang lebih fleksibel dan bisa beradaptasi hampir disemua layar berbeda.

Responsive Web Design lahir dari hasil pengembangan pada fitur CSS terbaru yaitu CSS3 yang memiliki dukungan penuh untuk mengatasi berbagai resolusi pada layar dengan teknik terbaru yang diberi nama Media Queries. 3 unsur inti yang harus ada pada Responsive Web Design agar bisa bekerja dengan baik, yaitu pada Flexible Grids,Fluid Images dan Media queries.dengan ketiga unsur ini diharapkan desain web bisa beradaptasi terhadap berbagai jenis device atau perangkat yang digunakan dengan berbagai layar yang berbeda, dengan Responsive Web Design semua bisa dikontrol hanya dalam satu desain saja.

Jadi, responsive web design adalah desain web yang mampu menyesuaikan tampilannya terhadap device yang digunakan dan memfokuskan pada penyediaan user experience secara optimal pada sebuah situs. Hal ini tentu mempengaruhi layout website tersebut secara eksklusif dan dapat mempengaruhi apa yang ditampilkan pada perangkat tertentu, seperti di ponsel, atau di perangkat yang memiliki layar sentuh.

Responsive web design dibuat karena merupakan solusi yang efektif. Karena mengingat penggunaan smartphone dan kecepatan internet yang semakin meningkat seiring waktu. Jika kita membandingkan dengan situs mobile, mereka sangat sulit dalam segi maintenance & development, dimana jika kita membangun dua versi untuk satu website yaitu versi desktop dan versi mobile, berarti seorang programmer harus mengoptimasi dua sistem sekaligus, walaupun sistem itu bisa dijadikan satu namun tetap akan memakan lebih banyak waktu dan tenaga bahkan sumber daya untuk mengelola dan mengopsimasi keduanya. Maka dari itu responsive design web merpakan sebuah solusi dalam mengoptimalkan waktu, biaya dan tenaga.

Baca juga artikel lainnya : Mengenal Framework Bootstrap Cara Menerapkan Bootstrap Pada Website Grid / Pembagian kolom Pada Bootstrap

desain web responsif menjadi aturan/standar web masa kini. maka perlu melakukan pendekatan mobile-first untuk mendesain suatu web. Dalam pembuatan responsive design web menggunakan beberapa metode dan teknik yang berbeda untuk mencapai tujuan yaitu user experience yang optimal untuk website versi mobile. Desain web yang mobile friendly sekarang merupakan bagian yang sangat penting dari situs website apapun. Jadi jangan ragu untuk memilih opsi Responsive Web Design untuk website versi mobile pada website anda.

Anda tidak perlu menghafal semua tag tersebut, nanti malah kepala anda malah pecah!. Cukup hafalkan yang penting-penting saja seperti <table> <input> <ul>. Tidak hafal pun tidak apa-apa kan kita bisa melihat daftar kalau lupa, yang penting kita paham, BETUL?.

Artikel Terkait : Penggunaan Grid Untuk Perangkat handphone Penggunaan Grid Untuk Perangkat Tablet dan desktop Penggunaan Grid Untuk Perangkat handphone, Tablet dan Desktop Membuat Nesting Column/ Kolom di dalam kolom Offset Kolom (Menggeser Kolom) Nesting Kolom (Kolom Di dalam Kolom) Mengurutkan Kolom

Okey, buat teman-teman klau ada yang kurang dipahami silahkan komentar baik mengenai artikel ini atau mengenai masalah web. Insya allah kami siap membantu. Selamat berjuang dan semoga ilmunya tersampaikan ...

Sekian dan semoga Bermanfaat ...

TIPOGRAFI PADA BOOSTRAP - TRANSFORMASI TEXT

HTML memang tidak menyediakan tag atau atribut untuk melakukan transformasi teks. Salah satu tindakan yang dapat anda lakukan adalah melalui property CSS text-transform seperti gambar di bawah ini:

Baca juga artikel Terkait: Penggunaan Heading Pada Bootstrap Penerapan Body Copy Leadbody Copy Text Formating Mengatur Aligment Transformasi Text Memberi keterangan pada text Menuliskan alamat Menuliskan kode Penerapan Blockquote Membuat List

Pada Bootstrap, transformasi teks menjadi lebih praktis. Hal ini karena anda tidakperlu menuliskan kode CSS, anda cukup memanggil class transformasi teks seperti: .teks-lowercase, .text-uppercase, dan .text-capitalize yang ada di bootstrap untukmelakukan transformasi teks pada gambar di bawah ini adalah contoh transformasi teks menggunakan Bootstrap.

Baca lainnya, beberapa penggunaan atau penerapan tipografi pada bootstrap:

Artikel Terkait : Penggunaan Grid Untuk Perangkat handphone Penggunaan Grid Untuk Perangkat Tablet dan desktop Penggunaan Grid Untuk Perangkat handphone, Tablet dan Desktop Membuat Nesting Column/ Kolom di dalam kolom Offset Kolom (Menggeser Kolom) Nesting Kolom (Kolom Di dalam Kolom) Mengurutkan Kolom

Sekian artikel kali ini, silahkan lanjut ke materi selanjutnya dan budayakan berbagi dan semoga Bermanfaat ...

TIPOGRAFI PADA BOOSTRAP - BLOCKQUOTE

Style tipografi ini berfungsi untuk mendefinisikan sebuah kutipan panjang. Bootstrap untuk versi 3 memiliki 2 jenis style blockquote, yaitu default blockquote dan blockquote reverse. Untuk lebih jelas mengenai implementasi blockquote dengan CSS bootstrap.

DEFAULT BLOCKQUOTE

Pada pembahasan ini, style default blockqoute tidak ada penambahan class. Cara penggunaan default blockquote sama seperti perintah HTML biasa, yaitu menggunakan tag <blockquote>. Berikut contoh penulisan kode HTML default blockquote:

Script Blockquote Default

Script Blockquote Default

Baca juga artikel Terkait: Penggunaan Heading Pada Bootstrap Penerapan Body Copy Leadbody Copy Text Formating Mengatur Aligment Transformasi Text Memberi keterangan pada text Menuliskan alamat Menuliskan kode Penerapan Blockquote Membuat List

BLOCKQUOTE REVERSE

Pada Bootstrap, tidak hanya teks biasa atau elemen paragraph saja yang dapat diatur aligment-nya. Class .blockquote-reverse akan memberikan efek terbalik pada blockquote. Blockquote yang secara default rata kiri, dengan class ini, akan berubah menjadi rata kanan. Berikut contoh penggunaan blockquote reverse:

Script Blockquote Reserve

Tampilan Blockquote Reserve

Memberi Source pada Blockquote

Sebuah Quote biasanya memuat sebuah keterangan mengenai pengarang dan judul karyanya. Untuk memberikan keterangan mengenai pengarang, anda dapat menggunakan tag . Berikut contoh pemberian source pada blockquote:

Script Memberi Source Pada Blockquote

Tampilan Source Pada Blockquote

Artikel Terkait : Penggunaan Grid Untuk Perangkat handphone Penggunaan Grid Untuk Perangkat Tablet dan desktop Penggunaan Grid Untuk Perangkat handphone, Tablet dan Desktop Membuat Nesting Column/ Kolom di dalam kolom Offset Kolom (Menggeser Kolom) Nesting Kolom (Kolom Di dalam Kolom) Mengurutkan Kolom

Sekian artikel kali ini, silahkan lanjut ke materi selanjutnya dan budayakan berbagi dan semoga Bermanfaat ...

PERSIAPAN DALAM MENJALANKAN PHP

Jadi buat teman-teman yang ingin memulai bekerja dengan PHP, ada beberapa hal yang sebelumnya harus terpenuhi sebelum kita mulai. Jadi beberapa hal tersebut merupakan aplikasi yang harus terpasang sebelum kita memulai dan kita sudah paham sebelumnya mengenai HTML. Jadi buat teman-teman yang belum atau tidak melengkapi syarat-syarat di atas, saya sarankan silahkan lengkapi dulu. Buat teman yang belum paham HTML kami menyiapkan artikelnya, silahkan masuki link HTML & CSS. Disana kami memberikan materi yang lumayan singkat namun cepat untuk di pahami karena pembahasannya terstruktur. Jhahahahaa, jadi bahas yang lain.

Okey, kita fokus lagi. Mungkin ada yang bertanya, aplikasi yang harus terpasang sebelumnya itu apa dan apa apalagi yang dibutuhkan untuk belajar PHP ??? (lumayan panjang ya jahahaha) jadi, aplikasi tersebut adalah aplikasi DBMS (XAMPP) karena disini kita akan menggunakan XAMPP dalam mengelolah database kita. Hal yang lain teman-teman juga bisa membedakan perbedaan antara file (data) dan direktori (folder). Setelah menginstall XAMPP pastikan Apache, PHP, MYSQL sudah terpasang. Sama seperti pembahasan yang lain mengenai HTML, gunakan juga aplikasi browser (IE, Mozilla, Goggle Chrome, Opera, dsb.) untuk menampilkan web kita.

Dalam pembuatan file PHP, kita tidak boleh menyimpannya di sembarang tempat, atau kata lain file kita harus berada di dalam Aplikasi XAMPP (didalam system). Jadi lokasi penyimpanan tersebut : masuk di Drive C, kemudian pilih XAMPP, kemudian htdocs. Didalam disini kita akan menyimpan file tersebut. Buatlah suatu folder sesuai dengan apa yang ingin kita buat. Kalau kurang paham lihat pada gambar berikut ini :

Untuk menampilkan file PHP yang telah kita buat. Kita membuka web browser dan masuk melalui localhost dan menunjukkan lokasi penyimpanan kita. Jadi cara menampilkan file PHP memang berbeda dengan cara menampilkan file HTML. Letak perbedaannya karena PHP merupakan bahasa server. Jadi maksudnya bahasa server yaitu PHP ini yang akan menghubungkan database dengan user, sehingga aktifitas yang dilakukan user (baik itu menyimpan data, mengubah ataupun menghapus) terhadap database semuaakan tereksekusi, karena bahasa server PHP ini yang telah terhubung. Bukan hanya itu PHP juga mendukung banyak aplikasi DBMS, jadi tidak hanya berjalan di XAMPP yang saat ini kita gunakan. Serta mampu berjalan diberbagai Sistem Operasi baik itu Windows, Linux, Mac Os, dll. Sehingga netcraft mengumumkan PHP sebagai bahasa web populer didunia.

Sekian artikel kali ini, silahkan lanjut ke materi selanjutnya dan budayakan berbagi dan semoga Bermanfaat ...