Laravel và AngularJS là 2 trong số các framework mạnh nhất và phổ biến nhất hiện nay. Laravel 5 là framework phổ biến nhất của PHP và AngularJS cũng vậy, nhưng là đối với Javascript. Vậy sự kết hợp giữa Laravel 5 và AngularJS sẽ như nào? Phải nói đây là một sự kết hợp tuyệt vời và hoàn hảo cho Developer muốn xây dựng một hệ thống mà sử dụng Laravel làm Backend đồng thời AngularJS cho Frontend. Hiện nay các developer rất ưa chuộng sự kết hợp giữa 2 framework đình đám này. Vậy thì tại sao chúng ta không bắt tay vào cùng nhau xây dựng một Web Application sử dụng Laravel 5 và AngularJS nhỉ?


Trong series này, Laravel 5 sẽ đóng vai trò backend để tạo API và AngularJS sẽ xử lý API đó và hiển thị ra Frontend. Như vậy thì series này sẽ dành cho những người muốn tách biệt hoàn toàn Frontend và Backend trong phát triển ứng dụng web. Các ứng dụng kiểu như vậy thường gọi là Hybrid App (ứng dụng lai).


Giới thiệu vậy đủ rồi. Bây giờ chúng ta sẽ bắt đầu phần 1. Ở phần này ta sẽ làm việc với Laravel trước: xây dựng Backend.


Laravel 5 và AngularJS Phần 1: Cài đặt Laravel & Tạo mới Project


Laravel 5 và AngularJS


Chúng ta sẽ sử dụng Laravel 5.1 cho tutorial này. Việc đầu tiên là cài Composer. Nếu bạn chưa biết Composer là gì và cài đặt ra sao thì theo hướng dẫn này nhé: Install Composer


Sau khi cài Composer thì mở command line lên và dùng câu lệnh này để cài đặt Laravel


composer global require "laravel/installer"

Sau khi đã cài đặt Laravel thì bạn có thể tạo mới Laravel project sử dụng câu lệnh laravel new:


laravel new projectname


Lưu ý rằng bạn cần tạo biến môi trường cho laravel nếu như muốn câu lệnh laravel new chạy được global. Đơn giản chỉ việc đặt đường dẫn  ~/.composer/vendor/bin vào trong biến PATH của Environment Variables.
Hoặc nếu bạn cảm thấy rắc rối thì chỉ việc tạo mới Laravel project bằng Composer luôn cũng rất là đơn giản:


composer create-project laravel/laravel blog "5.1.*"

Chi tiết xem thêm tại Laravel Install Documentation.


Sau khi đã tạo được project thì khởi động webserver lên (sử dụng XAMPP, LAMP, hoặc MAMP chẳng hạn) và chạy lệnh này ở thư mục gốc project bạn mới tạo:


php artisan serve

Mở browser lên và truy cập http://localhost:8000 bạn sẽ thấy front page của Laravel.


Tiếp theo chúng ta sẽ cài đặt và sử dụng Laravel-5-Generators package trong project này. Package này sẽ hỗ trợ thêm nhiều câu lệnh artisan mạnh mẽ để generate nhiều thành phần mà mặc định Laravel không hỗ trợ. Cài đặt bằng Composer:


composer require laracasts/generators --dev

Bây giờ thì mở file app/Providers/AppServiceProvider.php lên và cập nhật register function lại như sau:


public function register()
{
    if ($this->app->environment() == 'local') {
        $this->app->register('Laracasts\Generators\GeneratorsServiceProvider');
    }
}

Chạy lệnh


php artisan

và bạn sẽ thấy chúng ta có thêm nhiều command ở khu vực make:*


Cài đặt Database, Tạo Migration và Chèn Dummy data


Cài đặt Database


Đổi tên file .env.example ở thư mục gốc thành .env. Đây là file cấu hình của Laravel. Sau đó mở file .env lên và sửa lại các thông tin cho khớp với database, username và password mà bạn sử dụng.


DB_HOST=localhost
DB_DATABASE= your_database_name
DB_USERNAME= your_database_username
DB_PASSWORD= your_database_password


Tạo Migration


Migration giống như là version controll của database trong ứng dụng Laravel vậy. Sử dụng migration giúp bạn và team lập trình dễ dàng quản lý cũng như sửa đổi cập nhật database mà không sợ xảy ra conflict. Chi tiết ở Laravel Migrations.
Gõ lệnh này vào command line:


php artisan make:migration create_jokes_table

Một file migration mới vừa được tạo ra ở thư mục database/migrations. Mở nó lên và update lại như sau:



use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
 
class CreateJokesTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('jokes', function (Blueprint $table) {
            $table->increments('id');
            $table->text('joke');
            $table->integer('user_id');
            $table->timestamps();
        });
    }
 
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::drop('jokes');
    }
}


