Aplikasi Buku Alamat - adeliaputri/tekweblanjut_1800016056 GitHub Wiki

Welcome to the tekweblanjut_1800016056 ( Adelia Putri) wiki!

Membuat Aplikasi Buku-Alamat Menggunakan Angular

Untuk membuat aplikasi buku-alamat ini kita membutuhkan beberapa software pendukung seperti Node-js + npm, Xampp, Angular, dan pastinya notepad++ atau visual code dan sejenisnya. Langkah-langkah untuk membuat aplikasi buku-alamat ini yaitu

  1. Pastikan semua software sudah terinstall.
  2. Buka CMD dan masuk ke direktori yang akan diletakkan project angular tersebut
  3. Jika sudah, ketikkan perintah ng new buku-alamat 1
  4. Apabila project berhasil terbuat maka akan ada pemberitahuan packages installed successfully 2
  5. Masuk Kembali ke direktori project yang telah dibuat menggunakan perintah cd [nama direktori project]
  6. Setelah masuk ketikkan perintah ng serve untuk mengaktifkan localhost 3
  7. Jika berhasil maka tampilan awalnya akan seperti gambar dibawah ini : 4
  8. Apabila localhost sedang berjalan atau aktif . maka untuk keluar atau memberhentikan prosesnya silahkan tekan ctrl + c. dan pilih y (yang berarti yes) 5

MEMASANG TEMPLATE

  1. Masukkan perintah ng add @angular/material
  2. Pilih tamplate desain tamplate yang akan dipilih untuk tampilan aplikasi buku-alamat, setelah itu tamplate akan melakukan (installing), jangan di close apabila sedang melakukan penginstallan 6
  3. Jika telah berhasil menginstal, maka aka nada pemberitahuan packages install succesfully 7
  4. Gambar dibawah ini merupakan tampilan tamplate yang berhasil diinstall 8

Menerapkan Tamplate dalam aplikasi

  1. Memasukkan modul komponen Material Desain kedalam modul app.module.ts 10
  2. Memasukkan komponen desain pada app.component.html 9

MEMBUAT TOOLBAR

  1. Tambahkan CSS pada file app.component.css dengan kode berikut ini: 11
  2. Selanjutnya menambahkan komponen button pada app.module.ts 12
  3. Kemudian menambahkan nama (Tambah Alamat) pada button tersebut 13

MEMBUAT CARD DAFTAR ALAMAT

Card daftar alamat digunakan untuk menampilkan data alamat. Komponen yang dugunakan adalah Card, List, Icon, dan Button.

  1. Tambahkan komponen card, icon, dan list (contohnya terdapat pada gambar ) pada app.module.ts 14
  2. Membuat desain card pada app.component.html.. 15
  3. Silahkan cari gambar yang diinginkan . kemudian simpan pada folder src/assets. Dikarenakan pada file app.component.html pemanggilan gambar di arahkah ke folder tersebut. 16
  4. Tambahkan css.container pada app.component.css. contohnya pada gambar dibawah ini . 
    

17 ** Maka akan terlihat hasil seperti ini setelah penambahan gambar** 18

MEMBUAT LIST MENU

  1. Selanjutnya membuat list ( detail, edit, delete ) .
  2. Tambahkan komponen MatMenuModule pada file app.module.ts 19
  3. Kemudian tambahkan bagian detail, edit, delete pada b 20
  4. Maka tampilannya akan menjadi seperti gambar dibawah ini 21

MEMBUAT DIALOG PENAMBAHAN ALAMAT

  1. Menambahkan MatDialog, MatFormField, dan MatInput pada app.module.ts 22
  2. Selanjutnya hal terpenting adalah membuat folder atau component tambah-alamat dengan cara memasukkan perintah ng generate component tambah-alamat. Maka secara otomatis folder atau file tersebut akan terbuat 23
  3. Selanjutnya hal terpenting adalah membuat folder atau component tambah-alamat dengan cara memasukkan perintah ng generate component tambah-alamat. Maka secara otomatis folder atau file tersebut akan terbuat 24
  4. Gambar dibawah ini merupakan codingan yang dapat dilakukan untuk menampilkan form tambah alamat . kita dapat mengedit pada bagian component :
  • App. Modul.ts
  • Tambah-alamat.component.html
  • App.component.html
  • App.component.ts 25 27 28 30

