Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Laravel

AngularJS dan Laravel: Menyelesaikan Membangun CRM

by
Length:LongLanguages:
This post is part of a series called Building a Customer Management App Using AngularJS and Laravel.
AngularJS and Laravel: Begin Building a CRM

Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)

Saat membuat aplikasi satu halaman kita harus menggunakan beberapa jenis kerangka kerja untuk melakukan beberapa pekerjaan untuk kita sehingga kita dapat fokus pada fungsi sebenarnya.

AngularJS cocok di sini dengan sempurna, karena fitur seperti injeksi dependensi dinamis dan pengikatan data dua arah sangat hebat. Terkadang kita juga membutuhkan beberapa jenis server. Jika Anda memilih PHP maka Laravel mungkin pilihan terbaik Anda, karena mudah untuk bekerja dengannya dan cukup kuat.

Di bagian tutorial ini, kita akan membangun front-end aplikasi kita menggunakan AngularJS. Angular adalah kerangka kerja yang sangat unik. Alih-alih abstrak HTML atau menyediakan beberapa cara manipulasi DOM mereka memperluas HTML untuk menangani kenyataan bahwa itu pasti tidak dirancang untuk bekerja dengan data dinamis.

Karena itu Abgular mungkin memerlukan lebih banyak pembelajaran daripada kerangka kerja lainnya, tapi ini sangat berharga untuk waktu yang dihabiskan.


Persiapan

Sebelum kita memulai pemrograman front-end kita, kita harus memodifikasi bagian Laravel sedikit. Buka app/views, hapus contoh yang ada dan buatlah file bernama home.php. Sekarang mari kita buat tata letaknya.

Mulailah dengan DOCTYPE dan tag html:

Seperti yang Anda lihat, kita telah menggunakan beberapa barang AngularJS - direktif ng-app. Ini memberitahu angular untuk menggunakan modul yang diberi nama app untuk aplikasi ini (kita akan menentukannya nanti). Setelah itu tambahkan head dengan title dan CSS:

Sekarang Anda dapat menempatkan tag script dengan Angular, itu modul routing dan aplikasi kita:

Direktif ini memberitahu Angular untuk menempatkan template yang diminta ke elemen itu.

Setelah itu kita hanya perlu menambahkan rute untuk menampilkan template (di app/routes.php). Tambahkan ini sebelum rute untuk controller:

Sekarang jika Anda memulai server (dengan php artisan serve) Anda akan melihat tata letak dasar saat Anda menavigasi ke http://localhost:8000/ di browser Anda:

Gaya

Artikel ini tidak akan berfokus pada apapun yang berhubungan dengan CSS, namun untuk membuat aplikasi lebih menyenangkan dipandang mata saat Anda sedang mengembangkan, kita akan menambahkan beberapa gaya untuknya. Buka direktori public/ dari aplikasi Anda (ini di samping app/) dan buat style.css dengan kode ini di dalamnya:

Sekarang buka aplikasi di browser Anda dan tata letaknya harus dipusatkan dengan font yang lebih bagus di judul:

Struktur Aplikasi Dasar

Kita akan mulai dengan deklarasi modul. Modul di Angular cukup banyak hal yang sama seperti di perpustakaan AMD manapun, namun dengan penambahan injeksi dependensi yang merupakan hal yang sangat berguna, seperti yang akan Anda lihat. Berikut adalah deklarasi modul app kita

Sintaksnya sederhana - pertama masuk ke nama modul, dan kemudian array dependensi - kita hanya akan menggunakan ngRoute di sini untuk menangani navigasi, yang akan dilanjutkan.

Routing

Routing didefinisikan dalam metode config() dari modul:

Inilah saat injeksi ketergantungan dimulai untuk pertama kalinya - callback kita akan membawa $routesProvider sebagai satu-satunya argumen, dan modul ini akan disuntikkan oleh Angular.

Anda harus memastikan bahwa nama argumen persis sama dengan nama modulnya, karena Angular menggunakannya untuk mencocokkan modul yang sesuai.

Sekarang mari kita gunakan $routeProvider untuk mengatur rute:

Seperti yang dapat Anda lihat untuk menentukan rute yang harus Anda panggil ketika metode when() dari penyedia (perhatikan bahwa mereka dapat berantai).

