Apa itu Framework

Sub-bab 1

Pengenalan Framework ?

Apa itu Framework?

Kerangka kerja yang mempercepat dan mempermudah pengembangan aplikasi

Definisi Framework

Dalam dunia pemrograman, framework adalah sebuah kerangka kerja yang berisi kumpulan tools, aturan, dan pustaka (library) yang sudah siap pakai untuk membantu kita membangun aplikasi atau website dengan lebih cepat dan efisien.

"Framework seperti kotak perkakas lengkap untuk developer"

Analogi Framework

Rangka Bangunan

Framework bisa dianalogikan seperti rangka bangunan, jadi sudah ada struktur dasar (pondasi, tembok, atap) yang siap pakai, kamu tinggal mengatur desain interior dan finishing-nya sesuai kebutuhan.

Resep Masakan

Seperti resep masakan yang sudah menyediakan daftar bahan dan langkah-langkah dasar, sehingga kamu bisa fokus pada variasi dan penyajian akhir.

Keuntungan Menggunakan Framework

Efisiensi Waktu

Mengurangi waktu pengembangan dengan kode yang sudah tersedia

Struktur Konsisten

Memiliki pola pengembangan yang terstandarisasi

Dukungan Komunitas

Memiliki komunitas besar yang siap membantu

Sub-bab 2

Kenapa Framework Diperlukan dalam pembuatan web ?

Kenapa Framework Dibutuhkan dalam Pengembangan Web?

Efisiensi Pengembangan

Tanpa framework, setiap baris kode harus kita buat dari awal, bahkan untuk hal-hal sederhana seperti tombol atau layout. Ini jelas tidak efisien, apalagi jika kita mengerjakan banyak proyek atau bekerja di tim besar.

Framework membantu mempercepat proses coding karena:

Tidak Membuat dari Nol

Kita bisa menggunakan komponen atau template yang sudah tersedia.

Standarisasi Tim

Struktur dan penamaan sudah distandarisasi, sehingga mudah dipahami banyak orang.

Fokus pada Logika

Developer bisa fokus pada logika aplikasi tanpa terlalu banyak repot mengurus desain dasar.

Pengembangan Cepat

Mempercepat waktu pengembangan dengan komponen siap pakai.

Perbandingan Dengan dan Tanpa Framework

Aspek	Tanpa Framework	Dengan Framework
Waktu Pengembangan	Lama	Cepat
Konsistensi Kode	Tergantung Developer	Terstandarisasi
Kolaborasi Tim	Sulit	Mudah
Maintenance	Rumit	Sederhana

Sub-bab 3

Macam-Macam Framework

Macam-Macam Framework di Dunia Web

Framework web terbagi menjadi dua jenis utama berdasarkan fungsinya

Frontend Framework

Digunakan untuk membangun tampilan yang dilihat pengguna secara langsung di browser.

Contoh Populer:

BootstrapTailwind CSSFoundationBulma

Backend Framework

Digunakan untuk mengatur logika server, database, dan operasi di belakang layar.

Contoh Populer:

LaravelExpress.jsDjangoRuby on Rails

Fokus Pembelajaran Kita

Dalam materi kali ini, kita akan fokus pada salah satu framework frontend yang sangat populer:

Bootstrap

Mengapa Memilih Bootstrap?

🚀

Mudah Dipelajari

Dokumentasi lengkap dengan contoh kode siap pakai

📱

Responsif

Desain otomatis menyesuaikan berbagai perangkat

🎨

Komponen Kaya

Button, card, navbar, dan komponen UI siap pakai

🔄

Konsisten

Tampilan seragam di semua browser

🌐

Komunitas Besar

Banyak sumber belajar dan dukungan

⚡

Cepat Develop

Prototyping dan development lebih cepat

Sub-bab 4

Apa itu Bootstrap ?

Apa itu Bootstrap?

Bootstrap adalah framework CSS yang membantu kita membuat tampilan website yang menarik dan responsif dengan cepat. Framework ini dikembangkan oleh tim di Twitter, dan kini menjadi salah satu yang paling banyak digunakan di dunia web.

"Bootstrap menyediakan berbagai komponen siap pakai seperti tombol, form, navigasi, dan layout, yang bisa langsung kita gunakan hanya dengan menambahkan class tertentu pada elemen HTML."

