Cara Melakukan Navigasi - adeliaputri/tekwebuad_1800016056 GitHub Wiki

Langkah Membuat Navigasi

  1. Buka CMD dan masuk ke dalam Direktori yang telah dibuat contohnya cd nama direktori yaitu cd tekweb1800016056.
  2. Setelah masuk kedalam direktori, ketik perintah ng serve berfungsi untuk mengaktifkan localhost agar dapat dilihat 1
  3. 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 2
  4. Letakkan gambar folder yang sama dengan folder utama 3
  5. Mengubah atau melakukan modifikasi pada bagian file app.component.html. untuk mendapatkan tampilan yang diinginkan 4
  6. Kita dapat melakukan pemanggilan link pada bagian home dan student dengan cara menambahkan syntax href, seperti pada gambar dibawah ini. 5
  7. Jika berhasil maka pada tulisan home dan student akan berubah menjadi warna biru, seperti pada gambar dibawah ini 6 Cara Membuat folder baru dan menambahkan file didalamnya secara otomatis
  8. Buka folder tekweb1800016056  src  app, klik kanan , pilih git bash here. Ini berarti bahwa kita akan masuk dan melakukan modifikasi pada didalam folder app 7
  9. Masukkan perintah ng generate component pages/student
  10. 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
    8
  11. Folder yang telah berhasil dibuat (folder pages) akan terlihat di dalam folder app. 9 Cara melakukan navigasi

Bagian home

  1. Pastikan langkah-langkah sebelumnya telah berhasil di lakukan.
  2. Selanjutnya buka file-file yang ada didalam folder app termasuk file yang ada didalam folder pages.
  3. Pastikan di file app.module.ts telah dilakukan pemanggilan terhadap file homecomponent, contohnya dapat dilihat pada gambar dibawah ini.
  4. Biasanya apabila kita melakukan penambahan folder menggunakan gitbash hal tersebut akan secara otomatis ditambahkan 10
  5. Kemudian buka file app.routing-module.ts . masukkan syntax pada bagian const routes: Routes { path:’home’, component:HomeComponent } 11
  6. Kita dapat melakukan modifikasi tampilan home dengan mengedit pada file home.component.html. Maka tampilannya akan seperti gambar dibawah ini 12
  7. 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 13

Bagian Student

  1. Langkahnya hampir sama melakukan navigasi home. 14
  2. 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. 15
  3. Kita dapat melakukan modifikasi tampilan home dengan mengedit pada file student.component.html. Maka tampilannya akan seperti gambar dibawah ini 16

Bagian Membuat Halaman-Baru

  1. Masukkan perintah ng generate component pages/Halaman-baru Hal tersebut berfungsi untuk membuat folder baru dengan nama pages yang didalamnya berisi folder Halaman-baru 17
  2. Jika berhasil maka pada folder pages akan ada folder Halaman-baru yang telah dibuat. 18
  3. Isi dari folder Halaman-baru yang dibuat 19
  4. 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.
  5. Pastikan di file app.module.ts telah dilakukan pemanggilan terhadap file HalamanBaruComponent, contohnya dapat dilihat pada gambar dibawah ini.
  6. Hal ini dapat dilihat di gambar dibawah : 20
  7. Kita dapat melakukan modifikasi tampilan home dengan mengedit pada file Halaman-baru.component.html. Maka tampilannya akan seperti gambar dibawah ini 21

Hasil Tampilan : 22 23 24