Parameter pertama adalah URI, dan yang kedua adalah objek dengan pilihan rute. Di sini, kita memasang controller dan template yang sesuai ke setiap rute. Pada bagian kedua kita juga menggunakan :id pada akhirnya untuk menandai parameter rute yang akan kita gunakan nanti. Metode otherwise() mendefinisikan apa yang akan terjadi jika URI lainnya diakses.


Factory

Sebelum kita menulis controller, kita harus membuat sesuatu yang disebut factory. factory adalah fungsi yang mengembalikan sebuah layanan, yang sangat membantu jika Anda ingin memisahkan data fungsi yang mendapatkan/menetapkan dari controller (yang tentu saja adalah apa yang selalu ingin Anda lakukan). Kita mendefinisikannya menggunakan metode factory() dari modulnya:

Parameter pertama adalah nama layanan, dan yang kedua adalah fungsi yang mengembalikan layanan yang akan dibuat menggunakan factory ini.

Kita akan menggunakan modul $http untuk mengakses server kita menggunakan Ajax. Ini menyediakan metode pintasan untuk semua metode HTTP dan masing-masing mengembalikan sebuah promise (jika Anda tidak mengetahui apa itu lihat di sini dan di sini).

Kita harus mengembalikan layanan sebagai objek dengan semua metode yang akan digunakan di controller kita:

Yang pertama akan GET semua pelanggan sehingga kita bisa menunjukkannya dalam daftar:

Yang kedua hanya akan GET satu pelanggan dengan id-nya:

Ketiga akan POST permintaan untuk menambahkan pengguna ke database:

Argumen kedua di $http.post() adalah data yang akan dikirim ke server.

Berikutnya akan DELETE pelanggan dengan id yang disediakan:

Sekarang akan ada beberapa transaksi yang serupa. Satu untuk mendapatkan semuanya:

Satu untuk menambahkan yang baru:

Dan satu untuk menghapus:

Controller Pelanggan

Controller di Angular (seperti namanya) adalah cara untuk mengendalikan perilaku aplikasi. Kita akan memilikinya untuk setiap template. Pertama kita akan membuat satu untuk halaman utama. Mulailah dengan mendefinisikannya:

Parameter kedua di sini adalah fungsi constructor untuk controller. Argumen pertamanya ($scope) adalah penghubung antara DOM dan controller. Ini adalah jantung dari data binding dua arah dari Angular. Yang kedua adalah layanan dari factory yang kita buat tadi.

Mendapatkan Daftarnya

Sekarang kita akan mendapatkan daftar pelanggan dari server menggunakan layanan kita:

Semua promise di Angular memberikan metode succes() dan error() yang dapat digunakan untuk menambahkan callback yang sesuai. Sekarang mari kita definisikan fungsi yang akan mengurai data yang masuk untuk ditampilkan di halaman:

Ya, hanya itu yang diperlukan untuk mengisi template dengan data. Tidak perlu kode innerHTML/appendChild().

Menambahkan Pelanggan Baru

Kita juga perlu memberikan kemampuan untuk menambah dan menghapus pelanggan. Pertama mari kita buat sebuah objek dalam lingkup dimana kita akan menyimpan data pelanggan baru:

Dengan cara ini kita bisa menghindari akses DOM saat pengguna menambahkan pelanggan. Sekarang fungsi yang benar-benar akan menambahkan pelanggan:

Karena nama lengkap pengguna akan ditampilkan di tabel masukan untuk itu akan sama, jadi kita harus membaginya untuk mendapatkan nama depan dan belakang:

Sekarang kita memanggil fungsi yang sesuai dari factory kita dengan data dari $scope:

Setelah itu kita menambahkan listener success dan error atas promise yang dikembalikan:

Mari kita definisikan callback success dahulu:

Argumen data berisi teks tanggapan. Kita harus menghapus variabel $scope.error:

Push pelanggan baru yang ditambahkan ke $scope.customers:

Dan tetapkan $scope.newCustomer ke keadaan awal untuk menghapus masukannya:

Callback error hanya akan mengatur variabel $scope.error ke teks yang diterima dari server:

Menghapus Pelanggan

Fungsi untuk menghapus pelanggan akan mengambil id-nya sebagai parameter:

Kita juga akan menampilkan kotak konfirmasi sehingga pengguna memiliki kesempatan untuk membatalkan aksinya:

Jika pengguna yakin dia ingin melanjutkan, kita menghapus pelanggannya:

