diff --git a/search/search_index.json b/search/search_index.json
index 7ddf793..1dbcb5c 100644
--- a/search/search_index.json
+++ b/search/search_index.json
@@ -1 +1 @@
-{"config":{"lang":["en"],"separator":"[\\s\\-]+","pipeline":[" "]},"docs":[{"location":"","title":"Beranda","text":"<p>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.</p>"},{"location":"#dosen","title":"Dosen","text":"<p>Arawinda Dinakaramani, S.Kom., M.Hum.</p>"},{"location":"#asisten-dosen","title":"Asisten Dosen","text":"<ol> <li>Muhammad Iqbal Dwitama (MID) - Koordinator Asisten Dosen</li> <li>Muhammad Nabil Mu'afa (BIL)</li> </ol>"},{"location":"tk/pts/","title":"Proyek Tengah Semester PBP","text":"<p>Membuat Situs Web menggunakan Framework Django (Berkelompok)</p>"},{"location":"tk/pts/#tujuan-pembelajaran-khusus","title":"Tujuan Pembelajaran Khusus","text":"<ol> <li>Merancang halaman web</li> <li>Mengimplementasikan website menggunakan framework Django dengan memenuhi Models, Views, dan Templates </li> <li>Memanfaatkan framework CSS untuk mewujudkan Responsive Web Design</li> <li>Mengimplementasikan Unit Test &amp; deployment (bonus)</li> </ol>"},{"location":"tk/pts/#catatan","title":"Catatan","text":"<p>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.</p> <p>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.</p> <p>Selamat mengerjakan. \ud83d\ude04</p>"},{"location":"tk/pts/#aturan-umum-tugas-kelompok","title":"Aturan Umum Tugas Kelompok","text":"<ol> <li>Satu kelompok terdiri atas 5-6 orang.</li> <li>Satu kelompok membuat satu repositori Git di dalam satu organisasi yang digunakan oleh seluruh anggota kelompok untuk bekerja sama. Kumpulkan tautan repositori ke Scele.</li> <li>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:<ul> <li>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.</li> <li>Setelah bulan Ramadan, ada Hari Raya Idulfitri. Perayaan Hari Raya Idulfitri juga dapat menjadi peluang usaha kue kering khas Idulfitri.</li> <li>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. </li> </ul> </li> <li>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: <ul> <li>Indonesia food delivery GoFood product list</li> <li>Indonesian Food Recipes</li> <li>Indonesian Food and Drink Nutrition Dataset</li> </ul> </li> <li>Setiap anggota kelompok mengerjakan modul yang berbeda. Modul ditentukan oleh kelompok yang disesuaikan dengan ide aplikasi yang sudah didiskusikan dalam kelompok.</li> <li>Tugas kelompok dikumpulkan sebagai kesatuan aplikasi web.</li> </ol>"},{"location":"tk/pts/#aturan-khusus-per-anggota-kelompok","title":"Aturan Khusus per Anggota Kelompok","text":"<ol> <li>Menerapkan Models dengan membuat, memanfaatkan yang sudah disediakan Django, atau memanfaatkan yang sudah dibuat oleh anggota kelompok (di modul lain). </li> <li>Menerapkan Views untuk memproses request dan mengolah data untuk menghasilkan respons menggunakan templat HTML maupun mengembalikan respons JSON. </li> <li>Menerapkan templat HTML dengan kerangka yang sistematis dan efisien, seperti <code>base.html</code>, <code>header.html</code>, dan <code>footer.html</code>.</li> <li>Menerapkan responsive framework pada templat HTML (seperti Bootstrap atau Tailwind).</li> <li>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.</li> <li>Menerapkan JavaScript dengan pemanggilan AJAX.</li> <li>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.</li> <li>Menerapkan filter pada dataset makanan dan minuman yang ditampilkan. Contohnya adalah menampilkan daftar makanan dan minuman berdasarkan harga.</li> </ol>"},{"location":"tk/pts/#tahapan-tugas-kelompok","title":"Tahapan Tugas Kelompok","text":"<p> Tahapan dan deliverables Tenggat Waktu dan Keterangan Tahap I (40%) <ul> <li>Pembuatan GitHub kelompok</li> <li>README.md pada GitHub yang berisi:</li> <ol> <li>Nama-nama anggota kelompok</li> <li>Deskripsi aplikasi (cerita aplikasi yang diajukan serta kebermanfaatannya)</li> <li>Daftar modul yang akan diimplementasikan</li> <li>Sumber dataset makanan dan minuman</li> <li>Role atau peran pengguna beserta deskripsinya (karena bisa saja lebih dari satu jenis pengguna yang mengakses aplikasi)</li> </ol> </ul> 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%) <p>(Modul sudah terimplementasi dengan baik)</p> <ul> <li>Modul aplikasi dari tiap anggota kelompok</li> <li>URL Mapping untuk modul</li> <li>Models untuk modul</li> <li>Views untuk modul</li> <li>Terintegrasi sebagai satu kesatuan aplikasi</li> <li>Fungsionalitas sesuai dengan rancangan desain</li> </ul> Tenggat Waktu: Rabu, 17 April 2024, pukul 23.55 WIB <p>Kriteria Submisi: Seluruh modul yang dikerjakan oleh setiap anggota kelompok sudah muncul dan dapat diakses pada proyek Django</p> Bonus (5%) <ul> <li>Unit Test (passed) untuk semua aspek, diharapkan code coverage bisa mencapai minimal 80%</li> <li>GitHub Actions (CI/CD) sudah terkonfigurasi hingga deployment</li> <li>Pipeline status dan tautan aplikasi yang sudah di-deploy tersedia di berkas README.md pada GitHub</li> </ul> </p>"},{"location":"tugas/tugas-1/","title":"Tugas 1: Menulis Esai","text":"<p>Pemrograman Berbasis Platform (CSGE602022) \u2014 diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Genap 2023/2024</p>"},{"location":"tugas/tugas-1/#deskripsi-tugas","title":"Deskripsi Tugas","text":"<p>Tulislah sebuah esai minimal 1000 kata yang mengandung poin-poin sebagai berikut.</p> <ol> <li> <p>Pilihlah salah satu platform yang telah dijelaskan dalam Slide 1. Sebutkan nama platform yang Anda pilih.</p> </li> <li> <p>Sebutkan 3 perangkat dan teknologi yang tergolong dalam platform tersebut yang pernah Anda gunakan.</p> </li> <li> <p>Untuk masing-masing perangkat dan teknologi yang Anda sebutkan, ceritakan pengalaman Anda saat\u00a0menggunakannya.</p> </li> <li> <p>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!</p> </li> </ol>"},{"location":"tugas/tugas-1/#pengumpulan","title":"Pengumpulan","text":"<p>Tugas dikumpulkan dalam format Portable Document File (<code>*.pdf</code>) dengan ketentuan nama berkas <code>NPM_Nama_Tugas 1.pdf</code>.</p>"},{"location":"tugas/tugas-1/#tenggat-waktu-pengerjaan","title":"Tenggat Waktu Pengerjaan","text":"<p>Tenggat waktu pengerjaan Tugas 1 adalah hari Selasa, 6 Februari 2024, pukul 12.00 siang.</p> <p>Harap mengumpulkan esai yang telah kamu buat ke dalam slot submisi yang telah disediakan di SCELE.</p>"},{"location":"tugas/tugas-1/#rubrik-penilaian","title":"Rubrik Penilaian","text":"<ol> <li>Orisinalitas karya dan keatraktifan judul (10 poin)</li> <li>Format penulisan (10 poin)</li> <li>Penggunaan bahasa Indonesia yang baik dan benar (15 poin)</li> <li>Ketajaman analisis permasalahan (30 poin)</li> <li>Kelengkapan konten esai (15 poin)</li> <li>Simpulan dan saran (15 poin)</li> <li>Referensi (5 poin)</li> </ol>"},{"location":"tugas/tugas-2/","title":"Tugas 2: Implementasi Model-View-Template (MVT) pada Django","text":"<p>Pemrograman Berbasis Platform (CSGE602022) \u2014 diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Genap 2023/2024</p>"},{"location":"tugas/tugas-2/#deskripsi-tugas","title":"Deskripsi Tugas","text":"<p>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.</p>"},{"location":"tugas/tugas-2/#tema-aplikasi","title":"Tema Aplikasi","text":"<p>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.</p> <ul> <li><code>name</code> sebagai nama item dengan tipe <code>CharField</code>.</li> <li><code>amount</code> sebagai jumlah item dengan tipe <code>IntegerField</code>.</li> <li><code>description</code> sebagai deskripsi item dengan tipe <code>TextField</code>.</li> </ul> <p>Kamu dipersilakan untuk menambahkan atribut lainnya jika diinginkan, seperti <code>date</code>, <code>category</code>. Namun, model aplikasi kamu wajib memiliki ketiga atribut wajib di atas (<code>name</code>, <code>amount</code>, <code>description</code>). Nama dari ketiga atribut di atas dapat disesuaikan lagi dengan kebutuhan aplikasimu.</p> <p>Beberapa contoh ide aplikasi pengelolaan yang dapat kamu buat adalah sebagai berikut.</p> <ul> <li>TV Series Tracker: <code>title</code>, <code>episodes</code>, <code>synopsis</code>, <code>rating</code>, <code>date</code>.</li> <li>Budget Tracker: <code>name</code>, <code>price</code>, <code>description</code>, <code>category</code>, <code>date</code>.</li> <li>Fitness Tracker: <code>name</code>, <code>calories</code>, <code>description</code>, <code>date</code></li> </ul>"},{"location":"tugas/tugas-2/#checklist-tugas","title":"Checklist Tugas","text":"<p>Checklist untuk tugas ini adalah sebagai berikut.</p> <ul> <li>[ ] Membuat sebuah proyek Django baru.</li> <li>[ ] Membuat aplikasi dengan nama <code>main</code> pada proyek tersebut.</li> <li>[ ] Melakukan routing pada proyek agar dapat menjalankan aplikasi <code>main</code>.</li> <li>[ ] Membuat model pada aplikasi <code>main</code> dengan nama <code>Item</code> dan memiliki atribut wajib sebagai berikut.<ul> <li><code>name</code> sebagai nama item dengan tipe <code>CharField</code>.</li> <li><code>amount</code> sebagai jumlah item dengan tipe <code>IntegerField</code>.</li> <li><code>description</code> sebagai deskripsi item dengan tipe <code>TextField</code>.</li> </ul> </li> <li>[ ] Membuat sebuah fungsi pada <code>views.py</code> untuk dikembalikan ke dalam sebuah template HTML yang menampilkan nama aplikasi serta nama dan kelas kamu.</li> <li>[ ] Membuat sebuah routing pada <code>urls.py</code> aplikasi <code>main</code> untuk memetakan fungsi yang telah dibuat pada <code>views.py</code>.</li> <li>[ ] Melakukan deployment ke PWS terhadap aplikasi yang sudah dibuat sehingga nantinya dapat diakses oleh teman-temanmu melalui Internet.</li> <li>[ ] Membuat sebuah <code>README.md</code> yang berisi tautan menuju aplikasi PWS yang sudah di-deploy, serta jawaban dari beberapa pertanyaan berikut.<ul> <li>Jelaskan bagaimana cara kamu mengimplementasikan checklist di atas secara step-by-step (bukan hanya sekadar mengikuti tutorial).</li> <li>Buatlah bagan yang berisi request client ke web aplikasi berbasis Django beserta responnya dan jelaskan pada bagan tersebut kaitan antara <code>urls.py</code>, <code>views.py</code>, <code>models.py</code>, dan berkas <code>html</code>.</li> <li>Jelaskan mengapa kita menggunakan virtual environment? Apakah kita tetap dapat membuat aplikasi web berbasis Django tanpa menggunakan virtual environment?</li> <li>Jelaskan apakah itu MVC, MVT, MVVM dan perbedaan dari ketiganya.</li> </ul> </li> </ul> <p>Perhatikan bahwa kamu harus mengerjakan tugas ini menggunakan repositori yang berbeda dengan tutorial.</p>"},{"location":"tugas/tugas-2/#tenggat-waktu-pengerjaan","title":"Tenggat Waktu Pengerjaan","text":"<p>Tenggat waktu pengerjaan Tugas 2 adalah hari Selasa, 13 Februari, pukul 12.00 siang.</p> <p>Harap mengumpulkan link repositori yang kamu gunakan ke dalam slot submisi yang telah disediakan di SCELE.</p>"},{"location":"tugas/tugas-3/","title":"Tugas 3:  Implementasi Form dan Data Delivery pada Django","text":"<p>Pemrograman Berbasis Platform (CSGE602022) \u2014 diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Genap 2023/2024</p>"},{"location":"tugas/tugas-3/#deskripsi-tugas","title":"Deskripsi Tugas","text":"<p>Pada tugas ini, kamu akan menjalankan implementasi konsep data delivery serta menerapkan beberapa konsep yang telah dipelajari selama sesi tutorial.</p> <p>Checklist untuk tugas ini adalah sebagai berikut:</p> <ul> <li>[ ] Membuat input <code>form</code> untuk menambahkan objek model pada app sebelumnya.</li> <li>[ ] Tambahkan 4 fungsi <code>views</code> baru untuk melihat objek yang sudah ditambahkan dalam format XML, JSON, XML by ID, dan JSON by ID.</li> <li>[ ] Membuat routing URL untuk masing-masing <code>views</code> yang telah ditambahkan pada poin 2.</li> <li>[ ] Menjawab beberapa pertanyaan berikut pada <code>README.md</code> pada root folder.<ul> <li>[ ] Apa perbedaan antara form <code>POST</code> dan form <code>GET</code> dalam Django?</li> <li>[ ] Apa perbedaan utama antara XML, JSON, dan HTML dalam konteks pengiriman data?</li> <li>[ ] Mengapa JSON sering digunakan dalam pertukaran data antara aplikasi web modern?</li> <li>[ ] Jelaskan bagaimana cara kamu mengimplementasikan checklist di atas secara step-by-step (bukan hanya sekadar mengikuti tutorial).</li> </ul> </li> <li>[ ] Mengakses keempat URL di poin 2 menggunakan Postman, membuat screenshot dari hasil akses URL pada Postman, dan menambahkannya ke dalam <code>README.md</code>.</li> <li>[ ] Melakukan <code>add</code>-<code>commit</code>-<code>push</code> ke GitHub.</li> </ul>"},{"location":"tugas/tugas-3/#tenggat-waktu-pengerjaan","title":"Tenggat Waktu Pengerjaan","text":"<p>Tenggat waktu pengerjaan Tugas 3 adalah hari Selasa, 20 Februari, pukul 12.00 siang.</p> <p>Asisten dosen akan mengecek last commit dari repositori tugas lab, sehingga kamu tidak perlu mengumpulkan tautan repositori ke dalam slot submisi.</p>"},{"location":"tugas/tugas-4/","title":"Tugas 4: Implementasi Autentikasi, Session, dan Cookies pada Django","text":"<p>Pemrograman Berbasis Platform (CSGE602022) \u2014 diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Genap 2023/2024</p>"},{"location":"tugas/tugas-4/#deskripsi-tugas","title":"Deskripsi Tugas","text":"<p>Pada tugas ini, kamu akan mengimplementasikan konsep authentication, session, cookies, serta menerapkan beberapa konsep yang telah dipelajari selama sesi tutorial.</p> <p>Kerjakan checklist untuk tugas ini secara berurutan:</p> <ul> <li>[ ] Mengimplementasikan fungsi registrasi, login, dan logout untuk memungkinkan pengguna untuk mengakses aplikasi sebelumnya dengan lancar.</li> <li>[ ] Membuat dua akun pengguna dengan masing-masing tiga dummy data menggunakan model buku yang telah dibuat pada aplikasi sebelumnya untuk setiap akun di lokal.</li> <li>[ ] Menghubungkan model <code>Item</code> dengan <code>User</code>.</li> <li>[ ] Menampilkan detail informasi pengguna yang sedang logged in seperti username dan menerapkan <code>cookies</code> seperti <code>last login</code> pada halaman utama aplikasi.</li> <li> <p>[ ] Menjawab beberapa pertanyaan berikut pada <code>README.md</code> pada root folder (silakan modifikasi <code>README.md</code> yang telah kamu buat sebelumnya; tambahkan subjudul untuk setiap tugas).</p> <ul> <li>[ ] Apa itu Django <code>UserCreationForm</code>, dan jelaskan apa kelebihan dan kekurangannya?</li> <li>[ ] Apa perbedaan antara autentikasi dan otorisasi dalam konteks Django, dan mengapa keduanya penting?</li> <li>[ ] Apa itu cookies dalam konteks aplikasi web, dan bagaimana Django menggunakan cookies untuk mengelola data sesi pengguna?</li> <li>[ ] Apakah penggunaan cookies aman secara default dalam pengembangan web, atau apakah ada risiko potensial yang harus diwaspadai?</li> <li>[ ] Jelaskan bagaimana cara kamu mengimplementasikan checklist di atas secara step-by-step (bukan hanya sekadar mengikuti tutorial).</li> <li>[ ] Melakukan <code>add</code>-<code>commit</code>-<code>push</code> ke GitHub.</li> </ul> </li> </ul>"},{"location":"tugas/tugas-4/#tenggat-waktu-pengerjaan","title":"Tenggat Waktu Pengerjaan","text":"<p>Tenggat waktu pengerjaan Tugas 4 adalah Selasa, 27 Februari 2023, pukul 12.00 siang.</p> <p>Asisten dosen akan mengecek last commit dari repositori tugas lab, sehingga kamu tidak perlu mengumpulkan tautan repositori ke dalam slot submisi.</p>"},{"location":"tugas/tugas-5/","title":"Tugas 5: Desain Web menggunakan HTML, CSS dan Framework CSS","text":"<p>Pemrograman Berbasis Platform (CSGE602022) \u2014 diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Genap 2023/2024</p>"},{"location":"tugas/tugas-5/#deskripsi-tugas","title":"Deskripsi Tugas","text":"<p>Pada tugas ini, kamu akan mengimplementasikan desain web berdasarkan beberapa hal yang sudah kamu pelajari selama tutorial (CSS, Framework, dsb).</p> <p>Checklist untuk tugas ini adalah sebagai berikut:</p> <ul> <li>[ ] 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<ul> <li>[ ] Kustomisasi halaman login, register, dan tambah item semenarik mungkin.</li> <li>[ ] Kustomisasi halaman daftar item menjadi lebih berwarna dan menggunakan apporach lain selain tabel seperti dengan menggunakan Card. </li> </ul> </li> <li>[ ] Menambahkan opsi update dan delete pada masing-masing item.</li> <li>[ ] Menjawab beberapa pertanyaan berikut pada <code>README.md</code> pada root folder (silakan modifikasi <code>README.md</code> yang telah kamu buat sebelumnya; tambahkan subjudul untuk setiap tugas).<ul> <li>[ ] Jelaskan manfaat dari setiap element selector dan kapan waktu yang tepat untuk menggunakannya. </li> <li>[ ] Jelaskan HTML5 Tag yang kamu ketahui.</li> <li>[ ] Jelaskan perbedaan antara margin dan padding.</li> <li>[ ] Jelaskan perbedaan antara framework CSS Tailwind dan Bootstrap. Kapan sebaiknya kita menggunakan Bootstrap daripada Tailwind, dan sebaliknya?</li> </ul> </li> <li>[ ] Melakukan <code>add</code>-<code>commit</code>-<code>push</code> ke GitHub.</li> </ul>"},{"location":"tugas/tugas-5/#tenggat-waktu-pengerjaan","title":"Tenggat Waktu Pengerjaan","text":"<p>Tenggat waktu pengerjaan Tugas 5 adalah Selasa, 5 Maret, pukul 12.00 siang.</p> <p>Asisten dosen akan mengecek last commit dari repositori tugas lab, sehingga kamu tidak perlu mengumpulkan tautan repositori ke dalam slot submisi.</p>"},{"location":"tugas/tugas-6/","title":"Tugas 6: JavaScript dan Asynchronous JavaScript","text":"<p>Pemrograman Berbasis Platform (CSGE602022) \u2014 diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Genap 2023/2024</p>"},{"location":"tugas/tugas-6/#deskripsi-tugas","title":"Deskripsi Tugas","text":"<p>Pada tugas ini, kamu akan mengimplementasikan AJAX pada aplikasi yang telah kamu buat pada tugas sebelumnya.</p> <p>Checklist untuk tugas ini adalah sebagai berikut:</p> <ul> <li> <p>[ ] Mengubah tugas 5 yang telah dibuat sebelumnya menjadi menggunakan AJAX.</p> <ul> <li>[ ] AJAX GET<ul> <li>[ ] Ubahlah kode cards data item agar dapat mendukung AJAX GET.</li> <li>[ ] Lakukan pengambilan task menggunakan AJAX GET.</li> </ul> </li> <li> <p>[ ] AJAX POST</p> <ul> <li>[ ] Buatlah sebuah tombol yang membuka sebuah modal dengan form untuk menambahkan item.     &gt; 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.</li> </ul> </li> <li> <p>[ ] Buatlah fungsi view baru untuk menambahkan item baru ke dalam basis data.</p> </li> <li>[ ] Buatlah path <code>/create-ajax/</code> yang mengarah ke fungsi view yang baru kamu buat.</li> <li>[ ] Hubungkan form yang telah kamu buat di dalam modal kamu ke path <code>/create-ajax/</code>.</li> <li>[ ] Lakukan refresh pada halaman utama secara asinkronus untuk menampilkan daftar item terbaru tanpa reload halaman utama secara keseluruhan.</li> </ul> </li> <li> <p>[ ] Menjawab beberapa pertanyaan berikut pada <code>README.md</code> pada root folder (silakan modifikasi <code>README.md</code> yang telah kamu buat sebelumnya; tambahkan subjudul untuk setiap tugas).</p> <ul> <li>Jelaskan perbedaan antara asynchronous programming dengan synchronous programming.</li> <li>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.</li> <li>Jelaskan penerapan asynchronous programming pada AJAX.</li> <li>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.</li> <li>Jelaskan bagaimana cara kamu mengimplementasikan checklist di atas secara step-by-step (bukan hanya sekadar mengikuti tutorial).</li> </ul> </li> <li> <p>[ ] Melakukan <code>add</code>-<code>commit</code>-<code>push</code> ke GitHub.</p> </li> </ul>"},{"location":"tugas/tugas-6/#tenggat-waktu-pengerjaan","title":"Tenggat Waktu Pengerjaan","text":"<p>Tenggat waktu pengerjaan Tugas 6 adalah Jumat, 15 Maret 2024, pukul 12.00 siang.</p> <p>Asisten dosen akan mengecek last commit dari repositori tugas lab, sehingga kamu tidak perlu mengumpulkan tautan repositori ke dalam slot submisi.</p>"},{"location":"tutorial/tutorial-0/","title":"Tutorial 0: Konfigurasi dan Instalasi Git dan Django","text":"<p>Pemrograman Berbasis Platform (CSGE602022) \u2014 diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Ganjil 2023/2024</p>"},{"location":"tutorial/tutorial-0/#tujuan-pembelajaran","title":"Tujuan Pembelajaran","text":"<p>Setelah menyelesaikan tutorial ini, mahasiswa diharapkan untuk dapat:</p> <ul> <li>Mengerti perintah-perintah dasar Git yang perlu diketahui untuk mengerjakan proyek aplikasi.</li> <li>Menggunakan perintah-perintah dasar Git yang perlu diketahui untuk mengerjakan proyek aplikasi.</li> <li>Membuat repositori Git lokal dan daring (GitHub).</li> <li>Menambahkan remote antara repositori Git lokal dan repositori daring pada GitHub.</li> <li>Memahami branching pada Git dan mampu melakukan merge request/pull request.</li> </ul>"},{"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":"<p>Pengenalan awal ini akan membantumu memahami dasar-dasar mengenai Git dan platform berbasis web yang dikenal sebagai GitHub.</p>"},{"location":"tutorial/tutorial-0/#git-sistem-kontrol-versi-yang-kuat","title":"Git: Sistem Kontrol Versi yang Kuat","text":"<ul> <li>Git adalah sistem kontrol versi yang membantumu melacak perubahan pada kode sumber proyek.</li> <li>Dengan Git, kamu dapat memantau semua revisi yang telah dilakukan pada proyekmu seiring waktu.</li> </ul>"},{"location":"tutorial/tutorial-0/#github-platform-kolaborasi-menggunakan-git","title":"GitHub: Platform Kolaborasi Menggunakan Git","text":"<ul> <li>GitHub adalah platform berbasis web yang memungkinkanmu untuk menyimpan, mengelola, dan berkolaborasi pada proyek-proyek menggunakan Git.</li> <li>Ini memberikan wadah yang aman untuk meng-host proyekmu dan berinteraksi dengan rekan tim melalui Git.</li> </ul>"},{"location":"tutorial/tutorial-0/#mengapa-penting","title":"Mengapa Penting?","text":"<ul> <li>Git dan GitHub memainkan peran penting dalam pengembangan perangkat lunak modern dan kolaborasi tim.</li> <li>Keduanya memungkinkan tim untuk melacak perubahan kode, menyimpan versi, dan bekerja bersama dalam proyek secara efisien.</li> </ul> <p>Dengan pemahaman dasar mengenai Git dan GitHub, kamu siap untuk melangkah lebih jauh dalam dunia pengembangan perangkat lunak yang kolaboratif dan terstruktur.</p>"},{"location":"tutorial/tutorial-0/#langkah-1-membuat-akun-di-github","title":"Langkah 1: Membuat Akun di GitHub","text":"<p>Langkah selanjutnya adalah membuat akun di GitHub, yang akan memungkinkanmu untuk mulai berkolaborasi pada proyek-proyek menggunakan Git.</p> <ol> <li> <p>Buka Situs Web GitHub</p> <ul> <li>Buka peramban web dan akses GitHub.</li> </ul> </li> <li> <p>Membuat Akun</p> <ul> <li>Di halaman beranda GitHub, cari tombol <code>Sign up</code> di pojok kanan atas halaman.</li> <li>Klik tombol tersebut untuk memulai proses pendaftaran akun.</li> </ul> </li> <li> <p>Isi Formulir Pendaftaran</p> <ul> <li>Isi formulir pendaftaran dengan informasi yang diperlukan, seperti nama pengguna yang ingin digunakan, alamat email yang valid, dan kata sandi yang aman.</li> <li>Pastikan kamu menyimpan informasi ini dengan aman untuk masuk ke akunmu di masa mendatang.</li> </ul> </li> <li> <p>Verifikasi Akun Melalui Email</p> <ul> <li>Setelah mengisi formulir, GitHub akan mengirimkan email verifikasi ke alamat email yang kamu berikan.</li> <li>Buka email tersebut dan ikuti instruksi untuk verifikasi akunmu.</li> </ul> </li> <li> <p>Akun GitHub Siap Digunakan</p> <ul> <li>Setelah verifikasi selesai, kamu akan memiliki akun GitHub yang siap digunakan untuk berkolaborasi dalam proyek dan melacak perubahan menggunakan Git.</li> </ul> </li> </ol> <p>Catatan:</p> <ul> <li>Akun GitHub adalah pintu masuk untuk terlibat dalam kolaborasi proyek dan menyimpan proyekmu di platform ini.</li> <li>Pastikan informasi pendaftaran yang kamu berikan akurat dan aman.</li> </ul>"},{"location":"tutorial/tutorial-0/#selamat-kamu-telah-membuat-akun-github","title":"Selamat, Kamu Telah Membuat Akun GitHub","text":"<p>Kamu sekarang telah memiliki akun GitHub yang dapat digunakan untuk menyimpan proyek, berkolaborasi dengan orang lain, dan masih banyak lagi.</p>"},{"location":"tutorial/tutorial-0/#tutorial-instalasi-ide","title":"Tutorial: Instalasi IDE","text":"<p>IDE (Integrated Development Environment) adalah perangkat lunak yang membantu para pengembang dalam menulis, mengedit, dan mengelola kode. Berikut adalah langkah-langkah untuk memasang IDE.</p>"},{"location":"tutorial/tutorial-0/#langkah-1-pemilihan-text-editor-atau-ide","title":"Langkah 1: Pemilihan Text Editor atau IDE","text":"<p>Pilihlah text editor atau IDE yang sesuai dengan preferensimu. Beberapa pilihan populer yang dapat kamu pertimbangkan meliputi:</p> <ul> <li>Visual Studio Code</li> <li>Sublime Text</li> <li>PyCharm</li> <li>Vim</li> </ul>"},{"location":"tutorial/tutorial-0/#langkah-2-proses-instalasi","title":"Langkah 2: Proses Instalasi","text":"<ol> <li>Pergi ke situs web resmi IDE yang kamu pilih.</li> <li>Ikuti petunjuk yang diberikan untuk mengunduh installer IDE.</li> <li>Jalankan installer dan ikuti instruksi di layar untuk menyelesaikan proses instalasi.</li> </ol>"},{"location":"tutorial/tutorial-0/#langkah-3-memulai-menggunakan-ide","title":"Langkah 3: Memulai Menggunakan IDE","text":"<ol> <li>Setelah proses instalasi selesai, buka IDE yang telah terinstal.</li> <li>Eksplorasi antarmuka dan fitur yang disediakan oleh IDE untuk membantumu dalam pengembangan proyek.</li> </ol> <p>Catatan:</p> <ul> <li>Pastikan kamu memilih IDE yang sesuai dengan jenis proyek yang akan dikerjakan.</li> <li>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.</li> </ul>"},{"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":"<p>Jika Git belum terpasang pada sistem, kamu dapat mengikuti langkah-langkah berikut untuk menginstalnya.</p> <ol> <li>Buka situs web resmi Git di sini.</li> <li>Pilih sistem operasi yang sesuai (Windows, macOS, atau Linux) dan unduh installer yang sesuai.</li> <li>Jalankan installer yang telah diunduh dan ikuti petunjuk di layar untuk menyelesaikan proses instalasi.</li> </ol>"},{"location":"tutorial/tutorial-0/#langkah-2-konfigurasi-awal-git","title":"Langkah 2: Konfigurasi Awal Git","text":"<p>Setelah Git terpasang, langkah-langkah berikut akan membantumu mengatur konfigurasi awal sebelum mulai menggunakan Git.</p> <ol> <li>Buatlah sebuah folder/direktori baru untuk menyimpan proyek Git kamu, kemudian masuklah ke direktori tersebut.</li> <li>Salinlah path ke direktori yang sudah kamu buat.</li> <li>Buka terminal atau command prompt pada sistem, kemudian pindah ke direktori yang sudah kamu buat dengan menjalankan perintah <code>cd &lt;path_direktori&gt;</code></li> <li>Inisiasi repositori baru dengan perintah <code>git init</code>. Perintah ini akan membuat repositori Git kosong di dalam direktori yang kamu tentukan.</li> </ol>"},{"location":"tutorial/tutorial-0/#langkah-3-konfigurasi-nama-pengguna-dan-email","title":"Langkah 3: Konfigurasi Nama Pengguna dan Email","text":"<p>Sebelum mulai berkontribusi ke repositori, konfigurasikan nama pengguna dan alamat email agar terhubung dengan commit-mu.</p> <p>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.</p> <pre><code>git config --global user.name \"&lt;NAME&gt;\"\ngit config --global user.email \"&lt;EMAIL&gt;\"\n</code></pre> <p>Contoh:</p> <pre><code>git config --global user.name \"pakbepe\"\ngit config --global user.email \"pak.bepe@cs.ui.ac.id\"\n</code></pre> <p>Perlu diketahui bahwa flag <code>--global</code> akan mengubah konfigurasi global untuk seluruh sistem.</p>"},{"location":"tutorial/tutorial-0/#langkah-4-verifikasi-konfigurasi","title":"Langkah 4: Verifikasi Konfigurasi","text":"<p>Untuk memastikan konfigurasi telah diatur dengan benar pada repositori lokal, kamu dapat menjalankan perintah berikut.</p> <pre><code>git config --list\n</code></pre> <p>Catatan:</p> <ul> <li>Pastikan untuk mengganti <code>&lt;NAME&gt;</code> dan <code>&lt;EMAIL&gt;</code> dengan informasi pribadimu</li> <li>Gunakan langkah-langkah ini sebagai panduan untuk mengkonfigurasi Git sesuai kebutuhanmu.</li> </ul>"},{"location":"tutorial/tutorial-0/#tutorial-penggunaan-dasar-git","title":"Tutorial: Penggunaan Dasar Git","text":"<p>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.</p>"},{"location":"tutorial/tutorial-0/#langkah-1-melakukan-inisiasi-repositori-di-github","title":"Langkah 1: Melakukan Inisiasi Repositori di GitHub","text":"<p>Langkah pertama dalam penggunaan Git adalah melakukan inisiasi repositori di GitHub untuk memulai pelacakan perubahan pada proyekmu.</p> <ol> <li> <p>Buka GitHub melalui peramban web.</p> </li> <li> <p>Buat Repositori Baru</p> <ul> <li>Pada halaman beranda GitHub, buat repositori baru dengan nama <code>my-first-repo</code>.</li> <li>Buka halaman repositori yang baru kamu buat. Pastikan untuk mengatur visibilitas proyek sebagai \"Public\" dan biarkan pengaturan lainnya pada nilai default.</li> </ul> </li> <li> <p>Tentukan Direktori Lokal</p> <ul> <li>Pilih direktori lokal di komputermu yang telah diinisiasi dengan Git. Inilah tempat kamu akan menyimpan versi lokal dari proyek.</li> </ul> </li> <li> <p>Tambahkan Berkas <code>README.md</code></p> <ul> <li>Buat berkas baru dengan nama <code>README.md</code> dalam direktori lokal proyekmu.</li> <li>Isi berkas <code>README.md</code> dengan informasi seperti nama, NPM, dan kelas. Contoh:     <pre><code>Nama : Pak Bepe\n\nNPM : 2201234567\n\nKelas : PBP A\n</code></pre></li> </ul> </li> <li> <p>Cek Status dan Lakukan Tracking</p> <ul> <li>Buka command prompt atau terminal, lalu jalankan <code>git status</code> pada direktori yang sudah kamu pilih. Perintah ini akan menampilkan berkas-berkas yang belum di-track (untracked).</li> <li>Gunakan perintah <code>git add README.md</code> untuk menandai berkas README.md sebagai berkas yang akan di-commit (tracked).</li> </ul> </li> <li> <p>Commit Perubahan</p> <ul> <li>Jalankan kembali <code>git status</code> dan pastikan berkas README.md sudah ditandai sebagai berkas yang akan di-commit.</li> <li>Lanjutkan dengan menjalankan <code>git commit -m \"&lt;KOMENTAR KAMU&gt;\"</code> untuk membuat commit dengan pesan komentar yang sesuai dengan perubahan yang kamu lakukan.</li> </ul> </li> </ol> <p>Catatan:</p> <ul> <li>Langkah ini akan membuat kamu siap untuk mulai melacak perubahan pada proyek menggunakan Git.</li> <li>Good practice dalam memberikan komentar commit adalah menjelaskan dengan singkat apa yang kamu lakukan.</li> <li>Komentar commit yang baik dapat membantumu dan rekan-rekan tim dalam memahami tujuan perubahan tersebut.</li> <li>Hindari komentar yang terlalu umum atau ambigu, seperti <code>Perbaikan bug</code> atau <code>Update file</code>.</li> </ul>"},{"location":"tutorial/tutorial-0/#langkah-2-menghubungkan-repositori-lokal-dengan-repositori-di-github","title":"Langkah 2: Menghubungkan Repositori Lokal dengan Repositori di GitHub","text":"<p>Setelah melakukan inisiasi repositori lokal, langkah selanjutnya adalah menghubungkannya dengan repositori di GitHub agar kamu dapat berkolaborasi dan menyimpan perubahan di platform daring tersebut.</p> <ol> <li> <p>Buat Branch Utama Baru</p> <ul> <li>Di terminal atau command prompt, jalankan perintah <code>git branch -M main</code> untuk membuat branch utama baru dengan nama \"main\".</li> <li>Pastikan huruf \"M\" pada perintah <code>-M</code> ditulis dengan huruf kapital.</li> </ul> </li> <li> <p>Hubungkan dengan Repositori di GitHub</p> <ul> <li>Gunakan perintah <code>git remote add origin &lt;URL_REPO&gt;</code> untuk menghubungkan repositori lokal dengan repositori di GitHub.</li> <li>Gantilah <code>&lt;URL_REPO&gt;</code> dengan URL HTTPS repositori yang telah kamu buat di GitHub. Contoh:     <pre><code>git remote add origin https://github.com/pakbepe/test.git\n</code></pre></li> </ul> </li> <li> <p>Lakukan Penyimpanan Pertama ke GitHub</p> <ul> <li>Terakhir, lakukan penyimpanan pertama ke GitHub dengan menjalankan perintah <code>git push -u origin main</code>.</li> <li>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.</li> </ul> </li> <li> <p>Lakukan Pengecekan Kembali</p> <ul> <li>Lakukan refresh pada halaman repositori kamu, seharusnya berkas <code>README.md</code> kamu sudah dapat terlihat.</li> </ul> </li> </ol> <p>Catatan:</p> <ul> <li>Langkah ini penting untuk menjaga konsistensi antara repositori lokal dan repositori di GitHub.</li> <li>Proses ini memungkinkanmu untuk mulai berkolaborasi dan menyimpan perubahan proyek secara terstruktur di platform GitHub.</li> </ul>"},{"location":"tutorial/tutorial-0/#langkah-3-melakukan-cloning-terhadap-suatu-repositori","title":"Langkah 3: Melakukan Cloning terhadap Suatu Repositori","text":"<p>Cloning repositori adalah proses menduplikasi seluruh konten dari repositori yang ada di platform GitHub ke komputer lokal. Langkah-langkahnya adalah sebagai berikut.</p> <ol> <li> <p>Buka halaman repositori di GitHub yang telah kamu buat sebelumnya.</p> </li> <li> <p>Salin URL Clone</p> <ul> <li>Klik tombol <code>Code</code> di pojok kanan atas halaman repositori di GitHub.</li> <li>Pilih opsi HTTPS untuk salin URL clone.</li> </ul> </li> <li> <p>Clone Repositori ke Komputer Lokal</p> <ul> <li>Buka terminal atau command prompt di direktori yang berbeda dari tempat repositori lokalmu sebelumnya.</li> <li>Jalankan perintah <code>git clone &lt;URL_CLONE&gt;</code> (gantilah URL_CLONE dengan URL yang telah kamu salin).</li> <li>Perintah ini akan menduplikasi seluruh repositori ke komputer lokalmu.</li> </ul> </li> </ol> <p>Saat ini, kamu memiliki tiga repositori:</p> <ol> <li>Repositori asli di komputer lokal.</li> <li>Repositori daring di GitHub yang terhubung dengan repositori lokal.</li> <li>Repositori baru hasil dari proses cloning yang terhubung dengan repositori GitHub.</li> </ol> <p>Catatan:</p> <ul> <li>Langkah ini memungkinkanmu untuk bekerja dengan repositori di berbagai tempat dengan mudah.</li> </ul>"},{"location":"tutorial/tutorial-0/#langkah-4-melakukan-push-kepada-suatu-repositori","title":"Langkah 4: Melakukan Push kepada Suatu Repositori","text":"<p>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.</p> <ol> <li> <p>Buka kembali repositori lokal yang pertama kali kamu buat.</p> </li> <li> <p>Ubah isi berkas <code>README.md</code> dengan menambahkan atribut Hobi. Contohnya adalah sebagai berikut.</p> <pre><code>Nama : Pak Bepe\n\nNPM : 2201234567\n\nKelas : PBP A\n\nHobi : Tidur\n</code></pre> </li> <li> <p>Lakukan Push ke Repositori GitHub</p> <ul> <li>Buka terminal atau command prompt, kemudian masuk ke repositori lokal yang telah kamu ubah.</li> <li>Jalankan perintah <code>git status</code> untuk melihat status perubahan yang dilakukan.</li> <li>Jalankan <code>git add README.md</code> untuk menambahkan perubahan ke dalam tahap yang akan di-commit.</li> <li>Lakukan commit dengan menjalankan perintah <code>git commit -m \"&lt;KOMENTAR KAMU&gt;\"</code> untuk memberikan deskripsi singkat tentang perubahan yang kamu lakukan.</li> <li>Terakhir, jalankan <code>git push -u origin &lt;NAMA_BRANCH&gt;</code> untuk mengirim perubahan ke branch yang dipilih pada repositori GitHub (gantilah \"Nama Branch\" dengan target branch, misalnya <code>main</code>).</li> </ul> </li> <li> <p>Lakukan Pengecekan Kembali</p> <ul> <li>Lakukan refresh halaman kamu, seharusnya berkas <code>README.md</code> kamu sudah berubah.</li> </ul> </li> </ol> <p>Catatan: Jika kamu ingin mengambil semua perubahan yang belum di-stage (ditandai untuk dimasukkan dalam commit) dari seluruh direktori proyek kamu, jalankan <code>git add .</code>.</p>"},{"location":"tutorial/tutorial-0/#langkah-5-melakukan-pull-dari-suatu-repositori","title":"Langkah 5: Melakukan Pull dari Suatu Repositori","text":"<p>Pull pada suatu repositori adalah proses mengambil perubahan terbaru dari repositori di GitHub dan menggabungkannya dengan repositori lokal.</p> <ol> <li> <p>Buka kembali repositori lokal yang telah kamu clone sebelumnya di terminal atau command prompt.</p> </li> <li> <p>Jalankan Perintah Pull</p> <ul> <li>Jalankan perintah <code>git pull origin main</code> untuk mengambil perubahan terbaru yang ada di repositori GitHub dan menggabungkannya dengan repositori lokalmu.</li> </ul> </li> <li> <p>Lakukan Pengecekan Kembali</p> <ul> <li>Periksa kembali berkas <code>README.md</code> di repositori lokal tersebut. Seharusnya berkas <code>README.md</code> kamu sudah menampilkan hobi kamu.</li> </ul> </li> </ol> <p>Catatan:</p> <ul> <li>Langkah ini memastikan bahwa repositori lokalmu selalu diperbarui dengan perubahan terbaru yang ada di repositori GitHub.</li> <li>Melakukan pull secara berkala penting untuk menghindari konflik dan memastikan kamu bekerja dengan versi terbaru dari proyek.</li> </ul>"},{"location":"tutorial/tutorial-0/#langkah-6-melakukan-branching-pada-suatu-repositori","title":"Langkah 6: Melakukan Branching pada Suatu Repositori","text":"<p>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.</p> <p>Apa Itu Branch di Git?</p> <ul> <li>Branch di Git adalah cabang terpisah dari source code yang memungkinkan pengembangan independen dari fitur atau perubahan.</li> <li> <p>Hal ini memungkinkan tim untuk bekerja pada fitur atau perbaikan bug tanpa mengganggu kode yang ada di branch utama.</p> </li> <li> <p>Membuat dan Mengganti Branch Baru</p> <ul> <li>Pada direktori repositori lokal asli (bukan clone), jalankan perintah <code>git checkout -b &lt;NAMA_BRANCH&gt;</code> di terminal atau command prompt untuk membuat dan beralih ke branch baru. Contoh: <code>git checkout -b jurusan_branch</code></li> <li> <p>Tambahkan atribut jurusan pada berkas <code>README.md</code>. Contoh:</p> <pre><code>Nama : Pak Bepe\n\nNPM : 2201234567\n\nKelas : PBP A\n\nHobi : Tidur\n\nJurusan : Ilmu Sistem Informasi Komputer\n</code></pre> </li> </ul> </li> <li> <p>Menyimpan Perubahan dan Push ke GitHub</p> <ul> <li>Setelah menambahkan atribut jurusan, simpan berkas tersebut.</li> <li>Lakukan <code>add</code>, <code>commit</code>, dan <code>push</code> ke GitHub dengan menjalankan perintah yang sudah kamu kuasai sebelumnya.</li> <li>Jalankan perintah <code>git push -u origin &lt;NAMA_BRANCH&gt;</code>. Pastikan untuk mengganti <code>&lt;NAMA_BRANCH&gt;</code> sesuai dengan nama branch baru yang telah dibuat.</li> </ul> </li> <li> <p>Menggabungkan Branch Menggunakan Pull Request</p> <ul> <li>Buka kembali halaman repositori kamu pada GitHub.</li> <li>Secara otomatis, pop-up dengan tombol <code>Compare &amp; pull request</code> akan muncul. Jika tidak, alternatifnya adalah dengan menekan tombol <code>Pull Request</code> dan kemudian memilih opsi <code>New pull request</code>.</li> <li>Setelah itu, GitHub akan membandingkan perubahan yang ada di kedua branch yang ingin digabungkan.</li> <li>Apabila tidak terdapat konflik, tekan tombol <code>Merge pull request</code> yang akan menggabungkan perubahan dari branch yang ingin digabungkan ke dalam branch utama (<code>main</code>).</li> <li>Dengan melakukan langkah di atas, semua perubahan dari kedua branch akan diintegrasikan ke dalam branch utama, menciptakan kesatuan antara perubahan tersebut.</li> </ul> </li> </ul> <p>Catatan:</p> <ul> <li>Jika kamu ingin berpindah antar branch yang sudah ada, jalankan <code>git checkout &lt;NAMA_BRANCH&gt;</code> pada terminal. Flag <code>-b</code> pada perintah sebelum-sebelumnya digunakan untuk membuat branch baru dan beralih ke branch tersebut dalam satu langkah.</li> <li>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.</li> <li>Jika terdapat konflik atau perubahan yang saling bertabrakan, platform ini akan meminta kamu untuk menentukan perubahan mana yang sebaiknya diambil.</li> <li>Penting untuk memahami konsep branching dalam Git, karena ini memungkinkan pengembangan yang terorganisir dan terpisah, sebelum semua perubahan dikombinasikan kembali ke dalam kode utama.</li> </ul>"},{"location":"tutorial/tutorial-0/#tutorial-instalasi-django-dan-inisiasi-proyek-django","title":"Tutorial: Instalasi Django dan Inisiasi Proyek Django","text":"<p>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.</p>"},{"location":"tutorial/tutorial-0/#langkah-1-membuat-direktori-dan-mengaktifkan-virtual-environment","title":"Langkah 1: Membuat Direktori dan Mengaktifkan Virtual Environment","text":"<ol> <li>Buat direktori baru dengan nama <code>book-tracker</code> dan masuk ke dalamnya.</li> <li>Di dalam direktori tersebut, buka command prompt (Windows) atau terminal shell (Unix).</li> <li> <p>Buat virtual environment dengan menjalankan perintah berikut.</p> <pre><code>python -m venv env\n</code></pre> </li> <li> <p>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.</p> <ul> <li> <p>Windows:</p> <pre><code>env\\Scripts\\activate\n</code></pre> </li> <li> <p>Unix (Mac/Linux):</p> <pre><code>source env/bin/activate\n</code></pre> </li> </ul> </li> <li> <p>Virtual environment akan aktif dan ditandai dengan <code>(env)</code> di baris input terminal.</p> </li> </ol>"},{"location":"tutorial/tutorial-0/#langkah-2-menyiapkan-dependencies-dan-membuat-proyek-django","title":"Langkah 2: Menyiapkan Dependencies dan Membuat Proyek Django","text":"<p>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.</p> <ol> <li> <p>Di dalam direktori yang sama, buat berkas <code>requirements.txt</code> dan tambahkan beberapa dependencies.</p> <pre><code>django\ngunicorn\nwhitenoise\npsycopg2-binary\nrequests\nurllib3\n</code></pre> </li> <li> <p>Lakukan instalasi terhadap dependencies yang ada dengan perintah berikut. Jangan lupa jalankan virtual environment terlebih dahulu sebelum menjalankan perintah berikut.</p> <pre><code>pip install -r requirements.txt\n</code></pre> </li> <li> <p>Buat proyek Django bernama <code>book_tracker</code> dengan perintah berikut.</p> <pre><code>django-admin startproject book_tracker .\n</code></pre> <p>Pastikan karakter <code>.</code> tertulis di akhir perintah</p> </li> </ol>"},{"location":"tutorial/tutorial-0/#langkah-3-konfigurasi-proyek-dan-menjalankan-server","title":"Langkah 3: Konfigurasi Proyek dan Menjalankan Server","text":"<ol> <li> <p>Tambahkan <code>*</code> pada <code>ALLOWED_HOSTS</code> di <code>settings.py</code> untuk keperluan deployment:</p> <pre><code>...\nALLOWED_HOSTS = [\"*\"]\n...\n</code></pre> </li> </ol> <p>Dalam konteks deployment, <code>ALLOWED_HOSTS</code> berfungsi sebagai daftar host yang diizinkan untuk mengakses aplikasi web. Dengan menetapkan nilai <code>[\"*\"]</code>, 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.</p> <ol> <li> <p>Pastikan bahwa berkas <code>manage.py</code> ada pada direktori yang aktif pada terminal kamu saat ini. Jalankan server Django dengan perintah:</p> <ul> <li> <p>Windows:</p> <pre><code>python manage.py runserver\n</code></pre> </li> <li> <p>Unix:</p> <pre><code>python3 manage.py runserver\n</code></pre> </li> </ul> </li> <li> <p>Buka http://localhost:8000 pada peramban web untuk melihat animasi roket sebagai tanda aplikasi Django kamu berhasil dibuat.</p> </li> </ol>"},{"location":"tutorial/tutorial-0/#langkah-4-menghentikan-server-dan-menonaktifkan-virtual-environment","title":"Langkah 4: Menghentikan Server dan Menonaktifkan Virtual Environment","text":"<ol> <li>Untuk menghentikan server, tekan <code>Ctrl+C</code> (Windows/Linux) atau <code>Control+C</code> (Mac) pada terminal.</li> <li> <p>Nonaktifkan virtual environment dengan perintah:</p> <pre><code>deactivate\n</code></pre> <p>Selamat! Kamu telah berhasil membuat aplikasi Django dari awal.</p> </li> </ol>"},{"location":"tutorial/tutorial-0/#tutorial-unggah-proyek-ke-repositori-github","title":"Tutorial: Unggah Proyek ke Repositori GitHub","text":"<ol> <li> <p>Buatlah repositori GitHub baru bernama <code>book-tracker</code> dengan visibilitas public.</p> </li> <li> <p>Inisiasi direktori lokal <code>book-tracker</code> sebagai repositori Git.</p> <p>Hint: Ingat kembali tahap tutorial sebelumnya</p> </li> <li> <p>Tambahkan Berkas <code>.gitignore</code></p> <ul> <li> <p>Tambahkan berkas <code>.gitignore</code> dan isilah berkas tersebut dengan teks berikut.</p> <pre><code># 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</code></pre> </li> <li> <p>Berkas <code>.gitignore</code> adalah sebuah berkas konfigurasi yang digunakan dalam repositori Git untuk menentukan berkas-berkas dan direktori-direktori yang harus diabaikan oleh Git.</p> </li> <li>Berkas-berkas yang tercantum di dalam <code>.gitignore</code> tidak akan dimasukkan ke dalam versi kontrol Git.</li> <li>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.</li> </ul> </li> <li> <p>Lakukan <code>add</code>, <code>commit</code>, dan <code>push</code> dari direktori repositori lokal.</p> </li> </ol> <p>Catatan:</p> <ul> <li>Repositori <code>book-tracker</code> yang baru saja kamu buat akan menjadi landasan untuk tutorial-tutorial berikutnya. Repositori ini akan terus digunakan dan berkembang seiring tutorial yang kamu ikuti.</li> <li>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!</li> <li>Oleh karena itu, pastikan kamu mengelola repositori ini dengan baik dan mengikuti tutorial-tutorial selanjutnya untuk mengembangkan kemampuan kamu dalam pemrograman berbasis platform.</li> </ul>"},{"location":"tutorial/tutorial-0/#akhir-kata","title":"Akhir Kata","text":"<p>Selamat! Kamu sudah menyelesaikan tutorial tentang penggunaan Git, GitHub, instalasi IDE, dan pengembangan proyek dengan Django.</p> <p>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!</p>"},{"location":"tutorial/tutorial-0/#referensi-tambahan","title":"Referensi Tambahan","text":"<ul> <li>About pull request merges</li> <li>Resolving a merge conflict on GitHub</li> </ul>"},{"location":"tutorial/tutorial-0/#kontributor","title":"Kontributor","text":"<ul> <li>Muhammad Iqbal Dwitama</li> <li>Muhammad Nabil Mu'afa</li> </ul>"},{"location":"tutorial/tutorial-0/#credits","title":"Credits","text":"<p>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.</p>"},{"location":"tutorial/tutorial-1/","title":"Tutorial 1: Pengenalan Aplikasi Django dan Model-View-Template (MVT) pada Django","text":"<p>Pemrograman Berbasis Platform (CSGE602022) \u2014 diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Genap 2023/2024</p>"},{"location":"tutorial/tutorial-1/#tujuan-pembelajaran","title":"Tujuan Pembelajaran","text":"<p>Setelah menyelesaikan tutorial ini, mahasiswa diharapkan untuk dapat:</p> <ul> <li>Mengerti konsep MVT pada aplikasi Django</li> <li>Mengerti bagaimana alur Django menampilkan sebuah halaman HTML</li> <li>Mengerti konfigurasi routing yang ada pada <code>urls.py</code></li> <li>Memahami kaitan models, views dan template pada Django</li> <li>Memahami pembuatan unit test pada framework Django</li> </ul>"},{"location":"tutorial/tutorial-1/#ringkasan-hasil-tutorial-0","title":"Ringkasan Hasil Tutorial 0","text":"<p>Untuk membantumu mengerjakan tutorial 1 dengan baik, kami mengharapkan hasil pengerjaan tutorial 0 sebagai berikut.</p> <ol> <li>Pada komputer lokal, terdapat direktori utama <code>book-tracker</code> yang telah diinisiasi sebagai repositori lokal.</li> <li> <p>Pada direktori utama <code>book-tracker</code> tersebut, terdapat beberapa berkas dan subdirektori berikut.</p> </li> <li> <p>Subdirektori <code>env</code>.</p> </li> <li> <p>Subdirektori proyek <code>book_tracker</code>. Berbeda dengan direktori utama, subdirektori ini terbentuk setelah menjalankan perintah</p> <pre><code>django-admin startproject book_tracker .\n</code></pre> </li> <li> <p>Berkas <code>.gitignore</code>.</p> </li> <li>Berkas <code>manage.py</code>.</li> <li>Berkas <code>requirements.txt</code>.</li> <li>(Opsional) Berkas <code>db.sqlite3</code>.</li> </ol> <p>Struktur proyek <code>book-tracker</code> pada direktori lokal adalah sebagai berikut.</p> <p></p> <ol> <li> <p>Pada repositori GitHub, pastikan repositori <code>book-tracker</code> memiliki berkas dan direktori berikut.</p> </li> <li> <p>Direktori proyek <code>book_tracker</code>. Direktori ini hasil menjalankan perintah</p> <pre><code>django-admin startproject book_tracker .\n</code></pre> </li> <li> <p>Berkas <code>.gitignore</code>.</p> </li> <li>Berkas <code>manage.py</code>.</li> <li>Berkas <code>requirements.txt</code>.</li> </ol> <p>Struktur proyek <code>book-tracker</code> pada repositori GitHub adalah sebagai berikut.</p> <p></p>"},{"location":"tutorial/tutorial-1/#pengenalan-mengenai-konsep-mvt","title":"Pengenalan Mengenai Konsep MVT","text":"<p>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).</p>"},{"location":"tutorial/tutorial-1/#apa-itu-konsep-mvt","title":"Apa Itu Konsep MVT?","text":"<p>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.</p>"},{"location":"tutorial/tutorial-1/#apa-itu-model","title":"Apa Itu Model?","text":"<p>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.</p>"},{"location":"tutorial/tutorial-1/#apa-itu-view","title":"Apa Itu View?","text":"<p>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.</p>"},{"location":"tutorial/tutorial-1/#apa-itu-template","title":"Apa Itu Template?","text":"<p>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.</p>"},{"location":"tutorial/tutorial-1/#hubungan-antara-komponen-komponen-mvt","title":"Hubungan Antara Komponen-komponen MVT","text":"<p>Secara ringkas, konsep MVT berjalan dalam kerangka berikut:</p> <ul> <li>Model: Menyimpan data dan logika aplikasi.</li> <li>View: Menampilkan data dari model dan menghubungkannya dengan template.</li> <li>Template: Menentukan tampilan antarmuka pengguna.</li> </ul>"},{"location":"tutorial/tutorial-1/#manfaat-mvt","title":"Manfaat MVT","text":"<ul> <li>Pemisahan Tugas</li> </ul> <p>MVT memisahkan tugas antara logika aplikasi, tampilan, dan data, sehingga memungkinkan pengembang untuk bekerja pada setiap komponen secara terpisah.</p> <ul> <li>Kode yang Mudah Dikelola</li> </ul> <p>Dengan pemisahan tugas yang jelas, kode menjadi lebih terorganisir dan mudah dikelola.</p> <ul> <li>Penggunaan Kembali</li> </ul> <p>Kode dapat digunakan kembali dalam berbagai bagian aplikasi yang berbeda.</p> <ul> <li>Skalabilitas</li> </ul> <p>Struktur MVT mendukung skalabilitas dengan memungkinkan pengembangan paralel pada setiap komponen.</p> <p>Catatan:</p> <ul> <li>Konsep MVT sangat terkait dengan framework Django dalam pengembangan web dengan bahasa pemrograman Python.</li> <li>Dalam praktiknya, pemahaman yang baik mengenai konsep MVT akan membantu kamu dalam merancang aplikasi web yang lebih terstruktur dan mudah dikelola.</li> </ul>"},{"location":"tutorial/tutorial-1/#tutorial-membuat-aplikasi-django-beserta-konfigurasi-model","title":"Tutorial: Membuat Aplikasi Django beserta Konfigurasi Model","text":"<p>Dalam tutorial ini, akan dijelaskan mengenai konsep aplikasi dan proyek dalam Django.</p> <p>Apa Itu Proyek dan Aplikasi dalam Django?</p> <ul> <li> <p>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.</p> </li> <li> <p>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.</p> </li> </ul> <p>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 <code>book-tracker</code>, sementara itu direktori proyek memiliki nama <code>book_tracker</code>. Perbedaan hanya terletak pada penggunaan dash (<code>-</code>) dan underscore (<code>_</code>).</p>"},{"location":"tutorial/tutorial-1/#langkah-1-persiapan-awal","title":"Langkah 1: Persiapan Awal","text":"<ol> <li> <p>Buka direktori utama <code>book-tracker</code>.</p> </li> <li> <p>Sebelum memulai, pastikan kamu berada di direktori utama <code>book-tracker</code> yang telah dibuat pada tutorial sebelumnya.</p> </li> <li> <p>Di dalam direktori ini, kamu akan melanjutkan pengembangan proyek Django.</p> </li> <li> <p>Buka terminal atau command prompt dan pastikan direktori kerja kamu adalah direktori utama <code>book-tracker</code>.</p> </li> <li> <p>Aktifkan virtual environment yang telah dibuat sebelumnya. Jalankan perintah berikut sesuai dengan sistem operasi perangkat kamu.</p> </li> <li> <p>Windows:</p> <pre><code>env\\Scripts\\activate.bat\n</code></pre> </li> <li> <p>Unix (Linux &amp; Mac OS):</p> <pre><code>source env/bin/activate\n</code></pre> </li> </ol>"},{"location":"tutorial/tutorial-1/#langkah-2-membuat-aplikasi-main-dalam-proyek-book-tracker","title":"Langkah 2: Membuat Aplikasi <code>main</code> dalam Proyek Book Tracker","text":"<p>Kamu akan membuat aplikasi baru bernama <code>main</code> dalam proyek book tracker.</p> <ol> <li>Jalankan perintah berikut untuk membuat aplikasi baru.</li> </ol> <pre><code>python manage.py startapp main\n</code></pre> <p>Setelah perintah di atas dijalankan, akan terbentuk direktori baru dengan nama <code>main</code> yang akan berisi struktur awal untuk aplikasimu.</p> <p>Mungkin kamu cukup bingung dengan istilah direktori utama, direktori proyek, atau direktori aplikasi. Akan tetapi, seiring berjalannya waktu, kamu pasti bisa!</p> <ol> <li> <p>Daftarkan aplikasi <code>main</code> ke dalam proyek.</p> </li> <li> <p>Buka berkas <code>settings.py</code> di dalam direktori proyek <code>book_tracker</code>.</p> </li> <li>Temukan variabel <code>INSTALLED_APPS</code>.</li> <li> <p>Tambahkan <code>'main'</code> ke dalam daftar aplikasi yang ada.</p> <pre><code>INSTALLED_APPS = [\n    ...,\n    'main',\n    ...\n]\n</code></pre> </li> </ol> <p>Dengan melakukan langkah-langkah tersebut, kamu telah mendaftarkan aplikasi <code>main</code> ke dalam proyek book tracker kamu sehingga proyekmu sudah mengenali bahwa terdapat aplikasi <code>main</code> yang dapat dijalankan.</p>"},{"location":"tutorial/tutorial-1/#tutorial-implementasi-template-dasar","title":"Tutorial: Implementasi Template Dasar","text":"<p>Kamu akan membuat template <code>main.html</code> di dalam direktori baru bernama <code>templates</code> pada aplikasi <code>main</code>. Template ini akan digunakan untuk menampilkan data book tracker kamu.</p> <p>Saat ini, aplikasi book tracker belum menampilkan data apapun. Data akan ditampilkan pada tutorial selanjutnya.</p>"},{"location":"tutorial/tutorial-1/#langkah-1-membuat-dan-mengisi-berkas-mainhtml","title":"Langkah 1: Membuat dan Mengisi Berkas <code>main.html</code>","text":"<p>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.</p> <p>Hint: Kamu akan mempelajari HTML lebih lanjut di tutorial 4.</p> <ol> <li> <p>Buat direktori baru bernama <code>templates</code> di dalam direktori aplikasi <code>main</code>.</p> </li> <li> <p>Di dalam direktori <code>templates</code>, buat berkas baru bernama <code>main.html</code> dengan isi sebagai berikut. Gantilah nilai yang sesuai dengan data kamu.</p> </li> </ol> <pre><code>&lt;h1&gt;Book Tracker Page&lt;/h1&gt;\n\n&lt;h5&gt;Name:&lt;/h5&gt;\n&lt;p&gt;Pak Bepe&lt;/p&gt;\n&lt;!-- Ubahlah sesuai dengan nama kamu --&gt;\n&lt;h5&gt;Class:&lt;/h5&gt;\n&lt;p&gt;PBP A&lt;/p&gt;\n&lt;!-- Ubahlah sesuai dengan kelas kamu --&gt;\n</code></pre> <ol> <li> <p>Buka berkas HTML di web browser.</p> </li> <li> <p>Sebelum dihubungkan dengan aplikasi, cobalah membuka berkas <code>main.html</code> di web browser-mu.</p> </li> <li>Perlu dicatat bahwa pada tahap ini hanya untuk memeriksa tampilan dasar HTML dan belum terhubung dengan Django.</li> <li> <p>Berikut merupakan contoh tampilan HTML yang diharapkan.</p> <p></p> </li> </ol>"},{"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 <code>models.py</code> dalam Aplikasi <code>main</code>","text":"<p>Pada langkah ini, kamu akan mengubah berkas <code>models.py</code> yang terdapat di dalam direktori aplikasi <code>main</code> untuk mendefinisikan model baru.</p> <ol> <li> <p>Buka berkas <code>models.py</code> pada direktori aplikasi <code>main</code>.</p> </li> <li> <p>Isi berkas <code>models.py</code> dengan kode berikut.</p> </li> </ol> <pre><code>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</code></pre> <p>Penjelasan Kode:</p> <ul> <li><code>models.Model</code> adalah kelas dasar yang digunakan untuk mendefinisikan model dalam Django.</li> <li><code>Book</code> adalah nama model yang kamu definisikan.</li> <li><code>name</code> (nama), <code>date_added</code> (tanggal tambah), <code>page</code> (halaman), dan <code>description</code> (deskripsi) adalah atribut atau field pada model. Setiap field memiliki tipe data yang sesuai seperti <code>CharField</code>, <code>DateField</code>, <code>IntegerField</code>, dan <code>TextField</code>.</li> </ul>"},{"location":"tutorial/tutorial-1/#langkah-2-membuat-dan-mengaplikasikan-migrasi-model","title":"Langkah 2: Membuat dan Mengaplikasikan Migrasi Model","text":"<p>Apa itu migrasi model?</p> <ul> <li>Migrasi model adalah cara Django melacak perubahan pada model basis data kamu.</li> <li>Migrasi ini adalah instruksi untuk mengubah struktur tabel basis data sesuai dengan perubahan model yang didefinisikan dalam kodemu.</li> </ul> <p>Bagaimana cara melakukan migrasi model?</p> <ol> <li>Jalankan perintah berikut pada terminal atau command prompt di direktori utama untuk membuat migrasi model.</li> </ol> <pre><code>python manage.py makemigrations\n</code></pre> <p><code>makemigrations</code> menciptakan berkas migrasi yang berisi perubahan model yang belum diaplikasikan ke dalam basis data.</p> <ol> <li>Masih di direktori utama, jalankan perintah berikut untuk menerapkan migrasi ke dalam basis data lokal.</li> </ol> <pre><code>python manage.py migrate\n</code></pre> <p><code>migrate</code> mengaplikasikan perubahan model yang tercantum dalam berkas migrasi ke basis data.</p> <p>Setiap kali kamu melakukan perubahan pada model, seperti menambahkan atau mengubah atribut, kamu perlu melakukan migrasi untuk merefleksikan perubahan tersebut.</p>"},{"location":"tutorial/tutorial-1/#tutorial-menghubungkan-view-dengan-template","title":"Tutorial: Menghubungkan View dengan Template","text":"<p>Dalam tutorial ini, kamu akan menghubungkan view dengan template menggunakan Django. Langkah-langkah ini akan menjelaskan bagaimana membuat fungsi view <code>show_main</code> dalam aplikasi <code>main</code> dan me-render template dengan data yang telah diambil dari model.</p>"},{"location":"tutorial/tutorial-1/#langkah-1-mengintegrasikan-komponen-mvt","title":"Langkah 1: Mengintegrasikan Komponen MVT","text":"<p>Kamu akan mengimpor modul yang diperlukan dan membuat fungsi view <code>show_main</code>.</p> <ol> <li> <p>Buka berkas <code>views.py</code> yang terletak di dalam berkas aplikasi <code>main</code>.</p> </li> <li> <p>Tambahkan baris-baris impor berikut di bagian paling atas berkas apabila belum ada.</p> </li> </ol> <pre><code>from django.shortcuts import render\n</code></pre> <p>Penjelasan Kode:</p> <p><code>from django.shortcuts import render</code> berguna untuk mengimpor fungsi render dari modul <code>django.shortcuts</code>. Fungsi render digunakan untuk me-render tampilan HTML dengan menggunakan data yang diberikan.</p> <ol> <li>Tambahkan fungsi <code>show_main</code> di bawah impor:</li> </ol> <pre><code>def show_main(request):\n    context = {\n        'name': 'Pak Bepe',\n        'class': 'PBP A'\n    }\n\n    return render(request, \"main.html\", context)\n</code></pre> <p>Penjelasan Kode:</p> <ul> <li><code>def show_main(request)</code> merupakan deklarasi fungsi <code>show_main</code>, yang menerima parameter <code>request</code>. Fungsi ini akan mengatur permintaan HTTP dan mengembalikan tampilan yang sesuai.</li> <li> <p><code>context</code> adalah dictionary yang berisi data yang akan dikirimkan ke tampilan. Pada konteks ini, dua data disertakan, yaitu:</p> <ul> <li><code>name</code>: Data nama.</li> <li><code>class</code>: Data kelas.</li> </ul> </li> <li> <p><code>return render(request, \"main.html\", context)</code> berguna untuk me-render tampilan <code>main.html</code> dengan menggunakan fungsi <code>render</code>. Fungsi <code>render</code> mengambil tiga argumen:</p> <ul> <li><code>request</code>: Ini adalah objek permintaan HTTP yang dikirim oleh pengguna.</li> <li><code>main.html</code>: Ini adalah nama berkas template yang akan digunakan untuk me-render tampilan.</li> <li><code>context</code>: Ini adalah dictionary yang berisi data yang akan diteruskan ke tampilan untuk digunakan dalam penampilan dinamis.</li> </ul> </li> </ul>"},{"location":"tutorial/tutorial-1/#langkah-2-modifikasi-template","title":"Langkah 2: Modifikasi Template","text":"<p>Sekarang, kamu akan mengubah template <code>main.html</code> agar dapat menampilkan data yang telah diambil dari model.</p> <ol> <li> <p>Buka berkas <code>main.html</code> yang telah dibuat sebelumnya dalam direktori <code>templates</code> pada direktori <code>main</code>.</p> </li> <li> <p>Ubah nama dan kelas yang sebelumnya dibuat secara statis menjadi kode Django yang sesuai untuk menampilkan data.</p> </li> </ol> <pre><code>...\n&lt;h5&gt;Name:&lt;/h5&gt;\n&lt;p&gt;{{ name }}&lt;/p&gt;\n&lt;p&gt;&lt;/p&gt;\n&lt;h5&gt;Class:&lt;/h5&gt;\n&lt;p&gt;{{ class }}&lt;/p&gt;\n</code></pre> <p>Penjelasan Kode:</p> <p>Sintaks Django <code>{{ name }}</code> dan <code>{{ class }}</code> digunakan untuk menampilkan nilai dari variabel yang telah didefinisikan dalam <code>context</code>.</p>"},{"location":"tutorial/tutorial-1/#tutorial-mengonfigurasi-routing-url","title":"Tutorial: Mengonfigurasi Routing URL","text":"<p>Kamu akan mengatur routing URL agar aplikasi <code>main</code> dapat diakses melalui web browser.</p>"},{"location":"tutorial/tutorial-1/#langkah-1-mengonfigurasi-routing-url-aplikasi-main","title":"Langkah 1: Mengonfigurasi Routing URL Aplikasi <code>main</code>","text":"<ol> <li>Buatlah berkas baru bernama<code>urls.py</code> di dalam direktori <code>main</code>.</li> <li>Isi <code>urls.py</code> dengan kode berikut.</li> </ol> <pre><code>from django.urls import path\nfrom main.views import show_main\n\napp_name = 'main'\n\nurlpatterns = [\n    path('', show_main, name='show_main'),\n]\n</code></pre> <p>Penjelasan Kode dalam <code>urls.py</code> pada Aplikasi <code>main</code>:</p> <ul> <li>Berkas <code>urls.py</code> pada aplikasi <code>main</code> bertanggung jawab untuk mengatur rute URL yang terkait dengan aplikasi <code>main</code>.</li> <li>Impor <code>path</code> dari <code>django.urls</code> untuk mendefinisikan pola URL.</li> <li>Gunakan fungsi <code>show_main</code> dari modul <code>main.views</code> sebagai tampilan yang akan ditampilkan ketika URL terkait diakses.</li> <li>Nama <code>app_name</code> diberikan untuk memberikan nama unik pada pola URL dalam aplikasi.</li> </ul>"},{"location":"tutorial/tutorial-1/#langkah-2-mengonfigurasi-routing-url-proyek","title":"Langkah 2: Mengonfigurasi Routing URL Proyek","text":"<p>Kamu akan menambahkan rute URL dalam <code>urls.py</code> pada proyek untuk menghubungkannya ke tampilan <code>main</code>.</p> <ol> <li>Buka berkas <code>urls.py</code> di dalam direktori proyek <code>book_tracker</code>, bukan yang ada di dalam direktori aplikasi <code>main</code>.</li> <li>Impor fungsi <code>include</code> dari <code>django.urls</code>.</li> </ol> <pre><code>...\nfrom django.urls import path, include\n...\n</code></pre> <ol> <li>Tambahkan rute URL seperti berikut untuk mengarahkan ke tampilan <code>main</code> di dalam variabel <code>urlpatterns</code>.</li> </ol> <pre><code>urlpatterns = [\n    ...\n    path('', include('main.urls')),\n    ...\n]\n</code></pre> <p>Penjelasan:</p> <ul> <li>Berkas <code>urls.py</code> pada proyek bertanggung jawab untuk mengatur rute URL dalam skala proyek.</li> <li>Fungsi <code>include</code> digunakan untuk mengimpor rute URL dari aplikasi lain (dalam hal ini, dari aplikasi <code>main</code>) ke dalam berkas <code>urls.py</code> proyek.</li> <li>Path URL <code>''</code> akan diarahkan ke rute yang didefinisikan dalam berkas <code>urls.py</code> aplikasi <code>main</code>. Path URL dibiarkan berupa string kosong agar halaman aplikasi <code>main</code> dapat diakses secara langsung.</li> </ul> <p>Sebagai bayangan, apabila kamu menggunakan path <code>'main/'</code> pada contoh di atas, maka kamu perlu mengakses halaman <code>http://localhost:8000/main/</code> untuk mengakses halaman aplikasi <code>main</code>. Karena path yang ditentukan adalah <code>''</code>, maka kamu dapat mengakses aplikasi <code>main</code> melalui URL <code>http://localhost:8000/</code> saja.</p> <ol> <li> <p>Jalankan proyek Django dengan menjalankan perintah <code>python manage.py runserver</code> pada terminal atau command prompt di direktori utama.</p> </li> <li> <p>Bukalah http://localhost:8000/ di web browser favoritmu untuk melihat halaman yang sudah kamu buat.</p> </li> </ol> <p>Dengan langkah-langkah di atas, kamu telah berhasil mengimplementasikan tampilan dasar dalam aplikasi <code>main</code> dan menghubungkannya dengan rute URL proyek. Pastikan kamu memahami setiap langkah dan informasi yang diberikan untuk mengaktifkan tampilan dalam proyek Django-mu</p>"},{"location":"tutorial/tutorial-1/#apa-bedanya-urlspy-pada-aplikasi-dan-urlspy-pada-proyek","title":"Apa bedanya <code>urls.py</code> pada aplikasi dan <code>urls.py</code> pada proyek?","text":"<ul> <li>Berkas <code>urls.py</code> pada aplikasi mengatur rute URL spesifik untuk fitur-fitur dalam aplikasi tersebut</li> <li><code>urls.py</code> pada proyek mengarahkan rute URL tingkat proyek dan dapat mengimpor rute URL dari berkas <code>urls.py</code> aplikasi-aplikasi, memungkinkan aplikasi dalam proyek Django untuk bersifat modular dan terpisah.</li> </ul>"},{"location":"tutorial/tutorial-1/#tutorial-pengenalan-django-unit-testing","title":"Tutorial: Pengenalan Django Unit Testing","text":"<p>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.</p>"},{"location":"tutorial/tutorial-1/#langkah-1-membuat-unit-test","title":"Langkah 1: Membuat Unit Test","text":"<ol> <li>Bukalah berkas <code>tests.py</code> pada direktori aplikasi <code>main</code>.</li> <li>Isi <code>tests.py</code> dengan kode berikut.</li> </ol> <pre><code>from django.test import TestCase, Client\n\nclass mainTest(TestCase):\n    def test_main_url_is_exist(self):\n        response = Client().get('')\n        self.assertEqual(response.status_code, 200)\n\n    def test_main_using_main_template(self):\n        response = Client().get('')\n        self.assertTemplateUsed(response, 'main.html')\n</code></pre> <p>Penjelasan:</p> <ul> <li><code>test_main_url_is_exist</code> adalah tes untuk mengecek apakah path URL <code>''</code> dapat diakses. Path <code>''</code> artinya hanya <code>http://localhost:8000/</code> tanpa path tambahan di bagian belakang URL.</li> <li><code>test_main_using_main_template</code> adalah tes untuk mengecek apakah halaman <code>''</code> di-render menggunakan template <code>main.html</code>.</li> </ul>"},{"location":"tutorial/tutorial-1/#langkah-2-menjalankan-test","title":"Langkah 2: Menjalankan Test","text":"<ol> <li>Jalankan tes dengan menggunakan perintah berikut.</li> </ol> <pre><code>python manage.py test\n</code></pre> <ol> <li>Jika tes berhasil, akan mengeluarkan informasi berikut.</li> </ol> <pre><code>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</code></pre> <p>Selamat! Kamu telah berhasil menulis Django Test dan menjalankannya.</p>"},{"location":"tutorial/tutorial-1/#penutup","title":"Penutup","text":"<ol> <li>Pada akhir tutorial ini, struktur direktori lokalmu akan terlihat seperti ini.</li> </ol> <p>Huruf U menandakan bahwa terdapat berkas baru yang belum dilacak oleh Git. Huruf M menandakan bahwa terdapat berkas yang telah dilacak sebelumnya yang dimodifikasi.</p> <ol> <li>Sebelum melakukan langkah ini, pastikan struktur direktori lokal sudah benar. Selanjunya, lakukan <code>add</code>, <code>commit</code> dan <code>push</code> untuk memperbarui repositori GitHub.</li> <li>Jalankan perintah berikut untuk melakukan <code>add</code>, <code>commit</code> dan <code>push</code>.</li> </ol> <pre><code>git add .\ngit commit -m \"&lt;pesan_commit&gt;\"\ngit push origin &lt;branch_utama&gt;\n</code></pre> <ul> <li>Ubah <code>&lt;pesan_commit&gt;</code> sesuai dengan keinginan. Contoh: <code>git commit -m \"tutorial 1 selesai\"</code>.</li> <li> <p>Ubah <code>&lt;branch_utama&gt;</code> sesuai dengan nama branch utamamu. Contoh: <code>git push origin main</code> atau <code>git push origin master</code>.</p> </li> <li> <p>Berikut struktur direktori GitHub setelah kamu menyelesaikan tutorial ini.</p> </li> </ul> <p></p>"},{"location":"tutorial/tutorial-1/#referensi-tambahan","title":"Referensi Tambahan","text":"<ul> <li>Django Unit Testing</li> </ul>"},{"location":"tutorial/tutorial-1/#kontributor","title":"Kontributor","text":"<ul> <li>Muhammad Nabil Mu'afa</li> <li>Muhammad Iqbal Dwitama</li> </ul>"},{"location":"tutorial/tutorial-1/#credits","title":"Credits","text":"<p>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.</p>"},{"location":"tutorial/tutorial-2/","title":"Tutorial 2: Form dan Data Delivery","text":"<p>Pemrograman Berbasis Platform (CSGE602022) \u2014 diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Genap 2023/2024</p>"},{"location":"tutorial/tutorial-2/#tujuan-pembelajaran","title":"Tujuan Pembelajaran\u200b","text":"<p>Setelah menyelesaikan tutorial ini, mahasiswa diharapkan untuk dapat:</p> <ul> <li>Mengetahui <code>XML</code> dan <code>JSON</code> sebagai salah satu metode data delivery</li> <li>Memahami cara kerja submisi data yang diberikan oleh pengguna menggunakan elemen <code>form</code></li> <li>Memahami cara mengirimkan data menggunakan format <code>XML</code> dan <code>JSON</code></li> <li>Memahami cara mengambil data spesifik berdasarkan <code>ID</code></li> </ul>"},{"location":"tutorial/tutorial-2/#pengenalan-data-delivery","title":"Pengenalan Data Delivery","text":"<p>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.</p>"},{"location":"tutorial/tutorial-2/#xml-extensible-markup-language","title":"XML (Extensible Markup Language)","text":"<p>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.</p> <p>Contoh Format XML:</p> <pre><code>&lt;?xml version=\"1.0\" encoding=\"UTF-8\"?&gt;\n&lt;person&gt;\n    &lt;name&gt;Alice Johnson&lt;/name&gt;\n    &lt;age&gt;25&lt;/age&gt;\n    &lt;address&gt;\n        &lt;street&gt;123 Main St&lt;/street&gt;\n        &lt;city&gt;Los Angeles&lt;/city&gt;\n        &lt;zip&gt;90001&lt;/zip&gt;\n    &lt;/address&gt;\n&lt;/person&gt;\n</code></pre> <p>XML di atas sangatlah self-descriptive:</p> <ul> <li>Ada informasi nama (<code>name</code>)</li> <li>Ada informasi umur (<code>age</code>)</li> <li>Ada informasi alamat (<code>address</code>)</li> <li>Ada informasi jalan (<code>street</code>)</li> <li>Ada informasi kota (<code>city</code>)</li> <li>Ada informasi kode pos (<code>zip</code>)</li> </ul> <p>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, <code>&lt;person&gt;</code> adalah root element.</p> <p>Baris <code>&lt;?xml version=\"1.0\" encoding=\"UTF-8\"?&gt;</code> 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 <code>&lt;person&gt;</code> dianggap berbeda dengan tag <code>&lt;Person&gt;</code>.</p>"},{"location":"tutorial/tutorial-2/#json-javascript-object-notation","title":"JSON (JavaScript Object Notation)","text":"<p>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.</p> <p>Contoh format JSON:</p> <pre><code>{\n  \"name\": \"Alice Johnson\",\n  \"age\": 25,\n  \"address\": {\n    \"street\": \"123 Main St\",\n    \"city\": \"Los Angeles\",\n    \"zip\": \"90001\"\n  }\n}\n</code></pre> <p>Data pada JSON disimpan dalam bentuk key dan value. Pada contoh di atas yang menjadi key adalah <code>name</code>, <code>age</code>, dan <code>address</code>. Value dapat berupa tipe data primitif (string, number, boolean) ataupun berupa objek.</p>"},{"location":"tutorial/tutorial-2/#pre-tutorial-notes","title":"Pre-Tutorial Notes","text":"<p>Sebelum kamu memulai, serta untuk membantumu mengikuti tutorial 2 dengan baik, kami mengharapkan beberapa hasil berikut dari tutorial 1:</p> <ul> <li>Struktur direktori <code>book-tracker</code> secara lokal adalah sebagai berikut.</li> </ul> <p></p> <ul> <li>Struktur repository <code>book-tracker</code> pada GitHub adalah sebagai berikut.</li> </ul> <p></p>"},{"location":"tutorial/tutorial-2/#tutorial-implementasi-skeleton-sebagai-kerangka-views","title":"Tutorial: Implementasi Skeleton sebagai Kerangka Views","text":"<p>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.</p> <ol> <li>Buat folder <code>templates</code> pada root folder (direktori utama) dan buatlah sebuah berkas HTML baru bernama <code>base.html</code>. Berkas <code>base.html</code> berfungsi sebagai template dasar yang dapat digunakan sebagai kerangka umum untuk halaman web lainnya di dalam proyek. Isilah berkas <code>base.html</code> tersebut dengan kode berikut:</li> </ol> <pre><code>{% load static %}\n&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n  &lt;head&gt;\n    &lt;meta charset=\"UTF-8\" /&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" /&gt;\n    {% block meta %} {% endblock meta %}\n  &lt;/head&gt;\n\n  &lt;body&gt;\n    {% block content %} {% endblock content %}\n  &lt;/body&gt;\n&lt;/html&gt;\n</code></pre> <p>Baris-baris yang dikurung dalam <code>{% ... %}</code> disebut dengan template tags Django. Baris-baris inilah yang akan berfungsi untuk memuat data secara dinamis dari Django ke HTML.</p> <ol> <li>Buka <code>settings.py</code> yang ada pada direktori proyek (<code>book_tracker</code>) dan carilah baris yang mengandung variabel <code>TEMPLATES</code>. Sesuaikan kode yang ada dengan potongan kode berikut agar berkas <code>base.html</code> terdeteksi sebagai berkas template.</li> </ol> <pre><code>...\nTEMPLATES = [\n    {\n        'BACKEND': 'django.template.backends.django.DjangoTemplates',\n        'DIRS': [BASE_DIR / 'templates'], # Tambahkan konten baris ini\n        'APP_DIRS': True,\n        ...\n    }\n]\n...\n</code></pre> <ol> <li>Pada subdirektori <code>templates</code> yang ada pada direktori <code>main</code> (<code>main/templates/</code>), ubahlah kode berkas <code>main.html</code> yang telah dibuat di tutorial sebelumnya menjadi sebagai berikut.</li> </ol> <pre><code>{% extends 'base.html' %} {% block content %}\n&lt;h1&gt;Book Tracker Page&lt;/h1&gt;\n\n&lt;h5&gt;Name:&lt;/h5&gt;\n&lt;p&gt;{{name}}&lt;/p&gt;\n\n&lt;h5&gt;Class:&lt;/h5&gt;\n&lt;p&gt;{{class}}&lt;/p&gt;\n{% endblock content %}\n</code></pre> <p>Perhatikan bahwa kode diatas merupakan kode yang sama dengan kode pada <code>main.html</code> pada tutorial sebelumnya. Perbedaannya adalah pada kode diatas, kita menggunakan <code>base.html</code> sebagai template utama.</p>"},{"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":"<p>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.</p> <ol> <li>Buat berkas baru pada direktori <code>main</code> dengan nama <code>forms.py</code> untuk membuat struktur form yang dapat menerima data buku baru. Tambahkan kode berikut ke dalam berkas <code>forms.py</code>.</li> </ol> <pre><code>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</code></pre> <p>Penjelasan Kode:</p> <ul> <li><code>model = Book</code> untuk menunjukkan model yang akan digunakan untuk form. Ketika data dari form disimpan, isi dari form akan disimpan menjadi sebuah objek <code>Book</code>.</li> <li> <p><code>fields = [\"name\", \"page\", \"description\"]</code> untuk menunjukkan field dari model Book yang digunakan untuk form. Field <code>date_added</code> tidak dimasukkan ke list <code>fields</code> karena tanggal ditambahkan secara otomatis.</p> </li> <li> <p>Buka berkas <code>views.py</code> yang ada pada folder <code>main</code> dan tambahkan beberapa import berikut pada bagian paling atas.</p> </li> </ul> <pre><code>from django.shortcuts import render, redirect   # Tambahkan import redirect di baris ini\nfrom main.forms import BookForm\nfrom main.models import Book\n</code></pre> <ol> <li>Masih di berkas yang sama, buat fungsi baru dengan nama <code>create_book</code> yang menerima parameter <code>request</code>. Tambahkan potongan kode di bawah ini untuk menghasilkan formulir yang dapat menambahkan data buku secara otomatis ketika data di-submit dari form.</li> </ol> <pre><code>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</code></pre> <p>Penjelasan Kode:</p> <ul> <li><code>form = BookForm(request.POST or None)</code> digunakan untuk membuat <code>BookForm</code> baru dengan memasukkan QueryDict berdasarkan input dari user pada <code>request.POST</code>.</li> <li><code>form.is_valid()</code> digunakan untuk memvalidasi isi input dari form tersebut.</li> <li><code>form.save()</code> digunakan untuk membuat dan menyimpan data dari form tersebut.</li> <li> <p><code>return redirect('main:show_main')</code> digunakan untuk melakukan redirect ke fungsi <code>show_main</code> pada views aplikasi <code>main</code> setelah data form berhasil disimpan.</p> </li> <li> <p>Ubahlah fungsi <code>show_main</code> yang sudah ada pada berkas <code>views.py</code> menjadi seperti berikut.</p> </li> </ul> <pre><code>def show_main(request):\n    books = Book.objects.all()\n\n    context = {\n        'name': 'Pak Bepe',\n        'class': 'PBP A',\n        'books': books\n    }\n\n    return render(request, \"main.html\", context)\n</code></pre> <p>Penjelasan Kode:</p> <p>Fungsi <code>Book.objects.all()</code> digunakan untuk mengambil seluruh objek <code>Book</code> yang tersimpan pada database.</p> <ol> <li>Buka <code>urls.py</code> yang ada pada direktori <code>main</code> dan import fungsi <code>create_book</code> yang sudah kamu buat tadi.</li> </ol> <pre><code>from main.views import show_main, create_book\n</code></pre> <ol> <li>Tambahkan path URL ke dalam variabel <code>urlpatterns</code> pada <code>urls.py</code> di <code>main</code> untuk mengakses fungsi yang sudah di-import pada poin sebelumnya.</li> </ol> <pre><code>urlpatterns = [\n   ...\n   path('create-book', create_book, name='create_book'),\n]\n</code></pre> <ol> <li>Buat berkas HTML baru dengan nama <code>create_book.html</code> pada direktori <code>main/templates</code>. Isi <code>create_book.html</code> dengan kode berikut.</li> </ol> <pre><code>{% extends 'base.html' %} {% block content %}\n&lt;h1&gt;Add New Book&lt;/h1&gt;\n\n&lt;form method=\"POST\"&gt;\n  {% csrf_token %}\n  &lt;table&gt;\n    {{ form.as_table }}\n    &lt;tr&gt;\n      &lt;td&gt;&lt;/td&gt;\n      &lt;td&gt;\n        &lt;input type=\"submit\" value=\"Add Book\" /&gt;\n      &lt;/td&gt;\n    &lt;/tr&gt;\n  &lt;/table&gt;\n&lt;/form&gt;\n\n{% endblock %}\n</code></pre> <p>Penjelasan Kode:</p> <ul> <li><code>&lt;form method=\"POST\"&gt;</code> digunakan untuk menandakan block untuk form dengan metode POST.</li> <li><code>{% csrf_token %}</code> adalah token yang berfungsi sebagai security. Token ini di-generate secara otomatis oleh Django untuk mencegah serangan berbahaya.</li> <li><code>{{ form.as_table }}</code> adalah template tag yang digunakan untuk menampilkan fields form yang sudah dibuat pada <code>forms.py</code> sebagai table.</li> <li> <p><code>&lt;input type=\"submit\" value=\"Add Book\"/&gt;</code> digunakan sebagai tombol submit untuk mengirimkan request ke view <code>create_book(request)</code>.</p> </li> <li> <p>Buka <code>main.html</code> dan tambahkan kode berikut di dalam <code>{% block content %}</code> untuk menampilkan data produk dalam bentuk table serta tombol \"Add New Book\" yang akan redirect ke halaman form.</p> </li> </ul> <pre><code>...\n&lt;table&gt;\n  &lt;tr&gt;\n    &lt;th&gt;Name&lt;/th&gt;\n    &lt;th&gt;Page&lt;/th&gt;\n    &lt;th&gt;Description&lt;/th&gt;\n    &lt;th&gt;Date Added&lt;/th&gt;\n  &lt;/tr&gt;\n\n  {% comment %} Berikut cara memperlihatkan data produk di bawah baris ini\n  {%endcomment %} {% for book in books %}\n  &lt;tr&gt;\n    &lt;td&gt;{{book.name}}&lt;/td&gt;\n    &lt;td&gt;{{book.page}}&lt;/td&gt;\n    &lt;td&gt;{{book.description}}&lt;/td&gt;\n    &lt;td&gt;{{book.date_added}}&lt;/td&gt;\n  &lt;/tr&gt;\n  {% endfor %}\n&lt;/table&gt;\n\n&lt;br /&gt;\n\n&lt;a href=\"{% url 'main:create_book' %}\"&gt;\n  &lt;button&gt;Add New Book&lt;/button&gt;\n&lt;/a&gt;\n{% endblock content %}\n</code></pre> <ol> <li>Jalankan proyek Django-mu dengan perintah <code>python manage.py runserver</code> 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.</li> </ol>"},{"location":"tutorial/tutorial-2/#tutorial-mengembalikan-data-dalam-bentuk-xml","title":"Tutorial Mengembalikan Data dalam Bentuk XML","text":"<ol> <li>Buka <code>views.py</code> yang ada pada folder <code>main</code> dan tambahkan import <code>HttpResponse</code> dan <code>Serializer</code> pada bagian paling atas.</li> </ol> <pre><code>from django.http import HttpResponse\nfrom django.core import serializers\n</code></pre> <ol> <li>Buatlah sebuah fungsi baru yang menerima parameter request dengan nama <code>show_xml</code> dan buatlah sebuah variabel di dalam fungsi tersebut yang menyimpan hasil query dari seluruh data yang ada pada <code>Book</code>.</li> </ol> <pre><code>def show_xml(request):\n    data = Book.objects.all()\n</code></pre> <ol> <li>Tambahkan return function berupa <code>HttpResponse</code> yang berisi parameter data hasil query yang sudah diserialisasi menjadi XML dan parameter <code>content_type=\"application/xml\"</code>.</li> </ol> <pre><code>def show_xml(request):\n    data = Book.objects.all()\n    return HttpResponse(serializers.serialize(\"xml\", data), content_type=\"application/xml\")\n</code></pre> <p>Penjelasan Kode:</p> <p><code>serializers</code> digunakan untuk translate objek model menjadi format lain seperti dalam fungsi ini adalah XML.</p> <ol> <li>Buka <code>urls.py</code> yang ada pada folder <code>main</code> dan import fungsi yang sudah kamu buat tadi.</li> </ol> <pre><code>from main.views import show_main, create_book, show_xml\n</code></pre> <ol> <li>Tambahkan path url ke dalam <code>urlpatterns</code> untuk mengakses fungsi yang sudah diimpor tadi.</li> </ol> <pre><code>...\npath('xml/', show_xml, name='show_xml'),\n...\n</code></pre> <ol> <li>Jalankan proyek Django-mu dengan perintah <code>python manage.py runserver</code> dan bukalah http://localhost:8000/xml/ di browser favoritmu untuk melihat hasilnya.</li> </ol>"},{"location":"tutorial/tutorial-2/#tutorial-mengembalikan-data-dalam-bentuk-json","title":"Tutorial: Mengembalikan Data dalam Bentuk JSON","text":"<ol> <li>Buka <code>views.py</code> yang ada pada folder <code>main</code> dan buatlah sebuah fungsi baru yang menerima parameter request dengan nama <code>show_json</code> dengan sebuah variabel di dalamnya yang menyimpan hasil query dari seluruh data yang ada pada <code>Book</code>.</li> </ol> <pre><code>def show_json(request):\n    data = Book.objects.all()\n</code></pre> <ol> <li>Tambahkan return function berupa <code>HttpResponse</code> yang berisi parameter data hasil query yang sudah diserialisasi menjadi JSON dan parameter <code>content_type=\"application/json\"</code>.</li> </ol> <pre><code>def show_json(request):\n    data = Book.objects.all()\n    return HttpResponse(serializers.serialize(\"json\", data), content_type=\"application/json\")\n</code></pre> <ol> <li>Buka <code>urls.py</code> yang ada pada folder <code>main</code> dan import fungsi yang sudah kamu buat tadi.</li> </ol> <pre><code>from main.views import show_main, create_book, show_xml, show_json\n</code></pre> <ol> <li>Tambahkan path url ke dalam <code>urlpatterns</code> untuk mengakses fungsi yang sudah diimpor tadi.</li> </ol> <pre><code>...\npath('json/', show_json, name='show_json'),\n...\n</code></pre> <ol> <li>Jalankan proyek Django-mu dengan perintah <code>python manage.py runserver</code> dan bukalah http://localhost:8000/json/ (sesuaikan dengan path url yang dibuat) di browser favoritmu untuk melihat hasilnya.</li> </ol>"},{"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":"<ol> <li> <p>Buka <code>views.py</code> yang ada pada folder <code>main</code> dan buatlah dua fungsi baru yang menerima parameter <code>_request_</code> dan <code>id</code> dengan nama <code>show_xml_by_id</code> dan <code>show_json_by_id</code>.</p> </li> <li> <p>Buatlah sebuah variabel di dalam fungsi tersebut yang menyimpan hasil query dari data dengan id tertentu yang ada pada <code>Book</code>.</p> </li> </ol> <pre><code>data = Book.objects.filter(pk=id)\n</code></pre> <ol> <li> <p>Tambahkan return function berupa <code>HttpResponse</code> yang berisi parameter data hasil query yang sudah diserialisasi menjadi JSON atau XML dan parameter <code>content_type</code> dengan value <code>\"application/xml\"</code> (untuk format XML) atau <code>\"application/json\"</code> (untuk format JSON).</p> </li> <li> <p>XML</p> <pre><code>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</code></pre> </li> <li> <p>JSON</p> <pre><code>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</code></pre> </li> <li> <p>Buka <code>urls.py</code> yang ada pada folder <code>main</code> dan import fungsi yang sudah kamu buat tadi.</p> </li> </ol> <pre><code>from main.views import show_main, create_book, show_xml, show_json, show_xml_by_id, show_json_by_id\n</code></pre> <ol> <li>Tambahkan path URL ke dalam <code>urlpatterns</code> untuk mengakses fungsi yang sudah diimpor tadi.</li> </ol> <pre><code>...\npath('xml/&lt;int:id&gt;/', show_xml_by_id, name='show_xml_by_id'),\npath('json/&lt;int:id&gt;/', show_json_by_id, name='show_json_by_id'),\n...\n</code></pre> <ol> <li>Jalankan proyek Django-mu dengan perintah <code>python manage.py runserver</code> dan bukalah http://localhost:8000/xml/[id]/ atau http://localhost:8000/json/[id]/ di browser favoritmu untuk melihat hasilnya.</li> </ol> <p>Catatan: Sesuaikan <code>[id]</code> pada URL di atas dengan id objek yang ingin dilihat.</p>"},{"location":"tutorial/tutorial-2/#tutorial-penggunaan-postman-sebagai-data-viewer","title":"Tutorial: Penggunaan Postman Sebagai Data Viewer","text":"<ol> <li> <p>Pastikan server kamu sudah berjalan dengan perintah <code>python manage.py runserver</code>.</p> </li> <li> <p>Buka Postman dan buatlah sebuah request baru dengan method <code>GET</code> dan url http://localhost:8000/xml/ atau http://localhost:8000/json/ untuk mengetes apakah data terkirimkan dengan baik.</p> </li> </ol> <p>Panduan Instalasi Postman dapat dilihat pada Laman Resmi Postman.</p> <p>Contoh:    </p> <ol> <li> <p>Klik tombol <code>Send</code> untuk mengirimkan request tersebut.</p> </li> <li> <p>Kamu akan melihat hasil response dari request tersebut pada bagian bawah Postman.</p> </li> </ol> <p></p> <ol> <li>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.</li> </ol> <p></p>"},{"location":"tutorial/tutorial-2/#penutup","title":"Penutup","text":"<ol> <li>Setelah menyelesaikan tutorial ini, tampilan halaman web kamu seharusnya terlihat seperti ini.</li> </ol> <ol> <li>Pada akhir tutorial ini, struktur direktori lokalmu akan terlihat seperti ini.</li> </ol> <ol> <li> <p>Sebelum melakukan langkah ini, pastikan struktur direktori lokal sudah benar. Selanjutnya, lakukan <code>add</code>, <code>commit</code> dan <code>push</code> untuk memperbarui repositori GitHub.</p> </li> <li> <p>Jalankan perintah berikut untuk melakukan <code>add</code>, <code>commit</code> dan <code>push</code>.</p> </li> </ol> <pre><code>git add .\ngit commit -m \"&lt;pesan_commit&gt;\"\ngit push -u origin &lt;branch_utama&gt;\n</code></pre> <ul> <li>Ubah <code>&lt;pesan_commit&gt;</code> sesuai dengan keinginan. Contoh: <code>git commit -m \"tutorial 2 selesai\"</code>.</li> <li>Ubah <code>&lt;branch_utama&gt;</code> sesuai dengan nama branch utamamu. Contoh: <code>git push -u origin main</code> atau <code>git push -u origin master</code>.</li> </ul>"},{"location":"tutorial/tutorial-2/#referensi-tambahan","title":"Referensi Tambahan","text":"<ul> <li>How to install Postman</li> </ul>"},{"location":"tutorial/tutorial-2/#kontributor","title":"Kontributor","text":"<ul> <li>Muhammad Nabil Mu'afa</li> <li>Muhammad Iqbal Dwitama</li> </ul>"},{"location":"tutorial/tutorial-2/#credits","title":"Credits","text":"<p>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.</p>"},{"location":"tutorial/tutorial-3/","title":"Tutorial 3: Autentikasi, Session, dan Cookies","text":"<p>Pemrograman Berbasis Platform (CSGE602022) \u2014 diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Genap 2023/2024</p>"},{"location":"tutorial/tutorial-3/#tujuan-pembelajaran","title":"Tujuan Pembelajaran","text":"<p>Setelah menyelesaikan tutorial ini, kamu diharapkan untuk dapat:</p> <ul> <li>Memahami konsep dasar autentikasi dalam pengembangan web.</li> <li>Memahami peran dan fungsi cookie dan session dalam pengembangan web.</li> <li>Memahami cara kerja cookie dan session dalam pengembangan web.</li> <li>Mengimplementasikan cookie dan session dalam proyek web.</li> </ul>"},{"location":"tutorial/tutorial-3/#pengenalan-http","title":"Pengenalan HTTP","text":"<p>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.</p> <p>Beberapa konsep dasar mengenai HTTP:</p> <ol> <li> <p>Client/Server: Interaksi dilakukan antar client/server. Klien adalah pihak yang melakukan request dan server adalah pihak yang memberikan response.</p> </li> <li> <p>Stateless: Setiap aktivitas (request/response) bersifat independen, tidak tersimpan pada aktivitas terdahulu.</p> </li> <li> <p>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.</p> </li> <li> <p>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.</p> </li> </ol> <p>Lapisan OSI lainnya akan diajarkan pada mata kuliah Jaringan Komputer/Jaringan Komunikasi Data. Kamu dapat mencarinya sendiri jika kamu penasaran. \ud83d\ude09</p> <ol> <li> <p>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.</p> </li> <li> <p>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.</p> </li> <li> <p>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 <code>content-type:json</code>. Artinya, tipe konten yang diminta/dikirim adalah <code>json</code>. Headers juga menyimpan data cookies.</p> </li> </ol>"},{"location":"tutorial/tutorial-3/#pengenalan-cookies-session","title":"Pengenalan Cookies &amp; Session","text":"<p>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.</p> <p>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.</p>"},{"location":"tutorial/tutorial-3/#apa-yang-dimaksud-dengan-holding-state","title":"Apa yang dimaksud dengan holding state?","text":"<p>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.</p> <p>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.</p>"},{"location":"tutorial/tutorial-3/#cara-melakukan-holding-state","title":"Cara melakukan holding state?","text":"<p>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.</p> <p>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.</p> <p>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.</p> <p>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.</p> <p>Berikut tabel singkat yang menjelaskan perbedaan antara cookies, session, dan local storage secara singkat.</p> 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 <p>Beberapa tautan video yang dapat memperkaya pengetahuan terkait materi ini:</p> <ul> <li>Session &amp; Cookies</li> <li>Cookies History</li> <li>Cookies vs. Local Storage vs. Session</li> </ul>"},{"location":"tutorial/tutorial-3/#pre-tutorial-notes","title":"Pre-Tutorial Notes","text":"<p>Sebelum kamu memulai, serta untuk membantumu mengikuti tutorial 3 dengan baik, kami mengharapkan beberapa hasil berikut dari tutorial 2:</p> <ul> <li>Struktur direktori <code>book-tracker</code> secara lokal adalah sebagai berikut.</li> </ul> <p></p> <ul> <li>Struktur repository <code>book-tracker</code> pada GitHub adalah sebagai berikut.</li> </ul> <p></p>"},{"location":"tutorial/tutorial-3/#tutorial-membuat-fungsi-dan-form-registrasi","title":"Tutorial: Membuat Fungsi dan Form Registrasi","text":"<p>Pada tutorial sebelumnya, kita sudah mencoba membuat sebuah form untuk menambahkan suatu buku. Bagaimana? Mudah kan? Pada tutorial ini kita akan membuat halaman utama (<code>main</code>) menjadi restricted dengan cara membuat akun untuk pengguna. Sehingga, pengguna yang ingin mengakses halaman utama <code>main</code> harus melakukan login terlebih dahulu agar mendapatkan akses.</p> <ol> <li> <p>Aktifkan virtual environment terlebih dahulu pada terminal. (Hint: Ingat tutorial 0!)</p> </li> <li> <p>Buka <code>views.py</code> yang ada pada subdirektori <code>main</code> pada proyek kamu. Tambahkan import <code>redirect</code>, <code>UserCreationForm</code>, dan <code>messages</code> pada bagian paling atas.</p> </li> </ol> <pre><code>from django.shortcuts import redirect\nfrom django.contrib.auth.forms import UserCreationForm\nfrom django.contrib import messages\n</code></pre> <p>Penjelasan Kode:</p> <p>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.</p> <ol> <li>Tambahkan fungsi <code>register</code> di bawah ini ke dalam <code>views.py</code>. Fungsi ini berfungsi untuk menghasilkan formulir registrasi secara otomatis dan menghasilkan akun pengguna ketika data di-submit dari form.</li> </ol> <pre><code>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</code></pre> <p>Penjelasan Kode:</p> <ul> <li><code>form = UserCreationForm(request.POST)</code> digunakan untuk membuat <code>UserCreationForm</code> baru dari yang sudah di-impor sebelumnya dengan memasukkan QueryDict berdasarkan input dari user pada <code>request.POST</code>.</li> <li><code>form.is_valid()</code> digunakan untuk memvalidasi isi input dari form tersebut.</li> <li><code>form.save()</code> digunakan untuk membuat dan menyimpan data dari form tersebut.</li> <li><code>messages.success(request, 'Your account has been successfully created!')</code> digunakan untuk menampilkan pesan kepada pengguna setelah melakukan suatu aksi.</li> <li> <p><code>return redirect('main:show_main')</code> digunakan untuk melakukan redirect setelah data form berhasil disimpan.</p> </li> <li> <p>Buatlah berkas HTML baru dengan nama <code>register.html</code> pada direktori <code>main/templates</code>. Isi dari <code>register.html</code> dapat kamu isi dengan template berikut.</p> </li> </ul> <pre><code>{% extends 'base.html' %} \n\n{% block meta %}\n&lt;title&gt;Register&lt;/title&gt;\n{% endblock meta %} \n\n{% block content %}\n\n&lt;div class=\"login\"&gt;\n  &lt;h1&gt;Register&lt;/h1&gt;\n\n  &lt;form method=\"POST\"&gt;\n    {% csrf_token %}\n    &lt;table&gt;\n      {{ form.as_table }}\n      &lt;tr&gt;\n        &lt;td&gt;&lt;/td&gt;\n        &lt;td&gt;&lt;input type=\"submit\" name=\"submit\" value=\"Daftar\" /&gt;&lt;/td&gt;\n      &lt;/tr&gt;\n    &lt;/table&gt;\n  &lt;/form&gt;\n\n  {% if messages %}\n  &lt;ul&gt;\n    {% for message in messages %}\n    &lt;li&gt;{{ message }}&lt;/li&gt;\n    {% endfor %}\n  &lt;/ul&gt;\n  {% endif %}\n&lt;/div&gt;\n\n{% endblock content %}\n</code></pre> <ol> <li>Buka <code>urls.py</code> yang ada pada subdirektori <code>main</code> dan impor fungsi yang sudah kamu buat tadi.</li> </ol> <pre><code>from main.views import register\n</code></pre> <ol> <li>Tambahkan path url ke dalam <code>urlpatterns</code> untuk mengakses fungsi yang sudah diimpor tadi.</li> </ol> <pre><code> urlpatterns = [\n     ...\n     path('register/', register, name='register'),\n ]\n</code></pre> <p>Kita sudah menambahkan formulir registrasi akun dan membuat mekanisme <code>register</code>. Selanjutnya, kita akan membuat form login agar pengguna dapat melakukan autentikasi akun.</p>"},{"location":"tutorial/tutorial-3/#tutorial-membuat-fungsi-login","title":"Tutorial: Membuat Fungsi Login","text":"<ol> <li>Buka kembali <code>views.py</code> yang ada pada subdirektori <code>main</code>. Tambahkan import <code>authenticate</code> dan <code>login</code> pada bagian paling atas.</li> </ol> <pre><code>from django.contrib.auth import authenticate, login\n</code></pre> <p>Penjelasan Kode:</p> <p>Singkatnya, fungsi <code>authenticate</code> dan <code>login</code> yang diimport diatas adalah fungsi bawaan Django yang dapat digunakan untuk melakukan autentikasi dan login (jika autentikasi berhasil). Selengkapnya dapat dibaca di sini.</p> <ol> <li>Tambahkan fungsi <code>login_user</code> di bawah ini ke dalam <code>views.py</code>. Fungsi ini berfungsi untuk mengautentikasi pengguna yang ingin login.</li> </ol> <pre><code>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</code></pre> <p>Penjelasan Kode:</p> <p><code>authenticate(request, username=username, password=password)</code> digunakan untuk melakukan autentikasi pengguna berdasarkan username dan password yang diterima dari permintaan (request) yang dikirim oleh pengguna saat login.</p> <ol> <li>Buatlah berkas HTML baru dengan nama <code>login.html</code> pada direktori <code>main/templates</code>. Isi dari <code>login.html</code> dapat kamu isi dengan template berikut.</li> </ol> <pre><code>{% extends 'base.html' %}\n\n{% block meta %}\n&lt;title&gt;Login&lt;/title&gt;\n{% endblock meta %} \n\n{% block content %}\n&lt;div class=\"login\"&gt;\n  &lt;h1&gt;Login&lt;/h1&gt;\n\n  &lt;form method=\"POST\" action=\"\"&gt;\n    {% csrf_token %}\n    &lt;table&gt;\n      &lt;tr&gt;\n        &lt;td&gt;Username:&lt;/td&gt;\n        &lt;td&gt;\n          &lt;input\n            type=\"text\"\n            name=\"username\"\n            placeholder=\"Username\"\n            class=\"form-control\"\n          /&gt;\n        &lt;/td&gt;\n      &lt;/tr&gt;\n\n      &lt;tr&gt;\n        &lt;td&gt;Password:&lt;/td&gt;\n        &lt;td&gt;\n          &lt;input\n            type=\"password\"\n            name=\"password\"\n            placeholder=\"Password\"\n            class=\"form-control\"\n          /&gt;\n        &lt;/td&gt;\n      &lt;/tr&gt;\n\n      &lt;tr&gt;\n        &lt;td&gt;&lt;/td&gt;\n        &lt;td&gt;&lt;input class=\"btn login_btn\" type=\"submit\" value=\"Login\" /&gt;&lt;/td&gt;\n      &lt;/tr&gt;\n    &lt;/table&gt;\n  &lt;/form&gt;\n\n  {% if messages %}\n  &lt;ul&gt;\n    {% for message in messages %}\n    &lt;li&gt;{{ message }}&lt;/li&gt;\n    {% endfor %}\n  &lt;/ul&gt;\n  {% endif %} Don't have an account yet?\n  &lt;a href=\"{% url 'main:register' %}\"&gt;Register Now&lt;/a&gt;\n&lt;/div&gt;\n\n{% endblock content %}\n</code></pre> <ol> <li>Buka <code>urls.py</code> yang ada pada subdirektori <code>main</code> dan import fungsi yang sudah kamu buat tadi.</li> </ol> <pre><code>from main.views import login_user\n</code></pre> <ol> <li>Tambahkan path url ke dalam <code>urlpatterns</code> untuk mengakses fungsi yang sudah diimpor tadi.</li> </ol> <pre><code>urlpatterns = [\n   ...\n   path('login/', login_user, name='login'),\n]\n</code></pre> <p>Kita sudah menambahkan form login akun dan membuat mekanisme <code>login</code>. Selanjutnya, kita akan membuat mekanisme logout dan menambahkan tombol logout pada halaman main.</p>"},{"location":"tutorial/tutorial-3/#tutorial-membuat-fungsi-logout","title":"Tutorial: Membuat Fungsi Logout","text":"<ol> <li>Buka kembali <code>views.py</code> yang ada pada subdirektori <code>main</code>. Tambahkan import <code>logout</code> ini pada bagian paling atas.</li> </ol> <pre><code>from django.contrib.auth import logout\n</code></pre> <ol> <li>Tambahkan fungsi di bawah ini ke dalam fungsi <code>views.py</code>. Fungsi ini berfungsi untuk melakukan mekanisme logout.</li> </ol> <pre><code>def logout_user(request):\n    logout(request)\n    return redirect('main:login')\n</code></pre> <p>Penjelasan Kode:</p> <ul> <li><code>logout(request)</code> digunakan untuk menghapus sesi pengguna yang saat ini masuk.</li> <li> <p><code>return redirect('main:login')</code> mengarahkan pengguna ke halaman login dalam aplikasi Django.</p> </li> <li> <p>Bukalah berkas <code>main.html</code> yang ada pada direktori <code>main/templates</code>.</p> </li> <li> <p>Tambahkan potongan kode di bawah ini setelah hyperlink tag untuk Add New Book pada berkas <code>main.html</code>.</p> </li> </ul> <pre><code>...\n&lt;a href=\"{% url 'main:logout' %}\"&gt;\n  &lt;button&gt;Logout&lt;/button&gt;\n&lt;/a&gt;\n...\n</code></pre> <ol> <li>Buka <code>urls.py</code> yang ada pada subdirektori <code>main</code> dan import fungsi yang sudah kamu buat tadi.</li> </ol> <pre><code>from main.views import logout_user\n</code></pre> <ol> <li>Tambahkan path url ke dalam <code>urlpatterns</code> untuk mengakses fungsi yang sudah diimpor tadi.</li> </ol> <pre><code>urlpatterns = [\n   ...\n   path('logout/', logout_user, name='logout'),\n]\n</code></pre> <p>Kita sudah membuat mekanisme <code>logout</code> dan menyelesaikan sistem autentikasi dalam proyek ini.</p>"},{"location":"tutorial/tutorial-3/#tutorial-merestriksi-akses-halaman-main","title":"Tutorial: Merestriksi Akses Halaman Main","text":"<ol> <li>Buka kembali <code>views.py</code> yang ada pada subdirektori <code>main</code> dan tambahkan import <code>login_required</code> pada bagian paling atas.</li> </ol> <pre><code>from django.contrib.auth.decorators import login_required\n</code></pre> <p>Penjelasan Kode:    Kode <code>from django.contrib.auth.decorators import login_required</code> digunakan untuk mengimpor sebuah decorator yang bisa mengharuskan pengguna masuk (login) terlebih dahulu sebelum dapat mengakses suatu halaman web.</p> <ol> <li>Tambahkan potongan kode <code>@login_required(login_url='/login')</code> di atas fungsi <code>show_main</code> agar halaman main hanya dapat diakses oleh pengguna yang sudah login (terautentikasi).</li> </ol> <pre><code>...\n@login_required(login_url='/login')\ndef show_main(request):\n...\n</code></pre> <p>Setelah melakukan restriksi akses halaman main, jalankan proyek Django-mu dengan perintah <code>python manage.py runserver</code> 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.</p>"},{"location":"tutorial/tutorial-3/#tutorial-menggunakan-data-dari-cookies","title":"Tutorial: Menggunakan Data Dari Cookies","text":"<p>Sekarang, kita akan melihat penggunaan cookies dengan menambahkan data last login dan menampilkannya ke halaman main.</p> <ol> <li> <p>Lakukan logout terlebih dahulu apabila kamu sedang menjalankan aplikasi Django-mu.</p> </li> <li> <p>Buka kembali <code>views.py</code> yang ada pada subdirektori <code>main</code>. Tambahkan import <code>HttpResponseRedirect</code>, <code>reverse</code>, dan <code>datetime</code> pada bagian paling atas.</p> </li> </ol> <pre><code>import datetime\nfrom django.http import HttpResponseRedirect\nfrom django.urls import reverse\n</code></pre> <ol> <li>Pada fungsi <code>login_user</code>, kita akan menambahkan fungsionalitas menambahkan cookie yang bernama <code>last_login</code> untuk melihat kapan terakhir kali pengguna melakukan login. Caranya adalah dengan mengganti kode yang ada pada blok <code>if user is not None</code> menjadi potongan kode berikut.</li> </ol> <pre><code>...\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</code></pre> <p>Penjelasan Kode:</p> <ul> <li><code>login(request, user)</code> berfungsi untuk melakukan login terlebih dahulu</li> <li><code>response = HttpResponseRedirect(reverse(\"main:show_main\"))</code> untuk membuat response</li> <li><code>response.set_cookie('last_login', str(datetime.datetime.now()))</code> berfungsi untuk membuat cookie last_login dan menambahkannya ke dalam response</li> </ul> <p>Perhatikan indentasi kode kamu, pastikan tidak terdapat dead code pada fungsi tersebut.</p> <ol> <li>Pada fungsi <code>show_main</code>, tambahkan potongan kode <code>'last_login': request.COOKIES['last_login']</code> ke dalam variabel <code>context</code>. Berikut adalah contoh kode yang sudah diubah.</li> </ol> <pre><code>context = {\n    'name': 'Pak Bepe',\n    'class': 'PBP A',\n    'books': books,\n    'last_login': request.COOKIES['last_login'],\n}\n</code></pre> <p>Penjelasan Kode:</p> <p><code>'last_login': request.COOKIES['last_login']</code> berfungsi menambahkan informasi cookie last_login pada response yang akan ditampilkan di halaman web.</p> <ol> <li>Ubah fungsi <code>logout_user</code> menjadi seperti potongan kode berikut.</li> </ol> <pre><code>def logout_user(request):\n    logout(request)\n    response = HttpResponseRedirect(reverse('main:login'))\n    response.delete_cookie('last_login')\n    return response\n</code></pre> <p>Penjelasan Kode:</p> <p><code>response.delete_cookie('last_login')</code> berfungsi untuk menghapus cookie <code>last_login</code> saat pengguna melakukan <code>logout</code>.</p> <ol> <li>Buka berkas <code>main.html</code> dan tambahkan potongan kode berikut di setelah tombol logout untuk menampilkan data last login.</li> </ol> <pre><code>...\n&lt;h5&gt;Sesi terakhir login: {{ last_login }}&lt;/h5&gt;\n...\n</code></pre> <ol> <li> <p>Silakan refresh halaman login (atau jalankan proyek Django-mu dengan perintah <code>python manage.py runserver</code> jika kamu belum menjalankan proyekmu) dan cobalah untuk login. Data last login kamu akan muncul di halaman main.</p> </li> <li> <p>Jika kamu menggunakan browser Google Chrome, untuk melihat data cookie <code>last_login</code>, kamu dapat mengakses fitur inspect element dan membuka bagian Application/Storage. Klik bagian Cookies dan kamu dapat melihat data cookies yang tersedia. Selain <code>last_login</code>, kamu juga dapat melihat data <code>sessionid</code> dan <code>csrftoken</code>. Berikut adalah contoh tampilannya.</p> </li> </ol> <p></p> <ol> <li>Jika kamu melakukan logout dan membuka bagian riwayat cookie, cookie yang dibuat sebelumnya akan hilang dan dibuat ulang ketika kamu login kembali.</li> </ol> <p>Sebelum melanjutkan ke tutorial berikutnya, cobalah untuk membuat satu akun pada halaman web kamu.</p>"},{"location":"tutorial/tutorial-3/#tutorial-menghubungkan-model-book-dengan-user","title":"Tutorial: Menghubungkan Model <code>Book</code> dengan <code>User</code>","text":"<p>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.</p> <p>Terakhir, kita akan menghubungkan setiap objek <code>Book</code> 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:</p> <ol> <li>Buka <code>models.py</code> yang ada pada subdirektori <code>main</code> dan tambahkan kode berikut pada dibawah baris kode untuk mengimpor model:</li> </ol> <pre><code>...\nfrom django.contrib.auth.models import User\n...\n</code></pre> <ol> <li>Pada model <code>Book</code> yang sudah dibuat, tambahkan potongan kode berikut:</li> </ol> <pre><code>class Book(models.Model):\n    user = models.ForeignKey(User, on_delete=models.CASCADE)\n    ...\n</code></pre> <p>Penjelasan Kode:</p> <p>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 <code>ForeignKey</code> akan dipelajari pada mata kuliah Basis Data. Penjelasan lebih lanjut terkait <code>ForeignKey</code> pada Django dapat dilihat di sini.</p> <ol> <li>Buka kembali <code>views.py</code> yang ada pada subdirektori <code>main</code>, dan ubah potongan kode pada fungsi <code>create_book</code> menjadi sebagai berikut:</li> </ol> <pre><code>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</code></pre> <p>Penjelasan Kode:</p> <p>Parameter <code>commit=False</code> 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 <code>user</code> dengan objek <code>User</code> dari return value <code>request.user</code> yang sedang terotorisasi untuk menandakan bahwa objek tersebut dimiliki oleh pengguna yang sedang login.</p> <ol> <li>Ubah fungsi <code>show_main</code> menjadi sebagai berikut.</li> </ol> <pre><code>def show_main(request):\n    books = Book.objects.filter(user=request.user)\n\n    context = {\n         'name': request.user.username,\n         ...\n    }\n...\n</code></pre> <p>Penjelasan Kode:</p> <ul> <li>Potongan kode diatas berfungsi untuk menampilkan objek <code>Book</code> yang terasosiasikan dengan pengguna yang sedang login. Hal tersebut dilakukan dengan menyaring seluruh objek dengan hanya mengambil <code>Book</code> yang dimana field <code>user</code> terisi dengan objek <code>User</code> yang sama dengan pengguna yang sedang login.</li> <li> <p>Kode <code>request.user.username</code> berfungsi untuk menampilkan username pengguna yang login pada halaman main.</p> </li> <li> <p>Simpan semua perubahan, dan lakukan migrasi model dengan <code>python manage.py makemigrations</code>.</p> </li> <li> <p>Seharusnya, akan muncul error saat melakukan migrasi model. Pilih <code>1</code> untuk menetapkan default value untuk field user pada semua row yang telah dibuat pada basis data.</p> </li> </ul> <p></p> <ol> <li>Ketik angka 1 lagi untuk menetapkan user dengan ID 1 (yang sudah kita buat sebelumnya) pada model yang sudah ada.</li> </ol> <p></p> <ol> <li>Lakukan <code>python manage.py migrate</code> untuk mengaplikasikan migrasi yang dilakukan pada poin sebelumnya.</li> </ol> <p>Jalankan proyek Django-mu dengan perintah <code>python manage.py runserver</code> 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 <code>Book</code> dengan <code>User</code> yang membuatnya.</p>"},{"location":"tutorial/tutorial-3/#akhir-kata","title":"Akhir Kata","text":"<p>Selamat! Kamu telah menyelesaikan Tutorial 3 dengan baik. \ud83d\ude04</p> <p>Setelah kamu menyelesaikan seluruh tutorial di atas, harapannya kamu sekarang lebih paham tentang penggunaan form, autentikasi, session, dan cookie pada framework Django.</p> <ol> <li>Setelah menyelesaikan tutorial ini, tampilan halaman web kamu seharusnya terlihat seperti ini.</li> </ol> <p></p> <ol> <li>Pada akhir tutorial ini, struktur subdirektori <code>main</code> pada lokalmu terlihat seperti ini.</li> </ol> <p></p> <ol> <li> <p>Sebelum melakukan langkah ini, pastikan struktur direktori lokal sudah benar. Selanjunya, lakukan <code>add</code>, <code>commit</code> dan <code>push</code> untuk memperbarui repositori GitHub.</p> </li> <li> <p>Jalankan perintah berikut untuk melakukan <code>add</code>, <code>commit</code> dan <code>push</code>.</p> </li> </ol> <pre><code>git add .\ngit commit -m \"&lt;pesan_commit&gt;\"\ngit push -u origin &lt;branch_utama&gt;\n</code></pre> <ul> <li>Ubah <code>&lt;pesan_commit&gt;</code> sesuai dengan keinginan. Contoh: <code>git commit -m \"tutorial 3 selesai\"</code>.</li> <li>Ubah <code>&lt;branch_utama&gt;</code> sesuai dengan nama branch utamamu. Contoh: <code>git push -u origin main</code> atau <code>git push -u origin master</code>.</li> </ul>"},{"location":"tutorial/tutorial-3/#kontributor","title":"Kontributor","text":"<ul> <li>Muhammad Nabil Mu'afa</li> <li>Muhammad Iqbal Dwitama</li> </ul>"},{"location":"tutorial/tutorial-3/#credits","title":"Credits","text":"<p>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.</p>"},{"location":"tutorial/tutorial-4/","title":"Tutorial 4: Desain Web Menggunakan HTML dan CSS3 &amp; Metode Update dan Delete pada Data","text":"<p>Pemrograman Berbasis Platform (CSGE602022) \u2014 diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Genap 2023/2024</p>"},{"location":"tutorial/tutorial-4/#tujuan-pembelajaran","title":"Tujuan Pembelajaran","text":"<p>Setelah menyelesaikan tutorial ini, mahasiswa diharapkan untuk dapat:</p> <ul> <li>Memahami konsep update dan delete</li> <li>Memahami cara update dan delete pada Django</li> <li>Memahami susunan tag pada HTML5</li> <li>Mengetahui berbagai jenis tag HTML5</li> <li>Memahami sintaks penulisan CSS</li> <li>Memahami konsep static files pada Django</li> <li>Memahami penggunaan selector pada CSS</li> </ul>"},{"location":"tutorial/tutorial-4/#pengenalan-html","title":"Pengenalan HTML","text":"<p>HyperText Markup Language (HTML) adalah bahasa markup standar untuk dokumen agar dapat ditampilkan dalam browser web. HTML mendefinisikan struktur dari konten suatu website.</p> <p>Silakan pelajari dan mencoba sendiri HTML pada referensi ini.</p> <p>Perbedaan antara HTML dan HTML5 bisa kamu baca pada referensi ini.</p>"},{"location":"tutorial/tutorial-4/#pengenalan-css","title":"Pengenalan CSS","text":""},{"location":"tutorial/tutorial-4/#apa-itu-css","title":"Apa itu CSS?","text":"<p>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.</p> <p>Untuk mempelajari perbedaan antara CSS dan CSS3 bisa kamu baca pada referensi ini.</p>"},{"location":"tutorial/tutorial-4/#cara-penulisan-css","title":"Cara Penulisan CSS","text":"<p>Secara umum, CSS dapat dituliskan dalam bentuk sebagai berikut.</p> <pre><code>selector {\n  properties: value;\n}\n</code></pre> <p>Silakan pelajari dan mencoba sendiri CSS pada referensi ini.</p> <p>Terdapat tiga jenis cara penulisan CSS:</p> <ol> <li>Inline Styles</li> <li>Internal Style Sheet</li> <li>External Style Sheet</li> </ol> <p>Silakan pelajari tentang ketiga jenis CSS tersebut pada referensi ini.</p> <p>Perlu diperhatikan, jika kamu membuat jenis External Style Sheet, kamu perlu menambahkan tag <code>{% load staticfiles %}</code> pada halaman HTML kamu. Contohnya seperti potongan kode di bawah ini.</p> <pre><code>{% load staticfiles %}\n&lt;html&gt;\n  &lt;head&gt;\n    &lt;title&gt;Tutorial CSS Yay&lt;/title&gt;\n    &lt;link rel=\"stylesheet\" href=\"{% static 'css/tutorial.css' %}\" /&gt;\n  &lt;/head&gt;\n  &lt;body&gt;\n    &lt;div&gt;\n      &lt;h1&gt;Tutorial CSS Yay&lt;/h1&gt;\n    &lt;/div&gt;\n    &lt;div id=\"main\"&gt;\n      &lt;div&gt;\n        &lt;p&gt;published: 27 September 2023&lt;/p&gt;\n        &lt;h1&gt;&lt;a href=\"\"&gt;Tutorial CSS ku&lt;/a&gt;&lt;/h1&gt;\n        &lt;p&gt;Yay ini tutorial yang gampang!&lt;/p&gt;\n      &lt;/div&gt;\n    &lt;/div&gt;\n  &lt;/body&gt;\n&lt;/html&gt;\n</code></pre> <p>Hal ini dapat terjadi karena CSS merupakan static files di Django. Static files akan dijelaskan pada bagian selanjutnya.</p>"},{"location":"tutorial/tutorial-4/#catatan-tambahan","title":"Catatan Tambahan","text":"<p>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.</p> <ol> <li>Inline style</li> <li>External dan internal style sheets</li> <li>Browser default</li> </ol>"},{"location":"tutorial/tutorial-4/#static-files-pada-django","title":"Static files pada Django","text":"<p>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. </p> <p>Pengaturan untuk static files terletak pada file <code>settings.py</code>:</p> <p><pre><code>...\n# Static files (CSS, JavaScript, Images)\n# httpsdocs.djangoproject.comen1.9howtostatic-files\nSTATIC_ROOT = os.path.join(PROJECT_ROOT, 'static')\nSTATIC_URL = 'static'\n...\n</code></pre> Pada <code>settings.py</code>, terdapat:</p> <ul> <li><code>STATIC_ROOT</code> yang menentukan absolute path ke direktori static files ketika menjalankan perintah <code>collectstatic</code> pada proyek.</li> <li><code>STATIC_URL</code> yang merupakan URL yang dapat diakses publik untuk memperoleh static files tersebut.</li> </ul> <p>Perintah <code>collectstatic</code> adalah perintah untuk mengumpulkan static files dari semua app sehingga mempermudah akses untuk semua app.</p> <p>Penjelasan lebih lengkap mengenai static files dapat kamu baca pada referensi ini.</p>"},{"location":"tutorial/tutorial-4/#selector-pada-css","title":"Selector pada CSS","text":"<p>Pada tutorial ini, kita akan mengenak tiga jenis selector: Element Selector, ID Selector, dan Class Selector.</p> <ol> <li> <p>ELement Selector</p> <p>Element Selector memungkinkan kita mengubah properti untuk semua elemen yang memiliki tag HTML yang sama.</p> <p>Contoh penggunaan Element Selector: <pre><code>&lt;body&gt;\n  &lt;div&gt;\n    &lt;h1&gt;Tutorial CSS Yay :D&lt;/h1&gt;\n    &lt;h2&gt;Tutorial CSS Yay kedua :D&lt;/h2&gt;\n  &lt;/div&gt;\n  ...\n&lt;/body&gt;\n</code></pre></p> <p>Kita dapat menggunakan element sebagai selector dalam file CSS. Element selector menggunakan format [id_name] (tanpa diawali oleh sebuah simbol)</p> <p><pre><code>h1 {\n  color: #fca205;\n  font-family: \"Monospace\";\n  font-style: italic;\n}\n</code></pre> 2. ID Selector</p> <p>ID selector menggunakan ID pada tag sebagai selector-nya. ID bersifat unik dalam satu halaman web. ID dapat ditambahkan pada halaman template HTML.</p> <p>Contoh penggunaan ID Selector pada template HTML:</p> <pre><code>&lt;body&gt;\n  &lt;div id=\"header\"&gt;\n    &lt;h1&gt;Tutorial CSS Yay :D&lt;/h1&gt;\n  &lt;/div&gt;\n  ...\n&lt;/body&gt;\n</code></pre> <p>Kemudian, kita dapat menggunakan ID tersebut sebagai selector dalam file CSS. ID selector menggunakan format #[id_name] (selalu diawali #) <pre><code>#header {\n  background-color: #f0f0f0;\n  margin-top: 0;\n  padding: 20px 20px 20px 40px;\n}\n</code></pre></p> </li> <li> <p>Class Selector</p> <p>Class Selector memungkinkan kita untuk mengelompokkan elemen dengan karakteristik yang sama.</p> <p>Contoh penggunaan Class Selector pada template HTML:</p> <pre><code>...\n&lt;div id=\"main\"&gt;\n    &lt;div class=\"content_section\"&gt;\n        &lt;p class=\"date\"&gt;published: 28 September 2022&lt;/p&gt;\n        &lt;h2&gt;&lt;a href=\"\"&gt;Tutorial CSS ku&lt;/a&gt;&lt;/h2&gt;\n        &lt;p id=\"content_1\"&gt;Yay ini tutorial yang gampang!&lt;/p&gt;\n    &lt;/div&gt;\n    &lt;div class=\"content_section\"&gt;\n        &lt;p class=\"date \"&gt;published: 29 September 2022&lt;/p&gt;\n        &lt;h2&gt;&lt;a href=\"\"&gt;Tutorial CSS mu&lt;/a&gt;&lt;/h2&gt;\n        &lt;p id=\"content_2\"&gt;Yay ini tutorial yang mudah!&lt;/p&gt;\n    &lt;/div&gt;\n    &lt;div class=\"content_section\"&gt;\n        &lt;p&gt;published: 30 September 2022&lt;/p&gt;\n        &lt;h2&gt;&lt;a href=\"\"&gt;Tutorial CSS semua&lt;/a&gt;&lt;/h2&gt;\n        &lt;p id=\"content_3\"&gt;Yay ini tutorial yang tidak sulit!&lt;/p&gt;\n    &lt;/div&gt;\n&lt;/div&gt;\n...\n</code></pre> <p>Kemudian, kita dapat menggunakan Class tersebut sebagai selector dalam file CSS. Class selector menggunakan format .[class_name] (diawali .)</p> <pre><code>.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</code></pre> </li> </ol> <p>Untuk memperdalam pengetahuan mengenai CSS Selector Reference, kamu dapat membaca referensi ini.</p>"},{"location":"tutorial/tutorial-4/#tips-trik-css","title":"Tips &amp; trik CSS","text":""},{"location":"tutorial/tutorial-4/#mengenal-combinator-pada-css","title":"Mengenal Combinator pada CSS","text":"<p>Combinator dalam CSS menghubungkan dua atau lebih selector untuk merincikan lebih lanjut elemen-elemen yang di-select.</p> <p>Terdapat empat combinators pada CSS. Berikut ringkasan pemakaiannya: </p> Combinator Contoh pemakaian Penjelasan contoh Descendant selector (space) <code>div p</code> Menyeleksi semua elemen <code>p</code> yang merupakan keturunan dari elemen <code>div</code> Child selector (&gt;) <code>div &gt; p</code> Menyeleksi semua elemen <code>p</code> yang merupakan anak dari elemen <code>div</code> Adjacent sibling selector (+) <code>div + p</code> Menyeleksi elemen <code>p</code> pertama yang berada tepat setelah elemen <code>div</code> (harus memiliki elemen induk yang sama) General sibling selector (~) <code>div ~ p</code> Menyeleksi semua elemen <code>p</code> yang sejajar dan berada setelah elemen <code>div</code> <p>Silakan pelajari lebih lanjut mengenai combinator  melalui referensi ini.</p>"},{"location":"tutorial/tutorial-4/#mengenal-pseudo-class-pada-css","title":"Mengenal Pseudo-class pada CSS","text":"<p>Pseudo-class digunakan untuk mendefinisikan state khusus dari suatu elemen. Sintaks pemakaian pseudo-class adalah sebagai berikut:</p> <pre><code>selector:pseudo-class {\n  property: value;\n}\n</code></pre> <p>Beberapa contoh pseudo-class: | Pseudo-class | Mengaplikasikan style pada .. | | -------- | -------- | | <code>:link</code> | tautan yang belum pernah dikunjungi | | <code>:visited</code> | tautan yang sudah pernah dikunjungi | | <code>:hover</code> | saat pengguna mengarahkan kursor di atas elemen tersebut | | <code>:active</code> | saat elemen diaktifkan (biasanya saat pengguna mengklik elemen tersebut) | | <code>:focus</code> | saat elemen fokus (seperti saat pengguna mengklik input field) | | <code>:checked</code> | elemen yang telah dicentang | | <code>:disabled</code> | elemen yang telah dibuat tidak responsif (misalnya tombol yang tidak bisa diklik) |</p> <p>Silakan pelajari lebih lanjut mengenai pseudo-class  melalui referensi ini.</p>"},{"location":"tutorial/tutorial-4/#mengenal-box-model-pada-css","title":"Mengenal Box Model pada CSS","text":"<p>Box model pada CSS pada dasarnya merupakan suatu box yang membungkus setiap elemen HTML dan terdiri atas:</p> <ul> <li>Content: isi dari box (tempat terlihatnya teks dan gambar)</li> <li>Padding: mengosongkan area di sekitar konten (transparan)</li> <li>Border: garis tepian yang membungkus konten dan padding-nya</li> <li>Margin: mengosongkan area di sekitar border (transparan)</li> </ul> <p>Silakan pelajari lebih lanjut mengenai margin, border, dan padding melalui referensi ini.</p>"},{"location":"tutorial/tutorial-4/#pengenalan-bootstrap-tailwind","title":"Pengenalan Bootstrap &amp; Tailwind","text":"<p>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:</p> <ol> <li>Proses Pengembangan Lebih Cepat: Framework seperti Bootstrap menyediakan komponen siap pakai sehingga tanpa harus menulis kode CSS dari awal. </li> <li>Responsif secara Bawaan: Framework seperti Bootstrap dan Tailwind telah dirancang dengan responsif.</li> <li>Skalabilitas Besar: Framework CSS memberikan struktur yang baik untuk proyek yang berkembang seiring waktu. </li> </ol> <p>Bootstrap dan Tailwind tentu saja sebagai framework memiliki perbedaan yang signifikan antara satu sama lain, yaitu:</p> 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":"<p>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. </p> <p>Salah satu cara untuk menguji apakah suatu situs web menggunakan responsive web design adalah dengan mengakses situs web tersebut dan mengaktifkan fitur <code>Toggle Device Mode</code> 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. </p> <p>Berikut adalah cara untuk mengakses fitur tersebut pada browser Google Chrome. * Windows/Linux : <code>CTRL + SHIFT + M</code> * Mac : <code>Command + Shift + M</code></p> <p>Cara lain yang lebih praktis adalah dengan melakukan klik kanan pada browser dan memilih Inspect Element/Inspect untuk membuka Dev Tools yang berguna.</p> <p>Untuk mempelajari lebih lengkap mengenai Reponsive Web Design, kamu dapat membuka referensi ini.</p>"},{"location":"tutorial/tutorial-4/#tutorial-menambahkan-bootstrap-ke-aplikasi","title":"Tutorial: Menambahkan Bootstrap ke Aplikasi","text":"<p>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. </p> <ol> <li> <p>Buka project django kalian (book_tracker), lalu buka file <code>base.html</code> yang telah dibuat sebelumnya pada templates folder yang berada di root project kalian. </p> </li> <li> <p>Didalam <code>templates/base.html</code>, tambahkan tag  agar halaman web kamu dapat menyesuaikan ukuran dan perilaku perangkat mobile (apabila belum).</p> <pre><code>&lt;head&gt;\n    {% block meta %}\n        &lt;meta charset=\"UTF-8\" /&gt;\n        &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"&gt;\n    {% endblock meta %}\n&lt;/head&gt;\n</code></pre> </li> <li> <p>Tambahkan Bootstrap CSS dan juga JS. </p> <p>CSS: <pre><code>&lt;head&gt;\n    {% block meta %}\n        ...\n    {% endblock meta %}\n    &lt;link href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN\" crossorigin=\"anonymous\"&gt;\n&lt;/head&gt;\n</code></pre></p> <p>JS: <pre><code>&lt;head&gt;\n    ...\n    &lt;script src=\"https://code.jquery.com/jquery-3.6.0.min.js\" integrity=\"sha384-KyZXEAg3QhqLMpG8r+J4jsl5c9zdLKaUk5Ae5f5b1bw6AUn5f5v8FZJoMxm6f5cH1\" crossorigin=\"anonymous\"&gt;&lt;/script&gt;\n&lt;/head&gt;\n</code></pre></p> </li> <li> <p>(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.</p> <pre><code>&lt;head&gt;\n    ...\n    &lt;script src=\"https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js\" integrity=\"sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r\" crossorigin=\"anonymous\"&gt;&lt;/script&gt;\n    &lt;script src=\"https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js\" integrity=\"sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+\" crossorigin=\"anonymous\"&gt;&lt;/script&gt;\n&lt;/head&gt;\n</code></pre> </li> </ol> <p>Referensi: Get Started with Bootstrap 5.3</p>"},{"location":"tutorial/tutorial-4/#tutorial-menambahkan-navbar-pada-aplikasi","title":"Tutorial: Menambahkan navbar pada Aplikasi","text":"<p>Tambahkan navigation bar (boleh menggunakan Bootstrap) pada halaman <code>main.html</code> 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.</p>"},{"location":"tutorial/tutorial-4/#tutorial-menambahkan-fitur-edit-pada-aplikasi","title":"Tutorial: Menambahkan Fitur Edit pada Aplikasi","text":"<ol> <li> <p>Buka <code>views.py</code> yang ada pada subdirektori <code>main</code>, dan buatlah fungsi baru bernama <code>edit_book</code> yang menerima parameter <code>request</code> dan <code>id</code>.</p> </li> <li> <p>Tambahkan potongan kode berikut pada fungsi <code>edit_book</code></p> <pre><code>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</code></pre> </li> <li> <p>Buatlah berkas HTML baru dengan nama <code>edit_book.html</code> pada subdirektori <code>main/templates</code>. Isi berkas tersebut dengan template berikut.</p> <pre><code>{% extends 'base.html' %}\n\n{% load static %}\n\n{% block content %}\n\n&lt;h1&gt;Edit Book&lt;/h1&gt;\n\n&lt;form method=\"POST\"&gt;\n    {% csrf_token %}\n    &lt;table&gt;\n        {{ form.as_table }}\n        &lt;tr&gt;\n            &lt;td&gt;&lt;/td&gt;\n            &lt;td&gt;\n                &lt;input type=\"submit\" value=\"Edit Book\"/&gt;\n            &lt;/td&gt;\n        &lt;/tr&gt;\n    &lt;/table&gt;\n&lt;/form&gt;\n\n{% endblock %}\n</code></pre> </li> <li> <p>Buka <code>urls.py</code> yang berada pada direktori <code>main</code> dan import fungsi <code>edit_book</code> yang sudah dibuat.</p> <pre><code>from main.views import edit_book\n</code></pre> </li> <li> <p>Tambahkan path url ke dalam <code>urlpatterns</code> untuk mengakses fungsi yang sudah diimpor tadi.</p> <pre><code>...\npath('edit-book/&lt;int:id&gt;', edit_book, name='edit_book'),\n...\n</code></pre> </li> <li> <p>Buka <code>main.html</code> yang berada pada subdirektori <code>main/templates</code>. Tambahkan potongan kode berikut sejajar dengan elemen <code>&lt;td&gt;</code> terakhir agar terlihat tombol edit pada setiap baris tabel.</p> <pre><code>...\n&lt;tr&gt;\n    ...\n    &lt;td&gt;\n        &lt;a href=\"{% url 'main:edit_book' book.pk %}\"&gt;\n            &lt;button&gt;\n                Edit\n            &lt;/button&gt;\n        &lt;/a&gt;\n    &lt;/td&gt;\n&lt;/tr&gt;\n...\n</code></pre> </li> <li> <p>Jalankan proyek Django-mu dengan perintah <code>python manage.py runserver</code> 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!</p> </li> </ol>"},{"location":"tutorial/tutorial-4/#tutorial-membuat-fungsi-untuk-menghapus-data-buku","title":"Tutorial: Membuat Fungsi untuk Menghapus Data Buku","text":"<p>Berikut adalah yang perlu kamu lakukan untuk membuat fungsi penghapusan data buku.</p> <ol> <li> <p>Buat fungsi baru dengan nama <code>delete_book</code> yang menerima parameter <code>request</code> dan <code>id</code> pada <code>views.py</code> di folder <code>main</code> untuk menghapus data buku. Kamu dapat menggunakan templat kode berikut untuk memuat fungsinya.</p> <p>Jangan lupa untuk memahami isi kodenya, ya. \ud83d\ude09</p> <pre><code>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</code></pre> </li> <li> <p>Buka <code>urls.py</code> yang ada pada folder <code>main</code> dan impor fungsi yang sudah kamu buat tadi.</p> <pre><code>from main.views import delete_book\n</code></pre> </li> <li> <p>Tambahkan path url ke dalam <code>urlpatterns</code> untuk mengakses fungsi yang sudah diimpor.</p> <pre><code>...\npath('delete/&lt;int:id&gt;', delete_book, name='delete_book'), # sesuaikan dengan nama fungsi yang dibuat\n...\n</code></pre> </li> <li> <p>Bukalah berkas <code>main.html</code> yang ada pada folder <code>main/templates</code> dan ubahlah kode yang sudah ada menjadi seperti berikut agar terdapat tombol hapus untuk setiap buku.</p> <pre><code>...\n&lt;tr&gt;\n    ...\n    &lt;td&gt;\n        &lt;a href=\"{% url 'main:edit_book' book.pk %}\"&gt;\n            &lt;button&gt;\n                Edit\n            &lt;/button&gt;\n        &lt;/a&gt;\n        &lt;a href=\"{% url 'main:delete_book' book.pk %}\"&gt;\n              &lt;button&gt;\n                  Delete\n              &lt;/button&gt;\n          &lt;/a&gt;\n    &lt;/td&gt;\n&lt;/tr&gt;\n...\n</code></pre> </li> </ol> <p>Jalankan proyek Django-mu dan cobalah untuk menghapus data buku yang sudah ada pada browser favoritmu.</p>"},{"location":"tutorial/tutorial-4/#akhir-kata","title":"Akhir Kata","text":"<p>Selamat! Kamu telah menyelesaikan Tutorial 4 dengan baik. \ud83d\ude04</p> <ol> <li>Setelah menyelesaikan tutorial ini, tampilan halaman web kamu seharusnya terlihat seperti ini.</li> </ol> <p></p> <ol> <li> <p>Kamu juga diharapkan untuk melakukan eksplorasi dengan menggunakan CSS Framework pada tutorial ini. Berikut adalah contoh penerapan Bootstrap sederhana pada aplikasi Book Tracker.</p> <p></p> </li> <li> <p>Selanjunya, lakukan <code>add</code>, <code>commit</code> dan <code>push</code> untuk memperbarui repositori GitHub.</p> </li> <li> <p>Jalankan perintah berikut untuk melakukan <code>add</code>, <code>commit</code> dan <code>push</code>.</p> </li> </ol> <pre><code>git add .\ngit commit -m \"&lt;pesan_commit&gt;\"\ngit push -u origin &lt;branch_utama&gt;\n</code></pre> <ul> <li>Ubah <code>&lt;pesan_commit&gt;</code> sesuai dengan keinginan. Contoh: <code>git commit -m \"tutorial 4 selesai\"</code>.</li> <li>Ubah <code>&lt;branch_utama&gt;</code> sesuai dengan nama branch utamamu. Contoh: <code>git push -u origin main</code> atau <code>git push -u origin master</code>.</li> </ul>"},{"location":"tutorial/tutorial-4/#referensi-tambahan","title":"Referensi Tambahan","text":"<p>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</p>"},{"location":"tutorial/tutorial-4/#kontributor","title":"Kontributor","text":"<ul> <li>Muhammad Nabil Mu'afa</li> <li>Muhammad Iqbal Dwitama</li> </ul>"},{"location":"tutorial/tutorial-4/#credits","title":"Credits","text":"<p>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.</p>"},{"location":"tutorial/tutorial-5/","title":"Tutorial 5: JavaScript dan AJAX","text":"<p>Pemrograman Berbasis Platform (CSGE602022) \u2014 diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Genap 2023/2024</p>"},{"location":"tutorial/tutorial-5/#tujuan-pembelajaran","title":"Tujuan Pembelajaran","text":"<p>Setelah menyelesaikan tutorial ini, mahasiswa diharapkan untuk dapat:</p> <ul> <li>Memahami fungsi JavaScript pada front-end development</li> <li>Menggunakan JavaScript secara dasar</li> <li>Menerapkan AJAX dan Fetch API</li> </ul>"},{"location":"tutorial/tutorial-5/#javascript","title":"JavaScript","text":""},{"location":"tutorial/tutorial-5/#pengenalan-javascript","title":"Pengenalan JavaScript","text":"<p>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).</p> <p>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.</p> <p>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.</p> <p>Pada mata kuliah PBP, kita hanya akan fokus kepada kode client-side JavaScript.</p>"},{"location":"tutorial/tutorial-5/#tahapan-eksekusi-javascript-oleh-peramban","title":"Tahapan Eksekusi JavaScript oleh Peramban","text":"<p>Perhatikan diagram berikut untuk mengamati tahapan eksekusi JavaScript oleh peramban web.</p> <p></p> <p>Setelah peramban mengunduh halaman HTML web maka tepat dimana tag <code>&lt;script&gt;&lt;/script&gt;</code> 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.</p>"},{"location":"tutorial/tutorial-5/#penulisan-javascript","title":"Penulisan JavaScript","text":"<p>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 <code>.js</code>. Berikut contoh beberapa pendefinisian dari JavaScript.</p> <p>JavaScript dapat diletakkan pada head atau body dari halaman HTML. Selain itu, kode JavaScript harus dimasukkan di antara tag <code>&lt;script&gt;</code> dan <code>&lt;/script&gt;</code>. Kamu dapat meletakkan lebih dari satu tag script yang berisi JavaScript pada suatu berkas HTML.</p>"},{"location":"tutorial/tutorial-5/#embedded-javascript-pada-html","title":"Embedded JavaScript pada HTML","text":"<p><code>index.html</code></p> <pre><code>&lt;script type=\"text/JavaScript\"&gt;\n  alert(\"Hello World!\");\n&lt;/script&gt;\n</code></pre>"},{"location":"tutorial/tutorial-5/#external-javascript-pada-html","title":"External JavaScript pada HTML","text":"<p><code>index.html</code></p> <pre><code>&lt;script type=\"text/JavaScript\" src=\"js/script.js\"&gt;&lt;/script&gt;\n</code></pre> <p><code>js/script.js</code></p> <pre><code>alert(\"Hello World!\");\n</code></pre> <p>Pada berkas eksternal JavaScript, tag <code>&lt;script&gt;</code> tidak perlu lagi ditambahkan.</p> <p>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 <code>.js</code> biasanya akan di-cache oleh peramban sehingga jika kita membuka halaman yang sama dan tidak ada perubahan pada berkas <code>.js</code>, maka peramban tidak akan meminta berkas <code>.js</code> tersebut kepada server lagi, namun akan menggunakan berkas dari cache yang sudah disimpan sebelumnya.</p>"},{"location":"tutorial/tutorial-5/#eksekusi-javascript","title":"Eksekusi JavaScript","text":"<p>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).</p> <pre><code>// 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</code></pre>"},{"location":"tutorial/tutorial-5/#sintaks-javascript","title":"Sintaks JavaScript","text":""},{"location":"tutorial/tutorial-5/#variabel","title":"Variabel","text":"<p>Mendefinisikan variabel pada JavaScript cukup mudah. Contohnya seperti berikut.</p> <pre><code>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</code></pre> <p>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 <code>int</code>, maka sintaknya seperti <code>int x = 9</code>), 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).</p> <p>Ada beberapa aturan dalam pemilihan indentifiers atau nama variabel dalam JavaScript. Karakter pertama harus merupakan alfabet, underscore (<code>_</code>), atau karakter dolar (<code>$</code>). Selain itu, JavaScript identifiers bersifat case sensitive.</p>"},{"location":"tutorial/tutorial-5/#penggabungan-string","title":"Penggabungan String","text":"<p>Dalam JavaScript, kita juga dapat menyambungkan <code>string</code> dengan <code>string</code> lainnya seperti pada Java.</p> <pre><code>var str1 = \"PBP\" + \" \" + \"Fun\";\nvar str2 = \"PBP\";\nvar str3 = \"Fun\";\nvar str4 = str2 + \" \" + str3;\nvar str5 = \"Fun\";\nvar str6 = `PBP ${str5}`;  // Memiliki hasil yang sama seperti \"PBP\" + \" \" + str5\n</code></pre>"},{"location":"tutorial/tutorial-5/#ruang-lingkup-javascript","title":"Ruang Lingkup JavaScript","text":""},{"location":"tutorial/tutorial-5/#variabel-lokal","title":"Variabel Lokal","text":"<p>Variabel yang didefinisikan di dalam fungsi bersifat lokal, sehingga hanya dapat diakses oleh kode didalam fungsi tersebut.</p> <pre><code>// 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</code></pre>"},{"location":"tutorial/tutorial-5/#variabel-global","title":"Variabel Global","text":"<p>Variabel yang didefinisikan di luar fungsi bersifat global dan dapat diakses oleh kode lain dalam berkas JavaScript tersebut.</p> <pre><code>var courseName = \"PBP\";\nfunction thisFunction() {\n  // kode di dalam fungsi ini dapat mengakses variabel courseName\n}\n</code></pre>"},{"location":"tutorial/tutorial-5/#variabel-auto-global","title":"Variabel Auto Global","text":"<p>Value yang di-assign pada variabel yang belum dideklarasikan otomatis menjadi variabel global, walaupun variabel tersebut berada di dalam suatu fungsi.</p> <pre><code>thisFunction(); // fungsi thisFunction() perlu dipanggil terlebih dahulu\nconsole.log(courseName); // cetak \"PBP\" pada JavaScript console\nfunction thisFunction() {\n  courseName = \"PBP\";\n}\n</code></pre>"},{"location":"tutorial/tutorial-5/#mengakses-variabel-global-dari-html","title":"Mengakses Variabel Global dari HTML","text":"<p>Kamu dapat mengakses variabel yang berada dalam berkas JavaScript pada berkas HTML yang memuat berkas JavaScript tersebut.</p> <pre><code>...\n&lt;input type=\"text\" onclick=\"this.value=courseName\" /&gt;\n...\n</code></pre> <pre><code>...\nvar courseName = \"PBP\";\n...\n</code></pre>"},{"location":"tutorial/tutorial-5/#function-dan-event","title":"Function dan Event","text":"<p>Function adalah sekumpulan grup dari kode-kode yang bisa dipanggil di mana pun pada bagian kode program (mirip dengan <code>method</code> 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 <code>index.html</code>.</p> <pre><code>...\n&lt;input type=\"button\" value=\"magicButton\" id=\"magicButton\" onclick=\"hooray();\" /&gt;\n...\n</code></pre> <p>Kemudian berikut adalah kode pada <code>javascript.js</code>.</p> <pre><code>...\nfunction hooray(){\n    alert(\"Yahoo!\");\n}\n...\n</code></pre> <p>Apabila <code>magicButton</code> ditekan, maka fungsi <code>onclick</code> akan menjalankan function <code>hooray()</code> pada <code>javascript.js</code>, lalu muncul alert sesuai yang sudah di-assign sebelumnya.</p> <p>Kode <code>onclick</code> sebenarnya adalah salah satu contoh kemampuan JavaScript yang disebut event. Event adalah kemampuan JavaScript untuk membuat sebuah situs web dinamis. Maksud dari <code>onclick</code> 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 <code>onchange</code>, <code>onmouseover</code>, <code>onmouseout</code>, dan lain sebagainya yang bisa kamu baca pada tautan ini.</p>"},{"location":"tutorial/tutorial-5/#javascript-dom","title":"JavaScript DOM","text":""},{"location":"tutorial/tutorial-5/#html-dom","title":"HTML DOM","text":"<p>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.</p> <p>Berikut adalah contoh implementasinya.</p> <pre><code>...     \n&lt;div&gt;\n  &lt;p onclick=\"myFunction()\" id=\"demo\"&gt;Example of HTML DOM&lt;/p&gt;\n\n&lt;/div&gt;\n...\n</code></pre> <pre><code>...\n    function myFunction() {\ndocument.getElementById(\"demo\").innerHTML = \"YOU CLICKED ME!\";\n    }\n...\n</code></pre>"},{"location":"tutorial/tutorial-5/#css-dom","title":"CSS DOM","text":"<p>Sama dengan HTML DOM, CSS DOM dapat mengubah CSS secara dinamis melalui JavaScript. Detail lengkapnya dapat dilihat di sini.</p> <p>Berikut adalah contoh implementasinya.</p> <p><code>index.html</code></p> <pre><code>...\n&lt;p id=\"blueText\" onclick=\"changeColor()\"&gt;Click me v2&lt;/p&gt;\n...\n</code></pre> <p><code>javascript.js</code></p> <pre><code>...\nfunction changeColor(){\n    document.getElementById(\"blueText\").style.color=\"blue\";\n}\n...\n</code></pre>"},{"location":"tutorial/tutorial-5/#ajax","title":"AJAX","text":""},{"location":"tutorial/tutorial-5/#pengenalan-ajax","title":"Pengenalan AJAX","text":"<p>AJAX merupakan singkatan dari A*synchronous JavaScript And X*ML.</p> <p>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.</p> <p>Berikut ini adalah diagram cara kerja AJAX.</p> <p></p> <ol> <li>Sebuah event terjadi pada halaman web (contohnya tombol submit data ditekan)</li> <li>Sebuah <code>XMLHttpRequest</code> object dibuat oleh JavaScript</li> <li><code>XMLHttpRequest</code> object mengirimkan request ke server</li> <li>Server memproses request tersebut</li> <li>Server mengembalikan response kembali kepada halaman web</li> <li>Response dibaca oleh JavaScript</li> <li>Aksi berikutnya akan dipicu oleh JavaScript sesuai dengan langkah yang dibuat (contohnya memperbarui data di halaman tersebut)</li> </ol> <p>Pada PBP kali ini, kamu akan melakukan AJAX pada peramban web dengan menggunakan fungsi <code>fetch()</code> yang diberikan oleh JavaScript. Secara gambaran besar, penggunaan <code>fetch()</code> untuk melakukan pemanggilan AJAX dapat dilihat di tautan ini.</p>"},{"location":"tutorial/tutorial-5/#fetch-api","title":"Fetch API","text":"<p>Fetch API merupakan API baru yang diperkenalkan pada ECMAScript 2020 sebagai standar baru untuk membuat request dengan <code>Promise</code>. Fetch API menyediakan antarmuka untuk mengambil sumber daya (termasuk di seluruh jaringan). API ini merupakan pengganti yang lebih kuat dan fleksibel untuk <code>XMLHttpRequest</code>. Fetch API secara umum digunakan untuk mengimplementasikan AJAX secara lebih mudah daripada AJAX dengan <code>XMLHttpRequest</code>. Fetch API juga mendukung lebih banyak metode HTTP dan header HTTP daripada AJAX biasa.</p> <p>Fungsi <code>fetch()</code> memiliki beberapa parameter, yaitu:</p> <ul> <li><code>url</code>: URL dari sumber daya yang akan diminta</li> <li><code>method</code>: Metode HTTP yang akan digunakan</li> <li><code>headers</code>: Header HTTP yang akan dikirim</li> <li><code>body</code>: Isi dari permintaan HTTP</li> </ul> <p>Fungsi <code>fetch()</code> mengembalikan objek <code>Response</code>. Objek <code>Response</code> memiliki beberapa properti, yaitu:</p> <ul> <li><code>status</code>: Kode <code>status</code> HTTP dari respons</li> <li><code>headers</code>: Header HTTP dari respons</li> <li><code>body</code>: Isi dari respons</li> </ul> <p>Kamu dapat mempelajari Fetch API lebih lanjut pada tautan ini.</p>"},{"location":"tutorial/tutorial-5/#fungsi-async-dan-await","title":"Fungsi Async dan Await","text":"<p>Sebelum mempelajari penggunaan fungsi <code>fetch()</code>, ada baiknya kita mempelajari fungsi <code>async</code> dan <code>await</code> yang memungkinkan pengimplementasian AJAX tanpa perlu menggunakan library eksternal, seperti jQuery.</p> <p>Fungsi <code>async</code> dan <code>await</code> merupakan fungsi baru yang diperkenalkan di ECMAScript 2017. Fungsi <code>async</code> digunakan untuk menandai fungsi sebagai fungsi yang dapat mengembalikan nilai secara asinkronus, sedangkan fungsi <code>await</code> digunakan untuk menunggu hasil dari fungsi <code>async</code>.</p> <p>Kamu dapat mempelajari fungsi <code>async</code> dan <code>await</code> lebih lanjut pada tautan ini.</p>"},{"location":"tutorial/tutorial-5/#penggunaan-fetch-api","title":"Penggunaan Fetch API","text":"<p>Fetch API menyediakan antarmuka JavaScript untuk mengakses dan memanipulasi bagian-bagian protokol, seperti requests dan responses. API ini juga menyediakan metode <code>fetch()</code> global yang menyediakan cara yang mudah dan logis untuk mengambil sumber daya secara asinkronus pada seluruh jaringan.</p> <p>Tidak seperti <code>XMLHttpRequest</code> yang merupakan API berbasis callback, Fetch API berbasis <code>Promise</code> 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.</p> <p>Berikut adalah contoh penggunaan Fetch API dengan fungsi <code>async</code> dan <code>await</code> untuk melakukan AJAX.</p> <pre><code>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</code></pre> <p>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 <code>joke</code>.</p> <p>Kamu dapat mempelajari penggunaan Fetch API lebih lanjut pada tautan ini.</p>"},{"location":"tutorial/tutorial-5/#tutorial-membuat-fungsi-untuk-menambahkan-buku-dengan-ajax","title":"Tutorial: Membuat Fungsi untuk Menambahkan Buku dengan AJAX","text":"<p>Pada bagian ini, kamu akan membuat fungsi pada views untuk menambahkan buku baru ke basis data dengan AJAX.</p> <ol> <li> <p>Buatlah fungsi baru pada <code>views.py</code> dengan nama <code>add_book_ajax</code> yang menerima parameter <code>request</code>.</p> </li> <li> <p>Impor <code>from django.views.decorators.csrf import csrf_exempt</code> pada berkas <code>views.py</code>.</p> </li> <li> <p>Tambahkan dekorator <code>@csrf_exempt</code> di atas fungsi <code>add_book_ajax</code> yang sudah kamu buat.</p> </li> <li> <p>Isilah fungsi tersebut dengan kode berikut.</p> <pre><code>...\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</code></pre> <p>Penjelasan Kode:</p> <ul> <li><code>name = request.POST.get(\"name\")</code> berfungsi untuk mengambil value <code>name</code> pada <code>request</code>.</li> <li><code>new_book</code> membuat objek Book baru dengan parameter sesuai values dari request.</li> </ul> </li> </ol>"},{"location":"tutorial/tutorial-5/#tutorial-menambahkan-routing-untuk-fungsi-add_book_ajax","title":"Tutorial: Menambahkan Routing Untuk Fungsi <code>add_book_ajax</code>","text":"<ol> <li> <p>Buka berkas <code>urls.py</code> pada folder <code>main</code> dan impor fungsi <code>add_book_ajax</code>.</p> </li> <li> <p>Tambahkan path url fungsi tersebut ke dalam urlpatterns.</p> <pre><code>...\npath('create-book-ajax/', add_book_ajax, name='add_book_ajax'),\n</code></pre> </li> </ol>"},{"location":"tutorial/tutorial-5/#tutorial-menampilkan-data-book-dengan-fetch-api","title":"Tutorial: Menampilkan Data Book dengan <code>Fetch()</code> API","text":"<ol> <li> <p>Bukalah berkas <code>main.html</code> pada <code>main/templates</code> dan hapuslah bagian kode table yang sudah kamu buat pada tutorial sebelumnya.</p> </li> <li> <p>Tambahkanlah kode berikut sebagai struktur table.</p> <pre><code>&lt;table id=\"book_table\"&gt;&lt;/table&gt;\n</code></pre> </li> <li> <p>Buatlah block <code>&lt;Script&gt;</code> di bagian bawah berkas kamu dan buatlah fungsi baru pada block <code>&lt;Script&gt;</code> tersebut dengan nama <code>getBooks().</code></p> <pre><code>&lt;script&gt;\n    async function getBooks() {\n        return fetch(\"{% url 'main:show_json' %}\").then((res) =&gt; res.json())\n    }\n&lt;/script&gt;\n</code></pre> <p>Penjelasan Kode:</p> <ul> <li>Fungsi ini menggunakan <code>fetch()</code> API ke data JSON secara asynchronous.</li> <li>Setelah data di-fetch, fungsi <code>then()</code> digunakan untuk melakukan parse pada data JSON menjadi objek JavaScript.</li> </ul> </li> <li> <p>Buatlah fungsi baru pada block <code>&lt;Script&gt;</code> dengan nama <code>refreshBooks()</code> yang digunakan untuk me-refresh data buku secara asynchronous.</p> <pre><code>&lt;script&gt;\n    ...\n    async function refreshBooks() {\n        document.getElementById(\"book_table\").innerHTML = \"\"\n        const books = await getBooks()\n        let htmlString = `&lt;tr&gt;\n            &lt;th&gt;Name&lt;/th&gt;\n            &lt;th&gt;Page&lt;/th&gt;\n            &lt;th&gt;Description&lt;/th&gt;\n            &lt;th&gt;Date Added&lt;/th&gt;\n        &lt;/tr&gt;`\n        books.forEach((item) =&gt; {\n            htmlString += `\\n&lt;tr&gt;\n            &lt;td&gt;${item.fields.name}&lt;/td&gt;\n            &lt;td&gt;${item.fields.page}&lt;/td&gt;\n            &lt;td&gt;${item.fields.description}&lt;/td&gt;\n            &lt;td&gt;${item.fields.date_added}&lt;/td&gt;\n        &lt;/tr&gt;` \n        })\n\n        document.getElementById(\"book_table\").innerHTML = htmlString\n    }\n\n    refreshBooks()\n&lt;/script&gt;\n</code></pre> <p>Penjelasan Kode:</p> <ul> <li><code>document.getElementById(\"book_table\")</code> digunakan untuk mendapatkan elemen berdasarkan ID nya. Pada baris kode ini, elemen yang dituju adalah tag <code>&lt;table&gt;</code> dengan ID <code>book_table</code> yang sudah kamu buat pada tahapan sebelumnya.</li> <li><code>innerHTML</code> digunakan untuk mengisi child element dari elemen yang dituju. Jika <code>innerHTML = \"\"</code>, maka akan mengosongkan isi child element dari elemen yang dituju.</li> <li><code>books.forEach((item))</code> digunakan untuk melakukan for each loop pada data books yang diambil menggunakan fungsi <code>getBooks()</code>. Kemudian, <code>htmlString</code> kita konkatenasi dengan data buku untuk mengisi tabel.</li> <li><code>refreshBooks()</code> digunakan untuk memanggil fungsi tersebut pada setiap kali membuka halaman web.</li> </ul> </li> </ol>"},{"location":"tutorial/tutorial-5/#tutorial-membuat-modal-sebagai-form-untuk-menambahkan-buku","title":"Tutorial: Membuat Modal Sebagai Form untuk Menambahkan Buku","text":"<ol> <li> <p>Tambahkan kode berikut untuk mengimplementasikan modal (Bootstrap) pada aplikasi kamu.</p> <pre><code>...\n&lt;div class=\"modal fade\" id=\"exampleModal\" tabindex=\"-1\" aria-labelledby=\"exampleModalLabel\" aria-hidden=\"true\"&gt;\n    &lt;div class=\"modal-dialog\"&gt;\n        &lt;div class=\"modal-content\"&gt;\n            &lt;div class=\"modal-header\"&gt;\n                &lt;h1 class=\"modal-title fs-5\" id=\"exampleModalLabel\"&gt;Add New Book&lt;/h1&gt;\n                &lt;button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"&gt;&lt;/button&gt;\n            &lt;/div&gt;\n            &lt;div class=\"modal-body\"&gt;\n                &lt;form id=\"form\" onsubmit=\"return false;\"&gt;\n                    {% csrf_token %}\n                    &lt;div class=\"mb-3\"&gt;\n                        &lt;label for=\"name\" class=\"col-form-label\"&gt;Name:&lt;/label&gt;\n                        &lt;input type=\"text\" class=\"form-control\" id=\"name\" name=\"name\"&gt;&lt;/input&gt;\n                    &lt;/div&gt;\n                    &lt;div class=\"mb-3\"&gt;\n                        &lt;label for=\"page\" class=\"col-form-label\"&gt;Page:&lt;/label&gt;\n                        &lt;input type=\"number\" class=\"form-control\" id=\"page\" name=\"page\"&gt;&lt;/input&gt;\n                    &lt;/div&gt;\n                    &lt;div class=\"mb-3\"&gt;\n                        &lt;label for=\"description\" class=\"col-form-label\"&gt;Description:&lt;/label&gt;\n                        &lt;textarea class=\"form-control\" id=\"description\" name=\"description\"&gt;&lt;/textarea&gt;\n                    &lt;/div&gt;\n                &lt;/form&gt;\n            &lt;/div&gt;\n            &lt;div class=\"modal-footer\"&gt;\n                &lt;button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\"&gt;Close&lt;/button&gt;\n                &lt;button type=\"button\" class=\"btn btn-primary\" id=\"button_add\" data-bs-dismiss=\"modal\"&gt;Add Book&lt;/button&gt;\n            &lt;/div&gt;\n        &lt;/div&gt;\n    &lt;/div&gt;\n&lt;/div&gt;\n...\n</code></pre> <p>Form pada modal tersebut sudah disesuaikan untuk model pada aplikasi <code>book_tracker</code>.</p> <p>Kamu dapat membaca dokumentasi lebih lanjut mengenai modal pada Bootstrap di sini.</p> </li> <li> <p>Menambahkan <code>button</code> yang berfungsi untuk menampilkan modal.</p> <pre><code>...\n&lt;button type=\"button\" class=\"btn btn-primary\" data-bs-toggle=\"modal\" data-bs-target=\"#exampleModal\"&gt;\n    Add Book by AJAX\n&lt;/button&gt;\n...\n</code></pre> </li> </ol>"},{"location":"tutorial/tutorial-5/#tutorial-menambahkan-data-book-dengan-ajax","title":"Tutorial: Menambahkan Data Book dengan AJAX","text":"<p>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.</p> <ol> <li> <p>Buatlah fungsi baru pada block <code>&lt;Script&gt;</code> dengan nama <code>addBook()</code>. Isilah fungsi tersebut dengan kode berikut.</p> <pre><code>&lt;script&gt;\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&lt;/script&gt;\n</code></pre> <p>Penjelasan Kode:</p> <ul> <li><code>new FormData(document.querySelector('#form'))</code> digunakan untuk membuat sebuah FormData baru yang datanya diambil dari form pada modal. Objek FormData dapat digunakan untuk mengirimkan data form tersebut ke server.</li> <li><code>document.getElementById(\"form\").reset()</code> digunakan untuk mengosongkan isi field form modal setelah di-submit.</li> </ul> </li> <li> <p>Tambahkan fungsi <code>onclick</code> pada button \"Add Book\" pada modal untuk menjalankan fungsi <code>addBook()</code> dengan menambahkan kode berikut.</p> <pre><code>&lt;script&gt;\n...\ndocument.getElementById(\"button_add\").onclick = addBook\n&lt;/script&gt;\n</code></pre> </li> </ol> <p>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.</p>"},{"location":"tutorial/tutorial-5/#penutup","title":"Penutup","text":"<p>Selamat! Kamu telah menyelesaikan Tutorial 5 mengenai AJAX dengan baik. \ud83d\ude04</p> <ol> <li>Setelah menyelesaikan tutorial ini, tampilan halaman web kamu seharusnya terlihat seperti ini.</li> </ol> <p></p> <ol> <li> <p>Kamu juga seharusnya sudah dapat menambahkan buku secara asynchronous dengan menggunakan modal AJAX.</p> <p></p> </li> <li> <p>Lakukan <code>add</code>, <code>commit</code> dan <code>push</code> untuk memperbarui repositori GitHub. Jalankan perintah berikut untuk melakukan <code>add</code>, <code>commit</code> dan <code>push</code>.</p> <pre><code>git add .\ngit commit -m \"&lt;pesan_commit&gt;\"\ngit push -u origin &lt;branch_utama&gt;\n</code></pre> <ul> <li>Ubah <code>&lt;pesan_commit&gt;</code> sesuai dengan keinginan. Contoh: <code>git commit -m \"tutorial 5 selesai\"</code>.</li> <li>Ubah <code>&lt;branch_utama&gt;</code> sesuai dengan nama branch utamamu. Contoh: <code>git push -u origin main</code> atau <code>git push -u origin master</code>.</li> </ul> </li> </ol>"},{"location":"tutorial/tutorial-5/#referensi-tambahan","title":"Referensi Tambahan","text":"<ul> <li>Async/Await Function in JavaScript</li> <li>How to Use Fetch to Make AJAX Calls in JavaScript</li> <li>Modal Bootstrap 5.3</li> </ul>"},{"location":"tutorial/tutorial-5/#kontributor","title":"Kontributor","text":"<ul> <li>Muhammad Nabil Mu'afa</li> <li>Muhammad Iqbal Dwitama</li> </ul>"},{"location":"tutorial/tutorial-5/#credits","title":"Credits","text":"<p>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.</p>"}]}
\ No newline at end of file
+{"config":{"lang":["en"],"separator":"[\\s\\-]+","pipeline":[" "]},"docs":[{"location":"","title":"Beranda","text":"<p>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.</p>"},{"location":"#dosen","title":"Dosen","text":"<p>Arawinda Dinakaramani, S.Kom., M.Hum.</p>"},{"location":"#asisten-dosen","title":"Asisten Dosen","text":"<ol> <li>Muhammad Iqbal Dwitama (MID) - Koordinator Asisten Dosen</li> <li>Muhammad Nabil Mu'afa (BIL)</li> </ol>"},{"location":"tk/pts/","title":"Proyek Tengah Semester PBP","text":"<p>Membuat Situs Web menggunakan Framework Django (Berkelompok)</p>"},{"location":"tk/pts/#tujuan-pembelajaran-khusus","title":"Tujuan Pembelajaran Khusus","text":"<ol> <li>Merancang halaman web</li> <li>Mengimplementasikan website menggunakan framework Django dengan memenuhi Models, Views, dan Templates </li> <li>Memanfaatkan framework CSS untuk mewujudkan Responsive Web Design</li> <li>Mengimplementasikan Unit Test &amp; deployment (bonus)</li> </ol>"},{"location":"tk/pts/#catatan","title":"Catatan","text":"<p>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.</p> <p>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.</p> <p>Selamat mengerjakan. \ud83d\ude04</p>"},{"location":"tk/pts/#aturan-umum-tugas-kelompok","title":"Aturan Umum Tugas Kelompok","text":"<ol> <li>Satu kelompok terdiri atas 5-6 orang.</li> <li>Satu kelompok membuat satu repositori Git di dalam satu organisasi yang digunakan oleh seluruh anggota kelompok untuk bekerja sama. Kumpulkan tautan repositori ke Scele.</li> <li>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:<ul> <li>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.</li> <li>Setelah bulan Ramadan, ada Hari Raya Idulfitri. Perayaan Hari Raya Idulfitri juga dapat menjadi peluang usaha kue kering khas Idulfitri.</li> <li>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. </li> </ul> </li> <li>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: <ul> <li>Indonesia food delivery GoFood product list</li> <li>Indonesian Food Recipes</li> <li>Indonesian Food and Drink Nutrition Dataset</li> </ul> </li> <li>Setiap anggota kelompok mengerjakan modul yang berbeda. Modul ditentukan oleh kelompok yang disesuaikan dengan ide aplikasi yang sudah didiskusikan dalam kelompok.</li> <li>Tugas kelompok dikumpulkan sebagai kesatuan aplikasi web.</li> </ol>"},{"location":"tk/pts/#aturan-khusus-per-anggota-kelompok","title":"Aturan Khusus per Anggota Kelompok","text":"<ol> <li>Menerapkan Models dengan membuat, memanfaatkan yang sudah disediakan Django, atau memanfaatkan yang sudah dibuat oleh anggota kelompok (di modul lain). </li> <li>Menerapkan Views untuk memproses request dan mengolah data untuk menghasilkan respons menggunakan templat HTML maupun mengembalikan respons JSON. </li> <li>Menerapkan templat HTML dengan kerangka yang sistematis dan efisien, seperti <code>base.html</code>, <code>header.html</code>, dan <code>footer.html</code>.</li> <li>Menerapkan responsive framework pada templat HTML (seperti Bootstrap atau Tailwind).</li> <li>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.</li> <li>Menerapkan JavaScript dengan pemanggilan AJAX.</li> <li>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.</li> <li>Menerapkan filter pada dataset makanan dan minuman yang ditampilkan. Contohnya adalah menampilkan daftar makanan dan minuman berdasarkan harga.</li> </ol>"},{"location":"tk/pts/#tahapan-tugas-kelompok","title":"Tahapan Tugas Kelompok","text":"<p> Tahapan dan deliverables Tenggat Waktu dan Keterangan Tahap I (40%) <ul> <li>Pembuatan GitHub kelompok</li> <li>README.md pada GitHub yang berisi:</li> <ol> <li>Nama-nama anggota kelompok</li> <li>Deskripsi aplikasi (cerita aplikasi yang diajukan serta kebermanfaatannya)</li> <li>Daftar modul yang akan diimplementasikan</li> <li>Sumber dataset makanan dan minuman</li> <li>Role atau peran pengguna beserta deskripsinya (karena bisa saja lebih dari satu jenis pengguna yang mengakses aplikasi)</li> </ol> </ul> 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%) <p>(Modul sudah terimplementasi dengan baik)</p> <ul> <li>Modul aplikasi dari tiap anggota kelompok</li> <li>URL Mapping untuk modul</li> <li>Models untuk modul</li> <li>Views untuk modul</li> <li>Terintegrasi sebagai satu kesatuan aplikasi</li> <li>Fungsionalitas sesuai dengan rancangan desain</li> </ul> Tenggat Waktu: Rabu, 17 April 2024, pukul 23.55 WIB <p>Kriteria Submisi: Seluruh modul yang dikerjakan oleh setiap anggota kelompok sudah muncul dan dapat diakses pada proyek Django</p> Bonus (5%) <ul> <li>Unit Test (passed) untuk semua aspek, diharapkan code coverage bisa mencapai minimal 80%</li> <li>GitHub Actions (CI/CD) sudah terkonfigurasi hingga deployment</li> <li>Pipeline status dan tautan aplikasi yang sudah di-deploy tersedia di berkas README.md pada GitHub</li> </ul> </p>"},{"location":"tugas/tugas-1/","title":"Tugas 1: Menulis Esai","text":"<p>Pemrograman Berbasis Platform (CSGE602022) \u2014 diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Genap 2023/2024</p>"},{"location":"tugas/tugas-1/#deskripsi-tugas","title":"Deskripsi Tugas","text":"<p>Tulislah sebuah esai minimal 1000 kata yang mengandung poin-poin sebagai berikut.</p> <ol> <li> <p>Pilihlah salah satu platform yang telah dijelaskan dalam Slide 1. Sebutkan nama platform yang Anda pilih.</p> </li> <li> <p>Sebutkan 3 perangkat dan teknologi yang tergolong dalam platform tersebut yang pernah Anda gunakan.</p> </li> <li> <p>Untuk masing-masing perangkat dan teknologi yang Anda sebutkan, ceritakan pengalaman Anda saat\u00a0menggunakannya.</p> </li> <li> <p>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!</p> </li> </ol>"},{"location":"tugas/tugas-1/#pengumpulan","title":"Pengumpulan","text":"<p>Tugas dikumpulkan dalam format Portable Document File (<code>*.pdf</code>) dengan ketentuan nama berkas <code>NPM_Nama_Tugas 1.pdf</code>.</p>"},{"location":"tugas/tugas-1/#tenggat-waktu-pengerjaan","title":"Tenggat Waktu Pengerjaan","text":"<p>Tenggat waktu pengerjaan Tugas 1 adalah hari Selasa, 6 Februari 2024, pukul 12.00 siang.</p> <p>Harap mengumpulkan esai yang telah kamu buat ke dalam slot submisi yang telah disediakan di SCELE.</p>"},{"location":"tugas/tugas-1/#rubrik-penilaian","title":"Rubrik Penilaian","text":"<ol> <li>Orisinalitas karya dan keatraktifan judul (10 poin)</li> <li>Format penulisan (10 poin)</li> <li>Penggunaan bahasa Indonesia yang baik dan benar (15 poin)</li> <li>Ketajaman analisis permasalahan (30 poin)</li> <li>Kelengkapan konten esai (15 poin)</li> <li>Simpulan dan saran (15 poin)</li> <li>Referensi (5 poin)</li> </ol>"},{"location":"tugas/tugas-2/","title":"Tugas 2: Implementasi Model-View-Template (MVT) pada Django","text":"<p>Pemrograman Berbasis Platform (CSGE602022) \u2014 diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Genap 2023/2024</p>"},{"location":"tugas/tugas-2/#deskripsi-tugas","title":"Deskripsi Tugas","text":"<p>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.</p>"},{"location":"tugas/tugas-2/#tema-aplikasi","title":"Tema Aplikasi","text":"<p>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.</p> <ul> <li><code>name</code> sebagai nama item dengan tipe <code>CharField</code>.</li> <li><code>amount</code> sebagai jumlah item dengan tipe <code>IntegerField</code>.</li> <li><code>description</code> sebagai deskripsi item dengan tipe <code>TextField</code>.</li> </ul> <p>Kamu dipersilakan untuk menambahkan atribut lainnya jika diinginkan, seperti <code>date</code>, <code>category</code>. Namun, model aplikasi kamu wajib memiliki ketiga atribut wajib di atas (<code>name</code>, <code>amount</code>, <code>description</code>). Nama dari ketiga atribut di atas dapat disesuaikan lagi dengan kebutuhan aplikasimu.</p> <p>Beberapa contoh ide aplikasi pengelolaan yang dapat kamu buat adalah sebagai berikut.</p> <ul> <li>TV Series Tracker: <code>title</code>, <code>episodes</code>, <code>synopsis</code>, <code>rating</code>, <code>date</code>.</li> <li>Budget Tracker: <code>name</code>, <code>price</code>, <code>description</code>, <code>category</code>, <code>date</code>.</li> <li>Fitness Tracker: <code>name</code>, <code>calories</code>, <code>description</code>, <code>date</code></li> </ul>"},{"location":"tugas/tugas-2/#checklist-tugas","title":"Checklist Tugas","text":"<p>Checklist untuk tugas ini adalah sebagai berikut.</p> <ul> <li>[ ] Membuat sebuah proyek Django baru.</li> <li>[ ] Membuat aplikasi dengan nama <code>main</code> pada proyek tersebut.</li> <li>[ ] Melakukan routing pada proyek agar dapat menjalankan aplikasi <code>main</code>.</li> <li>[ ] Membuat model pada aplikasi <code>main</code> dengan nama <code>Item</code> dan memiliki atribut wajib sebagai berikut.<ul> <li><code>name</code> sebagai nama item dengan tipe <code>CharField</code>.</li> <li><code>amount</code> sebagai jumlah item dengan tipe <code>IntegerField</code>.</li> <li><code>description</code> sebagai deskripsi item dengan tipe <code>TextField</code>.</li> </ul> </li> <li>[ ] Membuat sebuah fungsi pada <code>views.py</code> untuk dikembalikan ke dalam sebuah template HTML yang menampilkan nama aplikasi serta nama dan kelas kamu.</li> <li>[ ] Membuat sebuah routing pada <code>urls.py</code> aplikasi <code>main</code> untuk memetakan fungsi yang telah dibuat pada <code>views.py</code>.</li> <li>[ ] Melakukan deployment ke PWS terhadap aplikasi yang sudah dibuat sehingga nantinya dapat diakses oleh teman-temanmu melalui Internet.</li> <li>[ ] Membuat sebuah <code>README.md</code> yang berisi tautan menuju aplikasi PWS yang sudah di-deploy, serta jawaban dari beberapa pertanyaan berikut.<ul> <li>Jelaskan bagaimana cara kamu mengimplementasikan checklist di atas secara step-by-step (bukan hanya sekadar mengikuti tutorial).</li> <li>Buatlah bagan yang berisi request client ke web aplikasi berbasis Django beserta responnya dan jelaskan pada bagan tersebut kaitan antara <code>urls.py</code>, <code>views.py</code>, <code>models.py</code>, dan berkas <code>html</code>.</li> <li>Jelaskan mengapa kita menggunakan virtual environment? Apakah kita tetap dapat membuat aplikasi web berbasis Django tanpa menggunakan virtual environment?</li> <li>Jelaskan apakah itu MVC, MVT, MVVM dan perbedaan dari ketiganya.</li> </ul> </li> </ul> <p>Perhatikan bahwa kamu harus mengerjakan tugas ini menggunakan repositori yang berbeda dengan tutorial.</p>"},{"location":"tugas/tugas-2/#tenggat-waktu-pengerjaan","title":"Tenggat Waktu Pengerjaan","text":"<p>Tenggat waktu pengerjaan Tugas 2 adalah hari Selasa, 13 Februari, pukul 12.00 siang.</p> <p>Harap mengumpulkan link repositori yang kamu gunakan ke dalam slot submisi yang telah disediakan di SCELE.</p>"},{"location":"tugas/tugas-3/","title":"Tugas 3:  Implementasi Form dan Data Delivery pada Django","text":"<p>Pemrograman Berbasis Platform (CSGE602022) \u2014 diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Genap 2023/2024</p>"},{"location":"tugas/tugas-3/#deskripsi-tugas","title":"Deskripsi Tugas","text":"<p>Pada tugas ini, kamu akan menjalankan implementasi konsep data delivery serta menerapkan beberapa konsep yang telah dipelajari selama sesi tutorial.</p> <p>Checklist untuk tugas ini adalah sebagai berikut:</p> <ul> <li>[ ] Membuat input <code>form</code> untuk menambahkan objek model pada app sebelumnya.</li> <li>[ ] Tambahkan 4 fungsi <code>views</code> baru untuk melihat objek yang sudah ditambahkan dalam format XML, JSON, XML by ID, dan JSON by ID.</li> <li>[ ] Membuat routing URL untuk masing-masing <code>views</code> yang telah ditambahkan pada poin 2.</li> <li>[ ] Menjawab beberapa pertanyaan berikut pada <code>README.md</code> pada root folder.<ul> <li>[ ] Apa perbedaan antara form <code>POST</code> dan form <code>GET</code> dalam Django?</li> <li>[ ] Apa perbedaan utama antara XML, JSON, dan HTML dalam konteks pengiriman data?</li> <li>[ ] Mengapa JSON sering digunakan dalam pertukaran data antara aplikasi web modern?</li> <li>[ ] Jelaskan bagaimana cara kamu mengimplementasikan checklist di atas secara step-by-step (bukan hanya sekadar mengikuti tutorial).</li> </ul> </li> <li>[ ] Mengakses keempat URL di poin 2 menggunakan Postman, membuat screenshot dari hasil akses URL pada Postman, dan menambahkannya ke dalam <code>README.md</code>.</li> <li>[ ] Melakukan <code>add</code>-<code>commit</code>-<code>push</code> ke GitHub.</li> </ul>"},{"location":"tugas/tugas-3/#tenggat-waktu-pengerjaan","title":"Tenggat Waktu Pengerjaan","text":"<p>Tenggat waktu pengerjaan Tugas 3 adalah hari Selasa, 20 Februari, pukul 12.00 siang.</p> <p>Asisten dosen akan mengecek last commit dari repositori tugas lab, sehingga kamu tidak perlu mengumpulkan tautan repositori ke dalam slot submisi.</p>"},{"location":"tugas/tugas-4/","title":"Tugas 4: Implementasi Autentikasi, Session, dan Cookies pada Django","text":"<p>Pemrograman Berbasis Platform (CSGE602022) \u2014 diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Genap 2023/2024</p>"},{"location":"tugas/tugas-4/#deskripsi-tugas","title":"Deskripsi Tugas","text":"<p>Pada tugas ini, kamu akan mengimplementasikan konsep authentication, session, cookies, serta menerapkan beberapa konsep yang telah dipelajari selama sesi tutorial.</p> <p>Kerjakan checklist untuk tugas ini secara berurutan:</p> <ul> <li>[ ] Mengimplementasikan fungsi registrasi, login, dan logout untuk memungkinkan pengguna untuk mengakses aplikasi sebelumnya dengan lancar.</li> <li>[ ] Membuat dua akun pengguna dengan masing-masing tiga dummy data menggunakan model buku yang telah dibuat pada aplikasi sebelumnya untuk setiap akun di lokal.</li> <li>[ ] Menghubungkan model <code>Item</code> dengan <code>User</code>.</li> <li>[ ] Menampilkan detail informasi pengguna yang sedang logged in seperti username dan menerapkan <code>cookies</code> seperti <code>last login</code> pada halaman utama aplikasi.</li> <li> <p>[ ] Menjawab beberapa pertanyaan berikut pada <code>README.md</code> pada root folder (silakan modifikasi <code>README.md</code> yang telah kamu buat sebelumnya; tambahkan subjudul untuk setiap tugas).</p> <ul> <li>[ ] Apa itu Django <code>UserCreationForm</code>, dan jelaskan apa kelebihan dan kekurangannya?</li> <li>[ ] Apa perbedaan antara autentikasi dan otorisasi dalam konteks Django, dan mengapa keduanya penting?</li> <li>[ ] Apa itu cookies dalam konteks aplikasi web, dan bagaimana Django menggunakan cookies untuk mengelola data sesi pengguna?</li> <li>[ ] Apakah penggunaan cookies aman secara default dalam pengembangan web, atau apakah ada risiko potensial yang harus diwaspadai?</li> <li>[ ] Jelaskan bagaimana cara kamu mengimplementasikan checklist di atas secara step-by-step (bukan hanya sekadar mengikuti tutorial).</li> <li>[ ] Melakukan <code>add</code>-<code>commit</code>-<code>push</code> ke GitHub.</li> </ul> </li> </ul>"},{"location":"tugas/tugas-4/#tenggat-waktu-pengerjaan","title":"Tenggat Waktu Pengerjaan","text":"<p>Tenggat waktu pengerjaan Tugas 4 adalah Selasa, 27 Februari 2023, pukul 12.00 siang.</p> <p>Asisten dosen akan mengecek last commit dari repositori tugas lab, sehingga kamu tidak perlu mengumpulkan tautan repositori ke dalam slot submisi.</p>"},{"location":"tugas/tugas-5/","title":"Tugas 5: Desain Web menggunakan HTML, CSS dan Framework CSS","text":"<p>Pemrograman Berbasis Platform (CSGE602022) \u2014 diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Genap 2023/2024</p>"},{"location":"tugas/tugas-5/#deskripsi-tugas","title":"Deskripsi Tugas","text":"<p>Pada tugas ini, kamu akan mengimplementasikan desain web berdasarkan beberapa hal yang sudah kamu pelajari selama tutorial (CSS, Framework, dsb).</p> <p>Checklist untuk tugas ini adalah sebagai berikut:</p> <ul> <li>[ ] 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<ul> <li>[ ] Kustomisasi halaman login, register, dan tambah item semenarik mungkin.</li> <li>[ ] Kustomisasi halaman daftar item menjadi lebih berwarna dan menggunakan apporach lain selain tabel seperti dengan menggunakan Card. </li> </ul> </li> <li>[ ] Menambahkan opsi update dan delete pada masing-masing item.</li> <li>[ ] Menjawab beberapa pertanyaan berikut pada <code>README.md</code> pada root folder (silakan modifikasi <code>README.md</code> yang telah kamu buat sebelumnya; tambahkan subjudul untuk setiap tugas).<ul> <li>[ ] Jelaskan manfaat dari setiap element selector dan kapan waktu yang tepat untuk menggunakannya. </li> <li>[ ] Jelaskan HTML5 Tag yang kamu ketahui.</li> <li>[ ] Jelaskan perbedaan antara margin dan padding.</li> <li>[ ] Jelaskan perbedaan antara framework CSS Tailwind dan Bootstrap. Kapan sebaiknya kita menggunakan Bootstrap daripada Tailwind, dan sebaliknya?</li> </ul> </li> <li>[ ] Melakukan <code>add</code>-<code>commit</code>-<code>push</code> ke GitHub.</li> </ul>"},{"location":"tugas/tugas-5/#tenggat-waktu-pengerjaan","title":"Tenggat Waktu Pengerjaan","text":"<p>Tenggat waktu pengerjaan Tugas 5 adalah Selasa, 5 Maret, pukul 12.00 siang.</p> <p>Asisten dosen akan mengecek last commit dari repositori tugas lab, sehingga kamu tidak perlu mengumpulkan tautan repositori ke dalam slot submisi.</p>"},{"location":"tugas/tugas-6/","title":"Tugas 6: JavaScript dan Asynchronous JavaScript","text":"<p>Pemrograman Berbasis Platform (CSGE602022) \u2014 diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Genap 2023/2024</p>"},{"location":"tugas/tugas-6/#deskripsi-tugas","title":"Deskripsi Tugas","text":"<p>Pada tugas ini, kamu akan mengimplementasikan AJAX pada aplikasi yang telah kamu buat pada tugas sebelumnya.</p> <p>Checklist untuk tugas ini adalah sebagai berikut:</p> <ul> <li> <p>[ ] Mengubah tugas 5 yang telah dibuat sebelumnya menjadi menggunakan AJAX.</p> <ul> <li>[ ] AJAX GET<ul> <li>[ ] Ubahlah kode cards data item agar dapat mendukung AJAX GET.</li> <li>[ ] Lakukan pengambilan task menggunakan AJAX GET.</li> </ul> </li> <li> <p>[ ] AJAX POST</p> <ul> <li>[ ] Buatlah sebuah tombol yang membuka sebuah modal dengan form untuk menambahkan item.     &gt; 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.</li> </ul> </li> <li> <p>[ ] Buatlah fungsi view baru untuk menambahkan item baru ke dalam basis data.</p> </li> <li>[ ] Buatlah path <code>/create-ajax/</code> yang mengarah ke fungsi view yang baru kamu buat.</li> <li>[ ] Hubungkan form yang telah kamu buat di dalam modal kamu ke path <code>/create-ajax/</code>.</li> <li>[ ] Lakukan refresh pada halaman utama secara asinkronus untuk menampilkan daftar item terbaru tanpa reload halaman utama secara keseluruhan.</li> </ul> </li> <li> <p>[ ] Menjawab beberapa pertanyaan berikut pada <code>README.md</code> pada root folder (silakan modifikasi <code>README.md</code> yang telah kamu buat sebelumnya; tambahkan subjudul untuk setiap tugas).</p> <ul> <li>Jelaskan perbedaan antara asynchronous programming dengan synchronous programming.</li> <li>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.</li> <li>Jelaskan penerapan asynchronous programming pada AJAX.</li> <li>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.</li> <li>Jelaskan bagaimana cara kamu mengimplementasikan checklist di atas secara step-by-step (bukan hanya sekadar mengikuti tutorial).</li> </ul> </li> <li> <p>[ ] Melakukan <code>add</code>-<code>commit</code>-<code>push</code> ke GitHub.</p> </li> </ul>"},{"location":"tugas/tugas-6/#tenggat-waktu-pengerjaan","title":"Tenggat Waktu Pengerjaan","text":"<p>Tenggat waktu pengerjaan Tugas 6 adalah Jumat, 15 Maret 2024, pukul 12.00 siang.</p> <p>Asisten dosen akan mengecek last commit dari repositori tugas lab, sehingga kamu tidak perlu mengumpulkan tautan repositori ke dalam slot submisi.</p>"},{"location":"tutorial/tutorial-0/","title":"Tutorial 0: Konfigurasi dan Instalasi Git dan Django","text":"<p>Pemrograman Berbasis Platform (CSGE602022) \u2014 diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Ganjil 2023/2024</p>"},{"location":"tutorial/tutorial-0/#tujuan-pembelajaran","title":"Tujuan Pembelajaran","text":"<p>Setelah menyelesaikan tutorial ini, mahasiswa diharapkan untuk dapat:</p> <ul> <li>Mengerti perintah-perintah dasar Git yang perlu diketahui untuk mengerjakan proyek aplikasi.</li> <li>Menggunakan perintah-perintah dasar Git yang perlu diketahui untuk mengerjakan proyek aplikasi.</li> <li>Membuat repositori Git lokal dan daring (GitHub).</li> <li>Menambahkan remote antara repositori Git lokal dan repositori daring pada GitHub.</li> <li>Memahami branching pada Git dan mampu melakukan merge request/pull request.</li> </ul>"},{"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":"<p>Pengenalan awal ini akan membantumu memahami dasar-dasar mengenai Git dan platform berbasis web yang dikenal sebagai GitHub.</p>"},{"location":"tutorial/tutorial-0/#git-sistem-kontrol-versi-yang-kuat","title":"Git: Sistem Kontrol Versi yang Kuat","text":"<ul> <li>Git adalah sistem kontrol versi yang membantumu melacak perubahan pada kode sumber proyek.</li> <li>Dengan Git, kamu dapat memantau semua revisi yang telah dilakukan pada proyekmu seiring waktu.</li> </ul>"},{"location":"tutorial/tutorial-0/#github-platform-kolaborasi-menggunakan-git","title":"GitHub: Platform Kolaborasi Menggunakan Git","text":"<ul> <li>GitHub adalah platform berbasis web yang memungkinkanmu untuk menyimpan, mengelola, dan berkolaborasi pada proyek-proyek menggunakan Git.</li> <li>Ini memberikan wadah yang aman untuk meng-host proyekmu dan berinteraksi dengan rekan tim melalui Git.</li> </ul>"},{"location":"tutorial/tutorial-0/#mengapa-penting","title":"Mengapa Penting?","text":"<ul> <li>Git dan GitHub memainkan peran penting dalam pengembangan perangkat lunak modern dan kolaborasi tim.</li> <li>Keduanya memungkinkan tim untuk melacak perubahan kode, menyimpan versi, dan bekerja bersama dalam proyek secara efisien.</li> </ul> <p>Dengan pemahaman dasar mengenai Git dan GitHub, kamu siap untuk melangkah lebih jauh dalam dunia pengembangan perangkat lunak yang kolaboratif dan terstruktur.</p>"},{"location":"tutorial/tutorial-0/#langkah-1-membuat-akun-di-github","title":"Langkah 1: Membuat Akun di GitHub","text":"<p>Langkah selanjutnya adalah membuat akun di GitHub, yang akan memungkinkanmu untuk mulai berkolaborasi pada proyek-proyek menggunakan Git.</p> <ol> <li> <p>Buka Situs Web GitHub</p> <ul> <li>Buka peramban web dan akses GitHub.</li> </ul> </li> <li> <p>Membuat Akun</p> <ul> <li>Di halaman beranda GitHub, cari tombol <code>Sign up</code> di pojok kanan atas halaman.</li> <li>Klik tombol tersebut untuk memulai proses pendaftaran akun.</li> </ul> </li> <li> <p>Isi Formulir Pendaftaran</p> <ul> <li>Isi formulir pendaftaran dengan informasi yang diperlukan, seperti nama pengguna yang ingin digunakan, alamat email yang valid, dan kata sandi yang aman.</li> <li>Pastikan kamu menyimpan informasi ini dengan aman untuk masuk ke akunmu di masa mendatang.</li> </ul> </li> <li> <p>Verifikasi Akun Melalui Email</p> <ul> <li>Setelah mengisi formulir, GitHub akan mengirimkan email verifikasi ke alamat email yang kamu berikan.</li> <li>Buka email tersebut dan ikuti instruksi untuk verifikasi akunmu.</li> </ul> </li> <li> <p>Akun GitHub Siap Digunakan</p> <ul> <li>Setelah verifikasi selesai, kamu akan memiliki akun GitHub yang siap digunakan untuk berkolaborasi dalam proyek dan melacak perubahan menggunakan Git.</li> </ul> </li> </ol> <p>Catatan:</p> <ul> <li>Akun GitHub adalah pintu masuk untuk terlibat dalam kolaborasi proyek dan menyimpan proyekmu di platform ini.</li> <li>Pastikan informasi pendaftaran yang kamu berikan akurat dan aman.</li> </ul>"},{"location":"tutorial/tutorial-0/#selamat-kamu-telah-membuat-akun-github","title":"Selamat, Kamu Telah Membuat Akun GitHub","text":"<p>Kamu sekarang telah memiliki akun GitHub yang dapat digunakan untuk menyimpan proyek, berkolaborasi dengan orang lain, dan masih banyak lagi.</p>"},{"location":"tutorial/tutorial-0/#tutorial-instalasi-ide","title":"Tutorial: Instalasi IDE","text":"<p>IDE (Integrated Development Environment) adalah perangkat lunak yang membantu para pengembang dalam menulis, mengedit, dan mengelola kode. Berikut adalah langkah-langkah untuk memasang IDE.</p>"},{"location":"tutorial/tutorial-0/#langkah-1-pemilihan-text-editor-atau-ide","title":"Langkah 1: Pemilihan Text Editor atau IDE","text":"<p>Pilihlah text editor atau IDE yang sesuai dengan preferensimu. Beberapa pilihan populer yang dapat kamu pertimbangkan meliputi:</p> <ul> <li>Visual Studio Code</li> <li>Sublime Text</li> <li>PyCharm</li> <li>Vim</li> </ul>"},{"location":"tutorial/tutorial-0/#langkah-2-proses-instalasi","title":"Langkah 2: Proses Instalasi","text":"<ol> <li>Pergi ke situs web resmi IDE yang kamu pilih.</li> <li>Ikuti petunjuk yang diberikan untuk mengunduh installer IDE.</li> <li>Jalankan installer dan ikuti instruksi di layar untuk menyelesaikan proses instalasi.</li> </ol>"},{"location":"tutorial/tutorial-0/#langkah-3-memulai-menggunakan-ide","title":"Langkah 3: Memulai Menggunakan IDE","text":"<ol> <li>Setelah proses instalasi selesai, buka IDE yang telah terinstal.</li> <li>Eksplorasi antarmuka dan fitur yang disediakan oleh IDE untuk membantumu dalam pengembangan proyek.</li> </ol> <p>Catatan:</p> <ul> <li>Pastikan kamu memilih IDE yang sesuai dengan jenis proyek yang akan dikerjakan.</li> <li>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.</li> </ul>"},{"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":"<p>Jika Git belum terpasang pada sistem, kamu dapat mengikuti langkah-langkah berikut untuk menginstalnya.</p> <ol> <li>Buka situs web resmi Git di sini.</li> <li>Pilih sistem operasi yang sesuai (Windows, macOS, atau Linux) dan unduh installer yang sesuai.</li> <li>Jalankan installer yang telah diunduh dan ikuti petunjuk di layar untuk menyelesaikan proses instalasi.</li> </ol>"},{"location":"tutorial/tutorial-0/#langkah-2-konfigurasi-awal-git","title":"Langkah 2: Konfigurasi Awal Git","text":"<p>Setelah Git terpasang, langkah-langkah berikut akan membantumu mengatur konfigurasi awal sebelum mulai menggunakan Git.</p> <ol> <li>Buatlah sebuah folder/direktori baru untuk menyimpan proyek Git kamu, kemudian masuklah ke direktori tersebut.</li> <li>Salinlah path ke direktori yang sudah kamu buat.</li> <li>Buka terminal atau command prompt pada sistem, kemudian pindah ke direktori yang sudah kamu buat dengan menjalankan perintah <code>cd &lt;path_direktori&gt;</code></li> <li>Inisiasi repositori baru dengan perintah <code>git init</code>. Perintah ini akan membuat repositori Git kosong di dalam direktori yang kamu tentukan.</li> </ol>"},{"location":"tutorial/tutorial-0/#langkah-3-konfigurasi-nama-pengguna-dan-email","title":"Langkah 3: Konfigurasi Nama Pengguna dan Email","text":"<p>Sebelum mulai berkontribusi ke repositori, konfigurasikan nama pengguna dan alamat email agar terhubung dengan commit-mu.</p> <p>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.</p> <pre><code>git config --global user.name \"&lt;NAME&gt;\"\ngit config --global user.email \"&lt;EMAIL&gt;\"\n</code></pre> <p>Contoh:</p> <pre><code>git config --global user.name \"pakbepe\"\ngit config --global user.email \"pak.bepe@cs.ui.ac.id\"\n</code></pre> <p>Perlu diketahui bahwa flag <code>--global</code> akan mengubah konfigurasi global untuk seluruh sistem.</p>"},{"location":"tutorial/tutorial-0/#langkah-4-verifikasi-konfigurasi","title":"Langkah 4: Verifikasi Konfigurasi","text":"<p>Untuk memastikan konfigurasi telah diatur dengan benar pada repositori lokal, kamu dapat menjalankan perintah berikut.</p> <pre><code>git config --list\n</code></pre> <p>Catatan:</p> <ul> <li>Pastikan untuk mengganti <code>&lt;NAME&gt;</code> dan <code>&lt;EMAIL&gt;</code> dengan informasi pribadimu</li> <li>Gunakan langkah-langkah ini sebagai panduan untuk mengkonfigurasi Git sesuai kebutuhanmu.</li> </ul>"},{"location":"tutorial/tutorial-0/#tutorial-penggunaan-dasar-git","title":"Tutorial: Penggunaan Dasar Git","text":"<p>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.</p>"},{"location":"tutorial/tutorial-0/#langkah-1-melakukan-inisiasi-repositori-di-github","title":"Langkah 1: Melakukan Inisiasi Repositori di GitHub","text":"<p>Langkah pertama dalam penggunaan Git adalah melakukan inisiasi repositori di GitHub untuk memulai pelacakan perubahan pada proyekmu.</p> <ol> <li> <p>Buka GitHub melalui peramban web.</p> </li> <li> <p>Buat Repositori Baru</p> <ul> <li>Pada halaman beranda GitHub, buat repositori baru dengan nama <code>my-first-repo</code>.</li> <li>Buka halaman repositori yang baru kamu buat. Pastikan untuk mengatur visibilitas proyek sebagai \"Public\" dan biarkan pengaturan lainnya pada nilai default.</li> </ul> </li> <li> <p>Tentukan Direktori Lokal</p> <ul> <li>Pilih direktori lokal di komputermu yang telah diinisiasi dengan Git. Inilah tempat kamu akan menyimpan versi lokal dari proyek.</li> </ul> </li> <li> <p>Tambahkan Berkas <code>README.md</code></p> <ul> <li>Buat berkas baru dengan nama <code>README.md</code> dalam direktori lokal proyekmu.</li> <li>Isi berkas <code>README.md</code> dengan informasi seperti nama, NPM, dan kelas. Contoh:     <pre><code>Nama : Pak Bepe\n\nNPM : 2201234567\n\nKelas : PBP A\n</code></pre></li> </ul> </li> <li> <p>Cek Status dan Lakukan Tracking</p> <ul> <li>Buka command prompt atau terminal, lalu jalankan <code>git status</code> pada direktori yang sudah kamu pilih. Perintah ini akan menampilkan berkas-berkas yang belum di-track (untracked).</li> <li>Gunakan perintah <code>git add README.md</code> untuk menandai berkas README.md sebagai berkas yang akan di-commit (tracked).</li> </ul> </li> <li> <p>Commit Perubahan</p> <ul> <li>Jalankan kembali <code>git status</code> dan pastikan berkas README.md sudah ditandai sebagai berkas yang akan di-commit.</li> <li>Lanjutkan dengan menjalankan <code>git commit -m \"&lt;KOMENTAR KAMU&gt;\"</code> untuk membuat commit dengan pesan komentar yang sesuai dengan perubahan yang kamu lakukan.</li> </ul> </li> </ol> <p>Catatan:</p> <ul> <li>Langkah ini akan membuat kamu siap untuk mulai melacak perubahan pada proyek menggunakan Git.</li> <li>Good practice dalam memberikan komentar commit adalah menjelaskan dengan singkat apa yang kamu lakukan.</li> <li>Komentar commit yang baik dapat membantumu dan rekan-rekan tim dalam memahami tujuan perubahan tersebut.</li> <li>Hindari komentar yang terlalu umum atau ambigu, seperti <code>Perbaikan bug</code> atau <code>Update file</code>.</li> </ul>"},{"location":"tutorial/tutorial-0/#langkah-2-menghubungkan-repositori-lokal-dengan-repositori-di-github","title":"Langkah 2: Menghubungkan Repositori Lokal dengan Repositori di GitHub","text":"<p>Setelah melakukan inisiasi repositori lokal, langkah selanjutnya adalah menghubungkannya dengan repositori di GitHub agar kamu dapat berkolaborasi dan menyimpan perubahan di platform daring tersebut.</p> <ol> <li> <p>Buat Branch Utama Baru</p> <ul> <li>Di terminal atau command prompt, jalankan perintah <code>git branch -M main</code> untuk membuat branch utama baru dengan nama \"main\".</li> <li>Pastikan huruf \"M\" pada perintah <code>-M</code> ditulis dengan huruf kapital.</li> </ul> </li> <li> <p>Hubungkan dengan Repositori di GitHub</p> <ul> <li>Gunakan perintah <code>git remote add origin &lt;URL_REPO&gt;</code> untuk menghubungkan repositori lokal dengan repositori di GitHub.</li> <li>Gantilah <code>&lt;URL_REPO&gt;</code> dengan URL HTTPS repositori yang telah kamu buat di GitHub. Contoh:     <pre><code>git remote add origin https://github.com/pakbepe/test.git\n</code></pre></li> </ul> </li> <li> <p>Lakukan Penyimpanan Pertama ke GitHub</p> <ul> <li>Terakhir, lakukan penyimpanan pertama ke GitHub dengan menjalankan perintah <code>git push -u origin main</code>.</li> <li>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.</li> </ul> </li> <li> <p>Lakukan Pengecekan Kembali</p> <ul> <li>Lakukan refresh pada halaman repositori kamu, seharusnya berkas <code>README.md</code> kamu sudah dapat terlihat.</li> </ul> </li> </ol> <p>Catatan:</p> <ul> <li>Langkah ini penting untuk menjaga konsistensi antara repositori lokal dan repositori di GitHub.</li> <li>Proses ini memungkinkanmu untuk mulai berkolaborasi dan menyimpan perubahan proyek secara terstruktur di platform GitHub.</li> </ul>"},{"location":"tutorial/tutorial-0/#langkah-3-melakukan-cloning-terhadap-suatu-repositori","title":"Langkah 3: Melakukan Cloning terhadap Suatu Repositori","text":"<p>Cloning repositori adalah proses menduplikasi seluruh konten dari repositori yang ada di platform GitHub ke komputer lokal. Langkah-langkahnya adalah sebagai berikut.</p> <ol> <li> <p>Buka halaman repositori di GitHub yang telah kamu buat sebelumnya.</p> </li> <li> <p>Salin URL Clone</p> <ul> <li>Klik tombol <code>Code</code> di pojok kanan atas halaman repositori di GitHub.</li> <li>Pilih opsi HTTPS untuk salin URL clone.</li> </ul> </li> <li> <p>Clone Repositori ke Komputer Lokal</p> <ul> <li>Buka terminal atau command prompt di direktori yang berbeda dari tempat repositori lokalmu sebelumnya.</li> <li>Jalankan perintah <code>git clone &lt;URL_CLONE&gt;</code> (gantilah URL_CLONE dengan URL yang telah kamu salin).</li> <li>Perintah ini akan menduplikasi seluruh repositori ke komputer lokalmu.</li> </ul> </li> </ol> <p>Saat ini, kamu memiliki tiga repositori:</p> <ol> <li>Repositori asli di komputer lokal.</li> <li>Repositori daring di GitHub yang terhubung dengan repositori lokal.</li> <li>Repositori baru hasil dari proses cloning yang terhubung dengan repositori GitHub.</li> </ol> <p>Catatan:</p> <ul> <li>Langkah ini memungkinkanmu untuk bekerja dengan repositori di berbagai tempat dengan mudah.</li> </ul>"},{"location":"tutorial/tutorial-0/#langkah-4-melakukan-push-kepada-suatu-repositori","title":"Langkah 4: Melakukan Push kepada Suatu Repositori","text":"<p>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.</p> <ol> <li> <p>Buka kembali repositori lokal yang pertama kali kamu buat.</p> </li> <li> <p>Ubah isi berkas <code>README.md</code> dengan menambahkan atribut Hobi. Contohnya adalah sebagai berikut.</p> <pre><code>Nama : Pak Bepe\n\nNPM : 2201234567\n\nKelas : PBP A\n\nHobi : Tidur\n</code></pre> </li> <li> <p>Lakukan Push ke Repositori GitHub</p> <ul> <li>Buka terminal atau command prompt, kemudian masuk ke repositori lokal yang telah kamu ubah.</li> <li>Jalankan perintah <code>git status</code> untuk melihat status perubahan yang dilakukan.</li> <li>Jalankan <code>git add README.md</code> untuk menambahkan perubahan ke dalam tahap yang akan di-commit.</li> <li>Lakukan commit dengan menjalankan perintah <code>git commit -m \"&lt;KOMENTAR KAMU&gt;\"</code> untuk memberikan deskripsi singkat tentang perubahan yang kamu lakukan.</li> <li>Terakhir, jalankan <code>git push -u origin &lt;NAMA_BRANCH&gt;</code> untuk mengirim perubahan ke branch yang dipilih pada repositori GitHub (gantilah \"Nama Branch\" dengan target branch, misalnya <code>main</code>).</li> </ul> </li> <li> <p>Lakukan Pengecekan Kembali</p> <ul> <li>Lakukan refresh halaman kamu, seharusnya berkas <code>README.md</code> kamu sudah berubah.</li> </ul> </li> </ol> <p>Catatan: Jika kamu ingin mengambil semua perubahan yang belum di-stage (ditandai untuk dimasukkan dalam commit) dari seluruh direktori proyek kamu, jalankan <code>git add .</code>.</p>"},{"location":"tutorial/tutorial-0/#langkah-5-melakukan-pull-dari-suatu-repositori","title":"Langkah 5: Melakukan Pull dari Suatu Repositori","text":"<p>Pull pada suatu repositori adalah proses mengambil perubahan terbaru dari repositori di GitHub dan menggabungkannya dengan repositori lokal.</p> <ol> <li> <p>Buka kembali repositori lokal yang telah kamu clone sebelumnya di terminal atau command prompt.</p> </li> <li> <p>Jalankan Perintah Pull</p> <ul> <li>Jalankan perintah <code>git pull origin main</code> untuk mengambil perubahan terbaru yang ada di repositori GitHub dan menggabungkannya dengan repositori lokalmu.</li> </ul> </li> <li> <p>Lakukan Pengecekan Kembali</p> <ul> <li>Periksa kembali berkas <code>README.md</code> di repositori lokal tersebut. Seharusnya berkas <code>README.md</code> kamu sudah menampilkan hobi kamu.</li> </ul> </li> </ol> <p>Catatan:</p> <ul> <li>Langkah ini memastikan bahwa repositori lokalmu selalu diperbarui dengan perubahan terbaru yang ada di repositori GitHub.</li> <li>Melakukan pull secara berkala penting untuk menghindari konflik dan memastikan kamu bekerja dengan versi terbaru dari proyek.</li> </ul>"},{"location":"tutorial/tutorial-0/#langkah-6-melakukan-branching-pada-suatu-repositori","title":"Langkah 6: Melakukan Branching pada Suatu Repositori","text":"<p>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.</p> <p>Apa Itu Branch di Git?</p> <ul> <li>Branch di Git adalah cabang terpisah dari source code yang memungkinkan pengembangan independen dari fitur atau perubahan.</li> <li> <p>Hal ini memungkinkan tim untuk bekerja pada fitur atau perbaikan bug tanpa mengganggu kode yang ada di branch utama.</p> </li> <li> <p>Membuat dan Mengganti Branch Baru</p> <ul> <li>Pada direktori repositori lokal asli (bukan clone), jalankan perintah <code>git checkout -b &lt;NAMA_BRANCH&gt;</code> di terminal atau command prompt untuk membuat dan beralih ke branch baru. Contoh: <code>git checkout -b jurusan_branch</code></li> <li> <p>Tambahkan atribut jurusan pada berkas <code>README.md</code>. Contoh:</p> <pre><code>Nama : Pak Bepe\n\nNPM : 2201234567\n\nKelas : PBP A\n\nHobi : Tidur\n\nJurusan : Ilmu Sistem Informasi Komputer\n</code></pre> </li> </ul> </li> <li> <p>Menyimpan Perubahan dan Push ke GitHub</p> <ul> <li>Setelah menambahkan atribut jurusan, simpan berkas tersebut.</li> <li>Lakukan <code>add</code>, <code>commit</code>, dan <code>push</code> ke GitHub dengan menjalankan perintah yang sudah kamu kuasai sebelumnya.</li> <li>Jalankan perintah <code>git push -u origin &lt;NAMA_BRANCH&gt;</code>. Pastikan untuk mengganti <code>&lt;NAMA_BRANCH&gt;</code> sesuai dengan nama branch baru yang telah dibuat.</li> </ul> </li> <li> <p>Menggabungkan Branch Menggunakan Pull Request</p> <ul> <li>Buka kembali halaman repositori kamu pada GitHub.</li> <li>Secara otomatis, pop-up dengan tombol <code>Compare &amp; pull request</code> akan muncul. Jika tidak, alternatifnya adalah dengan menekan tombol <code>Pull Request</code> dan kemudian memilih opsi <code>New pull request</code>.</li> <li>Setelah itu, GitHub akan membandingkan perubahan yang ada di kedua branch yang ingin digabungkan.</li> <li>Apabila tidak terdapat konflik, tekan tombol <code>Merge pull request</code> yang akan menggabungkan perubahan dari branch yang ingin digabungkan ke dalam branch utama (<code>main</code>).</li> <li>Dengan melakukan langkah di atas, semua perubahan dari kedua branch akan diintegrasikan ke dalam branch utama, menciptakan kesatuan antara perubahan tersebut.</li> </ul> </li> </ul> <p>Catatan:</p> <ul> <li>Jika kamu ingin berpindah antar branch yang sudah ada, jalankan <code>git checkout &lt;NAMA_BRANCH&gt;</code> pada terminal. Flag <code>-b</code> pada perintah sebelum-sebelumnya digunakan untuk membuat branch baru dan beralih ke branch tersebut dalam satu langkah.</li> <li>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.</li> <li>Jika terdapat konflik atau perubahan yang saling bertabrakan, platform ini akan meminta kamu untuk menentukan perubahan mana yang sebaiknya diambil.</li> <li>Penting untuk memahami konsep branching dalam Git, karena ini memungkinkan pengembangan yang terorganisir dan terpisah, sebelum semua perubahan dikombinasikan kembali ke dalam kode utama.</li> </ul>"},{"location":"tutorial/tutorial-0/#tutorial-instalasi-django-dan-inisiasi-proyek-django","title":"Tutorial: Instalasi Django dan Inisiasi Proyek Django","text":"<p>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.</p>"},{"location":"tutorial/tutorial-0/#langkah-1-membuat-direktori-dan-mengaktifkan-virtual-environment","title":"Langkah 1: Membuat Direktori dan Mengaktifkan Virtual Environment","text":"<ol> <li>Buat direktori baru dengan nama <code>book-tracker</code> dan masuk ke dalamnya.</li> <li>Di dalam direktori tersebut, buka command prompt (Windows) atau terminal shell (Unix).</li> <li> <p>Buat virtual environment dengan menjalankan perintah berikut.</p> <pre><code>python -m venv env\n</code></pre> </li> <li> <p>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.</p> <ul> <li> <p>Windows:</p> <pre><code>env\\Scripts\\activate\n</code></pre> </li> <li> <p>Unix (Mac/Linux):</p> <pre><code>source env/bin/activate\n</code></pre> </li> </ul> </li> <li> <p>Virtual environment akan aktif dan ditandai dengan <code>(env)</code> di baris input terminal.</p> </li> </ol>"},{"location":"tutorial/tutorial-0/#langkah-2-menyiapkan-dependencies-dan-membuat-proyek-django","title":"Langkah 2: Menyiapkan Dependencies dan Membuat Proyek Django","text":"<p>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.</p> <ol> <li> <p>Di dalam direktori yang sama, buat berkas <code>requirements.txt</code> dan tambahkan beberapa dependencies.</p> <pre><code>django\ngunicorn\nwhitenoise\npsycopg2-binary\nrequests\nurllib3\n</code></pre> </li> <li> <p>Lakukan instalasi terhadap dependencies yang ada dengan perintah berikut. Jangan lupa jalankan virtual environment terlebih dahulu sebelum menjalankan perintah berikut.</p> <pre><code>pip install -r requirements.txt\n</code></pre> </li> <li> <p>Buat proyek Django bernama <code>book_tracker</code> dengan perintah berikut.</p> <pre><code>django-admin startproject book_tracker .\n</code></pre> <p>Pastikan karakter <code>.</code> tertulis di akhir perintah</p> </li> </ol>"},{"location":"tutorial/tutorial-0/#langkah-3-konfigurasi-proyek-dan-menjalankan-server","title":"Langkah 3: Konfigurasi Proyek dan Menjalankan Server","text":"<ol> <li> <p>Tambahkan <code>*</code> pada <code>ALLOWED_HOSTS</code> di <code>settings.py</code> untuk keperluan deployment:</p> <pre><code>...\nALLOWED_HOSTS = [\"*\"]\n...\n</code></pre> </li> </ol> <p>Dalam konteks deployment, <code>ALLOWED_HOSTS</code> berfungsi sebagai daftar host yang diizinkan untuk mengakses aplikasi web. Dengan menetapkan nilai <code>[\"*\"]</code>, 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.</p> <ol> <li> <p>Pastikan bahwa berkas <code>manage.py</code> ada pada direktori yang aktif pada terminal kamu saat ini. Jalankan server Django dengan perintah:</p> <ul> <li> <p>Windows:</p> <pre><code>python manage.py runserver\n</code></pre> </li> <li> <p>Unix:</p> <pre><code>python3 manage.py runserver\n</code></pre> </li> </ul> </li> <li> <p>Buka http://localhost:8000 pada peramban web untuk melihat animasi roket sebagai tanda aplikasi Django kamu berhasil dibuat.</p> </li> </ol>"},{"location":"tutorial/tutorial-0/#langkah-4-menghentikan-server-dan-menonaktifkan-virtual-environment","title":"Langkah 4: Menghentikan Server dan Menonaktifkan Virtual Environment","text":"<ol> <li>Untuk menghentikan server, tekan <code>Ctrl+C</code> (Windows/Linux) atau <code>Control+C</code> (Mac) pada terminal.</li> <li> <p>Nonaktifkan virtual environment dengan perintah:</p> <pre><code>deactivate\n</code></pre> <p>Selamat! Kamu telah berhasil membuat aplikasi Django dari awal.</p> </li> </ol>"},{"location":"tutorial/tutorial-0/#tutorial-unggah-proyek-ke-repositori-github","title":"Tutorial: Unggah Proyek ke Repositori GitHub","text":"<ol> <li> <p>Buatlah repositori GitHub baru bernama <code>book-tracker</code> dengan visibilitas public.</p> </li> <li> <p>Inisiasi direktori lokal <code>book-tracker</code> sebagai repositori Git.</p> <p>Hint: Ingat kembali tahap tutorial sebelumnya</p> </li> <li> <p>Tambahkan Berkas <code>.gitignore</code></p> <ul> <li> <p>Tambahkan berkas <code>.gitignore</code> dan isilah berkas tersebut dengan teks berikut.</p> <pre><code># 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</code></pre> </li> <li> <p>Berkas <code>.gitignore</code> adalah sebuah berkas konfigurasi yang digunakan dalam repositori Git untuk menentukan berkas-berkas dan direktori-direktori yang harus diabaikan oleh Git.</p> </li> <li>Berkas-berkas yang tercantum di dalam <code>.gitignore</code> tidak akan dimasukkan ke dalam versi kontrol Git.</li> <li>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.</li> </ul> </li> <li> <p>Lakukan <code>add</code>, <code>commit</code>, dan <code>push</code> dari direktori repositori lokal.</p> </li> </ol> <p>Catatan:</p> <ul> <li>Repositori <code>book-tracker</code> yang baru saja kamu buat akan menjadi landasan untuk tutorial-tutorial berikutnya. Repositori ini akan terus digunakan dan berkembang seiring tutorial yang kamu ikuti.</li> <li>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!</li> <li>Oleh karena itu, pastikan kamu mengelola repositori ini dengan baik dan mengikuti tutorial-tutorial selanjutnya untuk mengembangkan kemampuan kamu dalam pemrograman berbasis platform.</li> </ul>"},{"location":"tutorial/tutorial-0/#akhir-kata","title":"Akhir Kata","text":"<p>Selamat! Kamu sudah menyelesaikan tutorial tentang penggunaan Git, GitHub, instalasi IDE, dan pengembangan proyek dengan Django.</p> <p>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!</p>"},{"location":"tutorial/tutorial-0/#referensi-tambahan","title":"Referensi Tambahan","text":"<ul> <li>About pull request merges</li> <li>Resolving a merge conflict on GitHub</li> </ul>"},{"location":"tutorial/tutorial-0/#kontributor","title":"Kontributor","text":"<ul> <li>Muhammad Iqbal Dwitama</li> <li>Muhammad Nabil Mu'afa</li> </ul>"},{"location":"tutorial/tutorial-0/#credits","title":"Credits","text":"<p>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.</p>"},{"location":"tutorial/tutorial-1/","title":"Tutorial 1: Pengenalan Aplikasi Django dan Model-View-Template (MVT) pada Django","text":"<p>Pemrograman Berbasis Platform (CSGE602022) \u2014 diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Genap 2023/2024</p>"},{"location":"tutorial/tutorial-1/#tujuan-pembelajaran","title":"Tujuan Pembelajaran","text":"<p>Setelah menyelesaikan tutorial ini, mahasiswa diharapkan untuk dapat:</p> <ul> <li>Mengerti konsep MVT pada aplikasi Django</li> <li>Mengerti bagaimana alur Django menampilkan sebuah halaman HTML</li> <li>Mengerti konfigurasi routing yang ada pada <code>urls.py</code></li> <li>Memahami kaitan models, views dan template pada Django</li> <li>Memahami pembuatan unit test pada framework Django</li> </ul>"},{"location":"tutorial/tutorial-1/#ringkasan-hasil-tutorial-0","title":"Ringkasan Hasil Tutorial 0","text":"<p>Untuk membantumu mengerjakan tutorial 1 dengan baik, kami mengharapkan hasil pengerjaan tutorial 0 sebagai berikut.</p> <ol> <li>Pada komputer lokal, terdapat direktori utama <code>book-tracker</code> yang telah diinisiasi sebagai repositori lokal.</li> <li> <p>Pada direktori utama <code>book-tracker</code> tersebut, terdapat beberapa berkas dan subdirektori berikut.</p> </li> <li> <p>Subdirektori <code>env</code>.</p> </li> <li> <p>Subdirektori proyek <code>book_tracker</code>. Berbeda dengan direktori utama, subdirektori ini terbentuk setelah menjalankan perintah</p> <pre><code>django-admin startproject book_tracker .\n</code></pre> </li> <li> <p>Berkas <code>.gitignore</code>.</p> </li> <li>Berkas <code>manage.py</code>.</li> <li>Berkas <code>requirements.txt</code>.</li> <li>(Opsional) Berkas <code>db.sqlite3</code>.</li> </ol> <p>Struktur proyek <code>book-tracker</code> pada direktori lokal adalah sebagai berikut.</p> <p></p> <ol> <li> <p>Pada repositori GitHub, pastikan repositori <code>book-tracker</code> memiliki berkas dan direktori berikut.</p> </li> <li> <p>Direktori proyek <code>book_tracker</code>. Direktori ini hasil menjalankan perintah</p> <pre><code>django-admin startproject book_tracker .\n</code></pre> </li> <li> <p>Berkas <code>.gitignore</code>.</p> </li> <li>Berkas <code>manage.py</code>.</li> <li>Berkas <code>requirements.txt</code>.</li> </ol> <p>Struktur proyek <code>book-tracker</code> pada repositori GitHub adalah sebagai berikut.</p> <p></p>"},{"location":"tutorial/tutorial-1/#pengenalan-mengenai-konsep-mvt","title":"Pengenalan Mengenai Konsep MVT","text":"<p>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).</p>"},{"location":"tutorial/tutorial-1/#apa-itu-konsep-mvt","title":"Apa Itu Konsep MVT?","text":"<p>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.</p>"},{"location":"tutorial/tutorial-1/#apa-itu-model","title":"Apa Itu Model?","text":"<p>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.</p>"},{"location":"tutorial/tutorial-1/#apa-itu-view","title":"Apa Itu View?","text":"<p>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.</p>"},{"location":"tutorial/tutorial-1/#apa-itu-template","title":"Apa Itu Template?","text":"<p>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.</p>"},{"location":"tutorial/tutorial-1/#hubungan-antara-komponen-komponen-mvt","title":"Hubungan Antara Komponen-komponen MVT","text":"<p>Secara ringkas, konsep MVT berjalan dalam kerangka berikut:</p> <ul> <li>Model: Menyimpan data dan logika aplikasi.</li> <li>View: Menampilkan data dari model dan menghubungkannya dengan template.</li> <li>Template: Menentukan tampilan antarmuka pengguna.</li> </ul>"},{"location":"tutorial/tutorial-1/#manfaat-mvt","title":"Manfaat MVT","text":"<ul> <li>Pemisahan Tugas</li> </ul> <p>MVT memisahkan tugas antara logika aplikasi, tampilan, dan data, sehingga memungkinkan pengembang untuk bekerja pada setiap komponen secara terpisah.</p> <ul> <li>Kode yang Mudah Dikelola</li> </ul> <p>Dengan pemisahan tugas yang jelas, kode menjadi lebih terorganisir dan mudah dikelola.</p> <ul> <li>Penggunaan Kembali</li> </ul> <p>Kode dapat digunakan kembali dalam berbagai bagian aplikasi yang berbeda.</p> <ul> <li>Skalabilitas</li> </ul> <p>Struktur MVT mendukung skalabilitas dengan memungkinkan pengembangan paralel pada setiap komponen.</p> <p>Catatan:</p> <ul> <li>Konsep MVT sangat terkait dengan framework Django dalam pengembangan web dengan bahasa pemrograman Python.</li> <li>Dalam praktiknya, pemahaman yang baik mengenai konsep MVT akan membantu kamu dalam merancang aplikasi web yang lebih terstruktur dan mudah dikelola.</li> </ul>"},{"location":"tutorial/tutorial-1/#tutorial-membuat-aplikasi-django-beserta-konfigurasi-model","title":"Tutorial: Membuat Aplikasi Django beserta Konfigurasi Model","text":"<p>Dalam tutorial ini, akan dijelaskan mengenai konsep aplikasi dan proyek dalam Django.</p> <p>Apa Itu Proyek dan Aplikasi dalam Django?</p> <ul> <li> <p>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.</p> </li> <li> <p>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.</p> </li> </ul> <p>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 <code>book-tracker</code>, sementara itu direktori proyek memiliki nama <code>book_tracker</code>. Perbedaan hanya terletak pada penggunaan dash (<code>-</code>) dan underscore (<code>_</code>).</p>"},{"location":"tutorial/tutorial-1/#langkah-1-persiapan-awal","title":"Langkah 1: Persiapan Awal","text":"<ol> <li> <p>Buka direktori utama <code>book-tracker</code>.</p> </li> <li> <p>Sebelum memulai, pastikan kamu berada di direktori utama <code>book-tracker</code> yang telah dibuat pada tutorial sebelumnya.</p> </li> <li> <p>Di dalam direktori ini, kamu akan melanjutkan pengembangan proyek Django.</p> </li> <li> <p>Buka terminal atau command prompt dan pastikan direktori kerja kamu adalah direktori utama <code>book-tracker</code>.</p> </li> <li> <p>Aktifkan virtual environment yang telah dibuat sebelumnya. Jalankan perintah berikut sesuai dengan sistem operasi perangkat kamu.</p> </li> <li> <p>Windows:</p> <pre><code>env\\Scripts\\activate.bat\n</code></pre> </li> <li> <p>Unix (Linux &amp; Mac OS):</p> <pre><code>source env/bin/activate\n</code></pre> </li> </ol>"},{"location":"tutorial/tutorial-1/#langkah-2-membuat-aplikasi-main-dalam-proyek-book-tracker","title":"Langkah 2: Membuat Aplikasi <code>main</code> dalam Proyek Book Tracker","text":"<p>Kamu akan membuat aplikasi baru bernama <code>main</code> dalam proyek book tracker.</p> <ol> <li>Jalankan perintah berikut untuk membuat aplikasi baru.</li> </ol> <pre><code>python manage.py startapp main\n</code></pre> <p>Setelah perintah di atas dijalankan, akan terbentuk direktori baru dengan nama <code>main</code> yang akan berisi struktur awal untuk aplikasimu.</p> <p>Mungkin kamu cukup bingung dengan istilah direktori utama, direktori proyek, atau direktori aplikasi. Akan tetapi, seiring berjalannya waktu, kamu pasti bisa!</p> <ol> <li> <p>Daftarkan aplikasi <code>main</code> ke dalam proyek.</p> </li> <li> <p>Buka berkas <code>settings.py</code> di dalam direktori proyek <code>book_tracker</code>.</p> </li> <li>Temukan variabel <code>INSTALLED_APPS</code>.</li> <li> <p>Tambahkan <code>'main'</code> ke dalam daftar aplikasi yang ada.</p> <pre><code>INSTALLED_APPS = [\n    ...,\n    'main',\n    ...\n]\n</code></pre> </li> </ol> <p>Dengan melakukan langkah-langkah tersebut, kamu telah mendaftarkan aplikasi <code>main</code> ke dalam proyek book tracker kamu sehingga proyekmu sudah mengenali bahwa terdapat aplikasi <code>main</code> yang dapat dijalankan.</p>"},{"location":"tutorial/tutorial-1/#tutorial-implementasi-template-dasar","title":"Tutorial: Implementasi Template Dasar","text":"<p>Kamu akan membuat template <code>main.html</code> di dalam direktori baru bernama <code>templates</code> pada aplikasi <code>main</code>. Template ini akan digunakan untuk menampilkan data book tracker kamu.</p> <p>Saat ini, aplikasi book tracker belum menampilkan data apapun. Data akan ditampilkan pada tutorial selanjutnya.</p>"},{"location":"tutorial/tutorial-1/#langkah-1-membuat-dan-mengisi-berkas-mainhtml","title":"Langkah 1: Membuat dan Mengisi Berkas <code>main.html</code>","text":"<p>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.</p> <p>Hint: Kamu akan mempelajari HTML lebih lanjut di tutorial 4.</p> <ol> <li> <p>Buat direktori baru bernama <code>templates</code> di dalam direktori aplikasi <code>main</code>.</p> </li> <li> <p>Di dalam direktori <code>templates</code>, buat berkas baru bernama <code>main.html</code> dengan isi sebagai berikut. Gantilah nilai yang sesuai dengan data kamu.</p> </li> </ol> <pre><code>&lt;h1&gt;Book Tracker Page&lt;/h1&gt;\n\n&lt;h5&gt;Name:&lt;/h5&gt;\n&lt;p&gt;Pak Bepe&lt;/p&gt;\n&lt;!-- Ubahlah sesuai dengan nama kamu --&gt;\n&lt;h5&gt;Class:&lt;/h5&gt;\n&lt;p&gt;PBP A&lt;/p&gt;\n&lt;!-- Ubahlah sesuai dengan kelas kamu --&gt;\n</code></pre> <ol> <li> <p>Buka berkas HTML di web browser.</p> </li> <li> <p>Sebelum dihubungkan dengan aplikasi, cobalah membuka berkas <code>main.html</code> di web browser-mu.</p> </li> <li>Perlu dicatat bahwa pada tahap ini hanya untuk memeriksa tampilan dasar HTML dan belum terhubung dengan Django.</li> <li> <p>Berikut merupakan contoh tampilan HTML yang diharapkan.</p> <p></p> </li> </ol>"},{"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 <code>models.py</code> dalam Aplikasi <code>main</code>","text":"<p>Pada langkah ini, kamu akan mengubah berkas <code>models.py</code> yang terdapat di dalam direktori aplikasi <code>main</code> untuk mendefinisikan model baru.</p> <ol> <li> <p>Buka berkas <code>models.py</code> pada direktori aplikasi <code>main</code>.</p> </li> <li> <p>Isi berkas <code>models.py</code> dengan kode berikut.</p> </li> </ol> <pre><code>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</code></pre> <p>Penjelasan Kode:</p> <ul> <li><code>models.Model</code> adalah kelas dasar yang digunakan untuk mendefinisikan model dalam Django.</li> <li><code>Book</code> adalah nama model yang kamu definisikan.</li> <li><code>name</code> (nama), <code>date_added</code> (tanggal tambah), <code>page</code> (halaman), dan <code>description</code> (deskripsi) adalah atribut atau field pada model. Setiap field memiliki tipe data yang sesuai seperti <code>CharField</code>, <code>DateField</code>, <code>IntegerField</code>, dan <code>TextField</code>.</li> </ul>"},{"location":"tutorial/tutorial-1/#langkah-2-membuat-dan-mengaplikasikan-migrasi-model","title":"Langkah 2: Membuat dan Mengaplikasikan Migrasi Model","text":"<p>Apa itu migrasi model?</p> <ul> <li>Migrasi model adalah cara Django melacak perubahan pada model basis data kamu.</li> <li>Migrasi ini adalah instruksi untuk mengubah struktur tabel basis data sesuai dengan perubahan model yang didefinisikan dalam kodemu.</li> </ul> <p>Bagaimana cara melakukan migrasi model?</p> <ol> <li>Jalankan perintah berikut pada terminal atau command prompt di direktori utama untuk membuat migrasi model.</li> </ol> <pre><code>python manage.py makemigrations\n</code></pre> <p><code>makemigrations</code> menciptakan berkas migrasi yang berisi perubahan model yang belum diaplikasikan ke dalam basis data.</p> <ol> <li>Masih di direktori utama, jalankan perintah berikut untuk menerapkan migrasi ke dalam basis data lokal.</li> </ol> <pre><code>python manage.py migrate\n</code></pre> <p><code>migrate</code> mengaplikasikan perubahan model yang tercantum dalam berkas migrasi ke basis data.</p> <p>Setiap kali kamu melakukan perubahan pada model, seperti menambahkan atau mengubah atribut, kamu perlu melakukan migrasi untuk merefleksikan perubahan tersebut.</p>"},{"location":"tutorial/tutorial-1/#tutorial-menghubungkan-view-dengan-template","title":"Tutorial: Menghubungkan View dengan Template","text":"<p>Dalam tutorial ini, kamu akan menghubungkan view dengan template menggunakan Django. Langkah-langkah ini akan menjelaskan bagaimana membuat fungsi view <code>show_main</code> dalam aplikasi <code>main</code> dan me-render template dengan data yang telah diambil dari model.</p>"},{"location":"tutorial/tutorial-1/#langkah-1-mengintegrasikan-komponen-mvt","title":"Langkah 1: Mengintegrasikan Komponen MVT","text":"<p>Kamu akan mengimpor modul yang diperlukan dan membuat fungsi view <code>show_main</code>.</p> <ol> <li> <p>Buka berkas <code>views.py</code> yang terletak di dalam berkas aplikasi <code>main</code>.</p> </li> <li> <p>Tambahkan baris-baris impor berikut di bagian paling atas berkas apabila belum ada.</p> </li> </ol> <pre><code>from django.shortcuts import render\n</code></pre> <p>Penjelasan Kode:</p> <p><code>from django.shortcuts import render</code> berguna untuk mengimpor fungsi render dari modul <code>django.shortcuts</code>. Fungsi render digunakan untuk me-render tampilan HTML dengan menggunakan data yang diberikan.</p> <ol> <li>Tambahkan fungsi <code>show_main</code> di bawah impor:</li> </ol> <pre><code>def show_main(request):\n    context = {\n        'name': 'Pak Bepe',\n        'class': 'PBP A'\n    }\n\n    return render(request, \"main.html\", context)\n</code></pre> <p>Penjelasan Kode:</p> <ul> <li><code>def show_main(request)</code> merupakan deklarasi fungsi <code>show_main</code>, yang menerima parameter <code>request</code>. Fungsi ini akan mengatur permintaan HTTP dan mengembalikan tampilan yang sesuai.</li> <li> <p><code>context</code> adalah dictionary yang berisi data yang akan dikirimkan ke tampilan. Pada konteks ini, dua data disertakan, yaitu:</p> <ul> <li><code>name</code>: Data nama.</li> <li><code>class</code>: Data kelas.</li> </ul> </li> <li> <p><code>return render(request, \"main.html\", context)</code> berguna untuk me-render tampilan <code>main.html</code> dengan menggunakan fungsi <code>render</code>. Fungsi <code>render</code> mengambil tiga argumen:</p> <ul> <li><code>request</code>: Ini adalah objek permintaan HTTP yang dikirim oleh pengguna.</li> <li><code>main.html</code>: Ini adalah nama berkas template yang akan digunakan untuk me-render tampilan.</li> <li><code>context</code>: Ini adalah dictionary yang berisi data yang akan diteruskan ke tampilan untuk digunakan dalam penampilan dinamis.</li> </ul> </li> </ul>"},{"location":"tutorial/tutorial-1/#langkah-2-modifikasi-template","title":"Langkah 2: Modifikasi Template","text":"<p>Sekarang, kamu akan mengubah template <code>main.html</code> agar dapat menampilkan data yang telah diambil dari model.</p> <ol> <li> <p>Buka berkas <code>main.html</code> yang telah dibuat sebelumnya dalam direktori <code>templates</code> pada direktori <code>main</code>.</p> </li> <li> <p>Ubah nama dan kelas yang sebelumnya dibuat secara statis menjadi kode Django yang sesuai untuk menampilkan data.</p> </li> </ol> <pre><code>...\n&lt;h5&gt;Name:&lt;/h5&gt;\n&lt;p&gt;{{ name }}&lt;/p&gt;\n&lt;p&gt;&lt;/p&gt;\n&lt;h5&gt;Class:&lt;/h5&gt;\n&lt;p&gt;{{ class }}&lt;/p&gt;\n</code></pre> <p>Penjelasan Kode:</p> <p>Sintaks Django <code>{{ name }}</code> dan <code>{{ class }}</code> digunakan untuk menampilkan nilai dari variabel yang telah didefinisikan dalam <code>context</code>.</p>"},{"location":"tutorial/tutorial-1/#tutorial-mengonfigurasi-routing-url","title":"Tutorial: Mengonfigurasi Routing URL","text":"<p>Kamu akan mengatur routing URL agar aplikasi <code>main</code> dapat diakses melalui web browser.</p>"},{"location":"tutorial/tutorial-1/#langkah-1-mengonfigurasi-routing-url-aplikasi-main","title":"Langkah 1: Mengonfigurasi Routing URL Aplikasi <code>main</code>","text":"<ol> <li>Buatlah berkas baru bernama<code>urls.py</code> di dalam direktori <code>main</code>.</li> <li>Isi <code>urls.py</code> dengan kode berikut.</li> </ol> <pre><code>from django.urls import path\nfrom main.views import show_main\n\napp_name = 'main'\n\nurlpatterns = [\n    path('', show_main, name='show_main'),\n]\n</code></pre> <p>Penjelasan Kode dalam <code>urls.py</code> pada Aplikasi <code>main</code>:</p> <ul> <li>Berkas <code>urls.py</code> pada aplikasi <code>main</code> bertanggung jawab untuk mengatur rute URL yang terkait dengan aplikasi <code>main</code>.</li> <li>Impor <code>path</code> dari <code>django.urls</code> untuk mendefinisikan pola URL.</li> <li>Gunakan fungsi <code>show_main</code> dari modul <code>main.views</code> sebagai tampilan yang akan ditampilkan ketika URL terkait diakses.</li> <li>Nama <code>app_name</code> diberikan untuk memberikan nama unik pada pola URL dalam aplikasi.</li> </ul>"},{"location":"tutorial/tutorial-1/#langkah-2-mengonfigurasi-routing-url-proyek","title":"Langkah 2: Mengonfigurasi Routing URL Proyek","text":"<p>Kamu akan menambahkan rute URL dalam <code>urls.py</code> pada proyek untuk menghubungkannya ke tampilan <code>main</code>.</p> <ol> <li>Buka berkas <code>urls.py</code> di dalam direktori proyek <code>book_tracker</code>, bukan yang ada di dalam direktori aplikasi <code>main</code>.</li> <li>Impor fungsi <code>include</code> dari <code>django.urls</code>.</li> </ol> <pre><code>...\nfrom django.urls import path, include\n...\n</code></pre> <ol> <li>Tambahkan rute URL seperti berikut untuk mengarahkan ke tampilan <code>main</code> di dalam variabel <code>urlpatterns</code>.</li> </ol> <pre><code>urlpatterns = [\n    ...\n    path('', include('main.urls')),\n    ...\n]\n</code></pre> <p>Penjelasan:</p> <ul> <li>Berkas <code>urls.py</code> pada proyek bertanggung jawab untuk mengatur rute URL dalam skala proyek.</li> <li>Fungsi <code>include</code> digunakan untuk mengimpor rute URL dari aplikasi lain (dalam hal ini, dari aplikasi <code>main</code>) ke dalam berkas <code>urls.py</code> proyek.</li> <li>Path URL <code>''</code> akan diarahkan ke rute yang didefinisikan dalam berkas <code>urls.py</code> aplikasi <code>main</code>. Path URL dibiarkan berupa string kosong agar halaman aplikasi <code>main</code> dapat diakses secara langsung.</li> </ul> <p>Sebagai bayangan, apabila kamu menggunakan path <code>'main/'</code> pada contoh di atas, maka kamu perlu mengakses halaman <code>http://localhost:8000/main/</code> untuk mengakses halaman aplikasi <code>main</code>. Karena path yang ditentukan adalah <code>''</code>, maka kamu dapat mengakses aplikasi <code>main</code> melalui URL <code>http://localhost:8000/</code> saja.</p> <ol> <li> <p>Jalankan proyek Django dengan menjalankan perintah <code>python manage.py runserver</code> pada terminal atau command prompt di direktori utama.</p> </li> <li> <p>Bukalah http://localhost:8000/ di web browser favoritmu untuk melihat halaman yang sudah kamu buat.</p> </li> </ol> <p>Dengan langkah-langkah di atas, kamu telah berhasil mengimplementasikan tampilan dasar dalam aplikasi <code>main</code> dan menghubungkannya dengan rute URL proyek. Pastikan kamu memahami setiap langkah dan informasi yang diberikan untuk mengaktifkan tampilan dalam proyek Django-mu</p>"},{"location":"tutorial/tutorial-1/#apa-bedanya-urlspy-pada-aplikasi-dan-urlspy-pada-proyek","title":"Apa bedanya <code>urls.py</code> pada aplikasi dan <code>urls.py</code> pada proyek?","text":"<ul> <li>Berkas <code>urls.py</code> pada aplikasi mengatur rute URL spesifik untuk fitur-fitur dalam aplikasi tersebut</li> <li><code>urls.py</code> pada proyek mengarahkan rute URL tingkat proyek dan dapat mengimpor rute URL dari berkas <code>urls.py</code> aplikasi-aplikasi, memungkinkan aplikasi dalam proyek Django untuk bersifat modular dan terpisah.</li> </ul>"},{"location":"tutorial/tutorial-1/#tutorial-pengenalan-django-unit-testing","title":"Tutorial: Pengenalan Django Unit Testing","text":"<p>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.</p>"},{"location":"tutorial/tutorial-1/#langkah-1-membuat-unit-test","title":"Langkah 1: Membuat Unit Test","text":"<ol> <li>Bukalah berkas <code>tests.py</code> pada direktori aplikasi <code>main</code>.</li> <li>Isi <code>tests.py</code> dengan kode berikut.</li> </ol> <pre><code>from django.test import TestCase, Client\n\nclass mainTest(TestCase):\n    def test_main_url_is_exist(self):\n        response = Client().get('')\n        self.assertEqual(response.status_code, 200)\n\n    def test_main_using_main_template(self):\n        response = Client().get('')\n        self.assertTemplateUsed(response, 'main.html')\n</code></pre> <p>Penjelasan:</p> <ul> <li><code>test_main_url_is_exist</code> adalah tes untuk mengecek apakah path URL <code>''</code> dapat diakses. Path <code>''</code> artinya hanya <code>http://localhost:8000/</code> tanpa path tambahan di bagian belakang URL.</li> <li><code>test_main_using_main_template</code> adalah tes untuk mengecek apakah halaman <code>''</code> di-render menggunakan template <code>main.html</code>.</li> </ul>"},{"location":"tutorial/tutorial-1/#langkah-2-menjalankan-test","title":"Langkah 2: Menjalankan Test","text":"<ol> <li>Jalankan tes dengan menggunakan perintah berikut.</li> </ol> <pre><code>python manage.py test\n</code></pre> <ol> <li>Jika tes berhasil, akan mengeluarkan informasi berikut.</li> </ol> <pre><code>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</code></pre> <p>Selamat! Kamu telah berhasil menulis Django Test dan menjalankannya.</p>"},{"location":"tutorial/tutorial-1/#penutup","title":"Penutup","text":"<ol> <li>Pada akhir tutorial ini, struktur direktori lokalmu akan terlihat seperti ini.</li> </ol> <p>Huruf U menandakan bahwa terdapat berkas baru yang belum dilacak oleh Git. Huruf M menandakan bahwa terdapat berkas yang telah dilacak sebelumnya yang dimodifikasi.</p> <ol> <li>Sebelum melakukan langkah ini, pastikan struktur direktori lokal sudah benar. Selanjunya, lakukan <code>add</code>, <code>commit</code> dan <code>push</code> untuk memperbarui repositori GitHub.</li> <li>Jalankan perintah berikut untuk melakukan <code>add</code>, <code>commit</code> dan <code>push</code>.</li> </ol> <pre><code>git add .\ngit commit -m \"&lt;pesan_commit&gt;\"\ngit push origin &lt;branch_utama&gt;\n</code></pre> <ul> <li>Ubah <code>&lt;pesan_commit&gt;</code> sesuai dengan keinginan. Contoh: <code>git commit -m \"tutorial 1 selesai\"</code>.</li> <li> <p>Ubah <code>&lt;branch_utama&gt;</code> sesuai dengan nama branch utamamu. Contoh: <code>git push origin main</code> atau <code>git push origin master</code>.</p> </li> <li> <p>Berikut struktur direktori GitHub setelah kamu menyelesaikan tutorial ini.</p> </li> </ul> <p></p>"},{"location":"tutorial/tutorial-1/#referensi-tambahan","title":"Referensi Tambahan","text":"<ul> <li>Django Unit Testing</li> </ul>"},{"location":"tutorial/tutorial-1/#kontributor","title":"Kontributor","text":"<ul> <li>Muhammad Nabil Mu'afa</li> <li>Muhammad Iqbal Dwitama</li> </ul>"},{"location":"tutorial/tutorial-1/#credits","title":"Credits","text":"<p>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.</p>"},{"location":"tutorial/tutorial-2/","title":"Tutorial 2: Form dan Data Delivery","text":"<p>Pemrograman Berbasis Platform (CSGE602022) \u2014 diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Genap 2023/2024</p>"},{"location":"tutorial/tutorial-2/#tujuan-pembelajaran","title":"Tujuan Pembelajaran\u200b","text":"<p>Setelah menyelesaikan tutorial ini, mahasiswa diharapkan untuk dapat:</p> <ul> <li>Mengetahui <code>XML</code> dan <code>JSON</code> sebagai salah satu metode data delivery</li> <li>Memahami cara kerja submisi data yang diberikan oleh pengguna menggunakan elemen <code>form</code></li> <li>Memahami cara mengirimkan data menggunakan format <code>XML</code> dan <code>JSON</code></li> <li>Memahami cara mengambil data spesifik berdasarkan <code>ID</code></li> </ul>"},{"location":"tutorial/tutorial-2/#pengenalan-data-delivery","title":"Pengenalan Data Delivery","text":"<p>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.</p>"},{"location":"tutorial/tutorial-2/#xml-extensible-markup-language","title":"XML (Extensible Markup Language)","text":"<p>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.</p> <p>Contoh Format XML:</p> <pre><code>&lt;?xml version=\"1.0\" encoding=\"UTF-8\"?&gt;\n&lt;person&gt;\n    &lt;name&gt;Alice Johnson&lt;/name&gt;\n    &lt;age&gt;25&lt;/age&gt;\n    &lt;address&gt;\n        &lt;street&gt;123 Main St&lt;/street&gt;\n        &lt;city&gt;Los Angeles&lt;/city&gt;\n        &lt;zip&gt;90001&lt;/zip&gt;\n    &lt;/address&gt;\n&lt;/person&gt;\n</code></pre> <p>XML di atas sangatlah self-descriptive:</p> <ul> <li>Ada informasi nama (<code>name</code>)</li> <li>Ada informasi umur (<code>age</code>)</li> <li>Ada informasi alamat (<code>address</code>)</li> <li>Ada informasi jalan (<code>street</code>)</li> <li>Ada informasi kota (<code>city</code>)</li> <li>Ada informasi kode pos (<code>zip</code>)</li> </ul> <p>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, <code>&lt;person&gt;</code> adalah root element.</p> <p>Baris <code>&lt;?xml version=\"1.0\" encoding=\"UTF-8\"?&gt;</code> 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 <code>&lt;person&gt;</code> dianggap berbeda dengan tag <code>&lt;Person&gt;</code>.</p>"},{"location":"tutorial/tutorial-2/#json-javascript-object-notation","title":"JSON (JavaScript Object Notation)","text":"<p>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.</p> <p>Contoh format JSON:</p> <pre><code>{\n  \"name\": \"Alice Johnson\",\n  \"age\": 25,\n  \"address\": {\n    \"street\": \"123 Main St\",\n    \"city\": \"Los Angeles\",\n    \"zip\": \"90001\"\n  }\n}\n</code></pre> <p>Data pada JSON disimpan dalam bentuk key dan value. Pada contoh di atas yang menjadi key adalah <code>name</code>, <code>age</code>, dan <code>address</code>. Value dapat berupa tipe data primitif (string, number, boolean) ataupun berupa objek.</p>"},{"location":"tutorial/tutorial-2/#pre-tutorial-notes","title":"Pre-Tutorial Notes","text":"<p>Sebelum kamu memulai, serta untuk membantumu mengikuti tutorial 2 dengan baik, kami mengharapkan beberapa hasil berikut dari tutorial 1:</p> <ul> <li>Struktur direktori <code>book-tracker</code> secara lokal adalah sebagai berikut.</li> </ul> <p></p> <ul> <li>Struktur repository <code>book-tracker</code> pada GitHub adalah sebagai berikut.</li> </ul> <p></p>"},{"location":"tutorial/tutorial-2/#tutorial-implementasi-skeleton-sebagai-kerangka-views","title":"Tutorial: Implementasi Skeleton sebagai Kerangka Views","text":"<p>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.</p> <ol> <li>Buat folder <code>templates</code> pada root folder (direktori utama) dan buatlah sebuah berkas HTML baru bernama <code>base.html</code>. Berkas <code>base.html</code> berfungsi sebagai template dasar yang dapat digunakan sebagai kerangka umum untuk halaman web lainnya di dalam proyek. Isilah berkas <code>base.html</code> tersebut dengan kode berikut:</li> </ol> <pre><code>{% load static %}\n&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n  &lt;head&gt;\n    &lt;meta charset=\"UTF-8\" /&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" /&gt;\n    {% block meta %} {% endblock meta %}\n  &lt;/head&gt;\n\n  &lt;body&gt;\n    {% block content %} {% endblock content %}\n  &lt;/body&gt;\n&lt;/html&gt;\n</code></pre> <p>Baris-baris yang dikurung dalam <code>{% ... %}</code> disebut dengan template tags Django. Baris-baris inilah yang akan berfungsi untuk memuat data secara dinamis dari Django ke HTML.</p> <ol> <li>Buka <code>settings.py</code> yang ada pada direktori proyek (<code>book_tracker</code>) dan carilah baris yang mengandung variabel <code>TEMPLATES</code>. Sesuaikan kode yang ada dengan potongan kode berikut agar berkas <code>base.html</code> terdeteksi sebagai berkas template.</li> </ol> <pre><code>...\nTEMPLATES = [\n    {\n        'BACKEND': 'django.template.backends.django.DjangoTemplates',\n        'DIRS': [BASE_DIR / 'templates'], # Tambahkan konten baris ini\n        'APP_DIRS': True,\n        ...\n    }\n]\n...\n</code></pre> <ol> <li>Pada subdirektori <code>templates</code> yang ada pada direktori <code>main</code> (<code>main/templates/</code>), ubahlah kode berkas <code>main.html</code> yang telah dibuat di tutorial sebelumnya menjadi sebagai berikut.</li> </ol> <pre><code>{% extends 'base.html' %} {% block content %}\n&lt;h1&gt;Book Tracker Page&lt;/h1&gt;\n\n&lt;h5&gt;Name:&lt;/h5&gt;\n&lt;p&gt;{{name}}&lt;/p&gt;\n\n&lt;h5&gt;Class:&lt;/h5&gt;\n&lt;p&gt;{{class}}&lt;/p&gt;\n{% endblock content %}\n</code></pre> <p>Perhatikan bahwa kode diatas merupakan kode yang sama dengan kode pada <code>main.html</code> pada tutorial sebelumnya. Perbedaannya adalah pada kode diatas, kita menggunakan <code>base.html</code> sebagai template utama.</p>"},{"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":"<p>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.</p> <ol> <li>Buat berkas baru pada direktori <code>main</code> dengan nama <code>forms.py</code> untuk membuat struktur form yang dapat menerima data buku baru. Tambahkan kode berikut ke dalam berkas <code>forms.py</code>.</li> </ol> <pre><code>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</code></pre> <p>Penjelasan Kode:</p> <ul> <li><code>model = Book</code> untuk menunjukkan model yang akan digunakan untuk form. Ketika data dari form disimpan, isi dari form akan disimpan menjadi sebuah objek <code>Book</code>.</li> <li> <p><code>fields = [\"name\", \"page\", \"description\"]</code> untuk menunjukkan field dari model Book yang digunakan untuk form. Field <code>date_added</code> tidak dimasukkan ke list <code>fields</code> karena tanggal ditambahkan secara otomatis.</p> </li> <li> <p>Buka berkas <code>views.py</code> yang ada pada folder <code>main</code> dan tambahkan beberapa import berikut pada bagian paling atas.</p> </li> </ul> <pre><code>from django.shortcuts import render, redirect   # Tambahkan import redirect di baris ini\nfrom main.forms import BookForm\nfrom main.models import Book\n</code></pre> <ol> <li>Masih di berkas yang sama, buat fungsi baru dengan nama <code>create_book</code> yang menerima parameter <code>request</code>. Tambahkan potongan kode di bawah ini untuk menghasilkan formulir yang dapat menambahkan data buku secara otomatis ketika data di-submit dari form.</li> </ol> <pre><code>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</code></pre> <p>Penjelasan Kode:</p> <ul> <li><code>form = BookForm(request.POST or None)</code> digunakan untuk membuat <code>BookForm</code> baru dengan memasukkan QueryDict berdasarkan input dari user pada <code>request.POST</code>.</li> <li><code>form.is_valid()</code> digunakan untuk memvalidasi isi input dari form tersebut.</li> <li><code>form.save()</code> digunakan untuk membuat dan menyimpan data dari form tersebut.</li> <li> <p><code>return redirect('main:show_main')</code> digunakan untuk melakukan redirect ke fungsi <code>show_main</code> pada views aplikasi <code>main</code> setelah data form berhasil disimpan.</p> </li> <li> <p>Ubahlah fungsi <code>show_main</code> yang sudah ada pada berkas <code>views.py</code> menjadi seperti berikut.</p> </li> </ul> <pre><code>def show_main(request):\n    books = Book.objects.all()\n\n    context = {\n        'name': 'Pak Bepe',\n        'class': 'PBP A',\n        'books': books\n    }\n\n    return render(request, \"main.html\", context)\n</code></pre> <p>Penjelasan Kode:</p> <p>Fungsi <code>Book.objects.all()</code> digunakan untuk mengambil seluruh objek <code>Book</code> yang tersimpan pada database.</p> <ol> <li>Buka <code>urls.py</code> yang ada pada direktori <code>main</code> dan import fungsi <code>create_book</code> yang sudah kamu buat tadi.</li> </ol> <pre><code>from main.views import show_main, create_book\n</code></pre> <ol> <li>Tambahkan path URL ke dalam variabel <code>urlpatterns</code> pada <code>urls.py</code> di <code>main</code> untuk mengakses fungsi yang sudah di-import pada poin sebelumnya.</li> </ol> <pre><code>urlpatterns = [\n   ...\n   path('create-book', create_book, name='create_book'),\n]\n</code></pre> <ol> <li>Buat berkas HTML baru dengan nama <code>create_book.html</code> pada direktori <code>main/templates</code>. Isi <code>create_book.html</code> dengan kode berikut.</li> </ol> <pre><code>{% extends 'base.html' %} {% block content %}\n&lt;h1&gt;Add New Book&lt;/h1&gt;\n\n&lt;form method=\"POST\"&gt;\n  {% csrf_token %}\n  &lt;table&gt;\n    {{ form.as_table }}\n    &lt;tr&gt;\n      &lt;td&gt;&lt;/td&gt;\n      &lt;td&gt;\n        &lt;input type=\"submit\" value=\"Add Book\" /&gt;\n      &lt;/td&gt;\n    &lt;/tr&gt;\n  &lt;/table&gt;\n&lt;/form&gt;\n\n{% endblock %}\n</code></pre> <p>Penjelasan Kode:</p> <ul> <li><code>&lt;form method=\"POST\"&gt;</code> digunakan untuk menandakan block untuk form dengan metode POST.</li> <li><code>{% csrf_token %}</code> adalah token yang berfungsi sebagai security. Token ini di-generate secara otomatis oleh Django untuk mencegah serangan berbahaya.</li> <li><code>{{ form.as_table }}</code> adalah template tag yang digunakan untuk menampilkan fields form yang sudah dibuat pada <code>forms.py</code> sebagai table.</li> <li> <p><code>&lt;input type=\"submit\" value=\"Add Book\"/&gt;</code> digunakan sebagai tombol submit untuk mengirimkan request ke view <code>create_book(request)</code>.</p> </li> <li> <p>Buka <code>main.html</code> dan tambahkan kode berikut di dalam <code>{% block content %}</code> untuk menampilkan data produk dalam bentuk table serta tombol \"Add New Book\" yang akan redirect ke halaman form.</p> </li> </ul> <pre><code>...\n&lt;table&gt;\n  &lt;tr&gt;\n    &lt;th&gt;Name&lt;/th&gt;\n    &lt;th&gt;Page&lt;/th&gt;\n    &lt;th&gt;Description&lt;/th&gt;\n    &lt;th&gt;Date Added&lt;/th&gt;\n  &lt;/tr&gt;\n\n  {% comment %} Berikut cara memperlihatkan data produk di bawah baris ini\n  {%endcomment %} {% for book in books %}\n  &lt;tr&gt;\n    &lt;td&gt;{{book.name}}&lt;/td&gt;\n    &lt;td&gt;{{book.page}}&lt;/td&gt;\n    &lt;td&gt;{{book.description}}&lt;/td&gt;\n    &lt;td&gt;{{book.date_added}}&lt;/td&gt;\n  &lt;/tr&gt;\n  {% endfor %}\n&lt;/table&gt;\n\n&lt;br /&gt;\n\n&lt;a href=\"{% url 'main:create_book' %}\"&gt;\n  &lt;button&gt;Add New Book&lt;/button&gt;\n&lt;/a&gt;\n{% endblock content %}\n</code></pre> <ol> <li>Jalankan proyek Django-mu dengan perintah <code>python manage.py runserver</code> 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.</li> </ol>"},{"location":"tutorial/tutorial-2/#tutorial-mengembalikan-data-dalam-bentuk-xml","title":"Tutorial Mengembalikan Data dalam Bentuk XML","text":"<ol> <li>Buka <code>views.py</code> yang ada pada folder <code>main</code> dan tambahkan import <code>HttpResponse</code> dan <code>Serializer</code> pada bagian paling atas.</li> </ol> <pre><code>from django.http import HttpResponse\nfrom django.core import serializers\n</code></pre> <ol> <li>Buatlah sebuah fungsi baru yang menerima parameter request dengan nama <code>show_xml</code> dan buatlah sebuah variabel di dalam fungsi tersebut yang menyimpan hasil query dari seluruh data yang ada pada <code>Book</code>.</li> </ol> <pre><code>def show_xml(request):\n    data = Book.objects.all()\n</code></pre> <ol> <li>Tambahkan return function berupa <code>HttpResponse</code> yang berisi parameter data hasil query yang sudah diserialisasi menjadi XML dan parameter <code>content_type=\"application/xml\"</code>.</li> </ol> <pre><code>def show_xml(request):\n    data = Book.objects.all()\n    return HttpResponse(serializers.serialize(\"xml\", data), content_type=\"application/xml\")\n</code></pre> <p>Penjelasan Kode:</p> <p><code>serializers</code> digunakan untuk translate objek model menjadi format lain seperti dalam fungsi ini adalah XML.</p> <ol> <li>Buka <code>urls.py</code> yang ada pada folder <code>main</code> dan import fungsi yang sudah kamu buat tadi.</li> </ol> <pre><code>from main.views import show_main, create_book, show_xml\n</code></pre> <ol> <li>Tambahkan path url ke dalam <code>urlpatterns</code> untuk mengakses fungsi yang sudah diimpor tadi.</li> </ol> <pre><code>...\npath('xml/', show_xml, name='show_xml'),\n...\n</code></pre> <ol> <li>Jalankan proyek Django-mu dengan perintah <code>python manage.py runserver</code> dan bukalah http://localhost:8000/xml/ di browser favoritmu untuk melihat hasilnya.</li> </ol>"},{"location":"tutorial/tutorial-2/#tutorial-mengembalikan-data-dalam-bentuk-json","title":"Tutorial: Mengembalikan Data dalam Bentuk JSON","text":"<ol> <li>Buka <code>views.py</code> yang ada pada folder <code>main</code> dan buatlah sebuah fungsi baru yang menerima parameter request dengan nama <code>show_json</code> dengan sebuah variabel di dalamnya yang menyimpan hasil query dari seluruh data yang ada pada <code>Book</code>.</li> </ol> <pre><code>def show_json(request):\n    data = Book.objects.all()\n</code></pre> <ol> <li>Tambahkan return function berupa <code>HttpResponse</code> yang berisi parameter data hasil query yang sudah diserialisasi menjadi JSON dan parameter <code>content_type=\"application/json\"</code>.</li> </ol> <pre><code>def show_json(request):\n    data = Book.objects.all()\n    return HttpResponse(serializers.serialize(\"json\", data), content_type=\"application/json\")\n</code></pre> <ol> <li>Buka <code>urls.py</code> yang ada pada folder <code>main</code> dan import fungsi yang sudah kamu buat tadi.</li> </ol> <pre><code>from main.views import show_main, create_book, show_xml, show_json\n</code></pre> <ol> <li>Tambahkan path url ke dalam <code>urlpatterns</code> untuk mengakses fungsi yang sudah diimpor tadi.</li> </ol> <pre><code>...\npath('json/', show_json, name='show_json'),\n...\n</code></pre> <ol> <li>Jalankan proyek Django-mu dengan perintah <code>python manage.py runserver</code> dan bukalah http://localhost:8000/json/ (sesuaikan dengan path url yang dibuat) di browser favoritmu untuk melihat hasilnya.</li> </ol>"},{"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":"<ol> <li> <p>Buka <code>views.py</code> yang ada pada folder <code>main</code> dan buatlah dua fungsi baru yang menerima parameter <code>_request_</code> dan <code>id</code> dengan nama <code>show_xml_by_id</code> dan <code>show_json_by_id</code>.</p> </li> <li> <p>Buatlah sebuah variabel di dalam fungsi tersebut yang menyimpan hasil query dari data dengan id tertentu yang ada pada <code>Book</code>.</p> </li> </ol> <pre><code>data = Book.objects.filter(pk=id)\n</code></pre> <ol> <li> <p>Tambahkan return function berupa <code>HttpResponse</code> yang berisi parameter data hasil query yang sudah diserialisasi menjadi JSON atau XML dan parameter <code>content_type</code> dengan value <code>\"application/xml\"</code> (untuk format XML) atau <code>\"application/json\"</code> (untuk format JSON).</p> </li> <li> <p>XML</p> <pre><code>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</code></pre> </li> <li> <p>JSON</p> <pre><code>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</code></pre> </li> <li> <p>Buka <code>urls.py</code> yang ada pada folder <code>main</code> dan import fungsi yang sudah kamu buat tadi.</p> </li> </ol> <pre><code>from main.views import show_main, create_book, show_xml, show_json, show_xml_by_id, show_json_by_id\n</code></pre> <ol> <li>Tambahkan path URL ke dalam <code>urlpatterns</code> untuk mengakses fungsi yang sudah diimpor tadi.</li> </ol> <pre><code>...\npath('xml/&lt;int:id&gt;/', show_xml_by_id, name='show_xml_by_id'),\npath('json/&lt;int:id&gt;/', show_json_by_id, name='show_json_by_id'),\n...\n</code></pre> <ol> <li>Jalankan proyek Django-mu dengan perintah <code>python manage.py runserver</code> dan bukalah http://localhost:8000/xml/[id]/ atau http://localhost:8000/json/[id]/ di browser favoritmu untuk melihat hasilnya.</li> </ol> <p>Catatan: Sesuaikan <code>[id]</code> pada URL di atas dengan id objek yang ingin dilihat.</p>"},{"location":"tutorial/tutorial-2/#tutorial-penggunaan-postman-sebagai-data-viewer","title":"Tutorial: Penggunaan Postman Sebagai Data Viewer","text":"<ol> <li> <p>Pastikan server kamu sudah berjalan dengan perintah <code>python manage.py runserver</code>.</p> </li> <li> <p>Buka Postman dan buatlah sebuah request baru dengan method <code>GET</code> dan url http://localhost:8000/xml/ atau http://localhost:8000/json/ untuk mengetes apakah data terkirimkan dengan baik.</p> </li> </ol> <p>Panduan Instalasi Postman dapat dilihat pada Laman Resmi Postman.</p> <p>Contoh:    </p> <ol> <li> <p>Klik tombol <code>Send</code> untuk mengirimkan request tersebut.</p> </li> <li> <p>Kamu akan melihat hasil response dari request tersebut pada bagian bawah Postman.</p> </li> </ol> <p></p> <ol> <li>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.</li> </ol> <p></p>"},{"location":"tutorial/tutorial-2/#penutup","title":"Penutup","text":"<ol> <li>Setelah menyelesaikan tutorial ini, tampilan halaman web kamu seharusnya terlihat seperti ini.</li> </ol> <ol> <li>Pada akhir tutorial ini, struktur direktori lokalmu akan terlihat seperti ini.</li> </ol> <ol> <li> <p>Sebelum melakukan langkah ini, pastikan struktur direktori lokal sudah benar. Selanjutnya, lakukan <code>add</code>, <code>commit</code> dan <code>push</code> untuk memperbarui repositori GitHub.</p> </li> <li> <p>Jalankan perintah berikut untuk melakukan <code>add</code>, <code>commit</code> dan <code>push</code>.</p> </li> </ol> <pre><code>git add .\ngit commit -m \"&lt;pesan_commit&gt;\"\ngit push -u origin &lt;branch_utama&gt;\n</code></pre> <ul> <li>Ubah <code>&lt;pesan_commit&gt;</code> sesuai dengan keinginan. Contoh: <code>git commit -m \"tutorial 2 selesai\"</code>.</li> <li>Ubah <code>&lt;branch_utama&gt;</code> sesuai dengan nama branch utamamu. Contoh: <code>git push -u origin main</code> atau <code>git push -u origin master</code>.</li> </ul>"},{"location":"tutorial/tutorial-2/#referensi-tambahan","title":"Referensi Tambahan","text":"<ul> <li>How to install Postman</li> </ul>"},{"location":"tutorial/tutorial-2/#kontributor","title":"Kontributor","text":"<ul> <li>Muhammad Nabil Mu'afa</li> <li>Muhammad Iqbal Dwitama</li> </ul>"},{"location":"tutorial/tutorial-2/#credits","title":"Credits","text":"<p>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.</p>"},{"location":"tutorial/tutorial-3/","title":"Tutorial 3: Autentikasi, Session, dan Cookies","text":"<p>Pemrograman Berbasis Platform (CSGE602022) \u2014 diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Genap 2023/2024</p>"},{"location":"tutorial/tutorial-3/#tujuan-pembelajaran","title":"Tujuan Pembelajaran","text":"<p>Setelah menyelesaikan tutorial ini, kamu diharapkan untuk dapat:</p> <ul> <li>Memahami konsep dasar autentikasi dalam pengembangan web.</li> <li>Memahami peran dan fungsi cookie dan session dalam pengembangan web.</li> <li>Memahami cara kerja cookie dan session dalam pengembangan web.</li> <li>Mengimplementasikan cookie dan session dalam proyek web.</li> </ul>"},{"location":"tutorial/tutorial-3/#pengenalan-http","title":"Pengenalan HTTP","text":"<p>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.</p> <p>Beberapa konsep dasar mengenai HTTP:</p> <ol> <li> <p>Client/Server: Interaksi dilakukan antar client/server. Klien adalah pihak yang melakukan request dan server adalah pihak yang memberikan response.</p> </li> <li> <p>Stateless: Setiap aktivitas (request/response) bersifat independen, tidak tersimpan pada aktivitas terdahulu.</p> </li> <li> <p>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.</p> </li> <li> <p>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.</p> </li> </ol> <p>Lapisan OSI lainnya akan diajarkan pada mata kuliah Jaringan Komputer/Jaringan Komunikasi Data. Kamu dapat mencarinya sendiri jika kamu penasaran. \ud83d\ude09</p> <ol> <li> <p>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.</p> </li> <li> <p>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.</p> </li> <li> <p>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 <code>content-type:json</code>. Artinya, tipe konten yang diminta/dikirim adalah <code>json</code>. Headers juga menyimpan data cookies.</p> </li> </ol>"},{"location":"tutorial/tutorial-3/#pengenalan-cookies-session","title":"Pengenalan Cookies &amp; Session","text":"<p>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.</p> <p>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.</p>"},{"location":"tutorial/tutorial-3/#apa-yang-dimaksud-dengan-holding-state","title":"Apa yang dimaksud dengan holding state?","text":"<p>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.</p> <p>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.</p>"},{"location":"tutorial/tutorial-3/#cara-melakukan-holding-state","title":"Cara melakukan holding state?","text":"<p>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.</p> <p>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.</p> <p>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.</p> <p>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.</p> <p>Berikut tabel singkat yang menjelaskan perbedaan antara cookies, session, dan local storage secara singkat.</p> 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 <p>Beberapa tautan video yang dapat memperkaya pengetahuan terkait materi ini:</p> <ul> <li>Session &amp; Cookies</li> <li>Cookies History</li> <li>Cookies vs. Local Storage vs. Session</li> </ul>"},{"location":"tutorial/tutorial-3/#pre-tutorial-notes","title":"Pre-Tutorial Notes","text":"<p>Sebelum kamu memulai, serta untuk membantumu mengikuti tutorial 3 dengan baik, kami mengharapkan beberapa hasil berikut dari tutorial 2:</p> <ul> <li>Struktur direktori <code>book-tracker</code> secara lokal adalah sebagai berikut.</li> </ul> <p></p> <ul> <li>Struktur repository <code>book-tracker</code> pada GitHub adalah sebagai berikut.</li> </ul> <p></p>"},{"location":"tutorial/tutorial-3/#tutorial-membuat-fungsi-dan-form-registrasi","title":"Tutorial: Membuat Fungsi dan Form Registrasi","text":"<p>Pada tutorial sebelumnya, kita sudah mencoba membuat sebuah form untuk menambahkan suatu buku. Bagaimana? Mudah kan? Pada tutorial ini kita akan membuat halaman utama (<code>main</code>) menjadi restricted dengan cara membuat akun untuk pengguna. Sehingga, pengguna yang ingin mengakses halaman utama <code>main</code> harus melakukan login terlebih dahulu agar mendapatkan akses.</p> <ol> <li> <p>Aktifkan virtual environment terlebih dahulu pada terminal. (Hint: Ingat tutorial 0!)</p> </li> <li> <p>Buka <code>views.py</code> yang ada pada subdirektori <code>main</code> pada proyek kamu. Tambahkan import <code>redirect</code>, <code>UserCreationForm</code>, dan <code>messages</code> pada bagian paling atas.</p> </li> </ol> <pre><code>from django.shortcuts import redirect\nfrom django.contrib.auth.forms import UserCreationForm\nfrom django.contrib import messages\n</code></pre> <p>Penjelasan Kode:</p> <p>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.</p> <ol> <li>Tambahkan fungsi <code>register</code> di bawah ini ke dalam <code>views.py</code>. Fungsi ini berfungsi untuk menghasilkan formulir registrasi secara otomatis dan menghasilkan akun pengguna ketika data di-submit dari form.</li> </ol> <pre><code>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</code></pre> <p>Penjelasan Kode:</p> <ul> <li><code>form = UserCreationForm(request.POST)</code> digunakan untuk membuat <code>UserCreationForm</code> baru dari yang sudah di-impor sebelumnya dengan memasukkan QueryDict berdasarkan input dari user pada <code>request.POST</code>.</li> <li><code>form.is_valid()</code> digunakan untuk memvalidasi isi input dari form tersebut.</li> <li><code>form.save()</code> digunakan untuk membuat dan menyimpan data dari form tersebut.</li> <li><code>messages.success(request, 'Your account has been successfully created!')</code> digunakan untuk menampilkan pesan kepada pengguna setelah melakukan suatu aksi.</li> <li> <p><code>return redirect('main:show_main')</code> digunakan untuk melakukan redirect setelah data form berhasil disimpan.</p> </li> <li> <p>Buatlah berkas HTML baru dengan nama <code>register.html</code> pada direktori <code>main/templates</code>. Isi dari <code>register.html</code> dapat kamu isi dengan template berikut.</p> </li> </ul> <pre><code>{% extends 'base.html' %} \n\n{% block meta %}\n&lt;title&gt;Register&lt;/title&gt;\n{% endblock meta %} \n\n{% block content %}\n\n&lt;div class=\"login\"&gt;\n  &lt;h1&gt;Register&lt;/h1&gt;\n\n  &lt;form method=\"POST\"&gt;\n    {% csrf_token %}\n    &lt;table&gt;\n      {{ form.as_table }}\n      &lt;tr&gt;\n        &lt;td&gt;&lt;/td&gt;\n        &lt;td&gt;&lt;input type=\"submit\" name=\"submit\" value=\"Daftar\" /&gt;&lt;/td&gt;\n      &lt;/tr&gt;\n    &lt;/table&gt;\n  &lt;/form&gt;\n\n  {% if messages %}\n  &lt;ul&gt;\n    {% for message in messages %}\n    &lt;li&gt;{{ message }}&lt;/li&gt;\n    {% endfor %}\n  &lt;/ul&gt;\n  {% endif %}\n&lt;/div&gt;\n\n{% endblock content %}\n</code></pre> <ol> <li>Buka <code>urls.py</code> yang ada pada subdirektori <code>main</code> dan impor fungsi yang sudah kamu buat tadi.</li> </ol> <pre><code>from main.views import register\n</code></pre> <ol> <li>Tambahkan path url ke dalam <code>urlpatterns</code> untuk mengakses fungsi yang sudah diimpor tadi.</li> </ol> <pre><code> urlpatterns = [\n     ...\n     path('register/', register, name='register'),\n ]\n</code></pre> <p>Kita sudah menambahkan formulir registrasi akun dan membuat mekanisme <code>register</code>. Selanjutnya, kita akan membuat form login agar pengguna dapat melakukan autentikasi akun.</p>"},{"location":"tutorial/tutorial-3/#tutorial-membuat-fungsi-login","title":"Tutorial: Membuat Fungsi Login","text":"<ol> <li>Buka kembali <code>views.py</code> yang ada pada subdirektori <code>main</code>. Tambahkan import <code>authenticate</code> dan <code>login</code> pada bagian paling atas.</li> </ol> <pre><code>from django.contrib.auth import authenticate, login\n</code></pre> <p>Penjelasan Kode:</p> <p>Singkatnya, fungsi <code>authenticate</code> dan <code>login</code> yang diimport diatas adalah fungsi bawaan Django yang dapat digunakan untuk melakukan autentikasi dan login (jika autentikasi berhasil). Selengkapnya dapat dibaca di sini.</p> <ol> <li>Tambahkan fungsi <code>login_user</code> di bawah ini ke dalam <code>views.py</code>. Fungsi ini berfungsi untuk mengautentikasi pengguna yang ingin login.</li> </ol> <pre><code>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</code></pre> <p>Penjelasan Kode:</p> <p><code>authenticate(request, username=username, password=password)</code> digunakan untuk melakukan autentikasi pengguna berdasarkan username dan password yang diterima dari permintaan (request) yang dikirim oleh pengguna saat login.</p> <ol> <li>Buatlah berkas HTML baru dengan nama <code>login.html</code> pada direktori <code>main/templates</code>. Isi dari <code>login.html</code> dapat kamu isi dengan template berikut.</li> </ol> <pre><code>{% extends 'base.html' %}\n\n{% block meta %}\n&lt;title&gt;Login&lt;/title&gt;\n{% endblock meta %} \n\n{% block content %}\n&lt;div class=\"login\"&gt;\n  &lt;h1&gt;Login&lt;/h1&gt;\n\n  &lt;form method=\"POST\" action=\"\"&gt;\n    {% csrf_token %}\n    &lt;table&gt;\n      &lt;tr&gt;\n        &lt;td&gt;Username:&lt;/td&gt;\n        &lt;td&gt;\n          &lt;input\n            type=\"text\"\n            name=\"username\"\n            placeholder=\"Username\"\n            class=\"form-control\"\n          /&gt;\n        &lt;/td&gt;\n      &lt;/tr&gt;\n\n      &lt;tr&gt;\n        &lt;td&gt;Password:&lt;/td&gt;\n        &lt;td&gt;\n          &lt;input\n            type=\"password\"\n            name=\"password\"\n            placeholder=\"Password\"\n            class=\"form-control\"\n          /&gt;\n        &lt;/td&gt;\n      &lt;/tr&gt;\n\n      &lt;tr&gt;\n        &lt;td&gt;&lt;/td&gt;\n        &lt;td&gt;&lt;input class=\"btn login_btn\" type=\"submit\" value=\"Login\" /&gt;&lt;/td&gt;\n      &lt;/tr&gt;\n    &lt;/table&gt;\n  &lt;/form&gt;\n\n  {% if messages %}\n  &lt;ul&gt;\n    {% for message in messages %}\n    &lt;li&gt;{{ message }}&lt;/li&gt;\n    {% endfor %}\n  &lt;/ul&gt;\n  {% endif %} Don't have an account yet?\n  &lt;a href=\"{% url 'main:register' %}\"&gt;Register Now&lt;/a&gt;\n&lt;/div&gt;\n\n{% endblock content %}\n</code></pre> <ol> <li>Buka <code>urls.py</code> yang ada pada subdirektori <code>main</code> dan import fungsi yang sudah kamu buat tadi.</li> </ol> <pre><code>from main.views import login_user\n</code></pre> <ol> <li>Tambahkan path url ke dalam <code>urlpatterns</code> untuk mengakses fungsi yang sudah diimpor tadi.</li> </ol> <pre><code>urlpatterns = [\n   ...\n   path('login/', login_user, name='login'),\n]\n</code></pre> <p>Kita sudah menambahkan form login akun dan membuat mekanisme <code>login</code>. Selanjutnya, kita akan membuat mekanisme logout dan menambahkan tombol logout pada halaman main.</p>"},{"location":"tutorial/tutorial-3/#tutorial-membuat-fungsi-logout","title":"Tutorial: Membuat Fungsi Logout","text":"<ol> <li>Buka kembali <code>views.py</code> yang ada pada subdirektori <code>main</code>. Tambahkan import <code>logout</code> ini pada bagian paling atas.</li> </ol> <pre><code>from django.contrib.auth import logout\n</code></pre> <ol> <li>Tambahkan fungsi di bawah ini ke dalam fungsi <code>views.py</code>. Fungsi ini berfungsi untuk melakukan mekanisme logout.</li> </ol> <pre><code>def logout_user(request):\n    logout(request)\n    return redirect('main:login')\n</code></pre> <p>Penjelasan Kode:</p> <ul> <li><code>logout(request)</code> digunakan untuk menghapus sesi pengguna yang saat ini masuk.</li> <li> <p><code>return redirect('main:login')</code> mengarahkan pengguna ke halaman login dalam aplikasi Django.</p> </li> <li> <p>Bukalah berkas <code>main.html</code> yang ada pada direktori <code>main/templates</code>.</p> </li> <li> <p>Tambahkan potongan kode di bawah ini setelah hyperlink tag untuk Add New Book pada berkas <code>main.html</code>.</p> </li> </ul> <pre><code>...\n&lt;a href=\"{% url 'main:logout' %}\"&gt;\n  &lt;button&gt;Logout&lt;/button&gt;\n&lt;/a&gt;\n...\n</code></pre> <ol> <li>Buka <code>urls.py</code> yang ada pada subdirektori <code>main</code> dan import fungsi yang sudah kamu buat tadi.</li> </ol> <pre><code>from main.views import logout_user\n</code></pre> <ol> <li>Tambahkan path url ke dalam <code>urlpatterns</code> untuk mengakses fungsi yang sudah diimpor tadi.</li> </ol> <pre><code>urlpatterns = [\n   ...\n   path('logout/', logout_user, name='logout'),\n]\n</code></pre> <p>Kita sudah membuat mekanisme <code>logout</code> dan menyelesaikan sistem autentikasi dalam proyek ini.</p>"},{"location":"tutorial/tutorial-3/#tutorial-merestriksi-akses-halaman-main","title":"Tutorial: Merestriksi Akses Halaman Main","text":"<ol> <li>Buka kembali <code>views.py</code> yang ada pada subdirektori <code>main</code> dan tambahkan import <code>login_required</code> pada bagian paling atas.</li> </ol> <pre><code>from django.contrib.auth.decorators import login_required\n</code></pre> <p>Penjelasan Kode:    Kode <code>from django.contrib.auth.decorators import login_required</code> digunakan untuk mengimpor sebuah decorator yang bisa mengharuskan pengguna masuk (login) terlebih dahulu sebelum dapat mengakses suatu halaman web.</p> <ol> <li>Tambahkan potongan kode <code>@login_required(login_url='/login')</code> di atas fungsi <code>show_main</code> agar halaman main hanya dapat diakses oleh pengguna yang sudah login (terautentikasi).</li> </ol> <pre><code>...\n@login_required(login_url='/login')\ndef show_main(request):\n...\n</code></pre> <p>Setelah melakukan restriksi akses halaman main, jalankan proyek Django-mu dengan perintah <code>python manage.py runserver</code> 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.</p>"},{"location":"tutorial/tutorial-3/#tutorial-menggunakan-data-dari-cookies","title":"Tutorial: Menggunakan Data Dari Cookies","text":"<p>Sekarang, kita akan melihat penggunaan cookies dengan menambahkan data last login dan menampilkannya ke halaman main.</p> <ol> <li> <p>Lakukan logout terlebih dahulu apabila kamu sedang menjalankan aplikasi Django-mu.</p> </li> <li> <p>Buka kembali <code>views.py</code> yang ada pada subdirektori <code>main</code>. Tambahkan import <code>HttpResponseRedirect</code>, <code>reverse</code>, dan <code>datetime</code> pada bagian paling atas.</p> </li> </ol> <pre><code>import datetime\nfrom django.http import HttpResponseRedirect\nfrom django.urls import reverse\n</code></pre> <ol> <li>Pada fungsi <code>login_user</code>, kita akan menambahkan fungsionalitas menambahkan cookie yang bernama <code>last_login</code> untuk melihat kapan terakhir kali pengguna melakukan login. Caranya adalah dengan mengganti kode yang ada pada blok <code>if user is not None</code> menjadi potongan kode berikut.</li> </ol> <pre><code>...\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</code></pre> <p>Penjelasan Kode:</p> <ul> <li><code>login(request, user)</code> berfungsi untuk melakukan login terlebih dahulu</li> <li><code>response = HttpResponseRedirect(reverse(\"main:show_main\"))</code> untuk membuat response</li> <li><code>response.set_cookie('last_login', str(datetime.datetime.now()))</code> berfungsi untuk membuat cookie last_login dan menambahkannya ke dalam response</li> </ul> <p>Perhatikan indentasi kode kamu, pastikan tidak terdapat dead code pada fungsi tersebut.</p> <ol> <li>Pada fungsi <code>show_main</code>, tambahkan potongan kode <code>'last_login': request.COOKIES['last_login']</code> ke dalam variabel <code>context</code>. Berikut adalah contoh kode yang sudah diubah.</li> </ol> <pre><code>context = {\n    'name': 'Pak Bepe',\n    'class': 'PBP A',\n    'books': books,\n    'last_login': request.COOKIES['last_login'],\n}\n</code></pre> <p>Penjelasan Kode:</p> <p><code>'last_login': request.COOKIES['last_login']</code> berfungsi menambahkan informasi cookie last_login pada response yang akan ditampilkan di halaman web.</p> <ol> <li>Ubah fungsi <code>logout_user</code> menjadi seperti potongan kode berikut.</li> </ol> <pre><code>def logout_user(request):\n    logout(request)\n    response = HttpResponseRedirect(reverse('main:login'))\n    response.delete_cookie('last_login')\n    return response\n</code></pre> <p>Penjelasan Kode:</p> <p><code>response.delete_cookie('last_login')</code> berfungsi untuk menghapus cookie <code>last_login</code> saat pengguna melakukan <code>logout</code>.</p> <ol> <li>Buka berkas <code>main.html</code> dan tambahkan potongan kode berikut di setelah tombol logout untuk menampilkan data last login.</li> </ol> <pre><code>...\n&lt;h5&gt;Sesi terakhir login: {{ last_login }}&lt;/h5&gt;\n...\n</code></pre> <ol> <li> <p>Silakan refresh halaman login (atau jalankan proyek Django-mu dengan perintah <code>python manage.py runserver</code> jika kamu belum menjalankan proyekmu) dan cobalah untuk login. Data last login kamu akan muncul di halaman main.</p> </li> <li> <p>Jika kamu menggunakan browser Google Chrome, untuk melihat data cookie <code>last_login</code>, kamu dapat mengakses fitur inspect element dan membuka bagian Application/Storage. Klik bagian Cookies dan kamu dapat melihat data cookies yang tersedia. Selain <code>last_login</code>, kamu juga dapat melihat data <code>sessionid</code> dan <code>csrftoken</code>. Berikut adalah contoh tampilannya.</p> </li> </ol> <p></p> <ol> <li>Jika kamu melakukan logout dan membuka bagian riwayat cookie, cookie yang dibuat sebelumnya akan hilang dan dibuat ulang ketika kamu login kembali.</li> </ol> <p>Sebelum melanjutkan ke tutorial berikutnya, cobalah untuk membuat satu akun pada halaman web kamu.</p>"},{"location":"tutorial/tutorial-3/#tutorial-menghubungkan-model-book-dengan-user","title":"Tutorial: Menghubungkan Model <code>Book</code> dengan <code>User</code>","text":"<p>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.</p> <p>Terakhir, kita akan menghubungkan setiap objek <code>Book</code> 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:</p> <ol> <li>Buka <code>models.py</code> yang ada pada subdirektori <code>main</code> dan tambahkan kode berikut pada dibawah baris kode untuk mengimpor model:</li> </ol> <pre><code>...\nfrom django.contrib.auth.models import User\n...\n</code></pre> <ol> <li>Pada model <code>Book</code> yang sudah dibuat, tambahkan potongan kode berikut:</li> </ol> <pre><code>class Book(models.Model):\n    user = models.ForeignKey(User, on_delete=models.CASCADE)\n    ...\n</code></pre> <p>Penjelasan Kode:</p> <p>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 <code>ForeignKey</code> akan dipelajari pada mata kuliah Basis Data. Penjelasan lebih lanjut terkait <code>ForeignKey</code> pada Django dapat dilihat di sini.</p> <ol> <li>Buka kembali <code>views.py</code> yang ada pada subdirektori <code>main</code>, dan ubah potongan kode pada fungsi <code>create_book</code> menjadi sebagai berikut:</li> </ol> <pre><code>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</code></pre> <p>Penjelasan Kode:</p> <p>Parameter <code>commit=False</code> 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 <code>user</code> dengan objek <code>User</code> dari return value <code>request.user</code> yang sedang terotorisasi untuk menandakan bahwa objek tersebut dimiliki oleh pengguna yang sedang login.</p> <ol> <li>Ubah fungsi <code>show_main</code> menjadi sebagai berikut.</li> </ol> <pre><code>def show_main(request):\n    books = Book.objects.filter(user=request.user)\n\n    context = {\n         'name': request.user.username,\n         ...\n    }\n...\n</code></pre> <p>Penjelasan Kode:</p> <ul> <li>Potongan kode diatas berfungsi untuk menampilkan objek <code>Book</code> yang terasosiasikan dengan pengguna yang sedang login. Hal tersebut dilakukan dengan menyaring seluruh objek dengan hanya mengambil <code>Book</code> yang dimana field <code>user</code> terisi dengan objek <code>User</code> yang sama dengan pengguna yang sedang login.</li> <li> <p>Kode <code>request.user.username</code> berfungsi untuk menampilkan username pengguna yang login pada halaman main.</p> </li> <li> <p>Simpan semua perubahan, dan lakukan migrasi model dengan <code>python manage.py makemigrations</code>.</p> </li> <li> <p>Seharusnya, akan muncul error saat melakukan migrasi model. Pilih <code>1</code> untuk menetapkan default value untuk field user pada semua row yang telah dibuat pada basis data.</p> </li> </ul> <p></p> <ol> <li>Ketik angka 1 lagi untuk menetapkan user dengan ID 1 (yang sudah kita buat sebelumnya) pada model yang sudah ada.</li> </ol> <p></p> <ol> <li>Lakukan <code>python manage.py migrate</code> untuk mengaplikasikan migrasi yang dilakukan pada poin sebelumnya.</li> </ol> <p>Jalankan proyek Django-mu dengan perintah <code>python manage.py runserver</code> 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 <code>Book</code> dengan <code>User</code> yang membuatnya.</p>"},{"location":"tutorial/tutorial-3/#akhir-kata","title":"Akhir Kata","text":"<p>Selamat! Kamu telah menyelesaikan Tutorial 3 dengan baik. \ud83d\ude04</p> <p>Setelah kamu menyelesaikan seluruh tutorial di atas, harapannya kamu sekarang lebih paham tentang penggunaan form, autentikasi, session, dan cookie pada framework Django.</p> <ol> <li>Setelah menyelesaikan tutorial ini, tampilan halaman web kamu seharusnya terlihat seperti ini.</li> </ol> <p></p> <ol> <li>Pada akhir tutorial ini, struktur subdirektori <code>main</code> pada lokalmu terlihat seperti ini.</li> </ol> <p></p> <ol> <li> <p>Sebelum melakukan langkah ini, pastikan struktur direktori lokal sudah benar. Selanjunya, lakukan <code>add</code>, <code>commit</code> dan <code>push</code> untuk memperbarui repositori GitHub.</p> </li> <li> <p>Jalankan perintah berikut untuk melakukan <code>add</code>, <code>commit</code> dan <code>push</code>.</p> </li> </ol> <pre><code>git add .\ngit commit -m \"&lt;pesan_commit&gt;\"\ngit push -u origin &lt;branch_utama&gt;\n</code></pre> <ul> <li>Ubah <code>&lt;pesan_commit&gt;</code> sesuai dengan keinginan. Contoh: <code>git commit -m \"tutorial 3 selesai\"</code>.</li> <li>Ubah <code>&lt;branch_utama&gt;</code> sesuai dengan nama branch utamamu. Contoh: <code>git push -u origin main</code> atau <code>git push -u origin master</code>.</li> </ul>"},{"location":"tutorial/tutorial-3/#kontributor","title":"Kontributor","text":"<ul> <li>Muhammad Nabil Mu'afa</li> <li>Muhammad Iqbal Dwitama</li> </ul>"},{"location":"tutorial/tutorial-3/#credits","title":"Credits","text":"<p>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.</p>"},{"location":"tutorial/tutorial-4/","title":"Tutorial 4: Desain Web Menggunakan HTML dan CSS3 &amp; Metode Update dan Delete pada Data","text":"<p>Pemrograman Berbasis Platform (CSGE602022) \u2014 diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Genap 2023/2024</p>"},{"location":"tutorial/tutorial-4/#tujuan-pembelajaran","title":"Tujuan Pembelajaran","text":"<p>Setelah menyelesaikan tutorial ini, mahasiswa diharapkan untuk dapat:</p> <ul> <li>Memahami konsep update dan delete</li> <li>Memahami cara update dan delete pada Django</li> <li>Memahami susunan tag pada HTML5</li> <li>Mengetahui berbagai jenis tag HTML5</li> <li>Memahami sintaks penulisan CSS</li> <li>Memahami konsep static files pada Django</li> <li>Memahami penggunaan selector pada CSS</li> </ul>"},{"location":"tutorial/tutorial-4/#pengenalan-html","title":"Pengenalan HTML","text":"<p>HyperText Markup Language (HTML) adalah bahasa markup standar untuk dokumen agar dapat ditampilkan dalam browser web. HTML mendefinisikan struktur dari konten suatu website.</p> <p>Silakan pelajari dan mencoba sendiri HTML pada referensi ini.</p> <p>Perbedaan antara HTML dan HTML5 bisa kamu baca pada referensi ini.</p>"},{"location":"tutorial/tutorial-4/#pengenalan-css","title":"Pengenalan CSS","text":""},{"location":"tutorial/tutorial-4/#apa-itu-css","title":"Apa itu CSS?","text":"<p>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.</p> <p>Untuk mempelajari perbedaan antara CSS dan CSS3 bisa kamu baca pada referensi ini.</p>"},{"location":"tutorial/tutorial-4/#cara-penulisan-css","title":"Cara Penulisan CSS","text":"<p>Secara umum, CSS dapat dituliskan dalam bentuk sebagai berikut.</p> <pre><code>selector {\n  properties: value;\n}\n</code></pre> <p>Silakan pelajari dan mencoba sendiri CSS pada referensi ini.</p> <p>Terdapat tiga jenis cara penulisan CSS:</p> <ol> <li>Inline Styles</li> <li>Internal Style Sheet</li> <li>External Style Sheet</li> </ol> <p>Silakan pelajari tentang ketiga jenis CSS tersebut pada referensi ini.</p> <p>Perlu diperhatikan, jika kamu membuat jenis External Style Sheet, kamu perlu menambahkan tag <code>{% load staticfiles %}</code> pada halaman HTML kamu. Contohnya seperti potongan kode di bawah ini.</p> <pre><code>{% load staticfiles %}\n&lt;html&gt;\n  &lt;head&gt;\n    &lt;title&gt;Tutorial CSS Yay&lt;/title&gt;\n    &lt;link rel=\"stylesheet\" href=\"{% static 'css/tutorial.css' %}\" /&gt;\n  &lt;/head&gt;\n  &lt;body&gt;\n    &lt;div&gt;\n      &lt;h1&gt;Tutorial CSS Yay&lt;/h1&gt;\n    &lt;/div&gt;\n    &lt;div id=\"main\"&gt;\n      &lt;div&gt;\n        &lt;p&gt;published: 27 September 2023&lt;/p&gt;\n        &lt;h1&gt;&lt;a href=\"\"&gt;Tutorial CSS ku&lt;/a&gt;&lt;/h1&gt;\n        &lt;p&gt;Yay ini tutorial yang gampang!&lt;/p&gt;\n      &lt;/div&gt;\n    &lt;/div&gt;\n  &lt;/body&gt;\n&lt;/html&gt;\n</code></pre> <p>Hal ini dapat terjadi karena CSS merupakan static files di Django. Static files akan dijelaskan pada bagian selanjutnya.</p>"},{"location":"tutorial/tutorial-4/#catatan-tambahan","title":"Catatan Tambahan","text":"<p>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.</p> <ol> <li>Inline style</li> <li>External dan internal style sheets</li> <li>Browser default</li> </ol>"},{"location":"tutorial/tutorial-4/#static-files-pada-django","title":"Static files pada Django","text":"<p>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. </p> <p>Pengaturan untuk static files terletak pada file <code>settings.py</code>:</p> <p><pre><code>...\n# Static files (CSS, JavaScript, Images)\n# httpsdocs.djangoproject.comen1.9howtostatic-files\nSTATIC_ROOT = os.path.join(PROJECT_ROOT, 'static')\nSTATIC_URL = 'static'\n...\n</code></pre> Pada <code>settings.py</code>, terdapat:</p> <ul> <li><code>STATIC_ROOT</code> yang menentukan absolute path ke direktori static files ketika menjalankan perintah <code>collectstatic</code> pada proyek.</li> <li><code>STATIC_URL</code> yang merupakan URL yang dapat diakses publik untuk memperoleh static files tersebut.</li> </ul> <p>Perintah <code>collectstatic</code> adalah perintah untuk mengumpulkan static files dari semua app sehingga mempermudah akses untuk semua app.</p> <p>Penjelasan lebih lengkap mengenai static files dapat kamu baca pada referensi ini.</p>"},{"location":"tutorial/tutorial-4/#selector-pada-css","title":"Selector pada CSS","text":"<p>Pada tutorial ini, kita akan mengenak tiga jenis selector: Element Selector, ID Selector, dan Class Selector.</p> <ol> <li> <p>ELement Selector</p> <p>Element Selector memungkinkan kita mengubah properti untuk semua elemen yang memiliki tag HTML yang sama.</p> <p>Contoh penggunaan Element Selector: <pre><code>&lt;body&gt;\n  &lt;div&gt;\n    &lt;h1&gt;Tutorial CSS Yay :D&lt;/h1&gt;\n    &lt;h2&gt;Tutorial CSS Yay kedua :D&lt;/h2&gt;\n  &lt;/div&gt;\n  ...\n&lt;/body&gt;\n</code></pre></p> <p>Kita dapat menggunakan element sebagai selector dalam file CSS. Element selector menggunakan format [id_name] (tanpa diawali oleh sebuah simbol)</p> <p><pre><code>h1 {\n  color: #fca205;\n  font-family: \"Monospace\";\n  font-style: italic;\n}\n</code></pre> 2. ID Selector</p> <p>ID selector menggunakan ID pada tag sebagai selector-nya. ID bersifat unik dalam satu halaman web. ID dapat ditambahkan pada halaman template HTML.</p> <p>Contoh penggunaan ID Selector pada template HTML:</p> <pre><code>&lt;body&gt;\n  &lt;div id=\"header\"&gt;\n    &lt;h1&gt;Tutorial CSS Yay :D&lt;/h1&gt;\n  &lt;/div&gt;\n  ...\n&lt;/body&gt;\n</code></pre> <p>Kemudian, kita dapat menggunakan ID tersebut sebagai selector dalam file CSS. ID selector menggunakan format #[id_name] (selalu diawali #) <pre><code>#header {\n  background-color: #f0f0f0;\n  margin-top: 0;\n  padding: 20px 20px 20px 40px;\n}\n</code></pre></p> </li> <li> <p>Class Selector</p> <p>Class Selector memungkinkan kita untuk mengelompokkan elemen dengan karakteristik yang sama.</p> <p>Contoh penggunaan Class Selector pada template HTML:</p> <pre><code>...\n&lt;div id=\"main\"&gt;\n    &lt;div class=\"content_section\"&gt;\n        &lt;p class=\"date\"&gt;published: 28 September 2022&lt;/p&gt;\n        &lt;h2&gt;&lt;a href=\"\"&gt;Tutorial CSS ku&lt;/a&gt;&lt;/h2&gt;\n        &lt;p id=\"content_1\"&gt;Yay ini tutorial yang gampang!&lt;/p&gt;\n    &lt;/div&gt;\n    &lt;div class=\"content_section\"&gt;\n        &lt;p class=\"date \"&gt;published: 29 September 2022&lt;/p&gt;\n        &lt;h2&gt;&lt;a href=\"\"&gt;Tutorial CSS mu&lt;/a&gt;&lt;/h2&gt;\n        &lt;p id=\"content_2\"&gt;Yay ini tutorial yang mudah!&lt;/p&gt;\n    &lt;/div&gt;\n    &lt;div class=\"content_section\"&gt;\n        &lt;p&gt;published: 30 September 2022&lt;/p&gt;\n        &lt;h2&gt;&lt;a href=\"\"&gt;Tutorial CSS semua&lt;/a&gt;&lt;/h2&gt;\n        &lt;p id=\"content_3\"&gt;Yay ini tutorial yang tidak sulit!&lt;/p&gt;\n    &lt;/div&gt;\n&lt;/div&gt;\n...\n</code></pre> <p>Kemudian, kita dapat menggunakan Class tersebut sebagai selector dalam file CSS. Class selector menggunakan format .[class_name] (diawali .)</p> <pre><code>.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</code></pre> </li> </ol> <p>Untuk memperdalam pengetahuan mengenai CSS Selector Reference, kamu dapat membaca referensi ini.</p>"},{"location":"tutorial/tutorial-4/#tips-trik-css","title":"Tips &amp; trik CSS","text":""},{"location":"tutorial/tutorial-4/#mengenal-combinator-pada-css","title":"Mengenal Combinator pada CSS","text":"<p>Combinator dalam CSS menghubungkan dua atau lebih selector untuk merincikan lebih lanjut elemen-elemen yang di-select.</p> <p>Terdapat empat combinators pada CSS. Berikut ringkasan pemakaiannya: </p> Combinator Contoh pemakaian Penjelasan contoh Descendant selector (space) <code>div p</code> Menyeleksi semua elemen <code>p</code> yang merupakan keturunan dari elemen <code>div</code> Child selector (&gt;) <code>div &gt; p</code> Menyeleksi semua elemen <code>p</code> yang merupakan anak dari elemen <code>div</code> Adjacent sibling selector (+) <code>div + p</code> Menyeleksi elemen <code>p</code> pertama yang berada tepat setelah elemen <code>div</code> (harus memiliki elemen induk yang sama) General sibling selector (~) <code>div ~ p</code> Menyeleksi semua elemen <code>p</code> yang sejajar dan berada setelah elemen <code>div</code> <p>Silakan pelajari lebih lanjut mengenai combinator  melalui referensi ini.</p>"},{"location":"tutorial/tutorial-4/#mengenal-pseudo-class-pada-css","title":"Mengenal Pseudo-class pada CSS","text":"<p>Pseudo-class digunakan untuk mendefinisikan state khusus dari suatu elemen. Sintaks pemakaian pseudo-class adalah sebagai berikut:</p> <pre><code>selector:pseudo-class {\n  property: value;\n}\n</code></pre> <p>Beberapa contoh pseudo-class: | Pseudo-class | Mengaplikasikan style pada .. | | -------- | -------- | | <code>:link</code> | tautan yang belum pernah dikunjungi | | <code>:visited</code> | tautan yang sudah pernah dikunjungi | | <code>:hover</code> | saat pengguna mengarahkan kursor di atas elemen tersebut | | <code>:active</code> | saat elemen diaktifkan (biasanya saat pengguna mengklik elemen tersebut) | | <code>:focus</code> | saat elemen fokus (seperti saat pengguna mengklik input field) | | <code>:checked</code> | elemen yang telah dicentang | | <code>:disabled</code> | elemen yang telah dibuat tidak responsif (misalnya tombol yang tidak bisa diklik) |</p> <p>Silakan pelajari lebih lanjut mengenai pseudo-class  melalui referensi ini.</p>"},{"location":"tutorial/tutorial-4/#mengenal-box-model-pada-css","title":"Mengenal Box Model pada CSS","text":"<p>Box model pada CSS pada dasarnya merupakan suatu box yang membungkus setiap elemen HTML dan terdiri atas:</p> <ul> <li>Content: isi dari box (tempat terlihatnya teks dan gambar)</li> <li>Padding: mengosongkan area di sekitar konten (transparan)</li> <li>Border: garis tepian yang membungkus konten dan padding-nya</li> <li>Margin: mengosongkan area di sekitar border (transparan)</li> </ul> <p>Silakan pelajari lebih lanjut mengenai margin, border, dan padding melalui referensi ini.</p>"},{"location":"tutorial/tutorial-4/#pengenalan-bootstrap-tailwind","title":"Pengenalan Bootstrap &amp; Tailwind","text":"<p>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:</p> <ol> <li>Proses Pengembangan Lebih Cepat: Framework seperti Bootstrap menyediakan komponen siap pakai sehingga tanpa harus menulis kode CSS dari awal. </li> <li>Responsif secara Bawaan: Framework seperti Bootstrap dan Tailwind telah dirancang dengan responsif.</li> <li>Skalabilitas Besar: Framework CSS memberikan struktur yang baik untuk proyek yang berkembang seiring waktu. </li> </ol> <p>Bootstrap dan Tailwind tentu saja sebagai framework memiliki perbedaan yang signifikan antara satu sama lain, yaitu:</p> 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":"<p>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. </p> <p>Salah satu cara untuk menguji apakah suatu situs web menggunakan responsive web design adalah dengan mengakses situs web tersebut dan mengaktifkan fitur <code>Toggle Device Mode</code> 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. </p> <p>Berikut adalah cara untuk mengakses fitur tersebut pada browser Google Chrome. * Windows/Linux : <code>CTRL + SHIFT + M</code> * Mac : <code>Command + Shift + M</code></p> <p>Cara lain yang lebih praktis adalah dengan melakukan klik kanan pada browser dan memilih Inspect Element/Inspect untuk membuka Dev Tools yang berguna.</p> <p>Untuk mempelajari lebih lengkap mengenai Reponsive Web Design, kamu dapat membuka referensi ini.</p>"},{"location":"tutorial/tutorial-4/#tutorial-menambahkan-bootstrap-ke-aplikasi","title":"Tutorial: Menambahkan Bootstrap ke Aplikasi","text":"<p>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. </p> <ol> <li> <p>Buka project django kalian (book_tracker), lalu buka file <code>base.html</code> yang telah dibuat sebelumnya pada templates folder yang berada di root project kalian. </p> </li> <li> <p>Didalam <code>templates/base.html</code>, tambahkan tag  agar halaman web kamu dapat menyesuaikan ukuran dan perilaku perangkat mobile (apabila belum).</p> <pre><code>&lt;head&gt;\n    {% block meta %}\n        &lt;meta charset=\"UTF-8\" /&gt;\n        &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"&gt;\n    {% endblock meta %}\n&lt;/head&gt;\n</code></pre> </li> <li> <p>Tambahkan Bootstrap CSS dan juga JS. </p> <p>CSS: <pre><code>&lt;head&gt;\n    {% block meta %}\n        ...\n    {% endblock meta %}\n    &lt;link href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN\" crossorigin=\"anonymous\"&gt;\n&lt;/head&gt;\n</code></pre></p> <p>JS: <pre><code>&lt;head&gt;\n    ...\n    &lt;script src=\"https://code.jquery.com/jquery-3.6.0.min.js\" integrity=\"sha384-KyZXEAg3QhqLMpG8r+J4jsl5c9zdLKaUk5Ae5f5b1bw6AUn5f5v8FZJoMxm6f5cH1\" crossorigin=\"anonymous\"&gt;&lt;/script&gt;\n&lt;/head&gt;\n</code></pre></p> </li> <li> <p>(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.</p> <pre><code>&lt;head&gt;\n    ...\n    &lt;script src=\"https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js\" integrity=\"sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r\" crossorigin=\"anonymous\"&gt;&lt;/script&gt;\n    &lt;script src=\"https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js\" integrity=\"sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+\" crossorigin=\"anonymous\"&gt;&lt;/script&gt;\n&lt;/head&gt;\n</code></pre> </li> </ol> <p>Referensi: Get Started with Bootstrap 5.3</p>"},{"location":"tutorial/tutorial-4/#tutorial-menambahkan-navbar-pada-aplikasi","title":"Tutorial: Menambahkan navbar pada Aplikasi","text":"<p>Tambahkan navigation bar (boleh menggunakan Bootstrap) pada halaman <code>main.html</code> 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.</p>"},{"location":"tutorial/tutorial-4/#tutorial-menambahkan-fitur-edit-pada-aplikasi","title":"Tutorial: Menambahkan Fitur Edit pada Aplikasi","text":"<ol> <li> <p>Buka <code>views.py</code> yang ada pada subdirektori <code>main</code>, dan buatlah fungsi baru bernama <code>edit_book</code> yang menerima parameter <code>request</code> dan <code>id</code>.</p> </li> <li> <p>Tambahkan potongan kode berikut pada fungsi <code>edit_book</code></p> <pre><code>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</code></pre> </li> <li> <p>Buatlah berkas HTML baru dengan nama <code>edit_book.html</code> pada subdirektori <code>main/templates</code>. Isi berkas tersebut dengan template berikut.</p> <pre><code>{% extends 'base.html' %}\n\n{% load static %}\n\n{% block content %}\n\n&lt;h1&gt;Edit Book&lt;/h1&gt;\n\n&lt;form method=\"POST\"&gt;\n    {% csrf_token %}\n    &lt;table&gt;\n        {{ form.as_table }}\n        &lt;tr&gt;\n            &lt;td&gt;&lt;/td&gt;\n            &lt;td&gt;\n                &lt;input type=\"submit\" value=\"Edit Book\"/&gt;\n            &lt;/td&gt;\n        &lt;/tr&gt;\n    &lt;/table&gt;\n&lt;/form&gt;\n\n{% endblock %}\n</code></pre> </li> <li> <p>Buka <code>urls.py</code> yang berada pada direktori <code>main</code> dan import fungsi <code>edit_book</code> yang sudah dibuat.</p> <pre><code>from main.views import edit_book\n</code></pre> </li> <li> <p>Tambahkan path url ke dalam <code>urlpatterns</code> untuk mengakses fungsi yang sudah diimpor tadi.</p> <pre><code>...\npath('edit-book/&lt;int:id&gt;', edit_book, name='edit_book'),\n...\n</code></pre> </li> <li> <p>Buka <code>main.html</code> yang berada pada subdirektori <code>main/templates</code>. Tambahkan potongan kode berikut sejajar dengan elemen <code>&lt;td&gt;</code> terakhir agar terlihat tombol edit pada setiap baris tabel.</p> <pre><code>...\n&lt;tr&gt;\n    ...\n    &lt;td&gt;\n        &lt;a href=\"{% url 'main:edit_book' book.pk %}\"&gt;\n            &lt;button&gt;\n                Edit\n            &lt;/button&gt;\n        &lt;/a&gt;\n    &lt;/td&gt;\n&lt;/tr&gt;\n...\n</code></pre> </li> <li> <p>Jalankan proyek Django-mu dengan perintah <code>python manage.py runserver</code> 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!</p> </li> </ol>"},{"location":"tutorial/tutorial-4/#tutorial-membuat-fungsi-untuk-menghapus-data-buku","title":"Tutorial: Membuat Fungsi untuk Menghapus Data Buku","text":"<p>Berikut adalah yang perlu kamu lakukan untuk membuat fungsi penghapusan data buku.</p> <ol> <li> <p>Buat fungsi baru dengan nama <code>delete_book</code> yang menerima parameter <code>request</code> dan <code>id</code> pada <code>views.py</code> di folder <code>main</code> untuk menghapus data buku. Kamu dapat menggunakan templat kode berikut untuk memuat fungsinya.</p> <p>Jangan lupa untuk memahami isi kodenya, ya. \ud83d\ude09</p> <pre><code>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</code></pre> </li> <li> <p>Buka <code>urls.py</code> yang ada pada folder <code>main</code> dan impor fungsi yang sudah kamu buat tadi.</p> <pre><code>from main.views import delete_book\n</code></pre> </li> <li> <p>Tambahkan path url ke dalam <code>urlpatterns</code> untuk mengakses fungsi yang sudah diimpor.</p> <pre><code>...\npath('delete/&lt;int:id&gt;', delete_book, name='delete_book'), # sesuaikan dengan nama fungsi yang dibuat\n...\n</code></pre> </li> <li> <p>Bukalah berkas <code>main.html</code> yang ada pada folder <code>main/templates</code> dan ubahlah kode yang sudah ada menjadi seperti berikut agar terdapat tombol hapus untuk setiap buku.</p> <pre><code>...\n&lt;tr&gt;\n    ...\n    &lt;td&gt;\n        &lt;a href=\"{% url 'main:edit_book' book.pk %}\"&gt;\n            &lt;button&gt;\n                Edit\n            &lt;/button&gt;\n        &lt;/a&gt;\n        &lt;a href=\"{% url 'main:delete_book' book.pk %}\"&gt;\n              &lt;button&gt;\n                  Delete\n              &lt;/button&gt;\n          &lt;/a&gt;\n    &lt;/td&gt;\n&lt;/tr&gt;\n...\n</code></pre> </li> </ol> <p>Jalankan proyek Django-mu dan cobalah untuk menghapus data buku yang sudah ada pada browser favoritmu.</p>"},{"location":"tutorial/tutorial-4/#akhir-kata","title":"Akhir Kata","text":"<p>Selamat! Kamu telah menyelesaikan Tutorial 4 dengan baik. \ud83d\ude04</p> <ol> <li>Setelah menyelesaikan tutorial ini, tampilan halaman web kamu seharusnya terlihat seperti ini.</li> </ol> <p></p> <ol> <li> <p>Kamu juga diharapkan untuk melakukan eksplorasi dengan menggunakan CSS Framework pada tutorial ini. Berikut adalah contoh penerapan Bootstrap sederhana pada aplikasi Book Tracker.</p> <p></p> </li> <li> <p>Selanjunya, lakukan <code>add</code>, <code>commit</code> dan <code>push</code> untuk memperbarui repositori GitHub.</p> </li> <li> <p>Jalankan perintah berikut untuk melakukan <code>add</code>, <code>commit</code> dan <code>push</code>.</p> </li> </ol> <pre><code>git add .\ngit commit -m \"&lt;pesan_commit&gt;\"\ngit push -u origin &lt;branch_utama&gt;\n</code></pre> <ul> <li>Ubah <code>&lt;pesan_commit&gt;</code> sesuai dengan keinginan. Contoh: <code>git commit -m \"tutorial 4 selesai\"</code>.</li> <li>Ubah <code>&lt;branch_utama&gt;</code> sesuai dengan nama branch utamamu. Contoh: <code>git push -u origin main</code> atau <code>git push -u origin master</code>.</li> </ul>"},{"location":"tutorial/tutorial-4/#referensi-tambahan","title":"Referensi Tambahan","text":"<p>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</p>"},{"location":"tutorial/tutorial-4/#kontributor","title":"Kontributor","text":"<ul> <li>Muhammad Nabil Mu'afa</li> <li>Muhammad Iqbal Dwitama</li> </ul>"},{"location":"tutorial/tutorial-4/#credits","title":"Credits","text":"<p>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.</p>"},{"location":"tutorial/tutorial-5/","title":"Tutorial 5: JavaScript dan AJAX","text":"<p>Pemrograman Berbasis Platform (CSGE602022) \u2014 diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Genap 2023/2024</p>"},{"location":"tutorial/tutorial-5/#tujuan-pembelajaran","title":"Tujuan Pembelajaran","text":"<p>Setelah menyelesaikan tutorial ini, mahasiswa diharapkan untuk dapat:</p> <ul> <li>Memahami fungsi JavaScript pada front-end development</li> <li>Menggunakan JavaScript secara dasar</li> <li>Menerapkan AJAX dan Fetch API</li> </ul>"},{"location":"tutorial/tutorial-5/#javascript","title":"JavaScript","text":""},{"location":"tutorial/tutorial-5/#pengenalan-javascript","title":"Pengenalan JavaScript","text":"<p>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).</p> <p>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.</p> <p>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.</p> <p>Pada mata kuliah PBP, kita hanya akan fokus kepada kode client-side JavaScript.</p>"},{"location":"tutorial/tutorial-5/#tahapan-eksekusi-javascript-oleh-peramban","title":"Tahapan Eksekusi JavaScript oleh Peramban","text":"<p>Perhatikan diagram berikut untuk mengamati tahapan eksekusi JavaScript oleh peramban web.</p> <p></p> <p>Setelah peramban mengunduh halaman HTML web maka tepat dimana tag <code>&lt;script&gt;&lt;/script&gt;</code> 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.</p>"},{"location":"tutorial/tutorial-5/#penulisan-javascript","title":"Penulisan JavaScript","text":"<p>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 <code>.js</code>. Berikut contoh beberapa pendefinisian dari JavaScript.</p> <p>JavaScript dapat diletakkan pada head atau body dari halaman HTML. Selain itu, kode JavaScript harus dimasukkan di antara tag <code>&lt;script&gt;</code> dan <code>&lt;/script&gt;</code>. Kamu dapat meletakkan lebih dari satu tag script yang berisi JavaScript pada suatu berkas HTML.</p>"},{"location":"tutorial/tutorial-5/#embedded-javascript-pada-html","title":"Embedded JavaScript pada HTML","text":"<p><code>index.html</code></p> <pre><code>&lt;script type=\"text/JavaScript\"&gt;\n  alert(\"Hello World!\");\n&lt;/script&gt;\n</code></pre>"},{"location":"tutorial/tutorial-5/#external-javascript-pada-html","title":"External JavaScript pada HTML","text":"<p><code>index.html</code></p> <pre><code>&lt;script type=\"text/JavaScript\" src=\"js/script.js\"&gt;&lt;/script&gt;\n</code></pre> <p><code>js/script.js</code></p> <pre><code>alert(\"Hello World!\");\n</code></pre> <p>Pada berkas eksternal JavaScript, tag <code>&lt;script&gt;</code> tidak perlu lagi ditambahkan.</p> <p>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 <code>.js</code> biasanya akan di-cache oleh peramban sehingga jika kita membuka halaman yang sama dan tidak ada perubahan pada berkas <code>.js</code>, maka peramban tidak akan meminta berkas <code>.js</code> tersebut kepada server lagi, namun akan menggunakan berkas dari cache yang sudah disimpan sebelumnya.</p>"},{"location":"tutorial/tutorial-5/#eksekusi-javascript","title":"Eksekusi JavaScript","text":"<p>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).</p> <pre><code>// 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</code></pre>"},{"location":"tutorial/tutorial-5/#sintaks-javascript","title":"Sintaks JavaScript","text":""},{"location":"tutorial/tutorial-5/#variabel","title":"Variabel","text":"<p>Mendefinisikan variabel pada JavaScript cukup mudah. Contohnya seperti berikut.</p> <pre><code>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</code></pre> <p>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 <code>int</code>, maka sintaknya seperti <code>int x = 9</code>), 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).</p> <p>Ada beberapa aturan dalam pemilihan indentifiers atau nama variabel dalam JavaScript. Karakter pertama harus merupakan alfabet, underscore (<code>_</code>), atau karakter dolar (<code>$</code>). Selain itu, JavaScript identifiers bersifat case sensitive.</p>"},{"location":"tutorial/tutorial-5/#penggabungan-string","title":"Penggabungan String","text":"<p>Dalam JavaScript, kita juga dapat menyambungkan <code>string</code> dengan <code>string</code> lainnya seperti pada Java.</p> <pre><code>var str1 = \"PBP\" + \" \" + \"Fun\";\nvar str2 = \"PBP\";\nvar str3 = \"Fun\";\nvar str4 = str2 + \" \" + str3;\nvar str5 = \"Fun\";\nvar str6 = `PBP ${str5}`;  // Memiliki hasil yang sama seperti \"PBP\" + \" \" + str5\n</code></pre>"},{"location":"tutorial/tutorial-5/#ruang-lingkup-javascript","title":"Ruang Lingkup JavaScript","text":""},{"location":"tutorial/tutorial-5/#variabel-lokal","title":"Variabel Lokal","text":"<p>Variabel yang didefinisikan di dalam fungsi bersifat lokal, sehingga hanya dapat diakses oleh kode didalam fungsi tersebut.</p> <pre><code>// 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</code></pre>"},{"location":"tutorial/tutorial-5/#variabel-global","title":"Variabel Global","text":"<p>Variabel yang didefinisikan di luar fungsi bersifat global dan dapat diakses oleh kode lain dalam berkas JavaScript tersebut.</p> <pre><code>var courseName = \"PBP\";\nfunction thisFunction() {\n  // kode di dalam fungsi ini dapat mengakses variabel courseName\n}\n</code></pre>"},{"location":"tutorial/tutorial-5/#variabel-auto-global","title":"Variabel Auto Global","text":"<p>Value yang di-assign pada variabel yang belum dideklarasikan otomatis menjadi variabel global, walaupun variabel tersebut berada di dalam suatu fungsi.</p> <pre><code>thisFunction(); // fungsi thisFunction() perlu dipanggil terlebih dahulu\nconsole.log(courseName); // cetak \"PBP\" pada JavaScript console\nfunction thisFunction() {\n  courseName = \"PBP\";\n}\n</code></pre>"},{"location":"tutorial/tutorial-5/#mengakses-variabel-global-dari-html","title":"Mengakses Variabel Global dari HTML","text":"<p>Kamu dapat mengakses variabel yang berada dalam berkas JavaScript pada berkas HTML yang memuat berkas JavaScript tersebut.</p> <pre><code>...\n&lt;input type=\"text\" onclick=\"this.value=courseName\" /&gt;\n...\n</code></pre> <pre><code>...\nvar courseName = \"PBP\";\n...\n</code></pre>"},{"location":"tutorial/tutorial-5/#function-dan-event","title":"Function dan Event","text":"<p>Function adalah sekumpulan grup dari kode-kode yang bisa dipanggil di mana pun pada bagian kode program (mirip dengan <code>method</code> 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 <code>index.html</code>.</p> <pre><code>...\n&lt;input type=\"button\" value=\"magicButton\" id=\"magicButton\" onclick=\"hooray();\" /&gt;\n...\n</code></pre> <p>Kemudian berikut adalah kode pada <code>javascript.js</code>.</p> <pre><code>...\nfunction hooray(){\n    alert(\"Yahoo!\");\n}\n...\n</code></pre> <p>Apabila <code>magicButton</code> ditekan, maka fungsi <code>onclick</code> akan menjalankan function <code>hooray()</code> pada <code>javascript.js</code>, lalu muncul alert sesuai yang sudah di-assign sebelumnya.</p> <p>Kode <code>onclick</code> sebenarnya adalah salah satu contoh kemampuan JavaScript yang disebut event. Event adalah kemampuan JavaScript untuk membuat sebuah situs web dinamis. Maksud dari <code>onclick</code> 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 <code>onchange</code>, <code>onmouseover</code>, <code>onmouseout</code>, dan lain sebagainya yang bisa kamu baca pada tautan ini.</p>"},{"location":"tutorial/tutorial-5/#javascript-dom","title":"JavaScript DOM","text":""},{"location":"tutorial/tutorial-5/#html-dom","title":"HTML DOM","text":"<p>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.</p> <p>Berikut adalah contoh implementasinya.</p> <pre><code>...     \n&lt;div&gt;\n  &lt;p onclick=\"myFunction()\" id=\"demo\"&gt;Example of HTML DOM&lt;/p&gt;\n\n&lt;/div&gt;\n...\n</code></pre> <pre><code>...\n    function myFunction() {\ndocument.getElementById(\"demo\").innerHTML = \"YOU CLICKED ME!\";\n    }\n...\n</code></pre>"},{"location":"tutorial/tutorial-5/#css-dom","title":"CSS DOM","text":"<p>Sama dengan HTML DOM, CSS DOM dapat mengubah CSS secara dinamis melalui JavaScript. Detail lengkapnya dapat dilihat di sini.</p> <p>Berikut adalah contoh implementasinya.</p> <p><code>index.html</code></p> <pre><code>...\n&lt;p id=\"blueText\" onclick=\"changeColor()\"&gt;Click me v2&lt;/p&gt;\n...\n</code></pre> <p><code>javascript.js</code></p> <pre><code>...\nfunction changeColor(){\n    document.getElementById(\"blueText\").style.color=\"blue\";\n}\n...\n</code></pre>"},{"location":"tutorial/tutorial-5/#ajax","title":"AJAX","text":""},{"location":"tutorial/tutorial-5/#pengenalan-ajax","title":"Pengenalan AJAX","text":"<p>AJAX merupakan singkatan dari Asynchronous JavaScript And XML.</p> <p>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.</p> <p>Berikut ini adalah diagram cara kerja AJAX.</p> <p></p> <ol> <li>Sebuah event terjadi pada halaman web (contohnya tombol submit data ditekan)</li> <li>Sebuah <code>XMLHttpRequest</code> object dibuat oleh JavaScript</li> <li><code>XMLHttpRequest</code> object mengirimkan request ke server</li> <li>Server memproses request tersebut</li> <li>Server mengembalikan response kembali kepada halaman web</li> <li>Response dibaca oleh JavaScript</li> <li>Aksi berikutnya akan dipicu oleh JavaScript sesuai dengan langkah yang dibuat (contohnya memperbarui data di halaman tersebut)</li> </ol> <p>Pada PBP kali ini, kamu akan melakukan AJAX pada peramban web dengan menggunakan fungsi <code>fetch()</code> yang diberikan oleh JavaScript. Secara gambaran besar, penggunaan <code>fetch()</code> untuk melakukan pemanggilan AJAX dapat dilihat di tautan ini.</p>"},{"location":"tutorial/tutorial-5/#fetch-api","title":"Fetch API","text":"<p>Fetch API merupakan API baru yang diperkenalkan pada ECMAScript 2020 sebagai standar baru untuk membuat request dengan <code>Promise</code>. Fetch API menyediakan antarmuka untuk mengambil sumber daya (termasuk di seluruh jaringan). API ini merupakan pengganti yang lebih kuat dan fleksibel untuk <code>XMLHttpRequest</code>. Fetch API secara umum digunakan untuk mengimplementasikan AJAX secara lebih mudah daripada AJAX dengan <code>XMLHttpRequest</code>. Fetch API juga mendukung lebih banyak metode HTTP dan header HTTP daripada AJAX biasa.</p> <p>Fungsi <code>fetch()</code> memiliki beberapa parameter, yaitu:</p> <ul> <li><code>url</code>: URL dari sumber daya yang akan diminta</li> <li><code>method</code>: Metode HTTP yang akan digunakan</li> <li><code>headers</code>: Header HTTP yang akan dikirim</li> <li><code>body</code>: Isi dari permintaan HTTP</li> </ul> <p>Fungsi <code>fetch()</code> mengembalikan objek <code>Response</code>. Objek <code>Response</code> memiliki beberapa properti, yaitu:</p> <ul> <li><code>status</code>: Kode <code>status</code> HTTP dari respons</li> <li><code>headers</code>: Header HTTP dari respons</li> <li><code>body</code>: Isi dari respons</li> </ul> <p>Kamu dapat mempelajari Fetch API lebih lanjut pada tautan ini.</p>"},{"location":"tutorial/tutorial-5/#fungsi-async-dan-await","title":"Fungsi Async dan Await","text":"<p>Sebelum mempelajari penggunaan fungsi <code>fetch()</code>, ada baiknya kita mempelajari fungsi <code>async</code> dan <code>await</code> yang memungkinkan pengimplementasian AJAX tanpa perlu menggunakan library eksternal, seperti jQuery.</p> <p>Fungsi <code>async</code> dan <code>await</code> merupakan fungsi baru yang diperkenalkan di ECMAScript 2017. Fungsi <code>async</code> digunakan untuk menandai fungsi sebagai fungsi yang dapat mengembalikan nilai secara asinkronus, sedangkan fungsi <code>await</code> digunakan untuk menunggu hasil dari fungsi <code>async</code>.</p> <p>Kamu dapat mempelajari fungsi <code>async</code> dan <code>await</code> lebih lanjut pada tautan ini.</p>"},{"location":"tutorial/tutorial-5/#penggunaan-fetch-api","title":"Penggunaan Fetch API","text":"<p>Fetch API menyediakan antarmuka JavaScript untuk mengakses dan memanipulasi bagian-bagian protokol, seperti requests dan responses. API ini juga menyediakan metode <code>fetch()</code> global yang menyediakan cara yang mudah dan logis untuk mengambil sumber daya secara asinkronus pada seluruh jaringan.</p> <p>Tidak seperti <code>XMLHttpRequest</code> yang merupakan API berbasis callback, Fetch API berbasis <code>Promise</code> 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.</p> <p>Berikut adalah contoh penggunaan Fetch API dengan fungsi <code>async</code> dan <code>await</code> untuk melakukan AJAX.</p> <pre><code>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</code></pre> <p>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 <code>joke</code>.</p> <p>Kamu dapat mempelajari penggunaan Fetch API lebih lanjut pada tautan ini.</p>"},{"location":"tutorial/tutorial-5/#tutorial-membuat-fungsi-untuk-menambahkan-buku-dengan-ajax","title":"Tutorial: Membuat Fungsi untuk Menambahkan Buku dengan AJAX","text":"<p>Pada bagian ini, kamu akan membuat fungsi pada views untuk menambahkan buku baru ke basis data dengan AJAX.</p> <ol> <li> <p>Buatlah fungsi baru pada <code>views.py</code> dengan nama <code>add_book_ajax</code> yang menerima parameter <code>request</code>.</p> </li> <li> <p>Impor <code>from django.views.decorators.csrf import csrf_exempt</code> pada berkas <code>views.py</code>.</p> </li> <li> <p>Tambahkan dekorator <code>@csrf_exempt</code> di atas fungsi <code>add_book_ajax</code> yang sudah kamu buat.</p> </li> <li> <p>Isilah fungsi tersebut dengan kode berikut.</p> <pre><code>...\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</code></pre> <p>Penjelasan Kode:</p> <ul> <li><code>name = request.POST.get(\"name\")</code> berfungsi untuk mengambil value <code>name</code> pada <code>request</code>.</li> <li><code>new_book</code> membuat objek Book baru dengan parameter sesuai values dari request.</li> </ul> </li> </ol>"},{"location":"tutorial/tutorial-5/#tutorial-menambahkan-routing-untuk-fungsi-add_book_ajax","title":"Tutorial: Menambahkan Routing Untuk Fungsi <code>add_book_ajax</code>","text":"<ol> <li> <p>Buka berkas <code>urls.py</code> pada folder <code>main</code> dan impor fungsi <code>add_book_ajax</code>.</p> </li> <li> <p>Tambahkan path url fungsi tersebut ke dalam urlpatterns.</p> <pre><code>...\npath('create-book-ajax/', add_book_ajax, name='add_book_ajax'),\n</code></pre> </li> </ol>"},{"location":"tutorial/tutorial-5/#tutorial-menampilkan-data-book-dengan-fetch-api","title":"Tutorial: Menampilkan Data Book dengan <code>Fetch()</code> API","text":"<ol> <li> <p>Bukalah berkas <code>main.html</code> pada <code>main/templates</code> dan hapuslah bagian kode table yang sudah kamu buat pada tutorial sebelumnya.</p> </li> <li> <p>Tambahkanlah kode berikut sebagai struktur table.</p> <pre><code>&lt;table id=\"book_table\"&gt;&lt;/table&gt;\n</code></pre> </li> <li> <p>Buatlah block <code>&lt;Script&gt;</code> di bagian bawah berkas kamu dan buatlah fungsi baru pada block <code>&lt;Script&gt;</code> tersebut dengan nama <code>getBooks().</code></p> <pre><code>&lt;script&gt;\n    async function getBooks() {\n        return fetch(\"{% url 'main:show_json' %}\").then((res) =&gt; res.json())\n    }\n&lt;/script&gt;\n</code></pre> <p>Penjelasan Kode:</p> <ul> <li>Fungsi ini menggunakan <code>fetch()</code> API ke data JSON secara asynchronous.</li> <li>Setelah data di-fetch, fungsi <code>then()</code> digunakan untuk melakukan parse pada data JSON menjadi objek JavaScript.</li> </ul> </li> <li> <p>Buatlah fungsi baru pada block <code>&lt;Script&gt;</code> dengan nama <code>refreshBooks()</code> yang digunakan untuk me-refresh data buku secara asynchronous.</p> <pre><code>&lt;script&gt;\n    ...\n    async function refreshBooks() {\n        document.getElementById(\"book_table\").innerHTML = \"\"\n        const books = await getBooks()\n        let htmlString = `&lt;tr&gt;\n            &lt;th&gt;Name&lt;/th&gt;\n            &lt;th&gt;Page&lt;/th&gt;\n            &lt;th&gt;Description&lt;/th&gt;\n            &lt;th&gt;Date Added&lt;/th&gt;\n        &lt;/tr&gt;`\n        books.forEach((item) =&gt; {\n            htmlString += `\\n&lt;tr&gt;\n            &lt;td&gt;${item.fields.name}&lt;/td&gt;\n            &lt;td&gt;${item.fields.page}&lt;/td&gt;\n            &lt;td&gt;${item.fields.description}&lt;/td&gt;\n            &lt;td&gt;${item.fields.date_added}&lt;/td&gt;\n        &lt;/tr&gt;` \n        })\n\n        document.getElementById(\"book_table\").innerHTML = htmlString\n    }\n\n    refreshBooks()\n&lt;/script&gt;\n</code></pre> <p>Penjelasan Kode:</p> <ul> <li><code>document.getElementById(\"book_table\")</code> digunakan untuk mendapatkan elemen berdasarkan ID nya. Pada baris kode ini, elemen yang dituju adalah tag <code>&lt;table&gt;</code> dengan ID <code>book_table</code> yang sudah kamu buat pada tahapan sebelumnya.</li> <li><code>innerHTML</code> digunakan untuk mengisi child element dari elemen yang dituju. Jika <code>innerHTML = \"\"</code>, maka akan mengosongkan isi child element dari elemen yang dituju.</li> <li><code>books.forEach((item))</code> digunakan untuk melakukan for each loop pada data books yang diambil menggunakan fungsi <code>getBooks()</code>. Kemudian, <code>htmlString</code> kita konkatenasi dengan data buku untuk mengisi tabel.</li> <li><code>refreshBooks()</code> digunakan untuk memanggil fungsi tersebut pada setiap kali membuka halaman web.</li> </ul> </li> </ol>"},{"location":"tutorial/tutorial-5/#tutorial-membuat-modal-sebagai-form-untuk-menambahkan-buku","title":"Tutorial: Membuat Modal Sebagai Form untuk Menambahkan Buku","text":"<ol> <li> <p>Tambahkan kode berikut untuk mengimplementasikan modal (Bootstrap) pada aplikasi kamu.</p> <pre><code>...\n&lt;div class=\"modal fade\" id=\"exampleModal\" tabindex=\"-1\" aria-labelledby=\"exampleModalLabel\" aria-hidden=\"true\"&gt;\n    &lt;div class=\"modal-dialog\"&gt;\n        &lt;div class=\"modal-content\"&gt;\n            &lt;div class=\"modal-header\"&gt;\n                &lt;h1 class=\"modal-title fs-5\" id=\"exampleModalLabel\"&gt;Add New Book&lt;/h1&gt;\n                &lt;button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"&gt;&lt;/button&gt;\n            &lt;/div&gt;\n            &lt;div class=\"modal-body\"&gt;\n                &lt;form id=\"form\" onsubmit=\"return false;\"&gt;\n                    {% csrf_token %}\n                    &lt;div class=\"mb-3\"&gt;\n                        &lt;label for=\"name\" class=\"col-form-label\"&gt;Name:&lt;/label&gt;\n                        &lt;input type=\"text\" class=\"form-control\" id=\"name\" name=\"name\"&gt;&lt;/input&gt;\n                    &lt;/div&gt;\n                    &lt;div class=\"mb-3\"&gt;\n                        &lt;label for=\"page\" class=\"col-form-label\"&gt;Page:&lt;/label&gt;\n                        &lt;input type=\"number\" class=\"form-control\" id=\"page\" name=\"page\"&gt;&lt;/input&gt;\n                    &lt;/div&gt;\n                    &lt;div class=\"mb-3\"&gt;\n                        &lt;label for=\"description\" class=\"col-form-label\"&gt;Description:&lt;/label&gt;\n                        &lt;textarea class=\"form-control\" id=\"description\" name=\"description\"&gt;&lt;/textarea&gt;\n                    &lt;/div&gt;\n                &lt;/form&gt;\n            &lt;/div&gt;\n            &lt;div class=\"modal-footer\"&gt;\n                &lt;button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\"&gt;Close&lt;/button&gt;\n                &lt;button type=\"button\" class=\"btn btn-primary\" id=\"button_add\" data-bs-dismiss=\"modal\"&gt;Add Book&lt;/button&gt;\n            &lt;/div&gt;\n        &lt;/div&gt;\n    &lt;/div&gt;\n&lt;/div&gt;\n...\n</code></pre> <p>Form pada modal tersebut sudah disesuaikan untuk model pada aplikasi <code>book_tracker</code>.</p> <p>Kamu dapat membaca dokumentasi lebih lanjut mengenai modal pada Bootstrap di sini.</p> </li> <li> <p>Menambahkan <code>button</code> yang berfungsi untuk menampilkan modal.</p> <pre><code>...\n&lt;button type=\"button\" class=\"btn btn-primary\" data-bs-toggle=\"modal\" data-bs-target=\"#exampleModal\"&gt;\n    Add Book by AJAX\n&lt;/button&gt;\n...\n</code></pre> </li> </ol>"},{"location":"tutorial/tutorial-5/#tutorial-menambahkan-data-book-dengan-ajax","title":"Tutorial: Menambahkan Data Book dengan AJAX","text":"<p>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.</p> <ol> <li> <p>Buatlah fungsi baru pada block <code>&lt;Script&gt;</code> dengan nama <code>addBook()</code>. Isilah fungsi tersebut dengan kode berikut.</p> <pre><code>&lt;script&gt;\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&lt;/script&gt;\n</code></pre> <p>Penjelasan Kode:</p> <ul> <li><code>new FormData(document.querySelector('#form'))</code> digunakan untuk membuat sebuah FormData baru yang datanya diambil dari form pada modal. Objek FormData dapat digunakan untuk mengirimkan data form tersebut ke server.</li> <li><code>document.getElementById(\"form\").reset()</code> digunakan untuk mengosongkan isi field form modal setelah di-submit.</li> </ul> </li> <li> <p>Tambahkan fungsi <code>onclick</code> pada button \"Add Book\" pada modal untuk menjalankan fungsi <code>addBook()</code> dengan menambahkan kode berikut.</p> <pre><code>&lt;script&gt;\n...\ndocument.getElementById(\"button_add\").onclick = addBook\n&lt;/script&gt;\n</code></pre> </li> </ol> <p>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.</p>"},{"location":"tutorial/tutorial-5/#penutup","title":"Penutup","text":"<p>Selamat! Kamu telah menyelesaikan Tutorial 5 mengenai AJAX dengan baik. \ud83d\ude04</p> <ol> <li> <p>Setelah menyelesaikan tutorial ini, tampilan halaman web kamu seharusnya terlihat seperti ini.</p> <p></p> </li> <li> <p>Kamu juga seharusnya sudah dapat menambahkan buku secara asynchronous dengan menggunakan modal AJAX.</p> <p></p> </li> <li> <p>Lakukan <code>add</code>, <code>commit</code> dan <code>push</code> untuk memperbarui repositori GitHub. Jalankan perintah berikut untuk melakukan <code>add</code>, <code>commit</code> dan <code>push</code>.</p> <pre><code>git add .\ngit commit -m \"&lt;pesan_commit&gt;\"\ngit push -u origin &lt;branch_utama&gt;\n</code></pre> <ul> <li>Ubah <code>&lt;pesan_commit&gt;</code> sesuai dengan keinginan. Contoh: <code>git commit -m \"tutorial 5 selesai\"</code>.</li> <li>Ubah <code>&lt;branch_utama&gt;</code> sesuai dengan nama branch utamamu. Contoh: <code>git push -u origin main</code> atau <code>git push -u origin master</code>.</li> </ul> </li> </ol>"},{"location":"tutorial/tutorial-5/#referensi-tambahan","title":"Referensi Tambahan","text":"<ul> <li>Async/Await Function in JavaScript</li> <li>How to Use Fetch to Make AJAX Calls in JavaScript</li> <li>Modal Bootstrap 5.3</li> </ul>"},{"location":"tutorial/tutorial-5/#kontributor","title":"Kontributor","text":"<ul> <li>Muhammad Nabil Mu'afa</li> <li>Muhammad Iqbal Dwitama</li> </ul>"},{"location":"tutorial/tutorial-5/#credits","title":"Credits","text":"<p>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.</p>"}]}
\ No newline at end of file
diff --git a/sitemap.xml.gz b/sitemap.xml.gz
index fd3e146..fb08b74 100644
Binary files a/sitemap.xml.gz and b/sitemap.xml.gz differ
diff --git a/tutorial/tutorial-5/index.html b/tutorial/tutorial-5/index.html
index 2d3d9b6..a070082 100644
--- a/tutorial/tutorial-5/index.html
+++ b/tutorial/tutorial-5/index.html
@@ -1733,7 +1733,7 @@ <h4 id="css-dom">CSS DOM</h4>
 </code></pre></div>
 <h2 id="ajax">AJAX</h2>
 <h3 id="pengenalan-ajax">Pengenalan AJAX</h3>
-<p>AJAX merupakan singkatan dari <strong><em>A</em>*synchronous </strong>J<strong>avaScript </strong>A<strong>nd </strong>X*<em>ML</em>.</p>
+<p>AJAX merupakan singkatan dari <em><strong>A</strong>synchronous <strong>J</strong>avaScript <strong>A</strong>nd <strong>X</strong>ML</em>.</p>
 <p>AJAX bukanlah merupakan sebuah bahasa pemrograman, melainkan sebuah teknologi yang memadukan peramban web (untuk meminta data dari <em>web server</em>) 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-<em>reload</em> halaman secara keseluruhan.</p>
 <p>Berikut ini adalah diagram cara kerja AJAX.</p>
 <p><img alt="ajax-works" src="https://www.w3schools.com/js/pic_ajax.gif" /></p>
@@ -1982,10 +1982,10 @@ <h2 id="tutorial-menambahkan-data-book-dengan-ajax">Tutorial: Menambahkan Data <
 <h2 id="penutup">Penutup</h2>
 <p>Selamat! Kamu telah menyelesaikan Tutorial 5 mengenai AJAX dengan baik. 😄</p>
 <ol>
-<li>Setelah menyelesaikan tutorial ini, tampilan halaman web kamu seharusnya terlihat seperti ini.</li>
-</ol>
+<li>
+<p>Setelah menyelesaikan tutorial ini, tampilan halaman web kamu seharusnya terlihat seperti ini.</p>
 <p><img alt="Tampilan Halaman Web" src="https://cdn.discordapp.com/attachments/1153328604458008677/1213768191143182396/image.png?ex=65f6acb7&amp;is=65e437b7&amp;hm=943fc28676b09d262a01ea2efa44398e8969d0096f3a60e96338b14c1a13b69e&amp;" /></p>
-<ol>
+</li>
 <li>
 <p>Kamu juga seharusnya sudah dapat menambahkan buku secara <em>asynchronous</em> dengan menggunakan modal AJAX.</p>
 <p><img alt="Tampilan Modal" src="https://cdn.discordapp.com/attachments/1153328604458008677/1213768513211072562/image.png?ex=65f6ad04&amp;is=65e43804&amp;hm=9b9418102bad76aab8d45c3081457a2e912498f0611c0f1923cc4823d071bf89&amp;" /></p>
@@ -2037,7 +2037,7 @@ <h2 id="credits">Credits</h2>
     <span class="md-icon" title="Pembaruan terakhir">
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21 13.1c-.1 0-.3.1-.4.2l-1 1 2.1 2.1 1-1c.2-.2.2-.6 0-.8l-1.3-1.3c-.1-.1-.2-.2-.4-.2m-1.9 1.8-6.1 6V23h2.1l6.1-6.1-2.1-2M12.5 7v5.2l4 2.4-1 1L11 13V7h1.5M11 21.9c-5.1-.5-9-4.8-9-9.9C2 6.5 6.5 2 12 2c5.3 0 9.6 4.1 10 9.3-.3-.1-.6-.2-1-.2s-.7.1-1 .2C19.6 7.2 16.2 4 12 4c-4.4 0-8 3.6-8 8 0 4.1 3.1 7.5 7.1 7.9l-.1.2v1.8Z"/></svg>
     </span>
-    <span class="git-revision-date-localized-plugin git-revision-date-localized-plugin-datetime">5 Maret 2024 08:25:28</span>
+    <span class="git-revision-date-localized-plugin git-revision-date-localized-plugin-datetime">5 Maret 2024 08:29:33</span>
   </span>