Halo teman-teman semua, selamat datang di channel Framework Indonesia. Di video kali ini kita akan mempelajari sebuah framework CSS yang sudah sangat populer sekali di kalangan web developer, khususnya front-end developer, yaitu Framework Bootstrap 4. Oke langsung saja kita akan mulai teman-teman Jadi Bootstrap itu Di dalamnya terdapat 3 komponen Atau elemen penting Yang pertama adalah HTML Yang kedua adalah CSS Dan yang ketiga Adalah JavaScript Jadi bagi teman-teman yang mau mempelajari Bootstrap silahkan pelajari Lebih dahulu dasar-dasar dari HTML Kemudian CSS dan JavaScript sehingga pada saat Teman-teman nanti mempelajari Bootstrap Ya bisa memahaminya lebih gampang. Kemudian Bootstrap ini merupakan sebuah framework CSS yang menyediakan kelas dan komponen yang siap untuk dipakai, sehingga kita tidak perlu lagi menulis kode CSS dari nol. Kita cukup hanya memanggil kelas yang sudah disediakan oleh Bootstrap. Karena dengan menggunakan Bootstrap, maka ketika kita membangun sebuah website akan lebih efektif dan efesien.
Contohnya kita membuat sebuah button atau tombol, Apabila kita membuat button atau tombol ini tanpa menggunakan bootstrap, maka teman-teman bisa dilihat di sini, source code atau sintaks yang kita gunakan itu sangat panjang sekali. Kita harus membuat tag button terlebih dahulu di HTML, kemudian kita membuat style-nya di CSS yang sangat panjang seperti ini. Nah, sekarang kita bandingkan apabila kita membuat button atau tombol ini dengan menggunakan bootstrap.
Nah, apabila kita menggunakan bootstrap, kita hanya perlu membuat sintaks yang sebatis ini saja. Jadi, teman-teman bisa membandingkan kalau tanpa menggunakan bootstrap, kita butuh 2 file, yaitu kita butuh file HTML dan kita juga butuh file CSS untuk stylenya. Dan sintaksnya ini sangat panjang sekali.
Sementara kalau kita menggunakan bootstrap, kita hanya butuh 1 file, yaitu file HTML saja. dan hanya mengetikan kelas-kelasnya saja, yaitu di sini kita memanggil kelas BTN dan BTN Primary. Selanjutnya kita akan mempelajari bagaimana menggunakan framework Bootstrap. Silakan teman-teman kunjungi websitenya di getbootstrap.com.
Kemudian kita akan klik di link download yang ada di sini. Saat ini Bootstrap berada di versi 4.2. Silakan teman-teman klik download di sini. Kemudian di compile CSS dan JS, silakan teman-teman klik download. Setelah selesai download, silakan teman-teman buka foldernya.
Kemudian kita akan extract folder bootstrap ini, silakan klik kanan. Lalu extract here. File zipnya kita hapus saja.
Kemudian ini kita akan rename sedikit. Kita hapus yang angka sehingga tersisa nama filenya adalah bootstrap. Lalu kita akan lihat apa saja isi dari folder bootstrap ini. Nah isinya adalah ada dua folder yaitu folder CSS dan folder JS. Kemudian kita akan membuat new file di text editor kita.
Kita simpan dengan nama index.html. Nah, untuk mulai bekerja dengan Bootstrap, kita akan menggunakan template yang sudah disediakan oleh Bootstrap. Jadi, silakan teman-teman kembali ke browsernya.
Kemudian, kita klik di sini, link get started-nya. Kemudian, di sebelah sini ada start template. Silakan klik. Nah, di sini ada sintaks templatenya yang sudah disediakan. Kita tinggal copy saja ini.
Silahkan blok Kemudian klik kanan copy atau teman-teman juga bisa klik link copy yang ada di atas ini. Kemudian kita akan paste di file index.html kita. Silakan klik kanan, lalu open in browser. Nah kita sudah berhasil memunculkan tulisan hello world yang ada di dalam template bootstrap kita. Kita akan coba ganti hello world-nya menjadi...
Halo, saya belajar Bootstrap. di framework Indonesia simpan lalu kita coba refresh nah kita sudah berhasil memunculkan tag H1 yang tulisannya adalah hello saya belajar bootstrap di framework Indonesia selanjutnya kita akan belajar bagaimana menghubungkan bootstrap ke dalam file index HTML kita jadi ada dua cara untuk menghubungkan bootstrap ya yaitu secara online dan secara offline yang pertama kita akan mempelajari secara online jadi secara default teman-teman pada saat kita copy template bootstrap yang ada disini maka bootstrapnya itu dihubungkannya secara online teman-teman bisa lihat disini ada link ya link bootstrapnya kemudian kalau kita lihat di bawah disini ada link jQuery nya kemudian disini ada link popup.js nya Dan terakhir ada link bootstrap.js-nya. Jadi secara default, ketika kita meng-copy template yang sudah disediakan oleh bootstrap, maka dia akan menghubungkan template. menghubungkan bootstrap itu secara online artinya ketika teman-teman mau menggunakan bootstrap secara online teman-teman harus terhubung dengan internet Nah sekarang kita akan coba menghubungkan bootstrap dengan cara offline jadi teman-teman bisa mengakses atau menggunakan bootstrap ini walaupun tidak terhubung dengan internet jadi caranya kita akan hapus ini lebih dahulu Jadi kita akan buat tag link, silahkan ketik link lalu tab. Kemudian kita akan mengambil file yang ada di dalam folder CSS.
Jadi ketik di sini CSS, foldernya CSS. Kemudian di dalamnya ada file yaitu bootstrap.min, extensionnya adalah CSS. bootstrap.min.css kemudian kita akan menghubungkan javascriptnya silahkan membuka text script disini lalu kita ketik src kita akan lihat disini kita ambil yang bootstrap.min.js folder-nya js file-nya bootstrap.min.js Nah ini adalah cara untuk menghubungkan file kita dengan bootstrap.
Jadi silakan panggil lebih dahulu di foldernya. Foldernya apa? CSS. Kemudian nama filenya adalah bootstrap-css.
Kemudian untuk javascriptnya kita panggil dengan membuka text script. Kemudian kita panggil nama foldernya yaitu js. Dan nama filenya adalah bootstrap-js. Namun untuk tutorial di video ini saya akan menghubungkan.
menghubungkan bootstrap dengan cara online jadi saya akan copy lagi ini kemudian saya paste di sini Jadi kembali seperti semula, teman-teman bebas memilih bisa secara online. Kalau memang teman-teman tidak terhubung dengan internet, bisa menggunakan secara offline. Nah itu tadi teman-teman sedikit pengenalan kita untuk bootstrap dan juga menghubungkannya secara online dan juga offline.
Kita akan melanjutkan tutorial ini di video selanjutnya.