Xây dựng website bán hàng bằng Laravel - Khởi tạo dự án

Đây là phần mở đầu của loạt bài hướng dẫn Xây dựng website bán hàng bằng Laravel, trong phần này chúng ta sẽ tạo một ứng dụng Laravel mới và thiết lập kho lưu trữ Git cho dự án của mình và cuối cùng là cài đặt Laravel Breeze để xây dựng tính năng xác thực người dùng.

E-commerce với Laravel là loạt bài ghi lại toàn bộ quá trình xây dựng hệ thống thương mại điện tử được thực hiện bởi Transmoni team nhắm hướng dẫn mọi người làm quen với Laravel, Livewire, Alpine.js và Tailwind CSS. Hiện dự án đang được cập nhật liên tục, toàn bộ mã nguồn của dự án sẽ được công khai miễn phí theo hình thức mã nguồn mở trên trang Github của Transmoni sau khi hoàn tất loạt bài hướng dẫn này.

Giả sử rằng bạn đã hoàn tất thiết lập môi trường để lập trình, có nghĩa là bạn đã cài đặt được Composer, NPM, Git, PHP, MySQL trên máy tính của mình. Nếu đang sử dụng Mac OS bạn có thể dùng Valet hoặc nếu sử dụng Windows bạn có thể dùng Sail hay Laragon tùy theo sở thích vì những ứng dụng này đều cung cấp đầy đủ nhu cầu thiết yếu cho một môi trường lập trình hoàn hảo đối với Laravel.

Khởi tạo ứng dụng Laravel mới

Nếu đã cài đặt Laravel Installer bạn có thể chạy lệnh laravel new ecommerce-app để khởi tạo ứng dụng. Tuy nhiên do chúng ta sẽ cần sử dụng Composer để thực hiện nhiều tác vụ trong suốt quá trình xây dựng dự án nên tôi sẽ dùng luôn Composer để khởi tạo ứng dụng. Thực hiện bằng cách chạy lệnh sau:

composer create-project laravel/laravel ecommerce-app

sau khi Composer hoàn tất việc khởi tạo, bạn cần di chuyển vào thư mục ecommerce-app

cd ecommerce-app

và chạy lệnh sau:

php artisan serve

Ngay bây giờ, nếu truy cập vào localhost:8000 trên trình duyệt bạn sẽ thấy trang chào mừng của Laravel.

Bạn có thể xem chi tiết hướng dẫn cài đặt Laravel tại đây.

Thiết lập Github repository

Bây giờ chúng ta sẽ tiến hành thiết lập một Github repository mới cho dự án của mình, để thực hiện hãy đăng nhập vào tài khoản Github của mình và tạo một repository mới với tên laravel-ecommerce-application.

Tiếp đến bạn cần khởi tạo git trong thư mục ecommerce-app trên máy tính của mình. Sử dụng terminal và chạy các lệnh như sau:

# khởi tạo git repository mới
git init
# thiết lập nhánh
git branch -M master
# thêm tất cả file và thư mục vào git
git add .
git commit -m "first commit"

Tiếp đến thêm remote origin từ github repository của chúng ta vào bằng lệnh

git remote add origin https://github.com/longttdev/laravel-ecommerce-application.git

Lưu ý: bạn cần thay đường dẫn phía trên thành đường dẫn của bạn.

Cuối cùng push toàn bộ file lên bằng lệnh:

git push -u origin master

Đến bước này, dự án của chúng ta đã được lưu trữ trên Github.

Cài đặt Laravel Breeze

Laravel Breeze cung cấp những tính năng tối thiểu phục vụ cho việc xác thực người dùng (authentication), trong đó bao gồm: đăng nhập, đăng ký, xác thực email, tái lập mật khẩu, xác nhận mật khẩu...

Breeze cung cấp một điểm khởi đầu tuyệt vời để bắt đầu một ứng dụng Laravel mới và cũng là lựa chọn tuyệt vời cho các dự án có kế hoạch đưa Blade template lên một tầm cao mới với Laravel Livewire.

Để cài đặt Laravel Breeze chạy lệnh sau trên terminal của bạn

composer require laravel/breeze --dev

Sau khi Composer hoàn tất cài đặt package breeze, bạn có thể chạy lệnh artisan breeze:install để publish các routes, controllers và views hay những tài nguyên khác lên ứng dụng của bạn.

php artisan breeze:install

npm install
npm run dev
php artisan migrate

Tiếp đến bạn có thể truy cập /login hoặc /register trên trình duyệt và tạo thử một tài khoản cũng như đăng nhập bằng tài khoản đó để chắc chắn đã cài đặt thành công Laravel Breeze.

Kết luận

Kết thúc bài này chúng ta đã hoàn thành bước đầu của việc chuẩn bị một ứng dụng bằng Laravel hoàn toàn mới, với tính năng xác thực người dùng được hỗ trợ bởi Laravel Breeze. Hãy nhớ rằng bạn hoàn toàn có thể tùy chỉnh Breeze theo ý muốn của mình vì toàn bộ các file routes, controllers và views đã được publish ra ngoài bộ mã nguồn của dự án này.

Ở bài tiếp theo, chúng ta sẽ cùng xây dựng bố cục layout dành cho người dùng với Tailwind CSS và Alpine.js.

Hẹn gặp lại các bạn!