BAB 3
Page - [Link] Core:
Absensi Project
Setelah kita mengetahui cara membuat project dari [Link] maka langkah selajutnya adalah
membuat page agar website kita dapat berjalan berjalan sebagaimana mestinya. Pada
pemrograman web [Link] page adalah seperti menu atau seperti sebuah form pada
pemrograman desktop.
Kali ini kita akan membuat project absensi yang nanti akan kita gunakan project ini seterusnya.
Jadi materi pada [Link] ini adalah saling terkait antara bab dan berkelanjutan.
1. Buka aplikasi visual code
2. buka terminal pada menu view
3. pada jendela terminal (tekan enter jika muncul jendela blank putih) buatlah folder
AbsenOnline untuk menampung project kita. Masuk ke folder mydocument dengan dua
perintah berikut
- cari path my document dengan cara mengetik
[Environment]::GetFolderPath("MyDocuments") dan tekan enter
Page | 1
- ketik cd lokasi folder yang ditemukan diatas.
Untuk user tiap-tiap computer berbeda. Contoh diatas adalah untuk user nya ITI
Ketik perintah berikut untuk membuat folder AbsenOnline
Masuk ke folder AbsenOnline dengan perintah dibawah ini
4. buatlah project absen online dengan code dotnet new webapp seperti dibawah ini
Kemudian enter maka akan melakukan proses seperti dibawah ini
5. buka folder project kita dari visual code dengan cara pilih file->open folder
Page | 2
Akan tampil popup untuk memilih folder, kemudian buka document dan pilih
AbsensiOnline kemudian tekan select folder
6. jendela explorer akan terbuka dan menampilkan semula file dalam folder
Page | 3
7. akan ada popup untuk menambahkan asset, silahkan dipilih yes
8. tambahkan page login karena langkah pertama adalah kita ingin ketika aplikasi dibuka
maka yang tampil adalah halaman login. Untuk menambahkan page ada dua cara yaitu
dengan manual menambahkan file pada page atau dengan menggunakan terminal.
a) Dengan terminal
Buka terminal editor dan tanmbahkan perintah berikut ini
Ket:
- garis warna merah: nama page yang akan kita buat
- garis warna hijau : namae group yang kita buat
setelah dibuat maka otomatis akan tambah 2 file yaitu [Link] dan
[Link]
b) manual explorer
Cara yang kedua adalah kita membuat secara manual pada explorer. kita buka folder
Pages kemudian klik kanan dan tambahkan file
Page | 4
Kemudian ketikan nama filenya
dan
Maka hasilnya akan seperti ini
Page | 5
yang membedakan antara cara pertama dan cara kedua adalah pada isi filenya yang
pertama otomatis ditambahkan code yang menghubungkan antar kedua file tersebut dan
yang satu kita harus membuat secara manual.
9. Buka file [Link] dan tambahkan code berikut untuk membuat design html
10. Buka file [Link] kita akan menambahkan authetincation untuk email dan
password yang boleh login. Tambahkan code sehingga menjadi seperti ini
Page | 6
Detail login adalah
Email:
admin@[Link]
Password: “AQAAAAEAACcQAAAAEBLa9qGVYB6C8npBE+817/
cvBLjYyFdQ3PXzXs6xH6VsA3dqax65YCl7LHuE6AstTg==”
Password diatas jika didecryp adalah “admin”
Untuk membuat hash password silahkan bias menggunakan aplikasi online berikut
[Link] dan paste code berikut
using
System;
using [Link];
namespace PasswordHasherTest
{
class Program
{
static void Main(string[] args)
{
var passwordHasher = new PasswordHasher<string>();
[Link]([Link](null, "admin"));
[Link]();
}
}
}
11. Buatlah folder Models untuk menyampung model. klik kanan pada ruang kosong di
explorer dan pilih new folder
Page | 7
Beri nama Models dan tekan enter
12. Tambahkan new file pada models dan beri nama [Link]
Select folder models dan klik kanan kemudian pilih new file
Beri nama dengan [Link] dan tekan enter
13. Buka [Link] dan isi code seperti dibawah ini
Page | 8
14. Buka file [Link] dan tambahkan code berikut
Resolve error dengan cara klik pada object yang error kemudian klik pada gambar lampu
dan terakhir import dependency yang dibutuhkan
15. Tambahkan bind property pada [Link]
Import dependency yang dibutuhkan seperti pada langkah nomor 13
Page | 9
16. Masih pada PageModel [Link] kita tambahkan method onPost seperti dibawah
ini
Import dependency user model
Import dependency password hasher
Import dependency security claim
Import dependency cookie authetincation default
Import dependency signin async
Page | 10
Pastikan semua dependency sudah ditambahkan. Untuk dependency pada page
[Link] adalah seperti dibawah ini
17. Tambahkan code pada [Link] dan tambahkan [Link]() dan
[Link] pada void Configure yang berguna sbg validasi untuk mengakses
halaman sehingga menjadi seperti dibawah
Page | 11
18. Masih di [Link] tambahkan code pada void configureservices sehingga menjadi seperti
dibawah ini
19. Import semua dependency yang dibutuhkan pada file [Link]
20. Buatlah page baru untuk logout proses dengan membuat pada terminal
21. Buka file [Link] dan rubah method onGet menjadi seperti dibawah ini
Page | 12
Import semua dependency yang dibutuhkan
22. Buka file [Link] dan rubah method OnGet menjadi seperti dibawah ini
Import dependency yang dibutuhkan
23. Buka file [Link] dan rubah code pada isinya sehingga menjadi seperti ini
24. Jalankan project dengan cara mengetik perintah pada terminal-> dotnet run
Page | 13
25. Buka broser dan buka link [Link] maka akan tampil halaman login
Setelah kita login dengan user admin@[Link] dan password admin maka akan tampil
kehalaman utama
Page | 14