Callback di sini akan menghapus pelanggan dari $scope.customer menggunakan id yang didapat dari server:

Hasilnya

Kode lengkap akan terlihat seperti ini:

Template Pelanggan

Sekarang untuk benar-benar menampilkan data ke pengguna kita harus membuat template. Kita mendefinisikannya dalam rute yang akan menjadi ./templates/customers.html, jadi buatlah direktori public/templates dan file customers.html di dalamnya.

Pertama tambahkan judul sehingga pengguna tahu di mana dia berada:

Selanjutnya kita membutuhkan tabel dengan judul yang bagus untuk menunjukkan datanya:

Sekarang tambahkan elemen tbody. Dan di sinilah sihir Angular masuk lagi. Dengan menggunakan perintah ng-repeat, kita memberi tahu Angular untuk mengulang elemennya:

Sintaksnya seperti di perulangan for...in JavaScript. Sekarang kita bisa mengakses variabel customer untuk mendapatkan semua data yang kita butuhkan. Dalam Angular Anda memasukkan variabel menggunakan kurung kurawal ganda:

Ada juga perintah ng-click yang akan bertindak sebagai event callback onclick, kita menggunakannya untuk menambahkan kemampuan untuk menghapus pelanggan. Selanjutnya ada footer dengan masukan sehingga pengguna bisa menambahkan pelanggan baru:

Kita menggunakan perintah ng-model untuk mengikat variabel yang sesuai dari ruang lingkup ke masukan, sehingga diperbarui setiap ada perubahan nilai masukan.

Hal terakhir yang harus dilakukan adalah menunjukkan pesan kesalahan jika ada. Untuk mencapainya kita akan menggunakan perintah ng-show yang hanya akan menunjukkan elemennya jika ekspresi tertentu adalah true:

Itu saja! Sekarang Anda dapat membuka aplikasi di browser Anda dan Anda harus melihat ini:

Anda dapat menambahkan pelanggan baru dengan mengklik tanda tambah di sudut kanan bawah tabel.


Controller Pelanggan

Sekarang mari kita membuat controller untuk view satu pelanggan:

Mendapatkan Data

Kita mendapatkan data pelanggan menggunakan modul $routeParams yang menyimpan semua parameter rute seperti :id yang kita tentukan sebelumnya:

Callback hampir sama dengan di CustomersController. Sekarang mari kita dapatkan semua transaksi pelanggan:

Callback sedikit berbeda dari yang terakhir karena kita juga ingin menunjukkan jumlah dari jumlah transaksi. Kita perlu menggunakan parseFloat() karena Laravel mengirimkan float sebagai string.

Menambahkan Transaksi Baru

Kodenya akan sangat mirip dengan yang digunakan untuk membuat pelanggan baru:

Satu-satunya perbedaan adalah kita menambahkan id pelanggan ke data sehingga server mengetahui transaksi siapa itu. Callback success juga sedikit dimodifikasi, karena kita harus mengurai float sebelum menambahkannya ke $scope dan kita harus menambahkan jumlah tersebut ke jumlah kita.

Menghapus Transaksi

Kode untuk fungsi removeTransaction() hampir sama dengan removeCustomer yang berbeda hanya pada nama variabel:

Hasilnya

Controller keseluruhan harus terlihat seperti ini:

Template Pelanggan

Template untuk pelanggan tunggal tidak memiliki arahan Angular yang baru, jadi buat saja sebuah file bernama customer.html di public/templates/ dan letakkan kode ini di sana:

Perhatikan bahwa kita menggunakan toFixed(2) untuk membulatkan float sehingga mereka hanya memiliki dua bidang desimal, karena cara Laravel menangani float di JSON.

Sekarang Anda bisa membuka browser dan klik pada salah satu pelanggan yang Anda buat. Anda harus melihat controller dan template yang sedang berjalan:


Kesimpulan

Sekarang jika Anda telah menambahkan beberapa fungsi setelah bagian pertama, termasuk di front-end harus menjadi masalah penambahan beberapa baris kode di sana sini.

Saya harap setelah selesai membaca artikel dan aplikasi Anda selesai dan bekerja, Anda akan mulai berpikir bagaimana Anda bisa membuat aplikasi satu halaman tanpa aplikasi AngularJS dan aplikasi PHP tanpa Laravel. Beritahu saya jika Anda memiliki masalah dengan kerangka kerja apa pun yang disajikan di sini.

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.