Buku Alamat - Akhlika1800016057/tekweblanjut-1800016057 GitHub Wiki

                              ** Langkah langkah membuat buku alamat **

1.Sebelum membuat buku alamat menggunakan angular, pastikan node js dan Angular sudah terinstall pada computer atau laptop

2.Langkah kedua, buatlah project baru pada CMD dengan nama “buku-alamat”. Caranya buat perintah ng new buku-alamat. Perintah tersebut akan menghasilkan output would you like to add Angular routing?Y/N. maka ketik Y untuk melanjutkan. Selanjutnya akan muncul pertanyaan which stylesheet format would you like to use? Kemudian pilih pengaturan style desain menggunakan CSS. Sebelumnya pastikan perangkat computer atau laptop terhubung dengan internet. Tunggu sampai muncul pernyataan “ Packaged installed Successfully”

3. Selanjutnya masuk kedalam project Angular yang sudah dibuat dengan cara menuliskan perintah cd buku-alamat(nama project). Lalu tuliskan perintah ng serve untuk menjalankan project. Tunggu hingga muncul pernyataan “Compiled Success”

4. Pada angular, ada beberapa struktur file dan fungsinya. Diantaranya :

• e2e

• node_modules

• src

• app

app-routing-module.ts untuk mengatur navigasi

app.component.css untuk membuat style desain user interface

app.component.html untuk membuat desain user interface

app.component.spec.ts

app.component.ts untuk menuliskan perintah-perintah program termasuk algoritma.

App.module.ts file utama aplikasi untuk mengatur library-library yang digunakan termasuk mengatur routing dan component yang digunakan

5. Langkah berikutnya yaitu menambahkan material desain kedalam project angular dengan menuliskan perintah ng add @angular/material, kemudian akan muncul beberapa pertanyaan seperti

• Choose a prebuilt theme name, or custome for a custome theme: pilih Indigo/pink

• Set up global Angular material typography styles? Klik yes

• Set up browser animation for Angular Material? Klik yes

6. Keenam adalah menerapkan template dalam aplikasi. Untuk memasang beberapa komponen UI kedalam aplikasi ada beberapa langkah yang harus dilakukan. Diantaranya :

• Masukkan module komponen material desain kedalam file app.module.ts seperti gambar dibawah ini

•Masukkan komponen desain pada kedalam file app.component.html

7. Membuat Toolbar Sekarang kita akan tambahkan tombol Buat Alamat yang diletakkan pada sisi kanan Toolbar. Untuk membuatnya ikuti langkah berikut:

• Tambahkan CSS pada file app.component.css seperti gambar dibawah ini

• Tambahkan import {MatButtonModule} from '@angular/material/button'; dan MatCardModule pada app.module.ts/ Tambahkan modul komponen Button pada app.module.ts

• Tambahkan pula button pada app.component.html

Untuk mengetahui apakah langkah sukses, maka masuk pada localhost:4200, kemudian cek cmd jika pada cmd tertulis compiled success berarti langkah ini berhasil

Setiap melakukan pengecekan pada localhost, pastikan proses pada CMD sukses. Jika terjadi error maka dapat dilihat pada cmd.

8. Membuat Card daftar alamat

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

• Memasukkan komponen Card, List, dan Icon kedalam app.module.ts

• Membuat desain card pada app.component.html. Gambar pada matListAvatar mengarah pada folder src/assets. Oleh sebab itu Anda perlu menambahkan gambar dengan nama avatar.png agar gambar tersebut muncul sebagai avatar pada list yang dibuat.

• Menambahkan CSS pada app.component.css. CSS .container akan membuat tampilan card memiliki batas 100px di kanan dan kiri serta batas 50px di atas dan bawah.

• Membuat list menu. List menu merupakan komponen Material Desain untuk menampilkan daftar menu dalam tampilan popup yang muncul setelah sebuah tombol ditekan. Daftar menu yang akan kita tampilkan adalah DETAIL, EDIT, dan DELETE. Untuk lebih detail, lihat referensi pada https://material.angular.io/components/menu/examples. Pada app module.ts

Pada app.component.html

Kemudian cek pada localhost:4200

9. Dialog Penambahan Alamat

• Tambahkan modul MatDialog, MatFormField, dan MatInput pada app.module.ts

• Membuat Component baru untuk membuat desain dialog

ng generate component tambah-alamat pada cmd

• Kemudian secara otomatis pada file app.module.ts akan langsung menambahkan import TambahAlamatComponent

• Kemudian tambahkan entryalamat pada app.module.ts

• Buat desain html pada file tambah-alamat.component.html

• Tambahkan perintah untuk menampilkan dialog dengan cara menambahkan kode pada file app.component.ts.

• Tambahkan trigger pada tombol TAMBAH ALAMAT yang ada pada Toolbar. Tombol tersebut digunakan untuk memanggil fungsi buatAlamat() yang sudah dibuat pada proses sebelum ini. Tambahkan perintah (click)="tambahAlamat()" pada file app.component.html.

