BAB 3

Page - ASP.Net Core:

Absensi Project
Setelah kita mengetahui cara membuat project dari asp.net maka langkah selajutnya adalah
membuat page agar website kita dapat berjalan berjalan sebagaimana mestinya. Pada
pemrograman web asp.net 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 asp.net 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 Login.cshtml dan
Login.cshtml.cs

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 Login.cshtml dan tambahkan code berikut untuk membuat design html

10. Buka file appsetting.json kita akan menambahkan authetincation untuk email dan
password yang boleh login. Tambahkan code sehingga menjadi seperti ini

Page | 6
 Detail login adalah
Email:
[email protected]
Password: “AQAAAAEAACcQAAAAEBLa9qGVYB6C8npBE+817/
cvBLjYyFdQ3PXzXs6xH6VsA3dqax65YCl7LHuE6AstTg==”

Password diatas jika didecryp adalah “admin”

Untuk membuat hash password silahkan bias menggunakan aplikasi online berikut
https://dotnetfiddle.net/aaMWMC dan paste code berikut

using
System;
using Microsoft.AspNetCore.Identity;
namespace PasswordHasherTest
{
class Program
{
static void Main(string[] args)
{
var passwordHasher = new PasswordHasher<string>();
Console.WriteLine(passwordHasher.HashPassword(null, "admin"));
Console.ReadLine();
}
}
}

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 User.cs
Select folder models dan klik kanan kemudian pilih new file

Beri nama dengan User.cs dan tekan enter

13. Buka User.cs dan isi code seperti dibawah ini

Page | 8
14. Buka file Login.cshtml.cs 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 Login.cshtml.cs

Import dependency yang dibutuhkan seperti pada langkah nomor 13

Page | 9
16. Masih pada PageModel Login.cshtml.cs 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
Login.cshtml.cs adalah seperti dibawah ini

17. Tambahkan code pada Startup.cs dan tambahkan app.UseAuthentication() dan

app.UseAuthorization pada void Configure yang berguna sbg validasi untuk mengakses
halaman sehingga menjadi seperti dibawah

Page | 11
18. Masih di Startup.cs tambahkan code pada void configureservices sehingga menjadi seperti
dibawah ini

19. Import semua dependency yang dibutuhkan pada file Startup.cs

20. Buatlah page baru untuk logout proses dengan membuat pada terminal

21. Buka file Logout.cshtml.cs dan rubah method onGet menjadi seperti dibawah ini

Page | 12
 Import semua dependency yang dibutuhkan

22. Buka file index.cshtml.cs dan rubah method OnGet menjadi seperti dibawah ini

Import dependency yang dibutuhkan

23. Buka file index.cshtml 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 https://localhost:50001/ maka akan tampil halaman login

Setelah kita login dengan user [email protected] dan password admin maka akan tampil
kehalaman utama

Page | 14