MODUL FRAMEWORK7 TAHAP LANJUT DESKRIPSI PER SECTION

Pendahuluan
Perkembangan teknologi informasi dan komunikasi yang semakin pesat mendorong kebutuhan akan
aplikasi mobile yang cepat, ringan, dan mudah digunakan. Dalam dunia pemrograman modern,
pengembangan aplikasi tidak hanya berfokus pada fungsi, tetapi juga pada tampilan antarmuka dan
pengalaman pengguna. Oleh karena itu, diperlukan framework yang mampu menggabungkan desain
antarmuka yang menarik dengan logika pemrograman yang efisien.
Framework7 merupakan salah satu framework frontend yang dirancang khusus untuk pengembangan
aplikasi mobile berbasis web. Framework ini memungkinkan pengembang membuat aplikasi yang
memiliki tampilan dan interaksi menyerupai aplikasi native Android maupun iOS dengan memanfaatkan
teknologi web seperti HTML, CSS, dan JavaScript. Dengan Framework7, aplikasi web dapat
dikembangkan secara lebih terstruktur, responsif, dan profesional.
Dalam pembelajaran pemrograman tahap lanjut, Framework7 menjadi media yang tepat untuk
memperkenalkan konsep pengembangan aplikasi modern. Framework7 menerapkan konsep Single Page
Application (SPA) yang memungkinkan perpindahan halaman tanpa melakukan pemuatan ulang
halaman secara keseluruhan. Konsep ini membuat aplikasi lebih cepat dan nyaman digunakan, sekaligus
memperkenalkan peserta didik pada pola pengembangan aplikasi yang banyak digunakan di industri.
Melalui penggunaan Framework7, peserta didik tidak hanya belajar membuat tampilan aplikasi, tetapi
juga memahami struktur aplikasi, pengelolaan navigasi, penggunaan komponen antarmuka, serta
penerapan logika pemrograman menggunakan JavaScript. Pembelajaran Framework7 tahap lanjut
diharapkan mampu meningkatkan kemampuan peserta didik dalam mengembangkan aplikasi mobile
berbasis web secara mandiri dan sistematis.
Modul ini disusun sebagai bahan pembelajaran dan catatan hafalan bagi peserta didik pada fase F. Materi
yang disajikan mencakup pengenalan Framework7, konsep dasar SPA, struktur file, routing dan navigasi,
penggunaan komponen UI, hingga penerapan Framework7 pada tahap lanjut pemrograman. Dengan
modul ini, peserta didik diharapkan mampu memahami dan menerapkan Framework7 sebagai salah satu
solusi pengembangan aplikasi mobile berbasis web yang efektif dan sesuai dengan kebutuhan teknologi
saat ini.

Konsep Single Page Application (SPA)

Single Page Application (SPA) merupakan konsep pengembangan aplikasi web modern di mana seluruh
interaksi pengguna terjadi di satu halaman utama tanpa melakukan pemuatan ulang (reload) halaman
secara penuh. Pada aplikasi SPA, ketika pengguna berpindah menu, membuka halaman baru, atau
melakukan interaksi tertentu, yang berubah hanyalah konten di dalam halaman, bukan keseluruhan
dokumen HTML.
Pada pengembangan tradisional (multi-page application), setiap perpindahan halaman akan memicu
permintaan baru ke server dan memuat ulang seluruh halaman. Hal ini menyebabkan proses lebih lambat
dan pengalaman pengguna menjadi kurang nyaman. SPA hadir sebagai solusi untuk menciptakan
aplikasi yang lebih cepat, responsif, dan menyerupai aplikasi mobile native.
Framework7 secara penuh mengadopsi konsep SPA, sehingga sangat cocok digunakan untuk
membangun aplikasi mobile dan web app modern.
Cara Kerja SPA dalam Framework7
Dalam Framework7, SPA bekerja dengan memanfaatkan routing client-side, yaitu pengaturan navigasi
yang dikontrol oleh JavaScript, bukan oleh server. Ketika pengguna menekan link atau tombol navigasi,
Framework7 tidak memuat ulang halaman, tetapi:
1. Menangkap aksi navigasi pengguna
2. Mencocokkan URL dengan konfigurasi routes
3. Memuat konten halaman yang sesuai (dari file HTML, komponen, atau template)
4. Menyisipkan konten tersebut ke dalam view utama
Proses ini berlangsung sangat cepat karena hanya bagian tertentu dari halaman yang diperbarui. Dengan
mekanisme ini, aplikasi terasa lebih ringan dan interaktif.
Hubungan SPA dengan Routing
Routing adalah inti dari konsep SPA. Tanpa routing, SPA tidak dapat mengatur perpindahan antar
halaman. Dalam Framework7:
 Setiap halaman memiliki path URL tertentu
 URL tidak benar-benar meminta halaman baru ke server
 URL digunakan sebagai identitas tampilan dan navigasi