✦

Responsif

Desain otomatis menyesuaikan berbagai ukuran layar

Komponen Siap Pakai

Tersedia puluhan komponen UI siap digunakan

Dokumentasi Bootstrap • Versi 5.3.0

Sub-bab 5

Struktur Dasar Bootstrap

Untuk menggunakan Bootstrap, kita hanya perlu menyisipkan link ke file CSS dan JS dari Bootstrap (biasanya melalui CDN). Setelah itu, kita bisa langsung memakai class-class Bootstrap dalam elemen HTML kita.

Struktur HTML Dasar

Memuat preview...

1. CSS Bootstrap

Tambahkan link CSS Bootstrap di dalam tag head untuk styling dasar komponen

2. JS Bootstrap

Sisipkan script JS Bootstrap sebelum penutup body untuk fungsi interaktif

Catatan Penting:

Pastikan jQuery dan Popper.js sudah terpasang jika menggunakan Bootstrap versi 4 ke bawah.

Sub-bab 6

Komponen Bootstrap Populer

Komponen Bootstrap yang Sering Digunakan

Bootstrap menyediakan banyak komponen yang sering dipakai dalam website. Beberapa yang paling umum antara lain:

Button

Berbagai warna dan ukuran tombol bisa dibuat dengan class tertentu.

Navbar

Navigasi menu yang bisa berubah menjadi menu hamburger di layar kecil.

Brand

Form

Input, checkbox, dropdown dengan tampilan modern.

Card

Wadah konten bergaya kotak, cocok untuk menampilkan artikel, gambar, atau profil.

Judul Card

Deskripsi singkat card

Kesimpulan: Komponen ini sangat memudahkan pembuatan tampilan website yang konsisten dan menarik.

Sub-bab 7

Penggunaan Komponen Bootstrap

Contoh Komponen Bootstrap

Berikut adalah beberapa contoh implementasi komponen Bootstrap seperti tombol, navbar, form, dan card.

Lihat Dokumentasi Bootstrap

🎯 Button

Contoh penggunaan tombol Bootstrap

Memuat preview...

🧭 Navbar

Contoh implementasi navigasi

Memuat preview...

📝 Form

Contoh pembuatan form dengan Bootstrap

Memuat preview...

💳 Card

Contoh penggunaan card Bootstrap

Memuat preview...

Catatan: Setiap komponen Bootstrap dapat langsung digunakan hanya dengan menambahkan class-class yang sesuai pada HTML, seperti btn btn-primary untuk tombol.

Sub-bab 8

Grid System Bootstrap

Grid System di Bootstrap

Salah satu fitur andalan Bootstrap adalah sistem grid-nya. Grid ini memungkinkan kita membagi halaman menjadi baris dan kolom yang rapi, dan otomatis menyesuaikan layar pengguna.

Struktur Dasar Grid

Container → Row → Columns

Kolom 1

Kolom 2

Kolom 3

Kolom 1

Kolom 2

Breakpoint Grid Bootstrap

Breakpoint	Class Prefix	Lebar Layar
Extra small	.col-	<576px
Small	.col-sm-	≥576px
Medium	.col-md-	≥768px
Large	.col-lg-	≥992px
Extra large	.col-xl-	≥1200px

Contoh Implementasi

Code

<div class="container">
  <div class="row">
    <div class="col-md-8">Konten Utama</div>
    <div class="col-md-4">Sidebar</div>
  </div>
</div>

Output

Konten Utama

Sidebar

Fitur Responsif

Grid Bootstrap secara otomatis menyesuaikan tata letak berdasarkan ukuran layar. Kolom akan ditumpuk (stack) secara vertikal di layar kecil dan menyusun horizontal di layar yang lebih besar.

Sub-bab 9

Contoh Layout Responsive

Layout Responsif dengan Grid System

Satu kode, tampilan sempurna di semua perangkat

Dengan grid system, kita bisa membuat tampilan yang terlihat bagus di berbagai perangkat. Misalnya:

Di desktop: 3 kolom sejajar
Di HP: kolom ditumpuk ke bawah

