3.2.1 Migration thiết kế cơ sở dữ liệu
Migration là một tập lệnh của Laravel, cho phép sử dụng các lệnh tương tác với Database tạo các bảng dữ liệu, cột dữ liệu thay vì thủ công. Mục đích cuối cùng là giúp chúng ta dễ dàng quản lý, bảo trì Database và làm việc theo nhóm một cách hiệu quả.
Đầu tiên ta truy cập vào phần mềm laragon, tạo database tương ứng với thông số trong project laravel để kết nối.
Hình 3. 4: Thông số tạo database
Để tạo một Migration, ta dán đoạn lệch cài đặt vào cửa sổ terminal của
- Nullable: Các field được phép để trống, không bắt buộc phải điền.
- Unique: Không cho phép được trùng tên.
Sử dụng lớp Schema tạo bảng dữ liệu, trong đó sẽ có những field và những kiểu dữ liệu của field đó.
public function up() {
Schema::create('users', function (Blueprint $table) { $table->id();
$table->string('avatar')->nullable();
$table->string('username')->unique();
$table->string('name');
$table->longText('remember_token');
$table->rememberToken();
$table->timestamps();
});
}
public function down() {
Schema::dropIfExists('users_status');
}
Hàm Function down trong migration để roll-back, xóa dữ liệu bảng ở phía trên.
Để khởi chạy Migration, ta sử dụng đoạn lệnh: “php artisan migrate”
Sau đó, ta vào database, refresh database Laravel sẽ tạo ra các bảng dữ liệu, trong đó chú trọng vào bảng Users mà ta đã tương tác.
Hình 3. 5: Bảng dữ liệu được tạo
Migration tạo khóa ngoại với hai bảng department và user_status để ràng buộc khóa ngoại giữa các bảng dữ liệu với nhau. Giúp cho việc quản lý dữ liệu trên database có sự liên kết và mật thiết với nhau.
Hiển thị khóa ngoại lên database:
Hình 3. 6: Hiển thị khóa ngoại database.
3.3.2 Tạo các Seeding để tạo dữ liệu kiểu mẫu ban đầu
Seeding trong laravel cho phép ta dùng các cái class cũng như các cái tập lệnh trong laravel để tạo dữ liệu kiểu mẫu ban đầu.
Tạo userseeder bằng cách dán đoạn lệnh vào cửa sổ Teminal trong project laravel để tạo bảng seeder: “ php artisan make: seeder UserSeed”
Sử dụng một lớp DB để tương tác đến bảng dữ liệu. Tại đây ta có các trường id tại bảng Users như sau:
Username
Name
Department_id
Status_ id
class UserSeeder extends Seeder
{ public function run()
{
DB::table('users')->insert([
Tương tự ta tạo DepartmentsSeeder và UsersStatusSeeder.
Qua mục data ta tạo được các khóa học mẫu như sau:
Hình 3. 7: Data khóa học.
Và dữ liệu của departments và users_status:
3.3.3 Sử dụng controllers và routing trong laravel
Ta sử dụng controllers và routing trong laravel để tạo API, Join bảng dữ liệu với Query Builder.
Controllers là một class trong laravel cho phép chúng ta xử lý các logic nghiệp vụ về một chủ thể nhất định, dự án sau này càng ngày càng phình to và code ngày càng dài dòng thì nhất thiết phải tạo một class “ Controller” .
Để tạo Controller cho chủ thể đầu tiên, ta sử dụng đoạn lệnh:
“php artisan make:controller UserController”
Hình 3. 8: Controllers và routing trong laravel
Sử dụng function show trong class UserController và đăng ký Route trong file api.php.
Phương thức “Show” sẽ trả về kết quả, sử dụng lớp models\User và sử dụng phương thức findorfail để tìm cho chúng ta trong database cái users có id nào truyền vào là user nào.
Để kiểm tra dữ liệu API đã được tạo hay chưa, ta sử dụng phần mềm Postman.
Sử dụng lệnh Inner join của mySql để kết bảng users với departments và users với users_status, để lấy giá trị trong trường name của departments/users_status để hiển thị users đang ở phòng ban/trạng thái nào.
$users = User::
join('departments', 'users.department_id', '=', 'departments.id')
->join('users_status', 'users.status_id', '=', 'users_status.id')
3.3.4 Sử dụng Axios
Axios là một thư viện Javascript cho phép xử lý, yêu cầu... thông qua HTTP tại client. Get API và Render API ra trang quản lý khóa học.
Tạo một phương thức const getUsers trong project Vuejs, lấy API user và sử dụng axios.
const getUsers = () => {
axios.get("http://127.0.0.1:8000/api/users") .then(function (response) {
users.value = response.data;
})
.catch(function (error) { // handle error
console.log(error);
});
};
getUsers();
Từ địa chỉ http://127.0.1:8000/api/users ta coppy vào Postman:
Để render API ra trang quản lý khóa học, ta thiết kế giao diện như sau:
Hình 3. 10: Render API ra trang quản lý khóa học.
Sử dụng #bodyCell để sửa body, sử dụng chỉ thị v-if để render lên giao diện.
<template #bodyCell="{ column, index, record }">
<template v-if="column.key === 'index'">
<span>{{ index + 1 }}</span>
</template>
Hình 3. 11: BodyCell