Dengan routing, pengguna tetap dapat:
 Menggunakan tombol Back
 Menyimpan bookmark
 Melihat perubahan URL di address bar
Ini membuat SPA tetap memiliki perilaku seperti website normal, meskipun secara teknis hanya satu
halaman.
SPA sebagai Dasar Pemrograman Lanjutan
Dalam tahap lanjut pemrograman Framework7, siswa diharapkan:
 Memahami SPA sebagai fondasi utama aplikasi
 Mampu menjelaskan hubungan SPA dengan routing dan navigasi
 Mengerti perbedaan SPA dan multi-page application
 Mengetahui kelebihan dan tantangan SPA
 Mampu menerapkan SPA menggunakan Framework7 secara efektif
Konsep SPA tidak hanya penting untuk Framework7, tetapi juga menjadi dasar dalam framework
modern lain seperti React, Vue, dan Angular.

Struktur File Framework7

Struktur file pada Framework7 dirancang agar pengembangan aplikasi berbasis Single Page Application
(SPA) menjadi lebih terorganisir, mudah dipahami, dan mudah dikembangkan. Dengan struktur file
yang jelas, pengembang dapat memisahkan antara tampilan, logika aplikasi, dan konfigurasi sehingga
proses pemeliharaan aplikasi menjadi lebih efektif.
Framework7 menggunakan pendekatan modular, di mana setiap bagian aplikasi memiliki peran dan
fungsi yang spesifik. Pemahaman struktur file ini sangat penting pada tahap lanjut, karena kesalahan
penempatan file dapat menyebabkan routing tidak berjalan, tampilan tidak muncul, atau logika aplikasi
tidak dieksekusi dengan benar.
File Utama (Root Project)
Pada level paling dasar, proyek Framework7 umumnya memiliki beberapa file utama, yaitu:
 [Link]
Merupakan file inti aplikasi yang pertama kali dimuat oleh browser. File ini berfungsi sebagai
kerangka utama SPA dan berisi elemen seperti <app>, <view>, dan container halaman. Dalam
konsep SPA, file ini hanya dimuat sekali dan tidak berubah saat navigasi berlangsung.
 [Link]
Digunakan untuk inisialisasi Framework7. Di dalam file ini terdapat konfigurasi aplikasi seperti
nama aplikasi, theme, routing, event, dan pengaturan view. File ini menjadi pusat logika utama
aplikasi Framework7.
 [Link] / [Link]
Berisi pengaturan tampilan dan gaya antarmuka aplikasi. File ini mengatur warna, layout,
komponen UI, serta penyesuaian tampilan sesuai kebutuhan aplikasi.
Folder Pages
Folder pages digunakan untuk menyimpan halaman-halaman aplikasi. Setiap file HTML di dalam folder
ini mewakili satu halaman SPA. Meskipun disebut “halaman”, file ini tidak dimuat ulang secara penuh,
melainkan disisipkan ke dalam view utama melalui sistem routing.
Contoh fungsi folder pages:
 Menyimpan halaman home, about, profile, dan halaman lainnya
 Memudahkan pengelompokan tampilan aplikasi
 Mendukung sistem routing Framework7
