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

AngularJS dan Laravel: Memulai Membangun CRM

by
Difficulty:BeginnerLength:LongLanguages:
This post is part of a series called Building a Customer Management App Using AngularJS and Laravel.
AngularJS and Laravel: Finishing 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, jadi kita dapat berfokus 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.

Perkenalan

Dalam tutorial ini Anda akan membuat sistem manajemen pelanggan/transaksi sederhana dengan kemampuan untuk menambah dan menghapus baik transaksi maupun pelanggan. Ini mungkin bukan jenis yang Anda buat dengat sangat sering, tapi ini menunjukkan bagaimana menggunakan fitur dari kedua kerangka kerja.

Sebelum kita mulai, Anda harus menyiapkan database MySQL yang akan kita gunakan (Laravel mendukung lebih banyak dari mereka, tapi ini masih yang paling populer). Anda tidak memerlukan server web karena kita akan menggunakan bawaan PHP (namun perlu diingat, bahwa solusi ini hanya untuk pengembangan dan tidak boleh digunakan dalam produksi - ia tidak memiliki banyak fitur yang diperlukan untuk aplikasi untuk bekerja dengan baik di publik). Untuk itu, setidaknya kita memerlukan PHP versi 5.4.0.

Persiapan

Hal pertama yang harus kita lakukan adalah menginstal Laravel. Proses lengkap dijelaskan di situs web Laravel. Setelah itu, direktori proyek Anda harus dibuat dengan semua file Laravel di sana. Navigasikan ke direktori itu di command line dan jalankan perintah ini di sana:

Jika semuanya berjalan baik, Anda akan melihat bahwa server pengembangan lokal dimulai di locahost: 8000. Buka browser Anda dan navigasikan di sana, Anda akan melihat halaman selamat datang Laravel:

first_run

first_runSekarang kita bisa melanjutkan ke aplikasi yang sebenarnya.

Migration dan Model

Model di Laravel sama seperti kerangka MVC lainnya. Ini menggunakan Eloquent ORM untuk memudahkan pekerjaan Anda - Anda mungkin tidak perlu menulis kueri SQL lagi (kecuali jika Anda menginginkan sesuatu yang tidak didukung oleh Eloquent). Menggunakan migrasi Anda dapat memodifikasi struktur database dengan kemampuan untuk melakukan rollback jika ada yang salah. Anda dapat membaca lebih lanjut tentang migrasi dalam dokumentasinya.

Di aplikasi kita, kita akan menggunakan dua model:

  • Customer - akan menyimpan data pelanggan
  • Transaction - akan menyimpan informasi tentang transaksi

Mari kita mulai dengan menciptakan migrasi untuk mereka. Jika belum selesai, matikan server yang kita mulai tadi (Ctrl + C).

Customer

Pertama, jalankan perintah ini:

Ini akan membuat file migrasi dengan struktur dasar untuk Anda. Sekarang arahkan ke app/database/migrations. Harus ada file dengan namanya dimulai dengan stempel waktu dan diakhiri dengan "create_customers_table". Laravel secara otomatis menciptakan struktur dasar ini untuk Anda. Metode up() dipanggil saat migrasi diterapkan, dan down() saat di-roll back.

Pertama, panggil metode Schema::create(). Dibutuhkan dua argumen - nama skema dan fungsi callback:

Callback dijalankan saat tabel dibuat. Objek tabel dikirimkan sebagai variabel $table dan kita memanipulasi struktur tabel yang dengan menggunakannya. Mari tambahkan field id auto-increment:

Selanjutnya akan ada tiga field string untuk nama depan pelanggan, nama keluarga dan email:

Kita membuat field email unik dengan memanggil metode unique() padanya.

Metode terakhir adalah untuk cap waktu:

Ini akan membuat dua field tanggal dalam skema: created_at dan updated_at. Ini akan digunakan oleh Eloquent untuk menyimpan waktu saat item itu dibuat dan diperbarui.

Akhirnya, kodenya akan terlihat seperti ini:

Metode down() jauh lebih sederhana - ini hanya menghapus skema:

Transaction

Kode di sini akan serupa dengan yang ada di pelanggan. Pertama panggil perintah ini:

Sekarang cari file yang sesuai di app/database/migrations dan buka. Seperti sebelumnya, mulailah dengan membuat skema:

Sekarang tambahkan field untuk id, nama transaksi, biaya dan id dari pelanggan yang menjadi memilikinya:

Dan tentu saja cap waktu:

Kode akhir akan terlihat seperti ini:

Dan sekarang metode down():

Konfigurasi Database

Sekarang sebelum Anda menerapkan migrasi Anda harus mengkonfigurasi koneksi ke database Anda. Buka file app/config/database.php dan pergi ke baris 55. Berikut adalah data konfigurasi untuk MySQL (ada beberapa lainnya di sana, misalnya Anda bisa menggunakan SQLite atau Postgres):

Setelah Anda mengisi itu, Anda baik untuk pergi. Pastikan Anda menyimpan file tersebut dan meminta perintah ini dari direktori utama aplikasi Anda (yang berisi file artisan di dalamnya):

Dan hanya itu. Jika tidak ada kesalahan, itu berarti tabel telah berhasil dibuat. Anda dapat terhubung ke db Anda menggunakan, misalnya, phpMyAdmin untuk memeriksa secara manual jika Anda mau.

Model

Di Laravel, membuat model setelah Anda mengonfigurasi database menggunakan migrasi benar-benar cepat. Arahkan ke app/models dan hapus file contoh User.php yang ada disana. Sekarang buat dua file bernama Customer.php dan Transaction.php.

Mari kita mulai dengan Customer.php. Setiap model di Laravel harus meng-extend kelas Eloquent:

Sekarang kita akan mendefinisikan hubungan antara pelanggan dan transaksinya. Hal ini dilakukan dengan mendefinisikan metode public dalam model dengan nama properti yang ingin kita miliki di dalamnya (dalam hal ini transaction):

Sekarang di badan fungsi hanya akan ada satu baris:

Ini memberitahu Eloquent bahwa ia harus menyediakan semua transaksi dengan customer_id dari customer di bawah properti yang diberi nama transactions.

Sekarang kita akan melakukan hampir sama untuk transaksi, tapi kita akan membalikkan hubungan untuk membuat pemilik transaksi dapat diakses melalui properti customer:

Hal ini dilakukan dengan menggunakan metode $this->belongsTo() dari model ini.

Controller

Sekarang untuk benar-benar menggunakan model kita harus membuat controller untuk mereka. Pergi ke direktori app/controller, hapus hanya HomeController.php - BaseController.php penting karena pengendali kita akan memperpanjangnya. Sekarang buat dua file: CustomerController.php dan TransactionController.php.

CustomerController

Controller ini akan menangani segala hal yang berhubungan dengan pelanggan - menambahkan, menghapus dan menampilkan daftar dari mereka. Mulailah dengan mendefinisikan kelas:

Kita akan menggunakan fitur Laravel yang bernama controller RESTful. Itu menjadikan membuat rute lebih mudah karena kita hanya harus menentukan basis URI dan Laravel akan menangani semuanya untuk kita. Ini mengharuskan Anda untuk memulai nama fungsi Anda dengan kata kerja HTTP yang sesuai dan kemudian lanjutkan dengan nama subroute (menggunakan camelCase). Jadi misalnya, jika kita punya metode bernama getNames dan basis URI akan menjadi /customers, maka metodenya bisa diakses di /customers/names.

Metode getIndex(), postIndex(), deleteIndex() dll akan dipetakan ke rute default (dalam kasus ini /customers).

Sekarang mari kita definisikan rute pertama kita - mendapatkan pelanggan berdasarkan id mereka:

Mari dapatkan id dari parameter kueri (Laravel menyediakan kelas Input yang bagus untuk menghadapinya, jadi Anda tidak perlu menggunakan $_GET, $_POST dan $_FILES):

Dan mencari pengguna di database menggunakan id tersebut:

Setiap metode controller harus mengembalikan nilai yang berupa string atau memiliki sebuah metode __toString(). Dalam hal ini, model Customer yang dikembalikan akan dikonversi ke JSON sebelum dikirim.

Sekarang mari kita mengembalikan daftar semua pengguna (ini akan dapat diakses di /customers/all):