MEMBUAT DIALOG DETAIL ALAMAT

  1. Masukkan perintah ng generate component detail-alamat 31
  2. Tambahkan kode pada component detail-alamat.component.html, dan pastikan pada app.module.ts sudah dimasukkan import terhadap DetailAlamatComponent dibagian EntryComponent. Gambar dibawah ini merupakan contoh kode apa saja yang dapat dimasukkan pada bagian pembuatan detail alamat 32 33 34 35

MEMBUAT DIALOG KONFIRMASI HAPUS DATA

  1. Masukkan perintah ng g c dialog-konfirmasi pada CMD 36
  2. Kemudian Menambahkan DialogKonfirmasiComponent pada atribut yang diperlukan seperti pada file app.component.ts, app.module.ts, dan melakukan pengeditan dibagian file dialog-konfimasi.component dengan ekstensi ts, html. Gambar dibawah ini merupakan contoh kode yang diperlukan pada saat pengeditan 37 38 39 40

MEMBUAT API MENGGUNAKAN CODEIGNITER

API (Application Programming Interface) ini digunakan untuk media komunikasi antara aplikasi Angular dengan database. Hal ini dilakukan karena Angular tidak dapat berkomunikasi secara langsung dengan SQL database yang ada pada server. API bertugas untuk mengambil, menyimpan, memperbarui, atau menghapus data dari database jika ada permintaan dari aplikasi angular untuk kemudian memberikan respon kepada aplikasi Angular tentang permintaan yang dikirim. 
  1. Pastikan kita sudah mendownload API. Masukkan folder API tersebut pada folder xampp – htdoc. 41
  2. Kemudian buka XAMPP . Aktifkan bagian apache , dan MySQL 42
  3. kita perlu untuk memasang modul HTTP pada app.module.ts seperti tampak pada kode berikut: 43
  4. Berikutnya adalah membuat api.service.ts dengan menjalankan perintah berikut ini melalui terminal. 44
  5. Perintah ng g service api akan menciptakan dua file yaitu api.service.spec.ts dan api.service.ts. tuliskan kode seperti gambar dibawah ini 45 46 Fungsi tersebut memanggil this.api yang sudah dibuat pada tahap 4. Service yang dipanggil pada fungsi tersebut adalah fungsi status() yang memanggil data dari server http://localhost/rest-api/index.php/api/status. Jalankan aplikasi Angular dan periksa halaman console pada browser. Fokus pada bagian Network dan perhatikan gambar berikut: 47

Menampilkan Data Server

Pertama, Membuat Mysql database. Untuk melakukan hal ini, buatlah data dummy pada Mysql database. Buka aplikasi Phpmyadmin melalui browser dengan alamat localhost/phpmyadmin. Buatlah database baru dengan nama buku_alamat. Setelah itu, kita perlu menyediakan Data pada API Codeigniter agar API yang kita buat dapat membaca data yang tersimpan dalam Mysql database maka perlu dilakukan pengaturan koneksi database pada Codeigniter. Buka file pada application/config/database.php dan isikan buku_alamat pada atribut database sesuai dengan nama database yang sudah kita buat pada langkah pertama. Lihatlah contohnya pada gambar dibawah ini PHP

Jika berhasil melakukan penampilan data maka dibagian network – data akan terlihat data yang telah kita masukkan atau insert pada mysql. Gambar dibawah ini merupakan hasilnya. segmen data adalah nama fungsi pada class Api. Pola yang sama berlaku untuk metode HTTP detail, edit, dan delete. DATABASE **Tampilan data bases yang berhasil dibuat ** 52