Như vậy, bảng jokes sẽ có các cột là id (tăng tự động), joke (lưu nội dung), user_id (lưu user mà submit nội dung joke) và timestamps. Function up sẽ có nhiệm vụ tạo mới table còn function down có tác dụng ngược lại: revert lại trạng thái migration.


Bây giờ chạy lệnh này để migrate database:


php artisan migrate

Mở database lên bạn sẽ thấy bạn bảng jokes vừa được tạo ra. Kèm theo với đó, Laravel còn mặc định tạo ra thêm ba bảng dữ liệu nữa, bao gồm users, migrations và password_resets.


Bây giờ thì làm rõ hàm down trong migration một chút. Bây giờ chúng ta muốn sửa trường joke thành body trong bảng jokes trên. Đơn giản chỉ cần sửa lại  function up trong file migration:


public function up()
{
    Schema::create('jokes', function (Blueprint $table) {
        $table->increments('id');
        $table->text('body');
        $table->integer('user_id');
        $table->timestamps();
    });
}

Bây giờ chúng ta cần rollback lại migration rồi mới migrate lại database được. Lần lượt chạy 2 lệnh:


php artisan migrate:rollback

php artisan migrate

Kiểm tra lại bảng jokes trong database và xem xét sự thay đổi!


Chèn dữ liệu giả để phát triển (Dummy Data)


Để chèn nhanh một số dữ liệu nhằm mục đích demo và hỗ trợ testing, chúng ta sẽ sử dụng thư viện Faker nổi tiếng. Cài đặt fzaninotto/faker package bằng Composer:


composer require fzaninotto/faker

Bây giờ tạo Model Joke:


php artisan make:model Joke

Sau đó tạo file seed nhằm mục đích chèn dummy data.


php artisan make:seed Jokes

Bạn có thể thấy chúng ta vừa tạo ra file seeder mới ở thư mục database/seed. Mở file JokesTableSeeder.php và update lại như sau:


use Illuminate\Database\Seeder;
use App\Joke;
 
class JokesTableSeeder extends Seeder
{
    /**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()
    {
        $faker = Faker\Factory::create(); 
 
        foreach(range(1,30) as $index)
        {
            Joke::create([                
                'body' => $faker->paragraph($nbSentences = 3),
                'user_id' =>$faker->numberBetween($min = 1, $max = 5)
            ]);
        }
    }
}

Giải thích về đoạn code trên một chút: Hàm run mỗi khi seed sẽ tạo ra 30 Joke record ở trong cơ sở dữ liệu. Trong đó body sẽ là một đoạn paragraph còn user_id có có giá trị trong khoảng từ 1 đến 5. Chúng ta sử dụng faker để làm được điều đó. Chi tiết xem tại Documentation.


Đã xong phần Jokes Seeder, giờ đến lượt tạo seed file cho User:


php artisan make:seed UsersTableSeeder

Tương tự như Jokes Seeder, update file UsersTableSeeder.php lại như sau:


<?php
 
use Illuminate\Database\Seeder;
use App\User;
 
class UsersTableSeeder extends Seeder
{
    /**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()
    {
        $faker = Faker\Factory::create();
 
        foreach(range(1,5) as $index)
        {
            User::create([                
                'name' => $faker->userName,
                'email' =>$faker->email,
                'password' =>bcrypt('secret')
            ]);
        }
    }
}

Laravel sẽ sử dụng faker và tạo ra dummy data cho chúng ta, muốn vậy thì hãy mở file  DatabaseSeeder.php ở cùng thư mục ra và sửa lại:


File này sẽ gọi tới 2 file seeder ở trên và hàm run sẽ hoạt động khi ta gõ lệnh artisan. Tuy nhiên trước khi gõ command thì hãy mở file Joke model trong thư mục app ra và thêm mảng fillable vào:


protected $fillable = ['body', 'user_id'];

Làm như thế chúng ta mới có thể chèn các giá trị body và user_id vào cơ sở dữ liệu.
Cuối cùng là chạy lệnh artisan để seed dữ liệu:


php artisan migrate --seed

Giờ thì mở database ra xem các dữ liệu đã được thêm vào nhé!


Conclusion


Phần 1 của series Xây dựng ứng dụng Web sử dụng Laravel 5 và AngularJS xin tạm thời dừng ở đây. Sang phần 2 chúng ta sẽ tiếp tục các công việc backend như là tạo Routing, Response, Request... Cảm ơn bạn đã theo dõi, hi vọng bạn tiếp tục đồng hành với mình trong những phần tiếp theo của series! Hẹn gặp lại ở phần tới!


NOTE: Đây là phần 1 của  series Xây dựng ứng dụng Web kết hợp Laravel 5 và AngularJS . Các phần còn lại bạn có thể theo dõi tại đây:
Series: Xây dựng ứng dụng Web với Laravel 5 và AngularJS phần 2


Series: Xây dựng ứng dụng Web với Laravel 5 và AngularJS phần 3 (Phần cuối)