Cara menggunakan apa itu bootstrap php?

Assalamualaikum warahmatullahi wabarakaatuh, Alhamdulillah segala puji bagi Allah ta'ala yang telah memberikan nikmat dan rezekinya sehingga admin dapat kembali hadir memberikan tutorial-tutorial yang InsyaAllah bermanfaat bagi kita semua.

Kali ini admin akan membahas salah satu framework yang terkenal, framework ini biasa digunakan untuk menangani tampilan pada sebuah website, framework apa itu ? yaitu, Bootstrap

Bootstrap

Bootstrap adalah opensource framework yang biasa digunakan untuk menangani tampilan antar muka pengguna, atau bisa kita sebut front-end framework, jadi framework ini berbeda dengan Codeigniter ataupun laravel yang mana digunakan sebagai fraweork back-end. Framework ini berisi template desain berbasis HTML, CSS, dan JS.

Untuk lebih lengkapnya anda dapat langsung berkunjung ke website resminya di https://getbootstrap.com/. Disana dibahas secara lengkap contoh dan dokumentasinya. Tutorial kali ini saya ambil langsung dari websitenya dan saya terjemahkan sesimple mungkin agar para pembaca mudah memahami dan mengimplementasikannya.

Implementasi Bootstrap dengan CDN

Sepanjang yang admin ketahui ada 2 cara menggunakan bootstrap, yang pertama download file bootstrapnya dan disimpan di localhost, atau cara kedua menggunakan CDN. Kali ini admin hanya akan membahas penggunaan bootstrap dengan CDN

• Buat sebuah halaman HTML dengan nama latihan11.html, lalu copy-paste code berikut ini

• Lalu coba kalian jalankan dibrowser, hingga tampilannya seperti di bawah ini

tampilan hello world tanpa bootstrap

• Jika tampilanya seperti di atas, itulah tampilan website yang belum diimplementasi dengan bootstrap. Untuk mengimplemetasikan bootstrap ikuti langkah di bawah ini
• Copy-paste link CSS di bawah ini dan letakkan sebelum tag </head>

• Copy-paste link JS di bawah ini dan letakkan sebelum tag </body>

• Maka script lengkapnya akan seperti di bawah ini

• ctrl+s, lalu jalankan di browser kalian. dan lihatlah hasil yang berbeda dari tampilan sebelumnya.

tampilan hello world dengan bootstrap

Bootstrap menjelaskan bahwa penggunaan CDN adalah cara yang paling mudah. Tertulis di webiste resminya "Looking to quickly bootstrap to your project ? Use BootstrapCDN". Dengan penggunaan CDN kita tidak perlu lagi memasukkan file bootstrap di server kita. CDN memungkinkan mirroring di server cadangan. Tapi perlu akses internet untuk mirroring ke server cadangan tersebut.

Anda juga dapat melihat tutorial mengenai cara penggunaan bootstrap di channel saya. Di video ini saya menjelaskan cara implemetasi bootstrap dengan CDN yang hanya di bawah 5 menit saja.

Dalam membuat sebuah website, Bootstrap merupakan sebuah framework yang paling populer di dunia framework. Bagaimana tidak, dengan adanya bootrstap ini membuat tampilan website lebih responsive.

Perkembangan Bootstrap kini juga telah ada Bootstrap 4. Kini anda tiak perlu khawatir dengan tampilan website anda. Selain itu, hal ini membuktikan bahwa Bootstrap dipercaya dan diterima oleh banyak pengembang. Ini adalah salah satu alasan mengapa Anda harus belajar Bootstrap.

Berbagai macam webiste yang cenderung kaku, memang kurang disukai oleh pelanggan apabila anda membuat bisnis online. Mau tau bagaimana tutorial menggunakan Bootstrap ini. Yuk, simak artikel berikut ini.

Daftar Isi

• 1 Apa itu Bootstrap?
• 2 Sejarah Bootstrap
• 3 Bootstrap 2 dan 3
• 4 Bootstrap 4
• 5 Manfaat Bootstrap 
• 6 Cara Menginstall Bootstrap Online
• 7 Tutorial Cara Menggunakan Template Bootstrap Untuk Membuat Website
• 8 Kesimpulan dan Penutup

Apa itu Bootstrap?

Bootstrap adalah front-end framework atau framework css yang sengaja dibangun untuk memudahkan pendesain web dalam membuat website atau membuat template website.

Framework yang dulu pernah dikenal dengan twitter bootstrap ini dilengkapi dengan komponen-komponen website yang sering digunakan seperti breadcrumb, pagination, modal dialog, navigation bar dan lain-lain yang sangat memudahkan pendesain web saat membuat webiste.

Bahkan bootstrap ini selalu diunggul-unggulkan dengan fitur website responsive-nya yang memungkinkan kita cukup membuat satu template website saja dan kita bisa memperoleh template yang bisa dibuka atau kompatibel diberbagai device (laptop, handphone, atau tablet).

Baca Juga : Download Kumpulan Template Bootstrap Gratis Untuk Website Anda

Sejarah Bootstrap

Bootstrap, awalnya bernama Twitter Blueprint, dikembangkan oleh Mark Otto dan Jacob Thornton di Twitter sebagai kerangka kerja untuk mendorong konsistensi di perangkat internal yang sesuai.

