Belajar Cara Membuat Navigasi - fitrianisyukur/tekwebfitri133 GitHub Wiki

Nama: FItriani Syukur Nim: 1800016133 Kelas Praktikum: D Kelas Teori: C

Langkah-langkah dalam membuat navigasi:

  1. mengakses (mengaktifkan) localhost:4200 via cmd terlebih dahulu. kemudian membuka lagi lewat chrome/mozila.

image

  1. kemudian membuat halaman pages home,pages student, dan pages teacher. component-component tersebut yang nantinya akan menjadi navigasi. untuk membuat halaman-halaman tersebut di butuhkan aplikasi git bash. sintaknya adalah ng generate component pages/home, ng generate component pages/student, ng generate component pages/teacher. untuk lebih jelasnya lihatlah gambar di bawah ini:

image

setelah selesai di buat, maka folder akan otomatis terinstall.

  1. lalu kita membuka folder src, kemudian kita drug ke aplikasi sublime. selanjutnya kita membuat halaman utama dengan format html, untuk di tampilkan pada layar komputer. berikut adalah codingannya:

image

perlu di perhatikan bahwa untuk membuat navigasi, kita harus membuat routingLink-nya pada masing-masing component.

  1. selanjutnya kita akan me-routing component home, student, dan teacher. perlu di perhatikan pada file app.routing.moudule.ts ada penambahan sintaks. untuk lebih jelasnya perhatikanlah gambar di bawah ini ada beberapa kalimat yang di highlight. sintak-sintak yang di highlight itulah lah yang penting.

image

  1. kemudian membuka file app.component.ts lalu inputkan template url sesuai alamat url yang ingin di tampilkan.

image

  1. lalu bukalah file app.module.ts perhatikanlah gambar di bawah ini. komponen-komponen yang tadinya telah dibuat, harus di import ke dalam file app.module.ts untuk lebih jelasnya lihatlah gambar di bawah ini:

image

  1. berikut adalah tampilan dari halaman utama.
    image

  2. ini adalah tampilan ketika halaman Home di klik. image

  3. ini adalah tampilan ketika halaman Student di klik. image

  4. ini adalah tampilan ketika halaman Teacher di klik. image

berikut adalah screenshoot cara mengapload file pada github:

image image image image image