Selamat datang di Pemrograman Berbasis Platform Semester Genap 2023/2024. Situs web ini akan memuat informasi terkait dengan perkuliahan yang akan dipublikasikan secara rutin, seperti dokumen tutorial, tugas individu, dan tugas kelompok. Harap cek situs web ini secara berkala.
Perlu diperhatikan selain tujuan pembelajaran khusus seperti tertulis di atas, peserta kuliah juga perlu mempelajari dan dilatih beberapa aspek kecendekiaan sebagai calon sarjana. Di antaranya yang relevan dalam kuliah ini adalah keteguhan (grit), kemandirian, ketelitian, termasuk juga metakognitif (secara sederhana bisa diartikan kemampuan mengatur strategi belajar yang sesuai dengan dirinya meliputi perencanaan, monitoring dan evaluasi proses belajar mandiri), termasuk di dalamnya kemampuan untuk memahami, mengkomunikasikan masalah, diskusi dan bertanya, sehingga peserta kuliah juga perlu siap bersikap positif dengan kondisi-kondisi yang secara tidak langsung atau tidak pasti akan dihadapi dan mungkin dapat menghabiskan banyak waktu. Kondisi tersebut bisa dianggap kendala, seperti keterbatasan sumber daya, bug tools, kesulitan teknis atau lainnya. Walaupun dirasakan menyulitkan, perlu diupayakan untuk disikapi dengan positif agar dapat menjadi manfaat terkait aspek kecendekiaan yang perlu dilatih peserta kuliah. Sikap negatif hanya akan memperburuk keadaan dan menghilangkan manfaat tugas ini untuk pembelajaran yang akan dapat dirasakan di kemudian hari. Tim asisten dan dosen melalui sarana yang ada, akan berusaha semampunya melayani pertanyaan, keluhan, dan membantu proses pembelajaran peserta agar peserta bisa menjalani perkuliahan dan belajar semaksimal mungkin.
Sebagai selingan, bila rekan-rekan lelah dan bingung menghadapi error yang belum kunjung terselesaikan, berikut ini ada video yang cukup populer dan mudah-mudahan bisa menambah semangat untuk tetap teguh mengerjakan dan berlatih demi kesuksesan di kemudian hari.
Selamat mengerjakan. \ud83d\ude04
"},{"location":"tk/pts/#aturan-umum-tugas-kelompok","title":"Aturan Umum Tugas Kelompok","text":"
Satu kelompok terdiri atas 5-6 orang.
Satu kelompok membuat satu repositori Git di dalam satu organisasi yang digunakan oleh seluruh anggota kelompok untuk bekerja sama. Kumpulkan tautan repositori ke Scele.
Setiap kelompok dipersilakan mencari ide sendiri mengenai aplikasi yang akan dibuat. Tema aplikasi adalah makanan dan minuman (food and beverage). Tema ini dipilih karena tiga alasan:
Pada Semester Genap 2023/2024, ada momen bulan Ramadan. Biasanya ada banyak acara bukber (buka puasa bersama) pada bulan Ramadan. Acara-acara bukber tersebut dapat menjadi peluang usaha makanan dan minuman.
Setelah bulan Ramadan, ada Hari Raya Idulfitri. Perayaan Hari Raya Idulfitri juga dapat menjadi peluang usaha kue kering khas Idulfitri.
Selain momen bulan Ramadan dan Hari Raya Idulfitri, tinggal di lingkungan sekitar kampus juga dapat menjadi peluang usaha katering untuk kegiatan kampus dan untuk mahasiswa yang tidak sempat memasak.
Setiap kelompok mengimplementasikan dataset makanan dan minuman dalam bentuk class Models dan menyimpan data dari dataset tersebut ke dalam database Django. Dataset makanan dan minuman harus berisi minimal 100 makanan dan/atau minuman. Sumber dataset makanan dan minuman boleh berasal dari mana saja, misalnya dari Kaggle. Contoh URL dataset yang dapat digunakan:
Indonesia food delivery GoFood product list
Indonesian Food Recipes
Indonesian Food and Drink Nutrition Dataset
Setiap anggota kelompok mengerjakan modul yang berbeda. Modul ditentukan oleh kelompok yang disesuaikan dengan ide aplikasi yang sudah didiskusikan dalam kelompok.
Tugas kelompok dikumpulkan sebagai kesatuan aplikasi web.
"},{"location":"tk/pts/#aturan-khusus-per-anggota-kelompok","title":"Aturan Khusus per Anggota Kelompok","text":"
Menerapkan Models dengan membuat, memanfaatkan yang sudah disediakan Django, atau memanfaatkan yang sudah dibuat oleh anggota kelompok (di modul lain).
Menerapkan Views untuk memproses request dan mengolah data untuk menghasilkan respons menggunakan templat HTML maupun mengembalikan respons JSON.
Menerapkan templat HTML dengan kerangka yang sistematis dan efisien, seperti base.html, header.html, dan footer.html.
Menerapkan responsive framework pada templat HTML (seperti Bootstrap atau Tailwind).
Memiliki halaman form yang dapat menerima masukan dari pengguna kemudian diproses oleh Views. Contoh pemrosesan oleh Views adalah insert data ke dalam Models, query data dari Models, dan update data pada Models.
Menerapkan JavaScript dengan pemanggilan AJAX.
Menerapkan filter informasi bagi pengguna yang sudah log in saja. Contohnya adalah data alamat, umur, dan nomor ponsel hanya dapat dilihat oleh pengguna yang sudah log in saja.
Menerapkan filter pada dataset makanan dan minuman yang ditampilkan. Contohnya adalah menampilkan daftar makanan dan minuman berdasarkan harga.
"},{"location":"tk/pts/#tahapan-tugas-kelompok","title":"Tahapan Tugas Kelompok","text":"
Tahapan dan deliverables Tenggat Waktu dan Keterangan Tahap I (40%)
Pembuatan GitHub kelompok
README.md pada GitHub yang berisi:
Nama-nama anggota kelompok
Deskripsi aplikasi (cerita aplikasi yang diajukan serta kebermanfaatannya)
Daftar modul yang akan diimplementasikan
Sumber dataset makanan dan minuman
Role atau peran pengguna beserta deskripsinya (karena bisa saja lebih dari satu jenis pengguna yang mengakses aplikasi)
Tenggat Waktu: Rabu, 13 Maret 2024, pukul 23:55 WIB Kumpulkan tautan GitHub dengan code base proyek Django yang sudah disiapkan di GitHub ke slot submisi yang tersedia di SCELE. Tahap II (60%)
(Modul sudah terimplementasi dengan baik)
Modul aplikasi dari tiap anggota kelompok
URL Mapping untuk modul
Models untuk modul
Views untuk modul
Terintegrasi sebagai satu kesatuan aplikasi
Fungsionalitas sesuai dengan rancangan desain
Tenggat Waktu: Rabu, 17 April 2024, pukul 23.55 WIB
Kriteria Submisi: Seluruh modul yang dikerjakan oleh setiap anggota kelompok sudah muncul dan dapat diakses pada proyek Django
Bonus (5%)
Unit Test (passed) untuk semua aspek, diharapkan code coverage bisa mencapai minimal 80%
GitHub Actions (CI/CD) sudah terkonfigurasi hingga deployment
Pipeline status dan tautan aplikasi yang sudah di-deploy tersedia di berkas README.md pada GitHub
"},{"location":"tugas/tugas-1/","title":"Tugas 1: Menulis Esai","text":"
Pemrograman Berbasis Platform (CSGE602022) \u2014 diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Genap 2023/2024
Tulislah sebuah esai minimal 1000 kata yang mengandung poin-poin sebagai berikut.
Pilihlah salah satu platform yang telah dijelaskan dalam Slide 1. Sebutkan nama platform yang Anda pilih.
Sebutkan 3 perangkat dan teknologi yang tergolong dalam platform tersebut yang pernah Anda gunakan.
Untuk masing-masing perangkat dan teknologi yang Anda sebutkan, ceritakan pengalaman Anda saat\u00a0menggunakannya.
Menurut Anda, apakah ada satu platform yang paling penting di antara semua programming platform? Jika ada, platform apa dan mengapa platform tersebut paling penting? Jika tidak ada, jelaskan\u00a0alasannya!
Pada tugas ini, kamu akan mengimplementasikan konsep Model-View-Template serta beberapa hal yang sudah kamu pelajari di kelas dan tutorial. Perlu diperhatikan bahwa proyek yang dibuat pada tugas berbeda dengan proyek yang digunakan pada tutorial.
Tema besar aplikasi untuk tugas PBP adalah aplikasi tracker. Pada semester ini, kamu diberikan kebebasan dalam memilih nama dan tema kecil aplikasi, kecuali book tracker yang sudah digunakan pada tutorial. Namun, aplikasi dari tugas kamu harus memiliki atribut-atribut berikut pada model aplikasimu.
name sebagai nama item dengan tipe CharField.
amount sebagai jumlah item dengan tipe IntegerField.
description sebagai deskripsi item dengan tipe TextField.
Kamu dipersilakan untuk menambahkan atribut lainnya jika diinginkan, seperti date, category. Namun, model aplikasi kamu wajib memiliki ketiga atribut wajib di atas (name, amount, description). Nama dari ketiga atribut di atas dapat disesuaikan lagi dengan kebutuhan aplikasimu.
Beberapa contoh ide aplikasi pengelolaan yang dapat kamu buat adalah sebagai berikut.
TV Series Tracker: title, episodes, synopsis, rating, date.
[ ] Membuat aplikasi dengan nama main pada proyek tersebut.
[ ] Melakukan routing pada proyek agar dapat menjalankan aplikasi main.
[ ] Membuat model pada aplikasi main dengan nama Item dan memiliki atribut wajib sebagai berikut.
name sebagai nama item dengan tipe CharField.
amount sebagai jumlah item dengan tipe IntegerField.
description sebagai deskripsi item dengan tipe TextField.
[ ] Membuat sebuah fungsi pada views.py untuk dikembalikan ke dalam sebuah template HTML yang menampilkan nama aplikasi serta nama dan kelas kamu.
[ ] Membuat sebuah routing pada urls.py aplikasi main untuk memetakan fungsi yang telah dibuat pada views.py.
[ ] Melakukan deployment ke PWS terhadap aplikasi yang sudah dibuat sehingga nantinya dapat diakses oleh teman-temanmu melalui Internet.
[ ] Membuat sebuah README.md yang berisi tautan menuju aplikasi PWS yang sudah di-deploy, serta jawaban dari beberapa pertanyaan berikut.
Jelaskan bagaimana cara kamu mengimplementasikan checklist di atas secara step-by-step (bukan hanya sekadar mengikuti tutorial).
Buatlah bagan yang berisi request client ke web aplikasi berbasis Django beserta responnya dan jelaskan pada bagan tersebut kaitan antara urls.py, views.py, models.py, dan berkas html.
Jelaskan mengapa kita menggunakan virtual environment? Apakah kita tetap dapat membuat aplikasi web berbasis Django tanpa menggunakan virtual environment?
Jelaskan apakah itu MVC, MVT, MVVM dan perbedaan dari ketiganya.
Perhatikan bahwa kamu harus mengerjakan tugas ini menggunakan repositori yang berbeda dengan tutorial.
"},{"location":"tugas/tugas-2/#tenggat-waktu-pengerjaan","title":"Tenggat Waktu Pengerjaan","text":"
Tenggat waktu pengerjaan Tugas 2 adalah hari Selasa, 13 Februari, pukul 12.00 siang.
Harap mengumpulkan link repositori yang kamu gunakan ke dalam slot submisi yang telah disediakan di SCELE.
"},{"location":"tugas/tugas-3/","title":"Tugas 3: Implementasi Form dan Data Delivery pada Django","text":"
Pemrograman Berbasis Platform (CSGE602022) \u2014 diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Genap 2023/2024
Pada tugas ini, kamu akan mengimplementasikan konsep authentication, session, cookies, serta menerapkan beberapa konsep yang telah dipelajari selama sesi tutorial.
Kerjakan checklist untuk tugas ini secara berurutan:
[ ] Mengimplementasikan fungsi registrasi, login, dan logout untuk memungkinkan pengguna untuk mengakses aplikasi sebelumnya dengan lancar.
[ ] Membuat dua akun pengguna dengan masing-masing tiga dummy data menggunakan model buku yang telah dibuat pada aplikasi sebelumnya untuk setiap akun di lokal.
[ ] Menghubungkan model Item dengan User.
[ ] Menampilkan detail informasi pengguna yang sedang logged in seperti username dan menerapkan cookies seperti last login pada halaman utama aplikasi.
[ ] Menjawab beberapa pertanyaan berikut pada README.md pada root folder (silakan modifikasi README.md yang telah kamu buat sebelumnya; tambahkan subjudul untuk setiap tugas).
[ ] Apa itu Django UserCreationForm, dan jelaskan apa kelebihan dan kekurangannya?
[ ] Apa perbedaan antara autentikasi dan otorisasi dalam konteks Django, dan mengapa keduanya penting?
[ ] Apa itu cookies dalam konteks aplikasi web, dan bagaimana Django menggunakan cookies untuk mengelola data sesi pengguna?
[ ] Apakah penggunaan cookies aman secara default dalam pengembangan web, atau apakah ada risiko potensial yang harus diwaspadai?
[ ] Jelaskan bagaimana cara kamu mengimplementasikan checklist di atas secara step-by-step (bukan hanya sekadar mengikuti tutorial).
[ ] Melakukan add-commit-push ke GitHub.
"},{"location":"tugas/tugas-4/#tenggat-waktu-pengerjaan","title":"Tenggat Waktu Pengerjaan","text":"
Tenggat waktu pengerjaan Tugas 4 adalah Selasa, 27 Februari 2023, pukul 12.00 siang.
Asisten dosen akan mengecek last commit dari repositori tugas lab, sehingga kamu tidak perlu mengumpulkan tautan repositori ke dalam slot submisi.
"},{"location":"tugas/tugas-5/","title":"Tugas 5: Desain Web menggunakan HTML, CSS dan Framework CSS","text":"
Pemrograman Berbasis Platform (CSGE602022) \u2014 diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Genap 2023/2024
Pada tugas ini, kamu akan mengimplementasikan desain web berdasarkan beberapa hal yang sudah kamu pelajari selama tutorial (CSS, Framework, dsb).
Checklist untuk tugas ini adalah sebagai berikut:
[ ] Kustomisasi desain pada templat HTML yang telah dibuat pada Tugas 4 dengan menggunakan CSS atau CSS framework (seperti Bootstrap, Tailwind, Bulma) dengan ketentuan sebagai berikut
[ ] Kustomisasi halaman daftar item menjadi lebih berwarna dan menggunakan apporach lain selain tabel seperti dengan menggunakan Card.
[ ] Menambahkan opsi update dan delete pada masing-masing item.
[ ] Menjawab beberapa pertanyaan berikut pada README.md pada root folder (silakan modifikasi README.md yang telah kamu buat sebelumnya; tambahkan subjudul untuk setiap tugas).
[ ] Jelaskan manfaat dari setiap element selector dan kapan waktu yang tepat untuk menggunakannya.
[ ] Jelaskan HTML5 Tag yang kamu ketahui.
[ ] Jelaskan perbedaan antara margin dan padding.
[ ] Jelaskan perbedaan antara framework CSS Tailwind dan Bootstrap. Kapan sebaiknya kita menggunakan Bootstrap daripada Tailwind, dan sebaliknya?
[ ] Melakukan add-commit-push ke GitHub.
"},{"location":"tugas/tugas-5/#tenggat-waktu-pengerjaan","title":"Tenggat Waktu Pengerjaan","text":"
Tenggat waktu pengerjaan Tugas 5 adalah Selasa, 5 Maret, pukul 12.00 siang.
Asisten dosen akan mengecek last commit dari repositori tugas lab, sehingga kamu tidak perlu mengumpulkan tautan repositori ke dalam slot submisi.
"},{"location":"tugas/tugas-6/","title":"Tugas 6: JavaScript dan Asynchronous JavaScript","text":"
Pemrograman Berbasis Platform (CSGE602022) \u2014 diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Genap 2023/2024
Pada tugas ini, kamu akan mengimplementasikan AJAX pada aplikasi yang telah kamu buat pada tugas sebelumnya.
Checklist untuk tugas ini adalah sebagai berikut:
[ ] Mengubah tugas 5 yang telah dibuat sebelumnya menjadi menggunakan AJAX.
[ ] AJAX GET
[ ] Ubahlah kode cards data item agar dapat mendukung AJAX GET.
[ ] Lakukan pengambilan task menggunakan AJAX GET.
[ ] AJAX POST
[ ] Buatlah sebuah tombol yang membuka sebuah modal dengan form untuk menambahkan item.
Modal di-trigger dengan menekan suatu tombol pada halaman utama. Saat penambahan item berhasil, modal harus ditutup dan input form harus dibersihkan dari data yang sudah dimasukkan ke dalam form sebelumnya.
[ ] Buatlah fungsi view baru untuk menambahkan item baru ke dalam basis data.
[ ] Buatlah path /create-ajax/ yang mengarah ke fungsi view yang baru kamu buat.
[ ] Hubungkan form yang telah kamu buat di dalam modal kamu ke path /create-ajax/.
[ ] Lakukan refresh pada halaman utama secara asinkronus untuk menampilkan daftar item terbaru tanpa reload halaman utama secara keseluruhan.
[ ] Menjawab beberapa pertanyaan berikut pada README.md pada root folder (silakan modifikasi README.md yang telah kamu buat sebelumnya; tambahkan subjudul untuk setiap tugas).
Jelaskan perbedaan antara asynchronous programming dengan synchronous programming.
Dalam penerapan JavaScript dan AJAX, terdapat penerapan paradigma event-driven programming. Jelaskan maksud dari paradigma tersebut dan sebutkan salah satu contoh penerapannya pada tugas ini.
Jelaskan penerapan asynchronous programming pada AJAX.
Pada PBP kali ini, penerapan AJAX dilakukan dengan menggunakan Fetch API daripada library jQuery. Bandingkanlah kedua teknologi tersebut dan tuliskan pendapat kamu teknologi manakah yang lebih baik untuk digunakan.
Jelaskan bagaimana cara kamu mengimplementasikan checklist di atas secara step-by-step (bukan hanya sekadar mengikuti tutorial).
[ ] Melakukan add-commit-push ke GitHub.
"},{"location":"tugas/tugas-6/#tenggat-waktu-pengerjaan","title":"Tenggat Waktu Pengerjaan","text":"
Tenggat waktu pengerjaan Tugas 6 adalah Jumat, 15 Maret 2024, pukul 12.00 siang.
Asisten dosen akan mengecek last commit dari repositori tugas lab, sehingga kamu tidak perlu mengumpulkan tautan repositori ke dalam slot submisi.
"},{"location":"tugas/tugas-7/","title":"Tugas 7: Elemen Dasar Flutter","text":"
Pemrograman Berbasis Platform (CSGE602022) \u2014 diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Genap 2023/2024
Pada tugas ini, kamu akan mengimplementasikan aplikasi yang telah kamu kembangkan menggunakan Flutter berdasarkan beberapa hal yang sudah kamu pelajari selama tutorial.
Checklist untuk tugas ini adalah sebagai berikut:
[ ] Membuat sebuah program Flutter baru dengan tema tracker seperti tugas-tugas sebelumnya.
[ ] Membuat tiga tombol sederhana dengan masing-masing warna berbeda yang memiliki ikon dan teks untuk:
[ ] Melihat daftar item (Lihat Item)
[ ] Menambah item (Tambah Item)
[ ] Logout (Logout)
[ ] Memunculkan Snackbar dengan tulisan:
[ ] \"Kamu telah menekan tombol Lihat Item\" ketika tombol Lihat Item ditekan.
[ ] \"Kamu telah menekan tombol Tambah Item\" ketika tombol Tambah Item ditekan.
[ ] \"Kamu telah menekan tombol Logout\" ketika tombol Logout ditekan.
[ ] Menjawab beberapa pertanyaan berikut pada README.md pada root folder.
[ ] Apa perbedaan utama antara stateless dan stateful widget dalam konteks pengembangan aplikasi Flutter?
[ ] Sebutkan seluruh widget yang kamu gunakan untuk menyelesaikan tugas ini dan jelaskan fungsinya masing-masing.
[ ] Jelaskan bagaimana cara kamu mengimplementasikan checklist di atas secara step-by-step (bukan hanya sekadar mengikuti tutorial)
[ ] Melakukan add-commit-push ke GitHub.
"},{"location":"tugas/tugas-7/#tenggat-waktu-pengerjaan","title":"Tenggat Waktu Pengerjaan","text":"
Tenggat waktu pengerjaan Tugas 7 adalah Selasa, 16 April, pukul 12.00 siang.
Harap mengumpulkan link repositori yang kamu gunakan ke dalam slot submisi yang telah disediakan di SCELE.
"},{"location":"tugas/tugas-8/","title":"Tugas 8: Flutter Navigation, Layouts, Forms, and Input Elements","text":"
Pemrograman Berbasis Platform (CSGE602022) \u2014 diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Genap 2023/2024
Pada tugas ini, kamu akan mengimplementasikan navigation, layout, form, dan form input elements pada aplikasi Flutter yang kamu buat pada tugas sebelumnya.
Checklist untuk tugas ini adalah sebagai berikut:
[ ] Membuat minimal satu halaman baru pada aplikasi, yaitu halaman formulir tambah item baru dengan ketentuan sebagai berikut:
[ ] Memakai minimal tiga elemen input, yaitu name, amount, description. Tambahkan elemen input sesuai dengan model pada aplikasi tugas Django yang telah kamu buat.
[ ] Memiliki sebuah tombol Save.
[ ] Setiap elemen input di formulir juga harus divalidasi dengan ketentuan sebagai berikut:
[ ] Setiap elemen input tidak boleh kosong.
[ ] Setiap elemen input harus berisi data dengan tipe data atribut modelnya.
[ ] Mengarahkan pengguna ke halaman form tambah item baru ketika menekan tombol Tambah Item pada halaman utama.
[ ] Memunculkan data sesuai isi dari formulir yang diisi dalam sebuah pop-up setelah menekan tombol Save pada halaman formulir tambah item baru.
[ ] Membuat sebuah drawer pada aplikasi dengan ketentuan sebagai berikut:
[ ] Drawer minimal memiliki dua buah opsi, yaitu Halaman Utama dan Tambah Item.
[ ] Ketika memiih opsi Halaman Utama, maka aplikasi akan mengarahkan pengguna ke halaman utama.
[ ] Ketika memiih opsi Tambah Item, maka aplikasi akan mengarahkan pengguna ke halaman form tambah item baru.
[ ] Menjawab beberapa pertanyaan berikut pada README.md pada root folder (silakan modifikasi README.md yang telah kamu buat sebelumnya; tambahkan subjudul untuk setiap tugas).
[ ] Jelaskan perbedaan antara Navigator.push() dan Navigator.pushReplacement(), disertai dengan contoh mengenai penggunaan kedua metode tersebut yang tepat!
[ ] Jelaskan masing-masing layout widget pada Flutter dan konteks penggunaannya masing-masing!
[ ] Sebutkan apa saja elemen input pada form yang kamu pakai pada tugas kali ini dan jelaskan mengapa kamu menggunakan elemen input tersebut!
[ ] Bagaimana penerapan clean architecture pada aplikasi Flutter?
[ ] Jelaskan bagaimana cara kamu mengimplementasikan checklist di atas secara step-by-step! (bukan hanya sekadar mengikuti tutorial)
[ ] Melakukan add-commit-push ke GitHub.
"},{"location":"tugas/tugas-8/#tenggat-waktu-pengerjaan","title":"Tenggat Waktu Pengerjaan","text":"
Tenggat waktu pengerjaan Tugas 8 adalah Selasa, 23 April 2024, pukul 12.00 siang.
Asisten dosen akan mengecek last commit dari repositori tugas lab, sehingga kamu tidak perlu mengumpulkan tautan repositori ke dalam slot submisi.
"},{"location":"tugas/tugas-9/","title":"Tugas 9: Integrasi Web Service dengan Aplikasi Flutter","text":"
Pemrograman Berbasis Platform (CSGE602022) \u2014 diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Genap 2023/2024
Pada tugas ini, kamu akan mengintegrasikan layanan Django yang sudah kamu buat pada tugas-tugas sebelumnya dengan aplikasi Flutter yang sudah kamu buat sebelumnya.
Checklist untuk tugas ini adalah sebagai berikut:
[ ] Memastikan deployment ke PWS proyek tugas Django kamu telah berjalan dengan baik.
[ ] Membuat halaman login pada proyek tugas Flutter.
[ ] Mengintegrasikan sistem autentikasi Django dengan proyek tugas Flutter.
[ ] Membuat model kustom sesuai dengan proyek aplikasi Django.
[ ] Membuat halaman yang berisi daftar semua item yang terdapat pada ** JSON diendpoint Django yang telah kamu deploy.
[ ] Tampilkan name, amount, dan description dari masing-masing item pada halaman ini.
[ ] Membuat halaman detail untuk setiap item yang terdapat pada halaman daftar Item.
[ ] Halaman ini dapat diakses dengan menekan salah satu item pada halaman daftar Item.
[ ] Tampilkan seluruh atribut pada model item kamu pada halaman ini.
[ ] Tambahkan tombol untuk kembali ke halaman daftar item.
[ ] Menjawab beberapa pertanyaan berikut pada README.md pada root folder (silakan modifikasi README.md yang telah kamu buat sebelumnya; tambahkan subjudul untuk setiap tugas).
[ ] Apakah bisa kita melakukan pengambilan data JSON tanpa membuat model terlebih dahulu? Jika iya, apakah hal tersebut lebih baik daripada membuat model sebelum melakukan pengambilan data JSON?
[ ] Jelaskan fungsi dari CookieRequest dan jelaskan mengapa instance CookieRequest perlu untuk dibagikan ke semua komponen di aplikasi Flutter.
[ ] Jelaskan mekanisme pengambilan data dari JSON hingga dapat ditampilkan pada Flutter.
[ ] Jelaskan mekanisme autentikasi dari input data akun pada Flutter ke Django hingga selesainya proses autentikasi oleh Django dan tampilnya menu pada Flutter.
[ ] Sebutkan seluruh widget yang kamu pakai pada tugas ini dan jelaskan fungsinya masing-masing.
[ ] Jelaskan bagaimana cara kamu mengimplementasikan checklist di atas secara step-by-step! (bukan hanya sekadar mengikuti tutorial).
[ ] Melakukan add-commit-push ke GitHub.
"},{"location":"tugas/tugas-9/#tenggat-waktu-pengerjaan","title":"Tenggat Waktu Pengerjaan","text":"
Tenggat waktu pengerjaan Tugas 9 adalah Selasa, 30 April 2024, pukul 12.00 siang.
Asisten dosen akan mengecek last commit dari repositori tugas lab, sehingga kamu tidak perlu mengumpulkan tautan repositori ke dalam slot submisi.
"},{"location":"tutorial/tutorial-0/","title":"Tutorial 0: Konfigurasi dan Instalasi Git dan Django","text":"
Pemrograman Berbasis Platform (CSGE602022) \u2014 diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Ganjil 2023/2024
Setelah menyelesaikan tutorial ini, mahasiswa diharapkan untuk dapat:
Mengerti perintah-perintah dasar Git yang perlu diketahui untuk mengerjakan proyek aplikasi.
Menggunakan perintah-perintah dasar Git yang perlu diketahui untuk mengerjakan proyek aplikasi.
Membuat repositori Git lokal dan daring (GitHub).
Menambahkan remote antara repositori Git lokal dan repositori daring pada GitHub.
Memahami branching pada Git dan mampu melakukan merge request/pull request.
"},{"location":"tutorial/tutorial-0/#tutorial-pembuatan-akun-github-lewati-jika-sudah-ada","title":"Tutorial: Pembuatan Akun GitHub (Lewati Jika Sudah Ada)","text":""},{"location":"tutorial/tutorial-0/#pengenalan-tentang-git-dan-github","title":"Pengenalan Tentang Git dan GitHub","text":"
Pengenalan awal ini akan membantumu memahami dasar-dasar mengenai Git dan platform berbasis web yang dikenal sebagai GitHub.
"},{"location":"tutorial/tutorial-0/#git-sistem-kontrol-versi-yang-kuat","title":"Git: Sistem Kontrol Versi yang Kuat","text":"
Git adalah sistem kontrol versi yang membantumu melacak perubahan pada kode sumber proyek.
Dengan Git, kamu dapat memantau semua revisi yang telah dilakukan pada proyekmu seiring waktu.
"},{"location":"tutorial/tutorial-0/#github-platform-kolaborasi-menggunakan-git","title":"GitHub: Platform Kolaborasi Menggunakan Git","text":"
GitHub adalah platform berbasis web yang memungkinkanmu untuk menyimpan, mengelola, dan berkolaborasi pada proyek-proyek menggunakan Git.
Ini memberikan wadah yang aman untuk meng-host proyekmu dan berinteraksi dengan rekan tim melalui Git.
Git dan GitHub memainkan peran penting dalam pengembangan perangkat lunak modern dan kolaborasi tim.
Keduanya memungkinkan tim untuk melacak perubahan kode, menyimpan versi, dan bekerja bersama dalam proyek secara efisien.
Dengan pemahaman dasar mengenai Git dan GitHub, kamu siap untuk melangkah lebih jauh dalam dunia pengembangan perangkat lunak yang kolaboratif dan terstruktur.
"},{"location":"tutorial/tutorial-0/#langkah-1-membuat-akun-di-github","title":"Langkah 1: Membuat Akun di GitHub","text":"
Langkah selanjutnya adalah membuat akun di GitHub, yang akan memungkinkanmu untuk mulai berkolaborasi pada proyek-proyek menggunakan Git.
Buka Situs Web GitHub
Buka peramban web dan akses GitHub.
Membuat Akun
Di halaman beranda GitHub, cari tombol Sign up di pojok kanan atas halaman.
Klik tombol tersebut untuk memulai proses pendaftaran akun.
Isi Formulir Pendaftaran
Isi formulir pendaftaran dengan informasi yang diperlukan, seperti nama pengguna yang ingin digunakan, alamat email yang valid, dan kata sandi yang aman.
Pastikan kamu menyimpan informasi ini dengan aman untuk masuk ke akunmu di masa mendatang.
Verifikasi Akun Melalui Email
Setelah mengisi formulir, GitHub akan mengirimkan email verifikasi ke alamat email yang kamu berikan.
Buka email tersebut dan ikuti instruksi untuk verifikasi akunmu.
Akun GitHub Siap Digunakan
Setelah verifikasi selesai, kamu akan memiliki akun GitHub yang siap digunakan untuk berkolaborasi dalam proyek dan melacak perubahan menggunakan Git.
Catatan:
Akun GitHub adalah pintu masuk untuk terlibat dalam kolaborasi proyek dan menyimpan proyekmu di platform ini.
Pastikan informasi pendaftaran yang kamu berikan akurat dan aman.
"},{"location":"tutorial/tutorial-0/#selamat-kamu-telah-membuat-akun-github","title":"Selamat, Kamu Telah Membuat Akun GitHub","text":"
Kamu sekarang telah memiliki akun GitHub yang dapat digunakan untuk menyimpan proyek, berkolaborasi dengan orang lain, dan masih banyak lagi.
IDE (Integrated Development Environment) adalah perangkat lunak yang membantu para pengembang dalam menulis, mengedit, dan mengelola kode. Berikut adalah langkah-langkah untuk memasang IDE.
"},{"location":"tutorial/tutorial-0/#langkah-1-pemilihan-text-editor-atau-ide","title":"Langkah 1: Pemilihan Text Editor atau IDE","text":"
Pilihlah text editor atau IDE yang sesuai dengan preferensimu. Beberapa pilihan populer yang dapat kamu pertimbangkan meliputi:
Visual Studio Code
Sublime Text
PyCharm
Vim
"},{"location":"tutorial/tutorial-0/#langkah-2-proses-instalasi","title":"Langkah 2: Proses Instalasi","text":"
Pergi ke situs web resmi IDE yang kamu pilih.
Ikuti petunjuk yang diberikan untuk mengunduh installer IDE.
Jalankan installer dan ikuti instruksi di layar untuk menyelesaikan proses instalasi.
"},{"location":"tutorial/tutorial-0/#langkah-3-memulai-menggunakan-ide","title":"Langkah 3: Memulai Menggunakan IDE","text":"
Setelah proses instalasi selesai, buka IDE yang telah terinstal.
Eksplorasi antarmuka dan fitur yang disediakan oleh IDE untuk membantumu dalam pengembangan proyek.
Catatan:
Pastikan kamu memilih IDE yang sesuai dengan jenis proyek yang akan dikerjakan.
Jangan ragu untuk mengeksplorasi fitur-fitur IDE (contoh: extensions atau plugin) dan memanfaatkan sumber daya pendukung, seperti dokumentasi dan tutorial, untuk meningkatkan produktivitas dalam pengembangan perangkat lunak.
"},{"location":"tutorial/tutorial-0/#tutorial-instalasi-dan-konfigurasi-git","title":"Tutorial: Instalasi dan Konfigurasi Git","text":""},{"location":"tutorial/tutorial-0/#langkah-1-instalasi-git","title":"Langkah 1: Instalasi Git","text":"
Jika Git belum terpasang pada sistem, kamu dapat mengikuti langkah-langkah berikut untuk menginstalnya.
Buka situs web resmi Git di sini.
Pilih sistem operasi yang sesuai (Windows, macOS, atau Linux) dan unduh installer yang sesuai.
Jalankan installer yang telah diunduh dan ikuti petunjuk di layar untuk menyelesaikan proses instalasi.
"},{"location":"tutorial/tutorial-0/#langkah-2-konfigurasi-awal-git","title":"Langkah 2: Konfigurasi Awal Git","text":"
Setelah Git terpasang, langkah-langkah berikut akan membantumu mengatur konfigurasi awal sebelum mulai menggunakan Git.
Buatlah sebuah folder/direktori baru untuk menyimpan proyek Git kamu, kemudian masuklah ke direktori tersebut.
Salinlah path ke direktori yang sudah kamu buat.
Buka terminal atau command prompt pada sistem, kemudian pindah ke direktori yang sudah kamu buat dengan menjalankan perintah cd <path_direktori>
Inisiasi repositori baru dengan perintah git init. Perintah ini akan membuat repositori Git kosong di dalam direktori yang kamu tentukan.
"},{"location":"tutorial/tutorial-0/#langkah-3-konfigurasi-nama-pengguna-dan-email","title":"Langkah 3: Konfigurasi Nama Pengguna dan Email","text":"
Sebelum mulai berkontribusi ke repositori, konfigurasikan nama pengguna dan alamat email agar terhubung dengan commit-mu.
Atur username dan email yang akan diasosiasikan dengan pekerjaanmu ke repositori Git ini dengan menjalankan perintah di bawah ini. Sesuaikan dengan username dan email yang kamu gunakan pada GitHub.
Untuk memastikan konfigurasi telah diatur dengan benar pada repositori lokal, kamu dapat menjalankan perintah berikut.
git config --list\n
Catatan:
Pastikan untuk mengganti <NAME> dan <EMAIL> dengan informasi pribadimu
Gunakan langkah-langkah ini sebagai panduan untuk mengkonfigurasi Git sesuai kebutuhanmu.
"},{"location":"tutorial/tutorial-0/#tutorial-penggunaan-dasar-git","title":"Tutorial: Penggunaan Dasar Git","text":"
Repositori adalah tempat penyimpanan untuk proyek perangkat lunak, yang mencakup semua revisi dan perubahan yang telah dilakukan pada kode. Untuk mengeksekusi perintah-perintah Git, kamu dapat melakukannya pada repositori di GitHub, platform kolaboratif untuk mengelola proyek menggunakan Git.
"},{"location":"tutorial/tutorial-0/#langkah-1-melakukan-inisiasi-repositori-di-github","title":"Langkah 1: Melakukan Inisiasi Repositori di GitHub","text":"
Langkah pertama dalam penggunaan Git adalah melakukan inisiasi repositori di GitHub untuk memulai pelacakan perubahan pada proyekmu.
Buka GitHub melalui peramban web.
Buat Repositori Baru
Pada halaman beranda GitHub, buat repositori baru dengan nama my-first-repo.
Buka halaman repositori yang baru kamu buat. Pastikan untuk mengatur visibilitas proyek sebagai \"Public\" dan biarkan pengaturan lainnya pada nilai default.
Tentukan Direktori Lokal
Pilih direktori lokal di komputermu yang telah diinisiasi dengan Git. Inilah tempat kamu akan menyimpan versi lokal dari proyek.
Tambahkan Berkas README.md
Buat berkas baru dengan nama README.md dalam direktori lokal proyekmu.
Isi berkas README.md dengan informasi seperti nama, NPM, dan kelas. Contoh:
Nama : Pak Bepe\n\nNPM : 2201234567\n\nKelas : PBP A\n
Cek Status dan Lakukan Tracking
Buka command prompt atau terminal, lalu jalankan git status pada direktori yang sudah kamu pilih. Perintah ini akan menampilkan berkas-berkas yang belum di-track (untracked).
Gunakan perintah git add README.md untuk menandai berkas README.md sebagai berkas yang akan di-commit (tracked).
Commit Perubahan
Jalankan kembali git status dan pastikan berkas README.md sudah ditandai sebagai berkas yang akan di-commit.
Lanjutkan dengan menjalankan git commit -m \"<KOMENTAR KAMU>\" untuk membuat commit dengan pesan komentar yang sesuai dengan perubahan yang kamu lakukan.
Catatan:
Langkah ini akan membuat kamu siap untuk mulai melacak perubahan pada proyek menggunakan Git.
Good practice dalam memberikan komentar commit adalah menjelaskan dengan singkat apa yang kamu lakukan.
Komentar commit yang baik dapat membantumu dan rekan-rekan tim dalam memahami tujuan perubahan tersebut.
Hindari komentar yang terlalu umum atau ambigu, seperti Perbaikan bug atau Update file.
"},{"location":"tutorial/tutorial-0/#langkah-2-menghubungkan-repositori-lokal-dengan-repositori-di-github","title":"Langkah 2: Menghubungkan Repositori Lokal dengan Repositori di GitHub","text":"
Setelah melakukan inisiasi repositori lokal, langkah selanjutnya adalah menghubungkannya dengan repositori di GitHub agar kamu dapat berkolaborasi dan menyimpan perubahan di platform daring tersebut.
Buat Branch Utama Baru
Di terminal atau command prompt, jalankan perintah git branch -M main untuk membuat branch utama baru dengan nama \"main\".
Pastikan huruf \"M\" pada perintah -M ditulis dengan huruf kapital.
Hubungkan dengan Repositori di GitHub
Gunakan perintah git remote add origin <URL_REPO> untuk menghubungkan repositori lokal dengan repositori di GitHub.
Gantilah <URL_REPO> dengan URL HTTPS repositori yang telah kamu buat di GitHub. Contoh:
Terakhir, lakukan penyimpanan pertama ke GitHub dengan menjalankan perintah git push -u origin main.
Perintah ini akan mengirimkan semua perubahan yang ada pada branch saat ini (dalam hal ini adalah branch utama) di repositori lokal ke branch main di repositori GitHub.
Lakukan Pengecekan Kembali
Lakukan refresh pada halaman repositori kamu, seharusnya berkas README.md kamu sudah dapat terlihat.
Catatan:
Langkah ini penting untuk menjaga konsistensi antara repositori lokal dan repositori di GitHub.
Proses ini memungkinkanmu untuk mulai berkolaborasi dan menyimpan perubahan proyek secara terstruktur di platform GitHub.
"},{"location":"tutorial/tutorial-0/#langkah-3-melakukan-cloning-terhadap-suatu-repositori","title":"Langkah 3: Melakukan Cloning terhadap Suatu Repositori","text":"
Cloning repositori adalah proses menduplikasi seluruh konten dari repositori yang ada di platform GitHub ke komputer lokal. Langkah-langkahnya adalah sebagai berikut.
Buka halaman repositori di GitHub yang telah kamu buat sebelumnya.
Salin URL Clone
Klik tombol Code di pojok kanan atas halaman repositori di GitHub.
Pilih opsi HTTPS untuk salin URL clone.
Clone Repositori ke Komputer Lokal
Buka terminal atau command prompt di direktori yang berbeda dari tempat repositori lokalmu sebelumnya.
Jalankan perintah git clone <URL_CLONE> (gantilah URL_CLONE dengan URL yang telah kamu salin).
Perintah ini akan menduplikasi seluruh repositori ke komputer lokalmu.
Saat ini, kamu memiliki tiga repositori:
Repositori asli di komputer lokal.
Repositori daring di GitHub yang terhubung dengan repositori lokal.
Repositori baru hasil dari proses cloning yang terhubung dengan repositori GitHub.
Catatan:
Langkah ini memungkinkanmu untuk bekerja dengan repositori di berbagai tempat dengan mudah.
"},{"location":"tutorial/tutorial-0/#langkah-4-melakukan-push-kepada-suatu-repositori","title":"Langkah 4: Melakukan Push kepada Suatu Repositori","text":"
Seperti yang sudah disinggung sebelumnya (Langkah 2), push adalah proses mengirimkan perubahan yang kamu lakukan di repositori lokal ke repositori di GitHub. Langkah-langkahnya adalah sebagai berikut.
Buka kembali repositori lokal yang pertama kali kamu buat.
Ubah isi berkas README.md dengan menambahkan atribut Hobi. Contohnya adalah sebagai berikut.
Nama : Pak Bepe\n\nNPM : 2201234567\n\nKelas : PBP A\n\nHobi : Tidur\n
Lakukan Push ke Repositori GitHub
Buka terminal atau command prompt, kemudian masuk ke repositori lokal yang telah kamu ubah.
Jalankan perintah git status untuk melihat status perubahan yang dilakukan.
Jalankan git add README.md untuk menambahkan perubahan ke dalam tahap yang akan di-commit.
Lakukan commit dengan menjalankan perintah git commit -m \"<KOMENTAR KAMU>\" untuk memberikan deskripsi singkat tentang perubahan yang kamu lakukan.
Terakhir, jalankan git push -u origin <NAMA_BRANCH> untuk mengirim perubahan ke branch yang dipilih pada repositori GitHub (gantilah \"Nama Branch\" dengan target branch, misalnya main).
Lakukan Pengecekan Kembali
Lakukan refresh halaman kamu, seharusnya berkas README.md kamu sudah berubah.
Catatan: Jika kamu ingin mengambil semua perubahan yang belum di-stage (ditandai untuk dimasukkan dalam commit) dari seluruh direktori proyek kamu, jalankan git add ..
"},{"location":"tutorial/tutorial-0/#langkah-5-melakukan-pull-dari-suatu-repositori","title":"Langkah 5: Melakukan Pull dari Suatu Repositori","text":"
Pull pada suatu repositori adalah proses mengambil perubahan terbaru dari repositori di GitHub dan menggabungkannya dengan repositori lokal.
Buka kembali repositori lokal yang telah kamu clone sebelumnya di terminal atau command prompt.
Jalankan Perintah Pull
Jalankan perintah git pull origin main untuk mengambil perubahan terbaru yang ada di repositori GitHub dan menggabungkannya dengan repositori lokalmu.
Lakukan Pengecekan Kembali
Periksa kembali berkas README.md di repositori lokal tersebut. Seharusnya berkas README.md kamu sudah menampilkan hobi kamu.
Catatan:
Langkah ini memastikan bahwa repositori lokalmu selalu diperbarui dengan perubahan terbaru yang ada di repositori GitHub.
Melakukan pull secara berkala penting untuk menghindari konflik dan memastikan kamu bekerja dengan versi terbaru dari proyek.
"},{"location":"tutorial/tutorial-0/#langkah-6-melakukan-branching-pada-suatu-repositori","title":"Langkah 6: Melakukan Branching pada Suatu Repositori","text":"
Pada tahap ini kamu akan mempelajari tentang penggunaan branch dalam Git. Penggunaan branch memungkinkan kamu untuk mengembangkan fitur atau memperbaiki bug di lingkungan terpisah sebelum menggabungkannya kembali ke branch utama.
Apa Itu Branch di Git?
Branch di Git adalah cabang terpisah dari source code yang memungkinkan pengembangan independen dari fitur atau perubahan.
Hal ini memungkinkan tim untuk bekerja pada fitur atau perbaikan bug tanpa mengganggu kode yang ada di branch utama.
Membuat dan Mengganti Branch Baru
Pada direktori repositori lokal asli (bukan clone), jalankan perintah git checkout -b <NAMA_BRANCH> di terminal atau command prompt untuk membuat dan beralih ke branch baru. Contoh: git checkout -b jurusan_branch
Tambahkan atribut jurusan pada berkas README.md. Contoh:
Nama : Pak Bepe\n\nNPM : 2201234567\n\nKelas : PBP A\n\nHobi : Tidur\n\nJurusan : Ilmu Sistem Informasi Komputer\n
Menyimpan Perubahan dan Push ke GitHub
Setelah menambahkan atribut jurusan, simpan berkas tersebut.
Lakukan add, commit, dan push ke GitHub dengan menjalankan perintah yang sudah kamu kuasai sebelumnya.
Jalankan perintah git push -u origin <NAMA_BRANCH>. Pastikan untuk mengganti <NAMA_BRANCH> sesuai dengan nama branch baru yang telah dibuat.
Menggabungkan Branch Menggunakan Pull Request
Buka kembali halaman repositori kamu pada GitHub.
Secara otomatis, pop-up dengan tombol Compare & pull request akan muncul. Jika tidak, alternatifnya adalah dengan menekan tombol Pull Request dan kemudian memilih opsi New pull request.
Setelah itu, GitHub akan membandingkan perubahan yang ada di kedua branch yang ingin digabungkan.
Apabila tidak terdapat konflik, tekan tombol Merge pull request yang akan menggabungkan perubahan dari branch yang ingin digabungkan ke dalam branch utama (main).
Dengan melakukan langkah di atas, semua perubahan dari kedua branch akan diintegrasikan ke dalam branch utama, menciptakan kesatuan antara perubahan tersebut.
Catatan:
Jika kamu ingin berpindah antar branch yang sudah ada, jalankan git checkout <NAMA_BRANCH> pada terminal. Flag -b pada perintah sebelum-sebelumnya digunakan untuk membuat branch baru dan beralih ke branch tersebut dalam satu langkah.
Konflik terjadi ketika perubahan yang dilakukan pada satu branch bertabrakan dengan perubahan yang dilakukan pada branch lain. Misalnya, jika dua pengembang mengubah bagian yang sama dari berkas yang sama dalam waktu bersamaan, Git tidak dapat dengan otomatis memutuskan perubahan mana yang harus diterapkan.
Jika terdapat konflik atau perubahan yang saling bertabrakan, platform ini akan meminta kamu untuk menentukan perubahan mana yang sebaiknya diambil.
Penting untuk memahami konsep branching dalam Git, karena ini memungkinkan pengembangan yang terorganisir dan terpisah, sebelum semua perubahan dikombinasikan kembali ke dalam kode utama.
"},{"location":"tutorial/tutorial-0/#tutorial-instalasi-django-dan-inisiasi-proyek-django","title":"Tutorial: Instalasi Django dan Inisiasi Proyek Django","text":"
Django adalah kerangka kerja (framework) yang populer untuk pengembangan aplikasi web dengan bahasa pemrograman Python. Dalam tutorial ini, kamu akan mempelajari langkah-langkah instalasi Django dan inisiasi proyek demo sebagai starter.
"},{"location":"tutorial/tutorial-0/#langkah-1-membuat-direktori-dan-mengaktifkan-virtual-environment","title":"Langkah 1: Membuat Direktori dan Mengaktifkan Virtual Environment","text":"
Buat direktori baru dengan nama book-tracker dan masuk ke dalamnya.
Di dalam direktori tersebut, buka command prompt (Windows) atau terminal shell (Unix).
Buat virtual environment dengan menjalankan perintah berikut.
python -m venv env\n
Virtual environment ini berguna untuk mengisolasi package serta dependencies dari aplikasi agar tidak bertabrakan dengan versi lain yang ada pada komputermu. Kamu dapat mengaktifkan virtual environment dengan perintah berikut.
Windows:
env\\Scripts\\activate\n
Unix (Mac/Linux):
source env/bin/activate\n
Virtual environment akan aktif dan ditandai dengan (env) di baris input terminal.
"},{"location":"tutorial/tutorial-0/#langkah-2-menyiapkan-dependencies-dan-membuat-proyek-django","title":"Langkah 2: Menyiapkan Dependencies dan Membuat Proyek Django","text":"
Dependencies adalah komponen atau modul yang diperlukan oleh suatu perangkat lunak untuk berfungsi, termasuk library, framework, atau package. Hal tersebut memungkinkan pengembang memanfaatkan kode yang telah ada, mempercepat pengembangan, tetapi juga memerlukan manajemen yang hati-hati untuk memastikan kompatibilitas versi yang tepat. Penggunaan virtual environment membantu mengisolasi dependencies antara proyek-proyek yang berbeda.
Di dalam direktori yang sama, buat berkas requirements.txt dan tambahkan beberapa dependencies.
Lakukan instalasi terhadap dependencies yang ada dengan perintah berikut. Jangan lupa jalankan virtual environment terlebih dahulu sebelum menjalankan perintah berikut.
pip install -r requirements.txt\n
Buat proyek Django bernama book_tracker dengan perintah berikut.
django-admin startproject book_tracker .\n
Pastikan karakter . tertulis di akhir perintah
"},{"location":"tutorial/tutorial-0/#langkah-3-konfigurasi-proyek-dan-menjalankan-server","title":"Langkah 3: Konfigurasi Proyek dan Menjalankan Server","text":"
Tambahkan * pada ALLOWED_HOSTS di settings.py untuk keperluan deployment:
...\nALLOWED_HOSTS = [\"*\"]\n...\n
Dalam konteks deployment, ALLOWED_HOSTS berfungsi sebagai daftar host yang diizinkan untuk mengakses aplikasi web. Dengan menetapkan nilai [\"*\"], kamu mengizinkan akses dari semua host, yang akan memungkinkan aplikasi diakses secara luas. Namun, perlu diingat bahwa pengaturan ini harus digunakan dengan bijak dan hanya dalam situasi tertentu, seperti saat melakukan uji coba atau tahap awal pengembangan.
Pastikan bahwa berkas manage.py ada pada direktori yang aktif pada terminal kamu saat ini. Jalankan server Django dengan perintah:
Windows:
python manage.py runserver\n
Unix:
python3 manage.py runserver\n
Buka http://localhost:8000 pada peramban web untuk melihat animasi roket sebagai tanda aplikasi Django kamu berhasil dibuat.
"},{"location":"tutorial/tutorial-0/#langkah-4-menghentikan-server-dan-menonaktifkan-virtual-environment","title":"Langkah 4: Menghentikan Server dan Menonaktifkan Virtual Environment","text":"
Untuk menghentikan server, tekan Ctrl+C (Windows/Linux) atau Control+C (Mac) pada terminal.
Nonaktifkan virtual environment dengan perintah:
deactivate\n
Selamat! Kamu telah berhasil membuat aplikasi Django dari awal.
"},{"location":"tutorial/tutorial-0/#tutorial-unggah-proyek-ke-repositori-github","title":"Tutorial: Unggah Proyek ke Repositori GitHub","text":"
Buatlah repositori GitHub baru bernama book-tracker dengan visibilitas public.
Inisiasi direktori lokal book-tracker sebagai repositori Git.
Hint: Ingat kembali tahap tutorial sebelumnya
Tambahkan Berkas .gitignore
Tambahkan berkas .gitignore dan isilah berkas tersebut dengan teks berikut.
# Django\n*.log\n*.pot\n*.pyc\n__pycache__\ndb.sqlite3\nmedia\n\n# Backup files\n*.bak\n\n# If you are using PyCharm\n# User-specific stuff\n.idea/**/workspace.xml\n.idea/**/tasks.xml\n.idea/**/usage.statistics.xml\n.idea/**/dictionaries\n.idea/**/shelf\n\n# AWS User-specific\n.idea/**/aws.xml\n\n# Generated files\n.idea/**/contentModel.xml\n\n# Sensitive or high-churn files\n.idea/**/dataSources/\n.idea/**/dataSources.ids\n.idea/**/dataSources.local.xml\n.idea/**/sqlDataSources.xml\n.idea/**/dynamic.xml\n.idea/**/uiDesigner.xml\n.idea/**/dbnavigator.xml\n\n# Gradle\n.idea/**/gradle.xml\n.idea/**/libraries\n\n# File-based project format\n*.iws\n\n# IntelliJ\nout/\n\n# JIRA plugin\natlassian-ide-plugin.xml\n\n# Python\n*.py[cod]\n*$py.class\n\n# Distribution / packaging\n.Python build/\ndevelop-eggs/\ndist/\ndownloads/\neggs/\n.eggs/\nlib/\nlib64/\nparts/\nsdist/\nvar/\nwheels/\n*.egg-info/\n.installed.cfg\n*.egg\n*.manifest\n*.spec\n\n# Installer logs\npip-log.txt\npip-delete-this-directory.txt\n\n# Unit test / coverage reports\nhtmlcov/\n.tox/\n.coverage\n.coverage.*\n.cache\n.pytest_cache/\nnosetests.xml\ncoverage.xml\n*.cover\n.hypothesis/\n\n# Jupyter Notebook\n.ipynb_checkpoints\n\n# pyenv\n.python-version\n\n# celery\ncelerybeat-schedule.*\n\n# SageMath parsed files\n*.sage.py\n\n# Environments\n.env\n.venv\nenv/\nvenv/\nENV/\nenv.bak/\nvenv.bak/\n\n# mkdocs documentation\n/site\n\n# mypy\n.mypy_cache/\n\n# Sublime Text\n*.tmlanguage.cache\n*.tmPreferences.cache\n*.stTheme.cache\n*.sublime-workspace\n*.sublime-project\n\n# sftp configuration file\nsftp-config.json\n\n# Package control specific files Package\nControl.last-run\nControl.ca-list\nControl.ca-bundle\nControl.system-ca-bundle\nGitHub.sublime-settings\n\n# Visual Studio Code\n.vscode/*\n!.vscode/settings.json\n!.vscode/tasks.json\n!.vscode/launch.json\n!.vscode/extensions.json\n.history\n
Berkas .gitignore adalah sebuah berkas konfigurasi yang digunakan dalam repositori Git untuk menentukan berkas-berkas dan direktori-direktori yang harus diabaikan oleh Git.
Berkas-berkas yang tercantum di dalam .gitignore tidak akan dimasukkan ke dalam versi kontrol Git.
Berkas ini perlu dibuat karena terkadang ada berkas-berkas yang tidak perlu dilacak oleh Git, seperti berkas-berkas yang dihasilkan oleh proses kompilasi, berkas sementara, atau berkas konfigurasi pribadi.
Lakukan add, commit, dan push dari direktori repositori lokal.
Catatan:
Repositori book-tracker yang baru saja kamu buat akan menjadi landasan untuk tutorial-tutorial berikutnya. Repositori ini akan terus digunakan dan berkembang seiring tutorial yang kamu ikuti.
Pada akhir semester, kamu akan melihat bahwa repositori tutorial ini telah berkembang menjadi aplikasi yang utuh, buatan kamu sendiri. Sehingga, kamu bisa saja memasukkan ini ke dalam portofiolio kamu!
Oleh karena itu, pastikan kamu mengelola repositori ini dengan baik dan mengikuti tutorial-tutorial selanjutnya untuk mengembangkan kemampuan kamu dalam pemrograman berbasis platform.
Selamat! Kamu sudah menyelesaikan tutorial tentang penggunaan Git, GitHub, instalasi IDE, dan pengembangan proyek dengan Django.
Pesan tambahan, pastikan kamu memahami setiap kode yang kamu tulis, ya. Jangan sampai hanya asal copy-paste tanpa memahaminya terlebih dahulu. Apabila nanti kamu mengalami kesulitan, jangan ragu untuk bertanya ke asisten dosen ataupun teman. Semangat terus dalam menjalani perkuliahan PBP selama satu semester ke depan, dan jangan lupa untuk menikmati setiap prosesnya. Good luck!
Tutorial ini dikembangkan berdasarkan PBP Ganjil 2024 yang ditulis oleh Tim Pengajar Pemrograman Berbasis Platform 2024. Segala tutorial serta instruksi yang dicantumkan pada repositori ini dirancang sedemikian rupa sehingga mahasiswa yang sedang mengambil mata kuliah Pemrograman Berbasis Platform dapat menyelesaikan tutorial saat sesi lab berlangsung.
"},{"location":"tutorial/tutorial-1/","title":"Tutorial 1: Pengenalan Aplikasi Django dan Model-View-Template (MVT) pada Django","text":"
Pemrograman Berbasis Platform (CSGE602022) \u2014 diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Genap 2023/2024
Setelah menyelesaikan tutorial ini, mahasiswa diharapkan untuk dapat:
Mengerti konsep MVT pada aplikasi Django
Mengerti bagaimana alur Django menampilkan sebuah halaman HTML
Mengerti konfigurasi routing yang ada pada urls.py
Memahami kaitan models, views dan template pada Django
Memahami pembuatan unit test pada framework Django
"},{"location":"tutorial/tutorial-1/#ringkasan-hasil-tutorial-0","title":"Ringkasan Hasil Tutorial 0","text":"
Untuk membantumu mengerjakan tutorial 1 dengan baik, kami mengharapkan hasil pengerjaan tutorial 0 sebagai berikut.
Pada komputer lokal, terdapat direktori utama book-tracker yang telah diinisiasi sebagai repositori lokal.
Pada direktori utama book-tracker tersebut, terdapat beberapa berkas dan subdirektori berikut.
Subdirektori env.
Subdirektori proyek book_tracker. Berbeda dengan direktori utama, subdirektori ini terbentuk setelah menjalankan perintah
django-admin startproject book_tracker .\n
Berkas .gitignore.
Berkas manage.py.
Berkas requirements.txt.
(Opsional) Berkas db.sqlite3.
Struktur proyek book-tracker pada direktori lokal adalah sebagai berikut.
Pada repositori GitHub, pastikan repositori book-tracker memiliki berkas dan direktori berikut.
Direktori proyek book_tracker. Direktori ini hasil menjalankan perintah
django-admin startproject book_tracker .\n
Berkas .gitignore.
Berkas manage.py.
Berkas requirements.txt.
Struktur proyek book-tracker pada repositori GitHub adalah sebagai berikut.
"},{"location":"tutorial/tutorial-1/#pengenalan-mengenai-konsep-mvt","title":"Pengenalan Mengenai Konsep MVT","text":"
Dalam dunia pengembangan web, terdapat berbagai konsep dan arsitektur yang membantu dalam merancang dan mengembangkan aplikasi. Salah satu konsep yang umum digunakan adalah MVT (Model-View-Template).
"},{"location":"tutorial/tutorial-1/#apa-itu-konsep-mvt","title":"Apa Itu Konsep MVT?","text":"
MVT adalah singkatan dari Model-View-Template. MVT adalah sebuah konsep arsitektur yang digunakan dalam pengembangan web untuk memisahkan komponen-komponen utama dari sebuah aplikasi. Konsep ini memungkinkan pengembang web untuk mengorganisasi dan mengelola kode dengan lebih terstruktur.
"},{"location":"tutorial/tutorial-1/#apa-itu-model","title":"Apa Itu Model?","text":"
Model merupakan komponen dalam konsep MVT yang bertanggung jawab untuk mengatur dan mengelola data dari aplikasi. Model mewakili struktur data dan logika aplikasi yang berada di belakang tampilan. Model menghubungkan aplikasi dengan basis data dan mengatur interaksi dengan data tersebut.
"},{"location":"tutorial/tutorial-1/#apa-itu-view","title":"Apa Itu View?","text":"
View merupakan komponen yang menangani logika presentasi dalam konsep MVT. View mengontrol bagaimana data yang dikelola oleh model akan ditampilkan kepada pengguna. Dalam konteks MVT, view berperan sebagai pengatur tampilan dan mengambil data dari model untuk disajikan kepada pengguna.
"},{"location":"tutorial/tutorial-1/#apa-itu-template","title":"Apa Itu Template?","text":"
Template adalah komponen yang berfungsi untuk mengatur tampilan atau antarmuka pengguna. Template memisahkan kode HTML dari logika aplikasi. Dalam MVT, template digunakan untuk merancang tampilan yang akhirnya akan diisi dengan data dari model melalui view.
"},{"location":"tutorial/tutorial-1/#hubungan-antara-komponen-komponen-mvt","title":"Hubungan Antara Komponen-komponen MVT","text":"
Secara ringkas, konsep MVT berjalan dalam kerangka berikut:
Model: Menyimpan data dan logika aplikasi.
View: Menampilkan data dari model dan menghubungkannya dengan template.
MVT memisahkan tugas antara logika aplikasi, tampilan, dan data, sehingga memungkinkan pengembang untuk bekerja pada setiap komponen secara terpisah.
Kode yang Mudah Dikelola
Dengan pemisahan tugas yang jelas, kode menjadi lebih terorganisir dan mudah dikelola.
Penggunaan Kembali
Kode dapat digunakan kembali dalam berbagai bagian aplikasi yang berbeda.
Skalabilitas
Struktur MVT mendukung skalabilitas dengan memungkinkan pengembangan paralel pada setiap komponen.
Catatan:
Konsep MVT sangat terkait dengan framework Django dalam pengembangan web dengan bahasa pemrograman Python.
Dalam praktiknya, pemahaman yang baik mengenai konsep MVT akan membantu kamu dalam merancang aplikasi web yang lebih terstruktur dan mudah dikelola.
"},{"location":"tutorial/tutorial-1/#tutorial-membuat-aplikasi-django-beserta-konfigurasi-model","title":"Tutorial: Membuat Aplikasi Django beserta Konfigurasi Model","text":"
Dalam tutorial ini, akan dijelaskan mengenai konsep aplikasi dan proyek dalam Django.
Apa Itu Proyek dan Aplikasi dalam Django?
Proyek (Project) adalah keseluruhan proyek web yang kamu bangun dengan menggunakan Django. Proyek berisi berbagai aplikasi yang berfungsi secara bersama untuk menciptakan situs web atau aplikasi web yang lengkap.
Aplikasi (Apps) adalah unit modular yang melakukan tugas-tugas spesifik dalam suatu proyek Django. Setiap aplikasi dapat memiliki model, tampilan, template, dan URL yang terkait dengannya. Aplikasi memungkinkanmu untuk membagi fungsionalitas proyek menjadi bagian-bagian terpisah yang dapat dikelola secara independen.
Sebelum dimulai, kamu perlu mengingat kembali bahwa direktori utama adalah direktori terluar, sedangkan direktori proyek adalah direktori di dalam direktori utama. Perlu diingat bahwa keduanya memiliki nama yang hampir sama. Direktori utama memiliki nama book-tracker, sementara itu direktori proyek memiliki nama book_tracker. Perbedaan hanya terletak pada penggunaan dash (-) dan underscore (_).
Sebelum memulai, pastikan kamu berada di direktori utama book-tracker yang telah dibuat pada tutorial sebelumnya.
Di dalam direktori ini, kamu akan melanjutkan pengembangan proyek Django.
Buka terminal atau command prompt dan pastikan direktori kerja kamu adalah direktori utama book-tracker.
Aktifkan virtual environment yang telah dibuat sebelumnya. Jalankan perintah berikut sesuai dengan sistem operasi perangkat kamu.
Windows:
env\\Scripts\\activate.bat\n
Unix (Linux & Mac OS):
source env/bin/activate\n
"},{"location":"tutorial/tutorial-1/#langkah-2-membuat-aplikasi-main-dalam-proyek-book-tracker","title":"Langkah 2: Membuat Aplikasi main dalam Proyek Book Tracker","text":"
Kamu akan membuat aplikasi baru bernama main dalam proyek book tracker.
Jalankan perintah berikut untuk membuat aplikasi baru.
python manage.py startapp main\n
Setelah perintah di atas dijalankan, akan terbentuk direktori baru dengan nama main yang akan berisi struktur awal untuk aplikasimu.
Mungkin kamu cukup bingung dengan istilah direktori utama, direktori proyek, atau direktori aplikasi. Akan tetapi, seiring berjalannya waktu, kamu pasti bisa!
Daftarkan aplikasi main ke dalam proyek.
Buka berkas settings.py di dalam direktori proyek book_tracker.
Temukan variabel INSTALLED_APPS.
Tambahkan 'main' ke dalam daftar aplikasi yang ada.
INSTALLED_APPS = [\n ...,\n 'main',\n ...\n]\n
Dengan melakukan langkah-langkah tersebut, kamu telah mendaftarkan aplikasi main ke dalam proyek book tracker kamu sehingga proyekmu sudah mengenali bahwa terdapat aplikasi main yang dapat dijalankan.
Kamu akan membuat template main.html di dalam direktori baru bernama templates pada aplikasi main. Template ini akan digunakan untuk menampilkan data book tracker kamu.
Saat ini, aplikasi book tracker belum menampilkan data apapun. Data akan ditampilkan pada tutorial selanjutnya.
"},{"location":"tutorial/tutorial-1/#langkah-1-membuat-dan-mengisi-berkas-mainhtml","title":"Langkah 1: Membuat dan Mengisi Berkas main.html","text":"
Sebelum mulai, mari pahami secara singkat mengenai HTML. HTML (Hypertext Markup Language) adalah penanda bahasa yang digunakan untuk membuat struktur dan tampilan konten pada halaman web.
Hint: Kamu akan mempelajari HTML lebih lanjut di tutorial 4.
Buat direktori baru bernama templates di dalam direktori aplikasi main.
Di dalam direktori templates, buat berkas baru bernama main.html dengan isi sebagai berikut. Gantilah nilai yang sesuai dengan data kamu.
<h1>Book Tracker Page</h1>\n\n<h5>Name:</h5>\n<p>Pak Bepe</p>\n<!-- Ubahlah sesuai dengan nama kamu -->\n<h5>Class:</h5>\n<p>PBP A</p>\n<!-- Ubahlah sesuai dengan kelas kamu -->\n
Buka berkas HTML di web browser.
Sebelum dihubungkan dengan aplikasi, cobalah membuka berkas main.html di web browser-mu.
Perlu dicatat bahwa pada tahap ini hanya untuk memeriksa tampilan dasar HTML dan belum terhubung dengan Django.
Berikut merupakan contoh tampilan HTML yang diharapkan.
"},{"location":"tutorial/tutorial-1/#tutorial-implementasi-model-dasar","title":"Tutorial: Implementasi Model Dasar","text":""},{"location":"tutorial/tutorial-1/#langkah-1-mengubah-berkas-modelspy-dalam-aplikasi-main","title":"Langkah 1: Mengubah Berkas models.py dalam Aplikasi main","text":"
Pada langkah ini, kamu akan mengubah berkas models.py yang terdapat di dalam direktori aplikasi main untuk mendefinisikan model baru.
Buka berkas models.py pada direktori aplikasi main.
Isi berkas models.py dengan kode berikut.
from django.db import models\n\nclass Book(models.Model):\n name = models.CharField(max_length=255)\n date_added = models.DateField(auto_now_add=True)\n page = models.IntegerField()\n description = models.TextField()\n
Penjelasan Kode:
models.Model adalah kelas dasar yang digunakan untuk mendefinisikan model dalam Django.
Book adalah nama model yang kamu definisikan.
name (nama), date_added (tanggal tambah), page (halaman), dan description (deskripsi) adalah atribut atau field pada model. Setiap field memiliki tipe data yang sesuai seperti CharField, DateField, IntegerField, dan TextField.
"},{"location":"tutorial/tutorial-1/#langkah-2-membuat-dan-mengaplikasikan-migrasi-model","title":"Langkah 2: Membuat dan Mengaplikasikan Migrasi Model","text":"
Apa itu migrasi model?
Migrasi model adalah cara Django melacak perubahan pada model basis data kamu.
Migrasi ini adalah instruksi untuk mengubah struktur tabel basis data sesuai dengan perubahan model yang didefinisikan dalam kodemu.
Bagaimana cara melakukan migrasi model?
Jalankan perintah berikut pada terminal atau command prompt di direktori utama untuk membuat migrasi model.
python manage.py makemigrations\n
makemigrations menciptakan berkas migrasi yang berisi perubahan model yang belum diaplikasikan ke dalam basis data.
Masih di direktori utama, jalankan perintah berikut untuk menerapkan migrasi ke dalam basis data lokal.
python manage.py migrate\n
migrate mengaplikasikan perubahan model yang tercantum dalam berkas migrasi ke basis data.
Setiap kali kamu melakukan perubahan pada model, seperti menambahkan atau mengubah atribut, kamu perlu melakukan migrasi untuk merefleksikan perubahan tersebut.
"},{"location":"tutorial/tutorial-1/#tutorial-menghubungkan-view-dengan-template","title":"Tutorial: Menghubungkan View dengan Template","text":"
Dalam tutorial ini, kamu akan menghubungkan view dengan template menggunakan Django. Langkah-langkah ini akan menjelaskan bagaimana membuat fungsi view show_main dalam aplikasi main dan me-render template dengan data yang telah diambil dari model.
Kamu akan mengimpor modul yang diperlukan dan membuat fungsi view show_main.
Buka berkas views.py yang terletak di dalam berkas aplikasi main.
Tambahkan baris-baris impor berikut di bagian paling atas berkas apabila belum ada.
from django.shortcuts import render\n
Penjelasan Kode:
from django.shortcuts import render berguna untuk mengimpor fungsi render dari modul django.shortcuts. Fungsi render digunakan untuk me-render tampilan HTML dengan menggunakan data yang diberikan.
def show_main(request) merupakan deklarasi fungsi show_main, yang menerima parameter request. Fungsi ini akan mengatur permintaan HTTP dan mengembalikan tampilan yang sesuai.
context adalah dictionary yang berisi data yang akan dikirimkan ke tampilan. Pada konteks ini, dua data disertakan, yaitu:
name: Data nama.
class: Data kelas.
return render(request, \"main.html\", context) berguna untuk me-render tampilan main.html dengan menggunakan fungsi render. Fungsi render mengambil tiga argumen:
request: Ini adalah objek permintaan HTTP yang dikirim oleh pengguna.
main.html: Ini adalah nama berkas template yang akan digunakan untuk me-render tampilan.
context: Ini adalah dictionary yang berisi data yang akan diteruskan ke tampilan untuk digunakan dalam penampilan dinamis.
Berkas urls.py pada proyek bertanggung jawab untuk mengatur rute URL dalam skala proyek.
Fungsi include digunakan untuk mengimpor rute URL dari aplikasi lain (dalam hal ini, dari aplikasi main) ke dalam berkas urls.py proyek.
Path URL '' akan diarahkan ke rute yang didefinisikan dalam berkas urls.py aplikasi main. Path URL dibiarkan berupa string kosong agar halaman aplikasi main dapat diakses secara langsung.
Sebagai bayangan, apabila kamu menggunakan path 'main/' pada contoh di atas, maka kamu perlu mengakses halaman http://localhost:8000/main/ untuk mengakses halaman aplikasi main. Karena path yang ditentukan adalah '', maka kamu dapat mengakses aplikasi main melalui URL http://localhost:8000/ saja.
Jalankan proyek Django dengan menjalankan perintah python manage.py runserver pada terminal atau command prompt di direktori utama.
Bukalah http://localhost:8000/ di web browser favoritmu untuk melihat halaman yang sudah kamu buat.
Dengan langkah-langkah di atas, kamu telah berhasil mengimplementasikan tampilan dasar dalam aplikasi main dan menghubungkannya dengan rute URL proyek. Pastikan kamu memahami setiap langkah dan informasi yang diberikan untuk mengaktifkan tampilan dalam proyek Django-mu
"},{"location":"tutorial/tutorial-1/#apa-bedanya-urlspy-pada-aplikasi-dan-urlspy-pada-proyek","title":"Apa bedanya urls.py pada aplikasi dan urls.py pada proyek?","text":"
Berkas urls.py pada aplikasi mengatur rute URL spesifik untuk fitur-fitur dalam aplikasi tersebut
urls.py pada proyek mengarahkan rute URL tingkat proyek dan dapat mengimpor rute URL dari berkas urls.py aplikasi-aplikasi, memungkinkan aplikasi dalam proyek Django untuk bersifat modular dan terpisah.
"},{"location":"tutorial/tutorial-1/#tutorial-pengenalan-django-unit-testing","title":"Tutorial: Pengenalan Django Unit Testing","text":"
Unit testing dapat digunakan untuk mengecek apakah kode yang dibuat bekerja sesuai dengan keinginan. Hal ini juga berguna ketika kamu melakukan perubahan kode. Dengan menggunakan tes, kamu bisa mengecek apakah perubahan yang dilakukan dapat menyebabkan perilaku yang tidak diinginkan pada aplikasi.
"},{"location":"tutorial/tutorial-1/#langkah-1-membuat-unit-test","title":"Langkah 1: Membuat Unit Test","text":"
Bukalah berkas tests.py pada direktori aplikasi main.
test_main_url_is_exist adalah tes untuk mengecek apakah path URL '' dapat diakses. Path '' artinya hanya http://localhost:8000/ tanpa path tambahan di bagian belakang URL.
test_main_using_main_template adalah tes untuk mengecek apakah halaman '' di-render menggunakan template main.html.
Jika tes berhasil, akan mengeluarkan informasi berikut.
Found 2 test(s).\n Creating test database for alias 'default'...\n System check identified no issues (0 silenced).\n ..\n ----------------------------------------------------------------------\n Ran 2 tests in 0.006s\n\n OK\n Destroying test database for alias 'default'...\n
Selamat! Kamu telah berhasil menulis Django Test dan menjalankannya.
Pada akhir tutorial ini, struktur direktori lokalmu akan terlihat seperti ini.
Huruf U menandakan bahwa terdapat berkas baru yang belum dilacak oleh Git. Huruf M menandakan bahwa terdapat berkas yang telah dilacak sebelumnya yang dimodifikasi.
Sebelum melakukan langkah ini, pastikan struktur direktori lokal sudah benar. Selanjunya, lakukan add, commit dan push untuk memperbarui repositori GitHub.
Jalankan perintah berikut untuk melakukan add, commit dan push.
Tutorial ini dikembangkan berdasarkan PBP Ganjil 2024 yang ditulis oleh Tim Pengajar Pemrograman Berbasis Platform 2023/2024. Segala tutorial serta instruksi yang dicantumkan pada repositori ini dirancang sedemikian rupa sehingga mahasiswa yang sedang mengambil mata kuliah Pemrograman Berbasis Platform dapat menyelesaikan tutorial saat sesi lab berlangsung.
"},{"location":"tutorial/tutorial-2/","title":"Tutorial 2: Form dan Data Delivery","text":"
Pemrograman Berbasis Platform (CSGE602022) \u2014 diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Genap 2023/2024
Setelah menyelesaikan tutorial ini, mahasiswa diharapkan untuk dapat:
Mengetahui XML dan JSON sebagai salah satu metode data delivery
Memahami cara kerja submisi data yang diberikan oleh pengguna menggunakan elemen form
Memahami cara mengirimkan data menggunakan format XML dan JSON
Memahami cara mengambil data spesifik berdasarkan ID
"},{"location":"tutorial/tutorial-2/#pengenalan-data-delivery","title":"Pengenalan Data Delivery","text":"
Dalam mengembangkan suatu platform, ada kalanya kita perlu mengirimkan data dari satu stack ke stack lainnya. Data yang dikirimkan bisa bermacam-macam bentuknya. Beberapa contoh format data yang umum digunakan antara lain HTML, XML, dan JSON. Implementasi data delivery dalam bentuk HTML sudah kamu pelajari pada tutorial sebelumnya. Pada tutorial ini akan diajarkan terkait XML dan JSON.
XML adalah singkatan dari eXtensible Markup Language. XML didesain menjadi self-descriptive, jadi dengan membaca XML tersebut kita bisa mengerti informasi apa yang ingin disampaikan dari data yang tertulis. XML digunakan pada banyak aplikasi web maupun mobile, yaitu untuk menyimpan dan mengirimkan data. XML hanya berisi informasi yang dibungkus di dalam tag. Kita perlu menulis program untuk mengirim, menerima, menyimpan, atau menampilkan informasi tersebut.
Dokumen XML membentuk struktur seperti tree yang dimulai dari root, lalu branch, hingga berakhir pada leaves. Dokumen XML harus mengandung sebuah root element yang merupakan parent dari elemen lainnya. Pada contoh di atas, <person> adalah root element.
Baris <?xml version=\"1.0\" encoding=\"UTF-8\"?> biasanya disebut sebagai XML Prolog. XML Prolog bersifat opsional, akan tetapi jika ada maka posisinya harus berada di awal dokumen XML. Pada dokumen XML, semua elemen wajib memiliki closing tag. Tag pada XML sifatnya case sensitive, sehingga tag <person> dianggap berbeda dengan tag <Person>.
JSON adalah singkatan dari JavaScript Object Notation. JSON didesain menjadi self-describing, sehingga JSON sangat mudah untuk dimengerti. JSON digunakan pada banyak aplikasi web maupun mobile, yaitu untuk menyimpan dan mengirimkan data. Sintaks JSON merupakan turunan dari Object JavaScript. Akan tetapi format JSON berbentuk text, sehingga kode untuk membaca dan membuat JSON banyak terdapat dibanyak bahasa pemrograman.
Data pada JSON disimpan dalam bentuk key dan value. Pada contoh di atas yang menjadi key adalah name, age, dan address. Value dapat berupa tipe data primitif (string, number, boolean) ataupun berupa objek.
Sebelum kamu memulai, serta untuk membantumu mengikuti tutorial 2 dengan baik, kami mengharapkan beberapa hasil berikut dari tutorial 1:
Struktur direktori book-tracker secara lokal adalah sebagai berikut.
Struktur repository book-tracker pada GitHub adalah sebagai berikut.
"},{"location":"tutorial/tutorial-2/#tutorial-implementasi-skeleton-sebagai-kerangka-views","title":"Tutorial: Implementasi Skeleton sebagai Kerangka Views","text":"
Sebelum kita membuat form registrasi, kita perlu membuat suatu skeleton yang berfungsi sebagai kerangka views dari situs web kita. Dengan kerangka views ini, kita dapat memastikan adanya konsistensi dalam desain situs web kita serta memperkecil kemungkinan terjadinya redundansi kode. Pada tutorial ini, kita akan membuat skeleton untuk situs web yang akan kita buat pada tutorial selanjutnya.
Buat folder templates pada root folder (direktori utama) dan buatlah sebuah berkas HTML baru bernama base.html. Berkas base.html berfungsi sebagai template dasar yang dapat digunakan sebagai kerangka umum untuk halaman web lainnya di dalam proyek. Isilah berkas base.html tersebut dengan kode berikut:
Baris-baris yang dikurung dalam {% ... %} disebut dengan template tags Django. Baris-baris inilah yang akan berfungsi untuk memuat data secara dinamis dari Django ke HTML.
Buka settings.py yang ada pada direktori proyek (book_tracker) dan carilah baris yang mengandung variabel TEMPLATES. Sesuaikan kode yang ada dengan potongan kode berikut agar berkas base.html terdeteksi sebagai berkas template.
Pada subdirektori templates yang ada pada direktori main (main/templates/), ubahlah kode berkas main.html yang telah dibuat di tutorial sebelumnya menjadi sebagai berikut.
Perhatikan bahwa kode diatas merupakan kode yang sama dengan kode pada main.html pada tutorial sebelumnya. Perbedaannya adalah pada kode diatas, kita menggunakan base.html sebagai template utama.
"},{"location":"tutorial/tutorial-2/#tutorial-membuat-form-input-data-dan-menampilkan-data-buku-pada-html","title":"Tutorial: Membuat Form Input Data dan Menampilkan Data Buku Pada HTML","text":"
Sampai saat ini, belum ada data yang ditambahkan dan dimunculkan ke dalam aplikasi. Sekarang, kita akan membuat sebuah form sederhana untuk menginput data buku pada aplikasi sehingga nantinya kamu dapat menambahkan data baru untuk ditampilkan pada halaman utama.
Buat berkas baru pada direktori main dengan nama forms.py untuk membuat struktur form yang dapat menerima data buku baru. Tambahkan kode berikut ke dalam berkas forms.py.
from django.forms import ModelForm\nfrom main.models import Book\n\nclass BookForm(ModelForm):\n class Meta:\n model = Book\n fields = [\"name\", \"page\", \"description\"]\n
Penjelasan Kode:
model = Book untuk menunjukkan model yang akan digunakan untuk form. Ketika data dari form disimpan, isi dari form akan disimpan menjadi sebuah objek Book.
fields = [\"name\", \"page\", \"description\"] untuk menunjukkan field dari model Book yang digunakan untuk form. Field date_added tidak dimasukkan ke list fields karena tanggal ditambahkan secara otomatis.
Buka berkas views.py yang ada pada folder main dan tambahkan beberapa import berikut pada bagian paling atas.
from django.shortcuts import render, redirect # Tambahkan import redirect di baris ini\nfrom main.forms import BookForm\nfrom main.models import Book\n
Masih di berkas yang sama, buat fungsi baru dengan nama create_book yang menerima parameter request. Tambahkan potongan kode di bawah ini untuk menghasilkan formulir yang dapat menambahkan data buku secara otomatis ketika data di-submit dari form.
def create_book(request):\n form = BookForm(request.POST or None)\n\n if form.is_valid() and request.method == \"POST\":\n form.save()\n return redirect('main:show_main')\n\n context = {'form': form}\n return render(request, \"create_book.html\", context)\n
Penjelasan Kode:
form = BookForm(request.POST or None) digunakan untuk membuat BookForm baru dengan memasukkan QueryDict berdasarkan input dari user pada request.POST.
form.is_valid() digunakan untuk memvalidasi isi input dari form tersebut.
form.save() digunakan untuk membuat dan menyimpan data dari form tersebut.
return redirect('main:show_main') digunakan untuk melakukan redirect ke fungsi show_main pada views aplikasi main setelah data form berhasil disimpan.
Ubahlah fungsi show_main yang sudah ada pada berkas views.py menjadi seperti berikut.
<form method=\"POST\"> digunakan untuk menandakan block untuk form dengan metode POST.
{% csrf_token %} adalah token yang berfungsi sebagai security. Token ini di-generate secara otomatis oleh Django untuk mencegah serangan berbahaya.
{{ form.as_table }} adalah template tag yang digunakan untuk menampilkan fields form yang sudah dibuat pada forms.py sebagai table.
<input type=\"submit\" value=\"Add Book\"/> digunakan sebagai tombol submit untuk mengirimkan request ke view create_book(request).
Buka main.html dan tambahkan kode berikut di dalam {% block content %} untuk menampilkan data produk dalam bentuk table serta tombol \"Add New Book\" yang akan redirect ke halaman form.
...\n<table>\n <tr>\n <th>Name</th>\n <th>Page</th>\n <th>Description</th>\n <th>Date Added</th>\n </tr>\n\n {% comment %} Berikut cara memperlihatkan data produk di bawah baris ini\n {%endcomment %} {% for book in books %}\n <tr>\n <td>{{book.name}}</td>\n <td>{{book.page}}</td>\n <td>{{book.description}}</td>\n <td>{{book.date_added}}</td>\n </tr>\n {% endfor %}\n</table>\n\n<br />\n\n<a href=\"{% url 'main:create_book' %}\">\n <button>Add New Book</button>\n</a>\n{% endblock content %}\n
Jalankan proyek Django-mu dengan perintah python manage.py runserver dan bukalah http://localhost:8000/ di browser favoritmu. Coba tambahkan beberapa data produk baru dan seharusnya kamu dapat melihat data yang ditambahkan pada halaman utama aplikasi.
"},{"location":"tutorial/tutorial-2/#tutorial-mengembalikan-data-dalam-bentuk-xml","title":"Tutorial Mengembalikan Data dalam Bentuk XML","text":"
Buka views.py yang ada pada folder main dan tambahkan import HttpResponse dan Serializer pada bagian paling atas.
from django.http import HttpResponse\nfrom django.core import serializers\n
Buatlah sebuah fungsi baru yang menerima parameter request dengan nama show_xml dan buatlah sebuah variabel di dalam fungsi tersebut yang menyimpan hasil query dari seluruh data yang ada pada Book.
def show_xml(request):\n data = Book.objects.all()\n
Tambahkan return function berupa HttpResponse yang berisi parameter data hasil query yang sudah diserialisasi menjadi XML dan parameter content_type=\"application/xml\".
def show_xml(request):\n data = Book.objects.all()\n return HttpResponse(serializers.serialize(\"xml\", data), content_type=\"application/xml\")\n
Penjelasan Kode:
serializers digunakan untuk translate objek model menjadi format lain seperti dalam fungsi ini adalah XML.
Buka urls.py yang ada pada folder main dan import fungsi yang sudah kamu buat tadi.
from main.views import show_main, create_book, show_xml\n
Tambahkan path url ke dalam urlpatterns untuk mengakses fungsi yang sudah diimpor tadi.
Jalankan proyek Django-mu dengan perintah python manage.py runserver dan bukalah http://localhost:8000/xml/ di browser favoritmu untuk melihat hasilnya.
"},{"location":"tutorial/tutorial-2/#tutorial-mengembalikan-data-dalam-bentuk-json","title":"Tutorial: Mengembalikan Data dalam Bentuk JSON","text":"
Buka views.py yang ada pada folder main dan buatlah sebuah fungsi baru yang menerima parameter request dengan nama show_json dengan sebuah variabel di dalamnya yang menyimpan hasil query dari seluruh data yang ada pada Book.
def show_json(request):\n data = Book.objects.all()\n
Tambahkan return function berupa HttpResponse yang berisi parameter data hasil query yang sudah diserialisasi menjadi JSON dan parameter content_type=\"application/json\".
def show_json(request):\n data = Book.objects.all()\n return HttpResponse(serializers.serialize(\"json\", data), content_type=\"application/json\")\n
Buka urls.py yang ada pada folder main dan import fungsi yang sudah kamu buat tadi.
from main.views import show_main, create_book, show_xml, show_json\n
Tambahkan path url ke dalam urlpatterns untuk mengakses fungsi yang sudah diimpor tadi.
Jalankan proyek Django-mu dengan perintah python manage.py runserver dan bukalah http://localhost:8000/json/ (sesuaikan dengan path url yang dibuat) di browser favoritmu untuk melihat hasilnya.
"},{"location":"tutorial/tutorial-2/#tutorial-mengembalikan-data-berdasarkan-id-dalam-bentuk-xml-dan-json","title":"Tutorial: Mengembalikan Data Berdasarkan ID dalam Bentuk XML dan JSON","text":"
Buka views.py yang ada pada folder main dan buatlah dua fungsi baru yang menerima parameter _request_ dan id dengan nama show_xml_by_id dan show_json_by_id.
Buatlah sebuah variabel di dalam fungsi tersebut yang menyimpan hasil query dari data dengan id tertentu yang ada pada Book.
data = Book.objects.filter(pk=id)\n
Tambahkan return function berupa HttpResponse yang berisi parameter data hasil query yang sudah diserialisasi menjadi JSON atau XML dan parameter content_type dengan value \"application/xml\" (untuk format XML) atau \"application/json\" (untuk format JSON).
XML
def show_xml_by_id(request, id):\n data = Book.objects.filter(pk=id)\n return HttpResponse(serializers.serialize(\"xml\", data), content_type=\"application/xml\")\n
JSON
def show_json_by_id(request, id):\n data = Book.objects.filter(pk=id)\n return HttpResponse(serializers.serialize(\"json\", data), content_type=\"application/json\")\n
Buka urls.py yang ada pada folder main dan import fungsi yang sudah kamu buat tadi.
from main.views import show_main, create_book, show_xml, show_json, show_xml_by_id, show_json_by_id\n
Tambahkan path URL ke dalam urlpatterns untuk mengakses fungsi yang sudah diimpor tadi.
Jalankan proyek Django-mu dengan perintah python manage.py runserver dan bukalah http://localhost:8000/xml/[id]/ atau http://localhost:8000/json/[id]/ di browser favoritmu untuk melihat hasilnya.
Catatan: Sesuaikan [id] pada URL di atas dengan id objek yang ingin dilihat.
"},{"location":"tutorial/tutorial-2/#tutorial-penggunaan-postman-sebagai-data-viewer","title":"Tutorial: Penggunaan Postman Sebagai Data Viewer","text":"
Pastikan server kamu sudah berjalan dengan perintah python manage.py runserver.
Buka Postman dan buatlah sebuah request baru dengan method GET dan url http://localhost:8000/xml/ atau http://localhost:8000/json/ untuk mengetes apakah data terkirimkan dengan baik.
Panduan Instalasi Postman dapat dilihat pada Laman Resmi Postman.
Contoh:
Klik tombol Send untuk mengirimkan request tersebut.
Kamu akan melihat hasil response dari request tersebut pada bagian bawah Postman.
Kamu juga dapat mengubah url menjadi http://localhost:8000/xml/[id] atau http://localhost:8000/json/[id] untuk mengetes fungsi pengambilan data produk berdasarkan ID.
Setelah menyelesaikan tutorial ini, tampilan halaman web kamu seharusnya terlihat seperti ini.
Pada akhir tutorial ini, struktur direktori lokalmu akan terlihat seperti ini.
Sebelum melakukan langkah ini, pastikan struktur direktori lokal sudah benar. Selanjutnya, lakukan add, commit dan push untuk memperbarui repositori GitHub.
Jalankan perintah berikut untuk melakukan add, commit dan push.
Tutorial ini dikembangkan berdasarkan PBP Ganjil 2024 yang ditulis oleh Tim Pengajar Pemrograman Berbasis Platform 2024. Segala tutorial serta instruksi yang dicantumkan pada repositori ini dirancang sedemikian rupa sehingga mahasiswa yang sedang mengambil mata kuliah Pemrograman Berbasis Platform dapat menyelesaikan tutorial saat sesi lab berlangsung.
"},{"location":"tutorial/tutorial-3/","title":"Tutorial 3: Autentikasi, Session, dan Cookies","text":"
Pemrograman Berbasis Platform (CSGE602022) \u2014 diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Genap 2023/2024
HTTP (HyperText Transfer Protocol) adalah protokol yang digunakan untuk berkomunikasi antara client dan server. HTTP bersifat stateless yang berarti setiap transaksi/aktivitas yang dilakukan dianggap sebagai transaksi/aktivitas yang benar-benar baru, sehingga tidak ada data sebelumnya yang disimpan untuk transaksi/aktivitas saat ini.
Beberapa konsep dasar mengenai HTTP:
Client/Server: Interaksi dilakukan antar client/server. Klien adalah pihak yang melakukan request dan server adalah pihak yang memberikan response.
Stateless: Setiap aktivitas (request/response) bersifat independen, tidak tersimpan pada aktivitas terdahulu.
OSI Layer/Model: Model Open Systems Interconnection (OSI) menjelaskan 7 lapisan yang digunakan sistem komputer untuk berkomunikasi melalui jaringan. Model 7-layer OSI terdiri dari Application Layer, Presentation Layer, Session Layer, Transport Layer, Network Layer, Data Link Layer, dan Physical Layer.
Application Layer: Pada OSI Model yang disinggung di atas, website berjalan pada application layer. Sedangkan, proses request/response terjadi pada transport Layer yang umumnya menggunakan protokol TCP yang menentukan bagaimana data akan dikirim. Application Layer tidak peduli apa yang dilakukan oleh transport Layer (bagaimana data dikirim, diolah, dsb) karena application layer hanya berfokus kepada request dan response.
Lapisan OSI lainnya akan diajarkan pada mata kuliah Jaringan Komputer/Jaringan Komunikasi Data. Kamu dapat mencarinya sendiri jika kamu penasaran. \ud83d\ude09
Client Actions Method: Terdapat metode-metode yang digunakan oleh client saat melakukan request. Contoh: GET, POST, PUT, DELETE, dll. Penjelasan lebih detail dapat dibaca di sini.
Server Status Code: Merupakan status kode yang diberikan oleh server terhadap suatu request pada sebuah halaman web. Contoh: 200 (OK), 404 (Page Not Found), 500 (Internal Server Error), dsb. Penjelasan lebih detail dapat dibaca di sini.
Headers: Merupakan informasi kecil yang dikirim bersamaan dengan request dan response. Informasi-informasi tersebut berguna sebagai data tambahan yang digunakan untuk memproses request/response. Contoh: Pada headers, terdapat content-type:json. Artinya, tipe konten yang diminta/dikirim adalah json. Headers juga menyimpan data cookies.
"},{"location":"tutorial/tutorial-3/#pengenalan-cookies-session","title":"Pengenalan Cookies & Session","text":"
Semua komunikasi antara klien dan server dilakukan melalui protokol HTTP, di mana HTTP merupakan stateless protocol. Artinya state yang satu dengan yang lain tidak berhubungan (independen). Hal ini mengharuskan komputer klien yang menjalankan browser untuk membuat koneksi TCP ke server setiap kali melakukan request.
Tanpa adanya koneksi persisten antara klien dan server, software pada setiap sisi (endpoint) tidak dapat bergantung hanya pada koneksi TCP untuk melakukan holding state atau holding session state.
"},{"location":"tutorial/tutorial-3/#apa-yang-dimaksud-dengan-holding-state","title":"Apa yang dimaksud dengan holding state?","text":"
Sebagai contoh, kamu ingin mengakses suatu halaman A pada suatu web yang mensyaratkan pengaksesnya sudah login ke dalam web. Kemudian kamu login ke web tersebut dan berhasil membuka halaman A. Saat ingin pindah ke halaman B pada web yang sama, tanpa adanya suatu proses holding state maka kamu akan diminta untuk login kembali. Begitu yang akan terjadi setiap kali kamu mengakses halaman yang berbeda padahal masih pada web yang sama.
Proses memberitahu \"siapa\" yang sedang login dan menyimpan data ini dikenal sebagai bentuk dialog antara klien-server dan merupakan dasar session - a semi-permanent exchange of information. Merupakan hal yang sulit untuk membuat HTTP melakukan holding state (karena HTTP merupakan stateless protocol). Oleh karena itu, dibutuhkan teknik untuk mengatasi masalah tersebut, yaitu Cookie dan Session.
"},{"location":"tutorial/tutorial-3/#cara-melakukan-holding-state","title":"Cara melakukan holding state?","text":"
Salah satu cara yang paling banyak digunakan untuk melakukan holding state adalah dengan menggunakan session ID yang disimpan sebagai cookie pada komputer klien. Session ID dapat dianggap sebagai suatu token (barisan karakter) untuk mengenali session yang unik pada aplikasi web tertentu. Daripada menyimpan semua jenis informasi sebagai cookies pada klien seperti username, nama, dan password, hanya Session ID yang disimpan.
Session ID ini kemudian dapat dipetakan ke suatu struktur data pada sisi web server. Pada struktur data tersebut, kamu dapat menyimpan semua informasi yang kamu butuhkan. Pendekatan ini jauh lebih aman untuk menyimpan informasi mengenai pengguna, daripada menyimpannya pada cookie. Dengan cara ini, informasi tidak dapat disalahgunakan oleh klien atau koneksi yang mencurigakan.
Selain itu, pendekatan ini lebih \"tepat\" jika data yang akan disimpan ada banyak. Hal itu karena cookie hanya dapat menyimpan maksimal 4 KB data. Bayangkan kamu sudah login ke suatu web/aplikasi dan mendapat session ID (session identifier). Untuk dapat melakukan holding state pada HTTP yang stateless, browser biasanya mengirimkan suatu session ID ke server pada setiap request. Dengan begitu, setiap kali datang suatu request, maka server akan bereaksi (kurang lebih) \"Oh, ini orang yang tepat!\". Kemudian server akan mencari informasi state di memori server atau di database berdasarkan session ID yang didapat, lalu mengembalikan data yang diminta.
Perbedaan penting yang perlu diingat adalah data cookie disimpan pada sisi klien, sedangkan data session biasanya disimpan pada sisi server. Untuk pembahasan lebih detail mengenai stateless, stateful, cookie, dan session dapat dibaca di sini.
Berikut tabel singkat yang menjelaskan perbedaan antara cookies, session, dan local storage secara singkat.
Cookies Local Storage Sessions Kapasitas 4 KB 5 MB 5 MB Teknologi Browser HTML4/HTML5 HTML5 HTML5 Aksesibilitas Semua window Semua window Tab yang sama Kedaluwarsa Diatur manual Selamanya Saat tab ditutup
Beberapa tautan video yang dapat memperkaya pengetahuan terkait materi ini:
Sebelum kamu memulai, serta untuk membantumu mengikuti tutorial 3 dengan baik, kami mengharapkan beberapa hasil berikut dari tutorial 2:
Struktur direktori book-tracker secara lokal adalah sebagai berikut.
Struktur repository book-tracker pada GitHub adalah sebagai berikut.
"},{"location":"tutorial/tutorial-3/#tutorial-membuat-fungsi-dan-form-registrasi","title":"Tutorial: Membuat Fungsi dan Form Registrasi","text":"
Pada tutorial sebelumnya, kita sudah mencoba membuat sebuah form untuk menambahkan suatu buku. Bagaimana? Mudah kan? Pada tutorial ini kita akan membuat halaman utama (main) menjadi restricted dengan cara membuat akun untuk pengguna. Sehingga, pengguna yang ingin mengakses halaman utama main harus melakukan login terlebih dahulu agar mendapatkan akses.
Buka views.py yang ada pada subdirektori main pada proyek kamu. Tambahkan import redirect, UserCreationForm, dan messages pada bagian paling atas.
from django.shortcuts import redirect\nfrom django.contrib.auth.forms import UserCreationForm\nfrom django.contrib import messages\n
Penjelasan Kode:
UserCreationForm adalah impor formulir bawaan yang memudahkan pembuatan formulir pendaftaran pengguna dalam aplikasi web. Dengan formulir ini, pengguna baru dapat mendaftar dengan mudah di situs web Anda tanpa harus menulis kode dari awal.
Tambahkan fungsi register di bawah ini ke dalam views.py. Fungsi ini berfungsi untuk menghasilkan formulir registrasi secara otomatis dan menghasilkan akun pengguna ketika data di-submit dari form.
def register(request):\n form = UserCreationForm()\n\n if request.method == \"POST\":\n form = UserCreationForm(request.POST)\n if form.is_valid():\n form.save()\n messages.success(request, 'Your account has been successfully created!')\n return redirect('main:login')\n context = {'form':form}\n return render(request, 'register.html', context)\n
Penjelasan Kode:
form = UserCreationForm(request.POST) digunakan untuk membuat UserCreationForm baru dari yang sudah di-impor sebelumnya dengan memasukkan QueryDict berdasarkan input dari user pada request.POST.
form.is_valid() digunakan untuk memvalidasi isi input dari form tersebut.
form.save() digunakan untuk membuat dan menyimpan data dari form tersebut.
messages.success(request, 'Your account has been successfully created!') digunakan untuk menampilkan pesan kepada pengguna setelah melakukan suatu aksi.
return redirect('main:show_main') digunakan untuk melakukan redirect setelah data form berhasil disimpan.
Buatlah berkas HTML baru dengan nama register.html pada direktori main/templates. Isi dari register.html dapat kamu isi dengan template berikut.
Kita sudah menambahkan formulir registrasi akun dan membuat mekanisme register. Selanjutnya, kita akan membuat form login agar pengguna dapat melakukan autentikasi akun.
"},{"location":"tutorial/tutorial-3/#tutorial-membuat-fungsi-login","title":"Tutorial: Membuat Fungsi Login","text":"
Buka kembali views.py yang ada pada subdirektori main. Tambahkan import authenticate dan login pada bagian paling atas.
from django.contrib.auth import authenticate, login\n
Penjelasan Kode:
Singkatnya, fungsi authenticate dan login yang diimport diatas adalah fungsi bawaan Django yang dapat digunakan untuk melakukan autentikasi dan login (jika autentikasi berhasil). Selengkapnya dapat dibaca di sini.
Tambahkan fungsi login_user di bawah ini ke dalam views.py. Fungsi ini berfungsi untuk mengautentikasi pengguna yang ingin login.
def login_user(request):\n if request.method == 'POST':\n username = request.POST.get('username')\n password = request.POST.get('password')\n user = authenticate(request, username=username, password=password)\n if user is not None:\n login(request, user)\n return redirect('main:show_main')\n else:\n messages.info(request, 'Sorry, incorrect username or password. Please try again.')\n context = {}\n return render(request, 'login.html', context)\n
Penjelasan Kode:
authenticate(request, username=username, password=password) digunakan untuk melakukan autentikasi pengguna berdasarkan username dan password yang diterima dari permintaan (request) yang dikirim oleh pengguna saat login.
Buatlah berkas HTML baru dengan nama login.html pada direktori main/templates. Isi dari login.html dapat kamu isi dengan template berikut.
Kita sudah menambahkan form login akun dan membuat mekanisme login. Selanjutnya, kita akan membuat mekanisme logout dan menambahkan tombol logout pada halaman main.
"},{"location":"tutorial/tutorial-3/#tutorial-membuat-fungsi-logout","title":"Tutorial: Membuat Fungsi Logout","text":"
Buka kembali views.py yang ada pada subdirektori main. Tambahkan import logout ini pada bagian paling atas.
from django.contrib.auth import logout\n
Tambahkan fungsi di bawah ini ke dalam fungsi views.py. Fungsi ini berfungsi untuk melakukan mekanisme logout.
Buka kembali views.py yang ada pada subdirektori main dan tambahkan import login_required pada bagian paling atas.
from django.contrib.auth.decorators import login_required\n
Penjelasan Kode: Kode from django.contrib.auth.decorators import login_required digunakan untuk mengimpor sebuah decorator yang bisa mengharuskan pengguna masuk (login) terlebih dahulu sebelum dapat mengakses suatu halaman web.
Tambahkan potongan kode @login_required(login_url='/login') di atas fungsi show_main agar halaman main hanya dapat diakses oleh pengguna yang sudah login (terautentikasi).
Setelah melakukan restriksi akses halaman main, jalankan proyek Django-mu dengan perintah python manage.py runserver dan bukalah http://localhost:8000/ di browser favoritmu untuk melihat hasilnya. Seharusnya halaman yang muncul bukanlah daftar buku di halaman main, tetapi akan di-redirect ke halaman login.
"},{"location":"tutorial/tutorial-3/#tutorial-menggunakan-data-dari-cookies","title":"Tutorial: Menggunakan Data Dari Cookies","text":"
Sekarang, kita akan melihat penggunaan cookies dengan menambahkan data last login dan menampilkannya ke halaman main.
Lakukan logout terlebih dahulu apabila kamu sedang menjalankan aplikasi Django-mu.
Buka kembali views.py yang ada pada subdirektori main. Tambahkan import HttpResponseRedirect, reverse, dan datetime pada bagian paling atas.
Pada fungsi login_user, kita akan menambahkan fungsionalitas menambahkan cookie yang bernama last_login untuk melihat kapan terakhir kali pengguna melakukan login. Caranya adalah dengan mengganti kode yang ada pada blok if user is not None menjadi potongan kode berikut.
...\nif user is not None:\n login(request, user)\n response = HttpResponseRedirect(reverse(\"main:show_main\"))\n response.set_cookie('last_login', str(datetime.datetime.now()))\n return response\n...\n
Penjelasan Kode:
login(request, user) berfungsi untuk melakukan login terlebih dahulu
response = HttpResponseRedirect(reverse(\"main:show_main\")) untuk membuat response
response.set_cookie('last_login', str(datetime.datetime.now())) berfungsi untuk membuat cookie last_login dan menambahkannya ke dalam response
Perhatikan indentasi kode kamu, pastikan tidak terdapat dead code pada fungsi tersebut.
Pada fungsi show_main, tambahkan potongan kode 'last_login': request.COOKIES['last_login'] ke dalam variabel context. Berikut adalah contoh kode yang sudah diubah.
response.delete_cookie('last_login') berfungsi untuk menghapus cookie last_login saat pengguna melakukan logout.
Buka berkas main.html dan tambahkan potongan kode berikut di setelah tombol logout untuk menampilkan data last login.
...\n<h5>Sesi terakhir login: {{ last_login }}</h5>\n...\n
Silakan refresh halaman login (atau jalankan proyek Django-mu dengan perintah python manage.py runserver jika kamu belum menjalankan proyekmu) dan cobalah untuk login. Data last login kamu akan muncul di halaman main.
Jika kamu menggunakan browser Google Chrome, untuk melihat data cookie last_login, kamu dapat mengakses fitur inspect element dan membuka bagian Application/Storage. Klik bagian Cookies dan kamu dapat melihat data cookies yang tersedia. Selain last_login, kamu juga dapat melihat data sessionid dan csrftoken. Berikut adalah contoh tampilannya.
Jika kamu melakukan logout dan membuka bagian riwayat cookie, cookie yang dibuat sebelumnya akan hilang dan dibuat ulang ketika kamu login kembali.
Sebelum melanjutkan ke tutorial berikutnya, cobalah untuk membuat satu akun pada halaman web kamu.
"},{"location":"tutorial/tutorial-3/#tutorial-menghubungkan-model-book-dengan-user","title":"Tutorial: Menghubungkan Model Book dengan User","text":"
Kamu perlu mengikuti tutorial secara berurut dari awal sebelum menjalankan bagian berikut. Jika kamu tidak mengikuti tutorial secara berurut, maka kami tidak bertanggung jawab atas error di luar pembahasan tutorial yang dapat muncul dari bagian tutorial berikut.
Terakhir, kita akan menghubungkan setiap objek Book yang akan dibuat dengan pengguna yang membuatnya, sehingga pengguna yang sedang terotorisasi hanya melihat buku-buku yang telah dibuat sendiri. Untuk itu, ikuti langkah-langkah berikut:
Buka models.py yang ada pada subdirektori main dan tambahkan kode berikut pada dibawah baris kode untuk mengimpor model:
Pada model Book yang sudah dibuat, tambahkan potongan kode berikut:
class Book(models.Model):\n user = models.ForeignKey(User, on_delete=models.CASCADE)\n ...\n
Penjelasan Kode:
Potongan kode diatas berfungsi untuk menghubungkan satu buku dengan satu user melalui sebuah relationship, dimana sebuah buku pasti terasosiasikan dengan seorang user. Lebih lanjutnya terkait ForeignKey akan dipelajari pada mata kuliah Basis Data. Penjelasan lebih lanjut terkait ForeignKey pada Django dapat dilihat di sini.
Buka kembali views.py yang ada pada subdirektori main, dan ubah potongan kode pada fungsi create_book menjadi sebagai berikut:
def create_book(request):\n form = BookForm(request.POST or None)\n\n if form.is_valid() and request.method == \"POST\":\n book = form.save(commit=False)\n book.user = request.user\n book.save()\n return redirect('main:show_main')\n\n context = {'form': form}\n return render(request, \"create_book.html\", context)\n ...\n
Penjelasan Kode:
Parameter commit=False yang digunakan pada potongan kode diatas berguna untuk mencegah Django agar tidak langsung menyimpan objek yang telah dibuat dari form langsung ke database. Hal tersebut memungkinkan kita untuk memodifikasi terlebih dahulu objek tersebut sebelum disimpan ke database. Pada kasus ini, kita akan mengisi field user dengan objek User dari return value request.user yang sedang terotorisasi untuk menandakan bahwa objek tersebut dimiliki oleh pengguna yang sedang login.
Potongan kode diatas berfungsi untuk menampilkan objek Book yang terasosiasikan dengan pengguna yang sedang login. Hal tersebut dilakukan dengan menyaring seluruh objek dengan hanya mengambil Book yang dimana field user terisi dengan objek User yang sama dengan pengguna yang sedang login.
Kode request.user.username berfungsi untuk menampilkan username pengguna yang login pada halaman main.
Simpan semua perubahan, dan lakukan migrasi model dengan python manage.py makemigrations.
Seharusnya, akan muncul error saat melakukan migrasi model. Pilih 1 untuk menetapkan default value untuk field user pada semua row yang telah dibuat pada basis data.
Ketik angka 1 lagi untuk menetapkan user dengan ID 1 (yang sudah kita buat sebelumnya) pada model yang sudah ada.
Lakukan python manage.py migrate untuk mengaplikasikan migrasi yang dilakukan pada poin sebelumnya.
Jalankan proyek Django-mu dengan perintah python manage.py runserver dan bukalah http://localhost:8000/ di browser favoritmu untuk melihat hasilnya. Cobalah untuk membuat akun baru dan login dengan akun yang baru dibuat. Amatilah halaman utama, buku yang tadi telah dibuat dengan akun sebelumnya tidak akan ditampilkan di halaman pengguna akun yang baru saja kamu buat. Hal tersebut berarti kamu sudah berhasil menghubungkan objek Book dengan User yang membuatnya.
Selamat! Kamu telah menyelesaikan Tutorial 3 dengan baik. \ud83d\ude04
Setelah kamu menyelesaikan seluruh tutorial di atas, harapannya kamu sekarang lebih paham tentang penggunaan form, autentikasi, session, dan cookie pada framework Django.
Setelah menyelesaikan tutorial ini, tampilan halaman web kamu seharusnya terlihat seperti ini.
Pada akhir tutorial ini, struktur subdirektori main pada lokalmu terlihat seperti ini.
Sebelum melakukan langkah ini, pastikan struktur direktori lokal sudah benar. Selanjunya, lakukan add, commit dan push untuk memperbarui repositori GitHub.
Jalankan perintah berikut untuk melakukan add, commit dan push.
Tutorial ini dikembangkan berdasarkan PBP Ganjil 2024 yang ditulis oleh Tim Pengajar Pemrograman Berbasis Platform 2023/2024. Segala tutorial serta instruksi yang dicantumkan pada repositori ini dirancang sedemikian rupa sehingga mahasiswa yang sedang mengambil mata kuliah Pemrograman Berbasis Platform dapat menyelesaikan tutorial saat sesi lab berlangsung.
"},{"location":"tutorial/tutorial-4/","title":"Tutorial 4: Desain Web Menggunakan HTML dan CSS3 & Metode Update dan Delete pada Data","text":"
Pemrograman Berbasis Platform (CSGE602022) \u2014 diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Genap 2023/2024
HyperText Markup Language (HTML) adalah bahasa markup standar untuk dokumen agar dapat ditampilkan dalam browser web. HTML mendefinisikan struktur dari konten suatu website.
Silakan pelajari dan mencoba sendiri HTML pada referensi ini.
Perbedaan antara HTML dan HTML5 bisa kamu baca pada referensi ini.
"},{"location":"tutorial/tutorial-4/#pengenalan-css","title":"Pengenalan CSS","text":""},{"location":"tutorial/tutorial-4/#apa-itu-css","title":"Apa itu CSS?","text":"
Cascading Style Sheets (CSS) adalah bahasa yang digunakan untuk mendeskripsikan tampilan dan format dari sebuah situs web yang ditulis pada markup language (seperti HTML). CSS berguna untuk membuat tampilan situs web menjadi lebih menarik.
Untuk mempelajari perbedaan antara CSS dan CSS3 bisa kamu baca pada referensi ini.
Secara umum, CSS dapat dituliskan dalam bentuk sebagai berikut.
selector {\n properties: value;\n}\n
Silakan pelajari dan mencoba sendiri CSS pada referensi ini.
Terdapat tiga jenis cara penulisan CSS:
Inline Styles
Internal Style Sheet
External Style Sheet
Silakan pelajari tentang ketiga jenis CSS tersebut pada referensi ini.
Perlu diperhatikan, jika kamu membuat jenis External Style Sheet, kamu perlu menambahkan tag {% load staticfiles %} pada halaman HTML kamu. Contohnya seperti potongan kode di bawah ini.
Jika terdapat lebih dari satu style yang didefinisikan untuk suatu elemen, maka style yang akan diterapkan adalah yang memiliki prioritas yang lebih tinggi. Berikut ini urutan prioritasnya, nomor 1 yang memiliki prioritas paling tinggi.
Inline style
External dan internal style sheets
Browser default
"},{"location":"tutorial/tutorial-4/#static-files-pada-django","title":"Static files pada Django","text":"
Pada framework Django, terdapat file-file yang disebut dengan static files. Static files merupakan file-file pendukung HTML pada suatu situs web. Contoh static files adalah CSS, JavaScript, dan gambar.
Pengaturan untuk static files terletak pada file settings.py:
ID selector menggunakan ID pada tag sebagai selector-nya. ID bersifat unik dalam satu halaman web. ID dapat ditambahkan pada halaman template HTML.
Contoh penggunaan ID Selector pada template HTML:
<body>\n <div id=\"header\">\n <h1>Tutorial CSS Yay :D</h1>\n </div>\n ...\n</body>\n
Kemudian, kita dapat menggunakan ID tersebut sebagai selector dalam file CSS. ID selector menggunakan format #[id_name] (selalu diawali #)
#header {\n background-color: #f0f0f0;\n margin-top: 0;\n padding: 20px 20px 20px 40px;\n}\n
Class Selector
Class Selector memungkinkan kita untuk mengelompokkan elemen dengan karakteristik yang sama.
Contoh penggunaan Class Selector pada template HTML:
...\n<div id=\"main\">\n <div class=\"content_section\">\n <p class=\"date\">published: 28 September 2022</p>\n <h2><a href=\"\">Tutorial CSS ku</a></h2>\n <p id=\"content_1\">Yay ini tutorial yang gampang!</p>\n </div>\n <div class=\"content_section\">\n <p class=\"date \">published: 29 September 2022</p>\n <h2><a href=\"\">Tutorial CSS mu</a></h2>\n <p id=\"content_2\">Yay ini tutorial yang mudah!</p>\n </div>\n <div class=\"content_section\">\n <p>published: 30 September 2022</p>\n <h2><a href=\"\">Tutorial CSS semua</a></h2>\n <p id=\"content_3\">Yay ini tutorial yang tidak sulit!</p>\n </div>\n</div>\n...\n
Kemudian, kita dapat menggunakan Class tersebut sebagai selector dalam file CSS. Class selector menggunakan format .[class_name] (diawali .)
.content_section {\n background-color: #3696e1;\n margin-bottom: 30px;\n color: #000000;\n font-family: cursive;\n padding: 20px 20px 20px 40px;\n}\n
Untuk memperdalam pengetahuan mengenai CSS Selector Reference, kamu dapat membaca referensi ini.
"},{"location":"tutorial/tutorial-4/#tips-trik-css","title":"Tips & trik CSS","text":""},{"location":"tutorial/tutorial-4/#mengenal-combinator-pada-css","title":"Mengenal Combinator pada CSS","text":"
Combinator dalam CSS menghubungkan dua atau lebih selector untuk merincikan lebih lanjut elemen-elemen yang di-select.
Terdapat empat combinators pada CSS. Berikut ringkasan pemakaiannya:
Combinator Contoh pemakaian Penjelasan contoh Descendant selector (space) div p Menyeleksi semua elemen p yang merupakan keturunan dari elemen div Child selector (>) div > p Menyeleksi semua elemen p yang merupakan anak dari elemen div Adjacent sibling selector (+) div + p Menyeleksi elemen p pertama yang berada tepat setelah elemen div (harus memiliki elemen induk yang sama) General sibling selector (~) div ~ p Menyeleksi semua elemen p yang sejajar dan berada setelah elemen div
Silakan pelajari lebih lanjut mengenai combinator melalui referensi ini.
"},{"location":"tutorial/tutorial-4/#mengenal-pseudo-class-pada-css","title":"Mengenal Pseudo-class pada CSS","text":"
Pseudo-class digunakan untuk mendefinisikan state khusus dari suatu elemen. Sintaks pemakaian pseudo-class adalah sebagai berikut:
selector:pseudo-class {\n property: value;\n}\n
Beberapa contoh pseudo-class: | Pseudo-class | Mengaplikasikan style pada .. | | -------- | -------- | | :link | tautan yang belum pernah dikunjungi | | :visited | tautan yang sudah pernah dikunjungi | | :hover | saat pengguna mengarahkan kursor di atas elemen tersebut | | :active | saat elemen diaktifkan (biasanya saat pengguna mengklik elemen tersebut) | | :focus | saat elemen fokus (seperti saat pengguna mengklik input field) | | :checked | elemen yang telah dicentang | | :disabled | elemen yang telah dibuat tidak responsif (misalnya tombol yang tidak bisa diklik) |
Silakan pelajari lebih lanjut mengenai pseudo-class melalui referensi ini.
"},{"location":"tutorial/tutorial-4/#mengenal-box-model-pada-css","title":"Mengenal Box Model pada CSS","text":"
Box model pada CSS pada dasarnya merupakan suatu box yang membungkus setiap elemen HTML dan terdiri atas:
Content: isi dari box (tempat terlihatnya teks dan gambar)
Padding: mengosongkan area di sekitar konten (transparan)
Border: garis tepian yang membungkus konten dan padding-nya
Margin: mengosongkan area di sekitar border (transparan)
Silakan pelajari lebih lanjut mengenai margin, border, dan padding melalui referensi ini.
Pada bidang pengembangan web, terdapat banyak framework CSS yang sering digunakkan. Fungsi sebuah framework adalah untuk mempermudah pekerjaan programmer pada saat mengerjakan pekerjaan mereka. Framework CSS yang populer saat ini adalah Bootstrap dan juga Tailwind. Kedua framework ini memberikan banyak kelebihan dibandingkan CSS yang biasa kita gunakan. Berikut adalah kelebihan-kelebihan penggunaan framework yang diperoleh dibandingkan CSS biasa:
Proses Pengembangan Lebih Cepat: Framework seperti Bootstrap menyediakan komponen siap pakai sehingga tanpa harus menulis kode CSS dari awal.
Responsif secara Bawaan: Framework seperti Bootstrap dan Tailwind telah dirancang dengan responsif.
Skalabilitas Besar: Framework CSS memberikan struktur yang baik untuk proyek yang berkembang seiring waktu.
Bootstrap dan Tailwind tentu saja sebagai framework memiliki perbedaan yang signifikan antara satu sama lain, yaitu:
Tailwind Bootstrap Tailwind CSS membangun tampilan dengan menggabungkan kelas-kelas utilitas yang telah didefinisikan sebelumnya. Bootstrap menggunakan gaya dan komponen yang telah didefinisikan, yang memiliki tampilan yang sudah jadi dan dapat digunakan secara langsung. Tailwind CSS memiliki file CSS yang lebih kecil sedikit dibandingkan Bootstrap dan hanya akan memuat kelas-kelas utilitas yang ada Bootstrap memiliki file CSS yang lebih besar dibandingkan dengan Tailwind CSS karena termasuk banyak komponen yang telah didefinisikan. Tailwind CSS memiliki memberikan fleksibilitas dan adaptabilitas tinggi terhadap proyek Bootstrap sering kali menghasilkan tampilan yang lebih konsisten di seluruh proyek karena menggunakan komponen yang telah didefinisikan. Tailwind CSS memiliki pembelajaran yang lebih curam karena memerlukan pemahaman terhadap kelas-kelas utilitas yang tersedia dan bagaimana menggabungkannya untuk mencapai tampilan yang diinginkan. Bootstrap memiliki pembelajaran yang lebih cepat untuk pemula karena dapat mulai dengan komponen yang telah didefinisikan."},{"location":"tutorial/tutorial-4/#responsive-web-design","title":"Responsive Web Design","text":"
Responsive web design merupakan metode sistem desain web yang memiliki tujuan untuk menghasilkan tampilan web yang terlihat baik pada seluruh perangkat seperti desktop, tablet, mobile, dan sebagainya. Responsive web design tidak mengubah isi dari situs web, tetapi hanya mengubah tampilan dan penataan pada setiap perangkat agar sesuai dengan lebar layar dan kemampuan perangkat tersebut. Dalam responsive web design tampilan-tampilan tertentu membutuhkan bantuan CSS (seperti mengecilkan atau membesarkan) suatu elemen.
Salah satu cara untuk menguji apakah suatu situs web menggunakan responsive web design adalah dengan mengakses situs web tersebut dan mengaktifkan fitur Toggle Device Mode pada browser. Fitur ini memungkinkan kamu untuk melihat bagaimana situs web tersebut ditampilkan pada berbagai perangkat, seperti komputer, tablet, atau smartphone, tanpa harus mengubah ukuran jendela browser.
Berikut adalah cara untuk mengakses fitur tersebut pada browser Google Chrome. * Windows/Linux : CTRL + SHIFT + M * Mac : Command + Shift + M
Cara lain yang lebih praktis adalah dengan melakukan klik kanan pada browser dan memilih Inspect Element/Inspect untuk membuka Dev Tools yang berguna.
Untuk mempelajari lebih lengkap mengenai Reponsive Web Design, kamu dapat membuka referensi ini.
"},{"location":"tutorial/tutorial-4/#tutorial-menambahkan-bootstrap-ke-aplikasi","title":"Tutorial: Menambahkan Bootstrap ke Aplikasi","text":"
Pada mata kuliah PBP ini, kita akan memfokuskan pembelajaran CSS menggunakan framework bootstrap. Berikut adalah langkah yang perlu kamu lakukan untuk menyelesaikan bagian tutorial ini.
Buka project django kalian (book_tracker), lalu buka file base.html yang telah dibuat sebelumnya pada templates folder yang berada di root project kalian.
Didalam templates/base.html, tambahkan tag agar halaman web kamu dapat menyesuaikan ukuran dan perilaku perangkat mobile (apabila belum).
<head>\n {% block meta %}\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n {% endblock meta %}\n</head>\n
Tambahkan Bootstrap CSS dan juga JS.
CSS:
<head>\n {% block meta %}\n ...\n {% endblock meta %}\n <link href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN\" crossorigin=\"anonymous\">\n</head>\n
(Opsional) Apabila kalian ingin menggunakan dropdowns, popover, tooltips yang disediakan framework Bootstrap, maka kalian perlu menambahkan 2 baris script JS ini dibawah script JS yang sudah kalian buat sebelumnya.
"},{"location":"tutorial/tutorial-4/#tutorial-menambahkan-navbar-pada-aplikasi","title":"Tutorial: Menambahkan navbar pada Aplikasi","text":"
Tambahkan navigation bar (boleh menggunakan Bootstrap) pada halaman main.html kamu. Tampilkan nama kamu dan tombol logout pada navigation bar yang kamu buat. Kamu dapat referensi cara membuat navigation bar pada Bootstrap dengan dokumentasi berikut dan kreasikan navigation bar sesukamu.
"},{"location":"tutorial/tutorial-4/#tutorial-menambahkan-fitur-edit-pada-aplikasi","title":"Tutorial: Menambahkan Fitur Edit pada Aplikasi","text":"
Buka views.py yang ada pada subdirektori main, dan buatlah fungsi baru bernama edit_book yang menerima parameter request dan id.
Tambahkan potongan kode berikut pada fungsi edit_book
def edit_book(request, id):\n # Get book berdasarkan ID\n book = Book.objects.get(pk = id)\n\n # Set book sebagai instance dari form\n form = BookForm(request.POST or None, instance=book)\n\n if form.is_valid() and request.method == \"POST\":\n # Simpan form dan kembali ke halaman awal\n form.save()\n return HttpResponseRedirect(reverse('main:show_main'))\n\n context = {'form': form}\n return render(request, \"edit_book.html\", context)\n
Buatlah berkas HTML baru dengan nama edit_book.html pada subdirektori main/templates. Isi berkas tersebut dengan template berikut.
Buka main.html yang berada pada subdirektori main/templates. Tambahkan potongan kode berikut sejajar dengan elemen <td> terakhir agar terlihat tombol edit pada setiap baris tabel.
Jalankan proyek Django-mu dengan perintah python manage.py runserver dan bukalah http://localhost:8000 di browser favoritmu. Setelah login, coba untuk meng-edit data suatu buku. Apabila setelah di-submit perubahan tersimpan dan tercermin pada halaman utama aplikasi tanpa error, maka selamat, kamu berhasil menambahkan fitur edit!
"},{"location":"tutorial/tutorial-4/#tutorial-membuat-fungsi-untuk-menghapus-data-buku","title":"Tutorial: Membuat Fungsi untuk Menghapus Data Buku","text":"
Berikut adalah yang perlu kamu lakukan untuk membuat fungsi penghapusan data buku.
Buat fungsi baru dengan nama delete_book yang menerima parameter request dan id pada views.py di folder main untuk menghapus data buku. Kamu dapat menggunakan templat kode berikut untuk memuat fungsinya.
Jangan lupa untuk memahami isi kodenya, ya. \ud83d\ude09
def delete_book(request, id):\n # Get data berdasarkan ID\n book = Book.objects.get(pk = id)\n # Hapus data\n book.delete()\n # Kembali ke halaman awal\n return HttpResponseRedirect(reverse('main:show_main'))\n
Buka urls.py yang ada pada folder main dan impor fungsi yang sudah kamu buat tadi.
from main.views import delete_book\n
Tambahkan path url ke dalam urlpatterns untuk mengakses fungsi yang sudah diimpor.
...\npath('delete/<int:id>', delete_book, name='delete_book'), # sesuaikan dengan nama fungsi yang dibuat\n...\n
Bukalah berkas main.html yang ada pada folder main/templates dan ubahlah kode yang sudah ada menjadi seperti berikut agar terdapat tombol hapus untuk setiap buku.
Selamat! Kamu telah menyelesaikan Tutorial 4 dengan baik. \ud83d\ude04
Setelah menyelesaikan tutorial ini, tampilan halaman web kamu seharusnya terlihat seperti ini.
Kamu juga diharapkan untuk melakukan eksplorasi dengan menggunakan CSS Framework pada tutorial ini. Berikut adalah contoh penerapan Bootstrap sederhana pada aplikasi Book Tracker.
Selanjunya, lakukan add, commit dan push untuk memperbarui repositori GitHub.
Jalankan perintah berikut untuk melakukan add, commit dan push.
Kamu dapat membuka beberapa tautan dibawah untuk melihat beberapa opsi kode yang dapat kamu gunakan untuk menambahkan navigation bar - Dengan menggunakan Bootstrap, dapat diakses melalui link ini - Dengan menggunakan CSS secara manual, dapat diakses melalui link ini
Tutorial ini dikembangkan berdasarkan PBP Ganjil 2023 dan PBP Genap 2023 yang ditulis oleh Tim Pengajar Pemrograman Berbasis Platform 2023. Segala tutorial serta instruksi yang dicantumkan pada repositori ini dirancang sedemikian rupa sehingga mahasiswa yang sedang mengambil mata kuliah Pemrograman Berbasis Platform dapat menyelesaikan tutorial saat sesi lab berlangsung.
"},{"location":"tutorial/tutorial-5/","title":"Tutorial 5: JavaScript dan AJAX","text":"
Pemrograman Berbasis Platform (CSGE602022) \u2014 diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Genap 2023/2024
JavaScript merupakan bahasa pemrograman multi-paradigma tingkat tinggi lintas platform (cross-platform high-level multi-paradigm programming language). Sifat multi-paradigma membuat JavaScript mendukung konsep pemrograman berbasis obyek, pemrograman imperatif, dan pemrograman fungsional. JavaScript sendiri merupakan implementasi dari ECMAScript, yang merupakan inti dari bahasa JavaScript. Beberapa implementasi lain dari ECMAScript yang mirip dengan JavaScript antara lain JScript (Microsoft) dan ActionScript (Adobe).
JavaScript, bersama dengan HTML dan CSS, menjadi tiga teknologi utama yang dipakai pada pengembangan web. Pada dasarnya, keuntungan menggunakan JavaScript dalam pengembangan web adalah manipulasi halaman web dapat dilakukan secara dinamis dan interaksi antara halaman web dengan pengguna dapat meningkat. Oleh karena itu, hampir semua situs web modern saat ini menggunakan JavaScript dalam halaman web mereka untuk memberikan pengalaman terbaik kepada pengguna. Beberapa contoh yang dapat kita lakukan dengan menggunakan JavaScript antara lain menampilkan informasi berdasarkan waktu, mengenali jenis peramban pengguna, melakukan validasi form atau data, membuat cookies (bukan kue, namun HTTP cookies), mengganti styling dan CSS suatu element secara dinamis, dan lain sebagainya.
Pada pengembangan web umumnya kode JavaScript digunakan pada client-side suatu web (client-side JavaScript), namun beberapa jenis kode JavaScript saat ini digunakan pada server-side suatu web (server-side JavaScript) seperti node.js. Istilah client-side menunjukkan bahwa kode JavaScript akan dieksekusi atau dijalankan pada peramban pengguna, bukan pada server situs web. Hal ini berarti kompleksitas kode JavaScript tidak akan memengaruhi performa server situs web tersebut namun memengaruhi performa peramban web dan komputer; semakin kompleks kode JavaScript, maka semakin banyak memori komputer yang dikonsumsi oleh peramban web.
Pada mata kuliah PBP, kita hanya akan fokus kepada kode client-side JavaScript.
"},{"location":"tutorial/tutorial-5/#tahapan-eksekusi-javascript-oleh-peramban","title":"Tahapan Eksekusi JavaScript oleh Peramban","text":"
Perhatikan diagram berikut untuk mengamati tahapan eksekusi JavaScript oleh peramban web.
Setelah peramban mengunduh halaman HTML web maka tepat dimana tag <script></script> berada, peramban akan melihat tag script tersebut, apakah tag tersebut berisi kode embedded JavaScript atau merujuk berkas eksternal JavaScript. Jika merujuk pada berkas eksternal JavaScript, maka peramban akan mengunduh berkas tersebut terlebih dahulu.
Penulisan JavaScript dapat dilakukan dengan embedded JavaScript atau external JavaScript. Kode JavaScript dapat didefinisikan atau dituliskan secara embedded pada berkas HTML maupun secara terpisah pada berkas tersendiri. Jika ditulis dalam berkas terpisah dari HTML, ekstensi berkas yang digunakan untuk berkas JavaScript adalah .js. Berikut contoh beberapa pendefinisian dari JavaScript.
JavaScript dapat diletakkan pada head atau body dari halaman HTML. Selain itu, kode JavaScript harus dimasukkan di antara tag <script> dan </script>. Kamu dapat meletakkan lebih dari satu tag script yang berisi JavaScript pada suatu berkas HTML.
"},{"location":"tutorial/tutorial-5/#embedded-javascript-pada-html","title":"Embedded JavaScript pada HTML","text":"
Pada berkas eksternal JavaScript, tag <script> tidak perlu lagi ditambahkan.
Memisahkan JavaScript pada berkas tersendiri dapat memberikan beberapa keuntungan seperti kode dapat digunakan di berkas HTML lain, kode JavaScript dan HTML tidak bercampur sehingga lebih fokus saat mengembangkan aplikasi, serta mempercepat proses pemuatan halaman. berkas .js biasanya akan di-cache oleh peramban sehingga jika kita membuka halaman yang sama dan tidak ada perubahan pada berkas .js, maka peramban tidak akan meminta berkas .js tersebut kepada server lagi, namun akan menggunakan berkas dari cache yang sudah disimpan sebelumnya.
Setelah JavaScript sudah dimuat dengan sempurna, maka peramban akan langsung mulai mengeksekusi kode JavaScript. Jika kode tersebut BUKAN merupakan event-triggered, maka kode langsung dieksekusi. Jika kode tersebut merupakan event-triggered, maka kode tersebut hanya akan dieksekusi jika event yang didefinisikan terpicu (triggered).
// langsung dieksekusi\nalert(\"Hello World\");\n\n// langsung dieksekusi\nvar obj = document.getElementById(\"object\");\n// langsung dieksekusi, menambahkan event handler onclick untuk element object\nobj.onclick = function () {\n // hanya dieksekusi jika element 'object' di klik\n alert(\"You just clicked the object!\");\n};\n
Mendefinisikan variabel pada JavaScript cukup mudah. Contohnya seperti berikut.
var example = 0; // var example merupakan sebuah bilangan\nvar example = \"example\"; // var example merupakan sebuah string\nvar example = true; // var example merupakan sebuah boolean\n
JavaScript dapat menampung banyak tipe data; mulai dari string, integer, hingga object sekalipun. Berbeda dengan Java yang penandaan tipe datanya dibedakan dengan head variable (contohnya kamu ingin membuat variabel dengan tipe data int, maka sintaknya seperti int x = 9), JavaScript mempunyai ciri khas loosely typed atau dynamic language, yakni kamu tidak perlu menuliskan tipe data pada head variable dan JavaScript nantinya akan secara otomatis membaca tipe data kamu berdasarkan standar yang ada (seperti pada contoh di atas).
Ada beberapa aturan dalam pemilihan indentifiers atau nama variabel dalam JavaScript. Karakter pertama harus merupakan alfabet, underscore (_), atau karakter dolar ($). Selain itu, JavaScript identifiers bersifat case sensitive.
Variabel yang didefinisikan di dalam fungsi bersifat lokal, sehingga hanya dapat diakses oleh kode didalam fungsi tersebut.
// kode diluar fungsi thisFunction() tidak dapat mengakses variabel courseName\nfunction thisFunction() {\n var courseName = \"PBP\";\n // kode di dalam fungsi ini dapat mengakses variabel courseName\n}\n
Variabel yang didefinisikan di luar fungsi bersifat global dan dapat diakses oleh kode lain dalam berkas JavaScript tersebut.
var courseName = \"PBP\";\nfunction thisFunction() {\n // kode di dalam fungsi ini dapat mengakses variabel courseName\n}\n
"},{"location":"tutorial/tutorial-5/#variabel-auto-global","title":"Variabel Auto Global","text":"
Value yang di-assign pada variabel yang belum dideklarasikan otomatis menjadi variabel global, walaupun variabel tersebut berada di dalam suatu fungsi.
thisFunction(); // fungsi thisFunction() perlu dipanggil terlebih dahulu\nconsole.log(courseName); // cetak \"PBP\" pada JavaScript console\nfunction thisFunction() {\n courseName = \"PBP\";\n}\n
"},{"location":"tutorial/tutorial-5/#mengakses-variabel-global-dari-html","title":"Mengakses Variabel Global dari HTML","text":"
Kamu dapat mengakses variabel yang berada dalam berkas JavaScript pada berkas HTML yang memuat berkas JavaScript tersebut.
"},{"location":"tutorial/tutorial-5/#function-dan-event","title":"Function dan Event","text":"
Function adalah sekumpulan grup dari kode-kode yang bisa dipanggil di mana pun pada bagian kode program (mirip dengan method pada Java). Hal ini mengurangi redundansi kode yang ada (mengurangi kode-kode yang dapat sama berulang-ulang). Selain itu, function pada JavaScript sangat berguna untuk memudahkan elemen pemanggilan secara dinamis. Function dapat dipanggil sesama function dan dapat juga dipanggil karena event (akan dijelaskan di bawah). Sebagai contoh, berikut kode yang terdapat pada index.html.
Apabila magicButton ditekan, maka fungsi onclick akan menjalankan function hooray() pada javascript.js, lalu muncul alert sesuai yang sudah di-assign sebelumnya.
Kode onclick sebenarnya adalah salah satu contoh kemampuan JavaScript yang disebut event. Event adalah kemampuan JavaScript untuk membuat sebuah situs web dinamis. Maksud dari onclick adalah penanda apa yang akan dilakukan JavaScript jika elemen tersebut ditekan. Selain itu, event biasanya diberikan sebuah fungsi yang berguna sebagai perintah-perintah untuk JavaScript. Selain itu, banyak contoh-contoh event lainnya seperti onchange, onmouseover, onmouseout, dan lain sebagainya yang bisa kamu baca pada tautan ini.
HTML DOM (Document Object Model) adalah standar bagaimana mengubah, mengambil, dan menghapus HTML elements. HTML DOM dapat diakses melalui JavaScript atau dengan bahasa pemrograman lainnya. Detail lengkapnya dapat dilihat di sini.
Berikut adalah contoh implementasinya.
... \n<div>\n <p onclick=\"myFunction()\" id=\"demo\">Example of HTML DOM</p>\n\n</div>\n...\n
...\n function myFunction() {\ndocument.getElementById(\"demo\").innerHTML = \"YOU CLICKED ME!\";\n }\n...\n
AJAX merupakan singkatan dari Asynchronous JavaScript And XML.
AJAX bukanlah merupakan sebuah bahasa pemrograman, melainkan sebuah teknologi yang memadukan peramban web (untuk meminta data dari web server) dengan JavaScript dan HTML DOM (untuk menampilkan data). AJAX dapat menggunakan XML untuk mengirim data, tetapi AJAX juga dapat menggunakan teks ataupun JSON untuk mengirim data. AJAX memungkinkan halaman web untuk memperbarui data secara asinkronus dengan mengirimkan data ke peladen di balik layar. Hal tersebut berarti bahwa kita dapat memperbarui sebagian elemen data pada halaman tanpa harus me-reload halaman secara keseluruhan.
Berikut ini adalah diagram cara kerja AJAX.
Sebuah event terjadi pada halaman web (contohnya tombol submit data ditekan)
Sebuah XMLHttpRequest object dibuat oleh JavaScript
XMLHttpRequest object mengirimkan request ke server
Server memproses request tersebut
Server mengembalikan response kembali kepada halaman web
Response dibaca oleh JavaScript
Aksi berikutnya akan dipicu oleh JavaScript sesuai dengan langkah yang dibuat (contohnya memperbarui data di halaman tersebut)
Pada PBP kali ini, kamu akan melakukan AJAX pada peramban web dengan menggunakan fungsi fetch() yang diberikan oleh JavaScript. Secara gambaran besar, penggunaan fetch() untuk melakukan pemanggilan AJAX dapat dilihat di tautan ini.
Fetch API merupakan API baru yang diperkenalkan pada ECMAScript 2020 sebagai standar baru untuk membuat request dengan Promise. Fetch API menyediakan antarmuka untuk mengambil sumber daya (termasuk di seluruh jaringan). API ini merupakan pengganti yang lebih kuat dan fleksibel untuk XMLHttpRequest. Fetch API secara umum digunakan untuk mengimplementasikan AJAX secara lebih mudah daripada AJAX dengan XMLHttpRequest. Fetch API juga mendukung lebih banyak metode HTTP dan header HTTP daripada AJAX biasa.
Fungsi fetch() memiliki beberapa parameter, yaitu:
url: URL dari sumber daya yang akan diminta
method: Metode HTTP yang akan digunakan
headers: Header HTTP yang akan dikirim
body: Isi dari permintaan HTTP
Fungsi fetch() mengembalikan objek Response. Objek Response memiliki beberapa properti, yaitu:
status: Kode status HTTP dari respons
headers: Header HTTP dari respons
body: Isi dari respons
Kamu dapat mempelajari Fetch API lebih lanjut pada tautan ini.
"},{"location":"tutorial/tutorial-5/#fungsi-async-dan-await","title":"Fungsi Async dan Await","text":"
Sebelum mempelajari penggunaan fungsi fetch(), ada baiknya kita mempelajari fungsi async dan await yang memungkinkan pengimplementasian AJAX tanpa perlu menggunakan library eksternal, seperti jQuery.
Fungsi async dan await merupakan fungsi baru yang diperkenalkan di ECMAScript 2017. Fungsi async digunakan untuk menandai fungsi sebagai fungsi yang dapat mengembalikan nilai secara asinkronus, sedangkan fungsi await digunakan untuk menunggu hasil dari fungsi async.
Kamu dapat mempelajari fungsi async dan await lebih lanjut pada tautan ini.
Fetch API menyediakan antarmuka JavaScript untuk mengakses dan memanipulasi bagian-bagian protokol, seperti requests dan responses. API ini juga menyediakan metode fetch() global yang menyediakan cara yang mudah dan logis untuk mengambil sumber daya secara asinkronus pada seluruh jaringan.
Tidak seperti XMLHttpRequest yang merupakan API berbasis callback, Fetch API berbasis Promise dan menyediakan alternatif yang lebih baik dan dapat dengan mudah digunakan pada service worker. Fetch API juga mengintegrasikan konsep HTTP tingkat lanjut seperti CORS dan ekstensi lain ke HTTP.
Berikut adalah contoh penggunaan Fetch API dengan fungsi async dan await untuk melakukan AJAX.
async function fetchData() {\n const response = await fetch(\"https://jokes-bapack2-api.yuana.id/v1/text/random\");\n const data = await response.json();\n return data;\n}\n\nconst joke = await fetchData();\nconsole.log(joke);\n
Kode di atas akan melakukan AJAX untuk meminta data dari API lelucon bapak-bapak masa kini secara asinkronus. Hasil dari AJAX akan disimpan dalam variabel joke.
Kamu dapat mempelajari penggunaan Fetch API lebih lanjut pada tautan ini.
"},{"location":"tutorial/tutorial-5/#tutorial-membuat-fungsi-untuk-menambahkan-buku-dengan-ajax","title":"Tutorial: Membuat Fungsi untuk Menambahkan Buku dengan AJAX","text":"
Pada bagian ini, kamu akan membuat fungsi pada views untuk menambahkan buku baru ke basis data dengan AJAX.
Buatlah fungsi baru pada views.py dengan nama add_book_ajax yang menerima parameter request.
Impor from django.views.decorators.csrf import csrf_exempt pada berkas views.py.
Tambahkan dekorator @csrf_exempt di atas fungsi add_book_ajax yang sudah kamu buat.
Isilah fungsi tersebut dengan kode berikut.
...\n@csrf_exempt\ndef add_book_ajax(request):\n if request.method == 'POST':\n name = request.POST.get(\"name\")\n page = request.POST.get(\"page\")\n description = request.POST.get(\"description\")\n user = request.user\n\n new_book = Book(name=name, page=page, description=description, user=user)\n new_book.save()\n\n return HttpResponse(b\"CREATED\", status=201)\n\n return HttpResponseNotFound()\n
Penjelasan Kode:
name = request.POST.get(\"name\") berfungsi untuk mengambil value name pada request.
new_book membuat objek Book baru dengan parameter sesuai values dari request.
"},{"location":"tutorial/tutorial-5/#tutorial-menambahkan-routing-untuk-fungsi-add_book_ajax","title":"Tutorial: Menambahkan Routing Untuk Fungsi add_book_ajax","text":"
Buka berkas urls.py pada folder main dan impor fungsi add_book_ajax.
Tambahkan path url fungsi tersebut ke dalam urlpatterns.
"},{"location":"tutorial/tutorial-5/#tutorial-menampilkan-data-book-dengan-fetch-api","title":"Tutorial: Menampilkan Data Book dengan Fetch() API","text":"
Bukalah berkas main.html pada main/templates dan hapuslah bagian kode table yang sudah kamu buat pada tutorial sebelumnya.
Tambahkanlah kode berikut sebagai struktur table.
<table id=\"book_table\"></table>\n
Buatlah block <Script> di bagian bawah berkas kamu dan buatlah fungsi baru pada block <Script> tersebut dengan nama getBooks().
document.getElementById(\"book_table\") digunakan untuk mendapatkan elemen berdasarkan ID nya. Pada baris kode ini, elemen yang dituju adalah tag <table> dengan ID book_table yang sudah kamu buat pada tahapan sebelumnya.
innerHTML digunakan untuk mengisi child element dari elemen yang dituju. Jika innerHTML = \"\", maka akan mengosongkan isi child element dari elemen yang dituju.
books.forEach((item)) digunakan untuk melakukan for each loop pada data books yang diambil menggunakan fungsi getBooks(). Kemudian, htmlString kita konkatenasi dengan data buku untuk mengisi tabel.
refreshBooks() digunakan untuk memanggil fungsi tersebut pada setiap kali membuka halaman web.
"},{"location":"tutorial/tutorial-5/#tutorial-membuat-modal-sebagai-form-untuk-menambahkan-buku","title":"Tutorial: Membuat Modal Sebagai Form untuk Menambahkan Buku","text":"
Tambahkan kode berikut untuk mengimplementasikan modal (Bootstrap) pada aplikasi kamu.
Form pada modal tersebut sudah disesuaikan untuk model pada aplikasi book_tracker.
Kamu dapat membaca dokumentasi lebih lanjut mengenai modal pada Bootstrap di sini.
Menambahkan button yang berfungsi untuk menampilkan modal.
...\n<button type=\"button\" class=\"btn btn-primary\" data-bs-toggle=\"modal\" data-bs-target=\"#exampleModal\">\n Add Book by AJAX\n</button>\n...\n
"},{"location":"tutorial/tutorial-5/#tutorial-menambahkan-data-book-dengan-ajax","title":"Tutorial: Menambahkan Data Book dengan AJAX","text":"
Modal dengan form yang telah kamu buat sebelumnya belum bisa digunakan untuk menambahkan data buku. Oleh karena itu, kamu perlu membuat fungsi JavaScript baru untuk menambahkan data berdasarkan input ke basis data secara AJAX.
Buatlah fungsi baru pada block <Script> dengan nama addBook(). Isilah fungsi tersebut dengan kode berikut.
<script>\n ...\n function addBook() {\n fetch(\"{% url 'main:add_book_ajax' %}\", {\n method: \"POST\",\n body: new FormData(document.querySelector('#form'))\n }).then(refreshBooks)\n\n document.getElementById(\"form\").reset()\n return false\n }\n</script>\n
Penjelasan Kode:
new FormData(document.querySelector('#form')) digunakan untuk membuat sebuah FormData baru yang datanya diambil dari form pada modal. Objek FormData dapat digunakan untuk mengirimkan data form tersebut ke server.
document.getElementById(\"form\").reset() digunakan untuk mengosongkan isi field form modal setelah di-submit.
Tambahkan fungsi onclick pada button \"Add Book\" pada modal untuk menjalankan fungsi addBook() dengan menambahkan kode berikut.
Selamat! Kamu telah berhasil membuat aplikasi yang dapat menambahkan data secara AJAX. Bukalah http://localhost:8000/ dan cobalah untuk mmenambahkan data buku baru pada aplikasi. Seharusnya, sekarang aplikasi tidak perlu melakukan reload setiap kali data buku baru ditambahkan.
Tutorial ini dikembangkan berdasarkan PBP Ganjil 2023 dan PBP Genap 2023 yang ditulis oleh Tim Pengajar Pemrograman Berbasis Platform 2023. Segala tutorial serta instruksi yang dicantumkan pada repositori ini dirancang sedemikian rupa sehingga mahasiswa yang sedang mengambil mata kuliah Pemrograman Berbasis Platform dapat menyelesaikan tutorial saat sesi lab berlangsung.
Flutter adalah sebuah framework aplikasi mobile sumber terbuka (open source) yang diciptakan oleh Google pada 2017. Flutter digunakan dalam pengembangan aplikasi untuk sistem operasi Android dan iOS. Flutter juga mendukung untuk pengembangan aplikasi berbasis web, Windows, Linux, dan MacOS secara native.
Keuntungan dari Flutter sendiri adalah kemampuannya untuk menciptakan aplikasi untuk berbagai platform dengan hanya satu codebase. Selain itu, fitur JIT (just in time) memungkinkan pengembang aplikasi untuk melihat perubahan yang dilakukan pada codebase secara langsung tanpa harus mengulang proses kompilasi kode aplikasi dari awal.
Akses salah satu dari tautan berikut sesuai dengan sistem operasi yang kamu gunakan.
a. Mac OS
Khusus pengguna Mac OS yang menggunakan Homebrew, kamu dapat menggunakan perintah brew install --cask flutter untuk menginstal Flutter.
b. Windows
c. Linux
Instal Flutter versi terkini (latest version) dengan mengikuti panduan pada tautan di atas.
Untuk pengguna Mac, silakan lewati tahap iOS Setup dan langsung ke tahap Android Setup.
Instal IDE pilihan kamu yang akan digunakan untuk mengembangkan aplikasi Flutter.
a. Android Studio (Recommended)
b. Visual Studio Code
Kamu dapat menggunakan Visual Studio Code untuk Flutter dengan menginstall ekstensi Dart dan Flutter.
Kamu juga dapat membaca fungsionalitas IDE yang disediakan oleh ekstensi Flutter pada tautan yang tersedia.
"},{"location":"tutorial/tutorial-6/#tutorial-getting-started-with-flutter","title":"Tutorial: Getting Started with Flutter","text":"
Buka Terminal atau Command Prompt.
Masuk ke direktori di mana kamu ingin menyimpan proyek flutter-mu.
Generate proyek Flutter baru dengan nama book_tracker, kemudian masuk ke dalam direktori proyek tersebut.
flutter create book_tracker\ncd book_tracker\n
Untuk membuat proyek lain, kamu dapat mengganti book_tracker sesuai dengan nama proyek yang kamu inginkan.
Jalankan proyek melalui Terminal atau Command Prompt menggunakan perintah berikut.
flutter run\n
Untuk pengguna macOS, terdapat beberapa opsi untuk menjalankan aplikasi flutter, namun yang termudah adalah:
Menggunakan emulator pada Android Studio
Menggunakan Google Chrome
Jalankan perintah di bawah untuk enable web support (hanya perlu dilakukan sekali):
flutter config --enable-web\n
Kemudian, di direktori proyek, jalankan proyek tersebut di aplikasi Google Chrome dengan perintah:
flutter run -d chrome\n
Akan muncul tampilan seperti di bawah ini.
Jalankan perintah git init pada root folder untuk menginisiasi proyek sebagai repositori Git, kemudian add-commit-push proyek ke sebuah repositori baru di GitHub. Kamu dapat menamai repositori barumu dengan nama book-tracker-mobile.
"},{"location":"tutorial/tutorial-6/#tutorial-merapikan-struktur-proyek","title":"Tutorial: Merapikan Struktur Proyek","text":"
Sebelum menyelam ke Flutter lebih lanjut, kamu akan merapikan struktur file pada proyek kamu terlebih dahulu agar kode proyek dapat lebih mudah dipahami. Hal ini merupakan bentuk penerapan best practice dalam pengembangan aplikasi, yakni clean architecture.
Buatlah file baru bernama menu.dart pada direktori book_tracker/lib. Pada baris pertama file tersebut, tambahkan kode di bawah ini.
import 'package:flutter/material.dart';\n
Dari file main.dart, pindahkan (cut) kode baris ke-39 hingga akhir yang berisi kedua class di bawah ini:
class MyHomePage ... {\n ...\n}\n\nclass _MyHomePageState ... {\n ...\n}\n
ke file menu.dart yang baru saja kamu buat.
Kamu akan melihat bahwa pada file main.dart, akan terdapat error pada baris ke-34, yang berisi kode berikut:
home: const MyHomePage(title: 'Flutter Demo Home Page'),\n
Hal ini terjadi karena file main.dart tidak lagi mengenali class MyHomePage yang sudah kamu pindahkan ke file lain, yaitu menu.dart. Untuk menyelesaikan masalah ini, tambahkan kode berikut ini pada awal file main.dart.
import 'package:book_tracker/menu.dart';\n
Jalankan proyek melalui Terminal atau Command Prompt dengan perintah flutter run untuk memastikan bahwa aplikasi tetap dapat berjalan dengan baik.
"},{"location":"tutorial/tutorial-6/#tutorial-membuat-widget-sederhana-pada-flutter","title":"Tutorial: Membuat Widget Sederhana pada Flutter","text":"
Dalam bagian ini, kamu akan mempelajari cara membuat widget sederhana di Flutter. Kamu akan membuat nama dari tracker kamu sebagai header dan membuat card sebagai button untuk fitur-fitur aplikasi kamu. Saat button yang ada ditekan, akan keluar pemberitahuan di bagian bawah layar.
Pertama-tama, kamu bisa mengubah tema warna aplikasi menjadi indigo dengan melakukan langkah berikut.
Buka file main.dart.
Ubah kode pada main.dart di bagian tema aplikasi kamu yang mempunyai tipe MaterialApp menjadi seperti di bawah ini.
Setelah mengubah sifat widget halaman menu menjadi stateless, kamu akan menambahkan teks dan card sebagai tombol, salah satunya untuk memperlihatkan buku yang sedang kamu track.
Untuk menambahkan teks dan card, kamu dapat memulai dengan mendefinisikan tipe item untuk masing-masing card pada file menu.dart. Letakkan kode di bawah ini di luar class MyHomePage yang sudah ada.
class TrackerItem {\n final String name;\n final IconData icon;\n\n TrackerItem(this.name, this.icon);\n}\n
Setelah itu, kamu dapat menambahkan list berisi tombol-tombol yang ingin kamu tambahkan beserta icon yang ingin digunakan di bawah kode MyHomePage({Key? key}) : super(key: key);.
Selanjutnya, ubah nilai yang di-return oleh widget build menjadi kode di bawah ini.
...\nreturn Scaffold(\n appBar: AppBar(\n title: const Text(\n 'Book Tracker',\n ),\n ),\n body: SingleChildScrollView(\n // Widget wrapper yang dapat discroll\n child: Padding(\n padding: const EdgeInsets.all(10.0), // Set padding dari halaman\n child: Column(\n // Widget untuk menampilkan children secara vertikal\n children: <Widget>[\n const Padding(\n padding: EdgeInsets.only(top: 10.0, bottom: 10.0),\n // Widget Text untuk menampilkan tulisan dengan alignment center dan style yang sesuai\n child: Text(\n 'PBP\\'s Tracker', // Text yang menandakan tracker\n textAlign: TextAlign.center,\n style: TextStyle(\n fontSize: 30,\n fontWeight: FontWeight.bold,\n ),\n ),\n ),\n // Grid layout\n GridView.count(\n // Container pada card kita.\n primary: true,\n padding: const EdgeInsets.all(20),\n crossAxisSpacing: 10,\n mainAxisSpacing: 10,\n crossAxisCount: 3,\n shrinkWrap: true,\n children: items.map((TrackerItem item) {\n // Iterasi untuk setiap item\n return TrackerCard(item);\n }).toList(),\n ),\n ],\n ),\n ),\n ),\n );\n
Walaupun sebelumnya terdapat error, kamu tidak perlu khawatir. Kamu hanya perlu membuat widget stateless baru untuk menampilkan card. Tambahkan class di bawah ini (masih di file yang sama) di luar class-class yang sudah ada.
Sebagai bentuk best practice, jalankan perintah flutter analyze pada root folder proyek setelah kode kamu selesai ditulis. Hal ini sebaiknya dilakukan untuk memastikan tidak ada isu-isu pada kode kamu yang dapat mengganggu performa atau fungsionalitas aplikasi. Jika kamu mengikuti tutorial dengan baik, seharusnya hasil perintah menunjukkan bahwa tidak ada isu terdeteksi pada proyek kamu.
Apabila ternyata terdapat isu pada kode kamu (contohnya pada gambar di bawah), cobalah untuk menyelesaikan isu tersebut dengan mengikuti tutorial secara lebih teliti atau memperhatikan baris kode di mana isu tersebut terjadi.
Langkah ini juga dapat membantu proses building yang akan dilakukan pada beberapa tutorial yang akan datang.
Tutorial ini dikembangkan berdasarkan PBP Ganjil 2023 dan PBP Genap 2023 yang ditulis oleh Tim Pengajar Pemrograman Berbasis Platform 2023. Segala tutorial serta instruksi yang dicantumkan pada repositori ini dirancang sedemikian rupa sehingga mahasiswa yang sedang mengambil mata kuliah Pemrograman Berbasis Platform dapat menyelesaikan tutorial saat sesi lab berlangsung.
"},{"location":"tutorial/tutorial-7/","title":"Tutorial 7: Flutter Navigation, Layouts, Forms, and Input Elements","text":"
Pemrograman Berbasis Platform (CSGE602022) \u2014 diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Genap 2023/2024
Setelah menyelesaikan tutorial ini, mahasiswa diharapkan untuk dapat:
Memahami navigasi dan routing dasar pada Flutter.
Memahami elemen input dan form pada Flutter.
Memahami alur pembuatan form dan data pada Flutter.
Memahami dan menerapkan clean architecture sederhana
"},{"location":"tutorial/tutorial-7/#navigasi-halaman-pada-flutter","title":"Navigasi Halaman pada Flutter","text":"
Pada saat belajar pengembangan web, kalian pasti sudah belajar bahwa dalam sebuah website kita dapat berpindah-pindah halaman sesuai dengan URL yang diakses. Hal yang sama juga berlaku pada pengembangan aplikasi, dimana kita juga dapat melakukan perpindahan dari satu 'halaman' ke 'halaman' yang lainnya. Bedanya, pada sebuah aplikasi, yang kita gunakan untuk berpindah bukanlah dengan mengakses URL yang berbeda.
Untuk mengimplementasikan navigasi pada Flutter, sebenarnya sudah disediakan sistem yang cukup lengkap untuk melakukan navigasi antar halaman. Salah satu cara yang dapat kita gunakan untuk berpindah-pindah halaman adalah dengan menggunakan widget Navigator. Widget Navigator menampilkan halaman-halaman yang ada kepada layar seakan sebagai sebuah tumpukan (stack). Untuk menavigasi sebuah halaman baru, kita dapat mengakses Navigator melalui BuildContext dan memanggil fungsi yang ada, seperti misalnya push(), pop(), serta pushReplacement().
Note: Di dalam Flutter, layar dan halaman seringkali disebut dengan terminologi route.
Berikut adalah penjelasan mengenai beberapa penggunaan Navigator yang paling sering dijumpai dalam pengembangan aplikasi.
Method push() menambahkan suatu route ke dalam stack route yang dikelola oleh Navigator. Method ini menyebabkan route yang ditambahkan berada pada paling atas stack, sehingga route yang baru saja ditambahkan tersebut akan muncul dan ditampilkan kepada pengguna.
Method pop() menghapus route yang sedang ditampilkan kepada pengguna (atau dalam kata lain, route yang berada pada paling atas stack) dari stack route yang dikelola oleh Navigator. Method ini menyebabkan aplikasi untuk berpindah dari route yang sedang ditampilkan kepada pengguna ke route yang berada di bawahnya pada stack yang dikelola Navigator.
Method pushReplacement() menghapus route yang sedang ditampilkan kepada pengguna dan menggantinya dengan suatu route. Method ini menyebabkan aplikasi untuk berpindah dari route yang sedang ditampilkan kepada pengguna ke suatu route yang diberikan. Pada stack route yang dikelola Navigator, route lama pada atas stack akan digantikan secara langsung oleh route baru yang diberikan tanpa mengubah kondisi elemen stack yang berada di bawahnya.
Walaupun push() dan pushReplacement() sekilas terlihat mirip, namun perbedaan kedua method tersebut terletak pada apa yang dilakukan kepada route yang berada pada atas stack. push() akan menambahkan route baru diatas route yang sudah ada pada atas stack, sedangkan pushReplacement() menggantikan route yang sudah ada pada atas stack dengan route baru tersebut. Penting juga untuk memperhatikan kemungkinan urutan dan isi dari stack, karena jika kondisi stack kosong serta kita menekan tombol Back pada gawai, maka sistem akan keluar dari aplikasi tersebut.
Di samping ketiga method Navigator di atas, terdapat juga beberapa method lain yang dapat memudahkan routing dalam pengembangan aplikasi, seperti popUntil(), canPop(), dan maybePop(). Silakan mengeksplorasi method-method tersebut secara mandiri. Untuk mengetahui lebih dalam terkait Navigator, kalian dapat membaca dokumentasi yang ada pada tautan berikut: https://api.flutter.dev/flutter/widgets/Navigator-class.html
"},{"location":"tutorial/tutorial-7/#input-dan-form-pada-flutter","title":"Input dan Form Pada Flutter","text":"
Sama halnya dengan sebuah web, sebuah aplikasi juga dapat berinteraksi dengan pengguna melalui input dan form. Flutter memiliki widget Form yang dapat kita manfaatkan untuk menjadi wadah bagi beberapa input field widget yang kita buat. Sama halnya dengan input field pada web, Flutter juga memiliki banyak tipe input field, salah satunya widget TextField.
Untuk mencoba sampel dari widget Form, jalankan perintah berikut:
Untuk mengetahui lebih lanjut terkait widget Form, kalian dapat membaca dokumentasi pada tautan berikut: Flutter Form Class
"},{"location":"tutorial/tutorial-7/#tutorial-menambahkan-drawer-menu-untuk-navigasi","title":"Tutorial: Menambahkan Drawer Menu Untuk Navigasi","text":"
Untuk mempermudah navigasi di aplikasi Flutter kita, kita dapat menambahkan drawer menu. Drawer menu adalah sebuah menu yang muncul dari sisi kiri atau kanan layar. Drawer menu biasanya berisi navigasi ke halaman-halaman lain pada aplikasi.
Buka proyek yang sebelumnya telah dibuat pada tutorial 6 dengan menggunakan IDE favoritmu.
Buatlah direktori baru bernama widgets di subdirektori lib/. Kemudian, buat berkas dengan nama left_drawer.dart. Tambahkan kode berikut ke dalam berkas tersebut.
Berikutnya, tambahkan impor untuk halaman-halaman yang kita ingin masukkan navigasinya ke dalam Drawer Menu. Pada contoh ini, kita akan menambahkan navigasi ke halaman MyHomePage dan TrackerFormPage.
import 'package:flutter/material.dart';\nimport 'package:book_tracker/menu.dart';\n// TODO: Impor halaman TrackerFormPage jika sudah dibuat\n
Setelah berhasil impor, kita akan memasukkan routing untuk halaman-halaman yang kita impor ke bagian TODO: Bagian routing. Hapus komentar tersebut dan isi dengan potongan kode berikut.
...\nListTile(\n leading: const Icon(Icons.home_outlined),\n title: const Text('Halaman Utama'),\n // Bagian redirection ke MyHomePage\n onTap: () {\n Navigator.pushReplacement(\n context,\n MaterialPageRoute(\n builder: (context) => MyHomePage(),\n ));\n },\n),\nListTile(\n leading: const Icon(Icons.library_add_rounded),\n title: const Text('Tambah Buku'),\n // Bagian redirection ke TrackerFormPage\n onTap: () {\n /*\n TODO: Buatlah routing ke TrackerFormPage di sini,\n setelah halaman TrackerFormPage sudah dibuat.\n */\n },\n),\n...\n
Apabila kalian copy-paste secara langsung, pastikan ellipsis (tanda \"...\") di atas dan di bawah kode tidak ikut ter-copy.
Selanjutnya, kita akan menghias drawer kita dengan memasukkan drawer header di TODO: Bagian drawer header. Hapus komentar tersebut dan ganti dengan potongan kode berikut.
...\nconst DrawerHeader(\n decoration: BoxDecoration(\n color: Colors.indigo,\n ),\n child: Column(\n children: [\n Text(\n 'Book Tracker',\n textAlign: TextAlign.center,\n style: TextStyle(\n fontSize: 30,\n fontWeight: FontWeight.bold,\n color: Colors.white,\n ),\n ),\n Padding(padding: EdgeInsets.all(10)),\n Text(\"Catat seluruh progress membaca bukumu disini!\",\n // TODO: Tambahkan gaya teks dengan center alignment, font ukuran 15, warna putih, dan weight biasa\n ),\n ],\n ),\n),\n...\n
Selamat, kamu telah berhasil membuat drawer menu! Sekarang, masukkan drawer tersebut ke halaman yang ingin kamu tambahkan drawer. Untuk poin ini, kami akan berikan contoh untuk memasukkan ke halaman menu.dart.
Selamat, drawer dan navigasi sudah dibuat secara sempurna. Silakan jalankan program untuk melihat hasilnya. Jangan lupa kerjakan TODO yang masih ada sebelum mengumpulkan tutorial (tutorial yang dikumpulkan sudah tidak memiliki TODO). Jangan lupa juga tambahkan drawer ke halaman TrackerFormPage jika halaman tersebut sudah dibuat.
"},{"location":"tutorial/tutorial-7/#tutorial-menambahkan-form-dan-elemen-input","title":"Tutorial: Menambahkan Form dan Elemen Input","text":"
Sekarang, kita akan membuat sebuah form sederhana untuk memasukkan data barang pada aplikasi sehingga nantinya kamu dapat menambahkan data baru untuk ditampilkan.
Buat berkas baru pada direktori lib dengan nama trackerlist_form.dart. Tambahkan kode berikut ke dalam berkas trackerlist_form.dart.
Ubah widget Placeholder dengan potongan kode berikut.
Scaffold(\n appBar: AppBar(\n title: const Center(\n child: Text(\n 'Form Tambah Buku',\n ),\n ),\n backgroundColor: Colors.indigo,\n foregroundColor: Colors.white,\n ),\n // TODO: Tambahkan drawer yang sudah dibuat di sini\n body: Form(\n child: SingleChildScrollView(),\n ),\n );\n
Penjelasan Kode:
Widget Form berfungsi sebagai wadah bagi beberapa input field widget yang nanti akan kita buat.
Widget SingleChildScrollView berfungsi untuk membuat child widget di dalamnya menjadi scrollable.
Buat variabel baru bernama _formKey dengan nilai GlobalKey<FormState>(); lalu tambahkan _formKey tersebut ke dalam atribut key milik widget Form. Atribut key akan berfungsi sebagai handler dari form state, validasi form, dan penyimpanan form.
...\nclass _TrackerFormPageState extends State<TrackerFormPage> {\n final _formKey = GlobalKey<FormState>();\n...\n
Selanjutnya, kita akan mulai mengisi widget Form dengan field. Buatlah beberapa variabel untuk menyimpan input dari masing-masing field yang akan dibuat.
Buatlah widget TextFormField yang di-wrap oleh Padding sebagai salah satu children dari widget Column. Setelah itu, tambahkan atribut crossAxisAlignment untuk mengatur alignment children dari Column.
onChanged akan dijalankan setiap ada perubahan isi TextFormField.
validator akan melakukan validasi isi TextFormField dan mengembalikan String jika terdapat error.
Terdapat implementasi null-safety pada bagian String? dan value!. Operator ? berfungsi untuk menandakan bahwa variabel tersebut boleh berisi String atau null. Sedangkan operator ! berfungsi untuk menandakan bahwa variabel tersebut dijamin akan tidak akan berisi null.
Untuk mempelajari lebih dalam mengenai null-safety, kalian dapat membaca dokumentasi yang ada pada tautan berikut: Dart Null Safety
Buatlah dua TextFormField yang di-wrap dengan Padding sebagai child selanjutnya dari Column seperti sebelumnya untuk field page dan description.
...\nPadding(\n padding: const EdgeInsets.all(8.0),\n child: TextFormField(\n decoration: InputDecoration(\n hintText: \"Halaman\",\n labelText: \"Halaman\",\n border: OutlineInputBorder(\n borderRadius: BorderRadius.circular(5.0),\n ),\n ),\n onChanged: (String? value) {\n setState(() {\n // TODO: Tambahkan variabel yang sesuai\n ... = int.tryParse(value!) ?? 0;\n });\n },\n validator: (String? value) {\n if (value == null || value.isEmpty) {\n return \"Halaman tidak boleh kosong!\";\n }\n if (int.tryParse(value) == null) {\n return \"Halaman harus berupa angka!\";\n }\n return null;\n },\n ),\n),\nPadding(\n padding: const EdgeInsets.all(8.0),\n child: TextFormField(\n decoration: InputDecoration(\n hintText: \"Deskripsi\",\n labelText: \"Deskripsi\",\n border: OutlineInputBorder(\n borderRadius: BorderRadius.circular(5.0),\n ),\n ),\n onChanged: (String? value) {\n setState(() {\n // TODO: Tambahkan variabel yang sesuai\n ... = value!;\n });\n },\n validator: (String? value) {\n if (value == null || value.isEmpty) {\n return \"Deskripsi tidak boleh kosong!\";\n }\n return null;\n },\n ),\n),\n...\n
Buatlah tombol sebagai child selanjutnya dari Column. Bungkus tombol ke dalam widget Padding dan Align. Kali ini kita belum menyimpan data ke dalam database, namun kita akan memunculkannya pada pop-up yang akan muncul setelah tombol ditekan.
Tambahkan fungsi showDialog() pada bagian onPressed() dari potongan kode yang sebelumnya kamu tambahkan. Munculkan widget AlertDialog pada fungsi tersebut. Kemudian, tambahkan juga fungsi untuk reset form. Kode kalian akan terlihat seperti ini.
Silakan coba jalankan program kalian dan gunakan form yang telah dibuat, kemudian lihat hasilnya. Jangan lupa untuk terlebih dahulu menambahkan routing pada drawer untuk bisa mengakses form yang telah kalian buat.
"},{"location":"tutorial/tutorial-7/#tutorial-menambahkan-fitur-navigasi-pada-tombol","title":"Tutorial: Menambahkan Fitur Navigasi pada Tombol","text":"
Sampai sini, kita sudah berhasil membuat suatu drawer yang dapat menjalankan fitur navigasi ke halaman lain pada aplikasi, serta suatu halaman form. Pada tutorial sebelumnya, kita juga sudah berhasil membuat tiga button widget yang dapat melakukan action tertentu saat ia ditekan. Sekarang, kita akan menambahkan fitur navigasi pada tombol tersebut sehingga saat ditekan, pengguna akan ditampilkan halaman lain.
Pada widget TrackerItem pada berkas menu.dart yang sudah dibuat pada tutorial sebelumnya, akan dibuat agar kode yang terletak pada atribut onTap dari InkWell dapat melakukan navigasi ke route lain (tambahkan kode tambahan di bawah kode ScaffoldMessenger yang menampilkan snackbar).
...\n// Area responsif terhadap sentuhan\nonTap: () {\n // Memunculkan SnackBar ketika diklik\n ScaffoldMessenger.of(context)\n ..hideCurrentSnackBar()\n ..showSnackBar(SnackBar(\n content: Text(\"Kamu telah menekan tombol ${item.name}!\")));\n\n // Navigate ke route yang sesuai (tergantung jenis tombol)\n if (item.name == \"Tambah Buku\") {\n // TODO: Gunakan Navigator.push untuk melakukan navigasi ke MaterialPageRoute yang mencakup TrackerFormPage.\n }\n},\n...\n
Perhatikan bahwa pada tombol ini, kita menggunakan Navigator.push() sehingga pengguna dapat menekan tombol Back untuk kembali ke halaman menu. Selain itu, jika kita menggunakan Navigator.pop(), maka kita dapat membuat kode dalam program untuk kembali ke halaman menu.
Coba jalankan program kamu, gunakan tombol yang telah dibuat fungsionalitasnya, dan lihatlah apa yang terjadi. Bandingkan dengan apa yang terjadi jika kita melakukan navigasi melalui drawer (tentu saja setelah menyelesaikan seluruh TODO pada drawer).
Setelah membuat halaman trackerlist_form.dart, halaman kita sudah semakin banyak. Dengan demikian, mari kita pindahkan halaman-halaman yang sudah dibuat sebelumnya ke dalam satu folder screens untuk mempermudah kita ke depannya.
Sebelum mulai, pastikan kamu sudah memiliki ekstensi Flutter terinstal di IDE atau text editor yang kamu gunakan.
Buatlah berkas baru dengan nama tracker_card.dart pada direktori widgets.
Pindahkan isi widget TrackerItem dan TrackerCard pada menu.dart ke berkas widgets/tracker_card.dart.
Pastikan untuk mengimpor halaman trackerlist_form.dart pada berkas tracker_card.dart dan import halaman tracker_card.dart pada berkas menu.dart.
Buatlah folder baru bernama screens pada direktori lib.
Pindahkan file menu.dart dan trackerlist_form.dart ke dalam folder screens. Pastikan pemindahan file dilakukan melalui IDE atau text editor yang memiliki ekstensi atau plugin Flutter, bukan melalui file manager biasa (seperti File Explorer atau Finder). Hal ini dilakukan agar IDE atau text editor yang kamu gunakan dapat melakukan refactoring secara otomatis.
Setelah refactoring file dilakukan, seharusnya struktur dari direktori lib adalah seperti berikut.
Selamat! Kamu telah menyelesaikan Tutorial 7! Semoga dengan tutorial ini, kalian dapat memahami mengenai navigation, forms, input, dan layouts dengan baik. \ud83d\ude04
Pelajari dan pahami kembali kode yang sudah kamu tuliskan di atas dengan baik. Jangan lupa untuk menyelesaikan semua TODO yang ada!
Lakukan add, commit dan push untuk memperbarui repositori GitHub.
Tutorial ini dikembangkan berdasarkan PBP Ganjil 2024 yang ditulis oleh Tim Pengajar Pemrograman Berbasis Platform 2024. Segala tutorial serta instruksi yang dicantumkan pada repositori ini dirancang sedemikian rupa sehingga mahasiswa yang sedang mengambil mata kuliah Pemrograman Berbasis Platform dapat menyelesaikan tutorial saat sesi lab berlangsung.
"},{"location":"tutorial/tutorial-8/","title":"Tutorial 8: Flutter Networking, Authentication, and Integration","text":"
Pemrograman Berbasis Platform (CSGE602022) \u2014 diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Genap 2023/2024
Setelah menyelesaikan tutorial ini, mahasiswa diharapkan untuk dapat:
Memahami struktur dan pembuatan model pada Flutter.
Memahami cara mengambil, mengolah, dan menampilkan data dari web service.
Memahami state management dasar menggunakan Provider pada Flutter.
Dapat melakukan autentikasi dengan web service Django dengan aplikasi Flutter.
"},{"location":"tutorial/tutorial-8/#model-pada-flutter","title":"Model pada Flutter","text":"
Pada tutorial kali ini, kita akan memanggil web service dan menampilkan hasil yang didapatkan ke halaman Flutter yang kita buat. Akan tetapi, sebelum melakukan pemanggilan web service, kita perlu mendefinisikan model yang akan kita gunakan ketika melakukan pemanggilan web service. Model pada Flutter menggunakan prinsip class seperti layaknya yang sudah dipelajari pada DDP2 bagian OOP.
Kode di bawah ini adalah contoh, tidak wajib diikuti, tetapi sangat disarankan dibaca karena konsepnya akan digunakan pada bagian-bagian selanjutnya.
Berikut merupakan contoh class pada Flutter.
class Mobil {\n Mobil({\n this.id,\n this.brand,\n this.model\n this.color\n });\n\n int id;\n String brand;\n String model;\n String color;\n}\n
Catatan: Jika kamu mengalami error saat membuat class, tambahkan keyword required pada setiap parameter class pada bagian constructor.
Sampai saat ini, kita telah berhasil membuat class. Selanjutnya, kita akan menambahkan beberapa kode sehingga terbentuk sebuah model Mobil. Mobil ini merupakan suatu model yang merepresentasikan respons dari pemanggilan web service.
Terdapat beberapa kode-kode tambahan seperti method toJson dan fromJson di dalam class Mobil. Hal tersebut disebabkan ketika kita me-request suatu web service dengan method GET, umumnya kita mendapatkan hasil pemanggilan berupa JSON. Oleh karena itu, kita perlu melakukan konversi data dengan method fromJson agar Flutter mengenali JSON tersebut sebagai objek class Mobil. Selain itu, terdapat juga method toJson yang akan digunakan ketika kita melakukan pengiriman data ke web service (seperti POST atau PUT).
Berikut adalah contoh respons dari web service dengan method GET yang dapat dikonversi ke class model Mobil.
Lalu, bagaimana jika respons dari web service berupa kumpulan objek JSON? Sebenarnya sama saja dengan kode di atas, hanya saja terdapat pengubahan pada method mobilFromJson dan mobilToJson.
"},{"location":"tutorial/tutorial-8/#fetch-data-dari-web-service-pada-flutter","title":"Fetch Data dari Web Service pada Flutter","text":"
Pada saat pengembangan aplikasi, ada kalanya kita perlu mengambil data eksternal dari luar aplikasi kita (Internet) untuk ditampilkan di aplikasi kita. Tutorial ini bertujuan untuk memahami cara melakukan fetching data dari sebuah web service pada Flutter.
Secara umum terdapat beberapa langkah ketika ingin menampilkan data dari web service lain ke aplikasi Flutter, yaitu:
Menambahkan dependensi http ke proyek; dependensi ini digunakan untuk bertukar HTTP request.
Membuat model sesuai dengan respons dari data yang berasal dari web service tersebut.
Membuat http request ke web service menggunakan dependensi http.
Mengkonversikan objek yang didapatkan dari web service ke model yang telah kita buat di langkah kedua.
Menampilkan data yang telah dikonversi ke aplikasi dengan FutureBuilder.
Penjelasan lebih lanjut dapat dibaca pada tautan berikut: http://docs.flutter.dev/cookbook/networking/fetch-data#5-display-the-data.
"},{"location":"tutorial/tutorial-8/#state-management-dasar-menggunakan-provider","title":"State Management Dasar menggunakan Provider","text":"
Provider adalah sebuah pembungkus di sekitar InheritedWidget agar InheritedWidget lebih mudah digunakan dan lebih dapat digunakan kembali. InheritedWidget sendiri adalah kelas dasar untuk widget Flutter yang secara efisien menyebarkan informasi ke widget lainnya yang berada pada satu tree.
Manfaat menggunakan provider adalah sebagai berikut.
Mengalokasikan resource menjadi lebih sederhana.
Lazy-loading.
Mengurangi boilerplate tiap kali membuat class baru.
Didukung oleh Flutter Devtool sehingga provider dapat dilacak dari Devtool.
Peningkatan skalabilitas untuk class yang memanfaatkan mekanisme listen yang dibangun secara kompleks.
Untuk mengetahui provider secara lebih lanjut, silakan buka halaman package Provider: http://pub.dev/packages/provider
"},{"location":"tutorial/tutorial-8/#tutorial-integrasi-autentikasi-django-flutter","title":"Tutorial: Integrasi Autentikasi Django-Flutter","text":""},{"location":"tutorial/tutorial-8/#setup-autentikasi-pada-django-untuk-flutter","title":"Setup Autentikasi pada Django untuk Flutter","text":"
Ikuti langkah-langkah berikut untuk melakukan integrasi sistem autentikasi pada Django.
Buatlah django-app bernama authentication pada project Django yang telah kamu buat sebelumnya.
Tambahkan authentication ke INSTALLED_APPS pada main project settings.py aplikasi Django kamu.
Hint: Apabila lupa cara untuk langkah 1 dan 2, coba baca lagi Tutorial 1.
Jalankan perintah pip install django-cors-headers untuk menginstal library yang dibutuhkan. Jangan lupa untuk menyalakan virtual environment Python terlebih dahulu.
Tambahkan corsheaders ke INSTALLED_APPS pada main project settings.py aplikasi Django kamu.
Tambahkan corsheaders.middleware.CorsMiddleware pada main project settings.py aplikasi Django kamu.
Tambahkan beberapa variabel berikut ini pada main project settings.py aplikasi Django kamu.
Buatlah sebuah metode view untuk login pada authentication/views.py.
from django.contrib.auth import authenticate, login as auth_login\nfrom django.http import JsonResponse\nfrom django.views.decorators.csrf import csrf_exempt\n\n@csrf_exempt\ndef login(request):\n username = request.POST['username']\n password = request.POST['password']\n user = authenticate(username=username, password=password)\n if user is not None:\n if user.is_active:\n auth_login(request, user)\n # Status login sukses.\n return JsonResponse({\n \"username\": user.username,\n \"status\": True,\n \"message\": \"Login sukses!\"\n # Tambahkan data lainnya jika ingin mengirim data ke Flutter.\n }, status=200)\n else:\n return JsonResponse({\n \"status\": False,\n \"message\": \"Login gagal, akun dinonaktifkan.\"\n }, status=401)\n\n else:\n return JsonResponse({\n \"status\": False,\n \"message\": \"Login gagal, periksa kembali email atau kata sandi.\"\n }, status=401)\n
Buat file urls.py pada folder authentication dan tambahkan URL routing terhadap fungsi yang sudah dibuat dengan endpoint login/.
Terakhir, tambahkan path('auth/', include('authentication.urls')), pada file book_tracker/urls.py.
"},{"location":"tutorial/tutorial-8/#integrasi-sistem-autentikasi-pada-flutter","title":"Integrasi Sistem Autentikasi pada Flutter","text":"
Untuk memudahkan pembuatan sistem autentikasi, tim asisten dosen telah membuatkan package Flutter yang dapat dipakai untuk melakukan kontak dengan web service Django (termasuk operasi GET dan POST).
Package dapat diakses melalui tautan berikut: pbp_django_auth
Ikuti langkah-langkah berikut untuk melakukan integrasi sistem autentikasi pada Flutter.
Instal package yang telah disediakan oleh tim asisten dosen dengan menjalankan perintah berikut di Terminal. Jalankan pada direktori root dari proyek Flutter kamu.
Untuk menggunakan package tersebut, kamu perlu memodifikasi root widget untuk menyediakan CookieRequest library ke semua child widgets dengan menggunakan Provider.
Sebagai contoh, jika aplikasimu sebelumnya seperti ini:
Pada file main.dart, pada Widget MaterialApp(...), ubah home: MyHomePage() menjadi home: LoginPage()
Jalankan aplikasi Flutter kamu dan cobalah untuk login.
"},{"location":"tutorial/tutorial-8/#pembuatan-model-kustom","title":"Pembuatan Model Kustom","text":"
Dalam membuat model yang menyesuaikan dengan data JSON, kita dapat memanfaatkan website Quicktype dengan tahapan sebagai berikut.
Bukalah endpoint JSON yang sudah kamu buat sebelumnya pada tutorial 2.
Salinlah data JSON dan buka situs web Quicktype.
Pada situs web Quicktype, ubahlah setup name menjadi Book, source type menjadi JSON, dan language menjadi Dart.
Tempel data JSON yang telah disalin sebelumnya ke dalam textbox yang tersedia pada Quicktype.
Klik pilihan Copy Code pada Quicktype.
Berikut adalah contoh hasilnya.
Setelah mendapatkan kode model melalui Quicktype, buka kembali proyek Flutter dan buatlah folder baru models/ pada subdirektori lib/. Buatlah file baru pada folder tersebut dengan nama book.dart, dan tempel kode yang sudah disalin dari Quicktype.
"},{"location":"tutorial/tutorial-8/#penerapan-fetch-data-dari-django-untuk-ditampilkan-ke-flutter","title":"Penerapan Fetch Data dari Django Untuk Ditampilkan ke Flutter","text":""},{"location":"tutorial/tutorial-8/#menambahkan-dependensi-http","title":"Menambahkan Dependensi HTTP","text":"
Untuk melakukan perintah HTTP request, kita membutuhkan package tambahan yakni package http.
Lakukan flutter pub add http pada terminal proyek Flutter untuk menambahkan package http.
Pada file android/app/src/main/AndroidManifest.xml, tambahkan kode berikut untuk memperbolehkan akses Internet pada aplikasi Flutter yang sedang dibuat.
...\n <application>\n ...\n </application>\n <!-- Required to fetch data from the Internet. -->\n <uses-permission android:name=\"android.permission.INTERNET\" />\n...\n
"},{"location":"tutorial/tutorial-8/#melakukan-fetch-data-dari-django","title":"Melakukan Fetch Data dari Django","text":"
Buatlah berkas baru pada direktori lib/screens dengan nama list_book.dart.
Pada file list_book.dart, impor library yang dibutuhkan. Ubahlah sesuai dengan nama proyek Flutter yang kalian buat.
import 'package:flutter/material.dart';\nimport 'package:http/http.dart' as http;\nimport 'dart:convert';\nimport 'package:<APP_NAME>/models/book.dart';\n...\n
Salinlah potongan kode berikut dan paste pada list_book.dart. Jangan lupa untuk mengimpor file atau modul yang diperlukan.
Tambahkan halaman list_book.dart ke widgets/left_drawer.dart dengan menambahkan kode berikut.
// Kode ListTile Menu\n...\nListTile(\n leading: const Icon(Icons.library_books_rounded),\n title: const Text('Daftar Buku'),\n onTap: () {\n // Route menu ke halaman buku\n Navigator.push(\n context,\n MaterialPageRoute(builder: (context) => const BookPage()),\n );\n },\n),\n...\n
Ubah fungsi tombol Lihat Buku pada halaman utama agar mengarahkan ke halaman BookPage. Kamu dapat melakukan redirection dengan menambahkan else if setelah kode if(...){...} di bagian akhir onTap: () { } yang ada pada file widgets/tracker_card.dart
Impor file yang dibutuhkan saat menambahkan BookPage ke left_drawer.dart dan tracker_card.dart.
Jalankan aplikasi dan cobalah untuk menambahkan beberapa Book di situs web kamu. Kemudian, coba lihat hasilnya melalui halaman Daftar Buku yang baru saja kamu buat di aplikasi Flutter
"},{"location":"tutorial/tutorial-8/#integrasi-form-flutter-dengan-layanan-django","title":"Integrasi Form Flutter Dengan Layanan Django","text":"
Langkah-langkah berikut akan dilakukan pada kode proyek Django.
Buatlah sebuah fungsi view baru pada main/views.py aplikasi Django kamu dengan potongan kode berikut. Jangan lupa juga untuk menambahkan import-import yang diperlukan pada bagian atas kode.
from django.views.decorators.csrf import csrf_exempt\nimport json\nfrom django.http import JsonResponse\n...\n@csrf_exempt\ndef create_book_flutter(request):\n if request.method == 'POST':\n\n data = json.loads(request.body)\n\n new_book = Book.objects.create(\n user = request.user,\n name = data[\"name\"],\n page = int(data[\"page\"]),\n description = data[\"description\"]\n )\n\n new_book.save()\n\n return JsonResponse({\"status\": \"success\"}, status=200)\n else:\n return JsonResponse({\"status\": \"error\"}, status=401)\n
Tambahkan path baru pada main/urls.py dengan kode berikut.
Jalankan ulang (dan deploy ulang) aplikasi kamu. Apabila kamu telah men-deploy aplikasimu, maka data akun dan transaksi akan hilang setelah di-redeploy.
Langkah-langkah berikut akan dilakukan pada kode proyek Flutter.
Hubungkan halaman trackerlist_form.dart dengan CookieRequest dengan menambahkan baris kode berikut.
Tambahkan path baru pada authentication/urls.py dengan kode berikut.
from authentication.views import logout\n...\npath('logout/', logout, name='logout'),\n
Langkah-langkah berikut akan dilakukan pada kode proyek Flutter.
Buka file lib/widgets/tracker_card.dart dan tambahkan potongan kode berikut. Selesaikan masalah impor library setelah menambahkan potongan kode ke dalam file tersebut.
Ubahlah perintah onTap: () {...} pada widget Inkwell menjadi onTap: () async {...} agar widget Inkwell dapat melakukan proses logout secara asinkronus.
Tambahkan kode berikut ke dalam async {...} di bagian akhir:
...\n// statement if sebelumnya\n// tambahkan else if baru seperti di bawah ini\nelse if (item.name == \"Logout\") {\n final response = await request.logout(\n // TODO: Ganti URL dan jangan lupa tambahkan trailing slash (/) di akhir URL!\n \"http://<APP_URL_KAMU>/auth/logout/\");\n String message = response[\"message\"];\n if (context.mounted) {\n if (response['status']) {\n String uname = response[\"username\"];\n ScaffoldMessenger.of(context).showSnackBar(SnackBar(\n content: Text(\"$message Sampai jumpa, $uname.\"),\n ));\n Navigator.pushReplacement(\n context,\n MaterialPageRoute(builder: (context) => const LoginPage()),\n );\n } else {\n ScaffoldMessenger.of(context).showSnackBar(\n SnackBar(\n content: Text(message),\n ),\n );\n }\n }\n}\n...\n
Jalankan ulang aplikasi dan coba untuk lakukan logout.
Selamat! Kamu telah menyelesaikan Tutorial 8! Semoga dengan tutorial ini, kalian dapat memahami mengenai model, fetch data, state management dasar, dan integrasi Django-Flutter dengan baik. \ud83d\ude04
Pelajari dan pahami kembali kode yang sudah kamu tuliskan di atas dengan baik. Jangan lupa untuk menyelesaikan semua TODO yang ada!
Lakukan add, commit dan push untuk memperbarui repositori GitHub.
Tutorial ini dikembangkan berdasarkan PBP Ganjil 2024 yang ditulis oleh Tim Pengajar Pemrograman Berbasis Platform 2023. Segala tutorial serta instruksi yang dicantumkan pada repositori ini dirancang sedemikian rupa sehingga mahasiswa yang sedang mengambil mata kuliah Pemrograman Berbasis Platform dapat menyelesaikan tutorial saat sesi lab berlangsung.
"},{"location":"tutorial/tutorial-9/","title":"Tutorial 9: Flutter Deployment dengan GitHub Actions dan Microsoft App Center","text":"
Pemrograman Berbasis Platform (CSGE602022) \u2014 diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Genap 2023/2024
CI/CD, singkatan dari Continuous Integration dan Continuous Deployment, merupakan konsep penting dalam pengembangan perangkat lunak yang terkait dengan GitHub Actions. Konsep ini memberikan cara untuk mengotomatisasi dan meningkatkan kualitas serta kecepatan dalam pengembangan perangkat lunak.
Continuous Integration (CI) berfokus pada penggabungan (integrasi) perubahan kode secara terus-menerus ke dalam repositori bersama oleh anggota tim. Saat seorang pengembang melakukan perubahan pada kode dan mengirimkannya ke repositori (seperti yang kita lakukan dengan GitHub), sistem CI akan secara otomatis menjalankan serangkaian tes dan verifikasi untuk memastikan bahwa perubahan tersebut tidak merusak atau mengganggu fungsionalitas yang sudah ada. Dengan kata lain, CI membantu mengidentifikasi masalah lebih awal dalam siklus pengembangan.
Continuous Deployment (CD), pada gilirannya, melibatkan otomatisasi untuk merilis (deployment) perubahan kode yang telah melewati proses CI ke lingkungan produksi atau pengujian. Ketika perubahan kode dinyatakan aman setelah melalui serangkaian pengujian CI, CD memungkinkan untuk menyebarkan perubahan tersebut secara otomatis ke server atau lingkungan lainnya tanpa perlu campur tangan manual. Ini membantu mempercepat proses pengembangan dan meningkatkan kecepatan dalam merespons perubahan kebutuhan bisnis.
Ketika kita menggunakan GitHub Actions dalam CI/CD, setiap kali ada perubahan pada repositori, GitHub Actions dapat memicu alur kerja CI untuk menjalankan pengujian dan verifikasi. Jika semuanya berhasil, alur kerja CD dapat diaktifkan untuk merilis perubahan tersebut ke environment produksi atau pengujian.
Dengan menggunakan CI/CD, tim pengembang dapat memastikan bahwa perubahan-perubahan yang dilakukan tidak merusak kualitas atau kinerja aplikasi. Ini juga mempercepat waktu rilis produk dan meningkatkan efisiensi dalam pengelolaan siklus hidup perangkat lunak secara keseluruhan.
GitHub Actions adalah fitur yang disediakan oleh GitHub untuk memungkinkan otomatisasi dalam siklus pengembangan perangkat lunak. Dengan kata lain, GitHub Actions memungkinkan kita untuk membuat dan menyesuaikan alur kerja otomatis (workflows) untuk menjalankan tugas-tugas tertentu setiap kali ada perubahan pada repositori GitHub.
Workflows ini bisa diatur untuk menjalankan berbagai tindakan atau skrip otomatis, seperti melakukan pengujian (testing), membangun (building) aplikasi, atau merilis (releasing) versi baru. Tujuannya adalah untuk membantu tim pengembang mengotomatiskan proses-proses ini, sehingga mereka dapat fokus pada penulisan kode dan pengembangan fitur tanpa harus terlalu khawatir dengan langkah-langkah administratif.
Misalnya, ketika ada perubahan kode di repositori GitHub, GitHub Actions dapat secara otomatis menjalankan alur kerja yang telah Anda tentukan. Alur kerja tersebut dapat mencakup langkah-langkah seperti menguji apakah perubahan tersebut tidak merusak fungsionalitas yang ada, membangun aplikasi yang baru, dan bahkan merilis versi baru jika diperlukan.
Penting untuk dicatat bahwa GitHub Actions memanfaatkan file konfigurasi khusus (biasanya dengan nama .github/workflows/nama-file.yml) pada repositori. File ini berisi deskripsi langkah-langkah yang harus dijalankan oleh GitHub Actions.
Dengan GitHub Actions, kolaborasi dalam pengembangan perangkat lunak dapat menjadi lebih efisien karena banyak tugas dapat diotomatisasi. Hal ini memberikan fleksibilitas tambahan kepada pengembang dan tim untuk menyesuaikan alur kerja mereka sesuai kebutuhan proyek.
Berikut adalah contoh workflow sederhana yang dapat kita gunakan untuk membangun dan menguji kode aplikasi berbasis JavaScript dan menggunakan Yarn package manager.
"},{"location":"tutorial/tutorial-9/#pengenalan-microsoft-app-center","title":"Pengenalan Microsoft App Center","text":"
Microsoft App Center merupakan layanan cloud yang menyediakan berbagai macam fitur untuk memudahkan proses build, test, release, dan monitoring aplikasi. Layanan ini dapat digunakan untuk berbagai macam platform, seperti Android, iOS, Windows, macOS, dan lain-lain. Pada tutorial ini, kita akan menggunakan layanan ini untuk melakukan build dan release aplikasi Flutter secara otomatis.
Microsoft App Center menyediakan banyak sekali fitur keren secara gratis seperti continuous integration, UI testing, continuous delivery, laporan crash dan error dari aplikasi yang ditampilkan secara detail bagaimana log errornya, dan fitur Analytics. Kali ini, kita tidak akan memakai seluruh fitur yang tersedia karena Flutter belum didukung secara resmi oleh App Center. Saat ini, bahasa dan framework yang baru didukung resmi adalah Kotlin, Java, React Native, Xamarin, dan Unity. Pada tutorial kali ini, kita akan fokus ke pembuatan dan perilisan aplikasi pada App Center saja.Untuk lebih jelasnya, kamu dapat membaca dokumentasi App Center secara lebih lanjut.
"},{"location":"tutorial/tutorial-9/#tutorial-pengaturan-dasar-pada-app-center","title":"Tutorial: Pengaturan Dasar pada App Center","text":"
Pada tutorial ini, kamu akan men-deploy aplikasi Flutter yang telah kalian buat pada tutorial-tutorial sebelumnya ke App Center. Berikut ini merupakan tahap awal dalam proses deployment aplikasi.
Buatlah akun App Center menggunakan akun GitHub kamu (tombol paling atas).
Setelah berhasil membuat akun dan sign in, buatlah organisasi baru dengan mengakses menu Add new -> Add new organization. Isi nama organisasi yang kamu inginkan.
Buatlah slot aplikasi baru dengan menekan tombol Add app.
Isi nama aplikasi dengan Book Tracker. Kamu tidak perlu untuk memilih tipe rilis. Pilih Android sebagai OS dan Java / Kotlin sebagai platform. Kemudian, klik \"Add new app\".
Buka menu Distribute dan buka menu Groups.
Buatlah grup baru dengan menekan tombol \"Add Group\". Berikan nama Public dan berikan akses publik dengan mengubah toggle pada Allow public access. Tekan tombol Create Group untuk membuat grup baru. Hal ini kita lakukan agar APK yang nantinya dibuat oleh App Center dapat diakses secara publik.
Jika kamu menggunakan organisasi untuk mengorganisasi kode proyekmu, maka ikuti langkah tambahan berikut. Langkah-langkah ini berfungsi untuk memberikan akses repositori kepada App Center pada GitHub.
Buka situs Authorized OAuth Apps dengan akun yang terdaftar pada organisasi yang memiliki kode proyek.
Klik App Center.
Cari nama organisasi yang memiliki kode proyekmu, lalu klik tombol Grant untuk memberikan akses organisasi kepada App Center.
Sampai sini, kamu telah melakukan pengaturan dasar pada App Center. Selanjutnya, kamu akan melakukan pengaturan skrip dan pengesahan (sign) pada proyek aplikasi Flutter.
"},{"location":"tutorial/tutorial-9/#tutorial-pengaturan-dasar-pengesahan-aplikasi-flutter","title":"Tutorial: Pengaturan Dasar Pengesahan Aplikasi Flutter","text":"
Untuk publikasi aplikasi pada App Center, aplikasi Flutter harus ditandatangani atau disahkan menggunakan key agar aplikasi yang dirilis dijamin keabsahannya. Oleh karena itu, kita akan membuat key untuk aplikasi dan mengatur automasi agar skrip CI/CD (baik yang ada pada GitHub Actions maupun App Center) dapat berjalan dengan baik.
Buatlah sebuah keystore.
Untuk pengguna Mac OS atau Linux, jalankan perintah berikut pada Terminal.
Berikan keystore tersebut password yang aman dan simpan atau ingat-ingat password tersebut, jangan sampai lupa. Isilah informasi yang dibutuhkan hingga proses selesai. Kemudian, pindahkan berkas tersebut ke dalam root folder proyek aplikasi.
Perintah yang telah kamu jalankan berguna untuk menyimpan keystore file dengan nama release-keystore.jks di direktori home kamu dengan alias release.
Apabila Terminal atau Command Prompt tidak mengenali perintah keytool, silakan mengikuti panduan tambahan pada bagian Note di laman web resmi flutter bagian Create an upload keystore untuk memasukkan perintah keytool ke dalam environment path.
Tambahkan sintaks berikut pada file .gitignore yang ada pada root folder proyek aplikasi agar keystore tidak dihitung masuk sebagai berkas yang ada pada repositori Git. Hal ini dilakukan karena keystore merupakan berkas yang rahasia dan perlu dijaga selayaknya kata sandi sebuah akun.
# Remember to never publicly share your keystore.\n# See https://flutter.dev/docs/deployment/android#reference-the-keystore-from-the-app\n*.keystore\n*.jks\n
Buka berkas /android/app/build.gradle dan cari bagian buildTypes.
buildTypes {\n release {\n // TODO: Add your own signing config for the release build.\n // Signing with the debug keys for now,\n // so `flutter run --release` works.\n signingConfig signingConfigs.debug\n }\n}\n
Sampai sini, kamu sudah melakukan pengaturan dasar untuk pengesahan aplikasi. Selanjutnya, kamu akan melakukan modifikasi skrip GitHub Actions dan pembuatan skrip baru untuk membangun berkas aplikasi pada App Center.
Hasilkan sebuah base64 string sebagai representasi dari keystore file yang akan kita simpan sebagai environment variable nantinya.
Untuk pengguna Mac OS atau Linux, jalankan perintah openssl base64 -in release-keystore.jks pada Terminal di root folder untuk menghasilkan base64 string. Simpan string yang dihasilkan untuk sementara waktu.
Untuk pengguna Windows, buka root folder proyek pada File Explorer. Kemudian klik kanan, lalu klik Show more options, setelah itu klik Git Bash here. Sebuah terminal Git Bash akan terbuka.
Pada terminal tersebut, jalankan perintah openssl base64 -in release-keystore.jks. Perintah tersebut akan menghasilkan base64 string. Simpan string yang dihasilkan untuk sementara waktu.
Berikut contoh hasil dari menjalankan perintah tersebut.
Buatlah repository secrets pada repositori GitHub dengan spesifikasi sebagai berikut.
i. GH_TOKEN berisi GitHub (Personal Access) Token dari admin repositori untuk kepentingan automated release.
Apabila kamu admin repositori, akses halaman ini untuk membuat sebuah Personal Access Token. Berikan token-mu nama yang unik. Pada bagian Repository access, pilih \"Only select repositories\" dan pilih repositori proyek Fluttermu. Buka bagian \"Repository permissions\", lalu berikan akses Read-only ke setidaknya permissions berikut:
Secrets
Berikan akses Read and write ke setidaknya permissions berikut:
Actions
Workflows
Contents
Salin Personal Access Token yang dihasilkan dan simpan di lokasi lain, karena kamu tidak akan bisa melihat token tersebut lagi melalui GitHub. Setelah itu, isi repository secret GH_TOKEN dengan Personal Access Token yang telah kamu salin.
ii. KEY_JKS berisi base64 string dari keystore file yang telah kamu buat sebelumnya.
iii. KEY_PASSWORD berisi kata sandi yang kamu gunakan saat kamu membuat keystore file.
Pada akhirnya, halaman repository secrets kamu akan terlihat seperti ini.
Jika belum ada, buatlah folder .github/workflows pada root folder aplikasi.
Buatlah tiga berkas baru pada folder .github/workflows dengan spesifikasi berikut:
Diasumsikan branch staging digunakan untuk menampung kode aplikasi sebelum rilis dan branch main digunakan untuk perilisan kode aplikasi.
i. staging.yml; berfungsi untuk mengecek apakah codebase yang ada pada branch staging bebas dari error saat melakukan flutter analyze. Skrip ini hanya di-trigger saat ada commit pada branch staging.
name: Staging\n\n# Controls when the workflow will run\non:\n # Triggers the workflow on push or pull request events but only for the develop branch\n push:\n branches: [staging]\n pull_request:\n branches: [staging]\n\n# A workflow run is made up of one or more jobs that can run sequentially or in parallel\njobs:\n # This workflow contains a single job called \"build\"\n build:\n name: Analyze\n # The type of runner that the job will run on\n runs-on: ubuntu-latest\n steps:\n - name: Checkout the code\n uses: actions/checkout@v4\n\n - name: Setup Java\n uses: actions/setup-java@v3\n with:\n distribution: \"zulu\"\n java-version: \"11\"\n\n - name: Setup Flutter\n uses: subosito/flutter-action@v2\n with:\n channel: \"stable\"\n\n - name: Get packages\n run: flutter pub get\n\n - name: Analyze\n run: flutter analyze\n
ii. pre-release.yml; berfungsi untuk mengecek apakah proses build aplikasi dapat berjalan tanpa error. Jika tidak ada error, file APK dapat diakses sebagai artifact. Skrip ini hanya di-trigger saat ada pull request dari branch staging ke branch main.
name: Pre-Release\n\n# Controls when the workflow will run\non:\n # Triggers the workflow on pull request events but only for the main branch\n pull_request:\n branches: [main]\n\n# A workflow run is made up of one or more jobs that can run sequentially or in parallel\njobs:\n # This workflow contains a single job called \"Build and Pre-Release APK\"\n releases:\n name: Build and Pre-Release APK\n # The type of runner that the job will run on\n runs-on: ubuntu-latest\n steps:\n - name: Checkout the code\n uses: actions/checkout@v4\n\n - name: Setup Java\n uses: actions/setup-java@v3\n with:\n distribution: \"zulu\"\n java-version: \"11\"\n\n - name: Setup Flutter\n uses: subosito/flutter-action@v2\n with:\n channel: \"stable\"\n\n - name: Get packages\n run: flutter pub get\n\n - name: Generate Java keystore\n env:\n KEY_JKS: ${{ secrets.KEY_JKS }}\n run: echo \"$KEY_JKS\" | base64 --decode > release-keystore.jks\n\n - name: Build APK\n env:\n KEY_PASSWORD: ${{ secrets.KEY_PASSWORD }}\n run: flutter build apk --split-per-abi\n\n - name: Pre-release APK by uploading it to Artifacts\n uses: actions/upload-artifact@v3\n with:\n name: APKS\n path: build/app/outputs/flutter-apk/*.apk\n
iii. release.yml; berfungsi untuk melakukan proses build aplikasi dan perilisan aplikasi sebagai Releases pada repositori GitHub. Skrip ini hanya di-trigger saat ada commit pada branch main.
# This is a basic workflow to help you get started with Actions\nname: Release\n\n# Controls when the workflow will run\non:\n # Triggers the workflow on push events but only for the main branch\n push:\n branches: [main]\n\n# A workflow run is made up of one or more jobs that can run sequentially or in parallel\njobs:\n # This workflow contains a single job called \"Build and Release APK\"\n releases:\n name: Build and Release APK\n # The type of runner that the job will run on\n runs-on: ubuntu-latest\n steps:\n - name: Checkout the code\n uses: actions/checkout@v4\n\n - name: Get version from pubspec.yaml\n id: version\n run: echo \"::set-output name=version::$(grep \"version:\" pubspec.yaml | cut -c10-)\"\n\n - name: Setup Java\n uses: actions/setup-java@v3\n with:\n distribution: \"zulu\"\n java-version: \"11\"\n\n - name: Setup Flutter\n uses: subosito/flutter-action@v2\n with:\n channel: \"stable\"\n\n - name: Get packages\n run: flutter pub get\n\n - name: Generate Java keystore\n env:\n KEY_JKS: ${{ secrets.KEY_JKS }}\n run: echo \"$KEY_JKS\" | base64 --decode > release-keystore.jks\n\n - name: Build APK\n env:\n KEY_PASSWORD: ${{ secrets.KEY_PASSWORD }}\n run: flutter build apk --split-per-abi\n\n - name: Get current date\n id: date\n run: echo \"::set-output name=date::$(TZ='Asia/Jakarta' date +'%A %d-%m-%Y %T WIB')\"\n\n - name: Release APK\n uses: ncipollo/release-action@v1\n with:\n allowUpdates: true\n artifacts: \"build/app/outputs/flutter-apk/*.apk\"\n body: \"Published at ${{ steps.date.outputs.date }}\"\n name: \"v${{ steps.version.outputs.version }}\"\n token: ${{ secrets.GH_TOKEN }}\n tag: ${{ steps.version.outputs.version }}\n
Simpan ketiga file tersebut dan push ke repositori. Cek apakah aplikasi berhasil dibuat dan dirilis oleh GitHub Actions secara otomatis.
Apabila aplikasi kamu berhasil dibuat dan dirilis otomatis, maka selamat! Sampai sini, kita sudah menyelesaikan workflow pada GitHub. Selanjutnya, kita akan membuat skrip baru untuk build pada App Center dan mengonfigurasi aplikasi secara lebih lanjut pada situs web App Center.
"},{"location":"tutorial/tutorial-9/#tutorial-penambahan-skrip-cicd-untuk-app-center","title":"Tutorial: Penambahan Skrip CI/CD untuk App Center","text":"
Pada bagian ini, kita akan menambahkan skrip continuous integration dan continuous delivery pada repositori aplikasi Flutter agar App Center dapat membangun dan menghasilkan berkas APK aplikasi secara otomatis.
Buka folder /android/app.
Buatlah file baru dengan nama appcenter-post-clone.sh dan isi file tersebut dengan kode berikut.
#!/usr/bin/env bash\n# Place this script in project/android/app/\n\ncd ..\n\n# fail if any command fails\nset -e\n# debug log\nset -x\n\ncd ..\ngit clone -b beta https://github.com/flutter/flutter.git\nexport PATH=`pwd`/flutter/bin:$PATH\n\nflutter channel stable\nflutter doctor\n\necho \"Installed flutter to `pwd`/flutter\"\n\n# export keystore for release\necho \"$KEY_JKS\" | base64 --decode > release-keystore.jks\n\n# build APK\n# if you get \"Execution failed for task ':app:lintVitalRelease'.\" error, uncomment next two lines\n# flutter build apk --debug\n# flutter build apk --profile\nflutter build apk --release\n\n# copy the APK where AppCenter will find it\nmkdir -p android/app/build/outputs/apk/; mv build/app/outputs/apk/release/app-release.apk $_\n
Buka file /android/.gitignore dan ubahlah file tersebut menjadi berikut. Hal ini dilakukan agar App Center dapat mendeteksi aplikasi sebagai aplikasi Android.
# add comment for app center\n# gradle-wrapper.jar\n# /gradlew\n# /gradlew.bat\n/.gradle\n/captures/\n/local.properties\nGeneratedPluginRegistrant.java\n\n# Remember to never publicly share your keystore.\n# See https://flutter.dev/docs/deployment/android#reference-the-keystore-from-the-app\nkey.properties\n**/*.keystore\n**/*.jks\n
Simpan file tersebut dan push ke repositori. Pastikan skrip ini dan .gitignore yang baru telah ter-push sampai ke branch main.
Setelah selesai membuat skrip, kita akan mengonfigurasi aplikasi pada App Center agar dapat dibuat dan dirilis secara otomatis.
"},{"location":"tutorial/tutorial-9/#tutorial-konfigurasi-lanjutan-pada-app-center","title":"Tutorial: Konfigurasi Lanjutan pada App Center","text":"
Buka situs web App Center dan buka proyek aplikasi.
Buka menu Build dan pilih GitHub sebagai servis penyedia repositori aplikasi. Pilihlah repositori aplikasi proyek kelompok kamu.
Buka branch utama kamu (main atau master, silakan disesuaikan) dan klik tombol Configure.
Ikuti pengaturan berikut:
Nyalakan Environment variables
Isi dengan name dan value berikut:
JAVA_HOME: $(JAVA_HOME_11_X64)
KEY_JKS: <base64 dari keystoremu>
KEY_PASSWORD: <password dari keystoremu>
Centang Sign builds, dan didalamnya centang My Gradle settings are entirely set to handle signing automatically.
Centang Distribute builds dan radio button Groups. Centang grup Contributors dan Public pada dropdown menu Select destination.
Centang Build status badge.
Catatan:
Jangan lupa untuk mengganti KEY_JKS dan KEY_PASSWORD dengan value yang sebenarnya.
Jangan lupa untuk membuat grup Public untuk distribusi aplikasi secara publik.
Salinlah tautan build badge dengan format Markdown dan tempelkan ke README.md repositorimu.
Klik tombol Save & Build untuk menyimpan konfigurasi dan memulai proses build perdana.
Kamu dapat mengecek tautan publik dari publikasi aplikasi pada App Center melalui menu Distribute -> Groups -> Public. Kamu juga dapat menyalin tautan publik dari publikasi aplikasi.
Salinlah tautan publik dari publikasi aplikasi dan tempelkan ke README.md
Selamat, kamu telah berhasil untuk men-deploy aplikasi Flutter kamu ke App Center. Kamu dapat mengecek aplikasi yang telah kamu deploy dengan mengunduh berkas APK dari App Center dan menginstalnya pada ponsel pintar kamu.
Dan kita, sudah resmi, menamatkan tutorial PBP Semester Genap 2023/2024! Terima kasih telah mengikuti dan mengerjakan semua tutorial PBP Semester Genap 2023/2024. Tim pengajar ingin mengucapkan apresiasi kepada semua mahasiswa yang telah berpartisipasi dan berkontribusi dalam mata kuliah ini. Tim pengajar melihat usaha dan dedikasi yang telah kalian tunjukkan dalam menghadapi tantangan pengembangan aplikasi multiplatform pada mata kuliah ini.
Selama proses lab dan tugas, kita telah menggali konsep dan prinsip dasar yang mendasari pengembangan aplikasi web dan mobile menggunakan Django dan Flutter. Kalian telah mempelajari tentang arsitektur, fitur, dan alat yang dapat membantu dalam membangun aplikasi yang tangguh dan responsif di kedua platform ini.
Tim pengajar berharap lab dan tugas yang diberikan dapat memberikan pemahaman yang lebih mendalam tentang potensi dan tantangan dalam pengembangan aplikasi multiplatform serta memberikan kalian keterampilan yang berguna dan dapat diterapkan dalam karir kalian sebagai pengembang perangkat lunak.
Namun, pembelajaran tidak berhenti di sini. Dunia pengembangan terus berkembang dengan cepat, dan penting untuk tetap mengikuti perkembangan terbaru dalam industri ini. Tim pengajar mendorong kalian untuk terus belajar dan menjaga keterampilan kalian tetap relevan dengan membaca referensi lainnya, mengikuti kursus lanjutan, dan mengambil bagian dalam proyek-proyek nyata.
Akhir kata, ingatlah bahwa pengembangan aplikasi multiplatform adalah bidang yang menarik dan penuh potensi. Teruslah eksplorasi dan berinovasi, dan tim pengajar yakin kalian memiliki masa depan yang cerah sebagai pengembang perangkat lunak. Terima kasih dan semoga sukses dalam perjalanan kalian!
Tutorial ini dikembangkan berdasarkan entri blog yang ditulis oleh Muhammad Athallah. Segala tutorial serta instruksi yang dicantumkan pada repositori ini dirancang sedemikian rupa sehingga mahasiswa yang sedang mengambil mata kuliah Pemrograman Berbasis Platform dapat menyelesaikan tutorial saat sesi lab berlangsung.
"}]}
\ No newline at end of file
+{"config":{"lang":["en"],"separator":"[\\s\\-]+","pipeline":[" "]},"docs":[{"location":"","title":"Beranda","text":"
Selamat datang di Pemrograman Berbasis Platform Semester Genap 2023/2024. Situs web ini akan memuat informasi terkait dengan perkuliahan yang akan dipublikasikan secara rutin, seperti dokumen tutorial, tugas individu, dan tugas kelompok. Harap cek situs web ini secara berkala.
Mengimplementasikan aplikasi mobile sederhana dengan framework Flutter
Menerapkan widget untuk layout dan input, event handling, dan pemanggilan asynchronous ke web service
Melakukan deploy aplikasi pada platform cloud dan perangkat mobile
"},{"location":"tk/pas/#aturan-umum-tugas-kelompok","title":"Aturan Umum Tugas Kelompok","text":"
Satu kelompok membuat satu repositori GitHub yang digunakan oleh seluruh anggota kelompok untuk bekerja sama. Kumpulkan tautan repositori GitHub ke Scele.
Repositori GitHub memuat README.md yang berisi:
Daftar nama anggota kelompok
Tautan APK (Tidak harus ada pada saat Tahap I; tautan APK dapat ditambahkan belakangan ke README.md setelah selesai mengerjakan Tahap II.)
Deskripsi aplikasi (nama dan fungsi aplikasi)
Daftar modul yang diimplementasikan beserta pembagian kerja per anggota
Peran atau aktor pengguna aplikasi
Alur pengintegrasian dengan web service untuk terhubung dengan aplikasi web yang sudah dibuat saat Proyek Tengah Semester
Tautan berita acara
Deployment aplikasi:
Unggah APK sebagai Release di GitHub kelompok
Platform Cloud, misalnya Microsoft App Center atau Firebase App Distribution
Gunakan logo aplikasi kelompok Anda sendiri
"},{"location":"tk/pas/#aturan-khusus-per-anggota-kelompok-implementasi-sebuah-modul","title":"Aturan Khusus per Anggota Kelompok (Implementasi Sebuah Modul)","text":"
Menerapkan widget untuk layout dan input (Material/Cupertino, sesuai integrasi kelompok masing-masing)
Menerapkan event handling
Menerapkan pemanggilan asynchronous ke web service Django (aplikasi web yang sudah dibuat saat Proyek Tengah Semester)
Pengolahan data response JSON dari Web Service Django dan menampilkan hasilnya di Mobile App
"},{"location":"tk/pas/#tahapan-tugas-akhir-kelompok","title":"Tahapan Tugas Akhir Kelompok","text":"Tahapan dan deliverables Tenggat Waktu dan Keterangan Tahap I (20%)
Pembuatan GitHub kelompok
Pembuatan codebase kelompok
README.md pada GitHub yang berisi:
Daftar nama anggota kelompok
Deskripsi aplikasi (nama dan fungsi aplikasi)
Daftar modul yang diimplementasikan beserta pembagian kerja per anggota
Peran atau aktor pengguna aplikasi
Alur pengintegrasian dengan web service untuk terhubung dengan aplikasi web yang sudah dibuat saat Proyek Tengah Semester
Menambahkan tautan berita acara ke README.md
Tenggat Waktu: Minggu, 12 Mei 2024, pukul 23.55 WIB
Kumpulkan ke SCELE: Tautan repositori GitHub yang berisi code base aplikasi Flutter lengkap beserta README.md
Tahap II (80%)
(Modul sudah terimplementasi dengan baik)
Setiap individu menyelesaikan penerapan widget pada modul masing-masing
Modul yang dibuat oleh setiap anggota kelompok sudah terintegrasi dalam satu kesatuan aplikasi
Fungsionalitas sesuai dengan rancangan desain
Menambahkan tautan APK ke README.md
Tenggat Waktu: Jum'at, 31 Mei 2024, pukul 23.55 WIB
Presentasi dan Demo Tugas ke Dosen
Pengumpulan: APK release pada cloud platform
"},{"location":"tk/pts/","title":"Proyek Tengah Semester PBP","text":"
Membuat Situs Web menggunakan Framework Django (Berkelompok)
Perlu diperhatikan selain tujuan pembelajaran khusus seperti tertulis di atas, peserta kuliah juga perlu mempelajari dan dilatih beberapa aspek kecendekiaan sebagai calon sarjana. Di antaranya yang relevan dalam kuliah ini adalah keteguhan (grit), kemandirian, ketelitian, termasuk juga metakognitif (secara sederhana bisa diartikan kemampuan mengatur strategi belajar yang sesuai dengan dirinya meliputi perencanaan, monitoring dan evaluasi proses belajar mandiri), termasuk di dalamnya kemampuan untuk memahami, mengkomunikasikan masalah, diskusi dan bertanya, sehingga peserta kuliah juga perlu siap bersikap positif dengan kondisi-kondisi yang secara tidak langsung atau tidak pasti akan dihadapi dan mungkin dapat menghabiskan banyak waktu. Kondisi tersebut bisa dianggap kendala, seperti keterbatasan sumber daya, bug tools, kesulitan teknis atau lainnya. Walaupun dirasakan menyulitkan, perlu diupayakan untuk disikapi dengan positif agar dapat menjadi manfaat terkait aspek kecendekiaan yang perlu dilatih peserta kuliah. Sikap negatif hanya akan memperburuk keadaan dan menghilangkan manfaat tugas ini untuk pembelajaran yang akan dapat dirasakan di kemudian hari. Tim asisten dan dosen melalui sarana yang ada, akan berusaha semampunya melayani pertanyaan, keluhan, dan membantu proses pembelajaran peserta agar peserta bisa menjalani perkuliahan dan belajar semaksimal mungkin.
Sebagai selingan, bila rekan-rekan lelah dan bingung menghadapi error yang belum kunjung terselesaikan, berikut ini ada video yang cukup populer dan mudah-mudahan bisa menambah semangat untuk tetap teguh mengerjakan dan berlatih demi kesuksesan di kemudian hari.
Selamat mengerjakan. \ud83d\ude04
"},{"location":"tk/pts/#aturan-umum-tugas-kelompok","title":"Aturan Umum Tugas Kelompok","text":"
Satu kelompok terdiri atas 5-6 orang.
Satu kelompok membuat satu repositori Git di dalam satu organisasi yang digunakan oleh seluruh anggota kelompok untuk bekerja sama. Kumpulkan tautan repositori ke Scele.
Setiap kelompok dipersilakan mencari ide sendiri mengenai aplikasi yang akan dibuat. Tema aplikasi adalah makanan dan minuman (food and beverage). Tema ini dipilih karena tiga alasan:
Pada Semester Genap 2023/2024, ada momen bulan Ramadan. Biasanya ada banyak acara bukber (buka puasa bersama) pada bulan Ramadan. Acara-acara bukber tersebut dapat menjadi peluang usaha makanan dan minuman.
Setelah bulan Ramadan, ada Hari Raya Idulfitri. Perayaan Hari Raya Idulfitri juga dapat menjadi peluang usaha kue kering khas Idulfitri.
Selain momen bulan Ramadan dan Hari Raya Idulfitri, tinggal di lingkungan sekitar kampus juga dapat menjadi peluang usaha katering untuk kegiatan kampus dan untuk mahasiswa yang tidak sempat memasak.
Setiap kelompok mengimplementasikan dataset makanan dan minuman dalam bentuk class Models dan menyimpan data dari dataset tersebut ke dalam database Django. Dataset makanan dan minuman harus berisi minimal 100 makanan dan/atau minuman. Sumber dataset makanan dan minuman boleh berasal dari mana saja, misalnya dari Kaggle. Contoh URL dataset yang dapat digunakan:
Indonesia food delivery GoFood product list
Indonesian Food Recipes
Indonesian Food and Drink Nutrition Dataset
Setiap anggota kelompok mengerjakan modul yang berbeda. Modul ditentukan oleh kelompok yang disesuaikan dengan ide aplikasi yang sudah didiskusikan dalam kelompok.
Tugas kelompok dikumpulkan sebagai kesatuan aplikasi web.
"},{"location":"tk/pts/#aturan-khusus-per-anggota-kelompok","title":"Aturan Khusus per Anggota Kelompok","text":"
Menerapkan Models dengan membuat, memanfaatkan yang sudah disediakan Django, atau memanfaatkan yang sudah dibuat oleh anggota kelompok (di modul lain).
Menerapkan Views untuk memproses request dan mengolah data untuk menghasilkan respons menggunakan templat HTML maupun mengembalikan respons JSON.
Menerapkan templat HTML dengan kerangka yang sistematis dan efisien, seperti base.html, header.html, dan footer.html.
Menerapkan responsive framework pada templat HTML (seperti Bootstrap atau Tailwind).
Memiliki halaman form yang dapat menerima masukan dari pengguna kemudian diproses oleh Views. Contoh pemrosesan oleh Views adalah insert data ke dalam Models, query data dari Models, dan update data pada Models.
Menerapkan JavaScript dengan pemanggilan AJAX.
Menerapkan filter informasi bagi pengguna yang sudah log in saja. Contohnya adalah data alamat, umur, dan nomor ponsel hanya dapat dilihat oleh pengguna yang sudah log in saja.
Menerapkan filter pada dataset makanan dan minuman yang ditampilkan. Contohnya adalah menampilkan daftar makanan dan minuman berdasarkan harga.
"},{"location":"tk/pts/#tahapan-tugas-kelompok","title":"Tahapan Tugas Kelompok","text":"
Tahapan dan deliverables Tenggat Waktu dan Keterangan Tahap I (40%)
Pembuatan GitHub kelompok
README.md pada GitHub yang berisi:
Nama-nama anggota kelompok
Deskripsi aplikasi (cerita aplikasi yang diajukan serta kebermanfaatannya)
Daftar modul yang akan diimplementasikan
Sumber dataset makanan dan minuman
Role atau peran pengguna beserta deskripsinya (karena bisa saja lebih dari satu jenis pengguna yang mengakses aplikasi)
Tenggat Waktu: Rabu, 13 Maret 2024, pukul 23:55 WIB Kumpulkan tautan GitHub dengan code base proyek Django yang sudah disiapkan di GitHub ke slot submisi yang tersedia di SCELE. Tahap II (60%)
(Modul sudah terimplementasi dengan baik)
Modul aplikasi dari tiap anggota kelompok
URL Mapping untuk modul
Models untuk modul
Views untuk modul
Terintegrasi sebagai satu kesatuan aplikasi
Fungsionalitas sesuai dengan rancangan desain
Tenggat Waktu: Rabu, 17 April 2024, pukul 23.55 WIB
Kriteria Submisi: Seluruh modul yang dikerjakan oleh setiap anggota kelompok sudah muncul dan dapat diakses pada proyek Django
Bonus (5%)
Unit Test (passed) untuk semua aspek, diharapkan code coverage bisa mencapai minimal 80%
GitHub Actions (CI/CD) sudah terkonfigurasi hingga deployment
Pipeline status dan tautan aplikasi yang sudah di-deploy tersedia di berkas README.md pada GitHub
"},{"location":"tugas/tugas-1/","title":"Tugas 1: Menulis Esai","text":"
Pemrograman Berbasis Platform (CSGE602022) \u2014 diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Genap 2023/2024
Tulislah sebuah esai minimal 1000 kata yang mengandung poin-poin sebagai berikut.
Pilihlah salah satu platform yang telah dijelaskan dalam Slide 1. Sebutkan nama platform yang Anda pilih.
Sebutkan 3 perangkat dan teknologi yang tergolong dalam platform tersebut yang pernah Anda gunakan.
Untuk masing-masing perangkat dan teknologi yang Anda sebutkan, ceritakan pengalaman Anda saat\u00a0menggunakannya.
Menurut Anda, apakah ada satu platform yang paling penting di antara semua programming platform? Jika ada, platform apa dan mengapa platform tersebut paling penting? Jika tidak ada, jelaskan\u00a0alasannya!
Pada tugas ini, kamu akan mengimplementasikan konsep Model-View-Template serta beberapa hal yang sudah kamu pelajari di kelas dan tutorial. Perlu diperhatikan bahwa proyek yang dibuat pada tugas berbeda dengan proyek yang digunakan pada tutorial.
Tema besar aplikasi untuk tugas PBP adalah aplikasi tracker. Pada semester ini, kamu diberikan kebebasan dalam memilih nama dan tema kecil aplikasi, kecuali book tracker yang sudah digunakan pada tutorial. Namun, aplikasi dari tugas kamu harus memiliki atribut-atribut berikut pada model aplikasimu.
name sebagai nama item dengan tipe CharField.
amount sebagai jumlah item dengan tipe IntegerField.
description sebagai deskripsi item dengan tipe TextField.
Kamu dipersilakan untuk menambahkan atribut lainnya jika diinginkan, seperti date, category. Namun, model aplikasi kamu wajib memiliki ketiga atribut wajib di atas (name, amount, description). Nama dari ketiga atribut di atas dapat disesuaikan lagi dengan kebutuhan aplikasimu.
Beberapa contoh ide aplikasi pengelolaan yang dapat kamu buat adalah sebagai berikut.
TV Series Tracker: title, episodes, synopsis, rating, date.
[ ] Membuat aplikasi dengan nama main pada proyek tersebut.
[ ] Melakukan routing pada proyek agar dapat menjalankan aplikasi main.
[ ] Membuat model pada aplikasi main dengan nama Item dan memiliki atribut wajib sebagai berikut.
name sebagai nama item dengan tipe CharField.
amount sebagai jumlah item dengan tipe IntegerField.
description sebagai deskripsi item dengan tipe TextField.
[ ] Membuat sebuah fungsi pada views.py untuk dikembalikan ke dalam sebuah template HTML yang menampilkan nama aplikasi serta nama dan kelas kamu.
[ ] Membuat sebuah routing pada urls.py aplikasi main untuk memetakan fungsi yang telah dibuat pada views.py.
[ ] Melakukan deployment ke PWS terhadap aplikasi yang sudah dibuat sehingga nantinya dapat diakses oleh teman-temanmu melalui Internet.
[ ] Membuat sebuah README.md yang berisi tautan menuju aplikasi PWS yang sudah di-deploy, serta jawaban dari beberapa pertanyaan berikut.
Jelaskan bagaimana cara kamu mengimplementasikan checklist di atas secara step-by-step (bukan hanya sekadar mengikuti tutorial).
Buatlah bagan yang berisi request client ke web aplikasi berbasis Django beserta responnya dan jelaskan pada bagan tersebut kaitan antara urls.py, views.py, models.py, dan berkas html.
Jelaskan mengapa kita menggunakan virtual environment? Apakah kita tetap dapat membuat aplikasi web berbasis Django tanpa menggunakan virtual environment?
Jelaskan apakah itu MVC, MVT, MVVM dan perbedaan dari ketiganya.
Perhatikan bahwa kamu harus mengerjakan tugas ini menggunakan repositori yang berbeda dengan tutorial.
"},{"location":"tugas/tugas-2/#tenggat-waktu-pengerjaan","title":"Tenggat Waktu Pengerjaan","text":"
Tenggat waktu pengerjaan Tugas 2 adalah hari Selasa, 13 Februari, pukul 12.00 siang.
Harap mengumpulkan link repositori yang kamu gunakan ke dalam slot submisi yang telah disediakan di SCELE.
"},{"location":"tugas/tugas-3/","title":"Tugas 3: Implementasi Form dan Data Delivery pada Django","text":"
Pemrograman Berbasis Platform (CSGE602022) \u2014 diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Genap 2023/2024
Pada tugas ini, kamu akan mengimplementasikan konsep authentication, session, cookies, serta menerapkan beberapa konsep yang telah dipelajari selama sesi tutorial.
Kerjakan checklist untuk tugas ini secara berurutan:
[ ] Mengimplementasikan fungsi registrasi, login, dan logout untuk memungkinkan pengguna untuk mengakses aplikasi sebelumnya dengan lancar.
[ ] Membuat dua akun pengguna dengan masing-masing tiga dummy data menggunakan model buku yang telah dibuat pada aplikasi sebelumnya untuk setiap akun di lokal.
[ ] Menghubungkan model Item dengan User.
[ ] Menampilkan detail informasi pengguna yang sedang logged in seperti username dan menerapkan cookies seperti last login pada halaman utama aplikasi.
[ ] Menjawab beberapa pertanyaan berikut pada README.md pada root folder (silakan modifikasi README.md yang telah kamu buat sebelumnya; tambahkan subjudul untuk setiap tugas).
[ ] Apa itu Django UserCreationForm, dan jelaskan apa kelebihan dan kekurangannya?
[ ] Apa perbedaan antara autentikasi dan otorisasi dalam konteks Django, dan mengapa keduanya penting?
[ ] Apa itu cookies dalam konteks aplikasi web, dan bagaimana Django menggunakan cookies untuk mengelola data sesi pengguna?
[ ] Apakah penggunaan cookies aman secara default dalam pengembangan web, atau apakah ada risiko potensial yang harus diwaspadai?
[ ] Jelaskan bagaimana cara kamu mengimplementasikan checklist di atas secara step-by-step (bukan hanya sekadar mengikuti tutorial).
[ ] Melakukan add-commit-push ke GitHub.
"},{"location":"tugas/tugas-4/#tenggat-waktu-pengerjaan","title":"Tenggat Waktu Pengerjaan","text":"
Tenggat waktu pengerjaan Tugas 4 adalah Selasa, 27 Februari 2023, pukul 12.00 siang.
Asisten dosen akan mengecek last commit dari repositori tugas lab, sehingga kamu tidak perlu mengumpulkan tautan repositori ke dalam slot submisi.
"},{"location":"tugas/tugas-5/","title":"Tugas 5: Desain Web menggunakan HTML, CSS dan Framework CSS","text":"
Pemrograman Berbasis Platform (CSGE602022) \u2014 diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Genap 2023/2024
Pada tugas ini, kamu akan mengimplementasikan desain web berdasarkan beberapa hal yang sudah kamu pelajari selama tutorial (CSS, Framework, dsb).
Checklist untuk tugas ini adalah sebagai berikut:
[ ] Kustomisasi desain pada templat HTML yang telah dibuat pada Tugas 4 dengan menggunakan CSS atau CSS framework (seperti Bootstrap, Tailwind, Bulma) dengan ketentuan sebagai berikut
[ ] Kustomisasi halaman daftar item menjadi lebih berwarna dan menggunakan apporach lain selain tabel seperti dengan menggunakan Card.
[ ] Menambahkan opsi update dan delete pada masing-masing item.
[ ] Menjawab beberapa pertanyaan berikut pada README.md pada root folder (silakan modifikasi README.md yang telah kamu buat sebelumnya; tambahkan subjudul untuk setiap tugas).
[ ] Jelaskan manfaat dari setiap element selector dan kapan waktu yang tepat untuk menggunakannya.
[ ] Jelaskan HTML5 Tag yang kamu ketahui.
[ ] Jelaskan perbedaan antara margin dan padding.
[ ] Jelaskan perbedaan antara framework CSS Tailwind dan Bootstrap. Kapan sebaiknya kita menggunakan Bootstrap daripada Tailwind, dan sebaliknya?
[ ] Melakukan add-commit-push ke GitHub.
"},{"location":"tugas/tugas-5/#tenggat-waktu-pengerjaan","title":"Tenggat Waktu Pengerjaan","text":"
Tenggat waktu pengerjaan Tugas 5 adalah Selasa, 5 Maret, pukul 12.00 siang.
Asisten dosen akan mengecek last commit dari repositori tugas lab, sehingga kamu tidak perlu mengumpulkan tautan repositori ke dalam slot submisi.
"},{"location":"tugas/tugas-6/","title":"Tugas 6: JavaScript dan Asynchronous JavaScript","text":"
Pemrograman Berbasis Platform (CSGE602022) \u2014 diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Genap 2023/2024
Pada tugas ini, kamu akan mengimplementasikan AJAX pada aplikasi yang telah kamu buat pada tugas sebelumnya.
Checklist untuk tugas ini adalah sebagai berikut:
[ ] Mengubah tugas 5 yang telah dibuat sebelumnya menjadi menggunakan AJAX.
[ ] AJAX GET
[ ] Ubahlah kode cards data item agar dapat mendukung AJAX GET.
[ ] Lakukan pengambilan task menggunakan AJAX GET.
[ ] AJAX POST
[ ] Buatlah sebuah tombol yang membuka sebuah modal dengan form untuk menambahkan item.
Modal di-trigger dengan menekan suatu tombol pada halaman utama. Saat penambahan item berhasil, modal harus ditutup dan input form harus dibersihkan dari data yang sudah dimasukkan ke dalam form sebelumnya.
[ ] Buatlah fungsi view baru untuk menambahkan item baru ke dalam basis data.
[ ] Buatlah path /create-ajax/ yang mengarah ke fungsi view yang baru kamu buat.
[ ] Hubungkan form yang telah kamu buat di dalam modal kamu ke path /create-ajax/.
[ ] Lakukan refresh pada halaman utama secara asinkronus untuk menampilkan daftar item terbaru tanpa reload halaman utama secara keseluruhan.
[ ] Menjawab beberapa pertanyaan berikut pada README.md pada root folder (silakan modifikasi README.md yang telah kamu buat sebelumnya; tambahkan subjudul untuk setiap tugas).
Jelaskan perbedaan antara asynchronous programming dengan synchronous programming.
Dalam penerapan JavaScript dan AJAX, terdapat penerapan paradigma event-driven programming. Jelaskan maksud dari paradigma tersebut dan sebutkan salah satu contoh penerapannya pada tugas ini.
Jelaskan penerapan asynchronous programming pada AJAX.
Pada PBP kali ini, penerapan AJAX dilakukan dengan menggunakan Fetch API daripada library jQuery. Bandingkanlah kedua teknologi tersebut dan tuliskan pendapat kamu teknologi manakah yang lebih baik untuk digunakan.
Jelaskan bagaimana cara kamu mengimplementasikan checklist di atas secara step-by-step (bukan hanya sekadar mengikuti tutorial).
[ ] Melakukan add-commit-push ke GitHub.
"},{"location":"tugas/tugas-6/#tenggat-waktu-pengerjaan","title":"Tenggat Waktu Pengerjaan","text":"
Tenggat waktu pengerjaan Tugas 6 adalah Jumat, 15 Maret 2024, pukul 12.00 siang.
Asisten dosen akan mengecek last commit dari repositori tugas lab, sehingga kamu tidak perlu mengumpulkan tautan repositori ke dalam slot submisi.
"},{"location":"tugas/tugas-7/","title":"Tugas 7: Elemen Dasar Flutter","text":"
Pemrograman Berbasis Platform (CSGE602022) \u2014 diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Genap 2023/2024
Pada tugas ini, kamu akan mengimplementasikan aplikasi yang telah kamu kembangkan menggunakan Flutter berdasarkan beberapa hal yang sudah kamu pelajari selama tutorial.
Checklist untuk tugas ini adalah sebagai berikut:
[ ] Membuat sebuah program Flutter baru dengan tema tracker seperti tugas-tugas sebelumnya.
[ ] Membuat tiga tombol sederhana dengan masing-masing warna berbeda yang memiliki ikon dan teks untuk:
[ ] Melihat daftar item (Lihat Item)
[ ] Menambah item (Tambah Item)
[ ] Logout (Logout)
[ ] Memunculkan Snackbar dengan tulisan:
[ ] \"Kamu telah menekan tombol Lihat Item\" ketika tombol Lihat Item ditekan.
[ ] \"Kamu telah menekan tombol Tambah Item\" ketika tombol Tambah Item ditekan.
[ ] \"Kamu telah menekan tombol Logout\" ketika tombol Logout ditekan.
[ ] Menjawab beberapa pertanyaan berikut pada README.md pada root folder.
[ ] Apa perbedaan utama antara stateless dan stateful widget dalam konteks pengembangan aplikasi Flutter?
[ ] Sebutkan seluruh widget yang kamu gunakan untuk menyelesaikan tugas ini dan jelaskan fungsinya masing-masing.
[ ] Jelaskan bagaimana cara kamu mengimplementasikan checklist di atas secara step-by-step (bukan hanya sekadar mengikuti tutorial)
[ ] Melakukan add-commit-push ke GitHub.
"},{"location":"tugas/tugas-7/#tenggat-waktu-pengerjaan","title":"Tenggat Waktu Pengerjaan","text":"
Tenggat waktu pengerjaan Tugas 7 adalah Selasa, 16 April, pukul 12.00 siang.
Harap mengumpulkan link repositori yang kamu gunakan ke dalam slot submisi yang telah disediakan di SCELE.
"},{"location":"tugas/tugas-8/","title":"Tugas 8: Flutter Navigation, Layouts, Forms, and Input Elements","text":"
Pemrograman Berbasis Platform (CSGE602022) \u2014 diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Genap 2023/2024
Pada tugas ini, kamu akan mengimplementasikan navigation, layout, form, dan form input elements pada aplikasi Flutter yang kamu buat pada tugas sebelumnya.
Checklist untuk tugas ini adalah sebagai berikut:
[ ] Membuat minimal satu halaman baru pada aplikasi, yaitu halaman formulir tambah item baru dengan ketentuan sebagai berikut:
[ ] Memakai minimal tiga elemen input, yaitu name, amount, description. Tambahkan elemen input sesuai dengan model pada aplikasi tugas Django yang telah kamu buat.
[ ] Memiliki sebuah tombol Save.
[ ] Setiap elemen input di formulir juga harus divalidasi dengan ketentuan sebagai berikut:
[ ] Setiap elemen input tidak boleh kosong.
[ ] Setiap elemen input harus berisi data dengan tipe data atribut modelnya.
[ ] Mengarahkan pengguna ke halaman form tambah item baru ketika menekan tombol Tambah Item pada halaman utama.
[ ] Memunculkan data sesuai isi dari formulir yang diisi dalam sebuah pop-up setelah menekan tombol Save pada halaman formulir tambah item baru.
[ ] Membuat sebuah drawer pada aplikasi dengan ketentuan sebagai berikut:
[ ] Drawer minimal memiliki dua buah opsi, yaitu Halaman Utama dan Tambah Item.
[ ] Ketika memiih opsi Halaman Utama, maka aplikasi akan mengarahkan pengguna ke halaman utama.
[ ] Ketika memiih opsi Tambah Item, maka aplikasi akan mengarahkan pengguna ke halaman form tambah item baru.
[ ] Menjawab beberapa pertanyaan berikut pada README.md pada root folder (silakan modifikasi README.md yang telah kamu buat sebelumnya; tambahkan subjudul untuk setiap tugas).
[ ] Jelaskan perbedaan antara Navigator.push() dan Navigator.pushReplacement(), disertai dengan contoh mengenai penggunaan kedua metode tersebut yang tepat!
[ ] Jelaskan masing-masing layout widget pada Flutter dan konteks penggunaannya masing-masing!
[ ] Sebutkan apa saja elemen input pada form yang kamu pakai pada tugas kali ini dan jelaskan mengapa kamu menggunakan elemen input tersebut!
[ ] Bagaimana penerapan clean architecture pada aplikasi Flutter?
[ ] Jelaskan bagaimana cara kamu mengimplementasikan checklist di atas secara step-by-step! (bukan hanya sekadar mengikuti tutorial)
[ ] Melakukan add-commit-push ke GitHub.
"},{"location":"tugas/tugas-8/#tenggat-waktu-pengerjaan","title":"Tenggat Waktu Pengerjaan","text":"
Tenggat waktu pengerjaan Tugas 8 adalah Selasa, 23 April 2024, pukul 12.00 siang.
Asisten dosen akan mengecek last commit dari repositori tugas lab, sehingga kamu tidak perlu mengumpulkan tautan repositori ke dalam slot submisi.
"},{"location":"tugas/tugas-9/","title":"Tugas 9: Integrasi Web Service dengan Aplikasi Flutter","text":"
Pemrograman Berbasis Platform (CSGE602022) \u2014 diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Genap 2023/2024
Pada tugas ini, kamu akan mengintegrasikan layanan Django yang sudah kamu buat pada tugas-tugas sebelumnya dengan aplikasi Flutter yang sudah kamu buat sebelumnya.
Checklist untuk tugas ini adalah sebagai berikut:
[ ] Memastikan deployment ke PWS proyek tugas Django kamu telah berjalan dengan baik.
[ ] Membuat halaman login pada proyek tugas Flutter.
[ ] Mengintegrasikan sistem autentikasi Django dengan proyek tugas Flutter.
[ ] Membuat model kustom sesuai dengan proyek aplikasi Django.
[ ] Membuat halaman yang berisi daftar semua item yang terdapat pada ** JSON diendpoint Django yang telah kamu deploy.
[ ] Tampilkan name, amount, dan description dari masing-masing item pada halaman ini.
[ ] Membuat halaman detail untuk setiap item yang terdapat pada halaman daftar Item.
[ ] Halaman ini dapat diakses dengan menekan salah satu item pada halaman daftar Item.
[ ] Tampilkan seluruh atribut pada model item kamu pada halaman ini.
[ ] Tambahkan tombol untuk kembali ke halaman daftar item.
[ ] Menjawab beberapa pertanyaan berikut pada README.md pada root folder (silakan modifikasi README.md yang telah kamu buat sebelumnya; tambahkan subjudul untuk setiap tugas).
[ ] Apakah bisa kita melakukan pengambilan data JSON tanpa membuat model terlebih dahulu? Jika iya, apakah hal tersebut lebih baik daripada membuat model sebelum melakukan pengambilan data JSON?
[ ] Jelaskan fungsi dari CookieRequest dan jelaskan mengapa instance CookieRequest perlu untuk dibagikan ke semua komponen di aplikasi Flutter.
[ ] Jelaskan mekanisme pengambilan data dari JSON hingga dapat ditampilkan pada Flutter.
[ ] Jelaskan mekanisme autentikasi dari input data akun pada Flutter ke Django hingga selesainya proses autentikasi oleh Django dan tampilnya menu pada Flutter.
[ ] Sebutkan seluruh widget yang kamu pakai pada tugas ini dan jelaskan fungsinya masing-masing.
[ ] Jelaskan bagaimana cara kamu mengimplementasikan checklist di atas secara step-by-step! (bukan hanya sekadar mengikuti tutorial).
[ ] Melakukan add-commit-push ke GitHub.
"},{"location":"tugas/tugas-9/#tenggat-waktu-pengerjaan","title":"Tenggat Waktu Pengerjaan","text":"
Tenggat waktu pengerjaan Tugas 9 adalah Selasa, 30 April 2024, pukul 12.00 siang.
Asisten dosen akan mengecek last commit dari repositori tugas lab, sehingga kamu tidak perlu mengumpulkan tautan repositori ke dalam slot submisi.
"},{"location":"tutorial/tutorial-0/","title":"Tutorial 0: Konfigurasi dan Instalasi Git dan Django","text":"
Pemrograman Berbasis Platform (CSGE602022) \u2014 diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Ganjil 2023/2024
Setelah menyelesaikan tutorial ini, mahasiswa diharapkan untuk dapat:
Mengerti perintah-perintah dasar Git yang perlu diketahui untuk mengerjakan proyek aplikasi.
Menggunakan perintah-perintah dasar Git yang perlu diketahui untuk mengerjakan proyek aplikasi.
Membuat repositori Git lokal dan daring (GitHub).
Menambahkan remote antara repositori Git lokal dan repositori daring pada GitHub.
Memahami branching pada Git dan mampu melakukan merge request/pull request.
"},{"location":"tutorial/tutorial-0/#tutorial-pembuatan-akun-github-lewati-jika-sudah-ada","title":"Tutorial: Pembuatan Akun GitHub (Lewati Jika Sudah Ada)","text":""},{"location":"tutorial/tutorial-0/#pengenalan-tentang-git-dan-github","title":"Pengenalan Tentang Git dan GitHub","text":"
Pengenalan awal ini akan membantumu memahami dasar-dasar mengenai Git dan platform berbasis web yang dikenal sebagai GitHub.
"},{"location":"tutorial/tutorial-0/#git-sistem-kontrol-versi-yang-kuat","title":"Git: Sistem Kontrol Versi yang Kuat","text":"
Git adalah sistem kontrol versi yang membantumu melacak perubahan pada kode sumber proyek.
Dengan Git, kamu dapat memantau semua revisi yang telah dilakukan pada proyekmu seiring waktu.
"},{"location":"tutorial/tutorial-0/#github-platform-kolaborasi-menggunakan-git","title":"GitHub: Platform Kolaborasi Menggunakan Git","text":"
GitHub adalah platform berbasis web yang memungkinkanmu untuk menyimpan, mengelola, dan berkolaborasi pada proyek-proyek menggunakan Git.
Ini memberikan wadah yang aman untuk meng-host proyekmu dan berinteraksi dengan rekan tim melalui Git.
Git dan GitHub memainkan peran penting dalam pengembangan perangkat lunak modern dan kolaborasi tim.
Keduanya memungkinkan tim untuk melacak perubahan kode, menyimpan versi, dan bekerja bersama dalam proyek secara efisien.
Dengan pemahaman dasar mengenai Git dan GitHub, kamu siap untuk melangkah lebih jauh dalam dunia pengembangan perangkat lunak yang kolaboratif dan terstruktur.
"},{"location":"tutorial/tutorial-0/#langkah-1-membuat-akun-di-github","title":"Langkah 1: Membuat Akun di GitHub","text":"
Langkah selanjutnya adalah membuat akun di GitHub, yang akan memungkinkanmu untuk mulai berkolaborasi pada proyek-proyek menggunakan Git.
Buka Situs Web GitHub
Buka peramban web dan akses GitHub.
Membuat Akun
Di halaman beranda GitHub, cari tombol Sign up di pojok kanan atas halaman.
Klik tombol tersebut untuk memulai proses pendaftaran akun.
Isi Formulir Pendaftaran
Isi formulir pendaftaran dengan informasi yang diperlukan, seperti nama pengguna yang ingin digunakan, alamat email yang valid, dan kata sandi yang aman.
Pastikan kamu menyimpan informasi ini dengan aman untuk masuk ke akunmu di masa mendatang.
Verifikasi Akun Melalui Email
Setelah mengisi formulir, GitHub akan mengirimkan email verifikasi ke alamat email yang kamu berikan.
Buka email tersebut dan ikuti instruksi untuk verifikasi akunmu.
Akun GitHub Siap Digunakan
Setelah verifikasi selesai, kamu akan memiliki akun GitHub yang siap digunakan untuk berkolaborasi dalam proyek dan melacak perubahan menggunakan Git.
Catatan:
Akun GitHub adalah pintu masuk untuk terlibat dalam kolaborasi proyek dan menyimpan proyekmu di platform ini.
Pastikan informasi pendaftaran yang kamu berikan akurat dan aman.
"},{"location":"tutorial/tutorial-0/#selamat-kamu-telah-membuat-akun-github","title":"Selamat, Kamu Telah Membuat Akun GitHub","text":"
Kamu sekarang telah memiliki akun GitHub yang dapat digunakan untuk menyimpan proyek, berkolaborasi dengan orang lain, dan masih banyak lagi.
IDE (Integrated Development Environment) adalah perangkat lunak yang membantu para pengembang dalam menulis, mengedit, dan mengelola kode. Berikut adalah langkah-langkah untuk memasang IDE.
"},{"location":"tutorial/tutorial-0/#langkah-1-pemilihan-text-editor-atau-ide","title":"Langkah 1: Pemilihan Text Editor atau IDE","text":"
Pilihlah text editor atau IDE yang sesuai dengan preferensimu. Beberapa pilihan populer yang dapat kamu pertimbangkan meliputi:
Visual Studio Code
Sublime Text
PyCharm
Vim
"},{"location":"tutorial/tutorial-0/#langkah-2-proses-instalasi","title":"Langkah 2: Proses Instalasi","text":"
Pergi ke situs web resmi IDE yang kamu pilih.
Ikuti petunjuk yang diberikan untuk mengunduh installer IDE.
Jalankan installer dan ikuti instruksi di layar untuk menyelesaikan proses instalasi.
"},{"location":"tutorial/tutorial-0/#langkah-3-memulai-menggunakan-ide","title":"Langkah 3: Memulai Menggunakan IDE","text":"
Setelah proses instalasi selesai, buka IDE yang telah terinstal.
Eksplorasi antarmuka dan fitur yang disediakan oleh IDE untuk membantumu dalam pengembangan proyek.
Catatan:
Pastikan kamu memilih IDE yang sesuai dengan jenis proyek yang akan dikerjakan.
Jangan ragu untuk mengeksplorasi fitur-fitur IDE (contoh: extensions atau plugin) dan memanfaatkan sumber daya pendukung, seperti dokumentasi dan tutorial, untuk meningkatkan produktivitas dalam pengembangan perangkat lunak.
"},{"location":"tutorial/tutorial-0/#tutorial-instalasi-dan-konfigurasi-git","title":"Tutorial: Instalasi dan Konfigurasi Git","text":""},{"location":"tutorial/tutorial-0/#langkah-1-instalasi-git","title":"Langkah 1: Instalasi Git","text":"
Jika Git belum terpasang pada sistem, kamu dapat mengikuti langkah-langkah berikut untuk menginstalnya.
Buka situs web resmi Git di sini.
Pilih sistem operasi yang sesuai (Windows, macOS, atau Linux) dan unduh installer yang sesuai.
Jalankan installer yang telah diunduh dan ikuti petunjuk di layar untuk menyelesaikan proses instalasi.
"},{"location":"tutorial/tutorial-0/#langkah-2-konfigurasi-awal-git","title":"Langkah 2: Konfigurasi Awal Git","text":"
Setelah Git terpasang, langkah-langkah berikut akan membantumu mengatur konfigurasi awal sebelum mulai menggunakan Git.
Buatlah sebuah folder/direktori baru untuk menyimpan proyek Git kamu, kemudian masuklah ke direktori tersebut.
Salinlah path ke direktori yang sudah kamu buat.
Buka terminal atau command prompt pada sistem, kemudian pindah ke direktori yang sudah kamu buat dengan menjalankan perintah cd <path_direktori>
Inisiasi repositori baru dengan perintah git init. Perintah ini akan membuat repositori Git kosong di dalam direktori yang kamu tentukan.
"},{"location":"tutorial/tutorial-0/#langkah-3-konfigurasi-nama-pengguna-dan-email","title":"Langkah 3: Konfigurasi Nama Pengguna dan Email","text":"
Sebelum mulai berkontribusi ke repositori, konfigurasikan nama pengguna dan alamat email agar terhubung dengan commit-mu.
Atur username dan email yang akan diasosiasikan dengan pekerjaanmu ke repositori Git ini dengan menjalankan perintah di bawah ini. Sesuaikan dengan username dan email yang kamu gunakan pada GitHub.
Untuk memastikan konfigurasi telah diatur dengan benar pada repositori lokal, kamu dapat menjalankan perintah berikut.
git config --list\n
Catatan:
Pastikan untuk mengganti <NAME> dan <EMAIL> dengan informasi pribadimu
Gunakan langkah-langkah ini sebagai panduan untuk mengkonfigurasi Git sesuai kebutuhanmu.
"},{"location":"tutorial/tutorial-0/#tutorial-penggunaan-dasar-git","title":"Tutorial: Penggunaan Dasar Git","text":"
Repositori adalah tempat penyimpanan untuk proyek perangkat lunak, yang mencakup semua revisi dan perubahan yang telah dilakukan pada kode. Untuk mengeksekusi perintah-perintah Git, kamu dapat melakukannya pada repositori di GitHub, platform kolaboratif untuk mengelola proyek menggunakan Git.
"},{"location":"tutorial/tutorial-0/#langkah-1-melakukan-inisiasi-repositori-di-github","title":"Langkah 1: Melakukan Inisiasi Repositori di GitHub","text":"
Langkah pertama dalam penggunaan Git adalah melakukan inisiasi repositori di GitHub untuk memulai pelacakan perubahan pada proyekmu.
Buka GitHub melalui peramban web.
Buat Repositori Baru
Pada halaman beranda GitHub, buat repositori baru dengan nama my-first-repo.
Buka halaman repositori yang baru kamu buat. Pastikan untuk mengatur visibilitas proyek sebagai \"Public\" dan biarkan pengaturan lainnya pada nilai default.
Tentukan Direktori Lokal
Pilih direktori lokal di komputermu yang telah diinisiasi dengan Git. Inilah tempat kamu akan menyimpan versi lokal dari proyek.
Tambahkan Berkas README.md
Buat berkas baru dengan nama README.md dalam direktori lokal proyekmu.
Isi berkas README.md dengan informasi seperti nama, NPM, dan kelas. Contoh:
Nama : Pak Bepe\n\nNPM : 2201234567\n\nKelas : PBP A\n
Cek Status dan Lakukan Tracking
Buka command prompt atau terminal, lalu jalankan git status pada direktori yang sudah kamu pilih. Perintah ini akan menampilkan berkas-berkas yang belum di-track (untracked).
Gunakan perintah git add README.md untuk menandai berkas README.md sebagai berkas yang akan di-commit (tracked).
Commit Perubahan
Jalankan kembali git status dan pastikan berkas README.md sudah ditandai sebagai berkas yang akan di-commit.
Lanjutkan dengan menjalankan git commit -m \"<KOMENTAR KAMU>\" untuk membuat commit dengan pesan komentar yang sesuai dengan perubahan yang kamu lakukan.
Catatan:
Langkah ini akan membuat kamu siap untuk mulai melacak perubahan pada proyek menggunakan Git.
Good practice dalam memberikan komentar commit adalah menjelaskan dengan singkat apa yang kamu lakukan.
Komentar commit yang baik dapat membantumu dan rekan-rekan tim dalam memahami tujuan perubahan tersebut.
Hindari komentar yang terlalu umum atau ambigu, seperti Perbaikan bug atau Update file.
"},{"location":"tutorial/tutorial-0/#langkah-2-menghubungkan-repositori-lokal-dengan-repositori-di-github","title":"Langkah 2: Menghubungkan Repositori Lokal dengan Repositori di GitHub","text":"
Setelah melakukan inisiasi repositori lokal, langkah selanjutnya adalah menghubungkannya dengan repositori di GitHub agar kamu dapat berkolaborasi dan menyimpan perubahan di platform daring tersebut.
Buat Branch Utama Baru
Di terminal atau command prompt, jalankan perintah git branch -M main untuk membuat branch utama baru dengan nama \"main\".
Pastikan huruf \"M\" pada perintah -M ditulis dengan huruf kapital.
Hubungkan dengan Repositori di GitHub
Gunakan perintah git remote add origin <URL_REPO> untuk menghubungkan repositori lokal dengan repositori di GitHub.
Gantilah <URL_REPO> dengan URL HTTPS repositori yang telah kamu buat di GitHub. Contoh:
Terakhir, lakukan penyimpanan pertama ke GitHub dengan menjalankan perintah git push -u origin main.
Perintah ini akan mengirimkan semua perubahan yang ada pada branch saat ini (dalam hal ini adalah branch utama) di repositori lokal ke branch main di repositori GitHub.
Lakukan Pengecekan Kembali
Lakukan refresh pada halaman repositori kamu, seharusnya berkas README.md kamu sudah dapat terlihat.
Catatan:
Langkah ini penting untuk menjaga konsistensi antara repositori lokal dan repositori di GitHub.
Proses ini memungkinkanmu untuk mulai berkolaborasi dan menyimpan perubahan proyek secara terstruktur di platform GitHub.
"},{"location":"tutorial/tutorial-0/#langkah-3-melakukan-cloning-terhadap-suatu-repositori","title":"Langkah 3: Melakukan Cloning terhadap Suatu Repositori","text":"
Cloning repositori adalah proses menduplikasi seluruh konten dari repositori yang ada di platform GitHub ke komputer lokal. Langkah-langkahnya adalah sebagai berikut.
Buka halaman repositori di GitHub yang telah kamu buat sebelumnya.
Salin URL Clone
Klik tombol Code di pojok kanan atas halaman repositori di GitHub.
Pilih opsi HTTPS untuk salin URL clone.
Clone Repositori ke Komputer Lokal
Buka terminal atau command prompt di direktori yang berbeda dari tempat repositori lokalmu sebelumnya.
Jalankan perintah git clone <URL_CLONE> (gantilah URL_CLONE dengan URL yang telah kamu salin).
Perintah ini akan menduplikasi seluruh repositori ke komputer lokalmu.
Saat ini, kamu memiliki tiga repositori:
Repositori asli di komputer lokal.
Repositori daring di GitHub yang terhubung dengan repositori lokal.
Repositori baru hasil dari proses cloning yang terhubung dengan repositori GitHub.
Catatan:
Langkah ini memungkinkanmu untuk bekerja dengan repositori di berbagai tempat dengan mudah.
"},{"location":"tutorial/tutorial-0/#langkah-4-melakukan-push-kepada-suatu-repositori","title":"Langkah 4: Melakukan Push kepada Suatu Repositori","text":"
Seperti yang sudah disinggung sebelumnya (Langkah 2), push adalah proses mengirimkan perubahan yang kamu lakukan di repositori lokal ke repositori di GitHub. Langkah-langkahnya adalah sebagai berikut.
Buka kembali repositori lokal yang pertama kali kamu buat.
Ubah isi berkas README.md dengan menambahkan atribut Hobi. Contohnya adalah sebagai berikut.
Nama : Pak Bepe\n\nNPM : 2201234567\n\nKelas : PBP A\n\nHobi : Tidur\n
Lakukan Push ke Repositori GitHub
Buka terminal atau command prompt, kemudian masuk ke repositori lokal yang telah kamu ubah.
Jalankan perintah git status untuk melihat status perubahan yang dilakukan.
Jalankan git add README.md untuk menambahkan perubahan ke dalam tahap yang akan di-commit.
Lakukan commit dengan menjalankan perintah git commit -m \"<KOMENTAR KAMU>\" untuk memberikan deskripsi singkat tentang perubahan yang kamu lakukan.
Terakhir, jalankan git push -u origin <NAMA_BRANCH> untuk mengirim perubahan ke branch yang dipilih pada repositori GitHub (gantilah \"Nama Branch\" dengan target branch, misalnya main).
Lakukan Pengecekan Kembali
Lakukan refresh halaman kamu, seharusnya berkas README.md kamu sudah berubah.
Catatan: Jika kamu ingin mengambil semua perubahan yang belum di-stage (ditandai untuk dimasukkan dalam commit) dari seluruh direktori proyek kamu, jalankan git add ..
"},{"location":"tutorial/tutorial-0/#langkah-5-melakukan-pull-dari-suatu-repositori","title":"Langkah 5: Melakukan Pull dari Suatu Repositori","text":"
Pull pada suatu repositori adalah proses mengambil perubahan terbaru dari repositori di GitHub dan menggabungkannya dengan repositori lokal.
Buka kembali repositori lokal yang telah kamu clone sebelumnya di terminal atau command prompt.
Jalankan Perintah Pull
Jalankan perintah git pull origin main untuk mengambil perubahan terbaru yang ada di repositori GitHub dan menggabungkannya dengan repositori lokalmu.
Lakukan Pengecekan Kembali
Periksa kembali berkas README.md di repositori lokal tersebut. Seharusnya berkas README.md kamu sudah menampilkan hobi kamu.
Catatan:
Langkah ini memastikan bahwa repositori lokalmu selalu diperbarui dengan perubahan terbaru yang ada di repositori GitHub.
Melakukan pull secara berkala penting untuk menghindari konflik dan memastikan kamu bekerja dengan versi terbaru dari proyek.
"},{"location":"tutorial/tutorial-0/#langkah-6-melakukan-branching-pada-suatu-repositori","title":"Langkah 6: Melakukan Branching pada Suatu Repositori","text":"
Pada tahap ini kamu akan mempelajari tentang penggunaan branch dalam Git. Penggunaan branch memungkinkan kamu untuk mengembangkan fitur atau memperbaiki bug di lingkungan terpisah sebelum menggabungkannya kembali ke branch utama.
Apa Itu Branch di Git?
Branch di Git adalah cabang terpisah dari source code yang memungkinkan pengembangan independen dari fitur atau perubahan.
Hal ini memungkinkan tim untuk bekerja pada fitur atau perbaikan bug tanpa mengganggu kode yang ada di branch utama.
Membuat dan Mengganti Branch Baru
Pada direktori repositori lokal asli (bukan clone), jalankan perintah git checkout -b <NAMA_BRANCH> di terminal atau command prompt untuk membuat dan beralih ke branch baru. Contoh: git checkout -b jurusan_branch
Tambahkan atribut jurusan pada berkas README.md. Contoh:
Nama : Pak Bepe\n\nNPM : 2201234567\n\nKelas : PBP A\n\nHobi : Tidur\n\nJurusan : Ilmu Sistem Informasi Komputer\n
Menyimpan Perubahan dan Push ke GitHub
Setelah menambahkan atribut jurusan, simpan berkas tersebut.
Lakukan add, commit, dan push ke GitHub dengan menjalankan perintah yang sudah kamu kuasai sebelumnya.
Jalankan perintah git push -u origin <NAMA_BRANCH>. Pastikan untuk mengganti <NAMA_BRANCH> sesuai dengan nama branch baru yang telah dibuat.
Menggabungkan Branch Menggunakan Pull Request
Buka kembali halaman repositori kamu pada GitHub.
Secara otomatis, pop-up dengan tombol Compare & pull request akan muncul. Jika tidak, alternatifnya adalah dengan menekan tombol Pull Request dan kemudian memilih opsi New pull request.
Setelah itu, GitHub akan membandingkan perubahan yang ada di kedua branch yang ingin digabungkan.
Apabila tidak terdapat konflik, tekan tombol Merge pull request yang akan menggabungkan perubahan dari branch yang ingin digabungkan ke dalam branch utama (main).
Dengan melakukan langkah di atas, semua perubahan dari kedua branch akan diintegrasikan ke dalam branch utama, menciptakan kesatuan antara perubahan tersebut.
Catatan:
Jika kamu ingin berpindah antar branch yang sudah ada, jalankan git checkout <NAMA_BRANCH> pada terminal. Flag -b pada perintah sebelum-sebelumnya digunakan untuk membuat branch baru dan beralih ke branch tersebut dalam satu langkah.
Konflik terjadi ketika perubahan yang dilakukan pada satu branch bertabrakan dengan perubahan yang dilakukan pada branch lain. Misalnya, jika dua pengembang mengubah bagian yang sama dari berkas yang sama dalam waktu bersamaan, Git tidak dapat dengan otomatis memutuskan perubahan mana yang harus diterapkan.
Jika terdapat konflik atau perubahan yang saling bertabrakan, platform ini akan meminta kamu untuk menentukan perubahan mana yang sebaiknya diambil.
Penting untuk memahami konsep branching dalam Git, karena ini memungkinkan pengembangan yang terorganisir dan terpisah, sebelum semua perubahan dikombinasikan kembali ke dalam kode utama.
"},{"location":"tutorial/tutorial-0/#tutorial-instalasi-django-dan-inisiasi-proyek-django","title":"Tutorial: Instalasi Django dan Inisiasi Proyek Django","text":"
Django adalah kerangka kerja (framework) yang populer untuk pengembangan aplikasi web dengan bahasa pemrograman Python. Dalam tutorial ini, kamu akan mempelajari langkah-langkah instalasi Django dan inisiasi proyek demo sebagai starter.
"},{"location":"tutorial/tutorial-0/#langkah-1-membuat-direktori-dan-mengaktifkan-virtual-environment","title":"Langkah 1: Membuat Direktori dan Mengaktifkan Virtual Environment","text":"
Buat direktori baru dengan nama book-tracker dan masuk ke dalamnya.
Di dalam direktori tersebut, buka command prompt (Windows) atau terminal shell (Unix).
Buat virtual environment dengan menjalankan perintah berikut.
python -m venv env\n
Virtual environment ini berguna untuk mengisolasi package serta dependencies dari aplikasi agar tidak bertabrakan dengan versi lain yang ada pada komputermu. Kamu dapat mengaktifkan virtual environment dengan perintah berikut.
Windows:
env\\Scripts\\activate\n
Unix (Mac/Linux):
source env/bin/activate\n
Virtual environment akan aktif dan ditandai dengan (env) di baris input terminal.
"},{"location":"tutorial/tutorial-0/#langkah-2-menyiapkan-dependencies-dan-membuat-proyek-django","title":"Langkah 2: Menyiapkan Dependencies dan Membuat Proyek Django","text":"
Dependencies adalah komponen atau modul yang diperlukan oleh suatu perangkat lunak untuk berfungsi, termasuk library, framework, atau package. Hal tersebut memungkinkan pengembang memanfaatkan kode yang telah ada, mempercepat pengembangan, tetapi juga memerlukan manajemen yang hati-hati untuk memastikan kompatibilitas versi yang tepat. Penggunaan virtual environment membantu mengisolasi dependencies antara proyek-proyek yang berbeda.
Di dalam direktori yang sama, buat berkas requirements.txt dan tambahkan beberapa dependencies.
Lakukan instalasi terhadap dependencies yang ada dengan perintah berikut. Jangan lupa jalankan virtual environment terlebih dahulu sebelum menjalankan perintah berikut.
pip install -r requirements.txt\n
Buat proyek Django bernama book_tracker dengan perintah berikut.
django-admin startproject book_tracker .\n
Pastikan karakter . tertulis di akhir perintah
"},{"location":"tutorial/tutorial-0/#langkah-3-konfigurasi-proyek-dan-menjalankan-server","title":"Langkah 3: Konfigurasi Proyek dan Menjalankan Server","text":"
Tambahkan * pada ALLOWED_HOSTS di settings.py untuk keperluan deployment:
...\nALLOWED_HOSTS = [\"*\"]\n...\n
Dalam konteks deployment, ALLOWED_HOSTS berfungsi sebagai daftar host yang diizinkan untuk mengakses aplikasi web. Dengan menetapkan nilai [\"*\"], kamu mengizinkan akses dari semua host, yang akan memungkinkan aplikasi diakses secara luas. Namun, perlu diingat bahwa pengaturan ini harus digunakan dengan bijak dan hanya dalam situasi tertentu, seperti saat melakukan uji coba atau tahap awal pengembangan.
Pastikan bahwa berkas manage.py ada pada direktori yang aktif pada terminal kamu saat ini. Jalankan server Django dengan perintah:
Windows:
python manage.py runserver\n
Unix:
python3 manage.py runserver\n
Buka http://localhost:8000 pada peramban web untuk melihat animasi roket sebagai tanda aplikasi Django kamu berhasil dibuat.
"},{"location":"tutorial/tutorial-0/#langkah-4-menghentikan-server-dan-menonaktifkan-virtual-environment","title":"Langkah 4: Menghentikan Server dan Menonaktifkan Virtual Environment","text":"
Untuk menghentikan server, tekan Ctrl+C (Windows/Linux) atau Control+C (Mac) pada terminal.
Nonaktifkan virtual environment dengan perintah:
deactivate\n
Selamat! Kamu telah berhasil membuat aplikasi Django dari awal.
"},{"location":"tutorial/tutorial-0/#tutorial-unggah-proyek-ke-repositori-github","title":"Tutorial: Unggah Proyek ke Repositori GitHub","text":"
Buatlah repositori GitHub baru bernama book-tracker dengan visibilitas public.
Inisiasi direktori lokal book-tracker sebagai repositori Git.
Hint: Ingat kembali tahap tutorial sebelumnya
Tambahkan Berkas .gitignore
Tambahkan berkas .gitignore dan isilah berkas tersebut dengan teks berikut.
# Django\n*.log\n*.pot\n*.pyc\n__pycache__\ndb.sqlite3\nmedia\n\n# Backup files\n*.bak\n\n# If you are using PyCharm\n# User-specific stuff\n.idea/**/workspace.xml\n.idea/**/tasks.xml\n.idea/**/usage.statistics.xml\n.idea/**/dictionaries\n.idea/**/shelf\n\n# AWS User-specific\n.idea/**/aws.xml\n\n# Generated files\n.idea/**/contentModel.xml\n\n# Sensitive or high-churn files\n.idea/**/dataSources/\n.idea/**/dataSources.ids\n.idea/**/dataSources.local.xml\n.idea/**/sqlDataSources.xml\n.idea/**/dynamic.xml\n.idea/**/uiDesigner.xml\n.idea/**/dbnavigator.xml\n\n# Gradle\n.idea/**/gradle.xml\n.idea/**/libraries\n\n# File-based project format\n*.iws\n\n# IntelliJ\nout/\n\n# JIRA plugin\natlassian-ide-plugin.xml\n\n# Python\n*.py[cod]\n*$py.class\n\n# Distribution / packaging\n.Python build/\ndevelop-eggs/\ndist/\ndownloads/\neggs/\n.eggs/\nlib/\nlib64/\nparts/\nsdist/\nvar/\nwheels/\n*.egg-info/\n.installed.cfg\n*.egg\n*.manifest\n*.spec\n\n# Installer logs\npip-log.txt\npip-delete-this-directory.txt\n\n# Unit test / coverage reports\nhtmlcov/\n.tox/\n.coverage\n.coverage.*\n.cache\n.pytest_cache/\nnosetests.xml\ncoverage.xml\n*.cover\n.hypothesis/\n\n# Jupyter Notebook\n.ipynb_checkpoints\n\n# pyenv\n.python-version\n\n# celery\ncelerybeat-schedule.*\n\n# SageMath parsed files\n*.sage.py\n\n# Environments\n.env\n.venv\nenv/\nvenv/\nENV/\nenv.bak/\nvenv.bak/\n\n# mkdocs documentation\n/site\n\n# mypy\n.mypy_cache/\n\n# Sublime Text\n*.tmlanguage.cache\n*.tmPreferences.cache\n*.stTheme.cache\n*.sublime-workspace\n*.sublime-project\n\n# sftp configuration file\nsftp-config.json\n\n# Package control specific files Package\nControl.last-run\nControl.ca-list\nControl.ca-bundle\nControl.system-ca-bundle\nGitHub.sublime-settings\n\n# Visual Studio Code\n.vscode/*\n!.vscode/settings.json\n!.vscode/tasks.json\n!.vscode/launch.json\n!.vscode/extensions.json\n.history\n
Berkas .gitignore adalah sebuah berkas konfigurasi yang digunakan dalam repositori Git untuk menentukan berkas-berkas dan direktori-direktori yang harus diabaikan oleh Git.
Berkas-berkas yang tercantum di dalam .gitignore tidak akan dimasukkan ke dalam versi kontrol Git.
Berkas ini perlu dibuat karena terkadang ada berkas-berkas yang tidak perlu dilacak oleh Git, seperti berkas-berkas yang dihasilkan oleh proses kompilasi, berkas sementara, atau berkas konfigurasi pribadi.
Lakukan add, commit, dan push dari direktori repositori lokal.
Catatan:
Repositori book-tracker yang baru saja kamu buat akan menjadi landasan untuk tutorial-tutorial berikutnya. Repositori ini akan terus digunakan dan berkembang seiring tutorial yang kamu ikuti.
Pada akhir semester, kamu akan melihat bahwa repositori tutorial ini telah berkembang menjadi aplikasi yang utuh, buatan kamu sendiri. Sehingga, kamu bisa saja memasukkan ini ke dalam portofiolio kamu!
Oleh karena itu, pastikan kamu mengelola repositori ini dengan baik dan mengikuti tutorial-tutorial selanjutnya untuk mengembangkan kemampuan kamu dalam pemrograman berbasis platform.
Selamat! Kamu sudah menyelesaikan tutorial tentang penggunaan Git, GitHub, instalasi IDE, dan pengembangan proyek dengan Django.
Pesan tambahan, pastikan kamu memahami setiap kode yang kamu tulis, ya. Jangan sampai hanya asal copy-paste tanpa memahaminya terlebih dahulu. Apabila nanti kamu mengalami kesulitan, jangan ragu untuk bertanya ke asisten dosen ataupun teman. Semangat terus dalam menjalani perkuliahan PBP selama satu semester ke depan, dan jangan lupa untuk menikmati setiap prosesnya. Good luck!
Tutorial ini dikembangkan berdasarkan PBP Ganjil 2024 yang ditulis oleh Tim Pengajar Pemrograman Berbasis Platform 2024. Segala tutorial serta instruksi yang dicantumkan pada repositori ini dirancang sedemikian rupa sehingga mahasiswa yang sedang mengambil mata kuliah Pemrograman Berbasis Platform dapat menyelesaikan tutorial saat sesi lab berlangsung.
"},{"location":"tutorial/tutorial-1/","title":"Tutorial 1: Pengenalan Aplikasi Django dan Model-View-Template (MVT) pada Django","text":"
Pemrograman Berbasis Platform (CSGE602022) \u2014 diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Genap 2023/2024
Setelah menyelesaikan tutorial ini, mahasiswa diharapkan untuk dapat:
Mengerti konsep MVT pada aplikasi Django
Mengerti bagaimana alur Django menampilkan sebuah halaman HTML
Mengerti konfigurasi routing yang ada pada urls.py
Memahami kaitan models, views dan template pada Django
Memahami pembuatan unit test pada framework Django
"},{"location":"tutorial/tutorial-1/#ringkasan-hasil-tutorial-0","title":"Ringkasan Hasil Tutorial 0","text":"
Untuk membantumu mengerjakan tutorial 1 dengan baik, kami mengharapkan hasil pengerjaan tutorial 0 sebagai berikut.
Pada komputer lokal, terdapat direktori utama book-tracker yang telah diinisiasi sebagai repositori lokal.
Pada direktori utama book-tracker tersebut, terdapat beberapa berkas dan subdirektori berikut.
Subdirektori env.
Subdirektori proyek book_tracker. Berbeda dengan direktori utama, subdirektori ini terbentuk setelah menjalankan perintah
django-admin startproject book_tracker .\n
Berkas .gitignore.
Berkas manage.py.
Berkas requirements.txt.
(Opsional) Berkas db.sqlite3.
Struktur proyek book-tracker pada direktori lokal adalah sebagai berikut.
Pada repositori GitHub, pastikan repositori book-tracker memiliki berkas dan direktori berikut.
Direktori proyek book_tracker. Direktori ini hasil menjalankan perintah
django-admin startproject book_tracker .\n
Berkas .gitignore.
Berkas manage.py.
Berkas requirements.txt.
Struktur proyek book-tracker pada repositori GitHub adalah sebagai berikut.
"},{"location":"tutorial/tutorial-1/#pengenalan-mengenai-konsep-mvt","title":"Pengenalan Mengenai Konsep MVT","text":"
Dalam dunia pengembangan web, terdapat berbagai konsep dan arsitektur yang membantu dalam merancang dan mengembangkan aplikasi. Salah satu konsep yang umum digunakan adalah MVT (Model-View-Template).
"},{"location":"tutorial/tutorial-1/#apa-itu-konsep-mvt","title":"Apa Itu Konsep MVT?","text":"
MVT adalah singkatan dari Model-View-Template. MVT adalah sebuah konsep arsitektur yang digunakan dalam pengembangan web untuk memisahkan komponen-komponen utama dari sebuah aplikasi. Konsep ini memungkinkan pengembang web untuk mengorganisasi dan mengelola kode dengan lebih terstruktur.
"},{"location":"tutorial/tutorial-1/#apa-itu-model","title":"Apa Itu Model?","text":"
Model merupakan komponen dalam konsep MVT yang bertanggung jawab untuk mengatur dan mengelola data dari aplikasi. Model mewakili struktur data dan logika aplikasi yang berada di belakang tampilan. Model menghubungkan aplikasi dengan basis data dan mengatur interaksi dengan data tersebut.
"},{"location":"tutorial/tutorial-1/#apa-itu-view","title":"Apa Itu View?","text":"
View merupakan komponen yang menangani logika presentasi dalam konsep MVT. View mengontrol bagaimana data yang dikelola oleh model akan ditampilkan kepada pengguna. Dalam konteks MVT, view berperan sebagai pengatur tampilan dan mengambil data dari model untuk disajikan kepada pengguna.
"},{"location":"tutorial/tutorial-1/#apa-itu-template","title":"Apa Itu Template?","text":"
Template adalah komponen yang berfungsi untuk mengatur tampilan atau antarmuka pengguna. Template memisahkan kode HTML dari logika aplikasi. Dalam MVT, template digunakan untuk merancang tampilan yang akhirnya akan diisi dengan data dari model melalui view.
"},{"location":"tutorial/tutorial-1/#hubungan-antara-komponen-komponen-mvt","title":"Hubungan Antara Komponen-komponen MVT","text":"
Secara ringkas, konsep MVT berjalan dalam kerangka berikut:
Model: Menyimpan data dan logika aplikasi.
View: Menampilkan data dari model dan menghubungkannya dengan template.
MVT memisahkan tugas antara logika aplikasi, tampilan, dan data, sehingga memungkinkan pengembang untuk bekerja pada setiap komponen secara terpisah.
Kode yang Mudah Dikelola
Dengan pemisahan tugas yang jelas, kode menjadi lebih terorganisir dan mudah dikelola.
Penggunaan Kembali
Kode dapat digunakan kembali dalam berbagai bagian aplikasi yang berbeda.
Skalabilitas
Struktur MVT mendukung skalabilitas dengan memungkinkan pengembangan paralel pada setiap komponen.
Catatan:
Konsep MVT sangat terkait dengan framework Django dalam pengembangan web dengan bahasa pemrograman Python.
Dalam praktiknya, pemahaman yang baik mengenai konsep MVT akan membantu kamu dalam merancang aplikasi web yang lebih terstruktur dan mudah dikelola.
"},{"location":"tutorial/tutorial-1/#tutorial-membuat-aplikasi-django-beserta-konfigurasi-model","title":"Tutorial: Membuat Aplikasi Django beserta Konfigurasi Model","text":"
Dalam tutorial ini, akan dijelaskan mengenai konsep aplikasi dan proyek dalam Django.
Apa Itu Proyek dan Aplikasi dalam Django?
Proyek (Project) adalah keseluruhan proyek web yang kamu bangun dengan menggunakan Django. Proyek berisi berbagai aplikasi yang berfungsi secara bersama untuk menciptakan situs web atau aplikasi web yang lengkap.
Aplikasi (Apps) adalah unit modular yang melakukan tugas-tugas spesifik dalam suatu proyek Django. Setiap aplikasi dapat memiliki model, tampilan, template, dan URL yang terkait dengannya. Aplikasi memungkinkanmu untuk membagi fungsionalitas proyek menjadi bagian-bagian terpisah yang dapat dikelola secara independen.
Sebelum dimulai, kamu perlu mengingat kembali bahwa direktori utama adalah direktori terluar, sedangkan direktori proyek adalah direktori di dalam direktori utama. Perlu diingat bahwa keduanya memiliki nama yang hampir sama. Direktori utama memiliki nama book-tracker, sementara itu direktori proyek memiliki nama book_tracker. Perbedaan hanya terletak pada penggunaan dash (-) dan underscore (_).
Sebelum memulai, pastikan kamu berada di direktori utama book-tracker yang telah dibuat pada tutorial sebelumnya.
Di dalam direktori ini, kamu akan melanjutkan pengembangan proyek Django.
Buka terminal atau command prompt dan pastikan direktori kerja kamu adalah direktori utama book-tracker.
Aktifkan virtual environment yang telah dibuat sebelumnya. Jalankan perintah berikut sesuai dengan sistem operasi perangkat kamu.
Windows:
env\\Scripts\\activate.bat\n
Unix (Linux & Mac OS):
source env/bin/activate\n
"},{"location":"tutorial/tutorial-1/#langkah-2-membuat-aplikasi-main-dalam-proyek-book-tracker","title":"Langkah 2: Membuat Aplikasi main dalam Proyek Book Tracker","text":"
Kamu akan membuat aplikasi baru bernama main dalam proyek book tracker.
Jalankan perintah berikut untuk membuat aplikasi baru.
python manage.py startapp main\n
Setelah perintah di atas dijalankan, akan terbentuk direktori baru dengan nama main yang akan berisi struktur awal untuk aplikasimu.
Mungkin kamu cukup bingung dengan istilah direktori utama, direktori proyek, atau direktori aplikasi. Akan tetapi, seiring berjalannya waktu, kamu pasti bisa!
Daftarkan aplikasi main ke dalam proyek.
Buka berkas settings.py di dalam direktori proyek book_tracker.
Temukan variabel INSTALLED_APPS.
Tambahkan 'main' ke dalam daftar aplikasi yang ada.
INSTALLED_APPS = [\n ...,\n 'main',\n ...\n]\n
Dengan melakukan langkah-langkah tersebut, kamu telah mendaftarkan aplikasi main ke dalam proyek book tracker kamu sehingga proyekmu sudah mengenali bahwa terdapat aplikasi main yang dapat dijalankan.
Kamu akan membuat template main.html di dalam direktori baru bernama templates pada aplikasi main. Template ini akan digunakan untuk menampilkan data book tracker kamu.
Saat ini, aplikasi book tracker belum menampilkan data apapun. Data akan ditampilkan pada tutorial selanjutnya.
"},{"location":"tutorial/tutorial-1/#langkah-1-membuat-dan-mengisi-berkas-mainhtml","title":"Langkah 1: Membuat dan Mengisi Berkas main.html","text":"
Sebelum mulai, mari pahami secara singkat mengenai HTML. HTML (Hypertext Markup Language) adalah penanda bahasa yang digunakan untuk membuat struktur dan tampilan konten pada halaman web.
Hint: Kamu akan mempelajari HTML lebih lanjut di tutorial 4.
Buat direktori baru bernama templates di dalam direktori aplikasi main.
Di dalam direktori templates, buat berkas baru bernama main.html dengan isi sebagai berikut. Gantilah nilai yang sesuai dengan data kamu.
<h1>Book Tracker Page</h1>\n\n<h5>Name:</h5>\n<p>Pak Bepe</p>\n<!-- Ubahlah sesuai dengan nama kamu -->\n<h5>Class:</h5>\n<p>PBP A</p>\n<!-- Ubahlah sesuai dengan kelas kamu -->\n
Buka berkas HTML di web browser.
Sebelum dihubungkan dengan aplikasi, cobalah membuka berkas main.html di web browser-mu.
Perlu dicatat bahwa pada tahap ini hanya untuk memeriksa tampilan dasar HTML dan belum terhubung dengan Django.
Berikut merupakan contoh tampilan HTML yang diharapkan.
"},{"location":"tutorial/tutorial-1/#tutorial-implementasi-model-dasar","title":"Tutorial: Implementasi Model Dasar","text":""},{"location":"tutorial/tutorial-1/#langkah-1-mengubah-berkas-modelspy-dalam-aplikasi-main","title":"Langkah 1: Mengubah Berkas models.py dalam Aplikasi main","text":"
Pada langkah ini, kamu akan mengubah berkas models.py yang terdapat di dalam direktori aplikasi main untuk mendefinisikan model baru.
Buka berkas models.py pada direktori aplikasi main.
Isi berkas models.py dengan kode berikut.
from django.db import models\n\nclass Book(models.Model):\n name = models.CharField(max_length=255)\n date_added = models.DateField(auto_now_add=True)\n page = models.IntegerField()\n description = models.TextField()\n
Penjelasan Kode:
models.Model adalah kelas dasar yang digunakan untuk mendefinisikan model dalam Django.
Book adalah nama model yang kamu definisikan.
name (nama), date_added (tanggal tambah), page (halaman), dan description (deskripsi) adalah atribut atau field pada model. Setiap field memiliki tipe data yang sesuai seperti CharField, DateField, IntegerField, dan TextField.
"},{"location":"tutorial/tutorial-1/#langkah-2-membuat-dan-mengaplikasikan-migrasi-model","title":"Langkah 2: Membuat dan Mengaplikasikan Migrasi Model","text":"
Apa itu migrasi model?
Migrasi model adalah cara Django melacak perubahan pada model basis data kamu.
Migrasi ini adalah instruksi untuk mengubah struktur tabel basis data sesuai dengan perubahan model yang didefinisikan dalam kodemu.
Bagaimana cara melakukan migrasi model?
Jalankan perintah berikut pada terminal atau command prompt di direktori utama untuk membuat migrasi model.
python manage.py makemigrations\n
makemigrations menciptakan berkas migrasi yang berisi perubahan model yang belum diaplikasikan ke dalam basis data.
Masih di direktori utama, jalankan perintah berikut untuk menerapkan migrasi ke dalam basis data lokal.
python manage.py migrate\n
migrate mengaplikasikan perubahan model yang tercantum dalam berkas migrasi ke basis data.
Setiap kali kamu melakukan perubahan pada model, seperti menambahkan atau mengubah atribut, kamu perlu melakukan migrasi untuk merefleksikan perubahan tersebut.
"},{"location":"tutorial/tutorial-1/#tutorial-menghubungkan-view-dengan-template","title":"Tutorial: Menghubungkan View dengan Template","text":"
Dalam tutorial ini, kamu akan menghubungkan view dengan template menggunakan Django. Langkah-langkah ini akan menjelaskan bagaimana membuat fungsi view show_main dalam aplikasi main dan me-render template dengan data yang telah diambil dari model.
Kamu akan mengimpor modul yang diperlukan dan membuat fungsi view show_main.
Buka berkas views.py yang terletak di dalam berkas aplikasi main.
Tambahkan baris-baris impor berikut di bagian paling atas berkas apabila belum ada.
from django.shortcuts import render\n
Penjelasan Kode:
from django.shortcuts import render berguna untuk mengimpor fungsi render dari modul django.shortcuts. Fungsi render digunakan untuk me-render tampilan HTML dengan menggunakan data yang diberikan.
def show_main(request) merupakan deklarasi fungsi show_main, yang menerima parameter request. Fungsi ini akan mengatur permintaan HTTP dan mengembalikan tampilan yang sesuai.
context adalah dictionary yang berisi data yang akan dikirimkan ke tampilan. Pada konteks ini, dua data disertakan, yaitu:
name: Data nama.
class: Data kelas.
return render(request, \"main.html\", context) berguna untuk me-render tampilan main.html dengan menggunakan fungsi render. Fungsi render mengambil tiga argumen:
request: Ini adalah objek permintaan HTTP yang dikirim oleh pengguna.
main.html: Ini adalah nama berkas template yang akan digunakan untuk me-render tampilan.
context: Ini adalah dictionary yang berisi data yang akan diteruskan ke tampilan untuk digunakan dalam penampilan dinamis.
Berkas urls.py pada proyek bertanggung jawab untuk mengatur rute URL dalam skala proyek.
Fungsi include digunakan untuk mengimpor rute URL dari aplikasi lain (dalam hal ini, dari aplikasi main) ke dalam berkas urls.py proyek.
Path URL '' akan diarahkan ke rute yang didefinisikan dalam berkas urls.py aplikasi main. Path URL dibiarkan berupa string kosong agar halaman aplikasi main dapat diakses secara langsung.
Sebagai bayangan, apabila kamu menggunakan path 'main/' pada contoh di atas, maka kamu perlu mengakses halaman http://localhost:8000/main/ untuk mengakses halaman aplikasi main. Karena path yang ditentukan adalah '', maka kamu dapat mengakses aplikasi main melalui URL http://localhost:8000/ saja.
Jalankan proyek Django dengan menjalankan perintah python manage.py runserver pada terminal atau command prompt di direktori utama.
Bukalah http://localhost:8000/ di web browser favoritmu untuk melihat halaman yang sudah kamu buat.
Dengan langkah-langkah di atas, kamu telah berhasil mengimplementasikan tampilan dasar dalam aplikasi main dan menghubungkannya dengan rute URL proyek. Pastikan kamu memahami setiap langkah dan informasi yang diberikan untuk mengaktifkan tampilan dalam proyek Django-mu
"},{"location":"tutorial/tutorial-1/#apa-bedanya-urlspy-pada-aplikasi-dan-urlspy-pada-proyek","title":"Apa bedanya urls.py pada aplikasi dan urls.py pada proyek?","text":"
Berkas urls.py pada aplikasi mengatur rute URL spesifik untuk fitur-fitur dalam aplikasi tersebut
urls.py pada proyek mengarahkan rute URL tingkat proyek dan dapat mengimpor rute URL dari berkas urls.py aplikasi-aplikasi, memungkinkan aplikasi dalam proyek Django untuk bersifat modular dan terpisah.
"},{"location":"tutorial/tutorial-1/#tutorial-pengenalan-django-unit-testing","title":"Tutorial: Pengenalan Django Unit Testing","text":"
Unit testing dapat digunakan untuk mengecek apakah kode yang dibuat bekerja sesuai dengan keinginan. Hal ini juga berguna ketika kamu melakukan perubahan kode. Dengan menggunakan tes, kamu bisa mengecek apakah perubahan yang dilakukan dapat menyebabkan perilaku yang tidak diinginkan pada aplikasi.
"},{"location":"tutorial/tutorial-1/#langkah-1-membuat-unit-test","title":"Langkah 1: Membuat Unit Test","text":"
Bukalah berkas tests.py pada direktori aplikasi main.
test_main_url_is_exist adalah tes untuk mengecek apakah path URL '' dapat diakses. Path '' artinya hanya http://localhost:8000/ tanpa path tambahan di bagian belakang URL.
test_main_using_main_template adalah tes untuk mengecek apakah halaman '' di-render menggunakan template main.html.
Jika tes berhasil, akan mengeluarkan informasi berikut.
Found 2 test(s).\n Creating test database for alias 'default'...\n System check identified no issues (0 silenced).\n ..\n ----------------------------------------------------------------------\n Ran 2 tests in 0.006s\n\n OK\n Destroying test database for alias 'default'...\n
Selamat! Kamu telah berhasil menulis Django Test dan menjalankannya.
Pada akhir tutorial ini, struktur direktori lokalmu akan terlihat seperti ini.
Huruf U menandakan bahwa terdapat berkas baru yang belum dilacak oleh Git. Huruf M menandakan bahwa terdapat berkas yang telah dilacak sebelumnya yang dimodifikasi.
Sebelum melakukan langkah ini, pastikan struktur direktori lokal sudah benar. Selanjunya, lakukan add, commit dan push untuk memperbarui repositori GitHub.
Jalankan perintah berikut untuk melakukan add, commit dan push.
Tutorial ini dikembangkan berdasarkan PBP Ganjil 2024 yang ditulis oleh Tim Pengajar Pemrograman Berbasis Platform 2023/2024. Segala tutorial serta instruksi yang dicantumkan pada repositori ini dirancang sedemikian rupa sehingga mahasiswa yang sedang mengambil mata kuliah Pemrograman Berbasis Platform dapat menyelesaikan tutorial saat sesi lab berlangsung.
"},{"location":"tutorial/tutorial-2/","title":"Tutorial 2: Form dan Data Delivery","text":"
Pemrograman Berbasis Platform (CSGE602022) \u2014 diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Genap 2023/2024
Setelah menyelesaikan tutorial ini, mahasiswa diharapkan untuk dapat:
Mengetahui XML dan JSON sebagai salah satu metode data delivery
Memahami cara kerja submisi data yang diberikan oleh pengguna menggunakan elemen form
Memahami cara mengirimkan data menggunakan format XML dan JSON
Memahami cara mengambil data spesifik berdasarkan ID
"},{"location":"tutorial/tutorial-2/#pengenalan-data-delivery","title":"Pengenalan Data Delivery","text":"
Dalam mengembangkan suatu platform, ada kalanya kita perlu mengirimkan data dari satu stack ke stack lainnya. Data yang dikirimkan bisa bermacam-macam bentuknya. Beberapa contoh format data yang umum digunakan antara lain HTML, XML, dan JSON. Implementasi data delivery dalam bentuk HTML sudah kamu pelajari pada tutorial sebelumnya. Pada tutorial ini akan diajarkan terkait XML dan JSON.
XML adalah singkatan dari eXtensible Markup Language. XML didesain menjadi self-descriptive, jadi dengan membaca XML tersebut kita bisa mengerti informasi apa yang ingin disampaikan dari data yang tertulis. XML digunakan pada banyak aplikasi web maupun mobile, yaitu untuk menyimpan dan mengirimkan data. XML hanya berisi informasi yang dibungkus di dalam tag. Kita perlu menulis program untuk mengirim, menerima, menyimpan, atau menampilkan informasi tersebut.
Dokumen XML membentuk struktur seperti tree yang dimulai dari root, lalu branch, hingga berakhir pada leaves. Dokumen XML harus mengandung sebuah root element yang merupakan parent dari elemen lainnya. Pada contoh di atas, <person> adalah root element.
Baris <?xml version=\"1.0\" encoding=\"UTF-8\"?> biasanya disebut sebagai XML Prolog. XML Prolog bersifat opsional, akan tetapi jika ada maka posisinya harus berada di awal dokumen XML. Pada dokumen XML, semua elemen wajib memiliki closing tag. Tag pada XML sifatnya case sensitive, sehingga tag <person> dianggap berbeda dengan tag <Person>.
JSON adalah singkatan dari JavaScript Object Notation. JSON didesain menjadi self-describing, sehingga JSON sangat mudah untuk dimengerti. JSON digunakan pada banyak aplikasi web maupun mobile, yaitu untuk menyimpan dan mengirimkan data. Sintaks JSON merupakan turunan dari Object JavaScript. Akan tetapi format JSON berbentuk text, sehingga kode untuk membaca dan membuat JSON banyak terdapat dibanyak bahasa pemrograman.
Data pada JSON disimpan dalam bentuk key dan value. Pada contoh di atas yang menjadi key adalah name, age, dan address. Value dapat berupa tipe data primitif (string, number, boolean) ataupun berupa objek.
Sebelum kamu memulai, serta untuk membantumu mengikuti tutorial 2 dengan baik, kami mengharapkan beberapa hasil berikut dari tutorial 1:
Struktur direktori book-tracker secara lokal adalah sebagai berikut.
Struktur repository book-tracker pada GitHub adalah sebagai berikut.
"},{"location":"tutorial/tutorial-2/#tutorial-implementasi-skeleton-sebagai-kerangka-views","title":"Tutorial: Implementasi Skeleton sebagai Kerangka Views","text":"
Sebelum kita membuat form registrasi, kita perlu membuat suatu skeleton yang berfungsi sebagai kerangka views dari situs web kita. Dengan kerangka views ini, kita dapat memastikan adanya konsistensi dalam desain situs web kita serta memperkecil kemungkinan terjadinya redundansi kode. Pada tutorial ini, kita akan membuat skeleton untuk situs web yang akan kita buat pada tutorial selanjutnya.
Buat folder templates pada root folder (direktori utama) dan buatlah sebuah berkas HTML baru bernama base.html. Berkas base.html berfungsi sebagai template dasar yang dapat digunakan sebagai kerangka umum untuk halaman web lainnya di dalam proyek. Isilah berkas base.html tersebut dengan kode berikut:
Baris-baris yang dikurung dalam {% ... %} disebut dengan template tags Django. Baris-baris inilah yang akan berfungsi untuk memuat data secara dinamis dari Django ke HTML.
Buka settings.py yang ada pada direktori proyek (book_tracker) dan carilah baris yang mengandung variabel TEMPLATES. Sesuaikan kode yang ada dengan potongan kode berikut agar berkas base.html terdeteksi sebagai berkas template.
Pada subdirektori templates yang ada pada direktori main (main/templates/), ubahlah kode berkas main.html yang telah dibuat di tutorial sebelumnya menjadi sebagai berikut.
Perhatikan bahwa kode diatas merupakan kode yang sama dengan kode pada main.html pada tutorial sebelumnya. Perbedaannya adalah pada kode diatas, kita menggunakan base.html sebagai template utama.
"},{"location":"tutorial/tutorial-2/#tutorial-membuat-form-input-data-dan-menampilkan-data-buku-pada-html","title":"Tutorial: Membuat Form Input Data dan Menampilkan Data Buku Pada HTML","text":"
Sampai saat ini, belum ada data yang ditambahkan dan dimunculkan ke dalam aplikasi. Sekarang, kita akan membuat sebuah form sederhana untuk menginput data buku pada aplikasi sehingga nantinya kamu dapat menambahkan data baru untuk ditampilkan pada halaman utama.
Buat berkas baru pada direktori main dengan nama forms.py untuk membuat struktur form yang dapat menerima data buku baru. Tambahkan kode berikut ke dalam berkas forms.py.
from django.forms import ModelForm\nfrom main.models import Book\n\nclass BookForm(ModelForm):\n class Meta:\n model = Book\n fields = [\"name\", \"page\", \"description\"]\n
Penjelasan Kode:
model = Book untuk menunjukkan model yang akan digunakan untuk form. Ketika data dari form disimpan, isi dari form akan disimpan menjadi sebuah objek Book.
fields = [\"name\", \"page\", \"description\"] untuk menunjukkan field dari model Book yang digunakan untuk form. Field date_added tidak dimasukkan ke list fields karena tanggal ditambahkan secara otomatis.
Buka berkas views.py yang ada pada folder main dan tambahkan beberapa import berikut pada bagian paling atas.
from django.shortcuts import render, redirect # Tambahkan import redirect di baris ini\nfrom main.forms import BookForm\nfrom main.models import Book\n
Masih di berkas yang sama, buat fungsi baru dengan nama create_book yang menerima parameter request. Tambahkan potongan kode di bawah ini untuk menghasilkan formulir yang dapat menambahkan data buku secara otomatis ketika data di-submit dari form.
def create_book(request):\n form = BookForm(request.POST or None)\n\n if form.is_valid() and request.method == \"POST\":\n form.save()\n return redirect('main:show_main')\n\n context = {'form': form}\n return render(request, \"create_book.html\", context)\n
Penjelasan Kode:
form = BookForm(request.POST or None) digunakan untuk membuat BookForm baru dengan memasukkan QueryDict berdasarkan input dari user pada request.POST.
form.is_valid() digunakan untuk memvalidasi isi input dari form tersebut.
form.save() digunakan untuk membuat dan menyimpan data dari form tersebut.
return redirect('main:show_main') digunakan untuk melakukan redirect ke fungsi show_main pada views aplikasi main setelah data form berhasil disimpan.
Ubahlah fungsi show_main yang sudah ada pada berkas views.py menjadi seperti berikut.
<form method=\"POST\"> digunakan untuk menandakan block untuk form dengan metode POST.
{% csrf_token %} adalah token yang berfungsi sebagai security. Token ini di-generate secara otomatis oleh Django untuk mencegah serangan berbahaya.
{{ form.as_table }} adalah template tag yang digunakan untuk menampilkan fields form yang sudah dibuat pada forms.py sebagai table.
<input type=\"submit\" value=\"Add Book\"/> digunakan sebagai tombol submit untuk mengirimkan request ke view create_book(request).
Buka main.html dan tambahkan kode berikut di dalam {% block content %} untuk menampilkan data produk dalam bentuk table serta tombol \"Add New Book\" yang akan redirect ke halaman form.
...\n<table>\n <tr>\n <th>Name</th>\n <th>Page</th>\n <th>Description</th>\n <th>Date Added</th>\n </tr>\n\n {% comment %} Berikut cara memperlihatkan data produk di bawah baris ini\n {%endcomment %} {% for book in books %}\n <tr>\n <td>{{book.name}}</td>\n <td>{{book.page}}</td>\n <td>{{book.description}}</td>\n <td>{{book.date_added}}</td>\n </tr>\n {% endfor %}\n</table>\n\n<br />\n\n<a href=\"{% url 'main:create_book' %}\">\n <button>Add New Book</button>\n</a>\n{% endblock content %}\n
Jalankan proyek Django-mu dengan perintah python manage.py runserver dan bukalah http://localhost:8000/ di browser favoritmu. Coba tambahkan beberapa data produk baru dan seharusnya kamu dapat melihat data yang ditambahkan pada halaman utama aplikasi.
"},{"location":"tutorial/tutorial-2/#tutorial-mengembalikan-data-dalam-bentuk-xml","title":"Tutorial Mengembalikan Data dalam Bentuk XML","text":"
Buka views.py yang ada pada folder main dan tambahkan import HttpResponse dan Serializer pada bagian paling atas.
from django.http import HttpResponse\nfrom django.core import serializers\n
Buatlah sebuah fungsi baru yang menerima parameter request dengan nama show_xml dan buatlah sebuah variabel di dalam fungsi tersebut yang menyimpan hasil query dari seluruh data yang ada pada Book.
def show_xml(request):\n data = Book.objects.all()\n
Tambahkan return function berupa HttpResponse yang berisi parameter data hasil query yang sudah diserialisasi menjadi XML dan parameter content_type=\"application/xml\".
def show_xml(request):\n data = Book.objects.all()\n return HttpResponse(serializers.serialize(\"xml\", data), content_type=\"application/xml\")\n
Penjelasan Kode:
serializers digunakan untuk translate objek model menjadi format lain seperti dalam fungsi ini adalah XML.
Buka urls.py yang ada pada folder main dan import fungsi yang sudah kamu buat tadi.
from main.views import show_main, create_book, show_xml\n
Tambahkan path url ke dalam urlpatterns untuk mengakses fungsi yang sudah diimpor tadi.
Jalankan proyek Django-mu dengan perintah python manage.py runserver dan bukalah http://localhost:8000/xml/ di browser favoritmu untuk melihat hasilnya.
"},{"location":"tutorial/tutorial-2/#tutorial-mengembalikan-data-dalam-bentuk-json","title":"Tutorial: Mengembalikan Data dalam Bentuk JSON","text":"
Buka views.py yang ada pada folder main dan buatlah sebuah fungsi baru yang menerima parameter request dengan nama show_json dengan sebuah variabel di dalamnya yang menyimpan hasil query dari seluruh data yang ada pada Book.
def show_json(request):\n data = Book.objects.all()\n
Tambahkan return function berupa HttpResponse yang berisi parameter data hasil query yang sudah diserialisasi menjadi JSON dan parameter content_type=\"application/json\".
def show_json(request):\n data = Book.objects.all()\n return HttpResponse(serializers.serialize(\"json\", data), content_type=\"application/json\")\n
Buka urls.py yang ada pada folder main dan import fungsi yang sudah kamu buat tadi.
from main.views import show_main, create_book, show_xml, show_json\n
Tambahkan path url ke dalam urlpatterns untuk mengakses fungsi yang sudah diimpor tadi.
Jalankan proyek Django-mu dengan perintah python manage.py runserver dan bukalah http://localhost:8000/json/ (sesuaikan dengan path url yang dibuat) di browser favoritmu untuk melihat hasilnya.
"},{"location":"tutorial/tutorial-2/#tutorial-mengembalikan-data-berdasarkan-id-dalam-bentuk-xml-dan-json","title":"Tutorial: Mengembalikan Data Berdasarkan ID dalam Bentuk XML dan JSON","text":"
Buka views.py yang ada pada folder main dan buatlah dua fungsi baru yang menerima parameter _request_ dan id dengan nama show_xml_by_id dan show_json_by_id.
Buatlah sebuah variabel di dalam fungsi tersebut yang menyimpan hasil query dari data dengan id tertentu yang ada pada Book.
data = Book.objects.filter(pk=id)\n
Tambahkan return function berupa HttpResponse yang berisi parameter data hasil query yang sudah diserialisasi menjadi JSON atau XML dan parameter content_type dengan value \"application/xml\" (untuk format XML) atau \"application/json\" (untuk format JSON).
XML
def show_xml_by_id(request, id):\n data = Book.objects.filter(pk=id)\n return HttpResponse(serializers.serialize(\"xml\", data), content_type=\"application/xml\")\n
JSON
def show_json_by_id(request, id):\n data = Book.objects.filter(pk=id)\n return HttpResponse(serializers.serialize(\"json\", data), content_type=\"application/json\")\n
Buka urls.py yang ada pada folder main dan import fungsi yang sudah kamu buat tadi.
from main.views import show_main, create_book, show_xml, show_json, show_xml_by_id, show_json_by_id\n
Tambahkan path URL ke dalam urlpatterns untuk mengakses fungsi yang sudah diimpor tadi.
Jalankan proyek Django-mu dengan perintah python manage.py runserver dan bukalah http://localhost:8000/xml/[id]/ atau http://localhost:8000/json/[id]/ di browser favoritmu untuk melihat hasilnya.
Catatan: Sesuaikan [id] pada URL di atas dengan id objek yang ingin dilihat.
"},{"location":"tutorial/tutorial-2/#tutorial-penggunaan-postman-sebagai-data-viewer","title":"Tutorial: Penggunaan Postman Sebagai Data Viewer","text":"
Pastikan server kamu sudah berjalan dengan perintah python manage.py runserver.
Buka Postman dan buatlah sebuah request baru dengan method GET dan url http://localhost:8000/xml/ atau http://localhost:8000/json/ untuk mengetes apakah data terkirimkan dengan baik.
Panduan Instalasi Postman dapat dilihat pada Laman Resmi Postman.
Contoh:
Klik tombol Send untuk mengirimkan request tersebut.
Kamu akan melihat hasil response dari request tersebut pada bagian bawah Postman.
Kamu juga dapat mengubah url menjadi http://localhost:8000/xml/[id] atau http://localhost:8000/json/[id] untuk mengetes fungsi pengambilan data produk berdasarkan ID.
Setelah menyelesaikan tutorial ini, tampilan halaman web kamu seharusnya terlihat seperti ini.
Pada akhir tutorial ini, struktur direktori lokalmu akan terlihat seperti ini.
Sebelum melakukan langkah ini, pastikan struktur direktori lokal sudah benar. Selanjutnya, lakukan add, commit dan push untuk memperbarui repositori GitHub.
Jalankan perintah berikut untuk melakukan add, commit dan push.
Tutorial ini dikembangkan berdasarkan PBP Ganjil 2024 yang ditulis oleh Tim Pengajar Pemrograman Berbasis Platform 2024. Segala tutorial serta instruksi yang dicantumkan pada repositori ini dirancang sedemikian rupa sehingga mahasiswa yang sedang mengambil mata kuliah Pemrograman Berbasis Platform dapat menyelesaikan tutorial saat sesi lab berlangsung.
"},{"location":"tutorial/tutorial-3/","title":"Tutorial 3: Autentikasi, Session, dan Cookies","text":"
Pemrograman Berbasis Platform (CSGE602022) \u2014 diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Genap 2023/2024
HTTP (HyperText Transfer Protocol) adalah protokol yang digunakan untuk berkomunikasi antara client dan server. HTTP bersifat stateless yang berarti setiap transaksi/aktivitas yang dilakukan dianggap sebagai transaksi/aktivitas yang benar-benar baru, sehingga tidak ada data sebelumnya yang disimpan untuk transaksi/aktivitas saat ini.
Beberapa konsep dasar mengenai HTTP:
Client/Server: Interaksi dilakukan antar client/server. Klien adalah pihak yang melakukan request dan server adalah pihak yang memberikan response.
Stateless: Setiap aktivitas (request/response) bersifat independen, tidak tersimpan pada aktivitas terdahulu.
OSI Layer/Model: Model Open Systems Interconnection (OSI) menjelaskan 7 lapisan yang digunakan sistem komputer untuk berkomunikasi melalui jaringan. Model 7-layer OSI terdiri dari Application Layer, Presentation Layer, Session Layer, Transport Layer, Network Layer, Data Link Layer, dan Physical Layer.
Application Layer: Pada OSI Model yang disinggung di atas, website berjalan pada application layer. Sedangkan, proses request/response terjadi pada transport Layer yang umumnya menggunakan protokol TCP yang menentukan bagaimana data akan dikirim. Application Layer tidak peduli apa yang dilakukan oleh transport Layer (bagaimana data dikirim, diolah, dsb) karena application layer hanya berfokus kepada request dan response.
Lapisan OSI lainnya akan diajarkan pada mata kuliah Jaringan Komputer/Jaringan Komunikasi Data. Kamu dapat mencarinya sendiri jika kamu penasaran. \ud83d\ude09
Client Actions Method: Terdapat metode-metode yang digunakan oleh client saat melakukan request. Contoh: GET, POST, PUT, DELETE, dll. Penjelasan lebih detail dapat dibaca di sini.
Server Status Code: Merupakan status kode yang diberikan oleh server terhadap suatu request pada sebuah halaman web. Contoh: 200 (OK), 404 (Page Not Found), 500 (Internal Server Error), dsb. Penjelasan lebih detail dapat dibaca di sini.
Headers: Merupakan informasi kecil yang dikirim bersamaan dengan request dan response. Informasi-informasi tersebut berguna sebagai data tambahan yang digunakan untuk memproses request/response. Contoh: Pada headers, terdapat content-type:json. Artinya, tipe konten yang diminta/dikirim adalah json. Headers juga menyimpan data cookies.
"},{"location":"tutorial/tutorial-3/#pengenalan-cookies-session","title":"Pengenalan Cookies & Session","text":"
Semua komunikasi antara klien dan server dilakukan melalui protokol HTTP, di mana HTTP merupakan stateless protocol. Artinya state yang satu dengan yang lain tidak berhubungan (independen). Hal ini mengharuskan komputer klien yang menjalankan browser untuk membuat koneksi TCP ke server setiap kali melakukan request.
Tanpa adanya koneksi persisten antara klien dan server, software pada setiap sisi (endpoint) tidak dapat bergantung hanya pada koneksi TCP untuk melakukan holding state atau holding session state.
"},{"location":"tutorial/tutorial-3/#apa-yang-dimaksud-dengan-holding-state","title":"Apa yang dimaksud dengan holding state?","text":"
Sebagai contoh, kamu ingin mengakses suatu halaman A pada suatu web yang mensyaratkan pengaksesnya sudah login ke dalam web. Kemudian kamu login ke web tersebut dan berhasil membuka halaman A. Saat ingin pindah ke halaman B pada web yang sama, tanpa adanya suatu proses holding state maka kamu akan diminta untuk login kembali. Begitu yang akan terjadi setiap kali kamu mengakses halaman yang berbeda padahal masih pada web yang sama.
Proses memberitahu \"siapa\" yang sedang login dan menyimpan data ini dikenal sebagai bentuk dialog antara klien-server dan merupakan dasar session - a semi-permanent exchange of information. Merupakan hal yang sulit untuk membuat HTTP melakukan holding state (karena HTTP merupakan stateless protocol). Oleh karena itu, dibutuhkan teknik untuk mengatasi masalah tersebut, yaitu Cookie dan Session.
"},{"location":"tutorial/tutorial-3/#cara-melakukan-holding-state","title":"Cara melakukan holding state?","text":"
Salah satu cara yang paling banyak digunakan untuk melakukan holding state adalah dengan menggunakan session ID yang disimpan sebagai cookie pada komputer klien. Session ID dapat dianggap sebagai suatu token (barisan karakter) untuk mengenali session yang unik pada aplikasi web tertentu. Daripada menyimpan semua jenis informasi sebagai cookies pada klien seperti username, nama, dan password, hanya Session ID yang disimpan.
Session ID ini kemudian dapat dipetakan ke suatu struktur data pada sisi web server. Pada struktur data tersebut, kamu dapat menyimpan semua informasi yang kamu butuhkan. Pendekatan ini jauh lebih aman untuk menyimpan informasi mengenai pengguna, daripada menyimpannya pada cookie. Dengan cara ini, informasi tidak dapat disalahgunakan oleh klien atau koneksi yang mencurigakan.
Selain itu, pendekatan ini lebih \"tepat\" jika data yang akan disimpan ada banyak. Hal itu karena cookie hanya dapat menyimpan maksimal 4 KB data. Bayangkan kamu sudah login ke suatu web/aplikasi dan mendapat session ID (session identifier). Untuk dapat melakukan holding state pada HTTP yang stateless, browser biasanya mengirimkan suatu session ID ke server pada setiap request. Dengan begitu, setiap kali datang suatu request, maka server akan bereaksi (kurang lebih) \"Oh, ini orang yang tepat!\". Kemudian server akan mencari informasi state di memori server atau di database berdasarkan session ID yang didapat, lalu mengembalikan data yang diminta.
Perbedaan penting yang perlu diingat adalah data cookie disimpan pada sisi klien, sedangkan data session biasanya disimpan pada sisi server. Untuk pembahasan lebih detail mengenai stateless, stateful, cookie, dan session dapat dibaca di sini.
Berikut tabel singkat yang menjelaskan perbedaan antara cookies, session, dan local storage secara singkat.
Cookies Local Storage Sessions Kapasitas 4 KB 5 MB 5 MB Teknologi Browser HTML4/HTML5 HTML5 HTML5 Aksesibilitas Semua window Semua window Tab yang sama Kedaluwarsa Diatur manual Selamanya Saat tab ditutup
Beberapa tautan video yang dapat memperkaya pengetahuan terkait materi ini:
Sebelum kamu memulai, serta untuk membantumu mengikuti tutorial 3 dengan baik, kami mengharapkan beberapa hasil berikut dari tutorial 2:
Struktur direktori book-tracker secara lokal adalah sebagai berikut.
Struktur repository book-tracker pada GitHub adalah sebagai berikut.
"},{"location":"tutorial/tutorial-3/#tutorial-membuat-fungsi-dan-form-registrasi","title":"Tutorial: Membuat Fungsi dan Form Registrasi","text":"
Pada tutorial sebelumnya, kita sudah mencoba membuat sebuah form untuk menambahkan suatu buku. Bagaimana? Mudah kan? Pada tutorial ini kita akan membuat halaman utama (main) menjadi restricted dengan cara membuat akun untuk pengguna. Sehingga, pengguna yang ingin mengakses halaman utama main harus melakukan login terlebih dahulu agar mendapatkan akses.
Buka views.py yang ada pada subdirektori main pada proyek kamu. Tambahkan import redirect, UserCreationForm, dan messages pada bagian paling atas.
from django.shortcuts import redirect\nfrom django.contrib.auth.forms import UserCreationForm\nfrom django.contrib import messages\n
Penjelasan Kode:
UserCreationForm adalah impor formulir bawaan yang memudahkan pembuatan formulir pendaftaran pengguna dalam aplikasi web. Dengan formulir ini, pengguna baru dapat mendaftar dengan mudah di situs web Anda tanpa harus menulis kode dari awal.
Tambahkan fungsi register di bawah ini ke dalam views.py. Fungsi ini berfungsi untuk menghasilkan formulir registrasi secara otomatis dan menghasilkan akun pengguna ketika data di-submit dari form.
def register(request):\n form = UserCreationForm()\n\n if request.method == \"POST\":\n form = UserCreationForm(request.POST)\n if form.is_valid():\n form.save()\n messages.success(request, 'Your account has been successfully created!')\n return redirect('main:login')\n context = {'form':form}\n return render(request, 'register.html', context)\n
Penjelasan Kode:
form = UserCreationForm(request.POST) digunakan untuk membuat UserCreationForm baru dari yang sudah di-impor sebelumnya dengan memasukkan QueryDict berdasarkan input dari user pada request.POST.
form.is_valid() digunakan untuk memvalidasi isi input dari form tersebut.
form.save() digunakan untuk membuat dan menyimpan data dari form tersebut.
messages.success(request, 'Your account has been successfully created!') digunakan untuk menampilkan pesan kepada pengguna setelah melakukan suatu aksi.
return redirect('main:show_main') digunakan untuk melakukan redirect setelah data form berhasil disimpan.
Buatlah berkas HTML baru dengan nama register.html pada direktori main/templates. Isi dari register.html dapat kamu isi dengan template berikut.
Kita sudah menambahkan formulir registrasi akun dan membuat mekanisme register. Selanjutnya, kita akan membuat form login agar pengguna dapat melakukan autentikasi akun.
"},{"location":"tutorial/tutorial-3/#tutorial-membuat-fungsi-login","title":"Tutorial: Membuat Fungsi Login","text":"
Buka kembali views.py yang ada pada subdirektori main. Tambahkan import authenticate dan login pada bagian paling atas.
from django.contrib.auth import authenticate, login\n
Penjelasan Kode:
Singkatnya, fungsi authenticate dan login yang diimport diatas adalah fungsi bawaan Django yang dapat digunakan untuk melakukan autentikasi dan login (jika autentikasi berhasil). Selengkapnya dapat dibaca di sini.
Tambahkan fungsi login_user di bawah ini ke dalam views.py. Fungsi ini berfungsi untuk mengautentikasi pengguna yang ingin login.
def login_user(request):\n if request.method == 'POST':\n username = request.POST.get('username')\n password = request.POST.get('password')\n user = authenticate(request, username=username, password=password)\n if user is not None:\n login(request, user)\n return redirect('main:show_main')\n else:\n messages.info(request, 'Sorry, incorrect username or password. Please try again.')\n context = {}\n return render(request, 'login.html', context)\n
Penjelasan Kode:
authenticate(request, username=username, password=password) digunakan untuk melakukan autentikasi pengguna berdasarkan username dan password yang diterima dari permintaan (request) yang dikirim oleh pengguna saat login.
Buatlah berkas HTML baru dengan nama login.html pada direktori main/templates. Isi dari login.html dapat kamu isi dengan template berikut.
Kita sudah menambahkan form login akun dan membuat mekanisme login. Selanjutnya, kita akan membuat mekanisme logout dan menambahkan tombol logout pada halaman main.
"},{"location":"tutorial/tutorial-3/#tutorial-membuat-fungsi-logout","title":"Tutorial: Membuat Fungsi Logout","text":"
Buka kembali views.py yang ada pada subdirektori main. Tambahkan import logout ini pada bagian paling atas.
from django.contrib.auth import logout\n
Tambahkan fungsi di bawah ini ke dalam fungsi views.py. Fungsi ini berfungsi untuk melakukan mekanisme logout.
Buka kembali views.py yang ada pada subdirektori main dan tambahkan import login_required pada bagian paling atas.
from django.contrib.auth.decorators import login_required\n
Penjelasan Kode: Kode from django.contrib.auth.decorators import login_required digunakan untuk mengimpor sebuah decorator yang bisa mengharuskan pengguna masuk (login) terlebih dahulu sebelum dapat mengakses suatu halaman web.
Tambahkan potongan kode @login_required(login_url='/login') di atas fungsi show_main agar halaman main hanya dapat diakses oleh pengguna yang sudah login (terautentikasi).
Setelah melakukan restriksi akses halaman main, jalankan proyek Django-mu dengan perintah python manage.py runserver dan bukalah http://localhost:8000/ di browser favoritmu untuk melihat hasilnya. Seharusnya halaman yang muncul bukanlah daftar buku di halaman main, tetapi akan di-redirect ke halaman login.
"},{"location":"tutorial/tutorial-3/#tutorial-menggunakan-data-dari-cookies","title":"Tutorial: Menggunakan Data Dari Cookies","text":"
Sekarang, kita akan melihat penggunaan cookies dengan menambahkan data last login dan menampilkannya ke halaman main.
Lakukan logout terlebih dahulu apabila kamu sedang menjalankan aplikasi Django-mu.
Buka kembali views.py yang ada pada subdirektori main. Tambahkan import HttpResponseRedirect, reverse, dan datetime pada bagian paling atas.
Pada fungsi login_user, kita akan menambahkan fungsionalitas menambahkan cookie yang bernama last_login untuk melihat kapan terakhir kali pengguna melakukan login. Caranya adalah dengan mengganti kode yang ada pada blok if user is not None menjadi potongan kode berikut.
...\nif user is not None:\n login(request, user)\n response = HttpResponseRedirect(reverse(\"main:show_main\"))\n response.set_cookie('last_login', str(datetime.datetime.now()))\n return response\n...\n
Penjelasan Kode:
login(request, user) berfungsi untuk melakukan login terlebih dahulu
response = HttpResponseRedirect(reverse(\"main:show_main\")) untuk membuat response
response.set_cookie('last_login', str(datetime.datetime.now())) berfungsi untuk membuat cookie last_login dan menambahkannya ke dalam response
Perhatikan indentasi kode kamu, pastikan tidak terdapat dead code pada fungsi tersebut.
Pada fungsi show_main, tambahkan potongan kode 'last_login': request.COOKIES['last_login'] ke dalam variabel context. Berikut adalah contoh kode yang sudah diubah.
response.delete_cookie('last_login') berfungsi untuk menghapus cookie last_login saat pengguna melakukan logout.
Buka berkas main.html dan tambahkan potongan kode berikut di setelah tombol logout untuk menampilkan data last login.
...\n<h5>Sesi terakhir login: {{ last_login }}</h5>\n...\n
Silakan refresh halaman login (atau jalankan proyek Django-mu dengan perintah python manage.py runserver jika kamu belum menjalankan proyekmu) dan cobalah untuk login. Data last login kamu akan muncul di halaman main.
Jika kamu menggunakan browser Google Chrome, untuk melihat data cookie last_login, kamu dapat mengakses fitur inspect element dan membuka bagian Application/Storage. Klik bagian Cookies dan kamu dapat melihat data cookies yang tersedia. Selain last_login, kamu juga dapat melihat data sessionid dan csrftoken. Berikut adalah contoh tampilannya.
Jika kamu melakukan logout dan membuka bagian riwayat cookie, cookie yang dibuat sebelumnya akan hilang dan dibuat ulang ketika kamu login kembali.
Sebelum melanjutkan ke tutorial berikutnya, cobalah untuk membuat satu akun pada halaman web kamu.
"},{"location":"tutorial/tutorial-3/#tutorial-menghubungkan-model-book-dengan-user","title":"Tutorial: Menghubungkan Model Book dengan User","text":"
Kamu perlu mengikuti tutorial secara berurut dari awal sebelum menjalankan bagian berikut. Jika kamu tidak mengikuti tutorial secara berurut, maka kami tidak bertanggung jawab atas error di luar pembahasan tutorial yang dapat muncul dari bagian tutorial berikut.
Terakhir, kita akan menghubungkan setiap objek Book yang akan dibuat dengan pengguna yang membuatnya, sehingga pengguna yang sedang terotorisasi hanya melihat buku-buku yang telah dibuat sendiri. Untuk itu, ikuti langkah-langkah berikut:
Buka models.py yang ada pada subdirektori main dan tambahkan kode berikut pada dibawah baris kode untuk mengimpor model:
Pada model Book yang sudah dibuat, tambahkan potongan kode berikut:
class Book(models.Model):\n user = models.ForeignKey(User, on_delete=models.CASCADE)\n ...\n
Penjelasan Kode:
Potongan kode diatas berfungsi untuk menghubungkan satu buku dengan satu user melalui sebuah relationship, dimana sebuah buku pasti terasosiasikan dengan seorang user. Lebih lanjutnya terkait ForeignKey akan dipelajari pada mata kuliah Basis Data. Penjelasan lebih lanjut terkait ForeignKey pada Django dapat dilihat di sini.
Buka kembali views.py yang ada pada subdirektori main, dan ubah potongan kode pada fungsi create_book menjadi sebagai berikut:
def create_book(request):\n form = BookForm(request.POST or None)\n\n if form.is_valid() and request.method == \"POST\":\n book = form.save(commit=False)\n book.user = request.user\n book.save()\n return redirect('main:show_main')\n\n context = {'form': form}\n return render(request, \"create_book.html\", context)\n ...\n
Penjelasan Kode:
Parameter commit=False yang digunakan pada potongan kode diatas berguna untuk mencegah Django agar tidak langsung menyimpan objek yang telah dibuat dari form langsung ke database. Hal tersebut memungkinkan kita untuk memodifikasi terlebih dahulu objek tersebut sebelum disimpan ke database. Pada kasus ini, kita akan mengisi field user dengan objek User dari return value request.user yang sedang terotorisasi untuk menandakan bahwa objek tersebut dimiliki oleh pengguna yang sedang login.
Potongan kode diatas berfungsi untuk menampilkan objek Book yang terasosiasikan dengan pengguna yang sedang login. Hal tersebut dilakukan dengan menyaring seluruh objek dengan hanya mengambil Book yang dimana field user terisi dengan objek User yang sama dengan pengguna yang sedang login.
Kode request.user.username berfungsi untuk menampilkan username pengguna yang login pada halaman main.
Simpan semua perubahan, dan lakukan migrasi model dengan python manage.py makemigrations.
Seharusnya, akan muncul error saat melakukan migrasi model. Pilih 1 untuk menetapkan default value untuk field user pada semua row yang telah dibuat pada basis data.
Ketik angka 1 lagi untuk menetapkan user dengan ID 1 (yang sudah kita buat sebelumnya) pada model yang sudah ada.
Lakukan python manage.py migrate untuk mengaplikasikan migrasi yang dilakukan pada poin sebelumnya.
Jalankan proyek Django-mu dengan perintah python manage.py runserver dan bukalah http://localhost:8000/ di browser favoritmu untuk melihat hasilnya. Cobalah untuk membuat akun baru dan login dengan akun yang baru dibuat. Amatilah halaman utama, buku yang tadi telah dibuat dengan akun sebelumnya tidak akan ditampilkan di halaman pengguna akun yang baru saja kamu buat. Hal tersebut berarti kamu sudah berhasil menghubungkan objek Book dengan User yang membuatnya.
Selamat! Kamu telah menyelesaikan Tutorial 3 dengan baik. \ud83d\ude04
Setelah kamu menyelesaikan seluruh tutorial di atas, harapannya kamu sekarang lebih paham tentang penggunaan form, autentikasi, session, dan cookie pada framework Django.
Setelah menyelesaikan tutorial ini, tampilan halaman web kamu seharusnya terlihat seperti ini.
Pada akhir tutorial ini, struktur subdirektori main pada lokalmu terlihat seperti ini.
Sebelum melakukan langkah ini, pastikan struktur direktori lokal sudah benar. Selanjunya, lakukan add, commit dan push untuk memperbarui repositori GitHub.
Jalankan perintah berikut untuk melakukan add, commit dan push.
Tutorial ini dikembangkan berdasarkan PBP Ganjil 2024 yang ditulis oleh Tim Pengajar Pemrograman Berbasis Platform 2023/2024. Segala tutorial serta instruksi yang dicantumkan pada repositori ini dirancang sedemikian rupa sehingga mahasiswa yang sedang mengambil mata kuliah Pemrograman Berbasis Platform dapat menyelesaikan tutorial saat sesi lab berlangsung.
"},{"location":"tutorial/tutorial-4/","title":"Tutorial 4: Desain Web Menggunakan HTML dan CSS3 & Metode Update dan Delete pada Data","text":"
Pemrograman Berbasis Platform (CSGE602022) \u2014 diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Genap 2023/2024
HyperText Markup Language (HTML) adalah bahasa markup standar untuk dokumen agar dapat ditampilkan dalam browser web. HTML mendefinisikan struktur dari konten suatu website.
Silakan pelajari dan mencoba sendiri HTML pada referensi ini.
Perbedaan antara HTML dan HTML5 bisa kamu baca pada referensi ini.
"},{"location":"tutorial/tutorial-4/#pengenalan-css","title":"Pengenalan CSS","text":""},{"location":"tutorial/tutorial-4/#apa-itu-css","title":"Apa itu CSS?","text":"
Cascading Style Sheets (CSS) adalah bahasa yang digunakan untuk mendeskripsikan tampilan dan format dari sebuah situs web yang ditulis pada markup language (seperti HTML). CSS berguna untuk membuat tampilan situs web menjadi lebih menarik.
Untuk mempelajari perbedaan antara CSS dan CSS3 bisa kamu baca pada referensi ini.
Secara umum, CSS dapat dituliskan dalam bentuk sebagai berikut.
selector {\n properties: value;\n}\n
Silakan pelajari dan mencoba sendiri CSS pada referensi ini.
Terdapat tiga jenis cara penulisan CSS:
Inline Styles
Internal Style Sheet
External Style Sheet
Silakan pelajari tentang ketiga jenis CSS tersebut pada referensi ini.
Perlu diperhatikan, jika kamu membuat jenis External Style Sheet, kamu perlu menambahkan tag {% load staticfiles %} pada halaman HTML kamu. Contohnya seperti potongan kode di bawah ini.
Jika terdapat lebih dari satu style yang didefinisikan untuk suatu elemen, maka style yang akan diterapkan adalah yang memiliki prioritas yang lebih tinggi. Berikut ini urutan prioritasnya, nomor 1 yang memiliki prioritas paling tinggi.
Inline style
External dan internal style sheets
Browser default
"},{"location":"tutorial/tutorial-4/#static-files-pada-django","title":"Static files pada Django","text":"
Pada framework Django, terdapat file-file yang disebut dengan static files. Static files merupakan file-file pendukung HTML pada suatu situs web. Contoh static files adalah CSS, JavaScript, dan gambar.
Pengaturan untuk static files terletak pada file settings.py:
ID selector menggunakan ID pada tag sebagai selector-nya. ID bersifat unik dalam satu halaman web. ID dapat ditambahkan pada halaman template HTML.
Contoh penggunaan ID Selector pada template HTML:
<body>\n <div id=\"header\">\n <h1>Tutorial CSS Yay :D</h1>\n </div>\n ...\n</body>\n
Kemudian, kita dapat menggunakan ID tersebut sebagai selector dalam file CSS. ID selector menggunakan format #[id_name] (selalu diawali #)
#header {\n background-color: #f0f0f0;\n margin-top: 0;\n padding: 20px 20px 20px 40px;\n}\n
Class Selector
Class Selector memungkinkan kita untuk mengelompokkan elemen dengan karakteristik yang sama.
Contoh penggunaan Class Selector pada template HTML:
...\n<div id=\"main\">\n <div class=\"content_section\">\n <p class=\"date\">published: 28 September 2022</p>\n <h2><a href=\"\">Tutorial CSS ku</a></h2>\n <p id=\"content_1\">Yay ini tutorial yang gampang!</p>\n </div>\n <div class=\"content_section\">\n <p class=\"date \">published: 29 September 2022</p>\n <h2><a href=\"\">Tutorial CSS mu</a></h2>\n <p id=\"content_2\">Yay ini tutorial yang mudah!</p>\n </div>\n <div class=\"content_section\">\n <p>published: 30 September 2022</p>\n <h2><a href=\"\">Tutorial CSS semua</a></h2>\n <p id=\"content_3\">Yay ini tutorial yang tidak sulit!</p>\n </div>\n</div>\n...\n
Kemudian, kita dapat menggunakan Class tersebut sebagai selector dalam file CSS. Class selector menggunakan format .[class_name] (diawali .)
.content_section {\n background-color: #3696e1;\n margin-bottom: 30px;\n color: #000000;\n font-family: cursive;\n padding: 20px 20px 20px 40px;\n}\n
Untuk memperdalam pengetahuan mengenai CSS Selector Reference, kamu dapat membaca referensi ini.
"},{"location":"tutorial/tutorial-4/#tips-trik-css","title":"Tips & trik CSS","text":""},{"location":"tutorial/tutorial-4/#mengenal-combinator-pada-css","title":"Mengenal Combinator pada CSS","text":"
Combinator dalam CSS menghubungkan dua atau lebih selector untuk merincikan lebih lanjut elemen-elemen yang di-select.
Terdapat empat combinators pada CSS. Berikut ringkasan pemakaiannya:
Combinator Contoh pemakaian Penjelasan contoh Descendant selector (space) div p Menyeleksi semua elemen p yang merupakan keturunan dari elemen div Child selector (>) div > p Menyeleksi semua elemen p yang merupakan anak dari elemen div Adjacent sibling selector (+) div + p Menyeleksi elemen p pertama yang berada tepat setelah elemen div (harus memiliki elemen induk yang sama) General sibling selector (~) div ~ p Menyeleksi semua elemen p yang sejajar dan berada setelah elemen div
Silakan pelajari lebih lanjut mengenai combinator melalui referensi ini.
"},{"location":"tutorial/tutorial-4/#mengenal-pseudo-class-pada-css","title":"Mengenal Pseudo-class pada CSS","text":"
Pseudo-class digunakan untuk mendefinisikan state khusus dari suatu elemen. Sintaks pemakaian pseudo-class adalah sebagai berikut:
selector:pseudo-class {\n property: value;\n}\n
Beberapa contoh pseudo-class: | Pseudo-class | Mengaplikasikan style pada .. | | -------- | -------- | | :link | tautan yang belum pernah dikunjungi | | :visited | tautan yang sudah pernah dikunjungi | | :hover | saat pengguna mengarahkan kursor di atas elemen tersebut | | :active | saat elemen diaktifkan (biasanya saat pengguna mengklik elemen tersebut) | | :focus | saat elemen fokus (seperti saat pengguna mengklik input field) | | :checked | elemen yang telah dicentang | | :disabled | elemen yang telah dibuat tidak responsif (misalnya tombol yang tidak bisa diklik) |
Silakan pelajari lebih lanjut mengenai pseudo-class melalui referensi ini.
"},{"location":"tutorial/tutorial-4/#mengenal-box-model-pada-css","title":"Mengenal Box Model pada CSS","text":"
Box model pada CSS pada dasarnya merupakan suatu box yang membungkus setiap elemen HTML dan terdiri atas:
Content: isi dari box (tempat terlihatnya teks dan gambar)
Padding: mengosongkan area di sekitar konten (transparan)
Border: garis tepian yang membungkus konten dan padding-nya
Margin: mengosongkan area di sekitar border (transparan)
Silakan pelajari lebih lanjut mengenai margin, border, dan padding melalui referensi ini.
Pada bidang pengembangan web, terdapat banyak framework CSS yang sering digunakkan. Fungsi sebuah framework adalah untuk mempermudah pekerjaan programmer pada saat mengerjakan pekerjaan mereka. Framework CSS yang populer saat ini adalah Bootstrap dan juga Tailwind. Kedua framework ini memberikan banyak kelebihan dibandingkan CSS yang biasa kita gunakan. Berikut adalah kelebihan-kelebihan penggunaan framework yang diperoleh dibandingkan CSS biasa:
Proses Pengembangan Lebih Cepat: Framework seperti Bootstrap menyediakan komponen siap pakai sehingga tanpa harus menulis kode CSS dari awal.
Responsif secara Bawaan: Framework seperti Bootstrap dan Tailwind telah dirancang dengan responsif.
Skalabilitas Besar: Framework CSS memberikan struktur yang baik untuk proyek yang berkembang seiring waktu.
Bootstrap dan Tailwind tentu saja sebagai framework memiliki perbedaan yang signifikan antara satu sama lain, yaitu:
Tailwind Bootstrap Tailwind CSS membangun tampilan dengan menggabungkan kelas-kelas utilitas yang telah didefinisikan sebelumnya. Bootstrap menggunakan gaya dan komponen yang telah didefinisikan, yang memiliki tampilan yang sudah jadi dan dapat digunakan secara langsung. Tailwind CSS memiliki file CSS yang lebih kecil sedikit dibandingkan Bootstrap dan hanya akan memuat kelas-kelas utilitas yang ada Bootstrap memiliki file CSS yang lebih besar dibandingkan dengan Tailwind CSS karena termasuk banyak komponen yang telah didefinisikan. Tailwind CSS memiliki memberikan fleksibilitas dan adaptabilitas tinggi terhadap proyek Bootstrap sering kali menghasilkan tampilan yang lebih konsisten di seluruh proyek karena menggunakan komponen yang telah didefinisikan. Tailwind CSS memiliki pembelajaran yang lebih curam karena memerlukan pemahaman terhadap kelas-kelas utilitas yang tersedia dan bagaimana menggabungkannya untuk mencapai tampilan yang diinginkan. Bootstrap memiliki pembelajaran yang lebih cepat untuk pemula karena dapat mulai dengan komponen yang telah didefinisikan."},{"location":"tutorial/tutorial-4/#responsive-web-design","title":"Responsive Web Design","text":"
Responsive web design merupakan metode sistem desain web yang memiliki tujuan untuk menghasilkan tampilan web yang terlihat baik pada seluruh perangkat seperti desktop, tablet, mobile, dan sebagainya. Responsive web design tidak mengubah isi dari situs web, tetapi hanya mengubah tampilan dan penataan pada setiap perangkat agar sesuai dengan lebar layar dan kemampuan perangkat tersebut. Dalam responsive web design tampilan-tampilan tertentu membutuhkan bantuan CSS (seperti mengecilkan atau membesarkan) suatu elemen.
Salah satu cara untuk menguji apakah suatu situs web menggunakan responsive web design adalah dengan mengakses situs web tersebut dan mengaktifkan fitur Toggle Device Mode pada browser. Fitur ini memungkinkan kamu untuk melihat bagaimana situs web tersebut ditampilkan pada berbagai perangkat, seperti komputer, tablet, atau smartphone, tanpa harus mengubah ukuran jendela browser.
Berikut adalah cara untuk mengakses fitur tersebut pada browser Google Chrome. * Windows/Linux : CTRL + SHIFT + M * Mac : Command + Shift + M
Cara lain yang lebih praktis adalah dengan melakukan klik kanan pada browser dan memilih Inspect Element/Inspect untuk membuka Dev Tools yang berguna.
Untuk mempelajari lebih lengkap mengenai Reponsive Web Design, kamu dapat membuka referensi ini.
"},{"location":"tutorial/tutorial-4/#tutorial-menambahkan-bootstrap-ke-aplikasi","title":"Tutorial: Menambahkan Bootstrap ke Aplikasi","text":"
Pada mata kuliah PBP ini, kita akan memfokuskan pembelajaran CSS menggunakan framework bootstrap. Berikut adalah langkah yang perlu kamu lakukan untuk menyelesaikan bagian tutorial ini.
Buka project django kalian (book_tracker), lalu buka file base.html yang telah dibuat sebelumnya pada templates folder yang berada di root project kalian.
Didalam templates/base.html, tambahkan tag agar halaman web kamu dapat menyesuaikan ukuran dan perilaku perangkat mobile (apabila belum).
<head>\n {% block meta %}\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n {% endblock meta %}\n</head>\n
Tambahkan Bootstrap CSS dan juga JS.
CSS:
<head>\n {% block meta %}\n ...\n {% endblock meta %}\n <link href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN\" crossorigin=\"anonymous\">\n</head>\n
(Opsional) Apabila kalian ingin menggunakan dropdowns, popover, tooltips yang disediakan framework Bootstrap, maka kalian perlu menambahkan 2 baris script JS ini dibawah script JS yang sudah kalian buat sebelumnya.
"},{"location":"tutorial/tutorial-4/#tutorial-menambahkan-navbar-pada-aplikasi","title":"Tutorial: Menambahkan navbar pada Aplikasi","text":"
Tambahkan navigation bar (boleh menggunakan Bootstrap) pada halaman main.html kamu. Tampilkan nama kamu dan tombol logout pada navigation bar yang kamu buat. Kamu dapat referensi cara membuat navigation bar pada Bootstrap dengan dokumentasi berikut dan kreasikan navigation bar sesukamu.
"},{"location":"tutorial/tutorial-4/#tutorial-menambahkan-fitur-edit-pada-aplikasi","title":"Tutorial: Menambahkan Fitur Edit pada Aplikasi","text":"
Buka views.py yang ada pada subdirektori main, dan buatlah fungsi baru bernama edit_book yang menerima parameter request dan id.
Tambahkan potongan kode berikut pada fungsi edit_book
def edit_book(request, id):\n # Get book berdasarkan ID\n book = Book.objects.get(pk = id)\n\n # Set book sebagai instance dari form\n form = BookForm(request.POST or None, instance=book)\n\n if form.is_valid() and request.method == \"POST\":\n # Simpan form dan kembali ke halaman awal\n form.save()\n return HttpResponseRedirect(reverse('main:show_main'))\n\n context = {'form': form}\n return render(request, \"edit_book.html\", context)\n
Buatlah berkas HTML baru dengan nama edit_book.html pada subdirektori main/templates. Isi berkas tersebut dengan template berikut.
Buka main.html yang berada pada subdirektori main/templates. Tambahkan potongan kode berikut sejajar dengan elemen <td> terakhir agar terlihat tombol edit pada setiap baris tabel.
Jalankan proyek Django-mu dengan perintah python manage.py runserver dan bukalah http://localhost:8000 di browser favoritmu. Setelah login, coba untuk meng-edit data suatu buku. Apabila setelah di-submit perubahan tersimpan dan tercermin pada halaman utama aplikasi tanpa error, maka selamat, kamu berhasil menambahkan fitur edit!
"},{"location":"tutorial/tutorial-4/#tutorial-membuat-fungsi-untuk-menghapus-data-buku","title":"Tutorial: Membuat Fungsi untuk Menghapus Data Buku","text":"
Berikut adalah yang perlu kamu lakukan untuk membuat fungsi penghapusan data buku.
Buat fungsi baru dengan nama delete_book yang menerima parameter request dan id pada views.py di folder main untuk menghapus data buku. Kamu dapat menggunakan templat kode berikut untuk memuat fungsinya.
Jangan lupa untuk memahami isi kodenya, ya. \ud83d\ude09
def delete_book(request, id):\n # Get data berdasarkan ID\n book = Book.objects.get(pk = id)\n # Hapus data\n book.delete()\n # Kembali ke halaman awal\n return HttpResponseRedirect(reverse('main:show_main'))\n
Buka urls.py yang ada pada folder main dan impor fungsi yang sudah kamu buat tadi.
from main.views import delete_book\n
Tambahkan path url ke dalam urlpatterns untuk mengakses fungsi yang sudah diimpor.
...\npath('delete/<int:id>', delete_book, name='delete_book'), # sesuaikan dengan nama fungsi yang dibuat\n...\n
Bukalah berkas main.html yang ada pada folder main/templates dan ubahlah kode yang sudah ada menjadi seperti berikut agar terdapat tombol hapus untuk setiap buku.
Selamat! Kamu telah menyelesaikan Tutorial 4 dengan baik. \ud83d\ude04
Setelah menyelesaikan tutorial ini, tampilan halaman web kamu seharusnya terlihat seperti ini.
Kamu juga diharapkan untuk melakukan eksplorasi dengan menggunakan CSS Framework pada tutorial ini. Berikut adalah contoh penerapan Bootstrap sederhana pada aplikasi Book Tracker.
Selanjunya, lakukan add, commit dan push untuk memperbarui repositori GitHub.
Jalankan perintah berikut untuk melakukan add, commit dan push.
Kamu dapat membuka beberapa tautan dibawah untuk melihat beberapa opsi kode yang dapat kamu gunakan untuk menambahkan navigation bar - Dengan menggunakan Bootstrap, dapat diakses melalui link ini - Dengan menggunakan CSS secara manual, dapat diakses melalui link ini
Tutorial ini dikembangkan berdasarkan PBP Ganjil 2023 dan PBP Genap 2023 yang ditulis oleh Tim Pengajar Pemrograman Berbasis Platform 2023. Segala tutorial serta instruksi yang dicantumkan pada repositori ini dirancang sedemikian rupa sehingga mahasiswa yang sedang mengambil mata kuliah Pemrograman Berbasis Platform dapat menyelesaikan tutorial saat sesi lab berlangsung.
"},{"location":"tutorial/tutorial-5/","title":"Tutorial 5: JavaScript dan AJAX","text":"
Pemrograman Berbasis Platform (CSGE602022) \u2014 diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Genap 2023/2024
JavaScript merupakan bahasa pemrograman multi-paradigma tingkat tinggi lintas platform (cross-platform high-level multi-paradigm programming language). Sifat multi-paradigma membuat JavaScript mendukung konsep pemrograman berbasis obyek, pemrograman imperatif, dan pemrograman fungsional. JavaScript sendiri merupakan implementasi dari ECMAScript, yang merupakan inti dari bahasa JavaScript. Beberapa implementasi lain dari ECMAScript yang mirip dengan JavaScript antara lain JScript (Microsoft) dan ActionScript (Adobe).
JavaScript, bersama dengan HTML dan CSS, menjadi tiga teknologi utama yang dipakai pada pengembangan web. Pada dasarnya, keuntungan menggunakan JavaScript dalam pengembangan web adalah manipulasi halaman web dapat dilakukan secara dinamis dan interaksi antara halaman web dengan pengguna dapat meningkat. Oleh karena itu, hampir semua situs web modern saat ini menggunakan JavaScript dalam halaman web mereka untuk memberikan pengalaman terbaik kepada pengguna. Beberapa contoh yang dapat kita lakukan dengan menggunakan JavaScript antara lain menampilkan informasi berdasarkan waktu, mengenali jenis peramban pengguna, melakukan validasi form atau data, membuat cookies (bukan kue, namun HTTP cookies), mengganti styling dan CSS suatu element secara dinamis, dan lain sebagainya.
Pada pengembangan web umumnya kode JavaScript digunakan pada client-side suatu web (client-side JavaScript), namun beberapa jenis kode JavaScript saat ini digunakan pada server-side suatu web (server-side JavaScript) seperti node.js. Istilah client-side menunjukkan bahwa kode JavaScript akan dieksekusi atau dijalankan pada peramban pengguna, bukan pada server situs web. Hal ini berarti kompleksitas kode JavaScript tidak akan memengaruhi performa server situs web tersebut namun memengaruhi performa peramban web dan komputer; semakin kompleks kode JavaScript, maka semakin banyak memori komputer yang dikonsumsi oleh peramban web.
Pada mata kuliah PBP, kita hanya akan fokus kepada kode client-side JavaScript.
"},{"location":"tutorial/tutorial-5/#tahapan-eksekusi-javascript-oleh-peramban","title":"Tahapan Eksekusi JavaScript oleh Peramban","text":"
Perhatikan diagram berikut untuk mengamati tahapan eksekusi JavaScript oleh peramban web.
Setelah peramban mengunduh halaman HTML web maka tepat dimana tag <script></script> berada, peramban akan melihat tag script tersebut, apakah tag tersebut berisi kode embedded JavaScript atau merujuk berkas eksternal JavaScript. Jika merujuk pada berkas eksternal JavaScript, maka peramban akan mengunduh berkas tersebut terlebih dahulu.
Penulisan JavaScript dapat dilakukan dengan embedded JavaScript atau external JavaScript. Kode JavaScript dapat didefinisikan atau dituliskan secara embedded pada berkas HTML maupun secara terpisah pada berkas tersendiri. Jika ditulis dalam berkas terpisah dari HTML, ekstensi berkas yang digunakan untuk berkas JavaScript adalah .js. Berikut contoh beberapa pendefinisian dari JavaScript.
JavaScript dapat diletakkan pada head atau body dari halaman HTML. Selain itu, kode JavaScript harus dimasukkan di antara tag <script> dan </script>. Kamu dapat meletakkan lebih dari satu tag script yang berisi JavaScript pada suatu berkas HTML.
"},{"location":"tutorial/tutorial-5/#embedded-javascript-pada-html","title":"Embedded JavaScript pada HTML","text":"
Pada berkas eksternal JavaScript, tag <script> tidak perlu lagi ditambahkan.
Memisahkan JavaScript pada berkas tersendiri dapat memberikan beberapa keuntungan seperti kode dapat digunakan di berkas HTML lain, kode JavaScript dan HTML tidak bercampur sehingga lebih fokus saat mengembangkan aplikasi, serta mempercepat proses pemuatan halaman. berkas .js biasanya akan di-cache oleh peramban sehingga jika kita membuka halaman yang sama dan tidak ada perubahan pada berkas .js, maka peramban tidak akan meminta berkas .js tersebut kepada server lagi, namun akan menggunakan berkas dari cache yang sudah disimpan sebelumnya.
Setelah JavaScript sudah dimuat dengan sempurna, maka peramban akan langsung mulai mengeksekusi kode JavaScript. Jika kode tersebut BUKAN merupakan event-triggered, maka kode langsung dieksekusi. Jika kode tersebut merupakan event-triggered, maka kode tersebut hanya akan dieksekusi jika event yang didefinisikan terpicu (triggered).
// langsung dieksekusi\nalert(\"Hello World\");\n\n// langsung dieksekusi\nvar obj = document.getElementById(\"object\");\n// langsung dieksekusi, menambahkan event handler onclick untuk element object\nobj.onclick = function () {\n // hanya dieksekusi jika element 'object' di klik\n alert(\"You just clicked the object!\");\n};\n
Mendefinisikan variabel pada JavaScript cukup mudah. Contohnya seperti berikut.
var example = 0; // var example merupakan sebuah bilangan\nvar example = \"example\"; // var example merupakan sebuah string\nvar example = true; // var example merupakan sebuah boolean\n
JavaScript dapat menampung banyak tipe data; mulai dari string, integer, hingga object sekalipun. Berbeda dengan Java yang penandaan tipe datanya dibedakan dengan head variable (contohnya kamu ingin membuat variabel dengan tipe data int, maka sintaknya seperti int x = 9), JavaScript mempunyai ciri khas loosely typed atau dynamic language, yakni kamu tidak perlu menuliskan tipe data pada head variable dan JavaScript nantinya akan secara otomatis membaca tipe data kamu berdasarkan standar yang ada (seperti pada contoh di atas).
Ada beberapa aturan dalam pemilihan indentifiers atau nama variabel dalam JavaScript. Karakter pertama harus merupakan alfabet, underscore (_), atau karakter dolar ($). Selain itu, JavaScript identifiers bersifat case sensitive.
Variabel yang didefinisikan di dalam fungsi bersifat lokal, sehingga hanya dapat diakses oleh kode didalam fungsi tersebut.
// kode diluar fungsi thisFunction() tidak dapat mengakses variabel courseName\nfunction thisFunction() {\n var courseName = \"PBP\";\n // kode di dalam fungsi ini dapat mengakses variabel courseName\n}\n
Variabel yang didefinisikan di luar fungsi bersifat global dan dapat diakses oleh kode lain dalam berkas JavaScript tersebut.
var courseName = \"PBP\";\nfunction thisFunction() {\n // kode di dalam fungsi ini dapat mengakses variabel courseName\n}\n
"},{"location":"tutorial/tutorial-5/#variabel-auto-global","title":"Variabel Auto Global","text":"
Value yang di-assign pada variabel yang belum dideklarasikan otomatis menjadi variabel global, walaupun variabel tersebut berada di dalam suatu fungsi.
thisFunction(); // fungsi thisFunction() perlu dipanggil terlebih dahulu\nconsole.log(courseName); // cetak \"PBP\" pada JavaScript console\nfunction thisFunction() {\n courseName = \"PBP\";\n}\n
"},{"location":"tutorial/tutorial-5/#mengakses-variabel-global-dari-html","title":"Mengakses Variabel Global dari HTML","text":"
Kamu dapat mengakses variabel yang berada dalam berkas JavaScript pada berkas HTML yang memuat berkas JavaScript tersebut.
"},{"location":"tutorial/tutorial-5/#function-dan-event","title":"Function dan Event","text":"
Function adalah sekumpulan grup dari kode-kode yang bisa dipanggil di mana pun pada bagian kode program (mirip dengan method pada Java). Hal ini mengurangi redundansi kode yang ada (mengurangi kode-kode yang dapat sama berulang-ulang). Selain itu, function pada JavaScript sangat berguna untuk memudahkan elemen pemanggilan secara dinamis. Function dapat dipanggil sesama function dan dapat juga dipanggil karena event (akan dijelaskan di bawah). Sebagai contoh, berikut kode yang terdapat pada index.html.
Apabila magicButton ditekan, maka fungsi onclick akan menjalankan function hooray() pada javascript.js, lalu muncul alert sesuai yang sudah di-assign sebelumnya.
Kode onclick sebenarnya adalah salah satu contoh kemampuan JavaScript yang disebut event. Event adalah kemampuan JavaScript untuk membuat sebuah situs web dinamis. Maksud dari onclick adalah penanda apa yang akan dilakukan JavaScript jika elemen tersebut ditekan. Selain itu, event biasanya diberikan sebuah fungsi yang berguna sebagai perintah-perintah untuk JavaScript. Selain itu, banyak contoh-contoh event lainnya seperti onchange, onmouseover, onmouseout, dan lain sebagainya yang bisa kamu baca pada tautan ini.
HTML DOM (Document Object Model) adalah standar bagaimana mengubah, mengambil, dan menghapus HTML elements. HTML DOM dapat diakses melalui JavaScript atau dengan bahasa pemrograman lainnya. Detail lengkapnya dapat dilihat di sini.
Berikut adalah contoh implementasinya.
... \n<div>\n <p onclick=\"myFunction()\" id=\"demo\">Example of HTML DOM</p>\n\n</div>\n...\n
...\n function myFunction() {\ndocument.getElementById(\"demo\").innerHTML = \"YOU CLICKED ME!\";\n }\n...\n
AJAX merupakan singkatan dari Asynchronous JavaScript And XML.
AJAX bukanlah merupakan sebuah bahasa pemrograman, melainkan sebuah teknologi yang memadukan peramban web (untuk meminta data dari web server) dengan JavaScript dan HTML DOM (untuk menampilkan data). AJAX dapat menggunakan XML untuk mengirim data, tetapi AJAX juga dapat menggunakan teks ataupun JSON untuk mengirim data. AJAX memungkinkan halaman web untuk memperbarui data secara asinkronus dengan mengirimkan data ke peladen di balik layar. Hal tersebut berarti bahwa kita dapat memperbarui sebagian elemen data pada halaman tanpa harus me-reload halaman secara keseluruhan.
Berikut ini adalah diagram cara kerja AJAX.
Sebuah event terjadi pada halaman web (contohnya tombol submit data ditekan)
Sebuah XMLHttpRequest object dibuat oleh JavaScript
XMLHttpRequest object mengirimkan request ke server
Server memproses request tersebut
Server mengembalikan response kembali kepada halaman web
Response dibaca oleh JavaScript
Aksi berikutnya akan dipicu oleh JavaScript sesuai dengan langkah yang dibuat (contohnya memperbarui data di halaman tersebut)
Pada PBP kali ini, kamu akan melakukan AJAX pada peramban web dengan menggunakan fungsi fetch() yang diberikan oleh JavaScript. Secara gambaran besar, penggunaan fetch() untuk melakukan pemanggilan AJAX dapat dilihat di tautan ini.
Fetch API merupakan API baru yang diperkenalkan pada ECMAScript 2020 sebagai standar baru untuk membuat request dengan Promise. Fetch API menyediakan antarmuka untuk mengambil sumber daya (termasuk di seluruh jaringan). API ini merupakan pengganti yang lebih kuat dan fleksibel untuk XMLHttpRequest. Fetch API secara umum digunakan untuk mengimplementasikan AJAX secara lebih mudah daripada AJAX dengan XMLHttpRequest. Fetch API juga mendukung lebih banyak metode HTTP dan header HTTP daripada AJAX biasa.
Fungsi fetch() memiliki beberapa parameter, yaitu:
url: URL dari sumber daya yang akan diminta
method: Metode HTTP yang akan digunakan
headers: Header HTTP yang akan dikirim
body: Isi dari permintaan HTTP
Fungsi fetch() mengembalikan objek Response. Objek Response memiliki beberapa properti, yaitu:
status: Kode status HTTP dari respons
headers: Header HTTP dari respons
body: Isi dari respons
Kamu dapat mempelajari Fetch API lebih lanjut pada tautan ini.
"},{"location":"tutorial/tutorial-5/#fungsi-async-dan-await","title":"Fungsi Async dan Await","text":"
Sebelum mempelajari penggunaan fungsi fetch(), ada baiknya kita mempelajari fungsi async dan await yang memungkinkan pengimplementasian AJAX tanpa perlu menggunakan library eksternal, seperti jQuery.
Fungsi async dan await merupakan fungsi baru yang diperkenalkan di ECMAScript 2017. Fungsi async digunakan untuk menandai fungsi sebagai fungsi yang dapat mengembalikan nilai secara asinkronus, sedangkan fungsi await digunakan untuk menunggu hasil dari fungsi async.
Kamu dapat mempelajari fungsi async dan await lebih lanjut pada tautan ini.
Fetch API menyediakan antarmuka JavaScript untuk mengakses dan memanipulasi bagian-bagian protokol, seperti requests dan responses. API ini juga menyediakan metode fetch() global yang menyediakan cara yang mudah dan logis untuk mengambil sumber daya secara asinkronus pada seluruh jaringan.
Tidak seperti XMLHttpRequest yang merupakan API berbasis callback, Fetch API berbasis Promise dan menyediakan alternatif yang lebih baik dan dapat dengan mudah digunakan pada service worker. Fetch API juga mengintegrasikan konsep HTTP tingkat lanjut seperti CORS dan ekstensi lain ke HTTP.
Berikut adalah contoh penggunaan Fetch API dengan fungsi async dan await untuk melakukan AJAX.
async function fetchData() {\n const response = await fetch(\"https://jokes-bapack2-api.yuana.id/v1/text/random\");\n const data = await response.json();\n return data;\n}\n\nconst joke = await fetchData();\nconsole.log(joke);\n
Kode di atas akan melakukan AJAX untuk meminta data dari API lelucon bapak-bapak masa kini secara asinkronus. Hasil dari AJAX akan disimpan dalam variabel joke.
Kamu dapat mempelajari penggunaan Fetch API lebih lanjut pada tautan ini.
"},{"location":"tutorial/tutorial-5/#tutorial-membuat-fungsi-untuk-menambahkan-buku-dengan-ajax","title":"Tutorial: Membuat Fungsi untuk Menambahkan Buku dengan AJAX","text":"
Pada bagian ini, kamu akan membuat fungsi pada views untuk menambahkan buku baru ke basis data dengan AJAX.
Buatlah fungsi baru pada views.py dengan nama add_book_ajax yang menerima parameter request.
Impor from django.views.decorators.csrf import csrf_exempt pada berkas views.py.
Tambahkan dekorator @csrf_exempt di atas fungsi add_book_ajax yang sudah kamu buat.
Isilah fungsi tersebut dengan kode berikut.
...\n@csrf_exempt\ndef add_book_ajax(request):\n if request.method == 'POST':\n name = request.POST.get(\"name\")\n page = request.POST.get(\"page\")\n description = request.POST.get(\"description\")\n user = request.user\n\n new_book = Book(name=name, page=page, description=description, user=user)\n new_book.save()\n\n return HttpResponse(b\"CREATED\", status=201)\n\n return HttpResponseNotFound()\n
Penjelasan Kode:
name = request.POST.get(\"name\") berfungsi untuk mengambil value name pada request.
new_book membuat objek Book baru dengan parameter sesuai values dari request.
"},{"location":"tutorial/tutorial-5/#tutorial-menambahkan-routing-untuk-fungsi-add_book_ajax","title":"Tutorial: Menambahkan Routing Untuk Fungsi add_book_ajax","text":"
Buka berkas urls.py pada folder main dan impor fungsi add_book_ajax.
Tambahkan path url fungsi tersebut ke dalam urlpatterns.
"},{"location":"tutorial/tutorial-5/#tutorial-menampilkan-data-book-dengan-fetch-api","title":"Tutorial: Menampilkan Data Book dengan Fetch() API","text":"
Bukalah berkas main.html pada main/templates dan hapuslah bagian kode table yang sudah kamu buat pada tutorial sebelumnya.
Tambahkanlah kode berikut sebagai struktur table.
<table id=\"book_table\"></table>\n
Buatlah block <Script> di bagian bawah berkas kamu dan buatlah fungsi baru pada block <Script> tersebut dengan nama getBooks().
document.getElementById(\"book_table\") digunakan untuk mendapatkan elemen berdasarkan ID nya. Pada baris kode ini, elemen yang dituju adalah tag <table> dengan ID book_table yang sudah kamu buat pada tahapan sebelumnya.
innerHTML digunakan untuk mengisi child element dari elemen yang dituju. Jika innerHTML = \"\", maka akan mengosongkan isi child element dari elemen yang dituju.
books.forEach((item)) digunakan untuk melakukan for each loop pada data books yang diambil menggunakan fungsi getBooks(). Kemudian, htmlString kita konkatenasi dengan data buku untuk mengisi tabel.
refreshBooks() digunakan untuk memanggil fungsi tersebut pada setiap kali membuka halaman web.
"},{"location":"tutorial/tutorial-5/#tutorial-membuat-modal-sebagai-form-untuk-menambahkan-buku","title":"Tutorial: Membuat Modal Sebagai Form untuk Menambahkan Buku","text":"
Tambahkan kode berikut untuk mengimplementasikan modal (Bootstrap) pada aplikasi kamu.
Form pada modal tersebut sudah disesuaikan untuk model pada aplikasi book_tracker.
Kamu dapat membaca dokumentasi lebih lanjut mengenai modal pada Bootstrap di sini.
Menambahkan button yang berfungsi untuk menampilkan modal.
...\n<button type=\"button\" class=\"btn btn-primary\" data-bs-toggle=\"modal\" data-bs-target=\"#exampleModal\">\n Add Book by AJAX\n</button>\n...\n
"},{"location":"tutorial/tutorial-5/#tutorial-menambahkan-data-book-dengan-ajax","title":"Tutorial: Menambahkan Data Book dengan AJAX","text":"
Modal dengan form yang telah kamu buat sebelumnya belum bisa digunakan untuk menambahkan data buku. Oleh karena itu, kamu perlu membuat fungsi JavaScript baru untuk menambahkan data berdasarkan input ke basis data secara AJAX.
Buatlah fungsi baru pada block <Script> dengan nama addBook(). Isilah fungsi tersebut dengan kode berikut.
<script>\n ...\n function addBook() {\n fetch(\"{% url 'main:add_book_ajax' %}\", {\n method: \"POST\",\n body: new FormData(document.querySelector('#form'))\n }).then(refreshBooks)\n\n document.getElementById(\"form\").reset()\n return false\n }\n</script>\n
Penjelasan Kode:
new FormData(document.querySelector('#form')) digunakan untuk membuat sebuah FormData baru yang datanya diambil dari form pada modal. Objek FormData dapat digunakan untuk mengirimkan data form tersebut ke server.
document.getElementById(\"form\").reset() digunakan untuk mengosongkan isi field form modal setelah di-submit.
Tambahkan fungsi onclick pada button \"Add Book\" pada modal untuk menjalankan fungsi addBook() dengan menambahkan kode berikut.
Selamat! Kamu telah berhasil membuat aplikasi yang dapat menambahkan data secara AJAX. Bukalah http://localhost:8000/ dan cobalah untuk mmenambahkan data buku baru pada aplikasi. Seharusnya, sekarang aplikasi tidak perlu melakukan reload setiap kali data buku baru ditambahkan.
Tutorial ini dikembangkan berdasarkan PBP Ganjil 2023 dan PBP Genap 2023 yang ditulis oleh Tim Pengajar Pemrograman Berbasis Platform 2023. Segala tutorial serta instruksi yang dicantumkan pada repositori ini dirancang sedemikian rupa sehingga mahasiswa yang sedang mengambil mata kuliah Pemrograman Berbasis Platform dapat menyelesaikan tutorial saat sesi lab berlangsung.
Flutter adalah sebuah framework aplikasi mobile sumber terbuka (open source) yang diciptakan oleh Google pada 2017. Flutter digunakan dalam pengembangan aplikasi untuk sistem operasi Android dan iOS. Flutter juga mendukung untuk pengembangan aplikasi berbasis web, Windows, Linux, dan MacOS secara native.
Keuntungan dari Flutter sendiri adalah kemampuannya untuk menciptakan aplikasi untuk berbagai platform dengan hanya satu codebase. Selain itu, fitur JIT (just in time) memungkinkan pengembang aplikasi untuk melihat perubahan yang dilakukan pada codebase secara langsung tanpa harus mengulang proses kompilasi kode aplikasi dari awal.
Akses salah satu dari tautan berikut sesuai dengan sistem operasi yang kamu gunakan.
a. Mac OS
Khusus pengguna Mac OS yang menggunakan Homebrew, kamu dapat menggunakan perintah brew install --cask flutter untuk menginstal Flutter.
b. Windows
c. Linux
Instal Flutter versi terkini (latest version) dengan mengikuti panduan pada tautan di atas.
Untuk pengguna Mac, silakan lewati tahap iOS Setup dan langsung ke tahap Android Setup.
Instal IDE pilihan kamu yang akan digunakan untuk mengembangkan aplikasi Flutter.
a. Android Studio (Recommended)
b. Visual Studio Code
Kamu dapat menggunakan Visual Studio Code untuk Flutter dengan menginstall ekstensi Dart dan Flutter.
Kamu juga dapat membaca fungsionalitas IDE yang disediakan oleh ekstensi Flutter pada tautan yang tersedia.
"},{"location":"tutorial/tutorial-6/#tutorial-getting-started-with-flutter","title":"Tutorial: Getting Started with Flutter","text":"
Buka Terminal atau Command Prompt.
Masuk ke direktori di mana kamu ingin menyimpan proyek flutter-mu.
Generate proyek Flutter baru dengan nama book_tracker, kemudian masuk ke dalam direktori proyek tersebut.
flutter create book_tracker\ncd book_tracker\n
Untuk membuat proyek lain, kamu dapat mengganti book_tracker sesuai dengan nama proyek yang kamu inginkan.
Jalankan proyek melalui Terminal atau Command Prompt menggunakan perintah berikut.
flutter run\n
Untuk pengguna macOS, terdapat beberapa opsi untuk menjalankan aplikasi flutter, namun yang termudah adalah:
Menggunakan emulator pada Android Studio
Menggunakan Google Chrome
Jalankan perintah di bawah untuk enable web support (hanya perlu dilakukan sekali):
flutter config --enable-web\n
Kemudian, di direktori proyek, jalankan proyek tersebut di aplikasi Google Chrome dengan perintah:
flutter run -d chrome\n
Akan muncul tampilan seperti di bawah ini.
Jalankan perintah git init pada root folder untuk menginisiasi proyek sebagai repositori Git, kemudian add-commit-push proyek ke sebuah repositori baru di GitHub. Kamu dapat menamai repositori barumu dengan nama book-tracker-mobile.
"},{"location":"tutorial/tutorial-6/#tutorial-merapikan-struktur-proyek","title":"Tutorial: Merapikan Struktur Proyek","text":"
Sebelum menyelam ke Flutter lebih lanjut, kamu akan merapikan struktur file pada proyek kamu terlebih dahulu agar kode proyek dapat lebih mudah dipahami. Hal ini merupakan bentuk penerapan best practice dalam pengembangan aplikasi, yakni clean architecture.
Buatlah file baru bernama menu.dart pada direktori book_tracker/lib. Pada baris pertama file tersebut, tambahkan kode di bawah ini.
import 'package:flutter/material.dart';\n
Dari file main.dart, pindahkan (cut) kode baris ke-39 hingga akhir yang berisi kedua class di bawah ini:
class MyHomePage ... {\n ...\n}\n\nclass _MyHomePageState ... {\n ...\n}\n
ke file menu.dart yang baru saja kamu buat.
Kamu akan melihat bahwa pada file main.dart, akan terdapat error pada baris ke-34, yang berisi kode berikut:
home: const MyHomePage(title: 'Flutter Demo Home Page'),\n
Hal ini terjadi karena file main.dart tidak lagi mengenali class MyHomePage yang sudah kamu pindahkan ke file lain, yaitu menu.dart. Untuk menyelesaikan masalah ini, tambahkan kode berikut ini pada awal file main.dart.
import 'package:book_tracker/menu.dart';\n
Jalankan proyek melalui Terminal atau Command Prompt dengan perintah flutter run untuk memastikan bahwa aplikasi tetap dapat berjalan dengan baik.
"},{"location":"tutorial/tutorial-6/#tutorial-membuat-widget-sederhana-pada-flutter","title":"Tutorial: Membuat Widget Sederhana pada Flutter","text":"
Dalam bagian ini, kamu akan mempelajari cara membuat widget sederhana di Flutter. Kamu akan membuat nama dari tracker kamu sebagai header dan membuat card sebagai button untuk fitur-fitur aplikasi kamu. Saat button yang ada ditekan, akan keluar pemberitahuan di bagian bawah layar.
Pertama-tama, kamu bisa mengubah tema warna aplikasi menjadi indigo dengan melakukan langkah berikut.
Buka file main.dart.
Ubah kode pada main.dart di bagian tema aplikasi kamu yang mempunyai tipe MaterialApp menjadi seperti di bawah ini.
Setelah mengubah sifat widget halaman menu menjadi stateless, kamu akan menambahkan teks dan card sebagai tombol, salah satunya untuk memperlihatkan buku yang sedang kamu track.
Untuk menambahkan teks dan card, kamu dapat memulai dengan mendefinisikan tipe item untuk masing-masing card pada file menu.dart. Letakkan kode di bawah ini di luar class MyHomePage yang sudah ada.
class TrackerItem {\n final String name;\n final IconData icon;\n\n TrackerItem(this.name, this.icon);\n}\n
Setelah itu, kamu dapat menambahkan list berisi tombol-tombol yang ingin kamu tambahkan beserta icon yang ingin digunakan di bawah kode MyHomePage({Key? key}) : super(key: key);.
Selanjutnya, ubah nilai yang di-return oleh widget build menjadi kode di bawah ini.
...\nreturn Scaffold(\n appBar: AppBar(\n title: const Text(\n 'Book Tracker',\n ),\n ),\n body: SingleChildScrollView(\n // Widget wrapper yang dapat discroll\n child: Padding(\n padding: const EdgeInsets.all(10.0), // Set padding dari halaman\n child: Column(\n // Widget untuk menampilkan children secara vertikal\n children: <Widget>[\n const Padding(\n padding: EdgeInsets.only(top: 10.0, bottom: 10.0),\n // Widget Text untuk menampilkan tulisan dengan alignment center dan style yang sesuai\n child: Text(\n 'PBP\\'s Tracker', // Text yang menandakan tracker\n textAlign: TextAlign.center,\n style: TextStyle(\n fontSize: 30,\n fontWeight: FontWeight.bold,\n ),\n ),\n ),\n // Grid layout\n GridView.count(\n // Container pada card kita.\n primary: true,\n padding: const EdgeInsets.all(20),\n crossAxisSpacing: 10,\n mainAxisSpacing: 10,\n crossAxisCount: 3,\n shrinkWrap: true,\n children: items.map((TrackerItem item) {\n // Iterasi untuk setiap item\n return TrackerCard(item);\n }).toList(),\n ),\n ],\n ),\n ),\n ),\n );\n
Walaupun sebelumnya terdapat error, kamu tidak perlu khawatir. Kamu hanya perlu membuat widget stateless baru untuk menampilkan card. Tambahkan class di bawah ini (masih di file yang sama) di luar class-class yang sudah ada.
Sebagai bentuk best practice, jalankan perintah flutter analyze pada root folder proyek setelah kode kamu selesai ditulis. Hal ini sebaiknya dilakukan untuk memastikan tidak ada isu-isu pada kode kamu yang dapat mengganggu performa atau fungsionalitas aplikasi. Jika kamu mengikuti tutorial dengan baik, seharusnya hasil perintah menunjukkan bahwa tidak ada isu terdeteksi pada proyek kamu.
Apabila ternyata terdapat isu pada kode kamu (contohnya pada gambar di bawah), cobalah untuk menyelesaikan isu tersebut dengan mengikuti tutorial secara lebih teliti atau memperhatikan baris kode di mana isu tersebut terjadi.
Langkah ini juga dapat membantu proses building yang akan dilakukan pada beberapa tutorial yang akan datang.
Tutorial ini dikembangkan berdasarkan PBP Ganjil 2023 dan PBP Genap 2023 yang ditulis oleh Tim Pengajar Pemrograman Berbasis Platform 2023. Segala tutorial serta instruksi yang dicantumkan pada repositori ini dirancang sedemikian rupa sehingga mahasiswa yang sedang mengambil mata kuliah Pemrograman Berbasis Platform dapat menyelesaikan tutorial saat sesi lab berlangsung.
"},{"location":"tutorial/tutorial-7/","title":"Tutorial 7: Flutter Navigation, Layouts, Forms, and Input Elements","text":"
Pemrograman Berbasis Platform (CSGE602022) \u2014 diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Genap 2023/2024
Setelah menyelesaikan tutorial ini, mahasiswa diharapkan untuk dapat:
Memahami navigasi dan routing dasar pada Flutter.
Memahami elemen input dan form pada Flutter.
Memahami alur pembuatan form dan data pada Flutter.
Memahami dan menerapkan clean architecture sederhana
"},{"location":"tutorial/tutorial-7/#navigasi-halaman-pada-flutter","title":"Navigasi Halaman pada Flutter","text":"
Pada saat belajar pengembangan web, kalian pasti sudah belajar bahwa dalam sebuah website kita dapat berpindah-pindah halaman sesuai dengan URL yang diakses. Hal yang sama juga berlaku pada pengembangan aplikasi, dimana kita juga dapat melakukan perpindahan dari satu 'halaman' ke 'halaman' yang lainnya. Bedanya, pada sebuah aplikasi, yang kita gunakan untuk berpindah bukanlah dengan mengakses URL yang berbeda.
Untuk mengimplementasikan navigasi pada Flutter, sebenarnya sudah disediakan sistem yang cukup lengkap untuk melakukan navigasi antar halaman. Salah satu cara yang dapat kita gunakan untuk berpindah-pindah halaman adalah dengan menggunakan widget Navigator. Widget Navigator menampilkan halaman-halaman yang ada kepada layar seakan sebagai sebuah tumpukan (stack). Untuk menavigasi sebuah halaman baru, kita dapat mengakses Navigator melalui BuildContext dan memanggil fungsi yang ada, seperti misalnya push(), pop(), serta pushReplacement().
Note: Di dalam Flutter, layar dan halaman seringkali disebut dengan terminologi route.
Berikut adalah penjelasan mengenai beberapa penggunaan Navigator yang paling sering dijumpai dalam pengembangan aplikasi.
Method push() menambahkan suatu route ke dalam stack route yang dikelola oleh Navigator. Method ini menyebabkan route yang ditambahkan berada pada paling atas stack, sehingga route yang baru saja ditambahkan tersebut akan muncul dan ditampilkan kepada pengguna.
Method pop() menghapus route yang sedang ditampilkan kepada pengguna (atau dalam kata lain, route yang berada pada paling atas stack) dari stack route yang dikelola oleh Navigator. Method ini menyebabkan aplikasi untuk berpindah dari route yang sedang ditampilkan kepada pengguna ke route yang berada di bawahnya pada stack yang dikelola Navigator.
Method pushReplacement() menghapus route yang sedang ditampilkan kepada pengguna dan menggantinya dengan suatu route. Method ini menyebabkan aplikasi untuk berpindah dari route yang sedang ditampilkan kepada pengguna ke suatu route yang diberikan. Pada stack route yang dikelola Navigator, route lama pada atas stack akan digantikan secara langsung oleh route baru yang diberikan tanpa mengubah kondisi elemen stack yang berada di bawahnya.
Walaupun push() dan pushReplacement() sekilas terlihat mirip, namun perbedaan kedua method tersebut terletak pada apa yang dilakukan kepada route yang berada pada atas stack. push() akan menambahkan route baru diatas route yang sudah ada pada atas stack, sedangkan pushReplacement() menggantikan route yang sudah ada pada atas stack dengan route baru tersebut. Penting juga untuk memperhatikan kemungkinan urutan dan isi dari stack, karena jika kondisi stack kosong serta kita menekan tombol Back pada gawai, maka sistem akan keluar dari aplikasi tersebut.
Di samping ketiga method Navigator di atas, terdapat juga beberapa method lain yang dapat memudahkan routing dalam pengembangan aplikasi, seperti popUntil(), canPop(), dan maybePop(). Silakan mengeksplorasi method-method tersebut secara mandiri. Untuk mengetahui lebih dalam terkait Navigator, kalian dapat membaca dokumentasi yang ada pada tautan berikut: https://api.flutter.dev/flutter/widgets/Navigator-class.html
"},{"location":"tutorial/tutorial-7/#input-dan-form-pada-flutter","title":"Input dan Form Pada Flutter","text":"
Sama halnya dengan sebuah web, sebuah aplikasi juga dapat berinteraksi dengan pengguna melalui input dan form. Flutter memiliki widget Form yang dapat kita manfaatkan untuk menjadi wadah bagi beberapa input field widget yang kita buat. Sama halnya dengan input field pada web, Flutter juga memiliki banyak tipe input field, salah satunya widget TextField.
Untuk mencoba sampel dari widget Form, jalankan perintah berikut:
Untuk mengetahui lebih lanjut terkait widget Form, kalian dapat membaca dokumentasi pada tautan berikut: Flutter Form Class
"},{"location":"tutorial/tutorial-7/#tutorial-menambahkan-drawer-menu-untuk-navigasi","title":"Tutorial: Menambahkan Drawer Menu Untuk Navigasi","text":"
Untuk mempermudah navigasi di aplikasi Flutter kita, kita dapat menambahkan drawer menu. Drawer menu adalah sebuah menu yang muncul dari sisi kiri atau kanan layar. Drawer menu biasanya berisi navigasi ke halaman-halaman lain pada aplikasi.
Buka proyek yang sebelumnya telah dibuat pada tutorial 6 dengan menggunakan IDE favoritmu.
Buatlah direktori baru bernama widgets di subdirektori lib/. Kemudian, buat berkas dengan nama left_drawer.dart. Tambahkan kode berikut ke dalam berkas tersebut.
Berikutnya, tambahkan impor untuk halaman-halaman yang kita ingin masukkan navigasinya ke dalam Drawer Menu. Pada contoh ini, kita akan menambahkan navigasi ke halaman MyHomePage dan TrackerFormPage.
import 'package:flutter/material.dart';\nimport 'package:book_tracker/menu.dart';\n// TODO: Impor halaman TrackerFormPage jika sudah dibuat\n
Setelah berhasil impor, kita akan memasukkan routing untuk halaman-halaman yang kita impor ke bagian TODO: Bagian routing. Hapus komentar tersebut dan isi dengan potongan kode berikut.
...\nListTile(\n leading: const Icon(Icons.home_outlined),\n title: const Text('Halaman Utama'),\n // Bagian redirection ke MyHomePage\n onTap: () {\n Navigator.pushReplacement(\n context,\n MaterialPageRoute(\n builder: (context) => MyHomePage(),\n ));\n },\n),\nListTile(\n leading: const Icon(Icons.library_add_rounded),\n title: const Text('Tambah Buku'),\n // Bagian redirection ke TrackerFormPage\n onTap: () {\n /*\n TODO: Buatlah routing ke TrackerFormPage di sini,\n setelah halaman TrackerFormPage sudah dibuat.\n */\n },\n),\n...\n
Apabila kalian copy-paste secara langsung, pastikan ellipsis (tanda \"...\") di atas dan di bawah kode tidak ikut ter-copy.
Selanjutnya, kita akan menghias drawer kita dengan memasukkan drawer header di TODO: Bagian drawer header. Hapus komentar tersebut dan ganti dengan potongan kode berikut.
...\nconst DrawerHeader(\n decoration: BoxDecoration(\n color: Colors.indigo,\n ),\n child: Column(\n children: [\n Text(\n 'Book Tracker',\n textAlign: TextAlign.center,\n style: TextStyle(\n fontSize: 30,\n fontWeight: FontWeight.bold,\n color: Colors.white,\n ),\n ),\n Padding(padding: EdgeInsets.all(10)),\n Text(\"Catat seluruh progress membaca bukumu disini!\",\n // TODO: Tambahkan gaya teks dengan center alignment, font ukuran 15, warna putih, dan weight biasa\n ),\n ],\n ),\n),\n...\n
Selamat, kamu telah berhasil membuat drawer menu! Sekarang, masukkan drawer tersebut ke halaman yang ingin kamu tambahkan drawer. Untuk poin ini, kami akan berikan contoh untuk memasukkan ke halaman menu.dart.
Selamat, drawer dan navigasi sudah dibuat secara sempurna. Silakan jalankan program untuk melihat hasilnya. Jangan lupa kerjakan TODO yang masih ada sebelum mengumpulkan tutorial (tutorial yang dikumpulkan sudah tidak memiliki TODO). Jangan lupa juga tambahkan drawer ke halaman TrackerFormPage jika halaman tersebut sudah dibuat.
"},{"location":"tutorial/tutorial-7/#tutorial-menambahkan-form-dan-elemen-input","title":"Tutorial: Menambahkan Form dan Elemen Input","text":"
Sekarang, kita akan membuat sebuah form sederhana untuk memasukkan data barang pada aplikasi sehingga nantinya kamu dapat menambahkan data baru untuk ditampilkan.
Buat berkas baru pada direktori lib dengan nama trackerlist_form.dart. Tambahkan kode berikut ke dalam berkas trackerlist_form.dart.
Ubah widget Placeholder dengan potongan kode berikut.
Scaffold(\n appBar: AppBar(\n title: const Center(\n child: Text(\n 'Form Tambah Buku',\n ),\n ),\n backgroundColor: Colors.indigo,\n foregroundColor: Colors.white,\n ),\n // TODO: Tambahkan drawer yang sudah dibuat di sini\n body: Form(\n child: SingleChildScrollView(),\n ),\n );\n
Penjelasan Kode:
Widget Form berfungsi sebagai wadah bagi beberapa input field widget yang nanti akan kita buat.
Widget SingleChildScrollView berfungsi untuk membuat child widget di dalamnya menjadi scrollable.
Buat variabel baru bernama _formKey dengan nilai GlobalKey<FormState>(); lalu tambahkan _formKey tersebut ke dalam atribut key milik widget Form. Atribut key akan berfungsi sebagai handler dari form state, validasi form, dan penyimpanan form.
...\nclass _TrackerFormPageState extends State<TrackerFormPage> {\n final _formKey = GlobalKey<FormState>();\n...\n
Selanjutnya, kita akan mulai mengisi widget Form dengan field. Buatlah beberapa variabel untuk menyimpan input dari masing-masing field yang akan dibuat.
Buatlah widget TextFormField yang di-wrap oleh Padding sebagai salah satu children dari widget Column. Setelah itu, tambahkan atribut crossAxisAlignment untuk mengatur alignment children dari Column.
onChanged akan dijalankan setiap ada perubahan isi TextFormField.
validator akan melakukan validasi isi TextFormField dan mengembalikan String jika terdapat error.
Terdapat implementasi null-safety pada bagian String? dan value!. Operator ? berfungsi untuk menandakan bahwa variabel tersebut boleh berisi String atau null. Sedangkan operator ! berfungsi untuk menandakan bahwa variabel tersebut dijamin akan tidak akan berisi null.
Untuk mempelajari lebih dalam mengenai null-safety, kalian dapat membaca dokumentasi yang ada pada tautan berikut: Dart Null Safety
Buatlah dua TextFormField yang di-wrap dengan Padding sebagai child selanjutnya dari Column seperti sebelumnya untuk field page dan description.
...\nPadding(\n padding: const EdgeInsets.all(8.0),\n child: TextFormField(\n decoration: InputDecoration(\n hintText: \"Halaman\",\n labelText: \"Halaman\",\n border: OutlineInputBorder(\n borderRadius: BorderRadius.circular(5.0),\n ),\n ),\n onChanged: (String? value) {\n setState(() {\n // TODO: Tambahkan variabel yang sesuai\n ... = int.tryParse(value!) ?? 0;\n });\n },\n validator: (String? value) {\n if (value == null || value.isEmpty) {\n return \"Halaman tidak boleh kosong!\";\n }\n if (int.tryParse(value) == null) {\n return \"Halaman harus berupa angka!\";\n }\n return null;\n },\n ),\n),\nPadding(\n padding: const EdgeInsets.all(8.0),\n child: TextFormField(\n decoration: InputDecoration(\n hintText: \"Deskripsi\",\n labelText: \"Deskripsi\",\n border: OutlineInputBorder(\n borderRadius: BorderRadius.circular(5.0),\n ),\n ),\n onChanged: (String? value) {\n setState(() {\n // TODO: Tambahkan variabel yang sesuai\n ... = value!;\n });\n },\n validator: (String? value) {\n if (value == null || value.isEmpty) {\n return \"Deskripsi tidak boleh kosong!\";\n }\n return null;\n },\n ),\n),\n...\n
Buatlah tombol sebagai child selanjutnya dari Column. Bungkus tombol ke dalam widget Padding dan Align. Kali ini kita belum menyimpan data ke dalam database, namun kita akan memunculkannya pada pop-up yang akan muncul setelah tombol ditekan.
Tambahkan fungsi showDialog() pada bagian onPressed() dari potongan kode yang sebelumnya kamu tambahkan. Munculkan widget AlertDialog pada fungsi tersebut. Kemudian, tambahkan juga fungsi untuk reset form. Kode kalian akan terlihat seperti ini.
Silakan coba jalankan program kalian dan gunakan form yang telah dibuat, kemudian lihat hasilnya. Jangan lupa untuk terlebih dahulu menambahkan routing pada drawer untuk bisa mengakses form yang telah kalian buat.
"},{"location":"tutorial/tutorial-7/#tutorial-menambahkan-fitur-navigasi-pada-tombol","title":"Tutorial: Menambahkan Fitur Navigasi pada Tombol","text":"
Sampai sini, kita sudah berhasil membuat suatu drawer yang dapat menjalankan fitur navigasi ke halaman lain pada aplikasi, serta suatu halaman form. Pada tutorial sebelumnya, kita juga sudah berhasil membuat tiga button widget yang dapat melakukan action tertentu saat ia ditekan. Sekarang, kita akan menambahkan fitur navigasi pada tombol tersebut sehingga saat ditekan, pengguna akan ditampilkan halaman lain.
Pada widget TrackerItem pada berkas menu.dart yang sudah dibuat pada tutorial sebelumnya, akan dibuat agar kode yang terletak pada atribut onTap dari InkWell dapat melakukan navigasi ke route lain (tambahkan kode tambahan di bawah kode ScaffoldMessenger yang menampilkan snackbar).
...\n// Area responsif terhadap sentuhan\nonTap: () {\n // Memunculkan SnackBar ketika diklik\n ScaffoldMessenger.of(context)\n ..hideCurrentSnackBar()\n ..showSnackBar(SnackBar(\n content: Text(\"Kamu telah menekan tombol ${item.name}!\")));\n\n // Navigate ke route yang sesuai (tergantung jenis tombol)\n if (item.name == \"Tambah Buku\") {\n // TODO: Gunakan Navigator.push untuk melakukan navigasi ke MaterialPageRoute yang mencakup TrackerFormPage.\n }\n},\n...\n
Perhatikan bahwa pada tombol ini, kita menggunakan Navigator.push() sehingga pengguna dapat menekan tombol Back untuk kembali ke halaman menu. Selain itu, jika kita menggunakan Navigator.pop(), maka kita dapat membuat kode dalam program untuk kembali ke halaman menu.
Coba jalankan program kamu, gunakan tombol yang telah dibuat fungsionalitasnya, dan lihatlah apa yang terjadi. Bandingkan dengan apa yang terjadi jika kita melakukan navigasi melalui drawer (tentu saja setelah menyelesaikan seluruh TODO pada drawer).
Setelah membuat halaman trackerlist_form.dart, halaman kita sudah semakin banyak. Dengan demikian, mari kita pindahkan halaman-halaman yang sudah dibuat sebelumnya ke dalam satu folder screens untuk mempermudah kita ke depannya.
Sebelum mulai, pastikan kamu sudah memiliki ekstensi Flutter terinstal di IDE atau text editor yang kamu gunakan.
Buatlah berkas baru dengan nama tracker_card.dart pada direktori widgets.
Pindahkan isi widget TrackerItem dan TrackerCard pada menu.dart ke berkas widgets/tracker_card.dart.
Pastikan untuk mengimpor halaman trackerlist_form.dart pada berkas tracker_card.dart dan import halaman tracker_card.dart pada berkas menu.dart.
Buatlah folder baru bernama screens pada direktori lib.
Pindahkan file menu.dart dan trackerlist_form.dart ke dalam folder screens. Pastikan pemindahan file dilakukan melalui IDE atau text editor yang memiliki ekstensi atau plugin Flutter, bukan melalui file manager biasa (seperti File Explorer atau Finder). Hal ini dilakukan agar IDE atau text editor yang kamu gunakan dapat melakukan refactoring secara otomatis.
Setelah refactoring file dilakukan, seharusnya struktur dari direktori lib adalah seperti berikut.
Selamat! Kamu telah menyelesaikan Tutorial 7! Semoga dengan tutorial ini, kalian dapat memahami mengenai navigation, forms, input, dan layouts dengan baik. \ud83d\ude04
Pelajari dan pahami kembali kode yang sudah kamu tuliskan di atas dengan baik. Jangan lupa untuk menyelesaikan semua TODO yang ada!
Lakukan add, commit dan push untuk memperbarui repositori GitHub.
Tutorial ini dikembangkan berdasarkan PBP Ganjil 2024 yang ditulis oleh Tim Pengajar Pemrograman Berbasis Platform 2024. Segala tutorial serta instruksi yang dicantumkan pada repositori ini dirancang sedemikian rupa sehingga mahasiswa yang sedang mengambil mata kuliah Pemrograman Berbasis Platform dapat menyelesaikan tutorial saat sesi lab berlangsung.
"},{"location":"tutorial/tutorial-8/","title":"Tutorial 8: Flutter Networking, Authentication, and Integration","text":"
Pemrograman Berbasis Platform (CSGE602022) \u2014 diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Genap 2023/2024
Setelah menyelesaikan tutorial ini, mahasiswa diharapkan untuk dapat:
Memahami struktur dan pembuatan model pada Flutter.
Memahami cara mengambil, mengolah, dan menampilkan data dari web service.
Memahami state management dasar menggunakan Provider pada Flutter.
Dapat melakukan autentikasi dengan web service Django dengan aplikasi Flutter.
"},{"location":"tutorial/tutorial-8/#model-pada-flutter","title":"Model pada Flutter","text":"
Pada tutorial kali ini, kita akan memanggil web service dan menampilkan hasil yang didapatkan ke halaman Flutter yang kita buat. Akan tetapi, sebelum melakukan pemanggilan web service, kita perlu mendefinisikan model yang akan kita gunakan ketika melakukan pemanggilan web service. Model pada Flutter menggunakan prinsip class seperti layaknya yang sudah dipelajari pada DDP2 bagian OOP.
Kode di bawah ini adalah contoh, tidak wajib diikuti, tetapi sangat disarankan dibaca karena konsepnya akan digunakan pada bagian-bagian selanjutnya.
Berikut merupakan contoh class pada Flutter.
class Mobil {\n Mobil({\n this.id,\n this.brand,\n this.model\n this.color\n });\n\n int id;\n String brand;\n String model;\n String color;\n}\n
Catatan: Jika kamu mengalami error saat membuat class, tambahkan keyword required pada setiap parameter class pada bagian constructor.
Sampai saat ini, kita telah berhasil membuat class. Selanjutnya, kita akan menambahkan beberapa kode sehingga terbentuk sebuah model Mobil. Mobil ini merupakan suatu model yang merepresentasikan respons dari pemanggilan web service.
Terdapat beberapa kode-kode tambahan seperti method toJson dan fromJson di dalam class Mobil. Hal tersebut disebabkan ketika kita me-request suatu web service dengan method GET, umumnya kita mendapatkan hasil pemanggilan berupa JSON. Oleh karena itu, kita perlu melakukan konversi data dengan method fromJson agar Flutter mengenali JSON tersebut sebagai objek class Mobil. Selain itu, terdapat juga method toJson yang akan digunakan ketika kita melakukan pengiriman data ke web service (seperti POST atau PUT).
Berikut adalah contoh respons dari web service dengan method GET yang dapat dikonversi ke class model Mobil.
Lalu, bagaimana jika respons dari web service berupa kumpulan objek JSON? Sebenarnya sama saja dengan kode di atas, hanya saja terdapat pengubahan pada method mobilFromJson dan mobilToJson.
"},{"location":"tutorial/tutorial-8/#fetch-data-dari-web-service-pada-flutter","title":"Fetch Data dari Web Service pada Flutter","text":"
Pada saat pengembangan aplikasi, ada kalanya kita perlu mengambil data eksternal dari luar aplikasi kita (Internet) untuk ditampilkan di aplikasi kita. Tutorial ini bertujuan untuk memahami cara melakukan fetching data dari sebuah web service pada Flutter.
Secara umum terdapat beberapa langkah ketika ingin menampilkan data dari web service lain ke aplikasi Flutter, yaitu:
Menambahkan dependensi http ke proyek; dependensi ini digunakan untuk bertukar HTTP request.
Membuat model sesuai dengan respons dari data yang berasal dari web service tersebut.
Membuat http request ke web service menggunakan dependensi http.
Mengkonversikan objek yang didapatkan dari web service ke model yang telah kita buat di langkah kedua.
Menampilkan data yang telah dikonversi ke aplikasi dengan FutureBuilder.
Penjelasan lebih lanjut dapat dibaca pada tautan berikut: http://docs.flutter.dev/cookbook/networking/fetch-data#5-display-the-data.
"},{"location":"tutorial/tutorial-8/#state-management-dasar-menggunakan-provider","title":"State Management Dasar menggunakan Provider","text":"
Provider adalah sebuah pembungkus di sekitar InheritedWidget agar InheritedWidget lebih mudah digunakan dan lebih dapat digunakan kembali. InheritedWidget sendiri adalah kelas dasar untuk widget Flutter yang secara efisien menyebarkan informasi ke widget lainnya yang berada pada satu tree.
Manfaat menggunakan provider adalah sebagai berikut.
Mengalokasikan resource menjadi lebih sederhana.
Lazy-loading.
Mengurangi boilerplate tiap kali membuat class baru.
Didukung oleh Flutter Devtool sehingga provider dapat dilacak dari Devtool.
Peningkatan skalabilitas untuk class yang memanfaatkan mekanisme listen yang dibangun secara kompleks.
Untuk mengetahui provider secara lebih lanjut, silakan buka halaman package Provider: http://pub.dev/packages/provider
"},{"location":"tutorial/tutorial-8/#tutorial-integrasi-autentikasi-django-flutter","title":"Tutorial: Integrasi Autentikasi Django-Flutter","text":""},{"location":"tutorial/tutorial-8/#setup-autentikasi-pada-django-untuk-flutter","title":"Setup Autentikasi pada Django untuk Flutter","text":"
Ikuti langkah-langkah berikut untuk melakukan integrasi sistem autentikasi pada Django.
Buatlah django-app bernama authentication pada project Django yang telah kamu buat sebelumnya.
Tambahkan authentication ke INSTALLED_APPS pada main project settings.py aplikasi Django kamu.
Hint: Apabila lupa cara untuk langkah 1 dan 2, coba baca lagi Tutorial 1.
Jalankan perintah pip install django-cors-headers untuk menginstal library yang dibutuhkan. Jangan lupa untuk menyalakan virtual environment Python terlebih dahulu.
Tambahkan corsheaders ke INSTALLED_APPS pada main project settings.py aplikasi Django kamu.
Tambahkan corsheaders.middleware.CorsMiddleware pada main project settings.py aplikasi Django kamu.
Tambahkan beberapa variabel berikut ini pada main project settings.py aplikasi Django kamu.
Buatlah sebuah metode view untuk login pada authentication/views.py.
from django.contrib.auth import authenticate, login as auth_login\nfrom django.http import JsonResponse\nfrom django.views.decorators.csrf import csrf_exempt\n\n@csrf_exempt\ndef login(request):\n username = request.POST['username']\n password = request.POST['password']\n user = authenticate(username=username, password=password)\n if user is not None:\n if user.is_active:\n auth_login(request, user)\n # Status login sukses.\n return JsonResponse({\n \"username\": user.username,\n \"status\": True,\n \"message\": \"Login sukses!\"\n # Tambahkan data lainnya jika ingin mengirim data ke Flutter.\n }, status=200)\n else:\n return JsonResponse({\n \"status\": False,\n \"message\": \"Login gagal, akun dinonaktifkan.\"\n }, status=401)\n\n else:\n return JsonResponse({\n \"status\": False,\n \"message\": \"Login gagal, periksa kembali email atau kata sandi.\"\n }, status=401)\n
Buat file urls.py pada folder authentication dan tambahkan URL routing terhadap fungsi yang sudah dibuat dengan endpoint login/.
Terakhir, tambahkan path('auth/', include('authentication.urls')), pada file book_tracker/urls.py.
"},{"location":"tutorial/tutorial-8/#integrasi-sistem-autentikasi-pada-flutter","title":"Integrasi Sistem Autentikasi pada Flutter","text":"
Untuk memudahkan pembuatan sistem autentikasi, tim asisten dosen telah membuatkan package Flutter yang dapat dipakai untuk melakukan kontak dengan web service Django (termasuk operasi GET dan POST).
Package dapat diakses melalui tautan berikut: pbp_django_auth
Ikuti langkah-langkah berikut untuk melakukan integrasi sistem autentikasi pada Flutter.
Instal package yang telah disediakan oleh tim asisten dosen dengan menjalankan perintah berikut di Terminal. Jalankan pada direktori root dari proyek Flutter kamu.
Untuk menggunakan package tersebut, kamu perlu memodifikasi root widget untuk menyediakan CookieRequest library ke semua child widgets dengan menggunakan Provider.
Sebagai contoh, jika aplikasimu sebelumnya seperti ini:
Pada file main.dart, pada Widget MaterialApp(...), ubah home: MyHomePage() menjadi home: LoginPage()
Jalankan aplikasi Flutter kamu dan cobalah untuk login.
"},{"location":"tutorial/tutorial-8/#pembuatan-model-kustom","title":"Pembuatan Model Kustom","text":"
Dalam membuat model yang menyesuaikan dengan data JSON, kita dapat memanfaatkan website Quicktype dengan tahapan sebagai berikut.
Bukalah endpoint JSON yang sudah kamu buat sebelumnya pada tutorial 2.
Salinlah data JSON dan buka situs web Quicktype.
Pada situs web Quicktype, ubahlah setup name menjadi Book, source type menjadi JSON, dan language menjadi Dart.
Tempel data JSON yang telah disalin sebelumnya ke dalam textbox yang tersedia pada Quicktype.
Klik pilihan Copy Code pada Quicktype.
Berikut adalah contoh hasilnya.
Setelah mendapatkan kode model melalui Quicktype, buka kembali proyek Flutter dan buatlah folder baru models/ pada subdirektori lib/. Buatlah file baru pada folder tersebut dengan nama book.dart, dan tempel kode yang sudah disalin dari Quicktype.
"},{"location":"tutorial/tutorial-8/#penerapan-fetch-data-dari-django-untuk-ditampilkan-ke-flutter","title":"Penerapan Fetch Data dari Django Untuk Ditampilkan ke Flutter","text":""},{"location":"tutorial/tutorial-8/#menambahkan-dependensi-http","title":"Menambahkan Dependensi HTTP","text":"
Untuk melakukan perintah HTTP request, kita membutuhkan package tambahan yakni package http.
Lakukan flutter pub add http pada terminal proyek Flutter untuk menambahkan package http.
Pada file android/app/src/main/AndroidManifest.xml, tambahkan kode berikut untuk memperbolehkan akses Internet pada aplikasi Flutter yang sedang dibuat.
...\n <application>\n ...\n </application>\n <!-- Required to fetch data from the Internet. -->\n <uses-permission android:name=\"android.permission.INTERNET\" />\n...\n
"},{"location":"tutorial/tutorial-8/#melakukan-fetch-data-dari-django","title":"Melakukan Fetch Data dari Django","text":"
Buatlah berkas baru pada direktori lib/screens dengan nama list_book.dart.
Pada file list_book.dart, impor library yang dibutuhkan. Ubahlah sesuai dengan nama proyek Flutter yang kalian buat.
import 'package:flutter/material.dart';\nimport 'package:http/http.dart' as http;\nimport 'dart:convert';\nimport 'package:<APP_NAME>/models/book.dart';\n...\n
Salinlah potongan kode berikut dan paste pada list_book.dart. Jangan lupa untuk mengimpor file atau modul yang diperlukan.
Tambahkan halaman list_book.dart ke widgets/left_drawer.dart dengan menambahkan kode berikut.
// Kode ListTile Menu\n...\nListTile(\n leading: const Icon(Icons.library_books_rounded),\n title: const Text('Daftar Buku'),\n onTap: () {\n // Route menu ke halaman buku\n Navigator.push(\n context,\n MaterialPageRoute(builder: (context) => const BookPage()),\n );\n },\n),\n...\n
Ubah fungsi tombol Lihat Buku pada halaman utama agar mengarahkan ke halaman BookPage. Kamu dapat melakukan redirection dengan menambahkan else if setelah kode if(...){...} di bagian akhir onTap: () { } yang ada pada file widgets/tracker_card.dart
Impor file yang dibutuhkan saat menambahkan BookPage ke left_drawer.dart dan tracker_card.dart.
Jalankan aplikasi dan cobalah untuk menambahkan beberapa Book di situs web kamu. Kemudian, coba lihat hasilnya melalui halaman Daftar Buku yang baru saja kamu buat di aplikasi Flutter
"},{"location":"tutorial/tutorial-8/#integrasi-form-flutter-dengan-layanan-django","title":"Integrasi Form Flutter Dengan Layanan Django","text":"
Langkah-langkah berikut akan dilakukan pada kode proyek Django.
Buatlah sebuah fungsi view baru pada main/views.py aplikasi Django kamu dengan potongan kode berikut. Jangan lupa juga untuk menambahkan import-import yang diperlukan pada bagian atas kode.
from django.views.decorators.csrf import csrf_exempt\nimport json\nfrom django.http import JsonResponse\n...\n@csrf_exempt\ndef create_book_flutter(request):\n if request.method == 'POST':\n\n data = json.loads(request.body)\n\n new_book = Book.objects.create(\n user = request.user,\n name = data[\"name\"],\n page = int(data[\"page\"]),\n description = data[\"description\"]\n )\n\n new_book.save()\n\n return JsonResponse({\"status\": \"success\"}, status=200)\n else:\n return JsonResponse({\"status\": \"error\"}, status=401)\n
Tambahkan path baru pada main/urls.py dengan kode berikut.
Jalankan ulang (dan deploy ulang) aplikasi kamu. Apabila kamu telah men-deploy aplikasimu, maka data akun dan transaksi akan hilang setelah di-redeploy.
Langkah-langkah berikut akan dilakukan pada kode proyek Flutter.
Hubungkan halaman trackerlist_form.dart dengan CookieRequest dengan menambahkan baris kode berikut.
Tambahkan path baru pada authentication/urls.py dengan kode berikut.
from authentication.views import logout\n...\npath('logout/', logout, name='logout'),\n
Langkah-langkah berikut akan dilakukan pada kode proyek Flutter.
Buka file lib/widgets/tracker_card.dart dan tambahkan potongan kode berikut. Selesaikan masalah impor library setelah menambahkan potongan kode ke dalam file tersebut.
Ubahlah perintah onTap: () {...} pada widget Inkwell menjadi onTap: () async {...} agar widget Inkwell dapat melakukan proses logout secara asinkronus.
Tambahkan kode berikut ke dalam async {...} di bagian akhir:
...\n// statement if sebelumnya\n// tambahkan else if baru seperti di bawah ini\nelse if (item.name == \"Logout\") {\n final response = await request.logout(\n // TODO: Ganti URL dan jangan lupa tambahkan trailing slash (/) di akhir URL!\n \"http://<APP_URL_KAMU>/auth/logout/\");\n String message = response[\"message\"];\n if (context.mounted) {\n if (response['status']) {\n String uname = response[\"username\"];\n ScaffoldMessenger.of(context).showSnackBar(SnackBar(\n content: Text(\"$message Sampai jumpa, $uname.\"),\n ));\n Navigator.pushReplacement(\n context,\n MaterialPageRoute(builder: (context) => const LoginPage()),\n );\n } else {\n ScaffoldMessenger.of(context).showSnackBar(\n SnackBar(\n content: Text(message),\n ),\n );\n }\n }\n}\n...\n
Jalankan ulang aplikasi dan coba untuk lakukan logout.
Selamat! Kamu telah menyelesaikan Tutorial 8! Semoga dengan tutorial ini, kalian dapat memahami mengenai model, fetch data, state management dasar, dan integrasi Django-Flutter dengan baik. \ud83d\ude04
Pelajari dan pahami kembali kode yang sudah kamu tuliskan di atas dengan baik. Jangan lupa untuk menyelesaikan semua TODO yang ada!
Lakukan add, commit dan push untuk memperbarui repositori GitHub.
Tutorial ini dikembangkan berdasarkan PBP Ganjil 2024 yang ditulis oleh Tim Pengajar Pemrograman Berbasis Platform 2023. Segala tutorial serta instruksi yang dicantumkan pada repositori ini dirancang sedemikian rupa sehingga mahasiswa yang sedang mengambil mata kuliah Pemrograman Berbasis Platform dapat menyelesaikan tutorial saat sesi lab berlangsung.
"},{"location":"tutorial/tutorial-9/","title":"Tutorial 9: Flutter Deployment dengan GitHub Actions dan Microsoft App Center","text":"
Pemrograman Berbasis Platform (CSGE602022) \u2014 diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Genap 2023/2024
CI/CD, singkatan dari Continuous Integration dan Continuous Deployment, merupakan konsep penting dalam pengembangan perangkat lunak yang terkait dengan GitHub Actions. Konsep ini memberikan cara untuk mengotomatisasi dan meningkatkan kualitas serta kecepatan dalam pengembangan perangkat lunak.
Continuous Integration (CI) berfokus pada penggabungan (integrasi) perubahan kode secara terus-menerus ke dalam repositori bersama oleh anggota tim. Saat seorang pengembang melakukan perubahan pada kode dan mengirimkannya ke repositori (seperti yang kita lakukan dengan GitHub), sistem CI akan secara otomatis menjalankan serangkaian tes dan verifikasi untuk memastikan bahwa perubahan tersebut tidak merusak atau mengganggu fungsionalitas yang sudah ada. Dengan kata lain, CI membantu mengidentifikasi masalah lebih awal dalam siklus pengembangan.
Continuous Deployment (CD), pada gilirannya, melibatkan otomatisasi untuk merilis (deployment) perubahan kode yang telah melewati proses CI ke lingkungan produksi atau pengujian. Ketika perubahan kode dinyatakan aman setelah melalui serangkaian pengujian CI, CD memungkinkan untuk menyebarkan perubahan tersebut secara otomatis ke server atau lingkungan lainnya tanpa perlu campur tangan manual. Ini membantu mempercepat proses pengembangan dan meningkatkan kecepatan dalam merespons perubahan kebutuhan bisnis.
Ketika kita menggunakan GitHub Actions dalam CI/CD, setiap kali ada perubahan pada repositori, GitHub Actions dapat memicu alur kerja CI untuk menjalankan pengujian dan verifikasi. Jika semuanya berhasil, alur kerja CD dapat diaktifkan untuk merilis perubahan tersebut ke environment produksi atau pengujian.
Dengan menggunakan CI/CD, tim pengembang dapat memastikan bahwa perubahan-perubahan yang dilakukan tidak merusak kualitas atau kinerja aplikasi. Ini juga mempercepat waktu rilis produk dan meningkatkan efisiensi dalam pengelolaan siklus hidup perangkat lunak secara keseluruhan.
GitHub Actions adalah fitur yang disediakan oleh GitHub untuk memungkinkan otomatisasi dalam siklus pengembangan perangkat lunak. Dengan kata lain, GitHub Actions memungkinkan kita untuk membuat dan menyesuaikan alur kerja otomatis (workflows) untuk menjalankan tugas-tugas tertentu setiap kali ada perubahan pada repositori GitHub.
Workflows ini bisa diatur untuk menjalankan berbagai tindakan atau skrip otomatis, seperti melakukan pengujian (testing), membangun (building) aplikasi, atau merilis (releasing) versi baru. Tujuannya adalah untuk membantu tim pengembang mengotomatiskan proses-proses ini, sehingga mereka dapat fokus pada penulisan kode dan pengembangan fitur tanpa harus terlalu khawatir dengan langkah-langkah administratif.
Misalnya, ketika ada perubahan kode di repositori GitHub, GitHub Actions dapat secara otomatis menjalankan alur kerja yang telah Anda tentukan. Alur kerja tersebut dapat mencakup langkah-langkah seperti menguji apakah perubahan tersebut tidak merusak fungsionalitas yang ada, membangun aplikasi yang baru, dan bahkan merilis versi baru jika diperlukan.
Penting untuk dicatat bahwa GitHub Actions memanfaatkan file konfigurasi khusus (biasanya dengan nama .github/workflows/nama-file.yml) pada repositori. File ini berisi deskripsi langkah-langkah yang harus dijalankan oleh GitHub Actions.
Dengan GitHub Actions, kolaborasi dalam pengembangan perangkat lunak dapat menjadi lebih efisien karena banyak tugas dapat diotomatisasi. Hal ini memberikan fleksibilitas tambahan kepada pengembang dan tim untuk menyesuaikan alur kerja mereka sesuai kebutuhan proyek.
Berikut adalah contoh workflow sederhana yang dapat kita gunakan untuk membangun dan menguji kode aplikasi berbasis JavaScript dan menggunakan Yarn package manager.
"},{"location":"tutorial/tutorial-9/#pengenalan-microsoft-app-center","title":"Pengenalan Microsoft App Center","text":"
Microsoft App Center merupakan layanan cloud yang menyediakan berbagai macam fitur untuk memudahkan proses build, test, release, dan monitoring aplikasi. Layanan ini dapat digunakan untuk berbagai macam platform, seperti Android, iOS, Windows, macOS, dan lain-lain. Pada tutorial ini, kita akan menggunakan layanan ini untuk melakukan build dan release aplikasi Flutter secara otomatis.
Microsoft App Center menyediakan banyak sekali fitur keren secara gratis seperti continuous integration, UI testing, continuous delivery, laporan crash dan error dari aplikasi yang ditampilkan secara detail bagaimana log errornya, dan fitur Analytics. Kali ini, kita tidak akan memakai seluruh fitur yang tersedia karena Flutter belum didukung secara resmi oleh App Center. Saat ini, bahasa dan framework yang baru didukung resmi adalah Kotlin, Java, React Native, Xamarin, dan Unity. Pada tutorial kali ini, kita akan fokus ke pembuatan dan perilisan aplikasi pada App Center saja.Untuk lebih jelasnya, kamu dapat membaca dokumentasi App Center secara lebih lanjut.
"},{"location":"tutorial/tutorial-9/#tutorial-pengaturan-dasar-pada-app-center","title":"Tutorial: Pengaturan Dasar pada App Center","text":"
Pada tutorial ini, kamu akan men-deploy aplikasi Flutter yang telah kalian buat pada tutorial-tutorial sebelumnya ke App Center. Berikut ini merupakan tahap awal dalam proses deployment aplikasi.
Buatlah akun App Center menggunakan akun GitHub kamu (tombol paling atas).
Setelah berhasil membuat akun dan sign in, buatlah organisasi baru dengan mengakses menu Add new -> Add new organization. Isi nama organisasi yang kamu inginkan.
Buatlah slot aplikasi baru dengan menekan tombol Add app.
Isi nama aplikasi dengan Book Tracker. Kamu tidak perlu untuk memilih tipe rilis. Pilih Android sebagai OS dan Java / Kotlin sebagai platform. Kemudian, klik \"Add new app\".
Buka menu Distribute dan buka menu Groups.
Buatlah grup baru dengan menekan tombol \"Add Group\". Berikan nama Public dan berikan akses publik dengan mengubah toggle pada Allow public access. Tekan tombol Create Group untuk membuat grup baru. Hal ini kita lakukan agar APK yang nantinya dibuat oleh App Center dapat diakses secara publik.
Jika kamu menggunakan organisasi untuk mengorganisasi kode proyekmu, maka ikuti langkah tambahan berikut. Langkah-langkah ini berfungsi untuk memberikan akses repositori kepada App Center pada GitHub.
Buka situs Authorized OAuth Apps dengan akun yang terdaftar pada organisasi yang memiliki kode proyek.
Klik App Center.
Cari nama organisasi yang memiliki kode proyekmu, lalu klik tombol Grant untuk memberikan akses organisasi kepada App Center.
Sampai sini, kamu telah melakukan pengaturan dasar pada App Center. Selanjutnya, kamu akan melakukan pengaturan skrip dan pengesahan (sign) pada proyek aplikasi Flutter.
"},{"location":"tutorial/tutorial-9/#tutorial-pengaturan-dasar-pengesahan-aplikasi-flutter","title":"Tutorial: Pengaturan Dasar Pengesahan Aplikasi Flutter","text":"
Untuk publikasi aplikasi pada App Center, aplikasi Flutter harus ditandatangani atau disahkan menggunakan key agar aplikasi yang dirilis dijamin keabsahannya. Oleh karena itu, kita akan membuat key untuk aplikasi dan mengatur automasi agar skrip CI/CD (baik yang ada pada GitHub Actions maupun App Center) dapat berjalan dengan baik.
Buatlah sebuah keystore.
Untuk pengguna Mac OS atau Linux, jalankan perintah berikut pada Terminal.
Berikan keystore tersebut password yang aman dan simpan atau ingat-ingat password tersebut, jangan sampai lupa. Isilah informasi yang dibutuhkan hingga proses selesai. Kemudian, pindahkan berkas tersebut ke dalam root folder proyek aplikasi.
Perintah yang telah kamu jalankan berguna untuk menyimpan keystore file dengan nama release-keystore.jks di direktori home kamu dengan alias release.
Apabila Terminal atau Command Prompt tidak mengenali perintah keytool, silakan mengikuti panduan tambahan pada bagian Note di laman web resmi flutter bagian Create an upload keystore untuk memasukkan perintah keytool ke dalam environment path.
Tambahkan sintaks berikut pada file .gitignore yang ada pada root folder proyek aplikasi agar keystore tidak dihitung masuk sebagai berkas yang ada pada repositori Git. Hal ini dilakukan karena keystore merupakan berkas yang rahasia dan perlu dijaga selayaknya kata sandi sebuah akun.
# Remember to never publicly share your keystore.\n# See https://flutter.dev/docs/deployment/android#reference-the-keystore-from-the-app\n*.keystore\n*.jks\n
Buka berkas /android/app/build.gradle dan cari bagian buildTypes.
buildTypes {\n release {\n // TODO: Add your own signing config for the release build.\n // Signing with the debug keys for now,\n // so `flutter run --release` works.\n signingConfig signingConfigs.debug\n }\n}\n
Sampai sini, kamu sudah melakukan pengaturan dasar untuk pengesahan aplikasi. Selanjutnya, kamu akan melakukan modifikasi skrip GitHub Actions dan pembuatan skrip baru untuk membangun berkas aplikasi pada App Center.
Hasilkan sebuah base64 string sebagai representasi dari keystore file yang akan kita simpan sebagai environment variable nantinya.
Untuk pengguna Mac OS atau Linux, jalankan perintah openssl base64 -in release-keystore.jks pada Terminal di root folder untuk menghasilkan base64 string. Simpan string yang dihasilkan untuk sementara waktu.
Untuk pengguna Windows, buka root folder proyek pada File Explorer. Kemudian klik kanan, lalu klik Show more options, setelah itu klik Git Bash here. Sebuah terminal Git Bash akan terbuka.
Pada terminal tersebut, jalankan perintah openssl base64 -in release-keystore.jks. Perintah tersebut akan menghasilkan base64 string. Simpan string yang dihasilkan untuk sementara waktu.
Berikut contoh hasil dari menjalankan perintah tersebut.
Buatlah repository secrets pada repositori GitHub dengan spesifikasi sebagai berikut.
i. GH_TOKEN berisi GitHub (Personal Access) Token dari admin repositori untuk kepentingan automated release.
Apabila kamu admin repositori, akses halaman ini untuk membuat sebuah Personal Access Token. Berikan token-mu nama yang unik. Pada bagian Repository access, pilih \"Only select repositories\" dan pilih repositori proyek Fluttermu. Buka bagian \"Repository permissions\", lalu berikan akses Read-only ke setidaknya permissions berikut:
Secrets
Berikan akses Read and write ke setidaknya permissions berikut:
Actions
Workflows
Contents
Salin Personal Access Token yang dihasilkan dan simpan di lokasi lain, karena kamu tidak akan bisa melihat token tersebut lagi melalui GitHub. Setelah itu, isi repository secret GH_TOKEN dengan Personal Access Token yang telah kamu salin.
ii. KEY_JKS berisi base64 string dari keystore file yang telah kamu buat sebelumnya.
iii. KEY_PASSWORD berisi kata sandi yang kamu gunakan saat kamu membuat keystore file.
Pada akhirnya, halaman repository secrets kamu akan terlihat seperti ini.
Jika belum ada, buatlah folder .github/workflows pada root folder aplikasi.
Buatlah tiga berkas baru pada folder .github/workflows dengan spesifikasi berikut:
Diasumsikan branch staging digunakan untuk menampung kode aplikasi sebelum rilis dan branch main digunakan untuk perilisan kode aplikasi.
i. staging.yml; berfungsi untuk mengecek apakah codebase yang ada pada branch staging bebas dari error saat melakukan flutter analyze. Skrip ini hanya di-trigger saat ada commit pada branch staging.
name: Staging\n\n# Controls when the workflow will run\non:\n # Triggers the workflow on push or pull request events but only for the develop branch\n push:\n branches: [staging]\n pull_request:\n branches: [staging]\n\n# A workflow run is made up of one or more jobs that can run sequentially or in parallel\njobs:\n # This workflow contains a single job called \"build\"\n build:\n name: Analyze\n # The type of runner that the job will run on\n runs-on: ubuntu-latest\n steps:\n - name: Checkout the code\n uses: actions/checkout@v4\n\n - name: Setup Java\n uses: actions/setup-java@v3\n with:\n distribution: \"zulu\"\n java-version: \"11\"\n\n - name: Setup Flutter\n uses: subosito/flutter-action@v2\n with:\n channel: \"stable\"\n\n - name: Get packages\n run: flutter pub get\n\n - name: Analyze\n run: flutter analyze\n
ii. pre-release.yml; berfungsi untuk mengecek apakah proses build aplikasi dapat berjalan tanpa error. Jika tidak ada error, file APK dapat diakses sebagai artifact. Skrip ini hanya di-trigger saat ada pull request dari branch staging ke branch main.
name: Pre-Release\n\n# Controls when the workflow will run\non:\n # Triggers the workflow on pull request events but only for the main branch\n pull_request:\n branches: [main]\n\n# A workflow run is made up of one or more jobs that can run sequentially or in parallel\njobs:\n # This workflow contains a single job called \"Build and Pre-Release APK\"\n releases:\n name: Build and Pre-Release APK\n # The type of runner that the job will run on\n runs-on: ubuntu-latest\n steps:\n - name: Checkout the code\n uses: actions/checkout@v4\n\n - name: Setup Java\n uses: actions/setup-java@v3\n with:\n distribution: \"zulu\"\n java-version: \"11\"\n\n - name: Setup Flutter\n uses: subosito/flutter-action@v2\n with:\n channel: \"stable\"\n\n - name: Get packages\n run: flutter pub get\n\n - name: Generate Java keystore\n env:\n KEY_JKS: ${{ secrets.KEY_JKS }}\n run: echo \"$KEY_JKS\" | base64 --decode > release-keystore.jks\n\n - name: Build APK\n env:\n KEY_PASSWORD: ${{ secrets.KEY_PASSWORD }}\n run: flutter build apk --split-per-abi\n\n - name: Pre-release APK by uploading it to Artifacts\n uses: actions/upload-artifact@v3\n with:\n name: APKS\n path: build/app/outputs/flutter-apk/*.apk\n
iii. release.yml; berfungsi untuk melakukan proses build aplikasi dan perilisan aplikasi sebagai Releases pada repositori GitHub. Skrip ini hanya di-trigger saat ada commit pada branch main.
# This is a basic workflow to help you get started with Actions\nname: Release\n\n# Controls when the workflow will run\non:\n # Triggers the workflow on push events but only for the main branch\n push:\n branches: [main]\n\n# A workflow run is made up of one or more jobs that can run sequentially or in parallel\njobs:\n # This workflow contains a single job called \"Build and Release APK\"\n releases:\n name: Build and Release APK\n # The type of runner that the job will run on\n runs-on: ubuntu-latest\n steps:\n - name: Checkout the code\n uses: actions/checkout@v4\n\n - name: Get version from pubspec.yaml\n id: version\n run: echo \"::set-output name=version::$(grep \"version:\" pubspec.yaml | cut -c10-)\"\n\n - name: Setup Java\n uses: actions/setup-java@v3\n with:\n distribution: \"zulu\"\n java-version: \"11\"\n\n - name: Setup Flutter\n uses: subosito/flutter-action@v2\n with:\n channel: \"stable\"\n\n - name: Get packages\n run: flutter pub get\n\n - name: Generate Java keystore\n env:\n KEY_JKS: ${{ secrets.KEY_JKS }}\n run: echo \"$KEY_JKS\" | base64 --decode > release-keystore.jks\n\n - name: Build APK\n env:\n KEY_PASSWORD: ${{ secrets.KEY_PASSWORD }}\n run: flutter build apk --split-per-abi\n\n - name: Get current date\n id: date\n run: echo \"::set-output name=date::$(TZ='Asia/Jakarta' date +'%A %d-%m-%Y %T WIB')\"\n\n - name: Release APK\n uses: ncipollo/release-action@v1\n with:\n allowUpdates: true\n artifacts: \"build/app/outputs/flutter-apk/*.apk\"\n body: \"Published at ${{ steps.date.outputs.date }}\"\n name: \"v${{ steps.version.outputs.version }}\"\n token: ${{ secrets.GH_TOKEN }}\n tag: ${{ steps.version.outputs.version }}\n
Simpan ketiga file tersebut dan push ke repositori. Cek apakah aplikasi berhasil dibuat dan dirilis oleh GitHub Actions secara otomatis.
Apabila aplikasi kamu berhasil dibuat dan dirilis otomatis, maka selamat! Sampai sini, kita sudah menyelesaikan workflow pada GitHub. Selanjutnya, kita akan membuat skrip baru untuk build pada App Center dan mengonfigurasi aplikasi secara lebih lanjut pada situs web App Center.
"},{"location":"tutorial/tutorial-9/#tutorial-penambahan-skrip-cicd-untuk-app-center","title":"Tutorial: Penambahan Skrip CI/CD untuk App Center","text":"
Pada bagian ini, kita akan menambahkan skrip continuous integration dan continuous delivery pada repositori aplikasi Flutter agar App Center dapat membangun dan menghasilkan berkas APK aplikasi secara otomatis.
Buka folder /android/app.
Buatlah file baru dengan nama appcenter-post-clone.sh dan isi file tersebut dengan kode berikut.
#!/usr/bin/env bash\n# Place this script in project/android/app/\n\ncd ..\n\n# fail if any command fails\nset -e\n# debug log\nset -x\n\ncd ..\ngit clone -b beta https://github.com/flutter/flutter.git\nexport PATH=`pwd`/flutter/bin:$PATH\n\nflutter channel stable\nflutter doctor\n\necho \"Installed flutter to `pwd`/flutter\"\n\n# export keystore for release\necho \"$KEY_JKS\" | base64 --decode > release-keystore.jks\n\n# build APK\n# if you get \"Execution failed for task ':app:lintVitalRelease'.\" error, uncomment next two lines\n# flutter build apk --debug\n# flutter build apk --profile\nflutter build apk --release\n\n# copy the APK where AppCenter will find it\nmkdir -p android/app/build/outputs/apk/; mv build/app/outputs/apk/release/app-release.apk $_\n
Buka file /android/.gitignore dan ubahlah file tersebut menjadi berikut. Hal ini dilakukan agar App Center dapat mendeteksi aplikasi sebagai aplikasi Android.
# add comment for app center\n# gradle-wrapper.jar\n# /gradlew\n# /gradlew.bat\n/.gradle\n/captures/\n/local.properties\nGeneratedPluginRegistrant.java\n\n# Remember to never publicly share your keystore.\n# See https://flutter.dev/docs/deployment/android#reference-the-keystore-from-the-app\nkey.properties\n**/*.keystore\n**/*.jks\n
Simpan file tersebut dan push ke repositori. Pastikan skrip ini dan .gitignore yang baru telah ter-push sampai ke branch main.
Setelah selesai membuat skrip, kita akan mengonfigurasi aplikasi pada App Center agar dapat dibuat dan dirilis secara otomatis.
"},{"location":"tutorial/tutorial-9/#tutorial-konfigurasi-lanjutan-pada-app-center","title":"Tutorial: Konfigurasi Lanjutan pada App Center","text":"
Buka situs web App Center dan buka proyek aplikasi.
Buka menu Build dan pilih GitHub sebagai servis penyedia repositori aplikasi. Pilihlah repositori aplikasi proyek kelompok kamu.
Buka branch utama kamu (main atau master, silakan disesuaikan) dan klik tombol Configure.
Ikuti pengaturan berikut:
Nyalakan Environment variables
Isi dengan name dan value berikut:
JAVA_HOME: $(JAVA_HOME_11_X64)
KEY_JKS: <base64 dari keystoremu>
KEY_PASSWORD: <password dari keystoremu>
Centang Sign builds, dan didalamnya centang My Gradle settings are entirely set to handle signing automatically.
Centang Distribute builds dan radio button Groups. Centang grup Contributors dan Public pada dropdown menu Select destination.
Centang Build status badge.
Catatan:
Jangan lupa untuk mengganti KEY_JKS dan KEY_PASSWORD dengan value yang sebenarnya.
Jangan lupa untuk membuat grup Public untuk distribusi aplikasi secara publik.
Salinlah tautan build badge dengan format Markdown dan tempelkan ke README.md repositorimu.
Klik tombol Save & Build untuk menyimpan konfigurasi dan memulai proses build perdana.
Kamu dapat mengecek tautan publik dari publikasi aplikasi pada App Center melalui menu Distribute -> Groups -> Public. Kamu juga dapat menyalin tautan publik dari publikasi aplikasi.
Salinlah tautan publik dari publikasi aplikasi dan tempelkan ke README.md
Selamat, kamu telah berhasil untuk men-deploy aplikasi Flutter kamu ke App Center. Kamu dapat mengecek aplikasi yang telah kamu deploy dengan mengunduh berkas APK dari App Center dan menginstalnya pada ponsel pintar kamu.
Dan kita, sudah resmi, menamatkan tutorial PBP Semester Genap 2023/2024! Terima kasih telah mengikuti dan mengerjakan semua tutorial PBP Semester Genap 2023/2024. Tim pengajar ingin mengucapkan apresiasi kepada semua mahasiswa yang telah berpartisipasi dan berkontribusi dalam mata kuliah ini. Tim pengajar melihat usaha dan dedikasi yang telah kalian tunjukkan dalam menghadapi tantangan pengembangan aplikasi multiplatform pada mata kuliah ini.
Selama proses lab dan tugas, kita telah menggali konsep dan prinsip dasar yang mendasari pengembangan aplikasi web dan mobile menggunakan Django dan Flutter. Kalian telah mempelajari tentang arsitektur, fitur, dan alat yang dapat membantu dalam membangun aplikasi yang tangguh dan responsif di kedua platform ini.
Tim pengajar berharap lab dan tugas yang diberikan dapat memberikan pemahaman yang lebih mendalam tentang potensi dan tantangan dalam pengembangan aplikasi multiplatform serta memberikan kalian keterampilan yang berguna dan dapat diterapkan dalam karir kalian sebagai pengembang perangkat lunak.
Namun, pembelajaran tidak berhenti di sini. Dunia pengembangan terus berkembang dengan cepat, dan penting untuk tetap mengikuti perkembangan terbaru dalam industri ini. Tim pengajar mendorong kalian untuk terus belajar dan menjaga keterampilan kalian tetap relevan dengan membaca referensi lainnya, mengikuti kursus lanjutan, dan mengambil bagian dalam proyek-proyek nyata.
Akhir kata, ingatlah bahwa pengembangan aplikasi multiplatform adalah bidang yang menarik dan penuh potensi. Teruslah eksplorasi dan berinovasi, dan tim pengajar yakin kalian memiliki masa depan yang cerah sebagai pengembang perangkat lunak. Terima kasih dan semoga sukses dalam perjalanan kalian!
Tutorial ini dikembangkan berdasarkan entri blog yang ditulis oleh Muhammad Athallah. Segala tutorial serta instruksi yang dicantumkan pada repositori ini dirancang sedemikian rupa sehingga mahasiswa yang sedang mengambil mata kuliah Pemrograman Berbasis Platform dapat menyelesaikan tutorial saat sesi lab berlangsung.
Membuat Aplikasi Mobile menggunakan Framework Flutter (Berkelompok)
+
+
Tujuan Pembelajaran Khusus
+
+
Mengimplementasikan aplikasi mobile sederhana dengan framework Flutter
+
Menerapkan widget untuk layout dan input, event handling, dan pemanggilan asynchronous ke web service
+
Melakukan deploy aplikasi pada platform cloud dan perangkat mobile
+
+
Aturan Umum Tugas Kelompok
+
+
Satu kelompok membuat satu repositori GitHub yang digunakan oleh seluruh anggota kelompok untuk bekerja sama. Kumpulkan tautan repositori GitHub ke Scele.
+
Repositori GitHub memuat README.md yang berisi:
+
Daftar nama anggota kelompok
+
Tautan APK (Tidak harus ada pada saat Tahap I; tautan APK dapat ditambahkan belakangan ke README.md setelah selesai mengerjakan Tahap II.)
+
Deskripsi aplikasi (nama dan fungsi aplikasi)
+
Daftar modul yang diimplementasikan beserta pembagian kerja per anggota
+
Peran atau aktor pengguna aplikasi
+
Alur pengintegrasian dengan web service untuk terhubung dengan aplikasi web yang sudah dibuat saat Proyek Tengah Semester
+
Tautan berita acara
+
Deployment aplikasi:
+
Unggah APK sebagai Release di GitHub kelompok
+
Platform Cloud, misalnya Microsoft App Center atau Firebase App Distribution
+
Gunakan logo aplikasi kelompok Anda sendiri
+
+
Aturan Khusus per Anggota Kelompok (Implementasi Sebuah Modul)
+
+
Menerapkan widget untuk layout dan input (Material/Cupertino, sesuai integrasi kelompok masing-masing)
+
Menerapkan event handling
+
Menerapkan pemanggilan asynchronous ke web service Django (aplikasi web yang sudah dibuat saat Proyek Tengah Semester)
+
Pengolahan data response JSON dari Web Service Django dan menampilkan hasilnya di Mobile App
+
+
Tahapan Tugas Akhir Kelompok
+
+
+
Tahapan dan deliverables
+
Tenggat Waktu dan Keterangan
+
+
+
+ Tahap I (20%)
+
+
Pembuatan GitHub kelompok
+
Pembuatan codebase kelompok
+
README.md pada GitHub yang berisi:
+
+
Daftar nama anggota kelompok
+
Deskripsi aplikasi (nama dan fungsi aplikasi)
+
Daftar modul yang diimplementasikan beserta pembagian kerja per anggota
+
Peran atau aktor pengguna aplikasi
+
Alur pengintegrasian dengan web service untuk terhubung dengan aplikasi web yang sudah dibuat saat Proyek Tengah Semester
+
Menambahkan tautan berita acara ke README.md
+
+
+
+
+
Tenggat Waktu: Minggu, 12 Mei 2024, pukul 23.55 WIB
+
Kumpulkan ke SCELE: Tautan repositori GitHub yang berisi code base aplikasi Flutter lengkap beserta README.md
+
+
+
+
+ Tahap II (80%)
+
(Modul sudah terimplementasi dengan baik)
+
+
Setiap individu menyelesaikan penerapan widget pada modul masing-masing
+
Modul yang dibuat oleh setiap anggota kelompok sudah terintegrasi dalam satu kesatuan aplikasi
+
Fungsionalitas sesuai dengan rancangan desain
+
Menambahkan tautan APK ke README.md
+
+
+
+
Tenggat Waktu: Jum'at, 31 Mei 2024, pukul 23.55 WIB