Menampilkan Data pada Aplikasi Angular

  1. lakukan pengeditan kode agar dapat melakukan penambahan data, memperbaharui data (edit), dan menghapus data

BAGIAN MENAMBAHKAN DATA BARU

Pertama, buka kembali file api.service.ts, tambahkan Fungsi simpan(data), fungsi ini akan mengirimkan data ke server dengan metode POST. Data tersebut akan diterima oleh aplikasi API Codeigniter melalui fungsi data_post() pada Class Api.php. 61 Kedua, buka file tambah-alamat.component.ts. tambahkan ApiService digunakan untuk mengakses service yang menghubungkan aplikasi Angular dengan API Codeigniter yang terapat pada server. MatDialogRef digunakan untuk menutup dialog setelah data berhasil disimpan oleh fungsi simpan(data). 62 Parameter data pada fungsi simpan() diperoleh dari trigger tombol yang terdapat pada tambah-alamat.component.html. Parameter data tersebut merupakan objek yang berisi data-data formulir yang diisi oleh pengguna. 63 Ketiga, buka file tambah-alamat.component.html dan sesuaikan sehigga kode menjadi seperti berikut ini. Pada contoh ini, kita menggunakan [(ngModel)] untuk mengambil data input. Keempat, tambahkan modul Form pada app.module.ts. Buka file tersebut dan sesuaikan kode dengan tambahan berikut: 64 55 56 57

BAGIAN MENGHAPUS DATA

Bagian ini sudah ada diatas tentang penjelasannya. Menghapus data 53

BAGIAN MENAMPILKAN DATA

  • Membuka detail alamat dieksekusi oleh perintah (click)="detailAlamat(item)". Parameter item merupakan object yang didalamnya terdapat data-data alamat (nama, email, hp, dll). Pertama, sesuaiakan trigger pada tombol yang membuka dialog detail data pada file app.component.html. 65(edit)

Membuka detail alamat dieksekusi oleh perintah (click)="detailAlamat(item)". Parameter item merupakan object yang didalamnya terdapat data-data alamat (nama, email, hp, dll). Kedua, buka file app.component.ts dan sesuaikan kode dengan kode berikut 66

Atribut data:item pada object dialogRef akan mengirimkan data item ke komponen dialog detail data. Ketiga, buka file detail-alamat.component.ts dan sesuaikan kode menjadi seperti berikut: 67 keempat, buka file detail-alamat.component.html dan sesuaikan kode menjadi seperti berikut ini: 68

Tampilan detail 58 40. kita akan menampilkan data yang tersedia pada API pada daftar alamat yang sudah kita buat sebelumnya di aplikasi Angular. 54(1) Tampilan setelah melakukan penambahan data 59

Mendistribusikan Aplikasi ke Website

60

Perintah tersebut akan menciptakan folder dist pada proyek Angular. Pastikan nama folder pada htdocs adalah buku-alamat. Akses melalui browser dengan alamat localhost/buku-alamat. Itulah aplikasi Angular pertama Anda yang berhasil didistribusikan dalam web. folder build Tampilan jika membuka lewat localhost/buku-alamat buka lewat buku-alamat

CATATAN SELAMA PEMBUATAN APLIKASI BUKU ALAMAT

Sering terjadi error pada file app.component.ts, app.component.html, dan tambah-alamat.component, hal ini terjadi karena banyaknya kesalahan penulisan. error juga terjadi ketika dilakukannya penambahan alamat yang hanya bisa dilakukan apabila penambahan data dari MySQL, ternyata ada kesalahan antara penulisan, jadi penulisan pada sebuah fungsi harus sama pada setiap komponent sehingga apabila funsgi itu dipanggil, ia dapat bekerja.

kendala terberat pada pembuatan aplikasi buku-alamat ini adalah menyinkronkan antara setiap pembaharuan dengan kode-kode atau file-file yang terkait. yang terpenting harus jeli atau paham bagaimana cara melihat letak errornya.