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.
"},{"location":"#dosen","title":"Dosen","text":"Arawinda Dinakaramani, S.Kom., M.Hum.
"},{"location":"#asisten-dosen","title":"Asisten Dosen","text":"Pemrograman Berbasis Platform (CSGE602022) \u2014 diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Genap 2023/2024
"},{"location":"tugas/tugas-1/#deskripsi-tugas","title":"Deskripsi Tugas","text":"Tulislah sebuah esai minimal 1000 kata yang mengandung poin-poin sebagai berikut.
Pilihlah salah satu platform yang telah dijelaskan dalam Slide 1. Sebutkan nama platform yang Anda pilih.
Sebutkan 3 perangkat dan teknologi yang tergolong dalam platform tersebut yang pernah Anda gunakan.
Untuk masing-masing perangkat dan teknologi yang Anda sebutkan, ceritakan pengalaman Anda saat\u00a0menggunakannya.
Menurut Anda, apakah ada satu platform yang paling penting di antara semua programming platform? Jika ada, platform apa dan mengapa platform tersebut paling penting? Jika tidak ada, jelaskan\u00a0alasannya!
Tugas dikumpulkan dalam format Portable Document File (*.pdf) dengan ketentuan nama berkas NPM_Nama_Tugas 1.pdf.
Tenggat waktu pengerjaan Tugas 1 adalah hari Selasa, 6 Februari 2024, pukul 12.00 siang.
Harap mengumpulkan esai yang telah kamu buat ke dalam slot submisi yang telah disediakan di SCELE.
"},{"location":"tugas/tugas-1/#rubrik-penilaian","title":"Rubrik Penilaian","text":"Pemrograman Berbasis Platform (CSGE602022) \u2014 diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Genap 2023/2024
"},{"location":"tugas/tugas-2/#deskripsi-tugas","title":"Deskripsi Tugas","text":"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.
"},{"location":"tugas/tugas-2/#tema-aplikasi","title":"Tema Aplikasi","text":"Tema besar aplikasi untuk tugas PBP adalah aplikasi tracker. Pada semester ini, kamu diberikan kebebasan dalam memilih nama dan tema kecil aplikasi, kecuali book tracker yang sudah digunakan pada tutorial. Namun, aplikasi dari tugas kamu harus memiliki atribut-atribut berikut pada model aplikasimu.
name sebagai nama item dengan tipe CharField.amount sebagai jumlah item dengan tipe IntegerField.description sebagai deskripsi item dengan tipe TextField.Kamu dipersilakan untuk menambahkan atribut lainnya jika diinginkan, seperti date, category. Namun, model aplikasi kamu wajib memiliki ketiga atribut wajib di atas (name, amount, description). Nama dari ketiga atribut di atas dapat disesuaikan lagi dengan kebutuhan aplikasimu.
Beberapa contoh ide aplikasi pengelolaan yang dapat kamu buat adalah sebagai berikut.
title, episodes, synopsis, rating, date.name, price, description, category, date.name, calories, description, dateChecklist untuk tugas ini adalah sebagai berikut.
main pada proyek tersebut.main.main dengan nama Item dan memiliki atribut wajib sebagai berikut.name sebagai nama item dengan tipe CharField.amount sebagai jumlah item dengan tipe IntegerField.description sebagai deskripsi item dengan tipe TextField.views.py untuk dikembalikan ke dalam sebuah template HTML yang menampilkan nama aplikasi serta nama dan kelas kamu.urls.py aplikasi main untuk memetakan fungsi yang telah dibuat pada views.py.README.md yang berisi tautan menuju aplikasi PWS yang sudah di-deploy, serta jawaban dari beberapa pertanyaan berikut.urls.py, views.py, models.py, dan berkas html.Perhatikan bahwa kamu harus mengerjakan tugas ini menggunakan repositori yang berbeda dengan tutorial.
"},{"location":"tugas/tugas-2/#tenggat-waktu-pengerjaan","title":"Tenggat Waktu Pengerjaan","text":"Tenggat waktu pengerjaan Tugas 2 adalah hari Selasa, 13 Februari, pukul 12.00 siang.
Harap mengumpulkan link repositori yang kamu gunakan ke dalam slot submisi yang telah disediakan di SCELE.
"},{"location":"tugas/tugas-3/","title":"Tugas 3: Implementasi Form dan Data Delivery pada Django","text":"Pemrograman Berbasis Platform (CSGE602022) \u2014 diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Genap 2023/2024
"},{"location":"tugas/tugas-3/#deskripsi-tugas","title":"Deskripsi Tugas","text":"Pada tugas ini, kamu akan menjalankan implementasi konsep data delivery serta menerapkan beberapa konsep yang telah dipelajari selama sesi tutorial.
Checklist untuk tugas ini adalah sebagai berikut:
form untuk menambahkan objek model pada app sebelumnya.views baru untuk melihat objek yang sudah ditambahkan dalam format XML, JSON, XML by ID, dan JSON by ID.views yang telah ditambahkan pada poin 2.README.md pada root folder.POST dan form GET dalam Django?README.md.add-commit-push ke GitHub.Tenggat waktu pengerjaan Tugas 3 adalah hari Selasa, 20 Februari, pukul 12.00 siang.
Asisten dosen akan mengecek last commit dari repositori tugas lab, sehingga kamu tidak perlu mengumpulkan tautan repositori ke dalam slot submisi.
"},{"location":"tugas/tugas-4/","title":"Tugas 4: Implementasi Autentikasi, Session, dan Cookies pada Django","text":"Pemrograman Berbasis Platform (CSGE602022) \u2014 diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Genap 2023/2024
"},{"location":"tugas/tugas-4/#deskripsi-tugas","title":"Deskripsi Tugas","text":"Pada tugas ini, kamu akan mengimplementasikan konsep authentication, session, cookies, serta menerapkan beberapa konsep yang telah dipelajari selama sesi tutorial.
Kerjakan checklist untuk tugas ini secara berurutan:
Item dengan User.cookies seperti last login pada halaman utama aplikasi.[ ] Menjawab beberapa pertanyaan berikut pada README.md pada root folder (silakan modifikasi README.md yang telah kamu buat sebelumnya; tambahkan subjudul untuk setiap tugas).
UserCreationForm, dan jelaskan apa kelebihan dan kekurangannya?add-commit-push ke GitHub.Tenggat waktu pengerjaan Tugas 4 adalah Selasa, 27 Februari 2023, pukul 12.00 siang.
Asisten dosen akan mengecek last commit dari repositori tugas lab, sehingga kamu tidak perlu mengumpulkan tautan repositori ke dalam slot submisi.
"},{"location":"tutorial/tutorial-0/","title":"Tutorial 0: Konfigurasi dan Instalasi Git dan Django","text":"Pemrograman Berbasis Platform (CSGE602022) \u2014 diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Ganjil 2023/2024
"},{"location":"tutorial/tutorial-0/#tujuan-pembelajaran","title":"Tujuan Pembelajaran","text":"Setelah menyelesaikan tutorial ini, mahasiswa diharapkan untuk dapat:
Pengenalan awal ini akan membantumu memahami dasar-dasar mengenai Git dan platform berbasis web yang dikenal sebagai GitHub.
"},{"location":"tutorial/tutorial-0/#git-sistem-kontrol-versi-yang-kuat","title":"Git: Sistem Kontrol Versi yang Kuat","text":"Dengan pemahaman dasar mengenai Git dan GitHub, kamu siap untuk melangkah lebih jauh dalam dunia pengembangan perangkat lunak yang kolaboratif dan terstruktur.
"},{"location":"tutorial/tutorial-0/#langkah-1-membuat-akun-di-github","title":"Langkah 1: Membuat Akun di GitHub","text":"Langkah selanjutnya adalah membuat akun di GitHub, yang akan memungkinkanmu untuk mulai berkolaborasi pada proyek-proyek menggunakan Git.
Buka Situs Web GitHub ....-.Buka peramban web dan akses GitHub.
Membuat Akun ....-.Di halaman beranda GitHub, cari tombol Sign up di pojok kanan atas halaman. ....-.Klik tombol tersebut untuk memulai proses pendaftaran akun.
Isi Formulir Pendaftaran ....-.Isi formulir pendaftaran dengan informasi yang diperlukan, seperti nama pengguna yang ingin digunakan, alamat email yang valid, dan kata sandi yang aman. ....-.Pastikan kamu menyimpan informasi ini dengan aman untuk masuk ke akunmu di masa mendatang.
Verifikasi Akun Melalui Email
Setelah mengisi formulir, GitHub akan mengirimkan email verifikasi ke alamat email yang kamu berikan.
Buka email tersebut dan ikuti instruksi untuk verifikasi akunmu.
Akun GitHub Siap Digunakan
Setelah verifikasi selesai, kamu akan memiliki akun GitHub yang siap digunakan untuk berkolaborasi dalam proyek dan melacak perubahan menggunakan Git.
Catatan:
Kamu sekarang telah memiliki akun GitHub yang dapat digunakan untuk menyimpan proyek, berkolaborasi dengan orang lain, dan masih banyak lagi.
"},{"location":"tutorial/tutorial-0/#tutorial-instalasi-ide","title":"Tutorial: Instalasi IDE","text":"IDE (Integrated Development Environment) adalah perangkat lunak yang membantu para pengembang dalam menulis, mengedit, dan mengelola kode. Berikut adalah langkah-langkah untuk memasang IDE.
"},{"location":"tutorial/tutorial-0/#langkah-1-pemilihan-text-editor-atau-ide","title":"Langkah 1: Pemilihan Text Editor atau IDE","text":"Pilihlah text editor atau IDE yang sesuai dengan preferensimu. Beberapa pilihan populer yang dapat kamu pertimbangkan meliputi:
Catatan:
Jika Git belum terpasang pada sistem, kamu dapat mengikuti langkah-langkah berikut untuk menginstalnya.
Setelah Git terpasang, langkah-langkah berikut akan membantumu mengatur konfigurasi awal sebelum mulai menggunakan Git.
cd <path_direktori>git init. Perintah ini akan membuat repositori Git kosong di dalam direktori yang kamu tentukan.Sebelum mulai berkontribusi ke repositori, konfigurasikan nama pengguna dan alamat email agar terhubung dengan commit-mu.
Atur username dan email yang akan diasosiasikan dengan pekerjaanmu ke repositori Git ini dengan menjalankan perintah di bawah ini. Sesuaikan dengan username dan email yang kamu gunakan pada GitHub.
git config --global user.name \"<NAME>\"\ngit config --global user.email \"<EMAIL>\"\nContoh:
git config --global user.name \"pakbepe\"\ngit config --global user.email \"pak.bepe@cs.ui.ac.id\"\nPerlu diketahui bahwa flag --global akan mengubah konfigurasi global untuk seluruh sistem.
Untuk memastikan konfigurasi telah diatur dengan benar pada repositori lokal, kamu dapat menjalankan perintah berikut.
git config --list\nCatatan:
<NAME> dan <EMAIL> dengan informasi pribadimuRepositori adalah tempat penyimpanan untuk proyek perangkat lunak, yang mencakup semua revisi dan perubahan yang telah dilakukan pada kode. Untuk mengeksekusi perintah-perintah Git, kamu dapat melakukannya pada repositori di GitHub, platform kolaboratif untuk mengelola proyek menggunakan Git.
"},{"location":"tutorial/tutorial-0/#langkah-1-melakukan-inisiasi-repositori-di-github","title":"Langkah 1: Melakukan Inisiasi Repositori di GitHub","text":"Langkah pertama dalam penggunaan Git adalah melakukan inisiasi repositori di GitHub untuk memulai pelacakan perubahan pada proyekmu.
Buka GitHub melalui peramban web.
Buat Repositori Baru
Pada halaman beranda GitHub, buat repositori baru dengan nama my-first-repo.
Buka halaman repositori yang baru kamu buat. Pastikan untuk mengatur visibilitas proyek sebagai \"Public\" dan biarkan pengaturan lainnya pada nilai default.
Tentukan Direktori Lokal
Pilih direktori lokal di komputermu yang telah diinisiasi dengan Git. Inilah tempat kamu akan menyimpan versi lokal dari proyek.
Tambahkan Berkas README.md
Buat berkas baru dengan nama README.md dalam direktori lokal proyekmu.
Isi berkas README.md dengan informasi seperti nama, NPM, dan kelas. Contoh:
Nama : Pak Bepe\n\nNPM : 2201234567\n\nKelas : PBP A\nCek Status dan Lakukan Tracking
Buka command prompt atau terminal, lalu jalankan git status pada direktori yang sudah kamu pilih. Perintah ini akan menampilkan berkas-berkas yang belum di-track (untracked).
Gunakan perintah git add README.md untuk menandai berkas README.md sebagai berkas yang akan di-commit (tracked).
Commit Perubahan
Jalankan kembali git status dan pastikan berkas README.md sudah ditandai sebagai berkas yang akan di-commit.
git commit -m \"<KOMENTAR KAMU>\" untuk membuat commit dengan pesan komentar yang sesuai dengan perubahan yang kamu lakukan.Catatan:
Perbaikan bug atau Update file.Setelah melakukan inisiasi repositori lokal, langkah selanjutnya adalah menghubungkannya dengan repositori di GitHub agar kamu dapat berkolaborasi dan menyimpan perubahan di platform daring tersebut.
Buat Branch Utama Baru
Di terminal atau command prompt, jalankan perintah git branch -M main untuk membuat branch utama baru dengan nama \"main\".
Pastikan huruf \"M\" pada perintah -M ditulis dengan huruf kapital.
Hubungkan dengan Repositori di GitHub
Gunakan perintah git remote add origin <URL_REPO> untuk menghubungkan repositori lokal dengan repositori di GitHub.
Gantilah <URL_REPO> dengan URL HTTPS repositori yang telah kamu buat di GitHub. Contoh:
git remote add origin https://github.com/pakbepe/test.git\nLakukan Penyimpanan Pertama ke GitHub
Terakhir, lakukan penyimpanan pertama ke GitHub dengan menjalankan perintah git push -u origin main.
Perintah ini akan mengirimkan semua perubahan yang ada pada branch saat ini (dalam hal ini adalah branch utama) di repositori lokal ke branch main di repositori GitHub.
Lakukan Pengecekan Kembali
Lakukan refresh pada halaman repositori kamu, seharusnya berkas README.md kamu sudah dapat terlihat.
Catatan:
Cloning repositori adalah proses menduplikasi seluruh konten dari repositori yang ada di platform GitHub ke komputer lokal. Langkah-langkahnya adalah sebagai berikut.
Buka halaman repositori di GitHub yang telah kamu buat sebelumnya.
Salin URL Clone
Klik tombol Code di pojok kanan atas halaman repositori di GitHub.
Pilih opsi HTTPS untuk salin URL clone.
Clone Repositori ke Komputer Lokal
Buka terminal atau command prompt di direktori yang berbeda dari tempat repositori lokalmu sebelumnya.
git clone <URL_CLONE> (gantilah URL_CLONE dengan URL yang telah kamu salin).Saat ini, kamu memiliki tiga repositori:
Catatan:
Seperti yang sudah disinggung sebelumnya (Langkah 2), push adalah proses mengirimkan perubahan yang kamu lakukan di repositori lokal ke repositori di GitHub. Langkah-langkahnya adalah sebagai berikut.
Buka kembali repositori lokal yang pertama kali kamu buat.
Ubah isi berkas README.md dengan menambahkan atribut Hobi. Contohnya adalah sebagai berikut.
Nama : Pak Bepe\n\nNPM : 2201234567\n\nKelas : PBP A\n\nHobi : Tidur\nLakukan Push ke Repositori GitHub
Buka terminal atau command prompt, kemudian masuk ke repositori lokal yang telah kamu ubah.
git status untuk melihat status perubahan yang dilakukan.git add README.md untuk menambahkan perubahan ke dalam tahap yang akan di-commit.git commit -m \"<KOMENTAR KAMU>\" untuk memberikan deskripsi singkat tentang perubahan yang kamu lakukan.Terakhir, jalankan git push -u origin <NAMA_BRANCH> untuk mengirim perubahan ke branch yang dipilih pada repositori GitHub (gantilah \"Nama Branch\" dengan target branch, misalnya main).
Lakukan Pengecekan Kembali
Lakukan refresh halaman kamu, seharusnya berkas README.md kamu sudah berubah.
Catatan: Jika kamu ingin mengambil semua perubahan yang belum di-stage (ditandai untuk dimasukkan dalam commit) dari seluruh direktori proyek kamu, jalankan git add ..
Pull pada suatu repositori adalah proses mengambil perubahan terbaru dari repositori di GitHub dan menggabungkannya dengan repositori lokal.
Buka kembali repositori lokal yang telah kamu clone sebelumnya di terminal atau command prompt.
Jalankan Perintah Pull
Jalankan perintah git pull origin main untuk mengambil perubahan terbaru yang ada di repositori GitHub dan menggabungkannya dengan repositori lokalmu.
Lakukan Pengecekan Kembali
Periksa kembali berkas README.md di repositori lokal tersebut. Seharusnya berkas README.md kamu sudah menampilkan hobi kamu.
Catatan:
Pada tahap ini kamu akan mempelajari tentang penggunaan branch dalam Git. Penggunaan branch memungkinkan kamu untuk mengembangkan fitur atau memperbaiki bug di lingkungan terpisah sebelum menggabungkannya kembali ke branch utama.
Apa Itu Branch di Git?
Hal ini memungkinkan tim untuk bekerja pada fitur atau perbaikan bug tanpa mengganggu kode yang ada di branch utama.
Membuat dan Mengganti Branch Baru
Pada direktori repositori lokal asli (bukan clone), jalankan perintah git checkout -b <NAMA_BRANCH> di terminal atau command prompt untuk membuat dan beralih ke branch baru. Contoh: git checkout -b jurusan_branch
Tambahkan atribut jurusan pada berkas README.md. Contoh:
Nama : Pak Bepe\n\nNPM : 2201234567\n\nKelas : PBP A\n\nHobi : Tidur\n\nJurusan : Ilmu Sistem Informasi Komputer\nMenyimpan Perubahan dan Push ke GitHub
Setelah menambahkan atribut jurusan, simpan berkas tersebut.
add, commit, dan push ke GitHub dengan menjalankan perintah yang sudah kamu kuasai sebelumnya.Jalankan perintah git push -u origin <NAMA_BRANCH>. Pastikan untuk mengganti <NAMA_BRANCH> sesuai dengan nama branch baru yang telah dibuat.
Menggabungkan Branch Menggunakan Pull Request
Buka kembali halaman repositori kamu pada GitHub.
Compare & pull request akan muncul. Jika tidak, alternatifnya adalah dengan menekan tombol Pull Request dan kemudian memilih opsi New pull request.Merge pull request yang akan menggabungkan perubahan dari branch yang ingin digabungkan ke dalam branch utama (main).Catatan:
git checkout <NAMA_BRANCH> pada terminal. Flag -b pada perintah sebelum-sebelumnya digunakan untuk membuat branch baru dan beralih ke branch tersebut dalam satu langkah.Django adalah kerangka kerja (framework) yang populer untuk pengembangan aplikasi web dengan bahasa pemrograman Python. Dalam tutorial ini, kamu akan mempelajari langkah-langkah instalasi Django dan inisiasi proyek demo sebagai starter.
"},{"location":"tutorial/tutorial-0/#langkah-1-membuat-direktori-dan-mengaktifkan-virtual-environment","title":"Langkah 1: Membuat Direktori dan Mengaktifkan Virtual Environment","text":"book-tracker dan masuk ke dalamnya.python -m venv env\nVirtual environment ini berguna untuk mengisolasi package serta dependencies dari aplikasi agar tidak bertabrakan dengan versi lain yang ada pada komputermu. Kamu dapat mengaktifkan virtual environment dengan perintah berikut.
Windows:
env\\Scripts\\activate\nUnix (Mac/Linux):
source env/bin/activate\nVirtual environment akan aktif dan ditandai dengan (env) di baris input terminal.
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.
requirements.txt dan tambahkan beberapa dependencies.django\ngunicorn\nwhitenoise\npsycopg2-binary\nrequests\nurllib3\npip install -r requirements.txt\nbook_tracker dengan perintah berikut.django-admin startproject book_tracker .\nPastikan karakter . tertulis di akhir perintah
* pada ALLOWED_HOSTS di settings.py untuk keperluan deployment:...\nALLOWED_HOSTS = [\"*\"]\n...\nDalam konteks deployment, ALLOWED_HOSTS berfungsi sebagai daftar host yang diizinkan untuk mengakses aplikasi web. Dengan menetapkan nilai [\"*\"], kamu mengizinkan akses dari semua host, yang akan memungkinkan aplikasi diakses secara luas. Namun, perlu diingat bahwa pengaturan ini harus digunakan dengan bijak dan hanya dalam situasi tertentu, seperti saat melakukan uji coba atau tahap awal pengembangan.
Pastikan bahwa berkas manage.py ada pada direktori yang aktif pada terminal kamu saat ini. Jalankan server Django dengan perintah:
Windows:
python manage.py runserver\nUnix:
python3 manage.py runserver\nBuka http://localhost:8000 pada peramban web untuk melihat animasi roket sebagai tanda aplikasi Django kamu berhasil dibuat.
Ctrl+C (Windows/Linux) atau Control+C (Mac) pada terminal.deactivate\nSelamat! Kamu telah berhasil membuat aplikasi Django dari awal.
"},{"location":"tutorial/tutorial-0/#tutorial-unggah-proyek-ke-repositori-github","title":"Tutorial: Unggah Proyek ke Repositori GitHub","text":"Buatlah repositori GitHub baru bernama book-tracker dengan visibilitas public.
Inisiasi direktori lokal book-tracker sebagai repositori Git.
Hint: Ingat kembali tahap tutorial sebelumnya
Tambahkan Berkas .gitignore
Tambahkan berkas .gitignore dan isilah berkas tersebut dengan teks berikut.
# Django\n*.log\n*.pot\n*.pyc\n__pycache__\ndb.sqlite3\nmedia\n\n# Backup files\n*.bak\n\n# If you are using PyCharm\n# User-specific stuff\n.idea/**/workspace.xml\n.idea/**/tasks.xml\n.idea/**/usage.statistics.xml\n.idea/**/dictionaries\n.idea/**/shelf\n\n# AWS User-specific\n.idea/**/aws.xml\n\n# Generated files\n.idea/**/contentModel.xml\n\n# Sensitive or high-churn files\n.idea/**/dataSources/\n.idea/**/dataSources.ids\n.idea/**/dataSources.local.xml\n.idea/**/sqlDataSources.xml\n.idea/**/dynamic.xml\n.idea/**/uiDesigner.xml\n.idea/**/dbnavigator.xml\n\n# Gradle\n.idea/**/gradle.xml\n.idea/**/libraries\n\n# File-based project format\n*.iws\n\n# IntelliJ\nout/\n\n# JIRA plugin\natlassian-ide-plugin.xml\n\n# Python\n*.py[cod]\n*$py.class\n\n# Distribution / packaging\n.Python build/\ndevelop-eggs/\ndist/\ndownloads/\neggs/\n.eggs/\nlib/\nlib64/\nparts/\nsdist/\nvar/\nwheels/\n*.egg-info/\n.installed.cfg\n*.egg\n*.manifest\n*.spec\n\n# Installer logs\npip-log.txt\npip-delete-this-directory.txt\n\n# Unit test / coverage reports\nhtmlcov/\n.tox/\n.coverage\n.coverage.*\n.cache\n.pytest_cache/\nnosetests.xml\ncoverage.xml\n*.cover\n.hypothesis/\n\n# Jupyter Notebook\n.ipynb_checkpoints\n\n# pyenv\n.python-version\n\n# celery\ncelerybeat-schedule.*\n\n# SageMath parsed files\n*.sage.py\n\n# Environments\n.env\n.venv\nenv/\nvenv/\nENV/\nenv.bak/\nvenv.bak/\n\n# mkdocs documentation\n/site\n\n# mypy\n.mypy_cache/\n\n# Sublime Text\n*.tmlanguage.cache\n*.tmPreferences.cache\n*.stTheme.cache\n*.sublime-workspace\n*.sublime-project\n\n# sftp configuration file\nsftp-config.json\n\n# Package control specific files Package\nControl.last-run\nControl.ca-list\nControl.ca-bundle\nControl.system-ca-bundle\nGitHub.sublime-settings\n\n# Visual Studio Code\n.vscode/*\n!.vscode/settings.json\n!.vscode/tasks.json\n!.vscode/launch.json\n!.vscode/extensions.json\n.history\nBerkas .gitignore adalah sebuah berkas konfigurasi yang digunakan dalam repositori Git untuk menentukan berkas-berkas dan direktori-direktori yang harus diabaikan oleh Git.
.gitignore tidak akan dimasukkan ke dalam versi kontrol Git.Berkas ini perlu dibuat karena terkadang ada berkas-berkas yang tidak perlu dilacak oleh Git, seperti berkas-berkas yang dihasilkan oleh proses kompilasi, berkas sementara, atau berkas konfigurasi pribadi.
Lakukan add, commit, dan push dari direktori repositori lokal.
Catatan:
book-tracker yang baru saja kamu buat akan menjadi landasan untuk tutorial-tutorial berikutnya. Repositori ini akan terus digunakan dan berkembang seiring tutorial yang kamu ikuti.Selamat! Kamu sudah menyelesaikan tutorial tentang penggunaan Git, GitHub, instalasi IDE, dan pengembangan proyek dengan Django.
Pesan tambahan, pastikan kamu memahami setiap kode yang kamu tulis, ya. Jangan sampai hanya asal copy-paste tanpa memahaminya terlebih dahulu. Apabila nanti kamu mengalami kesulitan, jangan ragu untuk bertanya ke asisten dosen ataupun teman. Semangat terus dalam menjalani perkuliahan PBP selama satu semester ke depan, dan jangan lupa untuk menikmati setiap prosesnya. Good luck!
"},{"location":"tutorial/tutorial-0/#referensi-tambahan","title":"Referensi Tambahan","text":"Tutorial ini dikembangkan berdasarkan PBP Ganjil 2024 yang ditulis oleh Tim Pengajar Pemrograman Berbasis Platform 2024. Segala tutorial serta instruksi yang dicantumkan pada repositori ini dirancang sedemikian rupa sehingga mahasiswa yang sedang mengambil mata kuliah Pemrograman Berbasis Platform dapat menyelesaikan tutorial saat sesi lab berlangsung.
"},{"location":"tutorial/tutorial-1/","title":"Tutorial 1: Pengenalan Aplikasi Django dan Model-View-Template (MVT) pada Django","text":"Pemrograman Berbasis Platform (CSGE602022) \u2014 diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Genap 2023/2024
"},{"location":"tutorial/tutorial-1/#tujuan-pembelajaran","title":"Tujuan Pembelajaran","text":"Setelah menyelesaikan tutorial ini, mahasiswa diharapkan untuk dapat:
urls.pyUntuk membantumu mengerjakan tutorial 1 dengan baik, kami mengharapkan hasil pengerjaan tutorial 0 sebagai berikut.
book-tracker yang telah diinisiasi sebagai repositori lokal.Pada direktori utama book-tracker tersebut, terdapat beberapa berkas dan subdirektori berikut.
Subdirektori env.
Subdirektori proyek book_tracker. Berbeda dengan direktori utama, subdirektori ini terbentuk setelah menjalankan perintah
django-admin startproject book_tracker .\nBerkas .gitignore.
manage.py.requirements.txt.db.sqlite3.Struktur proyek book-tracker pada direktori lokal adalah sebagai berikut.
Pada repositori GitHub, pastikan repositori book-tracker memiliki berkas dan direktori berikut.
Direktori proyek book_tracker. Direktori ini hasil menjalankan perintah
django-admin startproject book_tracker .\nBerkas .gitignore.
manage.py.requirements.txt.Struktur proyek book-tracker pada repositori GitHub adalah sebagai berikut.
Dalam dunia pengembangan web, terdapat berbagai konsep dan arsitektur yang membantu dalam merancang dan mengembangkan aplikasi. Salah satu konsep yang umum digunakan adalah MVT (Model-View-Template).
"},{"location":"tutorial/tutorial-1/#apa-itu-konsep-mvt","title":"Apa Itu Konsep MVT?","text":"MVT adalah singkatan dari Model-View-Template. MVT adalah sebuah konsep arsitektur yang digunakan dalam pengembangan web untuk memisahkan komponen-komponen utama dari sebuah aplikasi. Konsep ini memungkinkan pengembang web untuk mengorganisasi dan mengelola kode dengan lebih terstruktur.
"},{"location":"tutorial/tutorial-1/#apa-itu-model","title":"Apa Itu Model?","text":"Model merupakan komponen dalam konsep MVT yang bertanggung jawab untuk mengatur dan mengelola data dari aplikasi. Model mewakili struktur data dan logika aplikasi yang berada di belakang tampilan. Model menghubungkan aplikasi dengan basis data dan mengatur interaksi dengan data tersebut.
"},{"location":"tutorial/tutorial-1/#apa-itu-view","title":"Apa Itu View?","text":"View merupakan komponen yang menangani logika presentasi dalam konsep MVT. View mengontrol bagaimana data yang dikelola oleh model akan ditampilkan kepada pengguna. Dalam konteks MVT, view berperan sebagai pengatur tampilan dan mengambil data dari model untuk disajikan kepada pengguna.
"},{"location":"tutorial/tutorial-1/#apa-itu-template","title":"Apa Itu Template?","text":"Template adalah komponen yang berfungsi untuk mengatur tampilan atau antarmuka pengguna. Template memisahkan kode HTML dari logika aplikasi. Dalam MVT, template digunakan untuk merancang tampilan yang akhirnya akan diisi dengan data dari model melalui view.
"},{"location":"tutorial/tutorial-1/#hubungan-antara-komponen-komponen-mvt","title":"Hubungan Antara Komponen-komponen MVT","text":"Secara ringkas, konsep MVT berjalan dalam kerangka berikut:
MVT memisahkan tugas antara logika aplikasi, tampilan, dan data, sehingga memungkinkan pengembang untuk bekerja pada setiap komponen secara terpisah.
Dengan pemisahan tugas yang jelas, kode menjadi lebih terorganisir dan mudah dikelola.
Kode dapat digunakan kembali dalam berbagai bagian aplikasi yang berbeda.
Struktur MVT mendukung skalabilitas dengan memungkinkan pengembangan paralel pada setiap komponen.
Catatan:
Dalam tutorial ini, akan dijelaskan mengenai konsep aplikasi dan proyek dalam Django.
Apa Itu Proyek dan Aplikasi dalam Django?
Proyek (Project) adalah keseluruhan proyek web yang kamu bangun dengan menggunakan Django. Proyek berisi berbagai aplikasi yang berfungsi secara bersama untuk menciptakan situs web atau aplikasi web yang lengkap.
Aplikasi (Apps) adalah unit modular yang melakukan tugas-tugas spesifik dalam suatu proyek Django. Setiap aplikasi dapat memiliki model, tampilan, template, dan URL yang terkait dengannya. Aplikasi memungkinkanmu untuk membagi fungsionalitas proyek menjadi bagian-bagian terpisah yang dapat dikelola secara independen.
Sebelum dimulai, kamu perlu mengingat kembali bahwa direktori utama adalah direktori terluar, sedangkan direktori proyek adalah direktori di dalam direktori utama. Perlu diingat bahwa keduanya memiliki nama yang hampir sama. Direktori utama memiliki nama book-tracker, sementara itu direktori proyek memiliki nama book_tracker. Perbedaan hanya terletak pada penggunaan dash (-) dan underscore (_).
Buka direktori utama book-tracker.
Sebelum memulai, pastikan kamu berada di direktori utama book-tracker yang telah dibuat pada tutorial sebelumnya.
Di dalam direktori ini, kamu akan melanjutkan pengembangan proyek Django.
Buka terminal atau command prompt dan pastikan direktori kerja kamu adalah direktori utama book-tracker.
Aktifkan virtual environment yang telah dibuat sebelumnya. Jalankan perintah berikut sesuai dengan sistem operasi perangkat kamu.
Windows:
env\\Scripts\\activate.bat\nUnix (Linux & Mac OS):
source env/bin/activate\nmain dalam Proyek Book Tracker","text":"Kamu akan membuat aplikasi baru bernama main dalam proyek book tracker.
python manage.py startapp main\nSetelah perintah di atas dijalankan, akan terbentuk direktori baru dengan nama main yang akan berisi struktur awal untuk aplikasimu.
Mungkin kamu cukup bingung dengan istilah direktori utama, direktori proyek, atau direktori aplikasi. Akan tetapi, seiring berjalannya waktu, kamu pasti bisa!
Daftarkan aplikasi main ke dalam proyek.
Buka berkas settings.py di dalam direktori proyek book_tracker.
INSTALLED_APPS.Tambahkan 'main' ke dalam daftar aplikasi yang ada.
INSTALLED_APPS = [\n ...,\n 'main',\n ...\n]\nDengan melakukan langkah-langkah tersebut, kamu telah mendaftarkan aplikasi main ke dalam proyek book tracker kamu sehingga proyekmu sudah mengenali bahwa terdapat aplikasi main yang dapat dijalankan.
Kamu akan membuat template main.html di dalam direktori baru bernama templates pada aplikasi main. Template ini akan digunakan untuk menampilkan data book tracker kamu.
Saat ini, aplikasi book tracker belum menampilkan data apapun. Data akan ditampilkan pada tutorial selanjutnya.
"},{"location":"tutorial/tutorial-1/#langkah-1-membuat-dan-mengisi-berkas-mainhtml","title":"Langkah 1: Membuat dan Mengisi Berkasmain.html","text":"Sebelum mulai, mari pahami secara singkat mengenai HTML. HTML (Hypertext Markup Language) adalah penanda bahasa yang digunakan untuk membuat struktur dan tampilan konten pada halaman web.
Hint: Kamu akan mempelajari HTML lebih lanjut di tutorial 4.
Buat direktori baru bernama templates di dalam direktori aplikasi main.
Di dalam direktori templates, buat berkas baru bernama main.html dengan isi sebagai berikut. Gantilah nilai yang sesuai dengan data kamu.
<h1>Book Tracker Page</h1>\n\n<h5>Name:</h5>\n<p>Pak Bepe</p>\n<!-- Ubahlah sesuai dengan nama kamu -->\n<h5>Class:</h5>\n<p>PBP A</p>\n<!-- Ubahlah sesuai dengan kelas kamu -->\nBuka berkas HTML di web browser.
Sebelum dihubungkan dengan aplikasi, cobalah membuka berkas main.html di web browser-mu.
Berikut merupakan contoh tampilan HTML yang diharapkan.
models.py dalam Aplikasi main","text":"Pada langkah ini, kamu akan mengubah berkas models.py yang terdapat di dalam direktori aplikasi main untuk mendefinisikan model baru.
Buka berkas models.py pada direktori aplikasi main.
Isi berkas models.py dengan kode berikut.
from django.db import models\n\nclass Book(models.Model):\n name = models.CharField(max_length=255)\n date_added = models.DateField(auto_now_add=True)\n page = models.IntegerField()\n description = models.TextField()\nPenjelasan Kode:
models.Model adalah kelas dasar yang digunakan untuk mendefinisikan model dalam Django.Book adalah nama model yang kamu definisikan.name (nama), date_added (tanggal tambah), page (halaman), dan description (deskripsi) adalah atribut atau field pada model. Setiap field memiliki tipe data yang sesuai seperti CharField, DateField, IntegerField, dan TextField.Apa itu migrasi model?
Bagaimana cara melakukan migrasi model?
python manage.py makemigrations\nmakemigrations menciptakan berkas migrasi yang berisi perubahan model yang belum diaplikasikan ke dalam basis data.
python manage.py migrate\nmigrate mengaplikasikan perubahan model yang tercantum dalam berkas migrasi ke basis data.
Setiap kali kamu melakukan perubahan pada model, seperti menambahkan atau mengubah atribut, kamu perlu melakukan migrasi untuk merefleksikan perubahan tersebut.
"},{"location":"tutorial/tutorial-1/#tutorial-menghubungkan-view-dengan-template","title":"Tutorial: Menghubungkan View dengan Template","text":"Dalam tutorial ini, kamu akan menghubungkan view dengan template menggunakan Django. Langkah-langkah ini akan menjelaskan bagaimana membuat fungsi view show_main dalam aplikasi main dan me-render template dengan data yang telah diambil dari model.
Kamu akan mengimpor modul yang diperlukan dan membuat fungsi view show_main.
Buka berkas views.py yang terletak di dalam berkas aplikasi main.
Tambahkan baris-baris impor berikut di bagian paling atas berkas apabila belum ada.
from django.shortcuts import render\nPenjelasan Kode:
from django.shortcuts import render berguna untuk mengimpor fungsi render dari modul django.shortcuts. Fungsi render digunakan untuk me-render tampilan HTML dengan menggunakan data yang diberikan.
show_main di bawah impor:def show_main(request):\n context = {\n 'name': 'Pak Bepe',\n 'class': 'PBP A'\n }\n\n return render(request, \"main.html\", context)\nPenjelasan Kode:
def show_main(request) merupakan deklarasi fungsi show_main, yang menerima parameter request. Fungsi ini akan mengatur permintaan HTTP dan mengembalikan tampilan yang sesuai.context adalah dictionary yang berisi data yang akan dikirimkan ke tampilan. Pada konteks ini, dua data disertakan, yaitu:
name: Data nama.class: Data kelas.return render(request, \"main.html\", context) berguna untuk me-render tampilan main.html dengan menggunakan fungsi render. Fungsi render mengambil tiga argumen:
request: Ini adalah objek permintaan HTTP yang dikirim oleh pengguna.main.html: Ini adalah nama berkas template yang akan digunakan untuk me-render tampilan.context: Ini adalah dictionary yang berisi data yang akan diteruskan ke tampilan untuk digunakan dalam penampilan dinamis.Sekarang, kamu akan mengubah template main.html agar dapat menampilkan data yang telah diambil dari model.
Buka berkas main.html yang telah dibuat sebelumnya dalam direktori templates pada direktori main.
Ubah nama dan kelas yang sebelumnya dibuat secara statis menjadi kode Django yang sesuai untuk menampilkan data.
...\n<h5>Name:</h5>\n<p>{{ name }}</p>\n<p></p>\n<h5>Class:</h5>\n<p>{{ class }}</p>\nPenjelasan Kode:
Sintaks Django {{ name }} dan {{ class }} digunakan untuk menampilkan nilai dari variabel yang telah didefinisikan dalam context.
Kamu akan mengatur routing URL agar aplikasi main dapat diakses melalui web browser.
main","text":"urls.py di dalam direktori main.urls.py dengan kode berikut.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]\nPenjelasan Kode dalam urls.py pada Aplikasi main:
urls.py pada aplikasi main bertanggung jawab untuk mengatur rute URL yang terkait dengan aplikasi main.path dari django.urls untuk mendefinisikan pola URL.show_main dari modul main.views sebagai tampilan yang akan ditampilkan ketika URL terkait diakses.app_name diberikan untuk memberikan nama unik pada pola URL dalam aplikasi.Kamu akan menambahkan rute URL dalam urls.py pada proyek untuk menghubungkannya ke tampilan main.
urls.py di dalam direktori proyek book_tracker, bukan yang ada di dalam direktori aplikasi main.include dari django.urls....\nfrom django.urls import path, include\n...\nmain di dalam variabel urlpatterns.urlpatterns = [\n ...\n path('', include('main.urls')),\n ...\n]\nPenjelasan:
urls.py pada proyek bertanggung jawab untuk mengatur rute URL dalam skala proyek.include digunakan untuk mengimpor rute URL dari aplikasi lain (dalam hal ini, dari aplikasi main) ke dalam berkas urls.py proyek.'' akan diarahkan ke rute yang didefinisikan dalam berkas urls.py aplikasi main. Path URL dibiarkan berupa string kosong agar halaman aplikasi main dapat diakses secara langsung.Sebagai bayangan, apabila kamu menggunakan path 'main/' pada contoh di atas, maka kamu perlu mengakses halaman http://localhost:8000/main/ untuk mengakses halaman aplikasi main. Karena path yang ditentukan adalah '', maka kamu dapat mengakses aplikasi main melalui URL http://localhost:8000/ saja.
Jalankan proyek Django dengan menjalankan perintah python manage.py runserver pada terminal atau command prompt di direktori utama.
Bukalah http://localhost:8000/ di web browser favoritmu untuk melihat halaman yang sudah kamu buat.
Dengan langkah-langkah di atas, kamu telah berhasil mengimplementasikan tampilan dasar dalam aplikasi main dan menghubungkannya dengan rute URL proyek. Pastikan kamu memahami setiap langkah dan informasi yang diberikan untuk mengaktifkan tampilan dalam proyek Django-mu
urls.py pada aplikasi dan urls.py pada proyek?","text":"urls.py pada aplikasi mengatur rute URL spesifik untuk fitur-fitur dalam aplikasi tersebuturls.py pada proyek mengarahkan rute URL tingkat proyek dan dapat mengimpor rute URL dari berkas urls.py aplikasi-aplikasi, memungkinkan aplikasi dalam proyek Django untuk bersifat modular dan terpisah.Unit testing dapat digunakan untuk mengecek apakah kode yang dibuat bekerja sesuai dengan keinginan. Hal ini juga berguna ketika kamu melakukan perubahan kode. Dengan menggunakan tes, kamu bisa mengecek apakah perubahan yang dilakukan dapat menyebabkan perilaku yang tidak diinginkan pada aplikasi.
"},{"location":"tutorial/tutorial-1/#langkah-1-membuat-unit-test","title":"Langkah 1: Membuat Unit Test","text":"tests.py pada direktori aplikasi main.tests.py dengan kode berikut.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')\nPenjelasan:
test_main_url_is_exist adalah tes untuk mengecek apakah path URL '' dapat diakses. Path '' artinya hanya http://localhost:8000/ tanpa path tambahan di bagian belakang URL.test_main_using_main_template adalah tes untuk mengecek apakah halaman '' di-render menggunakan template main.html.python manage.py test\nFound 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'...\nSelamat! Kamu telah berhasil menulis Django Test dan menjalankannya.
"},{"location":"tutorial/tutorial-1/#penutup","title":"Penutup","text":"Huruf U menandakan bahwa terdapat berkas baru yang belum dilacak oleh Git. Huruf M menandakan bahwa terdapat berkas yang telah dilacak sebelumnya yang dimodifikasi.
add, commit dan push untuk memperbarui repositori GitHub.add, commit dan push.git add .\ngit commit -m \"<pesan_commit>\"\ngit push origin <branch_utama>\n<pesan_commit> sesuai dengan keinginan. Contoh: git commit -m \"tutorial 1 selesai\".Ubah <branch_utama> sesuai dengan nama branch utamamu. Contoh: git push origin main atau git push origin master.
Berikut struktur direktori GitHub setelah kamu menyelesaikan tutorial ini.
Tutorial ini dikembangkan berdasarkan PBP Ganjil 2024 yang ditulis oleh Tim Pengajar Pemrograman Berbasis Platform 2023/2024. Segala tutorial serta instruksi yang dicantumkan pada repositori ini dirancang sedemikian rupa sehingga mahasiswa yang sedang mengambil mata kuliah Pemrograman Berbasis Platform dapat menyelesaikan tutorial saat sesi lab berlangsung.
"},{"location":"tutorial/tutorial-2/","title":"Tutorial 2: Form dan Data Delivery","text":"Pemrograman Berbasis Platform (CSGE602022) \u2014 diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Genap 2023/2024
"},{"location":"tutorial/tutorial-2/#tujuan-pembelajaran","title":"Tujuan Pembelajaran\u200b","text":"Setelah menyelesaikan tutorial ini, mahasiswa diharapkan untuk dapat:
XML dan JSON sebagai salah satu metode data deliveryformXML dan JSONIDDalam 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.
"},{"location":"tutorial/tutorial-2/#xml-extensible-markup-language","title":"XML (Extensible Markup Language)","text":"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.
Contoh Format XML:
<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<person>\n <name>Alice Johnson</name>\n <age>25</age>\n <address>\n <street>123 Main St</street>\n <city>Los Angeles</city>\n <zip>90001</zip>\n </address>\n</person>\nXML di atas sangatlah self-descriptive:
name)age)address)street)city)zip)Dokumen XML membentuk struktur seperti tree yang dimulai dari root, lalu branch, hingga berakhir pada leaves. Dokumen XML harus mengandung sebuah root element yang merupakan parent dari elemen lainnya. Pada contoh di atas, <person> adalah root element.
Baris <?xml version=\"1.0\" encoding=\"UTF-8\"?> biasanya disebut sebagai XML Prolog. XML Prolog bersifat opsional, akan tetapi jika ada maka posisinya harus berada di awal dokumen XML. Pada dokumen XML, semua elemen wajib memiliki closing tag. Tag pada XML sifatnya case sensitive, sehingga tag <person> dianggap berbeda dengan tag <Person>.
JSON adalah singkatan dari JavaScript Object Notation. JSON didesain menjadi self-describing, sehingga JSON sangat mudah untuk dimengerti. JSON digunakan pada banyak aplikasi web maupun mobile, yaitu untuk menyimpan dan mengirimkan data. Sintaks JSON merupakan turunan dari Object JavaScript. Akan tetapi format JSON berbentuk text, sehingga kode untuk membaca dan membuat JSON banyak terdapat dibanyak bahasa pemrograman.
Contoh format JSON:
{\n \"name\": \"Alice Johnson\",\n \"age\": 25,\n \"address\": {\n \"street\": \"123 Main St\",\n \"city\": \"Los Angeles\",\n \"zip\": \"90001\"\n }\n}\nData pada JSON disimpan dalam bentuk key dan value. Pada contoh di atas yang menjadi key adalah name, age, dan address. Value dapat berupa tipe data primitif (string, number, boolean) ataupun berupa objek.
Sebelum kamu memulai, serta untuk membantumu mengikuti tutorial 2 dengan baik, kami mengharapkan beberapa hasil berikut dari tutorial 1:
book-tracker secara lokal adalah sebagai berikut.book-tracker pada GitHub adalah sebagai berikut.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.
templates pada root folder (direktori utama) dan buatlah sebuah berkas HTML baru bernama base.html. Berkas base.html berfungsi sebagai template dasar yang dapat digunakan sebagai kerangka umum untuk halaman web lainnya di dalam proyek. Isilah berkas base.html tersebut dengan kode berikut:{% load static %}\n<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n {% block meta %} {% endblock meta %}\n </head>\n\n <body>\n {% block content %} {% endblock content %}\n </body>\n</html>\nBaris-baris yang dikurung dalam {% ... %} disebut dengan template tags Django. Baris-baris inilah yang akan berfungsi untuk memuat data secara dinamis dari Django ke HTML.
settings.py yang ada pada direktori proyek (book_tracker) dan carilah baris yang mengandung variabel TEMPLATES. Sesuaikan kode yang ada dengan potongan kode berikut agar berkas base.html terdeteksi sebagai berkas template....\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...\ntemplates yang ada pada direktori main (main/templates/), ubahlah kode berkas main.html yang telah dibuat di tutorial sebelumnya menjadi sebagai berikut.{% extends 'base.html' %} {% block content %}\n<h1>Book Tracker Page</h1>\n\n<h5>Name:</h5>\n<p>{{name}}</p>\n\n<h5>Class:</h5>\n<p>{{class}}</p>\n{% endblock content %}\nPerhatikan bahwa kode diatas merupakan kode yang sama dengan kode pada main.html pada tutorial sebelumnya. Perbedaannya adalah pada kode diatas, kita menggunakan base.html sebagai template utama.
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.
main dengan nama forms.py untuk membuat struktur form yang dapat menerima data buku baru. Tambahkan kode berikut ke dalam berkas forms.py.from django.forms import ModelForm\nfrom main.models import Book\n\nclass BookForm(ModelForm):\n class Meta:\n model = Book\n fields = [\"name\", \"page\", \"description\"]\nPenjelasan Kode:
model = Book untuk menunjukkan model yang akan digunakan untuk form. Ketika data dari form disimpan, isi dari form akan disimpan menjadi sebuah objek Book.fields = [\"name\", \"page\", \"description\"] untuk menunjukkan field dari model Book yang digunakan untuk form. Field date_added tidak dimasukkan ke list fields karena tanggal ditambahkan secara otomatis.
Buka berkas views.py yang ada pada folder main dan tambahkan beberapa import berikut pada bagian paling atas.
from django.shortcuts import render, redirect # Tambahkan import redirect di baris ini\nfrom main.forms import BookForm\nfrom main.models import Book\ncreate_book yang menerima parameter request. Tambahkan potongan kode di bawah ini untuk menghasilkan formulir yang dapat menambahkan data buku secara otomatis ketika data di-submit dari form.def create_book(request):\n form = BookForm(request.POST or None)\n\n if form.is_valid() and request.method == \"POST\":\n form.save()\n return redirect('main:show_main')\n\n context = {'form': form}\n return render(request, \"create_book.html\", context)\nPenjelasan Kode:
form = BookForm(request.POST or None) digunakan untuk membuat BookForm baru dengan memasukkan QueryDict berdasarkan input dari user pada request.POST.form.is_valid() digunakan untuk memvalidasi isi input dari form tersebut.form.save() digunakan untuk membuat dan menyimpan data dari form tersebut.return redirect('main:show_main') digunakan untuk melakukan redirect ke fungsi show_main pada views aplikasi main setelah data form berhasil disimpan.
Ubahlah fungsi show_main yang sudah ada pada berkas views.py menjadi seperti berikut.
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)\nPenjelasan Kode:
Fungsi Book.objects.all() digunakan untuk mengambil seluruh objek Book yang tersimpan pada database.
urls.py yang ada pada direktori main dan import fungsi create_book yang sudah kamu buat tadi.from main.views import show_main, create_book\nurlpatterns pada urls.py di main untuk mengakses fungsi yang sudah di-import pada poin sebelumnya.urlpatterns = [\n ...\n path('create-book', create_book, name='create_book'),\n]\ncreate_book.html pada direktori main/templates. Isi create_book.html dengan kode berikut.{% extends 'base.html' %} {% block content %}\n<h1>Add New Book</h1>\n\n<form method=\"POST\">\n {% csrf_token %}\n <table>\n {{ form.as_table }}\n <tr>\n <td></td>\n <td>\n <input type=\"submit\" value=\"Add Book\" />\n </td>\n </tr>\n </table>\n</form>\n\n{% endblock %}\nPenjelasan Kode:
<form method=\"POST\"> digunakan untuk menandakan block untuk form dengan metode POST.{% csrf_token %} adalah token yang berfungsi sebagai security. Token ini di-generate secara otomatis oleh Django untuk mencegah serangan berbahaya.{{ form.as_table }} adalah template tag yang digunakan untuk menampilkan fields form yang sudah dibuat pada forms.py sebagai table.<input type=\"submit\" value=\"Add Book\"/> digunakan sebagai tombol submit untuk mengirimkan request ke view create_book(request).
Buka main.html dan tambahkan kode berikut di dalam {% block content %} untuk menampilkan data produk dalam bentuk table serta tombol \"Add New Book\" yang akan redirect ke halaman form.
...\n<table>\n <tr>\n <th>Name</th>\n <th>Page</th>\n <th>Description</th>\n <th>Date Added</th>\n </tr>\n\n {% comment %} Berikut cara memperlihatkan data produk di bawah baris ini\n {%endcomment %} {% for book in books %}\n <tr>\n <td>{{book.name}}</td>\n <td>{{book.page}}</td>\n <td>{{book.description}}</td>\n <td>{{book.date_added}}</td>\n </tr>\n {% endfor %}\n</table>\n\n<br />\n\n<a href=\"{% url 'main:create_book' %}\">\n <button>Add New Book</button>\n</a>\n{% endblock content %}\npython manage.py runserver dan bukalah http://localhost:8000/ di browser favoritmu. Coba tambahkan beberapa data produk baru dan seharusnya kamu dapat melihat data yang ditambahkan pada halaman utama aplikasi.views.py yang ada pada folder main dan tambahkan import HttpResponse dan Serializer pada bagian paling atas.from django.http import HttpResponse\nfrom django.core import serializers\nshow_xml dan buatlah sebuah variabel di dalam fungsi tersebut yang menyimpan hasil query dari seluruh data yang ada pada Book.def show_xml(request):\n data = Book.objects.all()\nHttpResponse yang berisi parameter data hasil query yang sudah diserialisasi menjadi XML dan parameter content_type=\"application/xml\".def show_xml(request):\n data = Book.objects.all()\n return HttpResponse(serializers.serialize(\"xml\", data), content_type=\"application/xml\")\nPenjelasan Kode:
serializers digunakan untuk translate objek model menjadi format lain seperti dalam fungsi ini adalah XML.
urls.py yang ada pada folder main dan import fungsi yang sudah kamu buat tadi.from main.views import show_main, create_book, show_xml\nurlpatterns untuk mengakses fungsi yang sudah diimpor tadi....\npath('xml/', show_xml, name='show_xml'),\n...\npython manage.py runserver dan bukalah http://localhost:8000/xml/ di browser favoritmu untuk melihat hasilnya.views.py yang ada pada folder main dan buatlah sebuah fungsi baru yang menerima parameter request dengan nama show_json dengan sebuah variabel di dalamnya yang menyimpan hasil query dari seluruh data yang ada pada Book.def show_json(request):\n data = Book.objects.all()\nHttpResponse yang berisi parameter data hasil query yang sudah diserialisasi menjadi JSON dan parameter content_type=\"application/json\".def show_json(request):\n data = Book.objects.all()\n return HttpResponse(serializers.serialize(\"json\", data), content_type=\"application/json\")\nurls.py yang ada pada folder main dan import fungsi yang sudah kamu buat tadi.from main.views import show_main, create_book, show_xml, show_json\nurlpatterns untuk mengakses fungsi yang sudah diimpor tadi....\npath('json/', show_json, name='show_json'),\n...\npython manage.py runserver dan bukalah http://localhost:8000/json/ (sesuaikan dengan path url yang dibuat) di browser favoritmu untuk melihat hasilnya.Buka views.py yang ada pada folder main dan buatlah dua fungsi baru yang menerima parameter _request_ dan id dengan nama show_xml_by_id dan show_json_by_id.
Buatlah sebuah variabel di dalam fungsi tersebut yang menyimpan hasil query dari data dengan id tertentu yang ada pada Book.
data = Book.objects.filter(pk=id)\nTambahkan return function berupa HttpResponse yang berisi parameter data hasil query yang sudah diserialisasi menjadi JSON atau XML dan parameter content_type dengan value \"application/xml\" (untuk format XML) atau \"application/json\" (untuk format JSON).
XML
def show_xml_by_id(request, id):\n data = Book.objects.filter(pk=id)\n return HttpResponse(serializers.serialize(\"xml\", data), content_type=\"application/xml\")\nJSON
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\")\nBuka urls.py yang ada pada folder main dan import fungsi yang sudah kamu buat tadi.
from main.views import show_main, create_book, show_xml, show_json, show_xml_by_id, show_json_by_id\nurlpatterns untuk mengakses fungsi yang sudah diimpor tadi....\npath('xml/<int:id>/', show_xml_by_id, name='show_xml_by_id'),\npath('json/<int:id>/', show_json_by_id, name='show_json_by_id'),\n...\npython manage.py runserver dan bukalah http://localhost:8000/xml/[id]/ atau http://localhost:8000/json/[id]/ di browser favoritmu untuk melihat hasilnya.Catatan: Sesuaikan [id] pada URL di atas dengan id objek yang ingin dilihat.
Pastikan server kamu sudah berjalan dengan perintah python manage.py runserver.
Buka Postman dan buatlah sebuah request baru dengan method GET dan url http://localhost:8000/xml/ atau http://localhost:8000/json/ untuk mengetes apakah data terkirimkan dengan baik.
Panduan Instalasi Postman dapat dilihat pada Laman Resmi Postman.
Contoh:
Klik tombol Send untuk mengirimkan request tersebut.
Kamu akan melihat hasil response dari request tersebut pada bagian bawah Postman.
Sebelum melakukan langkah ini, pastikan struktur direktori lokal sudah benar. Selanjutnya, lakukan add, commit dan push untuk memperbarui repositori GitHub.
Jalankan perintah berikut untuk melakukan add, commit dan push.
git add .\ngit commit -m \"<pesan_commit>\"\ngit push -u origin <branch_utama>\n<pesan_commit> sesuai dengan keinginan. Contoh: git commit -m \"tutorial 2 selesai\".<branch_utama> sesuai dengan nama branch utamamu. Contoh: git push -u origin main atau git push -u origin master.Tutorial ini dikembangkan berdasarkan PBP Ganjil 2024 yang ditulis oleh Tim Pengajar Pemrograman Berbasis Platform 2024. Segala tutorial serta instruksi yang dicantumkan pada repositori ini dirancang sedemikian rupa sehingga mahasiswa yang sedang mengambil mata kuliah Pemrograman Berbasis Platform dapat menyelesaikan tutorial saat sesi lab berlangsung.
"},{"location":"tutorial/tutorial-3/","title":"Tutorial 3: Autentikasi, Session, dan Cookies","text":"Pemrograman Berbasis Platform (CSGE602022) \u2014 diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Genap 2023/2024
"},{"location":"tutorial/tutorial-3/#tujuan-pembelajaran","title":"Tujuan Pembelajaran","text":"Setelah menyelesaikan tutorial ini, kamu diharapkan untuk dapat:
HTTP (HyperText Transfer Protocol) adalah protokol yang digunakan untuk berkomunikasi antara client dan server. HTTP bersifat stateless yang berarti setiap transaksi/aktivitas yang dilakukan dianggap sebagai transaksi/aktivitas yang benar-benar baru, sehingga tidak ada data sebelumnya yang disimpan untuk transaksi/aktivitas saat ini.
Beberapa konsep dasar mengenai HTTP:
Client/Server: Interaksi dilakukan antar client/server. Klien adalah pihak yang melakukan request dan server adalah pihak yang memberikan response.
Stateless: Setiap aktivitas (request/response) bersifat independen, tidak tersimpan pada aktivitas terdahulu.
OSI Layer/Model: Model Open Systems Interconnection (OSI) menjelaskan 7 lapisan yang digunakan sistem komputer untuk berkomunikasi melalui jaringan. Model 7-layer OSI terdiri dari Application Layer, Presentation Layer, Session Layer, Transport Layer, Network Layer, Data Link Layer, dan Physical Layer.
Application Layer: Pada OSI Model yang disinggung di atas, website berjalan pada application layer. Sedangkan, proses request/response terjadi pada transport Layer yang umumnya menggunakan protokol TCP yang menentukan bagaimana data akan dikirim. Application Layer tidak peduli apa yang dilakukan oleh transport Layer (bagaimana data dikirim, diolah, dsb) karena application layer hanya berfokus kepada request dan response.
Lapisan OSI lainnya akan diajarkan pada mata kuliah Jaringan Komputer/Jaringan Komunikasi Data. Kamu dapat mencarinya sendiri jika kamu penasaran. \ud83d\ude09
Client Actions Method: Terdapat metode-metode yang digunakan oleh client saat melakukan request. Contoh: GET, POST, PUT, DELETE, dll. Penjelasan lebih detail dapat dibaca di sini.
Server Status Code: Merupakan status kode yang diberikan oleh server terhadap suatu request pada sebuah halaman web. Contoh: 200 (OK), 404 (Page Not Found), 500 (Internal Server Error), dsb. Penjelasan lebih detail dapat dibaca di sini.
Headers: Merupakan informasi kecil yang dikirim bersamaan dengan request dan response. Informasi-informasi tersebut berguna sebagai data tambahan yang digunakan untuk memproses request/response. Contoh: Pada headers, terdapat content-type:json. Artinya, tipe konten yang diminta/dikirim adalah json. Headers juga menyimpan data cookies.
Semua komunikasi antara klien dan server dilakukan melalui protokol HTTP, di mana HTTP merupakan stateless protocol. Artinya state yang satu dengan yang lain tidak berhubungan (independen). Hal ini mengharuskan komputer klien yang menjalankan browser untuk membuat koneksi TCP ke server setiap kali melakukan request.
Tanpa adanya koneksi persisten antara klien dan server, software pada setiap sisi (endpoint) tidak dapat bergantung hanya pada koneksi TCP untuk melakukan holding state atau holding session state.
"},{"location":"tutorial/tutorial-3/#apa-yang-dimaksud-dengan-holding-state","title":"Apa yang dimaksud dengan holding state?","text":"Sebagai contoh, kamu ingin mengakses suatu halaman A pada suatu web yang mensyaratkan pengaksesnya sudah login ke dalam web. Kemudian kamu login ke web tersebut dan berhasil membuka halaman A. Saat ingin pindah ke halaman B pada web yang sama, tanpa adanya suatu proses holding state maka kamu akan diminta untuk login kembali. Begitu yang akan terjadi setiap kali kamu mengakses halaman yang berbeda padahal masih pada web yang sama.
Proses memberitahu \"siapa\" yang sedang login dan menyimpan data ini dikenal sebagai bentuk dialog antara klien-server dan merupakan dasar session - a semi-permanent exchange of information. Merupakan hal yang sulit untuk membuat HTTP melakukan holding state (karena HTTP merupakan stateless protocol). Oleh karena itu, dibutuhkan teknik untuk mengatasi masalah tersebut, yaitu Cookie dan Session.
"},{"location":"tutorial/tutorial-3/#cara-melakukan-holding-state","title":"Cara melakukan holding state?","text":"Salah satu cara yang paling banyak digunakan untuk melakukan holding state adalah dengan menggunakan session ID yang disimpan sebagai cookie pada komputer klien. Session ID dapat dianggap sebagai suatu token (barisan karakter) untuk mengenali session yang unik pada aplikasi web tertentu. Daripada menyimpan semua jenis informasi sebagai cookies pada klien seperti username, nama, dan password, hanya Session ID yang disimpan.
Session ID ini kemudian dapat dipetakan ke suatu struktur data pada sisi web server. Pada struktur data tersebut, kamu dapat menyimpan semua informasi yang kamu butuhkan. Pendekatan ini jauh lebih aman untuk menyimpan informasi mengenai pengguna, daripada menyimpannya pada cookie. Dengan cara ini, informasi tidak dapat disalahgunakan oleh klien atau koneksi yang mencurigakan.
Selain itu, pendekatan ini lebih \"tepat\" jika data yang akan disimpan ada banyak. Hal itu karena cookie hanya dapat menyimpan maksimal 4 KB data. Bayangkan kamu sudah login ke suatu web/aplikasi dan mendapat session ID (session identifier). Untuk dapat melakukan holding state pada HTTP yang stateless, browser biasanya mengirimkan suatu session ID ke server pada setiap request. Dengan begitu, setiap kali datang suatu request, maka server akan bereaksi (kurang lebih) \"Oh, ini orang yang tepat!\". Kemudian server akan mencari informasi state di memori server atau di database berdasarkan session ID yang didapat, lalu mengembalikan data yang diminta.
Perbedaan penting yang perlu diingat adalah data cookie disimpan pada sisi klien, sedangkan data session biasanya disimpan pada sisi server. Untuk pembahasan lebih detail mengenai stateless, stateful, cookie, dan session dapat dibaca di sini.
Berikut tabel singkat yang menjelaskan perbedaan antara cookies, session, dan local storage secara singkat.
Cookies Local Storage Sessions Kapasitas 4 KB 5 MB 5 MB Teknologi Browser HTML4/HTML5 HTML5 HTML5 Aksesibilitas Semua window Semua window Tab yang sama Kedaluwarsa Diatur manual Selamanya Saat tab ditutupBeberapa tautan video yang dapat memperkaya pengetahuan terkait materi ini:
Sebelum kamu memulai, serta untuk membantumu mengikuti tutorial 3 dengan baik, kami mengharapkan beberapa hasil berikut dari tutorial 2:
book-tracker secara lokal adalah sebagai berikut.book-tracker pada GitHub adalah sebagai berikut.Pada tutorial sebelumnya, kita sudah mencoba membuat sebuah form untuk menambahkan suatu buku. Bagaimana? Mudah kan? Pada tutorial ini kita akan membuat halaman utama (main) menjadi restricted dengan cara membuat akun untuk pengguna. Sehingga, pengguna yang ingin mengakses halaman utama main harus melakukan login terlebih dahulu agar mendapatkan akses.
Aktifkan virtual environment terlebih dahulu pada terminal. (Hint: Ingat tutorial 0!)
Buka views.py yang ada pada subdirektori main pada proyek kamu. Tambahkan import redirect, UserCreationForm, dan messages pada bagian paling atas.
from django.shortcuts import redirect\nfrom django.contrib.auth.forms import UserCreationForm\nfrom django.contrib import messages\nPenjelasan Kode:
UserCreationForm adalah impor formulir bawaan yang memudahkan pembuatan formulir pendaftaran pengguna dalam aplikasi web. Dengan formulir ini, pengguna baru dapat mendaftar dengan mudah di situs web Anda tanpa harus menulis kode dari awal.
register di bawah ini ke dalam views.py. Fungsi ini berfungsi untuk menghasilkan formulir registrasi secara otomatis dan menghasilkan akun pengguna ketika data di-submit dari form.def register(request):\n form = UserCreationForm()\n\n if request.method == \"POST\":\n form = UserCreationForm(request.POST)\n if form.is_valid():\n form.save()\n messages.success(request, 'Your account has been successfully created!')\n return redirect('main:login')\n context = {'form':form}\n return render(request, 'register.html', context)\nPenjelasan Kode:
form = UserCreationForm(request.POST) digunakan untuk membuat UserCreationForm baru dari yang sudah di-impor sebelumnya dengan memasukkan QueryDict berdasarkan input dari user pada request.POST.form.is_valid() digunakan untuk memvalidasi isi input dari form tersebut.form.save() digunakan untuk membuat dan menyimpan data dari form tersebut.messages.success(request, 'Your account has been successfully created!') digunakan untuk menampilkan pesan kepada pengguna setelah melakukan suatu aksi.return redirect('main:show_main') digunakan untuk melakukan redirect setelah data form berhasil disimpan.
Buatlah berkas HTML baru dengan nama register.html pada direktori main/templates. Isi dari register.html dapat kamu isi dengan template berikut.
{% extends 'base.html' %} \n\n{% block meta %}\n<title>Register</title>\n{% endblock meta %} \n\n{% block content %}\n\n<div class=\"login\">\n <h1>Register</h1>\n\n <form method=\"POST\">\n {% csrf_token %}\n <table>\n {{ form.as_table }}\n <tr>\n <td></td>\n <td><input type=\"submit\" name=\"submit\" value=\"Daftar\" /></td>\n </tr>\n </table>\n </form>\n\n {% if messages %}\n <ul>\n {% for message in messages %}\n <li>{{ message }}</li>\n {% endfor %}\n </ul>\n {% endif %}\n</div>\n\n{% endblock content %}\nurls.py yang ada pada subdirektori main dan impor fungsi yang sudah kamu buat tadi.from main.views import register\nurlpatterns untuk mengakses fungsi yang sudah diimpor tadi. urlpatterns = [\n ...\n path('register/', register, name='register'),\n ]\nKita sudah menambahkan formulir registrasi akun dan membuat mekanisme register. Selanjutnya, kita akan membuat form login agar pengguna dapat melakukan autentikasi akun.
views.py yang ada pada subdirektori main. Tambahkan import authenticate dan login pada bagian paling atas.from django.contrib.auth import authenticate, login\nPenjelasan Kode:
Singkatnya, fungsi authenticate dan login yang diimport diatas adalah fungsi bawaan Django yang dapat digunakan untuk melakukan autentikasi dan login (jika autentikasi berhasil). Selengkapnya dapat dibaca di sini.
login_user di bawah ini ke dalam views.py. Fungsi ini berfungsi untuk mengautentikasi pengguna yang ingin login.def login_user(request):\n if request.method == 'POST':\n username = request.POST.get('username')\n password = request.POST.get('password')\n user = authenticate(request, username=username, password=password)\n if user is not None:\n login(request, user)\n return redirect('main:show_main')\n else:\n messages.info(request, 'Sorry, incorrect username or password. Please try again.')\n context = {}\n return render(request, 'login.html', context)\nPenjelasan Kode:
authenticate(request, username=username, password=password) digunakan untuk melakukan autentikasi pengguna berdasarkan username dan password yang diterima dari permintaan (request) yang dikirim oleh pengguna saat login.
login.html pada direktori main/templates. Isi dari login.html dapat kamu isi dengan template berikut.{% extends 'base.html' %}\n\n{% block meta %}\n<title>Login</title>\n{% endblock meta %} \n\n{% block content %}\n<div class=\"login\">\n <h1>Login</h1>\n\n <form method=\"POST\" action=\"\">\n {% csrf_token %}\n <table>\n <tr>\n <td>Username:</td>\n <td>\n <input\n type=\"text\"\n name=\"username\"\n placeholder=\"Username\"\n class=\"form-control\"\n />\n </td>\n </tr>\n\n <tr>\n <td>Password:</td>\n <td>\n <input\n type=\"password\"\n name=\"password\"\n placeholder=\"Password\"\n class=\"form-control\"\n />\n </td>\n </tr>\n\n <tr>\n <td></td>\n <td><input class=\"btn login_btn\" type=\"submit\" value=\"Login\" /></td>\n </tr>\n </table>\n </form>\n\n {% if messages %}\n <ul>\n {% for message in messages %}\n <li>{{ message }}</li>\n {% endfor %}\n </ul>\n {% endif %} Don't have an account yet?\n <a href=\"{% url 'main:register' %}\">Register Now</a>\n</div>\n\n{% endblock content %}\nurls.py yang ada pada subdirektori main dan import fungsi yang sudah kamu buat tadi.from main.views import login_user\nurlpatterns untuk mengakses fungsi yang sudah diimpor tadi.urlpatterns = [\n ...\n path('login/', login_user, name='login'),\n]\nKita sudah menambahkan form login akun dan membuat mekanisme login. Selanjutnya, kita akan membuat mekanisme logout dan menambahkan tombol logout pada halaman main.
views.py yang ada pada subdirektori main. Tambahkan import logout ini pada bagian paling atas.from django.contrib.auth import logout\nviews.py. Fungsi ini berfungsi untuk melakukan mekanisme logout.def logout_user(request):\n logout(request)\n return redirect('main:login')\nPenjelasan Kode:
logout(request) digunakan untuk menghapus sesi pengguna yang saat ini masuk.return redirect('main:login') mengarahkan pengguna ke halaman login dalam aplikasi Django.
Bukalah berkas main.html yang ada pada direktori main/templates.
Tambahkan potongan kode di bawah ini setelah hyperlink tag untuk Add New Book pada berkas main.html.
...\n<a href=\"{% url 'main:logout' %}\">\n <button>Logout</button>\n</a>\n...\nurls.py yang ada pada subdirektori main dan import fungsi yang sudah kamu buat tadi.from main.views import logout_user\nurlpatterns untuk mengakses fungsi yang sudah diimpor tadi.urlpatterns = [\n ...\n path('logout/', logout_user, name='logout'),\n]\nKita sudah membuat mekanisme logout dan menyelesaikan sistem autentikasi dalam proyek ini.
views.py yang ada pada subdirektori main dan tambahkan import login_required pada bagian paling atas.from django.contrib.auth.decorators import login_required\nPenjelasan Kode: Kode from django.contrib.auth.decorators import login_required digunakan untuk mengimpor sebuah decorator yang bisa mengharuskan pengguna masuk (login) terlebih dahulu sebelum dapat mengakses suatu halaman web.
@login_required(login_url='/login') di atas fungsi show_main agar halaman main hanya dapat diakses oleh pengguna yang sudah login (terautentikasi)....\n@login_required(login_url='/login')\ndef show_main(request):\n...\nSetelah melakukan restriksi akses halaman main, jalankan proyek Django-mu dengan perintah python manage.py runserver dan bukalah http://localhost:8000/ di browser favoritmu untuk melihat hasilnya. Seharusnya halaman yang muncul bukanlah daftar buku di halaman main, tetapi akan di-redirect ke halaman login.
Sekarang, kita akan melihat penggunaan cookies dengan menambahkan data last login dan menampilkannya ke halaman main.
Lakukan logout terlebih dahulu apabila kamu sedang menjalankan aplikasi Django-mu.
Buka kembali views.py yang ada pada subdirektori main. Tambahkan import HttpResponseRedirect, reverse, dan datetime pada bagian paling atas.
import datetime\nfrom django.http import HttpResponseRedirect\nfrom django.urls import reverse\nlogin_user, kita akan menambahkan fungsionalitas menambahkan cookie yang bernama last_login untuk melihat kapan terakhir kali pengguna melakukan login. Caranya adalah dengan mengganti kode yang ada pada blok if user is not None menjadi potongan kode berikut....\nif user is not None:\n login(request, user)\n response = HttpResponseRedirect(reverse(\"main:show_main\"))\n response.set_cookie('last_login', str(datetime.datetime.now()))\n return response\n...\nPenjelasan Kode:
login(request, user) berfungsi untuk melakukan login terlebih dahuluresponse = HttpResponseRedirect(reverse(\"main:show_main\")) untuk membuat responseresponse.set_cookie('last_login', str(datetime.datetime.now())) berfungsi untuk membuat cookie last_login dan menambahkannya ke dalam responsePerhatikan indentasi kode kamu, pastikan tidak terdapat dead code pada fungsi tersebut.
show_main, tambahkan potongan kode 'last_login': request.COOKIES['last_login'] ke dalam variabel context. Berikut adalah contoh kode yang sudah diubah.context = {\n 'name': 'Pak Bepe',\n 'class': 'PBP A',\n 'books': books,\n 'last_login': request.COOKIES['last_login'],\n}\nPenjelasan Kode:
'last_login': request.COOKIES['last_login'] berfungsi menambahkan informasi cookie last_login pada response yang akan ditampilkan di halaman web.
logout_user menjadi seperti potongan kode berikut.def logout_user(request):\n logout(request)\n response = HttpResponseRedirect(reverse('main:login'))\n response.delete_cookie('last_login')\n return response\nPenjelasan Kode:
response.delete_cookie('last_login') berfungsi untuk menghapus cookie last_login saat pengguna melakukan logout.
main.html dan tambahkan potongan kode berikut di setelah tombol logout untuk menampilkan data last login....\n<h5>Sesi terakhir login: {{ last_login }}</h5>\n...\nSilakan refresh halaman login (atau jalankan proyek Django-mu dengan perintah python manage.py runserver jika kamu belum menjalankan proyekmu) dan cobalah untuk login. Data last login kamu akan muncul di halaman main.
Jika kamu menggunakan browser Google Chrome, untuk melihat data cookie last_login, kamu dapat mengakses fitur inspect element dan membuka bagian Application/Storage. Klik bagian Cookies dan kamu dapat melihat data cookies yang tersedia. Selain last_login, kamu juga dapat melihat data sessionid dan csrftoken. Berikut adalah contoh tampilannya.
Sebelum melanjutkan ke tutorial berikutnya, cobalah untuk membuat satu akun pada halaman web kamu.
"},{"location":"tutorial/tutorial-3/#tutorial-menghubungkan-model-book-dengan-user","title":"Tutorial: Menghubungkan ModelBook dengan User","text":"Kamu perlu mengikuti tutorial secara berurut dari awal sebelum menjalankan bagian berikut. Jika kamu tidak mengikuti tutorial secara berurut, maka kami tidak bertanggung jawab atas error di luar pembahasan tutorial yang dapat muncul dari bagian tutorial berikut.
Terakhir, kita akan menghubungkan setiap objek Book yang akan dibuat dengan pengguna yang membuatnya, sehingga pengguna yang sedang terotorisasi hanya melihat buku-buku yang telah dibuat sendiri. Untuk itu, ikuti langkah-langkah berikut:
models.py yang ada pada subdirektori main dan tambahkan kode berikut pada dibawah baris kode untuk mengimpor model:...\nfrom django.contrib.auth.models import User\n...\nBook yang sudah dibuat, tambahkan potongan kode berikut:class Book(models.Model):\n user = models.ForeignKey(User, on_delete=models.CASCADE)\n ...\nPenjelasan Kode:
Potongan kode diatas berfungsi untuk menghubungkan satu buku dengan satu user melalui sebuah relationship, dimana sebuah buku pasti terasosiasikan dengan seorang user. Lebih lanjutnya terkait ForeignKey akan dipelajari pada mata kuliah Basis Data. Penjelasan lebih lanjut terkait ForeignKey pada Django dapat dilihat di sini.
views.py yang ada pada subdirektori main, dan ubah potongan kode pada fungsi create_book menjadi sebagai berikut:def create_book(request):\n form = BookForm(request.POST or None)\n\n if form.is_valid() and request.method == \"POST\":\n book = form.save(commit=False)\n book.user = request.user\n book.save()\n return redirect('main:show_main')\n\n context = {'form': form}\n return render(request, \"create_book.html\", context)\n ...\nPenjelasan Kode:
Parameter commit=False yang digunakan pada potongan kode diatas berguna untuk mencegah Django agar tidak langsung menyimpan objek yang telah dibuat dari form langsung ke database. Hal tersebut memungkinkan kita untuk memodifikasi terlebih dahulu objek tersebut sebelum disimpan ke database. Pada kasus ini, kita akan mengisi field user dengan objek User dari return value request.user yang sedang terotorisasi untuk menandakan bahwa objek tersebut dimiliki oleh pengguna yang sedang login.
show_main menjadi sebagai berikut.def show_main(request):\n books = Book.objects.filter(user=request.user)\n\n context = {\n 'name': request.user.username,\n ...\n }\n...\nPenjelasan Kode:
Book yang terasosiasikan dengan pengguna yang sedang login. Hal tersebut dilakukan dengan menyaring seluruh objek dengan hanya mengambil Book yang dimana field user terisi dengan objek User yang sama dengan pengguna yang sedang login.Kode request.user.username berfungsi untuk menampilkan username pengguna yang login pada halaman main.
Simpan semua perubahan, dan lakukan migrasi model dengan python manage.py makemigrations.
Seharusnya, akan muncul error saat melakukan migrasi model. Pilih 1 untuk menetapkan default value untuk field user pada semua row yang telah dibuat pada basis data.
python manage.py migrate untuk mengaplikasikan migrasi yang dilakukan pada poin sebelumnya.Jalankan proyek Django-mu dengan perintah python manage.py runserver dan bukalah http://localhost:8000/ di browser favoritmu untuk melihat hasilnya. Cobalah untuk membuat akun baru dan login dengan akun yang baru dibuat. Amatilah halaman utama, buku yang tadi telah dibuat dengan akun sebelumnya tidak akan ditampilkan di halaman pengguna akun yang baru saja kamu buat. Hal tersebut berarti kamu sudah berhasil menghubungkan objek Book dengan User yang membuatnya.
Selamat! Kamu telah menyelesaikan Tutorial 3 dengan baik. \ud83d\ude04
Setelah kamu menyelesaikan seluruh tutorial di atas, harapannya kamu sekarang lebih paham tentang penggunaan form, autentikasi, session, dan cookie pada framework Django.
main pada lokalmu terlihat seperti ini.Sebelum melakukan langkah ini, pastikan struktur direktori lokal sudah benar. Selanjunya, lakukan add, commit dan push untuk memperbarui repositori GitHub.
Jalankan perintah berikut untuk melakukan add, commit dan push.
git add .\ngit commit -m \"<pesan_commit>\"\ngit push -u origin <branch_utama>\n<pesan_commit> sesuai dengan keinginan. Contoh: git commit -m \"tutorial 3 selesai\".<branch_utama> sesuai dengan nama branch utamamu. Contoh: git push -u origin main atau git push -u origin master.Tutorial ini dikembangkan berdasarkan PBP Ganjil 2024 yang ditulis oleh Tim Pengajar Pemrograman Berbasis Platform 2023/2024. Segala tutorial serta instruksi yang dicantumkan pada repositori ini dirancang sedemikian rupa sehingga mahasiswa yang sedang mengambil mata kuliah Pemrograman Berbasis Platform dapat menyelesaikan tutorial saat sesi lab berlangsung.
"},{"location":"tutorial/tutorial-4/","title":"Tutorial 4: Desain Web Menggunakan HTML dan CSS3 & Metode Update dan Delete pada Data","text":"Pemrograman Berbasis Platform (CSGE602022) \u2014 diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Genap 2023/2024
"},{"location":"tutorial/tutorial-4/#tujuan-pembelajaran","title":"Tujuan Pembelajaran","text":"Setelah menyelesaikan tutorial ini, mahasiswa diharapkan untuk dapat:
HyperText Markup Language (HTML) adalah bahasa markup standar untuk dokumen agar dapat ditampilkan dalam browser web. HTML mendefinisikan struktur dari konten suatu website.
Silakan pelajari dan mencoba sendiri HTML pada referensi ini.
Perbedaan antara HTML dan HTML5 bisa kamu baca pada referensi ini.
"},{"location":"tutorial/tutorial-4/#pengenalan-css","title":"Pengenalan CSS","text":""},{"location":"tutorial/tutorial-4/#apa-itu-css","title":"Apa itu CSS?","text":"Cascading Style Sheets (CSS) adalah bahasa yang digunakan untuk mendeskripsikan tampilan dan format dari sebuah situs web yang ditulis pada markup language (seperti HTML). CSS berguna untuk membuat tampilan situs web menjadi lebih menarik.
Untuk mempelajari perbedaan antara CSS dan CSS3 bisa kamu baca pada referensi ini.
"},{"location":"tutorial/tutorial-4/#cara-penulisan-css","title":"Cara Penulisan CSS","text":"Secara umum, CSS dapat dituliskan dalam bentuk sebagai berikut.
selector {\n properties: value;\n}\nSilakan pelajari dan mencoba sendiri CSS pada referensi ini.
Terdapat tiga jenis cara penulisan CSS:
Silakan pelajari tentang ketiga jenis CSS tersebut pada referensi ini.
Perlu diperhatikan, jika kamu membuat jenis External Style Sheet, kamu perlu menambahkan tag {% load staticfiles %} pada halaman HTML kamu. Contohnya seperti potongan kode di bawah ini.
{% load staticfiles %}\n<html>\n <head>\n <title>Tutorial CSS Yay</title>\n <link rel=\"stylesheet\" href=\"{% static 'css/tutorial.css' %}\" />\n </head>\n <body>\n <div>\n <h1>Tutorial CSS Yay</h1>\n </div>\n <div id=\"main\">\n <div>\n <p>published: 27 September 2023</p>\n <h1><a href=\"\">Tutorial CSS ku</a></h1>\n <p>Yay ini tutorial yang gampang!</p>\n </div>\n </div>\n </body>\n</html>\nHal ini dapat terjadi karena CSS merupakan static files di Django. Static files akan dijelaskan pada bagian selanjutnya.
"},{"location":"tutorial/tutorial-4/#catatan-tambahan","title":"Catatan Tambahan","text":"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.
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 antara lain seperti CSS, JavaScript dan gambar.
Pengaturan untuk static files terletak pada file settings.py:
...\n# Static files (CSS, JavaScript, Images)\n# httpsdocs.djangoproject.comen1.9howtostatic-files\nSTATIC_ROOT = os.path.join(PROJECT_ROOT, 'static')\nSTATIC_URL = 'static'\n...\nsettings.py, terdapat: - STATIC_ROOT yang menentukan absolute path ke direktori static files ketika menjalankan perintah collectstatic pada proyek. - STATIC_URL yang merupakan URL yang dapat diakses publik untuk memperoleh static files tersebut. Perintah collectstatic adalah perintah untuk mengumpulkan static files dari semua app sehingga mempermudah akses untuk semua app.
Penjelasan lebih lengkap mengenai static files dapat kamu baca pada referensi ini.
"},{"location":"tutorial/tutorial-4/#selector-pada-css","title":"Selector pada CSS","text":"Pada tutorial ini, kita akan mengenak tiga jenis selector: Element Selector, ID Selector, dan Class Selector.
ELement Selector
Element Selector memungkinkan kita mengubah properti untuk semua elemen yang memiliki tag HTML yang sama.
Contoh penggunaan Element Selector:
<body>\n <div>\n <h1>Tutorial CSS Yay :D</h1>\n <h2>Tutorial CSS Yay kedua :D</h2>\n </div>\n ...\n</body>\nKita dapat menggunakan element sebagai selector dalam file CSS. Element selector menggunakan format [id_name] (tanpa diawali oleh sebuah simbol)
h1 {\n color: #fca205;\n font-family: \"Monospace\";\n font-style: italic;\n}\nID selector menggunakan ID pada tag sebagai selector-nya. ID bersifat unik dalam satu halaman web. ID dapat ditambahkan pada halaman template HTML.
Contoh penggunaan ID Selector pada template HTML:
<body>\n <div id=\"header\">\n <h1>Tutorial CSS Yay :D</h1>\n </div>\n ...\n</body>\nKemudian, kita dapat menggunakan ID tersebut sebagai selector dalam file CSS. ID selector menggunakan format #[id_name] (selalu diawali #)
#header {\n background-color: #f0f0f0;\n margin-top: 0;\n padding: 20px 20px 20px 40px;\n}\nClass Selector
Class Selector memungkinkan kita untuk mengelompokkan elemen dengan karakteristik yang sama.
Contoh penggunaan Class Selector pada template HTML:
...\n<div id=\"main\">\n <div class=\"content_section\">\n <p class=\"date\">published: 28 September 2022</p>\n <h2><a href=\"\">Tutorial CSS ku</a></h2>\n <p id=\"content_1\">Yay ini tutorial yang gampang!</p>\n </div>\n <div class=\"content_section\">\n <p class=\"date \">published: 29 September 2022</p>\n <h2><a href=\"\">Tutorial CSS mu</a></h2>\n <p id=\"content_2\">Yay ini tutorial yang mudah!</p>\n </div>\n <div class=\"content_section\">\n <p>published: 30 September 2022</p>\n <h2><a href=\"\">Tutorial CSS semua</a></h2>\n <p id=\"content_3\">Yay ini tutorial yang tidak sulit!</p>\n </div>\n</div>\n...\nKemudian, kita dapat menggunakan Class tersebut sebagai selector dalam file CSS. Class selector menggunakan format .[class_name] (diawali .)
.content_section {\n background-color: #3696e1;\n margin-bottom: 30px;\n color: #000000;\n font-family: cursive;\n padding: 20px 20px 20px 40px;\n}\nUntuk memperdalam pengetahuan mengenai CSS Selector Reference, kamu dapat membaca referensi ini.
"},{"location":"tutorial/tutorial-4/#tips-trik-css","title":"Tips & trik CSS","text":""},{"location":"tutorial/tutorial-4/#mengenal-combinator-pada-css","title":"Mengenal Combinator pada CSS","text":"Combinator dalam CSS menghubungkan dua atau lebih selector untuk merincikan lebih lanjut elemen-elemen yang di-select.
Terdapat empat combinators pada CSS. Berikut ringkasan pemakaiannya:
Combinator Contoh pemakaian Penjelasan contoh Descendant selector (space)div p Menyeleksi semua elemen p yang merupakan keturunan dari elemen div Child selector (>) div > p Menyeleksi semua elemen p yang merupakan anak dari elemen div Adjacent sibling selector (+) div + p Menyeleksi elemen p pertama yang berada tepat setelah elemen div (harus memiliki elemen induk yang sama) General sibling selector (~) div ~ p Menyeleksi semua elemen p yang sejajar dan berada setelah elemen div Silakan pelajari lebih lanjut mengenai combinator melalui referensi ini.
"},{"location":"tutorial/tutorial-4/#mengenal-pseudo-class-pada-css","title":"Mengenal Pseudo-class pada CSS","text":"Pseudo-class digunakan untuk mendefinisikan state khusus dari suatu elemen. Sintaks pemakaian pseudo-class adalah sebagai berikut:
selector:pseudo-class {\n property: value;\n}\nBeberapa contoh pseudo-class: | Pseudo-class | Mengaplikasikan style pada .. | | -------- | -------- | | :link | tautan yang belum pernah dikunjungi | | :visited | tautan yang sudah pernah dikunjungi | | :hover | saat pengguna mengarahkan kursor di atas elemen tersebut | | :active | saat elemen diaktifkan (biasanya saat pengguna mengklik elemen tersebut) | | :focus | saat elemen fokus (seperti saat pengguna mengklik input field) | | :checked | elemen yang telah dicentang | | :disabled | elemen yang telah dibuat tidak responsif (misalnya tombol yang tidak bisa diklik) |
Silakan pelajari lebih lanjut mengenai pseudo-class melalui referensi ini.
"},{"location":"tutorial/tutorial-4/#mengenal-box-model-pada-css","title":"Mengenal Box Model pada CSS","text":"Box model pada CSS pada dasarnya merupakan suatu box yang membungkus setiap elemen HTML dan terdiri atas:
Silakan pelajari lebih lanjut mengenai margin, border, dan padding melalui referensi ini.
"},{"location":"tutorial/tutorial-4/#pengenalan-bootstrap-tailwind","title":"Pengenalan Bootstrap & Tailwind","text":"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:
Bootstrap dan Tailwind tentu saja sebagai framework memiliki perbedaan yang signifikan antara satu sama lain, yaitu:
Tailwind Bootstrap Tailwind CSS membangun tampilan dengan menggabungkan kelas-kelas utilitas yang telah didefinisikan sebelumnya. Bootstrap menggunakan gaya dan komponen yang telah didefinisikan, yang memiliki tampilan yang sudah jadi dan dapat digunakan secara langsung. Tailwind CSS memiliki file CSS yang lebih kecil sedikit dibandingkan Bootstrap dan hanya akan memuat kelas-kelas utilitas yang ada Bootstrap memiliki file CSS yang lebih besar dibandingkan dengan Tailwind CSS karena termasuk banyak komponen yang telah didefinisikan. Tailwind CSS memiliki memberikan fleksibilitas dan adaptabilitas tinggi terhadap proyek Bootstrap sering kali menghasilkan tampilan yang lebih konsisten di seluruh proyek karena menggunakan komponen yang telah didefinisikan. Tailwind CSS memiliki pembelajaran yang lebih curam karena memerlukan pemahaman terhadap kelas-kelas utilitas yang tersedia dan bagaimana menggabungkannya untuk mencapai tampilan yang diinginkan. Bootstrap memiliki pembelajaran yang lebih cepat untuk pemula karena dapat mulai dengan komponen yang telah didefinisikan."},{"location":"tutorial/tutorial-4/#responsive-web-design","title":"Responsive Web Design","text":"Responsive web design merupakan metode sistem desain web yang memiliki tujuan untuk menghasilkan tampilan web yang terlihat baik pada seluruh perangkat seperti desktop, tablet, mobile, dan sebagainya. Responsive web design tidak mengubah isi dari situs web, tetapi hanya mengubah tampilan dan penataan pada setiap perangkat agar sesuai dengan lebar layar dan kemampuan perangkat tersebut. Dalam responsive web design tampilan-tampilan tertentu membutuhkan bantuan CSS (seperti mengecilkan atau membesarkan) suatu elemen.
Salah satu cara untuk menguji apakah suatu situs web menggunakan responsive web design adalah dengan mengakses situs web tersebut dan mengaktifkan fitur Toggle Device Mode pada browser. Fitur ini memungkinkan kamu untuk melihat bagaimana situs web tersebut ditampilkan pada berbagai perangkat, seperti komputer, tablet, atau smartphone, tanpa harus mengubah ukuran jendela browser.
Berikut adalah cara untuk mengakses fitur tersebut pada browser Google Chrome. * Windows/Linux : CTRL + SHIFT + M * Mac : Command + Shift + M
Cara lain yang lebih praktis adalah dengan melakukan klik kanan pada browser dan memilih Inspect Element/Inspect untuk membuka Dev Tools yang berguna.
Untuk mempelajari lebih lengkap mengenai Reponsive Web Design, kamu dapat membuka referensi ini.
"},{"location":"tutorial/tutorial-4/#tutorial-menambahkan-bootstrap-ke-aplikasi","title":"Tutorial: Menambahkan Bootstrap ke Aplikasi","text":"Pada mata kuliah PBP ini, kita akan memfokuskan pembelajaran CSS menggunakan framework bootstrap. Berikut adalah langkah yang perlu kamu lakukan untuk menyelesaikan bagian tutorial ini.
Buka project django kalian (book_tracker), lalu buka file base.html yang telah dibuat sebelumnya pada templates folder yang berada di root project kalian.
Didalam templates/base.html, tambahkan tag agar halaman web kamu dapat menyesuaikan ukuran dan perilaku perangkat mobile (apabila belum).
<head>\n {% block meta %}\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n {% endblock meta %}\n</head>\nTambahkan Bootstrap CSS dan juga JS.
CSS:
<head>\n {% block meta %}\n ...\n {% endblock meta %}\n <link href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN\" crossorigin=\"anonymous\">\n</head>\nJS:
<head>\n ...\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\" integrity=\"sha384-KyZXEAg3QhqLMpG8r+J4jsl5c9zdLKaUk5Ae5f5b1bw6AUn5f5v8FZJoMxm6f5cH1\" crossorigin=\"anonymous\"></script>\n</head>\n(Opsional) Apabila kalian ingin menggunakan dropdowns, popover, tooltips yang disediakan framework Bootstrap, maka kalian perlu menambahkan 2 baris script JS ini dibawah script JS yang sudah kalian buat sebelumnya.
<head>\n ...\n <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\"></script>\n <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\"></script>\n</head>\nReferensi: Get Started with Bootstrap 5.3
"},{"location":"tutorial/tutorial-4/#tutorial-menambahkan-navbar-pada-aplikasi","title":"Tutorial: Menambahkan navbar pada Aplikasi","text":"Tambahkan navigation bar (boleh menggunakan Bootstrap) pada halaman main.html kamu. Tampilkan nama kamu dan tombol logout pada navigation bar yang kamu buat. Kamu dapat referensi cara membuat navigation bar pada Bootstrap dengan dokumentasi berikut dan kreasikan navigation bar sesukamu.
Buka views.py yang ada pada subdirektori main, dan buatlah fungsi baru bernama edit_book yang menerima parameter request dan id.
Tambahkan potongan kode berikut pada fungsi edit_book
def edit_book(request, id):\n # Get book berdasarkan ID\n book = Book.objects.get(pk = id)\n\n # Set book sebagai instance dari form\n form = BookForm(request.POST or None, instance=book)\n\n if form.is_valid() and request.method == \"POST\":\n # Simpan form dan kembali ke halaman awal\n form.save()\n return HttpResponseRedirect(reverse('main:show_main'))\n\n context = {'form': form}\n return render(request, \"edit_book.html\", context)\nBuatlah berkas HTML baru dengan nama edit_book.html pada subdirektori main/templates. Isi berkas tersebut dengan template berikut.
{% extends 'base.html' %}\n\n{% load static %}\n\n{% block content %}\n\n<h1>Edit Book</h1>\n\n<form method=\"POST\">\n {% csrf_token %}\n <table>\n {{ form.as_table }}\n <tr>\n <td></td>\n <td>\n <input type=\"submit\" value=\"Edit Book\"/>\n </td>\n </tr>\n </table>\n</form>\n\n{% endblock %}\nBuka urls.py yang berada pada direktori main dan import fungsi edit_book yang sudah dibuat.
from main.views import edit_book\nTambahkan path url ke dalam urlpatterns untuk mengakses fungsi yang sudah diimpor tadi.
...\npath('edit-book/<int:id>', edit_book, name='edit_book'),\n...\nBuka main.html yang berada pada subdirektori main/templates. Tambahkan potongan kode berikut sejajar dengan elemen <td> terakhir agar terlihat tombol edit pada setiap baris tabel.
...\n<tr>\n ...\n <td>\n <a href=\"{% url 'main:edit_book' book.pk %}\">\n <button>\n Edit\n </button>\n </a>\n </td>\n</tr>\n...\nJalankan proyek Django-mu dengan perintah python manage.py runserver dan bukalah http://localhost:8000 di browser favoritmu. Setelah login, coba untuk meng-edit data suatu buku. Apabila setelah di-submit perubahan tersimpan dan tercermin pada halaman utama aplikasi tanpa error, maka selamat, kamu berhasil menambahkan fitur edit!
Berikut adalah yang perlu kamu lakukan untuk membuat fungsi penghapusan data buku.
Buat fungsi baru dengan nama delete_book yang menerima parameter request dan id pada views.py di folder main untuk menghapus data buku. Kamu dapat menggunakan templat kode berikut untuk memuat fungsinya.
Jangan lupa untuk memahami isi kodenya, ya. \ud83d\ude09
def delete_book(request, id):\n # Get data berdasarkan ID\n book = Book.objects.get(pk = id)\n # Hapus data\n book.delete()\n # Kembali ke halaman awal\n return HttpResponseRedirect(reverse('main:show_main'))\nBuka urls.py yang ada pada folder main dan impor fungsi yang sudah kamu buat tadi.
from main.views import delete_book\nTambahkan path url ke dalam urlpatterns untuk mengakses fungsi yang sudah diimpor.
...\npath('delete/<int:id>', delete_book, name='delete_book'), # sesuaikan dengan nama fungsi yang dibuat\n...\nBukalah berkas main.html yang ada pada folder main/templates dan ubahlah kode yang sudah ada menjadi seperti berikut agar terdapat tombol hapus untuk setiap buku.
...\n<tr>\n ...\n <td>\n <a href=\"{% url 'main:edit_book' book.pk %}\">\n <button>\n Edit\n </button>\n </a>\n <a href=\"{% url 'main:delete_book' book.pk %}\">\n <button>\n Delete\n </button>\n </a>\n </td>\n</tr>\n...\nJalankan proyek Django-mu dan cobalah untuk menghapus data buku yang sudah ada pada browser favoritmu.
"},{"location":"tutorial/tutorial-4/#akhir-kata","title":"Akhir Kata","text":"Selamat! Kamu telah menyelesaikan Tutorial 4 dengan baik. \ud83d\ude04
Kamu juga diharapkan untuk melakukan eksplorasi dengan menggunakan CSS Framework pada tutorial ini. Berikut adalah contoh penerapan Bootstrap sederhana pada aplikasi Book Tracker.
Selanjunya, lakukan add, commit dan push untuk memperbarui repositori GitHub.
Jalankan perintah berikut untuk melakukan add, commit dan push.
git add .\ngit commit -m \"<pesan_commit>\"\ngit push -u origin <branch_utama>\n<pesan_commit> sesuai dengan keinginan. Contoh: git commit -m \"tutorial 4 selesai\".<branch_utama> sesuai dengan nama branch utamamu. Contoh: git push -u origin main atau git push -u origin master.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
"},{"location":"tutorial/tutorial-4/#kontributor","title":"Kontributor","text":"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.
"}]} \ No newline at end of file +{"config":{"lang":["en"],"separator":"[\\s\\-]+","pipeline":[" "]},"docs":[{"location":"","title":"Beranda","text":"Selamat datang di Pemrograman Berbasis Platform Semester Genap 2023/2024. Situs web ini akan memuat informasi terkait dengan perkuliahan yang akan dipublikasikan secara rutin, seperti dokumen tutorial, tugas individu, dan tugas kelompok. Harap cek situs web ini secara berkala.
"},{"location":"#dosen","title":"Dosen","text":"Arawinda Dinakaramani, S.Kom., M.Hum.
"},{"location":"#asisten-dosen","title":"Asisten Dosen","text":"Pemrograman Berbasis Platform (CSGE602022) \u2014 diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Genap 2023/2024
"},{"location":"tugas/tugas-1/#deskripsi-tugas","title":"Deskripsi Tugas","text":"Tulislah sebuah esai minimal 1000 kata yang mengandung poin-poin sebagai berikut.
Pilihlah salah satu platform yang telah dijelaskan dalam Slide 1. Sebutkan nama platform yang Anda pilih.
Sebutkan 3 perangkat dan teknologi yang tergolong dalam platform tersebut yang pernah Anda gunakan.
Untuk masing-masing perangkat dan teknologi yang Anda sebutkan, ceritakan pengalaman Anda saat\u00a0menggunakannya.
Menurut Anda, apakah ada satu platform yang paling penting di antara semua programming platform? Jika ada, platform apa dan mengapa platform tersebut paling penting? Jika tidak ada, jelaskan\u00a0alasannya!
Tugas dikumpulkan dalam format Portable Document File (*.pdf) dengan ketentuan nama berkas NPM_Nama_Tugas 1.pdf.
Tenggat waktu pengerjaan Tugas 1 adalah hari Selasa, 6 Februari 2024, pukul 12.00 siang.
Harap mengumpulkan esai yang telah kamu buat ke dalam slot submisi yang telah disediakan di SCELE.
"},{"location":"tugas/tugas-1/#rubrik-penilaian","title":"Rubrik Penilaian","text":"Pemrograman Berbasis Platform (CSGE602022) \u2014 diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Genap 2023/2024
"},{"location":"tugas/tugas-2/#deskripsi-tugas","title":"Deskripsi Tugas","text":"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.
"},{"location":"tugas/tugas-2/#tema-aplikasi","title":"Tema Aplikasi","text":"Tema besar aplikasi untuk tugas PBP adalah aplikasi tracker. Pada semester ini, kamu diberikan kebebasan dalam memilih nama dan tema kecil aplikasi, kecuali book tracker yang sudah digunakan pada tutorial. Namun, aplikasi dari tugas kamu harus memiliki atribut-atribut berikut pada model aplikasimu.
name sebagai nama item dengan tipe CharField.amount sebagai jumlah item dengan tipe IntegerField.description sebagai deskripsi item dengan tipe TextField.Kamu dipersilakan untuk menambahkan atribut lainnya jika diinginkan, seperti date, category. Namun, model aplikasi kamu wajib memiliki ketiga atribut wajib di atas (name, amount, description). Nama dari ketiga atribut di atas dapat disesuaikan lagi dengan kebutuhan aplikasimu.
Beberapa contoh ide aplikasi pengelolaan yang dapat kamu buat adalah sebagai berikut.
title, episodes, synopsis, rating, date.name, price, description, category, date.name, calories, description, dateChecklist untuk tugas ini adalah sebagai berikut.
main pada proyek tersebut.main.main dengan nama Item dan memiliki atribut wajib sebagai berikut.name sebagai nama item dengan tipe CharField.amount sebagai jumlah item dengan tipe IntegerField.description sebagai deskripsi item dengan tipe TextField.views.py untuk dikembalikan ke dalam sebuah template HTML yang menampilkan nama aplikasi serta nama dan kelas kamu.urls.py aplikasi main untuk memetakan fungsi yang telah dibuat pada views.py.README.md yang berisi tautan menuju aplikasi PWS yang sudah di-deploy, serta jawaban dari beberapa pertanyaan berikut.urls.py, views.py, models.py, dan berkas html.Perhatikan bahwa kamu harus mengerjakan tugas ini menggunakan repositori yang berbeda dengan tutorial.
"},{"location":"tugas/tugas-2/#tenggat-waktu-pengerjaan","title":"Tenggat Waktu Pengerjaan","text":"Tenggat waktu pengerjaan Tugas 2 adalah hari Selasa, 13 Februari, pukul 12.00 siang.
Harap mengumpulkan link repositori yang kamu gunakan ke dalam slot submisi yang telah disediakan di SCELE.
"},{"location":"tugas/tugas-3/","title":"Tugas 3: Implementasi Form dan Data Delivery pada Django","text":"Pemrograman Berbasis Platform (CSGE602022) \u2014 diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Genap 2023/2024
"},{"location":"tugas/tugas-3/#deskripsi-tugas","title":"Deskripsi Tugas","text":"Pada tugas ini, kamu akan menjalankan implementasi konsep data delivery serta menerapkan beberapa konsep yang telah dipelajari selama sesi tutorial.
Checklist untuk tugas ini adalah sebagai berikut:
form untuk menambahkan objek model pada app sebelumnya.views baru untuk melihat objek yang sudah ditambahkan dalam format XML, JSON, XML by ID, dan JSON by ID.views yang telah ditambahkan pada poin 2.README.md pada root folder.POST dan form GET dalam Django?README.md.add-commit-push ke GitHub.Tenggat waktu pengerjaan Tugas 3 adalah hari Selasa, 20 Februari, pukul 12.00 siang.
Asisten dosen akan mengecek last commit dari repositori tugas lab, sehingga kamu tidak perlu mengumpulkan tautan repositori ke dalam slot submisi.
"},{"location":"tugas/tugas-4/","title":"Tugas 4: Implementasi Autentikasi, Session, dan Cookies pada Django","text":"Pemrograman Berbasis Platform (CSGE602022) \u2014 diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Genap 2023/2024
"},{"location":"tugas/tugas-4/#deskripsi-tugas","title":"Deskripsi Tugas","text":"Pada tugas ini, kamu akan mengimplementasikan konsep authentication, session, cookies, serta menerapkan beberapa konsep yang telah dipelajari selama sesi tutorial.
Kerjakan checklist untuk tugas ini secara berurutan:
Item dengan User.cookies seperti last login pada halaman utama aplikasi.[ ] Menjawab beberapa pertanyaan berikut pada README.md pada root folder (silakan modifikasi README.md yang telah kamu buat sebelumnya; tambahkan subjudul untuk setiap tugas).
UserCreationForm, dan jelaskan apa kelebihan dan kekurangannya?add-commit-push ke GitHub.Tenggat waktu pengerjaan Tugas 4 adalah Selasa, 27 Februari 2023, pukul 12.00 siang.
Asisten dosen akan mengecek last commit dari repositori tugas lab, sehingga kamu tidak perlu mengumpulkan tautan repositori ke dalam slot submisi.
"},{"location":"tutorial/tutorial-0/","title":"Tutorial 0: Konfigurasi dan Instalasi Git dan Django","text":"Pemrograman Berbasis Platform (CSGE602022) \u2014 diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Ganjil 2023/2024
"},{"location":"tutorial/tutorial-0/#tujuan-pembelajaran","title":"Tujuan Pembelajaran","text":"Setelah menyelesaikan tutorial ini, mahasiswa diharapkan untuk dapat:
Pengenalan awal ini akan membantumu memahami dasar-dasar mengenai Git dan platform berbasis web yang dikenal sebagai GitHub.
"},{"location":"tutorial/tutorial-0/#git-sistem-kontrol-versi-yang-kuat","title":"Git: Sistem Kontrol Versi yang Kuat","text":"Dengan pemahaman dasar mengenai Git dan GitHub, kamu siap untuk melangkah lebih jauh dalam dunia pengembangan perangkat lunak yang kolaboratif dan terstruktur.
"},{"location":"tutorial/tutorial-0/#langkah-1-membuat-akun-di-github","title":"Langkah 1: Membuat Akun di GitHub","text":"Langkah selanjutnya adalah membuat akun di GitHub, yang akan memungkinkanmu untuk mulai berkolaborasi pada proyek-proyek menggunakan Git.
Buka Situs Web GitHub
Membuat Akun
Sign up di pojok kanan atas halaman.Isi Formulir Pendaftaran
Verifikasi Akun Melalui Email
Akun GitHub Siap Digunakan
Catatan:
Kamu sekarang telah memiliki akun GitHub yang dapat digunakan untuk menyimpan proyek, berkolaborasi dengan orang lain, dan masih banyak lagi.
"},{"location":"tutorial/tutorial-0/#tutorial-instalasi-ide","title":"Tutorial: Instalasi IDE","text":"IDE (Integrated Development Environment) adalah perangkat lunak yang membantu para pengembang dalam menulis, mengedit, dan mengelola kode. Berikut adalah langkah-langkah untuk memasang IDE.
"},{"location":"tutorial/tutorial-0/#langkah-1-pemilihan-text-editor-atau-ide","title":"Langkah 1: Pemilihan Text Editor atau IDE","text":"Pilihlah text editor atau IDE yang sesuai dengan preferensimu. Beberapa pilihan populer yang dapat kamu pertimbangkan meliputi:
Catatan:
Jika Git belum terpasang pada sistem, kamu dapat mengikuti langkah-langkah berikut untuk menginstalnya.
Setelah Git terpasang, langkah-langkah berikut akan membantumu mengatur konfigurasi awal sebelum mulai menggunakan Git.
cd <path_direktori>git init. Perintah ini akan membuat repositori Git kosong di dalam direktori yang kamu tentukan.Sebelum mulai berkontribusi ke repositori, konfigurasikan nama pengguna dan alamat email agar terhubung dengan commit-mu.
Atur username dan email yang akan diasosiasikan dengan pekerjaanmu ke repositori Git ini dengan menjalankan perintah di bawah ini. Sesuaikan dengan username dan email yang kamu gunakan pada GitHub.
git config --global user.name \"<NAME>\"\ngit config --global user.email \"<EMAIL>\"\nContoh:
git config --global user.name \"pakbepe\"\ngit config --global user.email \"pak.bepe@cs.ui.ac.id\"\nPerlu diketahui bahwa flag --global akan mengubah konfigurasi global untuk seluruh sistem.
Untuk memastikan konfigurasi telah diatur dengan benar pada repositori lokal, kamu dapat menjalankan perintah berikut.
git config --list\nCatatan:
<NAME> dan <EMAIL> dengan informasi pribadimuRepositori adalah tempat penyimpanan untuk proyek perangkat lunak, yang mencakup semua revisi dan perubahan yang telah dilakukan pada kode. Untuk mengeksekusi perintah-perintah Git, kamu dapat melakukannya pada repositori di GitHub, platform kolaboratif untuk mengelola proyek menggunakan Git.
"},{"location":"tutorial/tutorial-0/#langkah-1-melakukan-inisiasi-repositori-di-github","title":"Langkah 1: Melakukan Inisiasi Repositori di GitHub","text":"Langkah pertama dalam penggunaan Git adalah melakukan inisiasi repositori di GitHub untuk memulai pelacakan perubahan pada proyekmu.
Buka GitHub melalui peramban web.
Buat Repositori Baru
Pada halaman beranda GitHub, buat repositori baru dengan nama my-first-repo.
Buka halaman repositori yang baru kamu buat. Pastikan untuk mengatur visibilitas proyek sebagai \"Public\" dan biarkan pengaturan lainnya pada nilai default.
Tentukan Direktori Lokal
Pilih direktori lokal di komputermu yang telah diinisiasi dengan Git. Inilah tempat kamu akan menyimpan versi lokal dari proyek.
Tambahkan Berkas README.md
Buat berkas baru dengan nama README.md dalam direktori lokal proyekmu.
Isi berkas README.md dengan informasi seperti nama, NPM, dan kelas. Contoh:
Nama : Pak Bepe\n\nNPM : 2201234567\n\nKelas : PBP A\nCek Status dan Lakukan Tracking
Buka command prompt atau terminal, lalu jalankan git status pada direktori yang sudah kamu pilih. Perintah ini akan menampilkan berkas-berkas yang belum di-track (untracked).
Gunakan perintah git add README.md untuk menandai berkas README.md sebagai berkas yang akan di-commit (tracked).
Commit Perubahan
Jalankan kembali git status dan pastikan berkas README.md sudah ditandai sebagai berkas yang akan di-commit.
git commit -m \"<KOMENTAR KAMU>\" untuk membuat commit dengan pesan komentar yang sesuai dengan perubahan yang kamu lakukan.Catatan:
Perbaikan bug atau Update file.Setelah melakukan inisiasi repositori lokal, langkah selanjutnya adalah menghubungkannya dengan repositori di GitHub agar kamu dapat berkolaborasi dan menyimpan perubahan di platform daring tersebut.
Buat Branch Utama Baru
Di terminal atau command prompt, jalankan perintah git branch -M main untuk membuat branch utama baru dengan nama \"main\".
Pastikan huruf \"M\" pada perintah -M ditulis dengan huruf kapital.
Hubungkan dengan Repositori di GitHub
Gunakan perintah git remote add origin <URL_REPO> untuk menghubungkan repositori lokal dengan repositori di GitHub.
Gantilah <URL_REPO> dengan URL HTTPS repositori yang telah kamu buat di GitHub. Contoh:
git remote add origin https://github.com/pakbepe/test.git\nLakukan Penyimpanan Pertama ke GitHub
Terakhir, lakukan penyimpanan pertama ke GitHub dengan menjalankan perintah git push -u origin main.
Perintah ini akan mengirimkan semua perubahan yang ada pada branch saat ini (dalam hal ini adalah branch utama) di repositori lokal ke branch main di repositori GitHub.
Lakukan Pengecekan Kembali
Lakukan refresh pada halaman repositori kamu, seharusnya berkas README.md kamu sudah dapat terlihat.
Catatan:
Cloning repositori adalah proses menduplikasi seluruh konten dari repositori yang ada di platform GitHub ke komputer lokal. Langkah-langkahnya adalah sebagai berikut.
Buka halaman repositori di GitHub yang telah kamu buat sebelumnya.
Salin URL Clone
Klik tombol Code di pojok kanan atas halaman repositori di GitHub.
Pilih opsi HTTPS untuk salin URL clone.
Clone Repositori ke Komputer Lokal
Buka terminal atau command prompt di direktori yang berbeda dari tempat repositori lokalmu sebelumnya.
git clone <URL_CLONE> (gantilah URL_CLONE dengan URL yang telah kamu salin).Saat ini, kamu memiliki tiga repositori:
Catatan:
Seperti yang sudah disinggung sebelumnya (Langkah 2), push adalah proses mengirimkan perubahan yang kamu lakukan di repositori lokal ke repositori di GitHub. Langkah-langkahnya adalah sebagai berikut.
Buka kembali repositori lokal yang pertama kali kamu buat.
Ubah isi berkas README.md dengan menambahkan atribut Hobi. Contohnya adalah sebagai berikut.
Nama : Pak Bepe\n\nNPM : 2201234567\n\nKelas : PBP A\n\nHobi : Tidur\nLakukan Push ke Repositori GitHub
Buka terminal atau command prompt, kemudian masuk ke repositori lokal yang telah kamu ubah.
git status untuk melihat status perubahan yang dilakukan.git add README.md untuk menambahkan perubahan ke dalam tahap yang akan di-commit.git commit -m \"<KOMENTAR KAMU>\" untuk memberikan deskripsi singkat tentang perubahan yang kamu lakukan.Terakhir, jalankan git push -u origin <NAMA_BRANCH> untuk mengirim perubahan ke branch yang dipilih pada repositori GitHub (gantilah \"Nama Branch\" dengan target branch, misalnya main).
Lakukan Pengecekan Kembali
Lakukan refresh halaman kamu, seharusnya berkas README.md kamu sudah berubah.
Catatan: Jika kamu ingin mengambil semua perubahan yang belum di-stage (ditandai untuk dimasukkan dalam commit) dari seluruh direktori proyek kamu, jalankan git add ..
Pull pada suatu repositori adalah proses mengambil perubahan terbaru dari repositori di GitHub dan menggabungkannya dengan repositori lokal.
Buka kembali repositori lokal yang telah kamu clone sebelumnya di terminal atau command prompt.
Jalankan Perintah Pull
Jalankan perintah git pull origin main untuk mengambil perubahan terbaru yang ada di repositori GitHub dan menggabungkannya dengan repositori lokalmu.
Lakukan Pengecekan Kembali
Periksa kembali berkas README.md di repositori lokal tersebut. Seharusnya berkas README.md kamu sudah menampilkan hobi kamu.
Catatan:
Pada tahap ini kamu akan mempelajari tentang penggunaan branch dalam Git. Penggunaan branch memungkinkan kamu untuk mengembangkan fitur atau memperbaiki bug di lingkungan terpisah sebelum menggabungkannya kembali ke branch utama.
Apa Itu Branch di Git?
Hal ini memungkinkan tim untuk bekerja pada fitur atau perbaikan bug tanpa mengganggu kode yang ada di branch utama.
Membuat dan Mengganti Branch Baru
Pada direktori repositori lokal asli (bukan clone), jalankan perintah git checkout -b <NAMA_BRANCH> di terminal atau command prompt untuk membuat dan beralih ke branch baru. Contoh: git checkout -b jurusan_branch
Tambahkan atribut jurusan pada berkas README.md. Contoh:
Nama : Pak Bepe\n\nNPM : 2201234567\n\nKelas : PBP A\n\nHobi : Tidur\n\nJurusan : Ilmu Sistem Informasi Komputer\nMenyimpan Perubahan dan Push ke GitHub
Setelah menambahkan atribut jurusan, simpan berkas tersebut.
add, commit, dan push ke GitHub dengan menjalankan perintah yang sudah kamu kuasai sebelumnya.Jalankan perintah git push -u origin <NAMA_BRANCH>. Pastikan untuk mengganti <NAMA_BRANCH> sesuai dengan nama branch baru yang telah dibuat.
Menggabungkan Branch Menggunakan Pull Request
Buka kembali halaman repositori kamu pada GitHub.
Compare & pull request akan muncul. Jika tidak, alternatifnya adalah dengan menekan tombol Pull Request dan kemudian memilih opsi New pull request.Merge pull request yang akan menggabungkan perubahan dari branch yang ingin digabungkan ke dalam branch utama (main).Catatan:
git checkout <NAMA_BRANCH> pada terminal. Flag -b pada perintah sebelum-sebelumnya digunakan untuk membuat branch baru dan beralih ke branch tersebut dalam satu langkah.Django adalah kerangka kerja (framework) yang populer untuk pengembangan aplikasi web dengan bahasa pemrograman Python. Dalam tutorial ini, kamu akan mempelajari langkah-langkah instalasi Django dan inisiasi proyek demo sebagai starter.
"},{"location":"tutorial/tutorial-0/#langkah-1-membuat-direktori-dan-mengaktifkan-virtual-environment","title":"Langkah 1: Membuat Direktori dan Mengaktifkan Virtual Environment","text":"book-tracker dan masuk ke dalamnya.python -m venv env\nVirtual environment ini berguna untuk mengisolasi package serta dependencies dari aplikasi agar tidak bertabrakan dengan versi lain yang ada pada komputermu. Kamu dapat mengaktifkan virtual environment dengan perintah berikut.
Windows:
env\\Scripts\\activate\nUnix (Mac/Linux):
source env/bin/activate\nVirtual environment akan aktif dan ditandai dengan (env) di baris input terminal.
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.
requirements.txt dan tambahkan beberapa dependencies.django\ngunicorn\nwhitenoise\npsycopg2-binary\nrequests\nurllib3\npip install -r requirements.txt\nbook_tracker dengan perintah berikut.django-admin startproject book_tracker .\nPastikan karakter . tertulis di akhir perintah
* pada ALLOWED_HOSTS di settings.py untuk keperluan deployment:...\nALLOWED_HOSTS = [\"*\"]\n...\nDalam konteks deployment, ALLOWED_HOSTS berfungsi sebagai daftar host yang diizinkan untuk mengakses aplikasi web. Dengan menetapkan nilai [\"*\"], kamu mengizinkan akses dari semua host, yang akan memungkinkan aplikasi diakses secara luas. Namun, perlu diingat bahwa pengaturan ini harus digunakan dengan bijak dan hanya dalam situasi tertentu, seperti saat melakukan uji coba atau tahap awal pengembangan.
Pastikan bahwa berkas manage.py ada pada direktori yang aktif pada terminal kamu saat ini. Jalankan server Django dengan perintah:
Windows:
python manage.py runserver\nUnix:
python3 manage.py runserver\nBuka http://localhost:8000 pada peramban web untuk melihat animasi roket sebagai tanda aplikasi Django kamu berhasil dibuat.
Ctrl+C (Windows/Linux) atau Control+C (Mac) pada terminal.deactivate\nSelamat! Kamu telah berhasil membuat aplikasi Django dari awal.
"},{"location":"tutorial/tutorial-0/#tutorial-unggah-proyek-ke-repositori-github","title":"Tutorial: Unggah Proyek ke Repositori GitHub","text":"Buatlah repositori GitHub baru bernama book-tracker dengan visibilitas public.
Inisiasi direktori lokal book-tracker sebagai repositori Git.
Hint: Ingat kembali tahap tutorial sebelumnya
Tambahkan Berkas .gitignore
Tambahkan berkas .gitignore dan isilah berkas tersebut dengan teks berikut.
# Django\n*.log\n*.pot\n*.pyc\n__pycache__\ndb.sqlite3\nmedia\n\n# Backup files\n*.bak\n\n# If you are using PyCharm\n# User-specific stuff\n.idea/**/workspace.xml\n.idea/**/tasks.xml\n.idea/**/usage.statistics.xml\n.idea/**/dictionaries\n.idea/**/shelf\n\n# AWS User-specific\n.idea/**/aws.xml\n\n# Generated files\n.idea/**/contentModel.xml\n\n# Sensitive or high-churn files\n.idea/**/dataSources/\n.idea/**/dataSources.ids\n.idea/**/dataSources.local.xml\n.idea/**/sqlDataSources.xml\n.idea/**/dynamic.xml\n.idea/**/uiDesigner.xml\n.idea/**/dbnavigator.xml\n\n# Gradle\n.idea/**/gradle.xml\n.idea/**/libraries\n\n# File-based project format\n*.iws\n\n# IntelliJ\nout/\n\n# JIRA plugin\natlassian-ide-plugin.xml\n\n# Python\n*.py[cod]\n*$py.class\n\n# Distribution / packaging\n.Python build/\ndevelop-eggs/\ndist/\ndownloads/\neggs/\n.eggs/\nlib/\nlib64/\nparts/\nsdist/\nvar/\nwheels/\n*.egg-info/\n.installed.cfg\n*.egg\n*.manifest\n*.spec\n\n# Installer logs\npip-log.txt\npip-delete-this-directory.txt\n\n# Unit test / coverage reports\nhtmlcov/\n.tox/\n.coverage\n.coverage.*\n.cache\n.pytest_cache/\nnosetests.xml\ncoverage.xml\n*.cover\n.hypothesis/\n\n# Jupyter Notebook\n.ipynb_checkpoints\n\n# pyenv\n.python-version\n\n# celery\ncelerybeat-schedule.*\n\n# SageMath parsed files\n*.sage.py\n\n# Environments\n.env\n.venv\nenv/\nvenv/\nENV/\nenv.bak/\nvenv.bak/\n\n# mkdocs documentation\n/site\n\n# mypy\n.mypy_cache/\n\n# Sublime Text\n*.tmlanguage.cache\n*.tmPreferences.cache\n*.stTheme.cache\n*.sublime-workspace\n*.sublime-project\n\n# sftp configuration file\nsftp-config.json\n\n# Package control specific files Package\nControl.last-run\nControl.ca-list\nControl.ca-bundle\nControl.system-ca-bundle\nGitHub.sublime-settings\n\n# Visual Studio Code\n.vscode/*\n!.vscode/settings.json\n!.vscode/tasks.json\n!.vscode/launch.json\n!.vscode/extensions.json\n.history\nBerkas .gitignore adalah sebuah berkas konfigurasi yang digunakan dalam repositori Git untuk menentukan berkas-berkas dan direktori-direktori yang harus diabaikan oleh Git.
.gitignore tidak akan dimasukkan ke dalam versi kontrol Git.Berkas ini perlu dibuat karena terkadang ada berkas-berkas yang tidak perlu dilacak oleh Git, seperti berkas-berkas yang dihasilkan oleh proses kompilasi, berkas sementara, atau berkas konfigurasi pribadi.
Lakukan add, commit, dan push dari direktori repositori lokal.
Catatan:
book-tracker yang baru saja kamu buat akan menjadi landasan untuk tutorial-tutorial berikutnya. Repositori ini akan terus digunakan dan berkembang seiring tutorial yang kamu ikuti.Selamat! Kamu sudah menyelesaikan tutorial tentang penggunaan Git, GitHub, instalasi IDE, dan pengembangan proyek dengan Django.
Pesan tambahan, pastikan kamu memahami setiap kode yang kamu tulis, ya. Jangan sampai hanya asal copy-paste tanpa memahaminya terlebih dahulu. Apabila nanti kamu mengalami kesulitan, jangan ragu untuk bertanya ke asisten dosen ataupun teman. Semangat terus dalam menjalani perkuliahan PBP selama satu semester ke depan, dan jangan lupa untuk menikmati setiap prosesnya. Good luck!
"},{"location":"tutorial/tutorial-0/#referensi-tambahan","title":"Referensi Tambahan","text":"Tutorial ini dikembangkan berdasarkan PBP Ganjil 2024 yang ditulis oleh Tim Pengajar Pemrograman Berbasis Platform 2024. Segala tutorial serta instruksi yang dicantumkan pada repositori ini dirancang sedemikian rupa sehingga mahasiswa yang sedang mengambil mata kuliah Pemrograman Berbasis Platform dapat menyelesaikan tutorial saat sesi lab berlangsung.
"},{"location":"tutorial/tutorial-1/","title":"Tutorial 1: Pengenalan Aplikasi Django dan Model-View-Template (MVT) pada Django","text":"Pemrograman Berbasis Platform (CSGE602022) \u2014 diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Genap 2023/2024
"},{"location":"tutorial/tutorial-1/#tujuan-pembelajaran","title":"Tujuan Pembelajaran","text":"Setelah menyelesaikan tutorial ini, mahasiswa diharapkan untuk dapat:
urls.pyUntuk membantumu mengerjakan tutorial 1 dengan baik, kami mengharapkan hasil pengerjaan tutorial 0 sebagai berikut.
book-tracker yang telah diinisiasi sebagai repositori lokal.Pada direktori utama book-tracker tersebut, terdapat beberapa berkas dan subdirektori berikut.
Subdirektori env.
Subdirektori proyek book_tracker. Berbeda dengan direktori utama, subdirektori ini terbentuk setelah menjalankan perintah
django-admin startproject book_tracker .\nBerkas .gitignore.
manage.py.requirements.txt.db.sqlite3.Struktur proyek book-tracker pada direktori lokal adalah sebagai berikut.
Pada repositori GitHub, pastikan repositori book-tracker memiliki berkas dan direktori berikut.
Direktori proyek book_tracker. Direktori ini hasil menjalankan perintah
django-admin startproject book_tracker .\nBerkas .gitignore.
manage.py.requirements.txt.Struktur proyek book-tracker pada repositori GitHub adalah sebagai berikut.
Dalam dunia pengembangan web, terdapat berbagai konsep dan arsitektur yang membantu dalam merancang dan mengembangkan aplikasi. Salah satu konsep yang umum digunakan adalah MVT (Model-View-Template).
"},{"location":"tutorial/tutorial-1/#apa-itu-konsep-mvt","title":"Apa Itu Konsep MVT?","text":"MVT adalah singkatan dari Model-View-Template. MVT adalah sebuah konsep arsitektur yang digunakan dalam pengembangan web untuk memisahkan komponen-komponen utama dari sebuah aplikasi. Konsep ini memungkinkan pengembang web untuk mengorganisasi dan mengelola kode dengan lebih terstruktur.
"},{"location":"tutorial/tutorial-1/#apa-itu-model","title":"Apa Itu Model?","text":"Model merupakan komponen dalam konsep MVT yang bertanggung jawab untuk mengatur dan mengelola data dari aplikasi. Model mewakili struktur data dan logika aplikasi yang berada di belakang tampilan. Model menghubungkan aplikasi dengan basis data dan mengatur interaksi dengan data tersebut.
"},{"location":"tutorial/tutorial-1/#apa-itu-view","title":"Apa Itu View?","text":"View merupakan komponen yang menangani logika presentasi dalam konsep MVT. View mengontrol bagaimana data yang dikelola oleh model akan ditampilkan kepada pengguna. Dalam konteks MVT, view berperan sebagai pengatur tampilan dan mengambil data dari model untuk disajikan kepada pengguna.
"},{"location":"tutorial/tutorial-1/#apa-itu-template","title":"Apa Itu Template?","text":"Template adalah komponen yang berfungsi untuk mengatur tampilan atau antarmuka pengguna. Template memisahkan kode HTML dari logika aplikasi. Dalam MVT, template digunakan untuk merancang tampilan yang akhirnya akan diisi dengan data dari model melalui view.
"},{"location":"tutorial/tutorial-1/#hubungan-antara-komponen-komponen-mvt","title":"Hubungan Antara Komponen-komponen MVT","text":"Secara ringkas, konsep MVT berjalan dalam kerangka berikut:
MVT memisahkan tugas antara logika aplikasi, tampilan, dan data, sehingga memungkinkan pengembang untuk bekerja pada setiap komponen secara terpisah.
Dengan pemisahan tugas yang jelas, kode menjadi lebih terorganisir dan mudah dikelola.
Kode dapat digunakan kembali dalam berbagai bagian aplikasi yang berbeda.
Struktur MVT mendukung skalabilitas dengan memungkinkan pengembangan paralel pada setiap komponen.
Catatan:
Dalam tutorial ini, akan dijelaskan mengenai konsep aplikasi dan proyek dalam Django.
Apa Itu Proyek dan Aplikasi dalam Django?
Proyek (Project) adalah keseluruhan proyek web yang kamu bangun dengan menggunakan Django. Proyek berisi berbagai aplikasi yang berfungsi secara bersama untuk menciptakan situs web atau aplikasi web yang lengkap.
Aplikasi (Apps) adalah unit modular yang melakukan tugas-tugas spesifik dalam suatu proyek Django. Setiap aplikasi dapat memiliki model, tampilan, template, dan URL yang terkait dengannya. Aplikasi memungkinkanmu untuk membagi fungsionalitas proyek menjadi bagian-bagian terpisah yang dapat dikelola secara independen.
Sebelum dimulai, kamu perlu mengingat kembali bahwa direktori utama adalah direktori terluar, sedangkan direktori proyek adalah direktori di dalam direktori utama. Perlu diingat bahwa keduanya memiliki nama yang hampir sama. Direktori utama memiliki nama book-tracker, sementara itu direktori proyek memiliki nama book_tracker. Perbedaan hanya terletak pada penggunaan dash (-) dan underscore (_).
Buka direktori utama book-tracker.
Sebelum memulai, pastikan kamu berada di direktori utama book-tracker yang telah dibuat pada tutorial sebelumnya.
Di dalam direktori ini, kamu akan melanjutkan pengembangan proyek Django.
Buka terminal atau command prompt dan pastikan direktori kerja kamu adalah direktori utama book-tracker.
Aktifkan virtual environment yang telah dibuat sebelumnya. Jalankan perintah berikut sesuai dengan sistem operasi perangkat kamu.
Windows:
env\\Scripts\\activate.bat\nUnix (Linux & Mac OS):
source env/bin/activate\nmain dalam Proyek Book Tracker","text":"Kamu akan membuat aplikasi baru bernama main dalam proyek book tracker.
python manage.py startapp main\nSetelah perintah di atas dijalankan, akan terbentuk direktori baru dengan nama main yang akan berisi struktur awal untuk aplikasimu.
Mungkin kamu cukup bingung dengan istilah direktori utama, direktori proyek, atau direktori aplikasi. Akan tetapi, seiring berjalannya waktu, kamu pasti bisa!
Daftarkan aplikasi main ke dalam proyek.
Buka berkas settings.py di dalam direktori proyek book_tracker.
INSTALLED_APPS.Tambahkan 'main' ke dalam daftar aplikasi yang ada.
INSTALLED_APPS = [\n ...,\n 'main',\n ...\n]\nDengan melakukan langkah-langkah tersebut, kamu telah mendaftarkan aplikasi main ke dalam proyek book tracker kamu sehingga proyekmu sudah mengenali bahwa terdapat aplikasi main yang dapat dijalankan.
Kamu akan membuat template main.html di dalam direktori baru bernama templates pada aplikasi main. Template ini akan digunakan untuk menampilkan data book tracker kamu.
Saat ini, aplikasi book tracker belum menampilkan data apapun. Data akan ditampilkan pada tutorial selanjutnya.
"},{"location":"tutorial/tutorial-1/#langkah-1-membuat-dan-mengisi-berkas-mainhtml","title":"Langkah 1: Membuat dan Mengisi Berkasmain.html","text":"Sebelum mulai, mari pahami secara singkat mengenai HTML. HTML (Hypertext Markup Language) adalah penanda bahasa yang digunakan untuk membuat struktur dan tampilan konten pada halaman web.
Hint: Kamu akan mempelajari HTML lebih lanjut di tutorial 4.
Buat direktori baru bernama templates di dalam direktori aplikasi main.
Di dalam direktori templates, buat berkas baru bernama main.html dengan isi sebagai berikut. Gantilah nilai yang sesuai dengan data kamu.
<h1>Book Tracker Page</h1>\n\n<h5>Name:</h5>\n<p>Pak Bepe</p>\n<!-- Ubahlah sesuai dengan nama kamu -->\n<h5>Class:</h5>\n<p>PBP A</p>\n<!-- Ubahlah sesuai dengan kelas kamu -->\nBuka berkas HTML di web browser.
Sebelum dihubungkan dengan aplikasi, cobalah membuka berkas main.html di web browser-mu.
Berikut merupakan contoh tampilan HTML yang diharapkan.
models.py dalam Aplikasi main","text":"Pada langkah ini, kamu akan mengubah berkas models.py yang terdapat di dalam direktori aplikasi main untuk mendefinisikan model baru.
Buka berkas models.py pada direktori aplikasi main.
Isi berkas models.py dengan kode berikut.
from django.db import models\n\nclass Book(models.Model):\n name = models.CharField(max_length=255)\n date_added = models.DateField(auto_now_add=True)\n page = models.IntegerField()\n description = models.TextField()\nPenjelasan Kode:
models.Model adalah kelas dasar yang digunakan untuk mendefinisikan model dalam Django.Book adalah nama model yang kamu definisikan.name (nama), date_added (tanggal tambah), page (halaman), dan description (deskripsi) adalah atribut atau field pada model. Setiap field memiliki tipe data yang sesuai seperti CharField, DateField, IntegerField, dan TextField.Apa itu migrasi model?
Bagaimana cara melakukan migrasi model?
python manage.py makemigrations\nmakemigrations menciptakan berkas migrasi yang berisi perubahan model yang belum diaplikasikan ke dalam basis data.
python manage.py migrate\nmigrate mengaplikasikan perubahan model yang tercantum dalam berkas migrasi ke basis data.
Setiap kali kamu melakukan perubahan pada model, seperti menambahkan atau mengubah atribut, kamu perlu melakukan migrasi untuk merefleksikan perubahan tersebut.
"},{"location":"tutorial/tutorial-1/#tutorial-menghubungkan-view-dengan-template","title":"Tutorial: Menghubungkan View dengan Template","text":"Dalam tutorial ini, kamu akan menghubungkan view dengan template menggunakan Django. Langkah-langkah ini akan menjelaskan bagaimana membuat fungsi view show_main dalam aplikasi main dan me-render template dengan data yang telah diambil dari model.
Kamu akan mengimpor modul yang diperlukan dan membuat fungsi view show_main.
Buka berkas views.py yang terletak di dalam berkas aplikasi main.
Tambahkan baris-baris impor berikut di bagian paling atas berkas apabila belum ada.
from django.shortcuts import render\nPenjelasan Kode:
from django.shortcuts import render berguna untuk mengimpor fungsi render dari modul django.shortcuts. Fungsi render digunakan untuk me-render tampilan HTML dengan menggunakan data yang diberikan.
show_main di bawah impor:def show_main(request):\n context = {\n 'name': 'Pak Bepe',\n 'class': 'PBP A'\n }\n\n return render(request, \"main.html\", context)\nPenjelasan Kode:
def show_main(request) merupakan deklarasi fungsi show_main, yang menerima parameter request. Fungsi ini akan mengatur permintaan HTTP dan mengembalikan tampilan yang sesuai.context adalah dictionary yang berisi data yang akan dikirimkan ke tampilan. Pada konteks ini, dua data disertakan, yaitu:
name: Data nama.class: Data kelas.return render(request, \"main.html\", context) berguna untuk me-render tampilan main.html dengan menggunakan fungsi render. Fungsi render mengambil tiga argumen:
request: Ini adalah objek permintaan HTTP yang dikirim oleh pengguna.main.html: Ini adalah nama berkas template yang akan digunakan untuk me-render tampilan.context: Ini adalah dictionary yang berisi data yang akan diteruskan ke tampilan untuk digunakan dalam penampilan dinamis.Sekarang, kamu akan mengubah template main.html agar dapat menampilkan data yang telah diambil dari model.
Buka berkas main.html yang telah dibuat sebelumnya dalam direktori templates pada direktori main.
Ubah nama dan kelas yang sebelumnya dibuat secara statis menjadi kode Django yang sesuai untuk menampilkan data.
...\n<h5>Name:</h5>\n<p>{{ name }}</p>\n<p></p>\n<h5>Class:</h5>\n<p>{{ class }}</p>\nPenjelasan Kode:
Sintaks Django {{ name }} dan {{ class }} digunakan untuk menampilkan nilai dari variabel yang telah didefinisikan dalam context.
Kamu akan mengatur routing URL agar aplikasi main dapat diakses melalui web browser.
main","text":"urls.py di dalam direktori main.urls.py dengan kode berikut.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]\nPenjelasan Kode dalam urls.py pada Aplikasi main:
urls.py pada aplikasi main bertanggung jawab untuk mengatur rute URL yang terkait dengan aplikasi main.path dari django.urls untuk mendefinisikan pola URL.show_main dari modul main.views sebagai tampilan yang akan ditampilkan ketika URL terkait diakses.app_name diberikan untuk memberikan nama unik pada pola URL dalam aplikasi.Kamu akan menambahkan rute URL dalam urls.py pada proyek untuk menghubungkannya ke tampilan main.
urls.py di dalam direktori proyek book_tracker, bukan yang ada di dalam direktori aplikasi main.include dari django.urls....\nfrom django.urls import path, include\n...\nmain di dalam variabel urlpatterns.urlpatterns = [\n ...\n path('', include('main.urls')),\n ...\n]\nPenjelasan:
urls.py pada proyek bertanggung jawab untuk mengatur rute URL dalam skala proyek.include digunakan untuk mengimpor rute URL dari aplikasi lain (dalam hal ini, dari aplikasi main) ke dalam berkas urls.py proyek.'' akan diarahkan ke rute yang didefinisikan dalam berkas urls.py aplikasi main. Path URL dibiarkan berupa string kosong agar halaman aplikasi main dapat diakses secara langsung.Sebagai bayangan, apabila kamu menggunakan path 'main/' pada contoh di atas, maka kamu perlu mengakses halaman http://localhost:8000/main/ untuk mengakses halaman aplikasi main. Karena path yang ditentukan adalah '', maka kamu dapat mengakses aplikasi main melalui URL http://localhost:8000/ saja.
Jalankan proyek Django dengan menjalankan perintah python manage.py runserver pada terminal atau command prompt di direktori utama.
Bukalah http://localhost:8000/ di web browser favoritmu untuk melihat halaman yang sudah kamu buat.
Dengan langkah-langkah di atas, kamu telah berhasil mengimplementasikan tampilan dasar dalam aplikasi main dan menghubungkannya dengan rute URL proyek. Pastikan kamu memahami setiap langkah dan informasi yang diberikan untuk mengaktifkan tampilan dalam proyek Django-mu
urls.py pada aplikasi dan urls.py pada proyek?","text":"urls.py pada aplikasi mengatur rute URL spesifik untuk fitur-fitur dalam aplikasi tersebuturls.py pada proyek mengarahkan rute URL tingkat proyek dan dapat mengimpor rute URL dari berkas urls.py aplikasi-aplikasi, memungkinkan aplikasi dalam proyek Django untuk bersifat modular dan terpisah.Unit testing dapat digunakan untuk mengecek apakah kode yang dibuat bekerja sesuai dengan keinginan. Hal ini juga berguna ketika kamu melakukan perubahan kode. Dengan menggunakan tes, kamu bisa mengecek apakah perubahan yang dilakukan dapat menyebabkan perilaku yang tidak diinginkan pada aplikasi.
"},{"location":"tutorial/tutorial-1/#langkah-1-membuat-unit-test","title":"Langkah 1: Membuat Unit Test","text":"tests.py pada direktori aplikasi main.tests.py dengan kode berikut.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')\nPenjelasan:
test_main_url_is_exist adalah tes untuk mengecek apakah path URL '' dapat diakses. Path '' artinya hanya http://localhost:8000/ tanpa path tambahan di bagian belakang URL.test_main_using_main_template adalah tes untuk mengecek apakah halaman '' di-render menggunakan template main.html.python manage.py test\nFound 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'...\nSelamat! Kamu telah berhasil menulis Django Test dan menjalankannya.
"},{"location":"tutorial/tutorial-1/#penutup","title":"Penutup","text":"Huruf U menandakan bahwa terdapat berkas baru yang belum dilacak oleh Git. Huruf M menandakan bahwa terdapat berkas yang telah dilacak sebelumnya yang dimodifikasi.
add, commit dan push untuk memperbarui repositori GitHub.add, commit dan push.git add .\ngit commit -m \"<pesan_commit>\"\ngit push origin <branch_utama>\n<pesan_commit> sesuai dengan keinginan. Contoh: git commit -m \"tutorial 1 selesai\".Ubah <branch_utama> sesuai dengan nama branch utamamu. Contoh: git push origin main atau git push origin master.
Berikut struktur direktori GitHub setelah kamu menyelesaikan tutorial ini.
Tutorial ini dikembangkan berdasarkan PBP Ganjil 2024 yang ditulis oleh Tim Pengajar Pemrograman Berbasis Platform 2023/2024. Segala tutorial serta instruksi yang dicantumkan pada repositori ini dirancang sedemikian rupa sehingga mahasiswa yang sedang mengambil mata kuliah Pemrograman Berbasis Platform dapat menyelesaikan tutorial saat sesi lab berlangsung.
"},{"location":"tutorial/tutorial-2/","title":"Tutorial 2: Form dan Data Delivery","text":"Pemrograman Berbasis Platform (CSGE602022) \u2014 diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Genap 2023/2024
"},{"location":"tutorial/tutorial-2/#tujuan-pembelajaran","title":"Tujuan Pembelajaran\u200b","text":"Setelah menyelesaikan tutorial ini, mahasiswa diharapkan untuk dapat:
XML dan JSON sebagai salah satu metode data deliveryformXML dan JSONIDDalam 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.
"},{"location":"tutorial/tutorial-2/#xml-extensible-markup-language","title":"XML (Extensible Markup Language)","text":"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.
Contoh Format XML:
<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<person>\n <name>Alice Johnson</name>\n <age>25</age>\n <address>\n <street>123 Main St</street>\n <city>Los Angeles</city>\n <zip>90001</zip>\n </address>\n</person>\nXML di atas sangatlah self-descriptive:
name)age)address)street)city)zip)Dokumen XML membentuk struktur seperti tree yang dimulai dari root, lalu branch, hingga berakhir pada leaves. Dokumen XML harus mengandung sebuah root element yang merupakan parent dari elemen lainnya. Pada contoh di atas, <person> adalah root element.
Baris <?xml version=\"1.0\" encoding=\"UTF-8\"?> biasanya disebut sebagai XML Prolog. XML Prolog bersifat opsional, akan tetapi jika ada maka posisinya harus berada di awal dokumen XML. Pada dokumen XML, semua elemen wajib memiliki closing tag. Tag pada XML sifatnya case sensitive, sehingga tag <person> dianggap berbeda dengan tag <Person>.
JSON adalah singkatan dari JavaScript Object Notation. JSON didesain menjadi self-describing, sehingga JSON sangat mudah untuk dimengerti. JSON digunakan pada banyak aplikasi web maupun mobile, yaitu untuk menyimpan dan mengirimkan data. Sintaks JSON merupakan turunan dari Object JavaScript. Akan tetapi format JSON berbentuk text, sehingga kode untuk membaca dan membuat JSON banyak terdapat dibanyak bahasa pemrograman.
Contoh format JSON:
{\n \"name\": \"Alice Johnson\",\n \"age\": 25,\n \"address\": {\n \"street\": \"123 Main St\",\n \"city\": \"Los Angeles\",\n \"zip\": \"90001\"\n }\n}\nData pada JSON disimpan dalam bentuk key dan value. Pada contoh di atas yang menjadi key adalah name, age, dan address. Value dapat berupa tipe data primitif (string, number, boolean) ataupun berupa objek.
Sebelum kamu memulai, serta untuk membantumu mengikuti tutorial 2 dengan baik, kami mengharapkan beberapa hasil berikut dari tutorial 1:
book-tracker secara lokal adalah sebagai berikut.book-tracker pada GitHub adalah sebagai berikut.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.
templates pada root folder (direktori utama) dan buatlah sebuah berkas HTML baru bernama base.html. Berkas base.html berfungsi sebagai template dasar yang dapat digunakan sebagai kerangka umum untuk halaman web lainnya di dalam proyek. Isilah berkas base.html tersebut dengan kode berikut:{% load static %}\n<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n {% block meta %} {% endblock meta %}\n </head>\n\n <body>\n {% block content %} {% endblock content %}\n </body>\n</html>\nBaris-baris yang dikurung dalam {% ... %} disebut dengan template tags Django. Baris-baris inilah yang akan berfungsi untuk memuat data secara dinamis dari Django ke HTML.
settings.py yang ada pada direktori proyek (book_tracker) dan carilah baris yang mengandung variabel TEMPLATES. Sesuaikan kode yang ada dengan potongan kode berikut agar berkas base.html terdeteksi sebagai berkas template....\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...\ntemplates yang ada pada direktori main (main/templates/), ubahlah kode berkas main.html yang telah dibuat di tutorial sebelumnya menjadi sebagai berikut.{% extends 'base.html' %} {% block content %}\n<h1>Book Tracker Page</h1>\n\n<h5>Name:</h5>\n<p>{{name}}</p>\n\n<h5>Class:</h5>\n<p>{{class}}</p>\n{% endblock content %}\nPerhatikan bahwa kode diatas merupakan kode yang sama dengan kode pada main.html pada tutorial sebelumnya. Perbedaannya adalah pada kode diatas, kita menggunakan base.html sebagai template utama.
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.
main dengan nama forms.py untuk membuat struktur form yang dapat menerima data buku baru. Tambahkan kode berikut ke dalam berkas forms.py.from django.forms import ModelForm\nfrom main.models import Book\n\nclass BookForm(ModelForm):\n class Meta:\n model = Book\n fields = [\"name\", \"page\", \"description\"]\nPenjelasan Kode:
model = Book untuk menunjukkan model yang akan digunakan untuk form. Ketika data dari form disimpan, isi dari form akan disimpan menjadi sebuah objek Book.fields = [\"name\", \"page\", \"description\"] untuk menunjukkan field dari model Book yang digunakan untuk form. Field date_added tidak dimasukkan ke list fields karena tanggal ditambahkan secara otomatis.
Buka berkas views.py yang ada pada folder main dan tambahkan beberapa import berikut pada bagian paling atas.
from django.shortcuts import render, redirect # Tambahkan import redirect di baris ini\nfrom main.forms import BookForm\nfrom main.models import Book\ncreate_book yang menerima parameter request. Tambahkan potongan kode di bawah ini untuk menghasilkan formulir yang dapat menambahkan data buku secara otomatis ketika data di-submit dari form.def create_book(request):\n form = BookForm(request.POST or None)\n\n if form.is_valid() and request.method == \"POST\":\n form.save()\n return redirect('main:show_main')\n\n context = {'form': form}\n return render(request, \"create_book.html\", context)\nPenjelasan Kode:
form = BookForm(request.POST or None) digunakan untuk membuat BookForm baru dengan memasukkan QueryDict berdasarkan input dari user pada request.POST.form.is_valid() digunakan untuk memvalidasi isi input dari form tersebut.form.save() digunakan untuk membuat dan menyimpan data dari form tersebut.return redirect('main:show_main') digunakan untuk melakukan redirect ke fungsi show_main pada views aplikasi main setelah data form berhasil disimpan.
Ubahlah fungsi show_main yang sudah ada pada berkas views.py menjadi seperti berikut.
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)\nPenjelasan Kode:
Fungsi Book.objects.all() digunakan untuk mengambil seluruh objek Book yang tersimpan pada database.
urls.py yang ada pada direktori main dan import fungsi create_book yang sudah kamu buat tadi.from main.views import show_main, create_book\nurlpatterns pada urls.py di main untuk mengakses fungsi yang sudah di-import pada poin sebelumnya.urlpatterns = [\n ...\n path('create-book', create_book, name='create_book'),\n]\ncreate_book.html pada direktori main/templates. Isi create_book.html dengan kode berikut.{% extends 'base.html' %} {% block content %}\n<h1>Add New Book</h1>\n\n<form method=\"POST\">\n {% csrf_token %}\n <table>\n {{ form.as_table }}\n <tr>\n <td></td>\n <td>\n <input type=\"submit\" value=\"Add Book\" />\n </td>\n </tr>\n </table>\n</form>\n\n{% endblock %}\nPenjelasan Kode:
<form method=\"POST\"> digunakan untuk menandakan block untuk form dengan metode POST.{% csrf_token %} adalah token yang berfungsi sebagai security. Token ini di-generate secara otomatis oleh Django untuk mencegah serangan berbahaya.{{ form.as_table }} adalah template tag yang digunakan untuk menampilkan fields form yang sudah dibuat pada forms.py sebagai table.<input type=\"submit\" value=\"Add Book\"/> digunakan sebagai tombol submit untuk mengirimkan request ke view create_book(request).
Buka main.html dan tambahkan kode berikut di dalam {% block content %} untuk menampilkan data produk dalam bentuk table serta tombol \"Add New Book\" yang akan redirect ke halaman form.
...\n<table>\n <tr>\n <th>Name</th>\n <th>Page</th>\n <th>Description</th>\n <th>Date Added</th>\n </tr>\n\n {% comment %} Berikut cara memperlihatkan data produk di bawah baris ini\n {%endcomment %} {% for book in books %}\n <tr>\n <td>{{book.name}}</td>\n <td>{{book.page}}</td>\n <td>{{book.description}}</td>\n <td>{{book.date_added}}</td>\n </tr>\n {% endfor %}\n</table>\n\n<br />\n\n<a href=\"{% url 'main:create_book' %}\">\n <button>Add New Book</button>\n</a>\n{% endblock content %}\npython manage.py runserver dan bukalah http://localhost:8000/ di browser favoritmu. Coba tambahkan beberapa data produk baru dan seharusnya kamu dapat melihat data yang ditambahkan pada halaman utama aplikasi.views.py yang ada pada folder main dan tambahkan import HttpResponse dan Serializer pada bagian paling atas.from django.http import HttpResponse\nfrom django.core import serializers\nshow_xml dan buatlah sebuah variabel di dalam fungsi tersebut yang menyimpan hasil query dari seluruh data yang ada pada Book.def show_xml(request):\n data = Book.objects.all()\nHttpResponse yang berisi parameter data hasil query yang sudah diserialisasi menjadi XML dan parameter content_type=\"application/xml\".def show_xml(request):\n data = Book.objects.all()\n return HttpResponse(serializers.serialize(\"xml\", data), content_type=\"application/xml\")\nPenjelasan Kode:
serializers digunakan untuk translate objek model menjadi format lain seperti dalam fungsi ini adalah XML.
urls.py yang ada pada folder main dan import fungsi yang sudah kamu buat tadi.from main.views import show_main, create_book, show_xml\nurlpatterns untuk mengakses fungsi yang sudah diimpor tadi....\npath('xml/', show_xml, name='show_xml'),\n...\npython manage.py runserver dan bukalah http://localhost:8000/xml/ di browser favoritmu untuk melihat hasilnya.views.py yang ada pada folder main dan buatlah sebuah fungsi baru yang menerima parameter request dengan nama show_json dengan sebuah variabel di dalamnya yang menyimpan hasil query dari seluruh data yang ada pada Book.def show_json(request):\n data = Book.objects.all()\nHttpResponse yang berisi parameter data hasil query yang sudah diserialisasi menjadi JSON dan parameter content_type=\"application/json\".def show_json(request):\n data = Book.objects.all()\n return HttpResponse(serializers.serialize(\"json\", data), content_type=\"application/json\")\nurls.py yang ada pada folder main dan import fungsi yang sudah kamu buat tadi.from main.views import show_main, create_book, show_xml, show_json\nurlpatterns untuk mengakses fungsi yang sudah diimpor tadi....\npath('json/', show_json, name='show_json'),\n...\npython manage.py runserver dan bukalah http://localhost:8000/json/ (sesuaikan dengan path url yang dibuat) di browser favoritmu untuk melihat hasilnya.Buka views.py yang ada pada folder main dan buatlah dua fungsi baru yang menerima parameter _request_ dan id dengan nama show_xml_by_id dan show_json_by_id.
Buatlah sebuah variabel di dalam fungsi tersebut yang menyimpan hasil query dari data dengan id tertentu yang ada pada Book.
data = Book.objects.filter(pk=id)\nTambahkan return function berupa HttpResponse yang berisi parameter data hasil query yang sudah diserialisasi menjadi JSON atau XML dan parameter content_type dengan value \"application/xml\" (untuk format XML) atau \"application/json\" (untuk format JSON).
XML
def show_xml_by_id(request, id):\n data = Book.objects.filter(pk=id)\n return HttpResponse(serializers.serialize(\"xml\", data), content_type=\"application/xml\")\nJSON
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\")\nBuka urls.py yang ada pada folder main dan import fungsi yang sudah kamu buat tadi.
from main.views import show_main, create_book, show_xml, show_json, show_xml_by_id, show_json_by_id\nurlpatterns untuk mengakses fungsi yang sudah diimpor tadi....\npath('xml/<int:id>/', show_xml_by_id, name='show_xml_by_id'),\npath('json/<int:id>/', show_json_by_id, name='show_json_by_id'),\n...\npython manage.py runserver dan bukalah http://localhost:8000/xml/[id]/ atau http://localhost:8000/json/[id]/ di browser favoritmu untuk melihat hasilnya.Catatan: Sesuaikan [id] pada URL di atas dengan id objek yang ingin dilihat.
Pastikan server kamu sudah berjalan dengan perintah python manage.py runserver.
Buka Postman dan buatlah sebuah request baru dengan method GET dan url http://localhost:8000/xml/ atau http://localhost:8000/json/ untuk mengetes apakah data terkirimkan dengan baik.
Panduan Instalasi Postman dapat dilihat pada Laman Resmi Postman.
Contoh:
Klik tombol Send untuk mengirimkan request tersebut.
Kamu akan melihat hasil response dari request tersebut pada bagian bawah Postman.
Sebelum melakukan langkah ini, pastikan struktur direktori lokal sudah benar. Selanjutnya, lakukan add, commit dan push untuk memperbarui repositori GitHub.
Jalankan perintah berikut untuk melakukan add, commit dan push.
git add .\ngit commit -m \"<pesan_commit>\"\ngit push -u origin <branch_utama>\n<pesan_commit> sesuai dengan keinginan. Contoh: git commit -m \"tutorial 2 selesai\".<branch_utama> sesuai dengan nama branch utamamu. Contoh: git push -u origin main atau git push -u origin master.Tutorial ini dikembangkan berdasarkan PBP Ganjil 2024 yang ditulis oleh Tim Pengajar Pemrograman Berbasis Platform 2024. Segala tutorial serta instruksi yang dicantumkan pada repositori ini dirancang sedemikian rupa sehingga mahasiswa yang sedang mengambil mata kuliah Pemrograman Berbasis Platform dapat menyelesaikan tutorial saat sesi lab berlangsung.
"},{"location":"tutorial/tutorial-3/","title":"Tutorial 3: Autentikasi, Session, dan Cookies","text":"Pemrograman Berbasis Platform (CSGE602022) \u2014 diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Genap 2023/2024
"},{"location":"tutorial/tutorial-3/#tujuan-pembelajaran","title":"Tujuan Pembelajaran","text":"Setelah menyelesaikan tutorial ini, kamu diharapkan untuk dapat:
HTTP (HyperText Transfer Protocol) adalah protokol yang digunakan untuk berkomunikasi antara client dan server. HTTP bersifat stateless yang berarti setiap transaksi/aktivitas yang dilakukan dianggap sebagai transaksi/aktivitas yang benar-benar baru, sehingga tidak ada data sebelumnya yang disimpan untuk transaksi/aktivitas saat ini.
Beberapa konsep dasar mengenai HTTP:
Client/Server: Interaksi dilakukan antar client/server. Klien adalah pihak yang melakukan request dan server adalah pihak yang memberikan response.
Stateless: Setiap aktivitas (request/response) bersifat independen, tidak tersimpan pada aktivitas terdahulu.
OSI Layer/Model: Model Open Systems Interconnection (OSI) menjelaskan 7 lapisan yang digunakan sistem komputer untuk berkomunikasi melalui jaringan. Model 7-layer OSI terdiri dari Application Layer, Presentation Layer, Session Layer, Transport Layer, Network Layer, Data Link Layer, dan Physical Layer.
Application Layer: Pada OSI Model yang disinggung di atas, website berjalan pada application layer. Sedangkan, proses request/response terjadi pada transport Layer yang umumnya menggunakan protokol TCP yang menentukan bagaimana data akan dikirim. Application Layer tidak peduli apa yang dilakukan oleh transport Layer (bagaimana data dikirim, diolah, dsb) karena application layer hanya berfokus kepada request dan response.
Lapisan OSI lainnya akan diajarkan pada mata kuliah Jaringan Komputer/Jaringan Komunikasi Data. Kamu dapat mencarinya sendiri jika kamu penasaran. \ud83d\ude09
Client Actions Method: Terdapat metode-metode yang digunakan oleh client saat melakukan request. Contoh: GET, POST, PUT, DELETE, dll. Penjelasan lebih detail dapat dibaca di sini.
Server Status Code: Merupakan status kode yang diberikan oleh server terhadap suatu request pada sebuah halaman web. Contoh: 200 (OK), 404 (Page Not Found), 500 (Internal Server Error), dsb. Penjelasan lebih detail dapat dibaca di sini.
Headers: Merupakan informasi kecil yang dikirim bersamaan dengan request dan response. Informasi-informasi tersebut berguna sebagai data tambahan yang digunakan untuk memproses request/response. Contoh: Pada headers, terdapat content-type:json. Artinya, tipe konten yang diminta/dikirim adalah json. Headers juga menyimpan data cookies.
Semua komunikasi antara klien dan server dilakukan melalui protokol HTTP, di mana HTTP merupakan stateless protocol. Artinya state yang satu dengan yang lain tidak berhubungan (independen). Hal ini mengharuskan komputer klien yang menjalankan browser untuk membuat koneksi TCP ke server setiap kali melakukan request.
Tanpa adanya koneksi persisten antara klien dan server, software pada setiap sisi (endpoint) tidak dapat bergantung hanya pada koneksi TCP untuk melakukan holding state atau holding session state.
"},{"location":"tutorial/tutorial-3/#apa-yang-dimaksud-dengan-holding-state","title":"Apa yang dimaksud dengan holding state?","text":"Sebagai contoh, kamu ingin mengakses suatu halaman A pada suatu web yang mensyaratkan pengaksesnya sudah login ke dalam web. Kemudian kamu login ke web tersebut dan berhasil membuka halaman A. Saat ingin pindah ke halaman B pada web yang sama, tanpa adanya suatu proses holding state maka kamu akan diminta untuk login kembali. Begitu yang akan terjadi setiap kali kamu mengakses halaman yang berbeda padahal masih pada web yang sama.
Proses memberitahu \"siapa\" yang sedang login dan menyimpan data ini dikenal sebagai bentuk dialog antara klien-server dan merupakan dasar session - a semi-permanent exchange of information. Merupakan hal yang sulit untuk membuat HTTP melakukan holding state (karena HTTP merupakan stateless protocol). Oleh karena itu, dibutuhkan teknik untuk mengatasi masalah tersebut, yaitu Cookie dan Session.
"},{"location":"tutorial/tutorial-3/#cara-melakukan-holding-state","title":"Cara melakukan holding state?","text":"Salah satu cara yang paling banyak digunakan untuk melakukan holding state adalah dengan menggunakan session ID yang disimpan sebagai cookie pada komputer klien. Session ID dapat dianggap sebagai suatu token (barisan karakter) untuk mengenali session yang unik pada aplikasi web tertentu. Daripada menyimpan semua jenis informasi sebagai cookies pada klien seperti username, nama, dan password, hanya Session ID yang disimpan.
Session ID ini kemudian dapat dipetakan ke suatu struktur data pada sisi web server. Pada struktur data tersebut, kamu dapat menyimpan semua informasi yang kamu butuhkan. Pendekatan ini jauh lebih aman untuk menyimpan informasi mengenai pengguna, daripada menyimpannya pada cookie. Dengan cara ini, informasi tidak dapat disalahgunakan oleh klien atau koneksi yang mencurigakan.
Selain itu, pendekatan ini lebih \"tepat\" jika data yang akan disimpan ada banyak. Hal itu karena cookie hanya dapat menyimpan maksimal 4 KB data. Bayangkan kamu sudah login ke suatu web/aplikasi dan mendapat session ID (session identifier). Untuk dapat melakukan holding state pada HTTP yang stateless, browser biasanya mengirimkan suatu session ID ke server pada setiap request. Dengan begitu, setiap kali datang suatu request, maka server akan bereaksi (kurang lebih) \"Oh, ini orang yang tepat!\". Kemudian server akan mencari informasi state di memori server atau di database berdasarkan session ID yang didapat, lalu mengembalikan data yang diminta.
Perbedaan penting yang perlu diingat adalah data cookie disimpan pada sisi klien, sedangkan data session biasanya disimpan pada sisi server. Untuk pembahasan lebih detail mengenai stateless, stateful, cookie, dan session dapat dibaca di sini.
Berikut tabel singkat yang menjelaskan perbedaan antara cookies, session, dan local storage secara singkat.
Cookies Local Storage Sessions Kapasitas 4 KB 5 MB 5 MB Teknologi Browser HTML4/HTML5 HTML5 HTML5 Aksesibilitas Semua window Semua window Tab yang sama Kedaluwarsa Diatur manual Selamanya Saat tab ditutupBeberapa tautan video yang dapat memperkaya pengetahuan terkait materi ini:
Sebelum kamu memulai, serta untuk membantumu mengikuti tutorial 3 dengan baik, kami mengharapkan beberapa hasil berikut dari tutorial 2:
book-tracker secara lokal adalah sebagai berikut.book-tracker pada GitHub adalah sebagai berikut.Pada tutorial sebelumnya, kita sudah mencoba membuat sebuah form untuk menambahkan suatu buku. Bagaimana? Mudah kan? Pada tutorial ini kita akan membuat halaman utama (main) menjadi restricted dengan cara membuat akun untuk pengguna. Sehingga, pengguna yang ingin mengakses halaman utama main harus melakukan login terlebih dahulu agar mendapatkan akses.
Aktifkan virtual environment terlebih dahulu pada terminal. (Hint: Ingat tutorial 0!)
Buka views.py yang ada pada subdirektori main pada proyek kamu. Tambahkan import redirect, UserCreationForm, dan messages pada bagian paling atas.
from django.shortcuts import redirect\nfrom django.contrib.auth.forms import UserCreationForm\nfrom django.contrib import messages\nPenjelasan Kode:
UserCreationForm adalah impor formulir bawaan yang memudahkan pembuatan formulir pendaftaran pengguna dalam aplikasi web. Dengan formulir ini, pengguna baru dapat mendaftar dengan mudah di situs web Anda tanpa harus menulis kode dari awal.
register di bawah ini ke dalam views.py. Fungsi ini berfungsi untuk menghasilkan formulir registrasi secara otomatis dan menghasilkan akun pengguna ketika data di-submit dari form.def register(request):\n form = UserCreationForm()\n\n if request.method == \"POST\":\n form = UserCreationForm(request.POST)\n if form.is_valid():\n form.save()\n messages.success(request, 'Your account has been successfully created!')\n return redirect('main:login')\n context = {'form':form}\n return render(request, 'register.html', context)\nPenjelasan Kode:
form = UserCreationForm(request.POST) digunakan untuk membuat UserCreationForm baru dari yang sudah di-impor sebelumnya dengan memasukkan QueryDict berdasarkan input dari user pada request.POST.form.is_valid() digunakan untuk memvalidasi isi input dari form tersebut.form.save() digunakan untuk membuat dan menyimpan data dari form tersebut.messages.success(request, 'Your account has been successfully created!') digunakan untuk menampilkan pesan kepada pengguna setelah melakukan suatu aksi.return redirect('main:show_main') digunakan untuk melakukan redirect setelah data form berhasil disimpan.
Buatlah berkas HTML baru dengan nama register.html pada direktori main/templates. Isi dari register.html dapat kamu isi dengan template berikut.
{% extends 'base.html' %} \n\n{% block meta %}\n<title>Register</title>\n{% endblock meta %} \n\n{% block content %}\n\n<div class=\"login\">\n <h1>Register</h1>\n\n <form method=\"POST\">\n {% csrf_token %}\n <table>\n {{ form.as_table }}\n <tr>\n <td></td>\n <td><input type=\"submit\" name=\"submit\" value=\"Daftar\" /></td>\n </tr>\n </table>\n </form>\n\n {% if messages %}\n <ul>\n {% for message in messages %}\n <li>{{ message }}</li>\n {% endfor %}\n </ul>\n {% endif %}\n</div>\n\n{% endblock content %}\nurls.py yang ada pada subdirektori main dan impor fungsi yang sudah kamu buat tadi.from main.views import register\nurlpatterns untuk mengakses fungsi yang sudah diimpor tadi. urlpatterns = [\n ...\n path('register/', register, name='register'),\n ]\nKita sudah menambahkan formulir registrasi akun dan membuat mekanisme register. Selanjutnya, kita akan membuat form login agar pengguna dapat melakukan autentikasi akun.
views.py yang ada pada subdirektori main. Tambahkan import authenticate dan login pada bagian paling atas.from django.contrib.auth import authenticate, login\nPenjelasan Kode:
Singkatnya, fungsi authenticate dan login yang diimport diatas adalah fungsi bawaan Django yang dapat digunakan untuk melakukan autentikasi dan login (jika autentikasi berhasil). Selengkapnya dapat dibaca di sini.
login_user di bawah ini ke dalam views.py. Fungsi ini berfungsi untuk mengautentikasi pengguna yang ingin login.def login_user(request):\n if request.method == 'POST':\n username = request.POST.get('username')\n password = request.POST.get('password')\n user = authenticate(request, username=username, password=password)\n if user is not None:\n login(request, user)\n return redirect('main:show_main')\n else:\n messages.info(request, 'Sorry, incorrect username or password. Please try again.')\n context = {}\n return render(request, 'login.html', context)\nPenjelasan Kode:
authenticate(request, username=username, password=password) digunakan untuk melakukan autentikasi pengguna berdasarkan username dan password yang diterima dari permintaan (request) yang dikirim oleh pengguna saat login.
login.html pada direktori main/templates. Isi dari login.html dapat kamu isi dengan template berikut.{% extends 'base.html' %}\n\n{% block meta %}\n<title>Login</title>\n{% endblock meta %} \n\n{% block content %}\n<div class=\"login\">\n <h1>Login</h1>\n\n <form method=\"POST\" action=\"\">\n {% csrf_token %}\n <table>\n <tr>\n <td>Username:</td>\n <td>\n <input\n type=\"text\"\n name=\"username\"\n placeholder=\"Username\"\n class=\"form-control\"\n />\n </td>\n </tr>\n\n <tr>\n <td>Password:</td>\n <td>\n <input\n type=\"password\"\n name=\"password\"\n placeholder=\"Password\"\n class=\"form-control\"\n />\n </td>\n </tr>\n\n <tr>\n <td></td>\n <td><input class=\"btn login_btn\" type=\"submit\" value=\"Login\" /></td>\n </tr>\n </table>\n </form>\n\n {% if messages %}\n <ul>\n {% for message in messages %}\n <li>{{ message }}</li>\n {% endfor %}\n </ul>\n {% endif %} Don't have an account yet?\n <a href=\"{% url 'main:register' %}\">Register Now</a>\n</div>\n\n{% endblock content %}\nurls.py yang ada pada subdirektori main dan import fungsi yang sudah kamu buat tadi.from main.views import login_user\nurlpatterns untuk mengakses fungsi yang sudah diimpor tadi.urlpatterns = [\n ...\n path('login/', login_user, name='login'),\n]\nKita sudah menambahkan form login akun dan membuat mekanisme login. Selanjutnya, kita akan membuat mekanisme logout dan menambahkan tombol logout pada halaman main.
views.py yang ada pada subdirektori main. Tambahkan import logout ini pada bagian paling atas.from django.contrib.auth import logout\nviews.py. Fungsi ini berfungsi untuk melakukan mekanisme logout.def logout_user(request):\n logout(request)\n return redirect('main:login')\nPenjelasan Kode:
logout(request) digunakan untuk menghapus sesi pengguna yang saat ini masuk.return redirect('main:login') mengarahkan pengguna ke halaman login dalam aplikasi Django.
Bukalah berkas main.html yang ada pada direktori main/templates.
Tambahkan potongan kode di bawah ini setelah hyperlink tag untuk Add New Book pada berkas main.html.
...\n<a href=\"{% url 'main:logout' %}\">\n <button>Logout</button>\n</a>\n...\nurls.py yang ada pada subdirektori main dan import fungsi yang sudah kamu buat tadi.from main.views import logout_user\nurlpatterns untuk mengakses fungsi yang sudah diimpor tadi.urlpatterns = [\n ...\n path('logout/', logout_user, name='logout'),\n]\nKita sudah membuat mekanisme logout dan menyelesaikan sistem autentikasi dalam proyek ini.
views.py yang ada pada subdirektori main dan tambahkan import login_required pada bagian paling atas.from django.contrib.auth.decorators import login_required\nPenjelasan Kode: Kode from django.contrib.auth.decorators import login_required digunakan untuk mengimpor sebuah decorator yang bisa mengharuskan pengguna masuk (login) terlebih dahulu sebelum dapat mengakses suatu halaman web.
@login_required(login_url='/login') di atas fungsi show_main agar halaman main hanya dapat diakses oleh pengguna yang sudah login (terautentikasi)....\n@login_required(login_url='/login')\ndef show_main(request):\n...\nSetelah melakukan restriksi akses halaman main, jalankan proyek Django-mu dengan perintah python manage.py runserver dan bukalah http://localhost:8000/ di browser favoritmu untuk melihat hasilnya. Seharusnya halaman yang muncul bukanlah daftar buku di halaman main, tetapi akan di-redirect ke halaman login.
Sekarang, kita akan melihat penggunaan cookies dengan menambahkan data last login dan menampilkannya ke halaman main.
Lakukan logout terlebih dahulu apabila kamu sedang menjalankan aplikasi Django-mu.
Buka kembali views.py yang ada pada subdirektori main. Tambahkan import HttpResponseRedirect, reverse, dan datetime pada bagian paling atas.
import datetime\nfrom django.http import HttpResponseRedirect\nfrom django.urls import reverse\nlogin_user, kita akan menambahkan fungsionalitas menambahkan cookie yang bernama last_login untuk melihat kapan terakhir kali pengguna melakukan login. Caranya adalah dengan mengganti kode yang ada pada blok if user is not None menjadi potongan kode berikut....\nif user is not None:\n login(request, user)\n response = HttpResponseRedirect(reverse(\"main:show_main\"))\n response.set_cookie('last_login', str(datetime.datetime.now()))\n return response\n...\nPenjelasan Kode:
login(request, user) berfungsi untuk melakukan login terlebih dahuluresponse = HttpResponseRedirect(reverse(\"main:show_main\")) untuk membuat responseresponse.set_cookie('last_login', str(datetime.datetime.now())) berfungsi untuk membuat cookie last_login dan menambahkannya ke dalam responsePerhatikan indentasi kode kamu, pastikan tidak terdapat dead code pada fungsi tersebut.
show_main, tambahkan potongan kode 'last_login': request.COOKIES['last_login'] ke dalam variabel context. Berikut adalah contoh kode yang sudah diubah.context = {\n 'name': 'Pak Bepe',\n 'class': 'PBP A',\n 'books': books,\n 'last_login': request.COOKIES['last_login'],\n}\nPenjelasan Kode:
'last_login': request.COOKIES['last_login'] berfungsi menambahkan informasi cookie last_login pada response yang akan ditampilkan di halaman web.
logout_user menjadi seperti potongan kode berikut.def logout_user(request):\n logout(request)\n response = HttpResponseRedirect(reverse('main:login'))\n response.delete_cookie('last_login')\n return response\nPenjelasan Kode:
response.delete_cookie('last_login') berfungsi untuk menghapus cookie last_login saat pengguna melakukan logout.
main.html dan tambahkan potongan kode berikut di setelah tombol logout untuk menampilkan data last login....\n<h5>Sesi terakhir login: {{ last_login }}</h5>\n...\nSilakan refresh halaman login (atau jalankan proyek Django-mu dengan perintah python manage.py runserver jika kamu belum menjalankan proyekmu) dan cobalah untuk login. Data last login kamu akan muncul di halaman main.
Jika kamu menggunakan browser Google Chrome, untuk melihat data cookie last_login, kamu dapat mengakses fitur inspect element dan membuka bagian Application/Storage. Klik bagian Cookies dan kamu dapat melihat data cookies yang tersedia. Selain last_login, kamu juga dapat melihat data sessionid dan csrftoken. Berikut adalah contoh tampilannya.
Sebelum melanjutkan ke tutorial berikutnya, cobalah untuk membuat satu akun pada halaman web kamu.
"},{"location":"tutorial/tutorial-3/#tutorial-menghubungkan-model-book-dengan-user","title":"Tutorial: Menghubungkan ModelBook dengan User","text":"Kamu perlu mengikuti tutorial secara berurut dari awal sebelum menjalankan bagian berikut. Jika kamu tidak mengikuti tutorial secara berurut, maka kami tidak bertanggung jawab atas error di luar pembahasan tutorial yang dapat muncul dari bagian tutorial berikut.
Terakhir, kita akan menghubungkan setiap objek Book yang akan dibuat dengan pengguna yang membuatnya, sehingga pengguna yang sedang terotorisasi hanya melihat buku-buku yang telah dibuat sendiri. Untuk itu, ikuti langkah-langkah berikut:
models.py yang ada pada subdirektori main dan tambahkan kode berikut pada dibawah baris kode untuk mengimpor model:...\nfrom django.contrib.auth.models import User\n...\nBook yang sudah dibuat, tambahkan potongan kode berikut:class Book(models.Model):\n user = models.ForeignKey(User, on_delete=models.CASCADE)\n ...\nPenjelasan Kode:
Potongan kode diatas berfungsi untuk menghubungkan satu buku dengan satu user melalui sebuah relationship, dimana sebuah buku pasti terasosiasikan dengan seorang user. Lebih lanjutnya terkait ForeignKey akan dipelajari pada mata kuliah Basis Data. Penjelasan lebih lanjut terkait ForeignKey pada Django dapat dilihat di sini.
views.py yang ada pada subdirektori main, dan ubah potongan kode pada fungsi create_book menjadi sebagai berikut:def create_book(request):\n form = BookForm(request.POST or None)\n\n if form.is_valid() and request.method == \"POST\":\n book = form.save(commit=False)\n book.user = request.user\n book.save()\n return redirect('main:show_main')\n\n context = {'form': form}\n return render(request, \"create_book.html\", context)\n ...\nPenjelasan Kode:
Parameter commit=False yang digunakan pada potongan kode diatas berguna untuk mencegah Django agar tidak langsung menyimpan objek yang telah dibuat dari form langsung ke database. Hal tersebut memungkinkan kita untuk memodifikasi terlebih dahulu objek tersebut sebelum disimpan ke database. Pada kasus ini, kita akan mengisi field user dengan objek User dari return value request.user yang sedang terotorisasi untuk menandakan bahwa objek tersebut dimiliki oleh pengguna yang sedang login.
show_main menjadi sebagai berikut.def show_main(request):\n books = Book.objects.filter(user=request.user)\n\n context = {\n 'name': request.user.username,\n ...\n }\n...\nPenjelasan Kode:
Book yang terasosiasikan dengan pengguna yang sedang login. Hal tersebut dilakukan dengan menyaring seluruh objek dengan hanya mengambil Book yang dimana field user terisi dengan objek User yang sama dengan pengguna yang sedang login.Kode request.user.username berfungsi untuk menampilkan username pengguna yang login pada halaman main.
Simpan semua perubahan, dan lakukan migrasi model dengan python manage.py makemigrations.
Seharusnya, akan muncul error saat melakukan migrasi model. Pilih 1 untuk menetapkan default value untuk field user pada semua row yang telah dibuat pada basis data.
python manage.py migrate untuk mengaplikasikan migrasi yang dilakukan pada poin sebelumnya.Jalankan proyek Django-mu dengan perintah python manage.py runserver dan bukalah http://localhost:8000/ di browser favoritmu untuk melihat hasilnya. Cobalah untuk membuat akun baru dan login dengan akun yang baru dibuat. Amatilah halaman utama, buku yang tadi telah dibuat dengan akun sebelumnya tidak akan ditampilkan di halaman pengguna akun yang baru saja kamu buat. Hal tersebut berarti kamu sudah berhasil menghubungkan objek Book dengan User yang membuatnya.
Selamat! Kamu telah menyelesaikan Tutorial 3 dengan baik. \ud83d\ude04
Setelah kamu menyelesaikan seluruh tutorial di atas, harapannya kamu sekarang lebih paham tentang penggunaan form, autentikasi, session, dan cookie pada framework Django.
main pada lokalmu terlihat seperti ini.Sebelum melakukan langkah ini, pastikan struktur direktori lokal sudah benar. Selanjunya, lakukan add, commit dan push untuk memperbarui repositori GitHub.
Jalankan perintah berikut untuk melakukan add, commit dan push.
git add .\ngit commit -m \"<pesan_commit>\"\ngit push -u origin <branch_utama>\n<pesan_commit> sesuai dengan keinginan. Contoh: git commit -m \"tutorial 3 selesai\".<branch_utama> sesuai dengan nama branch utamamu. Contoh: git push -u origin main atau git push -u origin master.Tutorial ini dikembangkan berdasarkan PBP Ganjil 2024 yang ditulis oleh Tim Pengajar Pemrograman Berbasis Platform 2023/2024. Segala tutorial serta instruksi yang dicantumkan pada repositori ini dirancang sedemikian rupa sehingga mahasiswa yang sedang mengambil mata kuliah Pemrograman Berbasis Platform dapat menyelesaikan tutorial saat sesi lab berlangsung.
"},{"location":"tutorial/tutorial-4/","title":"Tutorial 4: Desain Web Menggunakan HTML dan CSS3 & Metode Update dan Delete pada Data","text":"Pemrograman Berbasis Platform (CSGE602022) \u2014 diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Genap 2023/2024
"},{"location":"tutorial/tutorial-4/#tujuan-pembelajaran","title":"Tujuan Pembelajaran","text":"Setelah menyelesaikan tutorial ini, mahasiswa diharapkan untuk dapat:
HyperText Markup Language (HTML) adalah bahasa markup standar untuk dokumen agar dapat ditampilkan dalam browser web. HTML mendefinisikan struktur dari konten suatu website.
Silakan pelajari dan mencoba sendiri HTML pada referensi ini.
Perbedaan antara HTML dan HTML5 bisa kamu baca pada referensi ini.
"},{"location":"tutorial/tutorial-4/#pengenalan-css","title":"Pengenalan CSS","text":""},{"location":"tutorial/tutorial-4/#apa-itu-css","title":"Apa itu CSS?","text":"Cascading Style Sheets (CSS) adalah bahasa yang digunakan untuk mendeskripsikan tampilan dan format dari sebuah situs web yang ditulis pada markup language (seperti HTML). CSS berguna untuk membuat tampilan situs web menjadi lebih menarik.
Untuk mempelajari perbedaan antara CSS dan CSS3 bisa kamu baca pada referensi ini.
"},{"location":"tutorial/tutorial-4/#cara-penulisan-css","title":"Cara Penulisan CSS","text":"Secara umum, CSS dapat dituliskan dalam bentuk sebagai berikut.
selector {\n properties: value;\n}\nSilakan pelajari dan mencoba sendiri CSS pada referensi ini.
Terdapat tiga jenis cara penulisan CSS:
Silakan pelajari tentang ketiga jenis CSS tersebut pada referensi ini.
Perlu diperhatikan, jika kamu membuat jenis External Style Sheet, kamu perlu menambahkan tag {% load staticfiles %} pada halaman HTML kamu. Contohnya seperti potongan kode di bawah ini.
{% load staticfiles %}\n<html>\n <head>\n <title>Tutorial CSS Yay</title>\n <link rel=\"stylesheet\" href=\"{% static 'css/tutorial.css' %}\" />\n </head>\n <body>\n <div>\n <h1>Tutorial CSS Yay</h1>\n </div>\n <div id=\"main\">\n <div>\n <p>published: 27 September 2023</p>\n <h1><a href=\"\">Tutorial CSS ku</a></h1>\n <p>Yay ini tutorial yang gampang!</p>\n </div>\n </div>\n </body>\n</html>\nHal ini dapat terjadi karena CSS merupakan static files di Django. Static files akan dijelaskan pada bagian selanjutnya.
"},{"location":"tutorial/tutorial-4/#catatan-tambahan","title":"Catatan Tambahan","text":"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.
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 antara lain seperti CSS, JavaScript dan gambar.
Pengaturan untuk static files terletak pada file settings.py:
...\n# Static files (CSS, JavaScript, Images)\n# httpsdocs.djangoproject.comen1.9howtostatic-files\nSTATIC_ROOT = os.path.join(PROJECT_ROOT, 'static')\nSTATIC_URL = 'static'\n...\nsettings.py, terdapat: - STATIC_ROOT yang menentukan absolute path ke direktori static files ketika menjalankan perintah collectstatic pada proyek. - STATIC_URL yang merupakan URL yang dapat diakses publik untuk memperoleh static files tersebut. Perintah collectstatic adalah perintah untuk mengumpulkan static files dari semua app sehingga mempermudah akses untuk semua app.
Penjelasan lebih lengkap mengenai static files dapat kamu baca pada referensi ini.
"},{"location":"tutorial/tutorial-4/#selector-pada-css","title":"Selector pada CSS","text":"Pada tutorial ini, kita akan mengenak tiga jenis selector: Element Selector, ID Selector, dan Class Selector.
ELement Selector
Element Selector memungkinkan kita mengubah properti untuk semua elemen yang memiliki tag HTML yang sama.
Contoh penggunaan Element Selector:
<body>\n <div>\n <h1>Tutorial CSS Yay :D</h1>\n <h2>Tutorial CSS Yay kedua :D</h2>\n </div>\n ...\n</body>\nKita dapat menggunakan element sebagai selector dalam file CSS. Element selector menggunakan format [id_name] (tanpa diawali oleh sebuah simbol)
h1 {\n color: #fca205;\n font-family: \"Monospace\";\n font-style: italic;\n}\nID selector menggunakan ID pada tag sebagai selector-nya. ID bersifat unik dalam satu halaman web. ID dapat ditambahkan pada halaman template HTML.
Contoh penggunaan ID Selector pada template HTML:
<body>\n <div id=\"header\">\n <h1>Tutorial CSS Yay :D</h1>\n </div>\n ...\n</body>\nKemudian, kita dapat menggunakan ID tersebut sebagai selector dalam file CSS. ID selector menggunakan format #[id_name] (selalu diawali #)
#header {\n background-color: #f0f0f0;\n margin-top: 0;\n padding: 20px 20px 20px 40px;\n}\nClass Selector
Class Selector memungkinkan kita untuk mengelompokkan elemen dengan karakteristik yang sama.
Contoh penggunaan Class Selector pada template HTML:
...\n<div id=\"main\">\n <div class=\"content_section\">\n <p class=\"date\">published: 28 September 2022</p>\n <h2><a href=\"\">Tutorial CSS ku</a></h2>\n <p id=\"content_1\">Yay ini tutorial yang gampang!</p>\n </div>\n <div class=\"content_section\">\n <p class=\"date \">published: 29 September 2022</p>\n <h2><a href=\"\">Tutorial CSS mu</a></h2>\n <p id=\"content_2\">Yay ini tutorial yang mudah!</p>\n </div>\n <div class=\"content_section\">\n <p>published: 30 September 2022</p>\n <h2><a href=\"\">Tutorial CSS semua</a></h2>\n <p id=\"content_3\">Yay ini tutorial yang tidak sulit!</p>\n </div>\n</div>\n...\nKemudian, kita dapat menggunakan Class tersebut sebagai selector dalam file CSS. Class selector menggunakan format .[class_name] (diawali .)
.content_section {\n background-color: #3696e1;\n margin-bottom: 30px;\n color: #000000;\n font-family: cursive;\n padding: 20px 20px 20px 40px;\n}\nUntuk memperdalam pengetahuan mengenai CSS Selector Reference, kamu dapat membaca referensi ini.
"},{"location":"tutorial/tutorial-4/#tips-trik-css","title":"Tips & trik CSS","text":""},{"location":"tutorial/tutorial-4/#mengenal-combinator-pada-css","title":"Mengenal Combinator pada CSS","text":"Combinator dalam CSS menghubungkan dua atau lebih selector untuk merincikan lebih lanjut elemen-elemen yang di-select.
Terdapat empat combinators pada CSS. Berikut ringkasan pemakaiannya:
Combinator Contoh pemakaian Penjelasan contoh Descendant selector (space)div p Menyeleksi semua elemen p yang merupakan keturunan dari elemen div Child selector (>) div > p Menyeleksi semua elemen p yang merupakan anak dari elemen div Adjacent sibling selector (+) div + p Menyeleksi elemen p pertama yang berada tepat setelah elemen div (harus memiliki elemen induk yang sama) General sibling selector (~) div ~ p Menyeleksi semua elemen p yang sejajar dan berada setelah elemen div Silakan pelajari lebih lanjut mengenai combinator melalui referensi ini.
"},{"location":"tutorial/tutorial-4/#mengenal-pseudo-class-pada-css","title":"Mengenal Pseudo-class pada CSS","text":"Pseudo-class digunakan untuk mendefinisikan state khusus dari suatu elemen. Sintaks pemakaian pseudo-class adalah sebagai berikut:
selector:pseudo-class {\n property: value;\n}\nBeberapa contoh pseudo-class: | Pseudo-class | Mengaplikasikan style pada .. | | -------- | -------- | | :link | tautan yang belum pernah dikunjungi | | :visited | tautan yang sudah pernah dikunjungi | | :hover | saat pengguna mengarahkan kursor di atas elemen tersebut | | :active | saat elemen diaktifkan (biasanya saat pengguna mengklik elemen tersebut) | | :focus | saat elemen fokus (seperti saat pengguna mengklik input field) | | :checked | elemen yang telah dicentang | | :disabled | elemen yang telah dibuat tidak responsif (misalnya tombol yang tidak bisa diklik) |
Silakan pelajari lebih lanjut mengenai pseudo-class melalui referensi ini.
"},{"location":"tutorial/tutorial-4/#mengenal-box-model-pada-css","title":"Mengenal Box Model pada CSS","text":"Box model pada CSS pada dasarnya merupakan suatu box yang membungkus setiap elemen HTML dan terdiri atas:
Silakan pelajari lebih lanjut mengenai margin, border, dan padding melalui referensi ini.
"},{"location":"tutorial/tutorial-4/#pengenalan-bootstrap-tailwind","title":"Pengenalan Bootstrap & Tailwind","text":"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:
Bootstrap dan Tailwind tentu saja sebagai framework memiliki perbedaan yang signifikan antara satu sama lain, yaitu:
Tailwind Bootstrap Tailwind CSS membangun tampilan dengan menggabungkan kelas-kelas utilitas yang telah didefinisikan sebelumnya. Bootstrap menggunakan gaya dan komponen yang telah didefinisikan, yang memiliki tampilan yang sudah jadi dan dapat digunakan secara langsung. Tailwind CSS memiliki file CSS yang lebih kecil sedikit dibandingkan Bootstrap dan hanya akan memuat kelas-kelas utilitas yang ada Bootstrap memiliki file CSS yang lebih besar dibandingkan dengan Tailwind CSS karena termasuk banyak komponen yang telah didefinisikan. Tailwind CSS memiliki memberikan fleksibilitas dan adaptabilitas tinggi terhadap proyek Bootstrap sering kali menghasilkan tampilan yang lebih konsisten di seluruh proyek karena menggunakan komponen yang telah didefinisikan. Tailwind CSS memiliki pembelajaran yang lebih curam karena memerlukan pemahaman terhadap kelas-kelas utilitas yang tersedia dan bagaimana menggabungkannya untuk mencapai tampilan yang diinginkan. Bootstrap memiliki pembelajaran yang lebih cepat untuk pemula karena dapat mulai dengan komponen yang telah didefinisikan."},{"location":"tutorial/tutorial-4/#responsive-web-design","title":"Responsive Web Design","text":"Responsive web design merupakan metode sistem desain web yang memiliki tujuan untuk menghasilkan tampilan web yang terlihat baik pada seluruh perangkat seperti desktop, tablet, mobile, dan sebagainya. Responsive web design tidak mengubah isi dari situs web, tetapi hanya mengubah tampilan dan penataan pada setiap perangkat agar sesuai dengan lebar layar dan kemampuan perangkat tersebut. Dalam responsive web design tampilan-tampilan tertentu membutuhkan bantuan CSS (seperti mengecilkan atau membesarkan) suatu elemen.
Salah satu cara untuk menguji apakah suatu situs web menggunakan responsive web design adalah dengan mengakses situs web tersebut dan mengaktifkan fitur Toggle Device Mode pada browser. Fitur ini memungkinkan kamu untuk melihat bagaimana situs web tersebut ditampilkan pada berbagai perangkat, seperti komputer, tablet, atau smartphone, tanpa harus mengubah ukuran jendela browser.
Berikut adalah cara untuk mengakses fitur tersebut pada browser Google Chrome. * Windows/Linux : CTRL + SHIFT + M * Mac : Command + Shift + M
Cara lain yang lebih praktis adalah dengan melakukan klik kanan pada browser dan memilih Inspect Element/Inspect untuk membuka Dev Tools yang berguna.
Untuk mempelajari lebih lengkap mengenai Reponsive Web Design, kamu dapat membuka referensi ini.
"},{"location":"tutorial/tutorial-4/#tutorial-menambahkan-bootstrap-ke-aplikasi","title":"Tutorial: Menambahkan Bootstrap ke Aplikasi","text":"Pada mata kuliah PBP ini, kita akan memfokuskan pembelajaran CSS menggunakan framework bootstrap. Berikut adalah langkah yang perlu kamu lakukan untuk menyelesaikan bagian tutorial ini.
Buka project django kalian (book_tracker), lalu buka file base.html yang telah dibuat sebelumnya pada templates folder yang berada di root project kalian.
Didalam templates/base.html, tambahkan tag agar halaman web kamu dapat menyesuaikan ukuran dan perilaku perangkat mobile (apabila belum).
<head>\n {% block meta %}\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n {% endblock meta %}\n</head>\nTambahkan Bootstrap CSS dan juga JS.
CSS:
<head>\n {% block meta %}\n ...\n {% endblock meta %}\n <link href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN\" crossorigin=\"anonymous\">\n</head>\nJS:
<head>\n ...\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\" integrity=\"sha384-KyZXEAg3QhqLMpG8r+J4jsl5c9zdLKaUk5Ae5f5b1bw6AUn5f5v8FZJoMxm6f5cH1\" crossorigin=\"anonymous\"></script>\n</head>\n(Opsional) Apabila kalian ingin menggunakan dropdowns, popover, tooltips yang disediakan framework Bootstrap, maka kalian perlu menambahkan 2 baris script JS ini dibawah script JS yang sudah kalian buat sebelumnya.
<head>\n ...\n <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\"></script>\n <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\"></script>\n</head>\nReferensi: Get Started with Bootstrap 5.3
"},{"location":"tutorial/tutorial-4/#tutorial-menambahkan-navbar-pada-aplikasi","title":"Tutorial: Menambahkan navbar pada Aplikasi","text":"Tambahkan navigation bar (boleh menggunakan Bootstrap) pada halaman main.html kamu. Tampilkan nama kamu dan tombol logout pada navigation bar yang kamu buat. Kamu dapat referensi cara membuat navigation bar pada Bootstrap dengan dokumentasi berikut dan kreasikan navigation bar sesukamu.
Buka views.py yang ada pada subdirektori main, dan buatlah fungsi baru bernama edit_book yang menerima parameter request dan id.
Tambahkan potongan kode berikut pada fungsi edit_book
def edit_book(request, id):\n # Get book berdasarkan ID\n book = Book.objects.get(pk = id)\n\n # Set book sebagai instance dari form\n form = BookForm(request.POST or None, instance=book)\n\n if form.is_valid() and request.method == \"POST\":\n # Simpan form dan kembali ke halaman awal\n form.save()\n return HttpResponseRedirect(reverse('main:show_main'))\n\n context = {'form': form}\n return render(request, \"edit_book.html\", context)\nBuatlah berkas HTML baru dengan nama edit_book.html pada subdirektori main/templates. Isi berkas tersebut dengan template berikut.
{% extends 'base.html' %}\n\n{% load static %}\n\n{% block content %}\n\n<h1>Edit Book</h1>\n\n<form method=\"POST\">\n {% csrf_token %}\n <table>\n {{ form.as_table }}\n <tr>\n <td></td>\n <td>\n <input type=\"submit\" value=\"Edit Book\"/>\n </td>\n </tr>\n </table>\n</form>\n\n{% endblock %}\nBuka urls.py yang berada pada direktori main dan import fungsi edit_book yang sudah dibuat.
from main.views import edit_book\nTambahkan path url ke dalam urlpatterns untuk mengakses fungsi yang sudah diimpor tadi.
...\npath('edit-book/<int:id>', edit_book, name='edit_book'),\n...\nBuka main.html yang berada pada subdirektori main/templates. Tambahkan potongan kode berikut sejajar dengan elemen <td> terakhir agar terlihat tombol edit pada setiap baris tabel.
...\n<tr>\n ...\n <td>\n <a href=\"{% url 'main:edit_book' book.pk %}\">\n <button>\n Edit\n </button>\n </a>\n </td>\n</tr>\n...\nJalankan proyek Django-mu dengan perintah python manage.py runserver dan bukalah http://localhost:8000 di browser favoritmu. Setelah login, coba untuk meng-edit data suatu buku. Apabila setelah di-submit perubahan tersimpan dan tercermin pada halaman utama aplikasi tanpa error, maka selamat, kamu berhasil menambahkan fitur edit!
Berikut adalah yang perlu kamu lakukan untuk membuat fungsi penghapusan data buku.
Buat fungsi baru dengan nama delete_book yang menerima parameter request dan id pada views.py di folder main untuk menghapus data buku. Kamu dapat menggunakan templat kode berikut untuk memuat fungsinya.
Jangan lupa untuk memahami isi kodenya, ya. \ud83d\ude09
def delete_book(request, id):\n # Get data berdasarkan ID\n book = Book.objects.get(pk = id)\n # Hapus data\n book.delete()\n # Kembali ke halaman awal\n return HttpResponseRedirect(reverse('main:show_main'))\nBuka urls.py yang ada pada folder main dan impor fungsi yang sudah kamu buat tadi.
from main.views import delete_book\nTambahkan path url ke dalam urlpatterns untuk mengakses fungsi yang sudah diimpor.
...\npath('delete/<int:id>', delete_book, name='delete_book'), # sesuaikan dengan nama fungsi yang dibuat\n...\nBukalah berkas main.html yang ada pada folder main/templates dan ubahlah kode yang sudah ada menjadi seperti berikut agar terdapat tombol hapus untuk setiap buku.
...\n<tr>\n ...\n <td>\n <a href=\"{% url 'main:edit_book' book.pk %}\">\n <button>\n Edit\n </button>\n </a>\n <a href=\"{% url 'main:delete_book' book.pk %}\">\n <button>\n Delete\n </button>\n </a>\n </td>\n</tr>\n...\nJalankan proyek Django-mu dan cobalah untuk menghapus data buku yang sudah ada pada browser favoritmu.
"},{"location":"tutorial/tutorial-4/#akhir-kata","title":"Akhir Kata","text":"Selamat! Kamu telah menyelesaikan Tutorial 4 dengan baik. \ud83d\ude04
Kamu juga diharapkan untuk melakukan eksplorasi dengan menggunakan CSS Framework pada tutorial ini. Berikut adalah contoh penerapan Bootstrap sederhana pada aplikasi Book Tracker.
Selanjunya, lakukan add, commit dan push untuk memperbarui repositori GitHub.
Jalankan perintah berikut untuk melakukan add, commit dan push.
git add .\ngit commit -m \"<pesan_commit>\"\ngit push -u origin <branch_utama>\n<pesan_commit> sesuai dengan keinginan. Contoh: git commit -m \"tutorial 4 selesai\".<branch_utama> sesuai dengan nama branch utamamu. Contoh: git push -u origin main atau git push -u origin master.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
"},{"location":"tutorial/tutorial-4/#kontributor","title":"Kontributor","text":"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.
"}]} \ No newline at end of file diff --git a/sitemap.xml.gz b/sitemap.xml.gz index 05ef509..a37c2da 100644 Binary files a/sitemap.xml.gz and b/sitemap.xml.gz differ diff --git a/tutorial/tutorial-0/index.html b/tutorial/tutorial-0/index.html index 46eb345..a31bf86 100644 --- a/tutorial/tutorial-0/index.html +++ b/tutorial/tutorial-0/index.html @@ -1456,33 +1456,37 @@Langkah selanjutnya adalah membuat akun di GitHub, yang akan memungkinkanmu untuk mulai berkolaborasi pada proyek-proyek menggunakan Git.
Buka Situs Web GitHub -....-.Buka peramban web dan akses GitHub.
+Buka Situs Web GitHub
+Membuat Akun
-....-.Di halaman beranda GitHub, cari tombol Sign up di pojok kanan atas halaman.
-....-.Klik tombol tersebut untuk memulai proses pendaftaran akun.
Membuat Akun
+Sign up di pojok kanan atas halaman.Isi Formulir Pendaftaran -....-.Isi formulir pendaftaran dengan informasi yang diperlukan, seperti nama pengguna yang ingin digunakan, alamat email yang valid, dan kata sandi yang aman. -....-.Pastikan kamu menyimpan informasi ini dengan aman untuk masuk ke akunmu di masa mendatang.
+Isi Formulir Pendaftaran
+Verifikasi Akun Melalui Email
-Setelah mengisi formulir, GitHub akan mengirimkan email verifikasi ke alamat email yang kamu berikan.
-Buka email tersebut dan ikuti instruksi untuk verifikasi akunmu.
+Akun GitHub Siap Digunakan
-Setelah verifikasi selesai, kamu akan memiliki akun GitHub yang siap digunakan untuk berkolaborasi dalam proyek dan melacak perubahan menggunakan Git.
+Catatan:
@@ -2111,7 +2115,7 @@