Folder Routes
Folder routes berisi konfigurasi routing aplikasi. Di dalamnya terdapat file JavaScript yang
mendefinisikan hubungan antara URL (path) dan halaman yang ditampilkan. Routing inilah yang
menghubungkan struktur file dengan konsep SPA.
Dengan struktur routes yang baik, navigasi aplikasi menjadi:
 Lebih terkontrol
 Mudah dikembangkan
 Tidak bergantung pada server
Folder Components dan Modules
Pada pengembangan tahap lanjut, Framework7 memungkinkan penggunaan komponen dan module.
Folder ini berfungsi untuk menyimpan bagian-bagian aplikasi yang bersifat reusable, seperti navbar,
modal, atau fitur tertentu.
Manfaat penggunaan folder ini antara lain:
 Mengurangi duplikasi kode
  Memudahkan pengembangan fitur baru
 Mendukung pemrograman berbasis komponen
Folder Assets
Folder assets digunakan untuk menyimpan sumber daya pendukung aplikasi seperti:
 Gambar (images)
 Icon
 Font
 File multimedia
Pemisahan assets membantu menjaga kerapian struktur proyek dan memudahkan pengelolaan file statis.
Pentingnya Struktur File dalam Tahap Lanjut
Pada tahap lanjut pemrograman Framework7, struktur file bukan hanya soal kerapian, tetapi juga
berkaitan langsung dengan:
 Keberhasilan routing
 Efisiensi pengembangan
 Skalabilitas aplikasi
 Kemudahan debugging
Siswa diharapkan mampu memahami fungsi setiap folder dan file, serta menjelaskan hubungan antara
struktur file, routing, dan konsep SPA.

Routing dan Navigasi

Routing dan navigasi merupakan salah satu konsep inti dalam penggunaan Framework7, khususnya pada
tahap lanjut pemrograman aplikasi mobile berbasis web. Framework7 menerapkan konsep Single Page
Application (SPA), sehingga perpindahan halaman tidak dilakukan dengan memuat ulang halaman web
secara keseluruhan, melainkan dengan mengganti konten secara dinamis. Mekanisme inilah yang
membuat aplikasi terasa lebih cepat, ringan, dan menyerupai aplikasi native.
Routing pada Framework7 berfungsi untuk mengatur alur perpindahan halaman dalam aplikasi.
Setiap halaman atau menu dalam aplikasi didefinisikan sebagai sebuah route. Route berisi informasi
mengenai alamat halaman, file atau komponen yang ditampilkan, serta pengaturan tambahan seperti
animasi transisi. Dengan routing, pengembang dapat menentukan bagaimana pengguna berpindah dari
satu halaman ke halaman lain secara terstruktur dan terkontrol.
Pengaturan routing pada Framework7 umumnya ditempatkan dalam file [Link]. File ini berisi daftar
route yang digunakan oleh aplikasi. Setiap route memiliki path tertentu yang berfungsi sebagai alamat
halaman. Ketika pengguna menekan menu atau tombol navigasi, Framework7 akan memanggil route
yang sesuai dan menampilkan halaman tanpa melakukan reload browser. Hal ini merupakan ciri utama
aplikasi berbasis SPA.
Navigasi pada Framework7 tidak hanya mengatur perpindahan halaman, tetapi juga berkaitan dengan
pengalaman pengguna (user experience). Framework7 menyediakan berbagai komponen navigasi
seperti Navbar, Toolbar, Tabbar, dan Panel yang terintegrasi langsung dengan sistem routing.
Komponen-komponen ini memudahkan pengguna dalam mengakses berbagai fitur aplikasi dengan cara
yang intuitif dan konsisten.
Navbar berfungsi sebagai navigasi bagian atas yang biasanya menampilkan judul halaman dan tombol
kembali (back). Toolbar berfungsi sebagai navigasi bagian bawah, sedangkan Tabbar digunakan untuk
navigasi berbasis tab. Panel digunakan sebagai menu samping atau sidebar yang dapat dibuka dan
ditutup. Semua komponen navigasi ini bekerja bersama sistem routing untuk mengarahkan pengguna ke
halaman yang sesuai.
Salah satu keunggulan routing Framework7 adalah kemampuannya dalam mengatur transisi halaman.
Setiap perpindahan halaman dapat diberikan animasi tertentu, seperti slide atau fade, sehingga
perpindahan terasa halus dan profesional. Animasi ini membuat aplikasi terlihat seperti aplikasi native
meskipun dibangun menggunakan teknologi web.
Pada tahap lanjut pemrograman, routing Framework7 juga dapat digunakan untuk mengirim dan
menerima data antar halaman. Data dapat dikirim melalui parameter route dan kemudian diproses
pada halaman tujuan. Hal ini memungkinkan pengembang membuat aplikasi yang lebih dinamis, seperti
halaman detail, profil pengguna, atau halaman hasil pencarian.
Dengan memahami routing dan navigasi pada Framework7, peserta didik dapat membangun aplikasi
yang memiliki alur penggunaan yang jelas, navigasi yang rapi, dan tampilan yang responsif. Penguasaan
routing menjadi salah satu indikator penting dalam pemrograman tahap lanjut karena menunjukkan
kemampuan siswa dalam mengelola struktur aplikasi secara menyeluruh, bukan hanya sekadar membuat
tampilan.

