Admin: /* 8. ✍️ Tugas Mahasiswa */

2025-05-10T14:42:59Z

8. ✍️ Tugas Mahasiswa

← Revisi sebelumnya		Revisi per 10 Mei 2025 14.42
Baris 128:		Baris 128:
	\|}		\|}

	==8. ✍️ Tugas ~~Mahasiswa~~==		==8. ✍️ Tugas Siswa==

	'''Tugas Individu (Praktik)'''		'''Tugas Individu (Praktik)'''

Admin: ←Membuat halaman berisi '==Tujuan Pembelajaran:== Setelah mengikuti modul ini, siswa mampu: * Memahami konsep dasar framework frontend * Menjelaskan alasan penggunaan framework dalam pengembangan web * Mengenali berbagai framework frontend populer * Memahami manfaat dan cara kerja dasar dari framework frontend ==1. 🔍 Apa Itu Framework Frontend?== '''Definisi:''' '''Framework Frontend''' adalah kumpulan tools, library, dan struktur kode yang mempermudah pengembangan tampilan (UI) d...'

2025-05-10T14:42:44Z

←Membuat halaman berisi '==Tujuan Pembelajaran:== Setelah mengikuti modul ini, siswa mampu: * Memahami konsep dasar framework frontend * Menjelaskan alasan penggunaan framework dalam pengembangan web * Mengenali berbagai framework frontend populer * Memahami manfaat dan cara kerja dasar dari framework frontend ==1. 🔍 Apa Itu Framework Frontend?== '''Definisi:''' '''Framework Frontend''' adalah kumpulan tools, library, dan struktur kode yang mempermudah pengembangan tampilan (UI) d...'

Halaman baru

==Tujuan Pembelajaran:==
Setelah mengikuti modul ini, siswa mampu:
* Memahami konsep dasar framework frontend
* Menjelaskan alasan penggunaan framework dalam pengembangan web
* Mengenali berbagai framework frontend populer
* Memahami manfaat dan cara kerja dasar dari framework frontend

==1. 🔍 Apa Itu Framework Frontend?==

'''Definisi:'''

'''Framework Frontend''' adalah kumpulan tools, library, dan struktur kode yang mempermudah pengembangan tampilan (UI) dan interaksi pengguna di sisi '''client (browser)'''.

> Framework = "Kerangka kerja" yang membantu kita menulis kode lebih rapi, efisien, dan terstruktur.

==2. 🧱 Komponen Dasar Framework Frontend==

{| class="wikitable"
! Komponen !! Penjelasan
|-
| '''Komponen UI''' || Potongan kode seperti tombol, navbar, form yang bisa dipakai ulang
|-
| '''Routing''' || Mengatur navigasi antar halaman (tanpa reload)
|-
| '''State Management''' || Mengelola data yang digunakan oleh banyak komponen
|-
| '''Templating''' || Mempermudah integrasi antara HTML dan data dinamis
|-
| '''CLI Tools''' || Command Line Interface untuk membuat dan membangun proyek otomatis
|}

==3. ⚡ Framework vs Library==
{| class="wikitable"
! Aspek !! Framework !! Library
|-
| Struktur || Sudah punya arsitektur bawaan || Bebas, tidak mengatur struktur
|-
| Contoh || React (meski disebut library, sering dipakai layaknya framework), Vue, Angular || jQuery, Chart.js
|-
| Kontrol || Framework mengatur alur kerja || Library hanya membantu tugas tertentu
|}

==4. 💡 Mengapa Menggunakan Framework Frontend?==

'''✅ Manfaat:'''

1. '''Pengembangan Lebih Cepat'''
* Banyak fitur otomatis: routing, komponen UI, dan live reload

2. '''Kode Lebih Terstruktur'''
* Menghindari “spaghetti code”

3. '''Reusability'''
* Komponen dapat digunakan berulang di halaman berbeda

4. '''Komunitas Besar dan Dokumentasi Lengkap'''
* Mudah mencari solusi saat mengalami masalah

5. '''Responsive dan Interaktif'''
* Framework seperti Vue atau React sangat cocok untuk membuat web modern dan dinamis

==5. 🌐 Contoh Framework Frontend Populer==

{| class="wikitable"
! Nama !! Bahasa Dasar !! Kelebihan Utama
|-
| '''React.js''' || JavaScript || Ringan, berbasis komponen, populer di industri
|-
| '''Vue.js''' || JavaScript || Mudah dipelajari, dokumentasi bagus
|-
| '''Angular''' || TypeScript || Lengkap, cocok untuk proyek besar
|-
| '''Svelte''' || JavaScript || Ringan, tanpa virtual DOM
|-
| '''Bootstrap''' || CSS/JS || Desain cepat, banyak komponen siap pakai
|-
| '''Tailwind CSS''' || CSS || Utility-first, fleksibel untuk custom UI
|}

==6. 🛠️ Alur Kerja Dasar Framework (Contoh: Vue/React)==

1. '''Inisialisasi Proyek'''

<pre>
npx create-react-app nama-proyek
# atau
npm init vue@latest
</pre>

2. '''Membuat Komponen'''

<pre>
// React
function Header() {
return <h1>Halo Dunia</h1>;
}
</pre>

3. '''Menghubungkan Komponen ke Halaman'''

<pre>
import Header from './Header';
function App() {
return <Header />;
}
</pre>

4. '''Menjalankan Proyek'''

npm run dev

==7. 📊 Studi Kasus Mini: Tanpa vs Dengan Framework==

{| class="wikitable"
! Tanpa Framework !! Dengan Framework (Vue/React)
|-
| Perlu buat HTML manual || Gunakan `<Component />`
|-
| Sulit maintain banyak file || Komponen terpisah → mudah dipelihara
|-
| Reload halaman penuh || Single Page Application (SPA) = lebih cepat
|-
| Penanganan form manual || Framework bantu validasi & pengiriman data
|}

==8. ✍️ Tugas Mahasiswa==

'''Tugas Individu (Praktik)'''
* Pilih salah satu framework (React/Vue)
* Buat halaman web sederhana yang memiliki:
** 2 komponen (misal: Header & Footer)
** Navigasi antar halaman
** Form input dengan validasi

'''Tugas Kelompok (Diskusi)'''
* Cari dan presentasikan:
** Perbedaan utama antara React, Vue, dan Angular
** Framework mana yang paling cocok untuk e-commerce skala besar dan kenapa?

==9. 📚 Referensi==

* [reactjs.org](https://reactjs.org)
* [vuejs.org](https://vuejs.org)
* [angular.io](https://angular.io)
* [tailwindcss.com](https://tailwindcss.com)
* [MDN Web Docs](https://developer.mozilla.org/en-US/)

==Pranala Menarik==

* [[Web Programming]]

Konsep dasar dan manfaat penggunaan framework frontend - Riwayat revisi

Admin: /* 8. ✍️ Tugas Mahasiswa */