Cara Melakukan Navigasi - adeliaputri/tekwebuad_1800016056 GitHub Wiki
Langkah Membuat Navigasi
- Buka CMD dan masuk ke dalam Direktori yang telah dibuat contohnya cd nama direktori yaitu cd tekweb1800016056.
- Setelah masuk kedalam direktori, ketik perintah ng serve berfungsi untuk mengaktifkan localhost agar dapat dilihat
- Sebelum itu kita bisa memilih gambar yang diinginkan dan dapat menampilkan gambar tersebut dengan syntax src. Dapat dilihat pada gambar dibawah ini saya memasukkan perintah src=”assets/FAST_UAD/jpg” berarti file gambar disimpan pada folder assets dengan nama gambar yaitu FAST_UAD
- Letakkan gambar folder yang sama dengan folder utama
- Mengubah atau melakukan modifikasi pada bagian file app.component.html. untuk mendapatkan tampilan yang diinginkan
- Kita dapat melakukan pemanggilan link pada bagian home dan student dengan cara menambahkan syntax href, seperti pada gambar dibawah ini.
- Jika berhasil maka pada tulisan home dan student akan berubah menjadi warna biru, seperti pada gambar dibawah ini Cara Membuat folder baru dan menambahkan file didalamnya secara otomatis
- Buka folder tekweb1800016056 src app, klik kanan , pilih git bash here. Ini berarti bahwa kita akan masuk dan melakukan modifikasi pada didalam folder app
- Masukkan perintah ng generate component pages/student
- Setelah berhasil, masukkan perintah ng generate component pages/home
Hal tersebut berfungsi untuk membuat folder baru dengan nama pages yang didalamnya berisi folder student dan home
- Folder yang telah berhasil dibuat (folder pages) akan terlihat di dalam folder app. Cara melakukan navigasi
Bagian home
- Pastikan langkah-langkah sebelumnya telah berhasil di lakukan.
- Selanjutnya buka file-file yang ada didalam folder app termasuk file yang ada didalam folder pages.
- Pastikan di file app.module.ts telah dilakukan pemanggilan terhadap file homecomponent, contohnya dapat dilihat pada gambar dibawah ini.
- Biasanya apabila kita melakukan penambahan folder menggunakan gitbash hal tersebut akan secara otomatis ditambahkan
- Kemudian buka file app.routing-module.ts . masukkan syntax pada bagian const routes: Routes { path:’home’, component:HomeComponent }
- Kita dapat melakukan modifikasi tampilan home dengan mengedit pada file home.component.html. Maka tampilannya akan seperti gambar dibawah ini
- Lakukan routing link. Dapat dilakukan dari file app.component.html, tambahkan syntax routerLink=”/alamatnya”. Contohnya routerLink=”/home”. Berarti tulisan Home apabila di klik akan berpindah ke halaman home. Dapat dilihat pada gambar dibawah ini
Bagian Student
- Langkahnya hampir sama melakukan navigasi home.
- Tambahkan syntax pada file app.routing-module.ts . masukkan syntax pada bagian const routes: Routes { path:’student’, component:StudentComponent } Contohnya dapat dilihat dari gambar dibawah ini.
- Kita dapat melakukan modifikasi tampilan home dengan mengedit pada file student.component.html. Maka tampilannya akan seperti gambar dibawah ini
Bagian Membuat Halaman-Baru
- Masukkan perintah ng generate component pages/Halaman-baru Hal tersebut berfungsi untuk membuat folder baru dengan nama pages yang didalamnya berisi folder Halaman-baru
- Jika berhasil maka pada folder pages akan ada folder Halaman-baru yang telah dibuat.
- Isi dari folder Halaman-baru yang dibuat
- Tambahkan syntax pada file app.routing-module.ts . masukkan syntax pada bagian const routes: Routes { path:’halaman-baru’, component:HalamanComponent } Contohnya dapat dilihat dari gambar dibawah ini.
- Pastikan di file app.module.ts telah dilakukan pemanggilan terhadap file HalamanBaruComponent, contohnya dapat dilihat pada gambar dibawah ini.
- Hal ini dapat dilihat di gambar dibawah :
- Kita dapat melakukan modifikasi tampilan home dengan mengedit pada file Halaman-baru.component.html. Maka tampilannya akan seperti gambar dibawah ini
Hasil Tampilan :