Tema dan Tampilan

Framework7 menyediakan dua tema utama, yaitu iOS dan Material Design. Tema ini memungkinkan
tampilan aplikasi menyesuaikan dengan sistem operasi target. Penggunaan tema membantu menciptakan
tampilan aplikasi yang konsisten, profesional, dan menyerupai aplikasi native.

Komponen Navigasi

Framework7 menyediakan berbagai komponen navigasi seperti Navbar sebagai navigasi atas, Toolbar
sebagai navigasi bawah, Tabbar sebagai menu berbasis tab, dan Panel sebagai menu samping.
Komponen navigasi ini membantu pengguna berpindah halaman dengan mudah dan terstruktur.

Komponen Konten

Komponen konten Framework7 meliputi Card untuk menampilkan informasi terstruktur, List untuk
menampilkan data dalam bentuk daftar, serta Form untuk menerima input pengguna. Komponen ini
mempermudah pengembang dalam menyusun tampilan aplikasi yang rapi dan mudah digunakan.

Komponen Interaksi

Framework7 menyediakan komponen interaksi seperti Toast untuk pesan singkat, Alert atau Dialog
untuk konfirmasi, Popup untuk tampilan tambahan, serta Preloader sebagai indikator loading.
Komponen ini meningkatkan interaksi dan pengalaman pengguna dalam aplikasi.

Peran JavaScript

JavaScript memiliki peran penting dalam Framework7. JavaScript digunakan untuk menangani event,
logika aplikasi, dan interaksi pengguna. Tanpa JavaScript, Framework7 tidak dapat berjalan secara
optimal karena seluruh fitur dinamis dikendalikan oleh JavaScript.

Framework7 Tahap Lanjut

Pada tahap lanjut, Framework7 digunakan untuk membangun aplikasi mobile sederhana secara utuh.
Peserta didik tidak hanya memahami teori, tetapi juga mampu mengintegrasikan routing, komponen UI,
event JavaScript, serta pengaturan tampilan responsif dalam satu aplikasi.

Integrasi dengan Teknologi Lain

Framework7 dapat dikombinasikan dengan teknologi lain seperti Cordova atau Capacitor. Integrasi ini
memungkinkan aplikasi web dibangun menjadi file APK sehingga dapat dijalankan di perangkat mobile
seperti aplikasi native.

Penutup

Melalui pembelajaran Framework7 tahap lanjut, peserta didik diharapkan mampu memahami konsep
pemrograman modern, mengelola struktur aplikasi, serta mengembangkan aplikasi mobile berbasis web
secara mandiri dan profesional.