Membuat Aplikasi Stock Barang dengan Menggunakan Angular dan CI - AlwanRidhoMusthofa/UAS_TEKWEB_1800016075 GitHub Wiki

Halo semua saya Alwan dan ini adalah langkah - langkah dari membuat aplikasi Stock Barang menggunakan Angular dan CodeIgniter. Disini saya menggunakan Node Js, Angular CLI, Material for design, dan xampp Membuat Aplikasi dengan menggunakan angular dan CI.

Bagian Pertama : Membuat Bagian Front End (Angular)

  1. Pertama seperti biasa membuat file project didalam cmd, setelah itu membuat component login dan stock. lakukan langkahya dengan menggunakan perintah ng g c login dan ng g c stock seperti dibawah didalam cmd. Maka akan tercipta dua file yang ada didalam projek.

1

  1. Install material designnya dengan perintah ng add @angular/material, setelah install lalu kita membuat folder material yang berisikan material.ts, beberapa komponen material angular.

2

  1. Buka app.module.ts dan tambahkan module material desain yang sudah kita buat.

3

  1. Mengatur routing guna mempermudahkan navigasi antar halaman.

4

  1. Membuat desain halaman utamanya, didalam file app.component.html.

5

  1. Membuat tampilan login form yang sederhana pada login-component.html.

6

  1. Mengatur css nya

7

  1. Buka file login.component.ts untuk menambahkan fungsi agar bisa terhubung ke admin.

8

  1. Masuk kedalam file stock.component.html untuk mengatur tampilan halamannya.

9

  1. Sesuaikan pada file stock.component.css

10

  1. Selanjutnya kita akan membuat dialog untuk menambahkan data / kegiatan. Lakukan dengan perintah ng g c tambah-data, lalu buka file tambah-data.component.html dan tambahkan kode berikut untuk mengatur tampilannya

11

  1. Update kode yang ada di app.module.ts

12

Berikut adalah hasil bagian pertama kita dalam membuat front end.

Hasil1

Bagian Kedua : Membuat Bagian Back End (CI)

  1. Masukkan File CI Ke htdocs didalam xampp, kemudian mengatur Koneksi HTTP Angular.

2 1

  1. Berikutnya adalah membuat api.service.ts dengan menjalankan perintah berikut ini melalui terminal.

2 2

  1. Perintah ng g service api akan menciptakan dua file yaitu api.service.spec.ts dan api.service.ts. Tuliskan kode berikut ini pada file api.service.ts.

2 3

  1. Setelah itu, memanggil data pada server melalui komponen stock.component.ts

2 4

  1. Lalu hubungkan database kedalam file database yang sudah kita buat didalam file config database

2 5

  1. Berikutnya buka file application/controllers/Api.php yang ada pada aplikasi API Codeigniter.

2 6

  1. Update file api.service.ts sehingga menjadi seperti kode berikut:

2 7

  1. Update file stock.component.html sehingga seperti pada kode berikut:

2 8

  1. Terakhir buat fungsi tambah, edit, dan hapus data kedalam file tersebut.

2 9

2 10

2 11

  1. Setelah itu kembali update dibagian html dari stock agar fungsi bisa digunakan dan diakses.

2 12

Berikut adalah hasilnya :

Hasil2

Hasil3

  • Tambah Data.

Hasil4

Hasil5

  • Edit Data, mengedit data Sampoerna menjadi Sampoerna Mentol.

Hasil6

  • Hapus Data, menghapus data Minyak Goreng Fortune

Hasil7

Made with love by Alwan Ridho Musthofa.