# Tutorial APAP ## Authors * **Hilmi Al Biruni** - *2006463843* - *APAP-B* --- ## Tutorial 8 ### Pertanyaan 1: Apa itu Dockerfile dan docker-compose.yaml? Apa fungsinya? #### Dockerfile adalah file environment agar dapat menggunakan Docker pada proyek springboot tersebut. #### Sedangkan docker-compose.yaml adalah alat untuk mendefinisikan dan menjalankan satu atau lebih container yang saling terkait pada sebuah command ### Pertanyaan 2: Screenshot hasil perubahan anda. Setelah anda menyelesaikan tutorial ini, menurut anda, mengapa kita perlu mengganti port?  #### Perubahan port pada docker-compose.yml dilakukan agar kita bisa menggunakan cabang port dari 8080, yaitu 10127. Hal ini untuk mengurangi traffic dengan aplikasi yang menggunakan port serupa. ### Pertanyaan 3: Mengapa terdapat versi dev dan prod? File apa yang menentukan konfigurasi mana yang dipakai? Apa yang harus dilakukan untuk menjalankan versi prod? (hint: baca file pada langkah 3 dengan teliti) #### application-dev.yml berfokus digunakan untuk tahap development dan productivity, sedangkan application-prod.yml berfokus digunakan untuk tahap performance dan scalability. application-prod.yml juga digunakan untuk menentukan konfigurasi yang dipakai karena didalamnya didefinisikan suatu port tertentu, yaitu 8080 untuk prod dan 2020 untuk prod2. #### Dalam menggunakan versi prod, kita memanggilnya pada app.env di bagian *SPRING_PROFILES_ACTIVE*. Lalu, pada docker-compose.yml akan memanggil app.env pada *env_file:*. Dari docker-compose.yml akan digunakan oleh Dockerfile sehingga application-prod.yml berhasil digunakan. ### Pertanyaan 4: Apa saja yang terjadi di langkah ini? #### Saya berpindah ke directory belajarbelajar, lalu melakukan build jar agar menggunakan build versi terbaru, kemudian melakukan build image dengan *docker-compose up*. Command tersebut berfungsi untuk membangun, membuat, memulai, dan melampirkan container untuk service. Secara tidak langsung, container akan dibuat dan langsung dijalankan tanpa tambahan command lainnya ### Pertanyaan 5: Sertakan screenshot container yang sedang berjalan (versi gui atau cli, pilih salah satu). Apa itu docker container, images, dan volume?  #### Docker container adalah sebuah env untuk docker image yang berisikan paket software agar dapat menjalankan aplikasi seperti kode, config, runtime, system tools, dan system libraries. #### Docker images adalah sebuah file yang digunakan untuk mengeksekusi kode pada docker container #### Docker volume adalah sebuah file untuk menyimpan data pada aplikasi dari docker container ### Pertanyaan 6: Apa perbedaan docker-compose down dan stop? #### *docker-compose down* berfungsi untuk memberhentikan container sekaligus menghapus container, sehingga perlu dilakukan *docker-compose build*. #### *docker-compose stop* berfungsi hanya untuk memberhentikan container tanpa menghapus container. ### Pertanyaan 7: Sertakan screenshot mengakses laman kirti milik anda melalui browser (seperti screenshot di atas)  ### Pertanyaan 8: Ceritakan pengalaman anda melakukan deployment ke Kirti. Kendala apa yang anda alami? #### Hasil dari deployment menggunakan Kirti menurut saya cukup menyenangkan karena kita bisa melihat hasil nyata aplikasi lewat link, yaitu apap-127 dengan domain cs.ui.ac.id. Kendala yang saya alami adalah server kawung sering overload sehingga saya selalu overtime saat melakukan build dan deployment. Contoh spesifiknya adalah saat melakukan upload frontend dan backend, hanya frontend saya yang terupload di kawung, sedangkan backend tidak. ### Pertanyaan 9: Buka container docker Anda, lalu screenshot. Apa perbedaan tampilan container sekarang dengan tampilan container pada langkah tutorial docker di awal tadi? *maaf, saya tidak sempat menyertakan screenshoot di awal tahap docker*  #### Perbedaannya adalah pada tahap awal docker, hanya terdiri dari tutorial-apap, db-1, dan web-1. Sedangkan di tahap sekarang, bertambah menjadi tutorial-apap, db-1, web2-1, web-1. #### Hal ini dikarenakan pada tahap ini saya membuat 2 port sehingga membutuhkan 2 container, yaitu web2-1 dan web-1. ### Pertanyaan 10: Sertakan screenshot tampilan web ketika pertama kali menjalankan localhost:9090 dan tampilan web ketika halaman di-refresh. #### Port 8080 sebelum melakukan refresh  #### Port 2020 setelag melakukan refresh  ### Pertanyaan 11: Kendala apa yang anda hadapi ketika melakukan tutorial bagian nginx? #### Kendala saya adalah ketidaktelitian saya saat melakukan configurasi pada docker-compose.yml. Selain itu, tidak ada kendala lain. ## Tutorial 7 ### Pertanyaan 1: Jelaskan secara singkat perbedaan Otentikasi dan Otorisasi! Di bagian mana (dalam kode yang telah anda buat) konsep tersebut diimplementasi? #### Otentikasi adalah proses melakukan verifikasi apakah pengguna yang ingin melakukan login dengan username yang dimiliki terlah tersedia di database dan dapat masuk untuk mengakses aplikasi. Sedangkan, otorisasi adalah proses untuk menentukan hak pengguna apakah pengguna tersebut memiliki akses ke halaman tertentu yang telah ditentukan otentifikasinya. #### Implementasi otentikasi pada class WebSecurityConfig ``` @Autowired public void configAuthentication(AuthenticationManagerBuilder auth) throws Exception { auth.userDetailsService(userDetailsService).passwordEncoder(encoder()); } ``` #### Implementasi otorisasi pada class WebSecurityConfig ``` http .authorizeRequests() .antMatchers("/css/**").permitAll() .antMatchers("/js/**").permitAll() .antMatchers("/login-sso", "/validate-ticket").permitAll() .anyRequest().authenticated() .and() .formLogin() .loginPage("/login").permitAll() .and() .logout().logoutRequestMatcher(new AntPathRequestMatcher("/logout")) .logoutSuccessUrl("/login").permitAll(); ``` ### Pertanyaan 2: Apa itu BCryptPasswordEncoder? Jelaskan secara singkat cara kerja dan tujuannya. #### BCryptPasswordEncoder merupakan sebuah class yang mengimplementasikan PasswordEncoder dan juga menyediakan password hashing. Untuk melakukan register password, tidak mungkin dengan menggunakan plaintext, maka penyimpanan password menggunakan hashing. BCryptPasswordEncoder bekerja dengan menyimpan password yang telah di-hashing terlebih dahulu. ### Pertanyaan 3: Apakah penyimpanan password sebaiknya menggunakan encryption atau hashing? Mengapa demikian? #### Encryption dan hashing merupakan dua istilah yang berbeda. Encryption adalah proses mengubah sebuah pesan normal (plaintext) menjadi pesan yang tidak mudah dibaca (ciphertext). Ciphertext yang diperoleh dari encryption dapat dengan mudah diubah menjadi plaintext menggunakan encryption key. Hashing adalah proses mengubah informasi menjadi kunci menggunakan hash function. Informasi asli tidak dapat diambil dari hash key dengan cara apapun. Dengan demikian, penyimpanan password akan lebih aman jika dilakukan dengan hashing daripada encryption. ### Pertanyaan 4: Jelaskan secara singkat apa itu UUID beserta penggunaannya! #### UUID (Universally Unique Identifier) merupakan kode dengan jumlah hashing terbanyak yaitu sebanyak 32 karakter yang akan digunakan untuk keamanan data. UUID di-generate untuk id pengguna. Dibandingkan dengan BCrypt yang merupakan password yang berguna untuk mengamankan id dari hacking. Dapat dipastikan UUID yang tergenerate unik untuk tiap objek yang ada di internet, jadi id yang dimiliki pengguna akan aman. ### Pertanyaan 5: Apa kegunaan class UserDetailsServiceImpl.java? Mengapa harus ada class tersebut? #### Class UserDetailsServiceImpl.java memberikan informasi mengenai Otentikasi dan Otorisasi akun yang ada pada class lain. Class ini harus diimplementasikan, jika tidak informasi tersebut tidak dapat diberikan. Kemampuan tersebut ada karena class mengimplementasikan UserDetailService. UserDetailService merupakan interface yang ada dari Spring Security. Selain itu, class ini meng-override loadUserByUsername() yang bisa dilakukan kustomisasi untuk pencarian user. --- ## Tutorial 6 ### Pertanyaan 1: Perhatikan apa yang terjadi pada file index.html pada branch feat/tutorial-6-advancedgit-1. Apa yang terjadi setelah git cherry-pick dilakukan? Apakah kita bisa melakukan cherrypick tanpa harus melakukan commit? #### File index.html dipull dari branch tut6-for-cherrypick sehingga index.html ada pada branch feat/tutorial-6-advancedgit-1. Git cherry pick mencari commit-id yang akan mengambil file dari branch tertentu. Dalam melakukan hal itu, perlu dilakuka commit agar dapat terdefinisi commit-id ### Pertanyaan 2: Conflict ini terjadi karena pada branch feat/tutorial-6-advancedgit-1 sudah ada kode dengan baris yang sama di index.html dengan branch tut6-for-merge sehingga akan menimbulkan collisons jika dilakukan merging. ### Pertanyaan 3: Apa yang terjadi pada log history setelah melakukan rebase (branch rebase-1 dan rebase-2)? Sertakan screenshot log history anda pada kedua branch tersebut! #### Log histori pada rebase-1 terdapat juga pada log histori rebase-2. #### Pada branch rebase-1  #### Maka akan terdapat juga pada branch rebase-2  ### Pertanyaan 4: Jelaskan perbedaan dari "rebase –continue", "rebase –skip", dan "rebase –abort"! #### Pada "rebase --continue" akan melaksanakan rebase suatu pada perintah jika konflik sudah disolve. Lalu, pada "rebase --skip" akan mengabaikan bagian yang terkena konflik. Kemudian, pada "rebase --abort" akan membatalkan proses rebase. ### Pertanyaan 5: Jelaskan perbedaan git rebase dan git merge! #### Pada git rebase melakukan penggabungan urutan commit pada suatu branch ke urutan commit pada branch yang dituju. Sebagai contoh, kita mengerjakan kode pada branch B dan melakukan commit disana. Kita dapat memindahkan urutan commit branch B ke urutan branch A tanpa mengubah kode pada branch A. Hal ini digunakan jikalau saat mengerjakan branch A kita membutuhkan sesuatu pada branch B, maka kita tinggal melakukan pull commit-id pada branch A yang terdapat juga di branch B. ### Berbeda dengan git merge yang melakukan merge kode dari branch B dengan branch A sehingga kode/file pada branch A akan berubah ### Pertanyaan 6: Pada tahap ini apakah yang terjadi pada direktori git-stash? #### Pada git-stash akan tersimpan didalam local repository Git dan harus melakukan git stash pop untuk mengakses direktori ### Pertanyaan 7: Apa yang terjadi pada file abc.txt setelah melakukan git reset --hard? Bagaimana kondisi lognya? Apa perbedaan git reset dengan git revert? #### git reset akan mereset file abc.txt ke versi sebelumnya, yang berisi string "this is first line from abc file". Kondisi lognya pun akan hilang. #### Lalu, perbedaan git reset dengan git revert adalah git reset dapat mengembalikan ke versi direktori tertentu. Sedangkan git revert hanya dapat mengembalikan ke versi direktori sebelumnya. Jadi, secara teknis, git reset dapat mengembalikan versi direktori sesuai yang kita mau. --- ## Tutorial 5 ### Pertanyaan 1: Apa itu Postman? Apa kegunaannya? #### Postman adalah sebuah developent tool API yang digunakan untuk build, modify, dan test API. Penggunaan Postman dapat digunakan untuk mendesign, mock, debug, tes, dokumentasi, monitor, dan juga menerbitkan API. Postman memiliki fungsi REST Client yang dapat digunakan untuk menguji REST API. ### Pertanyaan 2: Jelaskan fungsi dari anotasi @JsonIgnoreProperties dan @JsonProperty #### @JsonIgnoreProperties digunnakan untuk memberikan spesifikasi list atribut dari sebuah class yang diabaikan saat menjalankan serialization dan deserialozation JSON. Jika #### @JsonIgnoreProperties tidak disertakan, nantinya akan menyebabkan error saat menjalankan serialization dan deserialization saat Java Object tidak memiliki field yang ada pada JSON. ### Pertanyaan 3: Apa kegunaan atribut WebClient? #### Kegunaan dari Webclient adalah untuk menghubungkan personal komputer ke jaringan internet yang meminta informasi. Dalam mengakses webserver diperlukan sebuah WebClient untuk menggunakan aplikasi yaitu WebBrowser. ### Pertanyaan 4: Apa itu ResponseEntity dan BindingResult? Apa kegunaannya? #### ResponseEntity merupakan representasi keluruhan HTTP Response dari status code, header, dan body. Dengan demikian, dapat digunakan untuk mengkonfigurasi secara lengkap HTTP response. BindingResult adalah sebuah objek spring yang akan menyimpan hasil validasi, binding, dan error dari model objek yang divalidasikan. Penggunaan BindingResult diletakkan setelah parameter objek divalidasi. --- ## Tutorial 4 ### Pertanyaan 1: Jelaskan perbedaan th:include dan th:replace! #### Perbedaan dari include dan replace adalah penempatan suatu konten dari fragment #### Include akan memanggil isi dari fragment ke dalam th:include tersebut. Lalu, include akan memasukkan konten fragment tanpa menyisipkan tag fragment itu sendiri. #### Berbeda dengan include, replace menerapkan konsep parent-kid dalam pengimplementasian fragment tersebut. Replace akan memasukkan konten dari fragment dengan mengganti tag menjadi tag yang mendefinisikan fragment sehingga dapat di kustomisasi. ### Pertanyaan 2: Jelaskan apa fungsi dari th:object! #### th:object digunakan untuk menyederhanakan pemanggilan suatu objek di dalam HTML. th:object akan menggunakan atribut langsung dari objek tanpa harus menspesifikasikan objek yang dipanggil. ### Pertanyaan 3: Jelaskan perbedaan dari * dan $ pada saat penggunaan th:object! Kapan harus dipakai? #### * digunakan untuk menyatakan sebuah selection dan menunjuk kepada atribut darri suatu objek. Berbeda dengan $ yang digunakan untuk menyatakan sebuah variabel/value dan menunjuk kepada atribut suatu objek. ### Pertanyaan 4: Bagaimana parameter/params tersebut bekerja sehingga Anda dapat menambahkan 1 baris penyelenggara pada form tambah course? #### params perlu dibuat terlebih dahulu logic-nya dalam struktur data List. params akan mendefinisikan semacam "function" agar dapat diimplementasikan di dalam <button> dalam variable "name". ### Pertanyaan 5: Bagaimana parameter/params tersebut bekerja sehingga Anda dapat menghapus 1 baris penyelenggara pada form tambah course? #### params perlu dibuat terlebih dahulu logic-nya sebagai berikut: ##### final Integer rowId = Integer.valueOf(row); ##### course.getListPengajar().remove(rowId.intValue()); #### Nanti params tersebut akan mendefinisikan semacam "function" agar dapat diimplementasikan di dalam <button> dalam variable "name". ## Tutorial 3 ### Pertanyaan 1: Tolong jelaskan secara singkat apa kegunaan dari anotasi-anotasi yang ada pada model (@AllArgsConstructor, @NoArgsConstructor, @Setter, @Getter, @Entity, @Table) #### @AllArgsConstructor digunakan untuk menghasilkan constructor pada semua field pada class dengan suatu parameter. #### @NoArgsConstructor digunakan untuk menghasilkan no-args constructor yang akan menghasilkan pesan error jika constructor terseebut tidak dapat ditulis karena adanya final fields #### @Setter dan @Getter digunakan untuk mempermudah generate setter dan getter sehingga tidak perlu membuat manual, hanya memanggil get dan set saja. #### @Entity digunakan untuk mewakili data yang akan disimpan didalam database #### @Table digunakan untuk menentukan nama table database yang nantinya digunakan sebagai pemetaan #### Referensi : https://javabydeveloper.com/lombok-allargsconstructor-examples/ https://projectlombok.org/api/lombok/NoArgsConstructor.html ### Pertanyaan 2: Pada class CourseDb, terdapat method findByCodeUsingQuery dan findByCode, apakah perbedaan kedua method tersebut? Jelaskan juga kegunaan @Query pada method findByCodeUsingQuery! #### Pada findByCode tidak menggunakan @Query sedangkan pada findByCodeUsingQuery menggunakan @Query. @Query digunakan untuk mengimplementasikan command MySQL pada interface dan menghubungkannya ke database sehingga akan menjadi @Query("SELECT.....") lalu diikuti dengan findByCodeUsingQuery ### Pertanyaan 3: Jelaskan perbedaan kegunaan dari anotasi @JoinTable dan @JoinColumn #### @JoinTable menyimpan id dari kedua entity ke tabel yang terpisah. Penggunaan @JoinTable ketika kita ingin mengatur hubungan antara entity dengan table lain. #### Sedangkan @JoinColumn menyimpan id dari entity lain di column baru di tabel yang sama. Penggunaan @JoinColumn ketika entity memiliki direct relationship seperti foreign key antara dua entity. ### Pertanyaan 4: Pada class Pengajar, digunakan anotasi @JoinColumn pada atribut Course, apa kegunaan dari name, referencedColumnName, dan nullable dalam anotasi tersebut? dan apa perbedaan nullable dan penggunaan anotasi @NotNull #### Pada @JoinColumn di atribut Course, name berguna untuk menyatakan nama dari foreign key column. Lalu, referencedColumnName berguna untuk mencari nama dari column yang direferensi oleh foreign key column. Kemudian, nullable untuk menyatakan apakah foreign key kolomnya null atau tidak. Perbedaan dari nullable dengan anotasi @NotNull adalah nullable hanya menambahkan batasan null yang true / false ke definisi tabel, sedangkan anotasi @NotNull memeriksa apakah atributnya bukan null. ### Pertanyaan 5: Jelaskan kegunaan FetchType.LAZY, CascadeType.ALL, dan FetchType.EAGER #### FetchType.LAZY berisi seluruh data java object yang telah di-fetch saat dibutuhkan atau saat memanggil datanya (LAZY). FetchType biasanya digunakan di relasi many-to-many atau one-to-many. #### CascadeType.All berguna supaya segala perubahan yang ada pada suatu entity akan terjadi juga pada entity seluruh anaknya/child. Perubahan terjadi saat ada delete, update, dan lainnya. #### FetchType.EAGER berisi seluruh data java objects yang telah di-fetch langsung. fetchtype ini akan melakukan fetch-nya diawal. Berbeda dengan tipe LAZY, tipe ini digunakan untuk relasi many-to-one atau one-to-one. --- ## Tutorial 2 ### Pertanyaan 1: Cobalah untuk menambahkan sebuah Course dengan mengakses link berikut: http://localhost:8080/course/add?code=APAP&nameCourse=APAP%20Tutorial2&description=2020%20Fasilkom&jumlahSks=3 Apa yang terjadi? Jelaskan mengapa hal tersebut dapat terjadi? #### Jika link tersebut diakses akan memunculkan Whitelabel Error Page Service Error 500. Hal ini dikarenakan sudah ada perintah return "add-course" pada controller. Controller merupakan file yang berfungsi untuk melakukan mapping dari request yang diinput, kemudian akan diminta untuk memanggil template html yang akan direturn. Sedangkan html "add-course" belum dibuat, sehingga hal ini akan menyebabkan error. ### Pertanyaan 2: Menurut kamu anotasi @Autowired pada class Controller tersebut merupakan implementasi dari konsep apa? Dan jelaskan secara singkat cara kerja @Autowired tersebut dalam konteks service dan controller yang telah kamu buat #### Anotasi @Autowired pada Controller merupakan implementasi dari konsep dependancy injection. @Autowired dapat memasukkan dependensi objek secara implisit. Sehingga, @Autowired pada CourseController tidak perlu dibuat constructor, setter, dan getter. Hal ini dikarenakan @Autowired otomatis mencari service yang mengimplementasikan interface CourseService. ### Pertanyaan 3: Cobalah untuk menambahkan sebuah Course dengan mengakses link berikut: http://localhost:8080/course/add?code=APAP&nameCourse=APAP%20Tutorial2&jumlahSks=3 Apa yang terjadi? Jelaskan mengapa hal tersebut dapat terjadi. #### Jika link tersebut diakses akan memunculkan Whitelabel Error Page type=Bad Request status=400. Hal ini dikarenakan suatu parameter tidak dicantumkan. Sedangkan seluruh atribut harus terisi dan tidak boleh null. ### Pertanyaan 4: Jika Papa APAP ingin melihat Course dengan kode APAP, link apa yang harus diakses? #### http://localhost:8080/course/view?code=APAP ### Pertanyaan 5: Tambahkan 1 contoh Course lainnya sesukamu. Lalu cobalah untuk mengakses http://localhost:8080/course/viewAll , apa yang akan ditampilkan? Sertakan juga bukti screenshotmu. #### Akan bertambah course lain #### https://drive.google.com/file/d/1NGZj0VJENBv4pRQjVcsHjZRmML3h7E9O/view?usp=sharing --- ## Tutorial 1 ### What I have learned today #### Pada tutorial ini, saya mempelajari tentang cara mengoperasikan Git secara lebih advance. Sebelumnya, saya pernah melakukan hal berikut saat mengerjakan TK Basdat oleh teman saya dari Ilmu Komputer. Lalu, saya juga baru memahami secara dasar tentang Java Springboot. ### GitLab ### Pertanyaan 1: Apa itu Issue Tracker? Apa saja masalah yang dapat diselesaikan dengan Issue Tracker? #### Issue Tracker adalah fitur Gitlab yang akan menandakan letak isu yang terjadi saat mengoperasikan git. Masalah umum seperti commit, branch, merge, dan lain-lain akan dinotice oleh Issue Tracker ### Pertanyaan 2: Apa perbedaan dari git merge dan git merge --squash? #### git merge hanya melakukan merging git, sedangkan git merge --squash seperti merging yang simpel yang tidak akan membuat commit di dalam history branch ### Pertanyaan 3: Apa keunggulan menggunakan Version Control System seperti Git dalam pengembangan suatu aplikasi? #### Menggunakan Git akan mempermudah dalam mengorganize repository. Git juga sudah sangat familiar oleh banyak orang sehingga tidak akan susah dalam menggunakan Git ### Spring ### Pertanyaan 4: Apa itu library & dependency? #### Library dan dependency adalah sesuatu yang berkaitan tetapi tidak sama. Kode pada library akan menjadi sebuah dependency ketika project lain digunakan, dan tidak akan menjadi dependency oleh project yang lain. ### Pertanyaan 5: Apa itu Gradle? Mengapa kita menggunakan Gradle? Apakah ada alternatif dari Gradle? #### Gradle adalah sebuah program yang berfungsi untuk melakukan build secara otomatis. Karena itu, Gradle sering disebut sebagai build-tool. Alasan menggunakan Gradle adalah agar pekerjaan dalam melakukan build akan dapat otomatis dilakukan. Aplikasi alternatif dari Gradle adalah CMake, SCons, GNU Make, Maven, Meson, Buck, Ant, Cake, Rake, dan SBT. ### Pertanyaan 6: Selain untuk pengembangan web, apa saja yang bisa dikembangkan dengan Spring framework? #### Bisa digunakan untuk mengembangkan enterprise ### Pertanyaan 7: Apa perbedaan dari @RequestParam dan @PathVariable? Kapan sebaiknya menggunakan @RequestParam atau @PathVariable? #### @RequestParam digunakan untuk membaca data formulir HTML yang disediakan oleh pengguna dan mengikatnya ke parameter permintaan. #### @Pathvariable: Anotasi ini digunakan untuk menangani variabel template dalam pemetaan URI permintaan, dan menggunakannya sebagai parameter metode #### @RequestParam digunakan jika anotasi parameter belum ditentukan, @Pathvariable digunakan jika parameter sudah ada --- ### What I did not understand (tuliskan apa saja yang kurang Anda mengerti, Anda dapat men-_check_ apabila Anda sudah mengerti dikemudian hari, dan tambahkan tulisan yang membuat Anda mengerti) - [ ] Lorem ipsum dilor - [x] Lorem ipsum dilor