AngularJS dan Laravel: Memulai Membangun CRM

() translation by (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:

1	php artisan serve

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_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:

1	php artisan migrate:make create_customers_table

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:

1	Schema::create('customers', function ($table) {

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:

1	$table->increments('id');

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

1	$table->string('first_name');
2	$table->string('last_name');
3	$table->string('email')->unique();

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

Metode terakhir adalah untuk cap waktu:

1	$table->timestamps();
2	});

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:

public function up() {
	Schema::create('customers', function ($table) {
		$table->increments('id');
		$table->string('first_name');
		$table->string('last_name');
		$table->string('email')->unique();
		$table->timestamps();
	});
}

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

1	public function down() {
2	Schema::drop('customers');
3	}

Transaction

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

1	php artisan migrate:make create_transactions_table

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

1	Schema::create('transactions', function ($table) {

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

1	$table->increments('id');
2	$table->string('name');
3	$table->float('amount');
4	$table->integer('customer_id');

Dan tentu saja cap waktu:

1	$table->timestamps();
2	});

Kode akhir akan terlihat seperti ini:

public function up() {
	Schema::create('transactions', function ($table) {
		$table->increments('id');
		$table->string('name');
		$table->float('amount');
		$table->integer('customer_id');
		$table->timestamps();
	});
}

Dan sekarang metode down():

1	public function down() {
2	Schema::drop('transactions');
3	}

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):

'mysql' => array(
	'driver'    => 'mysql',                 // database driver, don't touch
	'host'      => 'localhost',             // host of the database, usually localhost unless you have your db on some server
	'database'  => 'database',              // name of the database you will be using, it must be created earlier
	'username'  => 'root',                  // username that the script will use to connect, I strongly advice against using root user for this
	'password'  => '',                      // password for the user above, it's better not to use a blank one
	'charset'   => 'utf8',                  // encoding of the db
	'collation' => 'utf8_unicode_ci',       // db's collation setting
	'prefix'    => '',                      // prefix of the database tables, useful if you have multiple scripts using the same database
),

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):

1	php artisan migrate

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:

1	class Customer extends 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):

1	public function transactions() {

Sekarang di badan fungsi hanya akan ada satu baris:

1	return $this->hasMany('Transaction');
2	}
3	}

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:

class Transaction extends Eloquent {
	public function customer() {
		return $this->belongsTo('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:

1	class CustomerController extends BaseController {

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:

1	public function getIndex() {

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

1	$id = Input::get('id');

Dan mencari pengguna di database menggunakan id tersebut:

1	return Customer::find($id);
2	}

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):

1	public function getAll() {
2	return Customer::all();
3	}

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

Sekarang bagian terpanjang, menambahkan pelanggan baru:

1	public function postIndex() {

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

1	if (Input::has('first_name', 'last_name', 'email')) {

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

1	$input = 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:

1	if ($input['first_name'] == '' \|\| $input['last_name'] == '' \|\| $input['email'] == '') {
2	return Response::make('You need to fill all of the input fields', 400);
3	}

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:

1	$customer = new Customer;
2	$customer->first_name = $input['first_name'];
3	$customer->last_name = $input['last_name'];
4	$customer->email = $input['email'];

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

1	$customer->save();
2
3	return $customer;

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

1	} else {
2	return Response::make('You need to fill all of the input fields', 400);
3	}
4	}

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

1	public function deleteIndex() {

Kita mulai dengan mendapatkan id dari pelanggan untuk dihapus:

1	$id = Input::get('id');

Selanjutnya, kita mencari dan menghapus pelanggan:

1	$customer = Customer::find($id);
2	$customer->delete();

Setelah itu, kita menanggapi permintaan dengan id yang diberikan:

1
2	return $id;
3	}
4	}

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

1	Route::controller('/customers', 'CustomerController');

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:

1	curl -X POST -d "first_name=Jane&last_name=Doe&email=jdoe@gmail.com" http://localhost:8000/customers

Kemudian Anda bisa mendapatkan daftar semua pelanggan:

1	curl http://localhost:8000/customers/all

TransactionController

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

1	class TransactionController extends BaseController {

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

1	public function getIndex() {
2	$id = Input::get('id');
3	return User::find($id)->transactions;
4	}

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:

1	public function postIndex() {

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

1	if (Input::has('name', 'amount')) {

Jika ya, tetapkan ke variabel $input:

1	$input = Input::all();

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

1	if ($input['name'] == '' \|\| $input['amount'] == '') {
2	return Response::make('You need to fill all of the input fields', 400);
3	}

Sekarang buatlah transaksi dan sediakan dengan semua info yang ada:

1	$transaction = new Transaction;
2	$transaction->name = $input['name'];
3	$transaction->amount = $input['amount'];

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

1	$id = $input['customer_id'];
2	User::find($id)->transactions->save($transaction);

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

1	return $transaction;

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

1	} else {
2	return Response::make('You need to fill all of the input fields', 400);
3	}
4	}

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

	public function deleteIndex() {
		$id = Input::get('id');
		$transaction = Transaction::find($id);
		$transaction->delete();
		
		return $id;
	}
}

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

1	Route::controller('/transactions', 'TransactionController');

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.