Ini penting untuk website portfolio, karena kita tidak tahu pengunjung memakai HP atau laptop.

Implementasi Kode Demo Responsive

HTML

Memuat preview...

Coba resize text editornya untuk melihat efek responsif / klik tombol preview di pojok kanan bawah

Anatomi Grid Bootstrap

Responsive by Default

col-12 col-md-4 membuat 3 kolom di desktop dan tumpuk vertikal di mobile

Gutter System

g-4 menambahkan spacing 1.5rem antara kolom

Struktur Dasar

container→Pembungkus utama

row→Baris untuk kolom

col-*→Kolom responsif

Breakpoint default: md (768px)

Contoh Aplikasi: Website Portfolio

Grid responsif sangat penting untuk portfolio karena:

Pengunjung bisa datang dari berbagai perangkat
Tampilan tetap profesional di layar kecil maupun besar
Konten tersusun rapi tanpa perlu membuat banyak versi

Explore Official Documentation

Official Bootstrap Docs

getbootstrap.com

W3Schools Tutorial

w3schools.com

Need more help? Both resources provide excellent guides for Bootstrap Grid System

Sub-bab 10

Kesimpulan Materi Bootstrap

Kesimpulan Belajar Bootstrap

Poin Penting

Bootstrap adalah framework CSS paling populer untuk pengembangan web cepat
Grid System adalah fitur utama untuk layout responsif
Menyediakan komponen siap pakai (button, card, navbar, dll)
Menghemat waktu dengan class utility yang konsisten

Langkah Selanjutnya

Pelajari Komponen Lanjutan

Modal, Carousel, Tooltip

Praktik Membuat Project

Website Portfolio atau Blog

Pelajari Best Practices

Customization dan Optimization

"Bootstrap adalah pintu gerbang Anda untuk mengembangkan website modern tanpa harus ahli CSS."

Mulai dengan komponen dasar, kuasai grid system, lalu eksplorasi fitur lanjutan!

Modul KKN SI 2025

Apa itu Framework

Pengenalan Framework ?

Apa itu Framework?

Definisi Framework

Analogi Framework

Rangka Bangunan

Resep Masakan

Keuntungan Menggunakan Framework

Efisiensi Waktu

Struktur Konsisten

Dukungan Komunitas

Kenapa Framework Diperlukan dalam pembuatan web ?

Kenapa Framework Dibutuhkan dalam Pengembangan Web?

Efisiensi Pengembangan

Framework membantu mempercepat proses coding karena:

Tidak Membuat dari Nol

Standarisasi Tim

Fokus pada Logika

Pengembangan Cepat

Perbandingan Dengan dan Tanpa Framework

Macam-Macam Framework

Macam-Macam Framework di Dunia Web

Frontend Framework

Contoh Populer:

Backend Framework

Contoh Populer:

Fokus Pembelajaran Kita

Mengapa Memilih Bootstrap?

Mudah Dipelajari

Responsif

Komponen Kaya

Konsisten

Komunitas Besar

Cepat Develop

Apa itu Bootstrap ?

Responsif

Komponen Siap Pakai

Struktur Dasar Bootstrap

Struktur Dasar Bootstrap

Struktur HTML Dasar

Komponen Bootstrap Populer

Komponen Bootstrap yang Sering Digunakan

Button

Navbar

Form

Card

Judul Card

Penggunaan Komponen Bootstrap

Contoh Komponen Bootstrap

🎯 Button

🧭 Navbar

📝 Form

💳 Card

Grid System Bootstrap

Grid System di Bootstrap

Struktur Dasar Grid

Container → Row → Columns

Breakpoint Grid Bootstrap

Contoh Implementasi

Code

Output

Fitur Responsif

Contoh Layout Responsive

Layout Responsif dengan Grid System

Implementasi Kode Demo Responsive

HTML

Anatomi Grid Bootstrap

Struktur Dasar

Contoh Aplikasi: Website Portfolio

Explore Official Documentation

Official Bootstrap Docs

W3Schools Tutorial

Kesimpulan Materi Bootstrap

Kesimpulan Belajar Bootstrap

Poin Penting

Langkah Selanjutnya

Pelajari Komponen Lanjutan

Praktik Membuat Project

Pelajari Best Practices