AngularJS и Laravel: начинаем создание CRM

Russian (Pусский) translation by Ilya Nikov (you can also view the original English article)

При создании одностраничного приложения мы должны использовать какой-то фреймворк для выполнения некоторых задач для нас, чтобы мы могли сосредоточиться на фактической функциональности. AngularJS отлично здесь подходит, потому что такие функции, как динамическая инъекция зависимостей и привязка двунаправленных данных, просто великолепны. Иногда нам также нужен какой-то сервер. Если вы выбрали PHP, то Laravel может быть вашим лучшим вариантом, так как с ним легко и довольно эффективно работать.

Введение

В этом учебном пособии вы создадите простую систему управления клиентами и транзакциями с возможностью добавления и удаления транзакций и клиентов. Это, вероятно, не та вещь, которую вы делаете очень часто, но она продемонстрирует вам, как использовать функции обеих фреймворков.

Прежде чем начать, вы должны настроить базу данных MySQL, которую мы будем использовать (Laravel поддерживает многие из них, но это все еще самая популярная). Вам не нужен какой-либо веб-сервер, так как мы будем использовать встроенный PHP-модуль (но имейте в виду, что это решение предназначено только для разработки и никогда не должно использоваться на продакшене - в нем не хватает многих функций, необходимых для вашего публичного приложения). Для этого нам понадобится PHP версии не ниже 5.4.0.

Подготовка

Первое, что нам нужно сделать, это установить Laravel. Полный процесс подробно описан на веб-сайте Laravel. После этого вы должны создать каталог проекта со всеми файлами Laravel. Перейдите в этот каталог в командной строке и выполните там следующую команду:

1	php artisan serve

Если все идет хорошо, вы должны увидеть, что локальный сервер разработки был запущен на locahost:8000. Откройте ваш браузер и перейдите туда, вы должны увидеть страницу приветствия Laravel:

Теперь мы можем перейти к фактическому приложению.

Миграции и модели

Модели в Laravel такие же, как и в любом другом фреймворке MVC. Он использует Eloquent ORM для облегчения работы для вас - вам, вероятно, никогда не понадобится снова писать SQL запрос (по крайней мере до тех пор пока вам не понадобится что-то такое, что Eloquent не поддерживает). Используя миграции, вы можете изменить структуру базы данных с возможностью отката изменений, если что-то пойдет не так. Вы можете больше узнать о миграциях в документации.

В нашем приложении мы будем использовать две модели:

Customer - будет хранить данные клиента
Transaction - будет содержать информацию о транзакции

Начнем с создания миграций для них. Если вы еще этого не сделали, выключите сервер, который мы запустили ранее (Ctrl + C).

Клиенты

Сначала вызовите эту команду:

1	php artisan migrate:make create_customers_table

Это создаст файл миграции с базовой структурой для вас. Теперь перейдите в app/database/migrations. Должен быть файл с его именем, начинающийся с метки времени и заканчивающейся «create_customers_table». Laravel автоматически создал эту базовую структуру для вас. Метод up() вызывается, когда применяется миграция, и down() при его откате.

Сначала вызовите метод Schema::create(). Он принимает два аргумента - имя схемы и функцию обратного вызова:

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

Обратный вызов выполняется при создании таблицы. Объект таблицы передается как переменная $table, и мы может менять ее структуру. Давайте добавим автоматически увеличивающееся поле id:

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

Далее для имени, фамилии и электронной почты клиента будут три строковых поля:

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

Мы делаем поле email уникальным, вызывая метод unique().

Последний метод предназначен для временных меток:

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

Это создаст два поля даты в схеме: created_at и updated_at. Они будут использоваться Eloquent для хранения времени, когда элемент был создан и обновлен.

Наконец, код должен выглядеть так:

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();
	});
}

Метод down() будет намного проще - он просто удаляет схему:

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

Транзакции

Код здесь будет похож на клиентский. Сначала вызовите эту команду:

1	php artisan migrate:make create_transactions_table

Теперь найдите соответствующий файл в app/database/migrations и откройте его. Как и раньше, начните с создания схемы:

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

Теперь добавьте поля для идентификатора, имени транзакции, ее стоимости и идентификатора клиента, которому она принадлежит:

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

И, конечно, отметки времени:

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

Окончательный код должен выглядеть следующим образом:

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

И теперь метод down():

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

Настройка базы данных

Теперь, прежде чем применять миграции, вам нужно будет настроить соединение с вашей базой данных. Откройте файл app/config/database.php и перейдите к строке 55. Вот данные конфигурации для MySQL (там немного других, например, вы можете использовать SQLite или 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
),

После того, как вы заполнили это, вы можете двигаться дальше. Убедитесь, что вы сохранили файл и вызываете эту команду из основного каталога приложения (с файлом artisan в нем):

1	php artisan migrate

Вот и все. Если ошибок не было, это означает, что таблицы были успешно созданы. Вы можете подключиться к своей db, используя, например, phpMyAdmin, чтобы проверить все вручную.

Модели

В Laravel создание модели после того, как вы настроили свою базу данных с помощью миграции, происходит очень быстро. Перейдите в app/models и удалите пример файла User.php, который там уже есть. Теперь создайте два файла с именем Customer.php и Transaction.php.

Начнем с Customer.php. Каждая модель в Laravel должна наследоваться от класса Eloquent:

1	class Customer extends Eloquent {

Теперь мы определим отношения между клиентом и их транзакциями. Это делается путем определения публичного метода в модели с именем свойства, которое мы хотели бы иметь в нем (в данном случае transactions):

1	public function transactions() {

Теперь в теле функции будет только одна строка:

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

Это сообщает Eloquent, что он должен предоставлять все транзакции с идентификатором клиента customer_id в рамках свойства, называемого transactions.

Теперь мы сделаем практически то же самое для транзакций, но мы изменим соотношение, чтобы сделать владельца транзакции доступным через свойство customer:

class Transaction extends Eloquent {
	public function customer() {
		return $this->belongsTo('Customer');
	}
}

Это делается с использованием метода модели $this->belongsTo().

Контроллеры

Теперь, чтобы использовать модели, мы должны создать для них контроллеры. Перейдя к каталогу app/controllers, удалите только HomeController.php - BaseController.php важен, так как наши контроллеры расширяют его. Теперь создайте два файла: CustomerController.php и TransactionController.php.

CustomerController

Этот контроллер будет обрабатывать все, что связано с клиентами, - добавление, удаление и отображение списка из них. Начните с определения класса:

1	class CustomerController extends BaseController {

Мы будем использовать функцию Laravel под названием RESTful контроллеры. Это упрощает создание маршрутов, потому что нам нужно только определить базовый URI, и Laravel будет обрабатывать все остальное за нас. Это требует, чтобы вы начинали свои имена методов с помощью соответствующего HTTP-глагола, а затем продолжаете имя маршрута (используя camelCase). Например, если бы у нас был метод с именем getNames и базовый URI был бы /customers, тогда метод будет доступен по адресу /customers/names.

Методы getIndex(), postIndex(), deleteIndex() и т.д. будут сопоставлены с маршрутом по умолчанию (в данном случае /customers).

Теперь давайте определим наш первый маршрут - получив клиента по его id:

1	public function getIndex() {

Давайте получим идентификатор из параметров запроса (Laravel предоставляет хороший класс Input, чтобы справиться с этим, поэтому вам не нужно использовать $_GET, $ _POST или $ _FILES):

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

Ищите пользователя в базе данных, используя этот идентификатор:

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

Каждый метод контроллера должен возвращать значение, которое является строкой, или имеет метод __toString(). В этом случае возвращаемая модель Customer будет преобразована в JSON перед отправкой.

Теперь давайте вернем список всех пользователей (это будет доступно по маршруту /customers/all):

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

Как вы можете видеть, мы можем получить всех клиентов используя метод all() у модели.

Теперь самая длинная часть, добавим нового клиента:

1	public function postIndex() {

Сначала давайте проверим, была ли предоставлена вся необходимая информация. Мы можем сделать это, используя метод Input::has():

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

Поместим все поля ввода в переменную $input, чтобы избежать вызова Input::get() снова и снова. Это можно сделать с помощью Input::all():

1	$input = Input::all();

Затем мы проверим, пуст ли какой-либо из параметров. Если это так, мы вернем ошибку HTTP 400 Bad Request с более подробным сообщением:

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	}

Поскольку мы хотели вернуть код статуса, отличный от 200, вместо того, чтобы просто возвращать сообщение в виде строки, мы использовали Response::make(), который принимает данные для отправки в качестве первого параметра, а код состояния - второго. Взгляните на документы, если вы хотите узнать больше об ответах.

Теперь мы, наконец, создаем новую модель Customer и наполняем ее с предоставленными данными:

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

После этого мы можем сохранить вновь созданную модель и ответить на запрос с ней:

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

Здесь мы обрабатываем случай, если не все данные были предоставлены:

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

Наконец, нам также нужна способность удалять клиентов. Это действительно короткий сценарий:

1	public function deleteIndex() {

Мы начинаем с получения идентификатора клиента:

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

Затем мы ищем и удаляем клиента:

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

После этого мы отвечаем на запрос с предоставленным идентификатором:

1
2	return $id;
3	}
4	}

Теперь, прежде чем маршруты будут доступны, мы должны их подключить. Откройте файл app/routes.php, удалите все, кроме комментария, и добавьте эту строку в конец файла:

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

Это позволит Laravel направлять все запросы к /customers нашему CustomerController. Теперь вы можете использовать CURL, чтобы поиграть с ним. Сначала запустите сервер с помощью php artisan serve, а затем вы можете, например, создать клиента:

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

Затем вы можете получить список всех клиентов:

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

TransactionController

Это, подобно модели, очень похоже на CustomerController. Сначала создайте класс:

1	class TransactionController extends BaseController {

Затем давайте определим метод для получения всех транзакций для пользователя:

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

Как вы можете видеть, мы используем отношения, определенные ранее для получения транзакций (теперь вспомните запрос, который вы должны были написать, чтобы достичь того же, используя простые PHP и SQL).

Следующим шагом будет создание транзакций:

1	public function postIndex() {

Как и раньше, мы проверяем, предоставлена ли вся необходимая информация:

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

Если это так, назначьте ее переменной $input:

1	$input = Input::all();

Проверьте, не пусто ли какое-либо из значений, и если да, возвращаем ошибку:

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

Теперь создайте транзакцию и наполните ее всей предоставленной информацией:

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

Теперь нам нужно добавить ее к соответствующему клиенту. Давайте найдем его по предоставленному id и добавим $transaction в список его транзакций:

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

Это делается с помощью метода transactions->save(), предоставленного Laravel. Теперь мы можем ответить с созданной транзакцией:

1	return $transaction;

И обработать случай, когда ни один или не все данные были предоставлены:

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

После этого существует также способ удалить транзакцию так же, как мы удалили клиента:

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

Теперь просто добавьте маршрут, и вы можете протестировать контроллер с помощью CURL:

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

Вывод

Хорошо, это конец первой части - во второй части этого урока мы создадим front-end, используя AngularJS. Не стесняйтесь добавлять дополнительные функции в свое приложение (например, редактирование клиентов или сортировку), если вы не нашли нужную информацию, поищите в документации Laravel.