Modul ini diharapkan dapat memudahkan peserta perguruan tinggi yang akan belajar, dan memudahkan dosen perguruan tinggi kedepannya dalam mengikuti perkembangan teknologi. Kami juga mengucapkan terima kasih kepada pimpinan dan sekretariat fakultas yang telah membantu dan mendukung kerja tim dan pengembangan modul ini. Modul ini merupakan hasil kontribusi tim pengajar dan asisten yang terlibat pada mata kuliah Desain Web dan Pemrograman Semester Ganjil 2017/2018.
Lebih khusus lagi kepada Hafiyyan Sayyid yang mengkoordinasikan kerja tim, termasuk koordinasi kegiatan praktek yang mendasari modul ini. Anda diwajibkan untuk menginstal bahasa pemrograman Python versi 3.6 di komputer Anda untuk melakukan kerja praktek pada modul ini (jika belum, silakan lihat tautan berikut: https://docs.python.org/3/using /index.html ).
Git & Gitlab
Kemudian coba masukkan perintah git status untuk melihat status repositori Git (Git repo) ketika perintah tersebut dijalankan. Secara internal, Git tidak melacak file README.md meskipun Anda menjalankan perintah git add. Perintah git add hanya memberitahu Git untuk mempublikasikan perubahan pada file tertentu ke area pementasan Git.
Jalankan perintah git push untuk menyimpan komit Anda ke repositori online Anda di Gitlab. Simpan file dan tambahkan ke repositori Git lokal (gunakan perintah git add .
Pengenalan Pengembangan Aplikasi Web
Pada materi pertama, Anda dapat menghasilkan sebuah aplikasi web sederhana yang dapat diakses dari Internet melalui laptop, komputer pribadi, atau perangkat seluler (ponsel). Layanan Heroku ini menyediakan layanan untuk memberikan fasilitas menjalankan program aplikasi web sehingga dapat diakses dari Internet. Program aplikasi web dikembangkan mengikuti praktik terbaik untuk pengembangan aplikasi skala besar yang menggunakan alat yang disebut kontrol versi.
Dengan alat Gitlab ini, peserta akan belajar menerapkan konsep Continuous Integration/Continuous Deployment, yang secara otomatis menjalankan aplikasi web pertama Anda di layanan Heroku untuk dinikmati pengguna Internet. Buka folder tempat Anda mengekstrak repositori Praktikum PPW dan inisialisasi folder tersebut ke dalam repositori Git.
Pengenalan Django Framework
INSTALLED_APPS di file settings.py (terletak di folder pengaturan proyek jika nama folder sama dengan nama proyek Django Anda. Folder INSTALLED). Berkas urls.py dalam map ini adalah contoh URLconf yang disediakan oleh Django yang dapat digunakan untuk merutekan ke aplikasi Django lainnya. Perhatikan bahwa berkas urls.py di aplikasi Django tidak secara otomatis dibuat oleh Django, namun dibuat secara manual.
Dalam file views.py, diasumsikan (dan seharusnya) ada fungsi yang disebut indeks atau indeks def (permintaan). Buat konfigurasi URL pada file lab_2/urls.py agar landing page dapat diakses menggunakan URL
Pengenalan Setting PostgreSQL di Heroku, pengenalan models dan TDD . 32
Berikan konfigurasi URL untuk lab_3 (buat file urls.py di dalam .lab_3, lalu masukkan kode berikut). Jalankan test case Anda (python manage.py test) dan kemudian kesalahan akan terjadi lagi di test case. Jalankan perintah python kelola.py makemigrations dan python kelola.py migrasi untuk menerapkan perubahan yang Anda buat ke semua file models.py.
Kemudian komit dan dorong pekerjaan Anda dan Anda akan melihat UnitTest Anda akan gagal. Masukkan konfigurasi URL berikut di file lab_4/urls.py. Saat mengakses URL root (
Pengenalan CSS
Kemudian komit dan cetak pekerjaan Anda, maka Anda akan melihat bahwa UnitTest Anda akan menghasilkan kesalahan Buat konfigurasi URL di praktikum/urls.py untuk lab_5. Buat fungsi indeks dan add_todo yang akan menangani URL dari lab_5: dari render impor Django.shortcuts. Buat lab_5.css di lab_5/static/css (Jika folder tidak tersedia, silakan buat folder tersebut).
Anda dapat melihat di tes.py ada perpustakaan impor Selenium: dari webdriver impor Selenium. dari Selenium.webdriver.common.keys impor Kunci dari selenium.webdriver.chrome.options impor Opsi . Download chromedriver sesuai sistem operasi Anda di URL berikut: https://chromedriver.storage.googleapis.com/index.html?path=2.32/. Ekstrak driver chrome ke dalam file proyek Anda. Untuk implementasi lengkap semua checklist, Anda dapat melihat di sini: https://igun-lab.herokuapp.com/lab-5/.
Pengenalan Javascript dan JQuery
Dalam pengembangan web, kode Javascript umumnya digunakan pada sisi klien suatu web (Client Side Javascript), namun berbagai jenis kode Javascript saat ini digunakan pada sisi server suatu web (Server-side Javascript) seperti node .js. Jika ditulis dalam file terpisah dari HTML, ekstensi file yang digunakan untuk file Javascript adalah .js. File .js biasanya akan di-cache oleh browser sehingga jika Anda membuka halaman yang sama dan tidak ada perubahan pada file .js, maka browser tidak akan meminta file .js ke server lagi.
Variabel lokal adalah variabel yang didefinisikan dalam suatu fungsi yang hanya dapat diakses dengan kode di dalam fungsi tersebut. Jadi buat file lab_6.js dari editor teks Anda di folder lab_6/static/js. document).ready(function(){. Buat lab_6.js di lab_6/static/js (Jika folder tidak tersedia, silakan buat folder tersebut).
Lengkapi kode pada file lab_6.js agar cuplikan dapat berjalan. Siapkan file statis untuk diterapkan ke Heroku. Tambahkan kode di bawah ini ke file lab_6.js di dalam lab_6/static/js (Jika folder atau file belum tersedia, pastikan Anda telah mengikuti langkah sebelumnya). Silakan gunakan CDN dari situs Select2.org untuk mengimport Library Select2 dan CSS Select2 di bagian head lab_6.html.
Buka file lab_6.js dan tambahkan kode berikut untuk menginisialisasi select2 di elemen target. Tambahkan lab_6.html ke folder templates 2. Lengkapi cuplikan kode di lab_6.js agar berfungsi. Implementasikan kalkulator. Tambahkan cuplikan kode ke file lab_6.css di folder ./static/css 3. Tambahkan cuplikan kode ke file lab_6.js di folder lab_6/static/js 4. Muat tema default berdasarkan tema yang dipilih.
Pengenalan Web Service
Pertama, pengguna dapat membuat implementasi layanan web dalam file yang terkait dengan pengontrol (seperti views.py). Buat halaman berisi daftar mahasiswa Fasilkom UI dengan menggunakan api dari apidev.cs.ui.ac.id. Pada praktek kali ini API yang akan kami gunakan adalah API Fasilkom UI yaitu https://api-dev.cs.ui.ac.id/.
Anda dapat membuka link tersebut untuk mengetahui cara penggunaan dan dokumentasi api-dev.cs.ui.ac.id itu sendiri. Untuk menggunakan API api.cs.ui.ac.id, access token dan client ID adalah hal yang perlu Anda persiapkan. Pada praktikum ini, kami telah membuat helper untuk memudahkan Anda mendapatkan kredensial akses dan ID klien.
Anda dapat melihat daftar API di api-dev.cs.ui.ac.id dengan membuka link ini. Anda bisa menggunakan helper yang dibuat oleh Kak Pewe atau menggunakan CURL seperti yang ada di website api-dev.cs.ui.ac.id. Terapkan validasi_npm untuk memeriksa apakah teman yang ingin Anda sertakan sudah ada di daftar teman Anda atau belum.
Membuat pagination (petunjuk: salah satu data yang diperoleh dari api.cs.ui.ac.id return adalah next dan previous yang dapat digunakan untuk membuat pagination). Halaman tersebut terbuka ketika pengguna mengklik teman di halaman yang menampilkan daftar teman. Tambahkan Google Maps yang menampilkan alamat teman di halaman informasi detail. petunjuk: https://developers.google.com/maps/documentation/Javascript/) 3.
Pengenalan Pengenalan Oauth2
Setelah itu, pengguna akan menerima persetujuan otorisasi dari server verifikasi otorisasi (dalam hal ini Facebook), yang dapat mereka gunakan untuk mendapatkan token akses. Kemudian token akses ini digunakan untuk mengambil sumber daya (data) dari server sumber daya (Facebook dalam hal ini) sehingga data tersebut dapat diambil dan ditampilkan pada Aplikasi Praktis 8. Oauth2 adalah kerangka otorisasi yang bertujuan untuk memastikan bahwa suatu aplikasi diberikan akses tertentu dari pengguna pada platform dimana akses tersebut dapat digunakan untuk memanggil API yang disediakan oleh platform.
Aplikasi membuat permintaan untuk mendapatkan token akses dari server otorisasi menggunakan pemberian otorisasi dan identitas aplikasi. Jika identitas aplikasi dan pemberian otorisasi cocok, server otorisasi akan memberikan token akses kepada aplikasi; Pada tahap ini, otorisasi sudah selesai. Aplikasi kemudian melakukan panggilan API ke server sumber daya dengan memberikan token akses yang diperoleh sebelumnya.
Jika token akses cocok, server akan memberikan respons yang sesuai terhadap panggilan API. Ganti {your-app-id} dan {latest-api-version} dengan ID aplikasi dan versi API yang dapat diperoleh dari halaman dashboard aplikasi di https://developers.facebook.com/. Fungsi FB.login() juga mempunyai parameter scope yang berguna untuk mengatur jenis izin apa yang diinginkan aplikasi kita, misalnya di atas kita telah menambahkan izin public_profile agar aplikasi kita dapat mengakses id, nama depan, nama belakang, dll.
Untuk menampilkan informasi pengguna, kami dapat menggunakan Graph API milik Facebook. Berikut ini adalah contoh fungsi getUserData() untuk mendapatkan informasi pengguna. Pastikan metode ini menerima parameter dalam bentuk fungsi panggilan balik, lalu meminta data feed beranda dari akun. Implementasi fitur postingan Facebook pada halaman lab_8.html dan lab8.js Implementasi fitur Logout pada lab_8.html dan lab8.js.
Pengenalan Cookie dan Session
Pada saat melakukan interaksi antara browser pengguna dengan aplikasi web pada suatu server, terdapat kebutuhan bagi masing-masing pihak untuk mempunyai kemampuan mencatat informasi terkait interaksi yang berlangsung. Misalnya saja suatu aplikasi web harus dapat mengetahui apakah suatu interaksi berupa pengaksesan suatu halaman sensitif dilakukan oleh pengguna yang telah diautentikasi dan mempunyai hak akses. Informasi tentang apakah orang atau pengguna yang mengakses aplikasi web diautentikasi dapat disimpan dalam sesi.
Data dalam cookie diatur dan ditambahkan oleh aplikasi web saat pengguna berinteraksi dengan aplikasi. Cookie sering kali digunakan untuk menyimpan informasi terkait pengguna sehingga aplikasi web dapat menyajikan konten yang sesuai. Misalnya Anda ingin membuka halaman A pada aplikasi web yang mengharuskan pengguna untuk login ke aplikasi tersebut.
Ketika Anda ingin pindah ke halaman B pada aplikasi web yang sama, tanpa proses hold, Anda akan diminta login kembali. Hal inilah yang akan terjadi setiap kali Anda mengakses halaman lain, meskipun halaman tersebut masih berada di aplikasi web yang sama. ID Sesi dapat dianggap sebagai token (rangkaian karakter) untuk mengidentifikasi sesi unik pada aplikasi web tertentu.
Jalankan lalu dorong pekerjaan Anda, maka Anda akan melihat bahwa UnitTest akan error. CATATAN: Berikut 3 file pembantu (csui_helper.py, api_enterkomputer.py, custom_auth.py) yang levelnya sama dengan views.py. Ketiga file ini mempunyai fungsinya masing-masing. Ubah implementasi csui_helper.py di Praktikum 9 agar dapat digunakan oleh Praktikum 7 (Anda dapat menghapus file csui_helper.py di Praktikum 7).
Penerapan Lanjut Cookie dan Session
