Khởi tạo một Laravel project hoàn chỉnh
Giới thiệu
Ở các bài trước tôi đã giới thiệu va hướng dẫn các bạn sử dụng các thao tác cơ bản với Laravel, thì ở bài này chúng ta sẽ tổng hợp lại tất cả những kiến thức đó vào cùng nhau tạo ra một Laravel project hoàn chỉnh nhé. Tôi sẽ hướng dẫn các bạn trên máy tính Windows.
Khởi tạo dự án
Để cho thuận tiện hơn thì trước khi tạo project chúng ta sẽ kiểm tra xem đã có đủ công cụ cũng như là phần mềm hỗ trợ chưa nhé. Nếu bạn đã cài đặt đầy đủ rồi hãy bỏ qua bước này.
Bước 1: Tạo project.
- Mở thư mục htdocs đường dẫn mặc định là C:\xampp\htdocs.
- Bấm shift + chuột phải và chọn Git Bash Here.
- Thực thi dòng lệnh sau: composer create-project laravel/laravel killthecodes.
- Đợi cho hệ thống tiến hành tải dữ liệu và cài đặt.
Khi cửa sổ Git hiển thị thông báo Application key set successfully có nghĩa là chúng ta đã tải và cài đặt ứng dụng thành công và bạn có thể đóng cửa sổ Git.
- Mở ứng dụng XAMPP và khởi động 2 dịch vụ Apache và MySQL. Sau đó truy cập trang : http://localhost/killthecodes/public/ để kiểm tra.
Bước 2: Cấu hình tên miền ảo (Virtual Host).
Cấu hình file hosts (C:\Windows\System32\drivers\etc\hosts).
Sửa quyền truy cập của file hosts:
Mở file hosts bằng Notepad và thêm vào phía cuối 2 dòng như sau:
127.0.0.1 localhost
127.0.0.1 killthecodes.com
Cấu hình file httpd-vhosts.conf (C:\xampp\apache\conf\extra\httpd-vhosts.conf).
Mở file httpd-vhosts.conf bằng notepad và thêm đoạn code sau:
<VirtualHost *:80>
DocumentRoot "C:/xampp/htdocs"
ServerName localhost
</VirtualHost>
<VirtualHost *:80>
DocumentRoot "C:/xampp/htdocs/killthecodes/public"
ServerName killthecodes.com
</VirtualHost>
Bước 3: Kết nối với cơ sở dữ liệu.
Tạo cơ sở dữ liệu.
Truy cập vào http://localhost/phpmyadmin/ và tạo một cơ sở dữ liệu mới. Ở đây tôi sẽ tạo một cơ sở dữ liệu với tên killthecodes.
Cấu hình kết nối đến cơ sở dữ liệu trong project.
- Khởi động IDE, ở đây tôi dùng PhpStorm.
- Tìm và mở file .env rồi sửa các dòng :
DB_DATABASE= killthecodes //tên database
DB_USERNAME= root //username
DB_PASSWORD= //password - Tiếp tục tìm và mở file config\database.php và sửa các dòng sau:
'database' => env('DB_DATABASE', 'killthecodes'), //Tên database
'username' => env('DB_USERNAME', 'root'), //username
'password' => env('DB_PASSWORD', ''), //password
Bước 4: Tạo bảng.
Mở Terminal chạy lệnh: php artisan make:migration create-tasks-table --create=tasks
Mở file migration mới tạo trong thư mục: database\migrations, chỉnh sửa cấu trúc bảng:
Sau đó chạy lệnh php artisan migrate trong Terminal rồi kiểm tra dữ liệu trong database.
Bước 5: Tạo model.
Mở Terminal chạy lệnh: php artisan make:model Tasks
Bước 6: Route cho ứng dụng.
Mở file: routes\web.php và thêm các route như sau:
Bước 7: Tạo master layouts
Trong thư mục views tạo thư mục layouts, sau đó trong thư mục layouts tạo file app.blade.php cấu trúc thư mục như sau:
Bước 8: Tạo trang chủ
Trong thư mục views tạo một file .php mới và đặt tên task.blade.php. Sau đó kế thừa từ file app.blade.php trong thư mục layouts
{{--thua ke tu app.blade--}}
@extends('layouts.app');
Sau đó trỏ đến phần @yield('content'); trong file app.blade.php:
{{--dung app.css--}}
@section('content') @endsection
Tiếp đến chúng ta tạo một form để insert dữ liệu bên trong section trên bằng mã html và css:
{{-- hien thi thong bao loi--}}
@include('errors.503')
File này có đường dẫn như sau views\errors\503.blade.php nếu trong project của bạn chưa có hãy tạo thư mục error bên trong thư mục views sau đó tạo một file php mới và chép đoạn code sau vào đó.
<!DOCTYPE html>
<html>
<head>
<title>Be right back.</title>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Lato:100">
<style>
html, body{
height: 100%;
}
body{
margin: 0;
padding: 0;
width: 100%;
color: #B0BEC5;
display: table;
font-weight: 100;
font-family: 'Lato', sans-serif;
}
.container{
text-align: center;
display: table-cell;
vertical-align: middle;
}
.content{
text-align: center;
display: inline-block;
}
.title{
font-size: 72px;
margin-bottom: 40px;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<div class="title">Be right back.</div>
</div>
</div>
</body>
</html>
//show Task Dashboard
Route::get('/', function () {
$tasks = Task::orderBy('created_at', 'desc')->get();
return view('task',[
'tasks'=> $tasks
]);
});
Và...
Tiếp theo chúng ta sẽ sửa route add new task để xác thực dữ liệu nhập vào và chuyển hướng lại trang chủ:
để kiểm tra chúng ta vào trang chủ sau đó không nhập gì và bấm nút Add task sẽ có lỗi như sau :
Bước 9: Thêm mới, hiển thị và xóa dữ liệu
Thêm dữ liệu
Để dữ liệu nhập vào được update lên database cúng ta sẽ sử dụng $request. thêm đoạn code sau vào phía cuối route add new task:Truy cập killthecodes.com để nhập thử dữ liệu và kiểm tra database xem dữ liệu được thay đổi như thế nào.
Hiển thị dữ liệu
Sửa route show task dashboard:
Tiếp đến thêm bố cục hiển thị vào task.blade.php đặt phía dưới thẻ </form> :
Xóa dữ liệu
Thêm nút xóa vào task.blade.php hãy thêm một cột vào cấu trúc của bảng hiển thị:
Sau đó sửa route delete task :
Mọi thắc mắc, góp ý hãy để lại bình luận hoặc gửi tin nhắn qua Fanpage.
Chúc các bạn thành công 😉.
Nhận xét
Đăng nhận xét