Seperti yang Anda lihat, kita bisa mendapatkan semua pelanggan menggunakan metode all() dari model.

Sekarang bagian terpanjang, menambahkan pelanggan baru:

Pertama, mari kita periksa apakah semua informasi telah disediakan. Kita bisa melakukan ini dengan menggunakan metode Input::has():

Mari kita letakkan semua field masukan di variabel $input agar tidak memanggil Input::get() berulang-ulang. Hal ini bisa dilakukan dengan menggunakan Input::all():

Selanjutnya kita akan memeriksa apakah ada masukan yang kosong. Jika demikian, kita akan mengembalikan kesalahan HTTP 400 Bad Request dengan pesan yang lebih lengkap:

Karena kita ingin mengembalikan kode status selain 200, bukan hanya mengembalikan pesan sebagai string, kita menggunakan Response::make(), yang mengambil data untuk dikirim sebagai parameter pertama dan kode status sebagai yang kedua. Lihatlah dokumentasinya jika Anda ingin tahu lebih banyak tentang tanggapan.

Sekarang kita akhirnya membuat model Customer baru dan memberi feed dengan data yang disediakan:

Setelah itu kita bisa menyimpan model yang baru dibuat dan menanggapi permintaan dengannya:

Di sini kita menangani kasus ini jika tidak semua masukan disediakan:

Akhirnya, kita juga butuh kemampuan untuk menghapus pelanggan. Yang ini benar-benar pendek:

Kita mulai dengan mendapatkan id dari pelanggan untuk dihapus:

Selanjutnya, kita mencari dan menghapus pelanggan:

Setelah itu, kita menanggapi permintaan dengan id yang diberikan:

Sekarang sebelum rute bisa diakses, kita harus mengaitkannya. Buka file app/routes.php, hapus semuanya kecuali komentar dan tambahkan baris ini di akhir file:

Ini akan memberitahu Laravel untuk mengarahkan semua permintaan di /customers ke CustomerController kita. Sekarang Anda dapat menggunakan CURL untuk bermain dengannya. Pertama mulailah server dengan php artisan serve dan kemudian Anda bisa, misalnya membuat pelanggan:

Kemudian Anda bisa mendapatkan daftar semua pelanggan:

TransactionController

Ini, seperti modelnya sangat mirip dengan CustomerController. Pertama buat kelasnya:

Lalu, mari kita definisikan metode untuk mendapatkan semua transaksi bagi pengguna:

Seperti yang Anda lihat, kita menggunakan relasi yang didefinisikan sebelumnya untuk mendapatkan transaksi (sekarang ingat kueri yang harus Anda tulis untuk mencapai hal yang sama dengan menggunakan PHP dan SQL biasa).

Hal berikutnya adalah pembuatan transaksi:

Seperti sebelumnya, kita memeriksa apakah semua informasi yang dibutuhkan tersedia:

Jika ya, tetapkan ke variabel $input:

Periksa apakah ada nilai yang diberikan yang kosong dan jika ya maka mengembalikan kesalahan:

Sekarang buatlah transaksi dan sediakan dengan semua info yang ada:

Sekarang kita perlu menambahkannya ke pelanggan yang tepat. Mari temukan mereka dengan id yang disediakan dan tambahkan $transaction ke daftar transaksi mereka:

Hal ini dilakukan dengan menggunakan metode transaction->save() yang disediakan oleh Laravel. Sekarang kita bisa merespon dengan transaksi yang dibuat:

Dan menangani kasus di mana tidak ada atau tidak semua data disediakan:

Setelah itu ada juga metode untuk menghapus transaksi dengan cara yang sama seperti kita menghapus pelanggan:

Sekarang tambahkan saja rutenya dan Anda bisa menguji controller menggunakan CURL:

Kesimpulan

Baiklah, ini adalah akhir dari bagian pertama - di bagian kedua tutorial ini, kita akan membuat front-end menggunakan AngularJS. Jangan ragu untuk menambahkan lebih banyak fitur ke aplikasi Anda (seperti mengedit pelanggan atau menyortir), jika Anda tidak menemukan informasi yang Anda cari, lihat dokumentasi Laravel.

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.