Cek localhost, tampilannya akan seperti gambar dibawah

10. Dialog Detail Alamat

Dialog detail alamat digunakan untuk menampilkan data alamat secara detail. Proses untuk membuat dialog detail alamat ini sama seperti saat membuat dialog tambah alamat. Perbedaannya hanyalah pada kode HTML pada dialog yang dibuat. Ikuti langkah berikut:

• Buat komponen baru dengan menuliskan perintah ng generate component detail-alamat pada cmd

• Tambahkan kode html pada detail-alamat.component.html seperti berikut

• Tambahkan komponen DetailAlamatComponent pada EntryComponents dalam file app.module.ts. (Lihat langkah serupa pada bagian sebelum ini). Tambahkan juga komponen DetailAlamatComponent pada app.component.ts dan buat juga fungsi untuk membuka dialog.

App module.ts

App.component.ts

Kemudian cek kembali pada localhost:4200, klik list, klik detail

Membuat dialog hapus data

Pertama, membuat komponen dialog-konfirmasi menggunakan perintah berikut ini. Perintah ini adalah shortcut untuk membuat komponen baru pada Angular.

ng g c dialog-konfirmasi

Kedua, Menambahkan DialogKonfirmasiComponent pada atribut entryComponents pada file app.module.ts.Import komponen DialogKonfirmasiComponent pada app.component.ts dan tambahkan fungsi untuk menampilkan dialog.

App.module.ts

App.component.ts

dialog-konfirmasi/dialog-konfirmasi.html.

pertama, buka file dengan notepade

Kemudian edit

Keempat, menambahkan fungsi konfirmasi() pada dialog-konfirmasi/dialog-konfirmasi.ts untuk memberikan nilai true saat pengguna menekan tombol Ya, Hapus!.

Cek pada localhost:4200 Klik bagian list, kemudian pilih delete, sehingga akan muncul seperti gambar dibawah ini

11. Membuat Dialog Edit Data

Dialog edit data para prinsipnya sama dengan dialog membuat data baru. Oleh sebab itu kita akan memanfaatkan desain UI membuat data baru untuk keperluan edit data. Langkah teknis untuk melakukan hal tersebut akan kita bahas secara spesifik pada bagian edit data. Oleh sebab itu, menu EDIT pada list alamat akan kita kerjakan pada tahap selanjutnya.

12. Komunikasi Angular dengan Server

Angular merupakan framework yang berorientasi pada perangkat klien seperti browser. Aplikasi angular dapat berjalan tanpa server, meskipun dapat juga berjalan pada server. Namun jika aplikasi yang kita buat memerlukan kemampuan untuk penyimpanan data secara online maka data-data tersebut harus tersedia pada server. Angular menyediakan modul agar aplikasi dapat berkomunikasi dengan server melalui HTTP. Kali ini kita akan membuat koneksi sederhana antara aplikasi Angular dengan server yang akan kita buat menggunakan PHP.

13. Membuat API menggunakan Codeigniter

Unduh file dari repositori github https://github.com/faridsurya/restapi_codeigniter3. Ekstraksi file aplikasi dan pindahkan pada folder htdocs pada XAMPP. Ubah nama folder menjadi rest-api. Buka terlebih dahulu https://github.com/faridsurya/restapi_codeigniter3

Kemudian download file dengan cara klik clone or download pada sisi kanan atas

Kemudian klik download zip

Setelah itu akan file akan tersimpan pada laptop dengan format zip

Kemudian ekstrak file yang sebelumnya masih dalam bentuk zip, simpan pada folder htdoc(xampp), ganti nama folder menjadi rest_api

Buka folder rest_api, pastikan isi folder sesuai

Mengatur Koneksi HTTP Angular • Pertama, kita perlu untuk memasang modul HTTP pada app.module.ts

• Berikutnya adalah membuat api.service.ts dengan menjalankan perintah ng g service api Pada cmd

Perintah ng g service api akan menciptakan dua file yaitu api.service.spec.ts dan api.service.ts.

Kemudian buka file api.service.ts, buka file pada notepad ++ kemudian masukkan kode seperti gambar dibawah ini

• Selanjutnya adalah membuat fungsi pada api.service.ts seperti pada gambar dibawah

• Setelah itu, memanggil data pada server melalui komponen app.component.ts

Jalankan aplikasi Angular dan periksa halaman console pada browser. Fokus pada bagian Network dan perhatikan gambar berikut:

SEBELUM

Sebelumnya terjadi masalah, dimana status ok yang ingin ditampilkan ternyata tidak berhasil (failed). kesalahan terdapat pada pemberian nama folder codeigniter yang tidak sesuai dengan link yang sudah ada dan digunakan. Sehingga setelah nama folder diperbaharui sesuai dengan perintah dan link yang ada, maka status berubah menjadi ok

SESUDAH

14. 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, kemudian buatlah table dengan nama alamat, kemudian row 8 lakukan seperti gambar dibawah ini