Sebelum Bootstrap, berbagai pustaka sudah banyak digunakan untuk pengembangan antarmuka, yang menyebabkan tidak konsisten dan beban pemeliharaan yang berat.

Setelah beberapa bulan pengembangan oleh sebuah kelompok kecil, banyak pengembang di Twitter mulai memberikan kontribusi untuk proyek ini sebagai bagian dari Hack Week, sebuah pekan ala hackathon untuk tim pengembangan Twitter.

Nama itu diganti dari Twitter Blueprint menjadi Bootstrap, dan dirilis sebagai proyek sumber terbuka pada 19 Agustus 2011. Hal ini terus dipertahankan oleh Mark Otto, Jacob Thornton, dan sekelompok kecil pengembang inti, serta sejumlah besar komunitas dari para kontributor.

Bootstrap 2 dan 3

Pada 31 Januari 2012, Bootstrap 2 dirilis, yang menambahkan sistem layout dua belas kolom grid yang responsif, dukungan built-in untuk Glyphicons, beberapa komponen baru, serta perubahan dari beberapa komponen yang sudah ada.

Pada 19 Agustus 2013, Bootstrap 3 dirilis, yang didesain ulang komponennya untuk menggunakan desain flat, dan pendekatan mobile-first.

Bootstrap 4

Pada 29 Oktober 2014, Mark Otto mengumumkan bahwa Bootstrap 4 sedang dalam pengembangan.Versi alfa pertama dari Bootstrap 4 dirilis pada 19 Agustus 2015.

Pada 6 September 2016, Mark menghentikan pengerjaan Bootstrap 3 dalam rangka untuk meluangkan waktu untuk pengerjaan Bootstrap 4. Sejauh ini, sudah lebih dari 17.500 kommit yang telah dibuat untuk basis kode Bootstrap 4. Versi beta pertama dirilis pada 10 Agustus 2017.

Manfaat Bootstrap 

Seperti yang telah dijelaskan oleh penjelasan di atas template website yang dibangun dengan bootstrap sudah responsif sehingga kita cukup membuat satu buah template lengkap saja dan sudah support atau kompatibel diberbagai browser sekaligus berbagai device baik untuk desktop, laptop, tablet maupun smartphone sekalipun.

Template yang kita buat dengan bootstrap ini akan langsung menyesuaikan diri dengan lebar layar dari masing-masing device. Fitur responsif ini juga telah menjadi rekomendasi google guna memperkuat SEO mobile dari website yang kita buat.

Di tutorial bootstrap ini kiata akan mencoba membuat template website dengan layout dua kolom dengan menggunakan fitur teks dari bootstrap dan tentunya akan kita bahas langkah demi langkah selanjutnya.

Baca Juga : 7 Framework CSS Untuk Membuat Web Responsif

Cara Menginstall Bootstrap Online

Jika anda telah melakukan ekstrak file, Kemudian selanjutnya Anda bisa memanggil Bootstrap secara online (menggunakan CDN). Hanya saja, ketika Anda memanggil secara online tentunya akan mengurangi tingkat kecepatan website.

Perintah ini akan mengambil file Bootstrap dan menyalinnya ke dalam website supaya dapat digunakan oleh class atau fungsi lain.

Tutorial Cara Menggunakan Template Bootstrap Untuk Membuat Website

Silahkan download source code bootstrap di situs resminya getbootstrap.com yang disediakan oleh bootstrap secara gratis untuk diunduh oleh siapa saja.

Kemudian, download jquery di jquery.com atau library google. Karena bootstrap tidak menyediakan jquery dalam paketan source code-nya. Jquery ini digunakan untuk menjalankan komponen-komponen bawaan bootstrap seperti modal dialog, navigation agar berjalan dengan normal.

Lalu, pastikan kalian sudah punya code editor seperti notepad++, dreamweaver atau Sublime Text yang nanti akan kita gunakan untuk membuat template website dengan bootstrap.

Agar lebih terasa bawa kita membuat website, kita akan menggunakan xampp dan file dengan extention php dalam membuat template website ini.

Biasanya file Bootstrap akan dipanggil melalui link bootstrap tersebut agar lebih mudah dalam pengolahan datanya.

Setelah anda melakukan ekstrak atau copy codingan tersebut, maka akan muncul tampilan seperti diatas. Teks dan kolom pada tampilan tersebut dapat anda ganti sesuai keinginan anda.

Kesimpulan dan Penutup

Bootstrap memang menjadi penolog bagi para developer. Bagaimana tidak, proses pengolahannya yang praktis dan cepat serta dapat membuat website lebih responsive. Sehingga tampilan website cenderung tidak kaku.

Jika anda masih bingung bootsrtap itu apa, maka definisi dari bootstrap adalah sebuah front-end framework atau framework css yang sengaja dibangun untuk memudahkan pendesain web dalam membuat website atau membuat template website.

Lalu, biasanya bootsrtap ini  bisa menjadi sebuah template website yang dibangun dengan bootstrap sudah responsif sehingga kita cukup membuat satu buah template lengkap saja dan sudah support atau kompatibel diberbagai browser sekaligus berbagai device baik untuk desktop, laptop, tablet maupun smartphone sekalipun. Selamat Mencoba!

Apa itu Bootstrap di PHP?

Bootstrap digunakan untuk apa?

Apa itu Bootstrap dan contohnya?

Dimana kita melihat panduan Bootstrap?