Aplikasi Buku Tamu - Ghinaa/bukutamu GitHub Wiki

Assalammu'alaikum Wr. Wb

Tahap pertama adalah membuat aplikasi angular. Melalui terminal, jalankan perintah berikut: ng new bukutamu 1

Pastikan perangkat Anda terhubung internet saat melakukan instalasi. Gambar diatas menunjukkan bahwa saat insalasi, kita juga membuat file untuk mengatur router. Itulah fokus pembasan pada materi ini. Setelah selesai pembuatan aplikasi jalankan perintah berikut untuk masuk ke project aplikasi kita: cd admin-apl Untuk memastikan bahwa aplikasi Angular sudah berhasil dibuat, jalankan: ng s –open 2

Terdapat 3 modul yaitu:

  • AppModule (sudah dibuat secara default)

  • ManagerModule

  • KaryawanModule Untuk membuat module tersebut jalankan perintah: ng g module manager Setelah itu kita buat module karyawan: ng g module karyawan 3

  • Membuat Halaman Baru Halaman login ter-registrasi dalam modul AppModule. Jalankan perintah berikut: ng g c login

  • Halaman Manager Selanjutnya kita akan membuat halaman baru untuk halaman utama manager. Jalankan perintah berikut: ng g c manager Perintah diatas akan membuat komponen baru yang secara otomatis akan masuk kedalam modul ManagerModule. Terdapat dua halaman untuk manager yaitu daftar karyawan dan detail karyawan. Jalankan perintah berikut: ng g c manager/daftar-karyawan Perintah diatas akan membuat folder manager/daftar-karyawan untuk menampilkan halaman daftar karyawan. Berikutnya adalah membuat halaman detail karyawan. Jalankan perintah berikut: ng g c manger/detail-karyawan

  • Halaman Karyawan Untuk membuat halaman aplikasi sisi karyawan jalankan perintah berikut: ng g c karyawan Kemudian, halaman utama untuk karyawan berhasil dibuat. Berikutnya membuat halaman-halaman lain yang diperlukan untuk sisi karyawan. Prosedur yang sama dijalankan untuk membuat halaman-halaman pada sisi karyawan. Jalankan perintah berikut: ng g c karyawan/daftar-pekeraan 4

Kemudan jalankan: ng g c karyawan/detail-pekerjaan 5

Memasang Material Design Jalankan perintah berikut untuk memasang Material Design: ng add @angular/material 6

Pada material/material.ts isi kode sepeti berikut ini: 7

8

Berikutnya buka file app.module.ts dan import modul-modul material design. 9

10

Mengatur Router Tahap berikutnya adalah mengatur routing untuk semua halaman. Setiap aplikasi dijalankan maka sebenarnya secara default akan mengarah ke halaman app.component.ts. Oleh sebab itu, file HTML terkait yakni app.component.html akan menjadi kontainer utama aplikasi. Sehingga dalam file tersebut harus dimasukkan yang digunakan sebagai sarana untuk menampilkan halaman-halaman lain. Buka file app.component.html dan sesuaikan kode seperti berikut: 11

Kemudian buka file app.routing-module.ts 12

Membuat Desain UI Bagian ini membahas tentang teknik impelentasi desain UI menggunakan material design. Desain UI Login, buka file login.component.ts 13

Berikutnya buka file login.component.html 14

Hasilnya bisa terlihat di alamat http://localhost:4200/login seperti dibawah ini, yang menampilkan halaman login. 15

Kemudian masukkan email dan kata sandi nya. 16

Dan masuk pada halaman seperti dibawah ini: 17

Pada database nya seperti ini: 18

Menambahkan alamat tamu 19

20

21

                                               Terima Kasih