Kemudian buat id menjadi kunci utama dengan cara seperti gambar dibawah ini

Buatlah data sample dengan mengeksekusi kode sql berikut ini: INSERT INTO alamat (id, nama, hp, email, alamat, kota, propinsi,kodepos) VALUES (NULL, 'Hasanuddin', '0868393826', '[email protected]', 'Jl. Kenangan No. 66 Umbulharjo', 'Yogyakarta', 'DIY','23456');

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. Seperti gambar dibawah ini

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

Menampilkan Data pada Aplikasi Angular

Pertama, update file api.service.ts sehingga menjadi seperti kode berikut:

kedua, Update file app.component.ts.

Jalankan aplikasi Angular dan periksa apakah data alamat yang disediakan oleh API Codeigniter sudah tesedia dengan memeriksa Network pada Browser.

Ketiga, update file app.component.html sehingga seperti pada kode berikut:

15. Menambahkan Data Baru

• Pertama, buka kembali file api.service.ts dan sesuaikan kode sehingga menjadi seperti dibawah ini:

• Kedua, buka file tambah-alamat.component.ts. Sesuaikan kode terhadap penambahan kode berikut:

• Ketiga, buka file tambah-alamat.component.html dan sesuaikan sehigga kode menjadi seperti berikut ini

• Keempat, tambahkan modul Form pada app.module.ts. Buka file tersebut dan sesuaikan kode dengan tambahan berikut:

Membuat List Daftar Alamat Otomatis Diperbarui

Setelah dialog penambahan data ditampilkan dan pengguna sudah mengisi data lalu menyimpannya, dialog akan ditutup otomatis oleh perintah this.dialogRef.close(true); yang ada pada langkah ke-2. Tapi setelah dialog tertutup data baru tersebut belum masuk ke daftar alamat. Untuk membuat data secara otomatis diperbarui ketika terdapat pembaruan data, buka file app.component.ts dan sesuaikan kode menjadi seperti dibawah ini:

16. Menampilkan Data

Tahap ini kita akan menampilkan detail data yang tersimpan. Pada tahap sebelumnya kita sudah membuat dialog untuk menampilkan data. Kita akan melakukan modifikasi kode agar data yang ditampilkan merupakan data yang sebenarnya. Ikuti langkah berikut:

Pertama, sesuaiakan trigger pada tombol yang membuka dialog detail data pada file app.component.html.

Kedua, buka file app.component.ts dan sesuaikan kode dengan kode berikut:

Ketiga, buka file detail-alamat.component.ts dan sesuaikan kode menjadi seperti berikut:

Keempat, buka file detail-alamat.component.html dan sesuaikan kode menjadi seperti berikut ini:

17. Memperbarui Data

Untuk memperbarui data, kita akan menggunakan desain UI yang sama dengan fungsi penambahan data. Kita akan melakukan modifikasi pada file tambah-alamat.component.ts sehingga dapat berfungsi juga untuk melakukan pembaruan data. Lakukan langkah berikut:

Pertama, buka file app.component.html dan pastikan tombol Edit Data sudah memuat perintah untuk membuka dialog, dilengkapi dengan parameter item (editAlamat(item)).

Kedua, sesuaikan kode pada app.component.ts sehingga fungsi untuk menampilkan dialog formulir menjadi seperti berikut:

Ketiga, sesuaikan file tambah-alamat.component.ts menjadi seperti di bawah ini:

Variabel data akan diisi oleh data detail alamat jika nilai variabel itemData bernilai null. Kita juga perlu melakukan modifikasi juga terhadap file app.component.ts untuk fungsi buatAlamat() agar fungsi simpan(data) memiliki dua fungsi yakni menambahkan data baru atau memperbarui data yang sudah ada. Sesuaikan kode pada app.component.ts menjadi seperti berikut ini:

SEBELUM

SESUDAH

18. Menghapus data

Untuk menambahka fungsi penghapusan data, kita perlu untuk melakukan modifikasi pada app.component.ts. Sesuaikan kode sehigga menjadi seperti berikut:

Pastikan perintah hapus pada tombol sudah dilengkapi dengan paramter id data.

Pastikan proses sukses di cmd

19. Mendistribusikan Aplikasi ke Website

Semua fungsi CRUD pada aplikasi Angular sudah tersedia. Tahap terakhir adalah mendistribusikan aplikasi Angular agar dapat dijalankan pada browser. Jalankan perintah berikut ini:

ng build --base-href ./

Perintah tersebut akan menciptakan folder dist pada proyek Angular.

File-file di atas merupakan file hasil deployment Angular yang dapat dijalankan di berbagai lingkungan misalnya web, ekstensi Chrome, aplikasi desktop, maupun aplikasi mobile. Pindahkan isi folder tersebut pada folder htdocs pada Xampp. 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.

Buka localhost/buku-alamat

                                       “ ALHAMDULILLAHIRABBIL'ALAMIIN “