mật khẩu: misaelrau
-
Thiết kế giao diện chung:
- Cho phép người dùng chuyển đổi giữa 3 ngôn ngữ vn/en/jp.
- Hiển thị thông báo mỗi lần thao tác với phía máy chủ.
- Khi người dùng cố tính thao tác/tuy cập vào trang bị hạn chế, thực hiện điều hướng tới giao diện mặc định.
- Thiết kế các ô nhập dữ liệu bắt buộc phải có dữ liệu, hoặc có yêu cầu đặc biệt về độ dài, kí tự.
- Thiết kế cơ sở sở dữ liệu theo hướng tối ưu, giao diện tối giản
- Tạo cấp bậc quyền:
- Mặc định, khi đăng ký tại /register, người dùng sẽ có mọi quyền cao nhất (Owner)
- Mặc định, những người dùng sau này được thêm bởi Owner sẽ có quyền User, và cũng công ty với Owner, tài khoản mật khẩu của User sẽ được Owner tạo lần đầu
- Owner có thể chỉ định User bất kì các quyền như sau: Admin (cho phép thêm/sửa/xóa bất kì thông báo/thảo luận/nhóm/công việc, thêm/sửa hồ sơ thành viên), Team Manager (cho phép thêm/sửa/xóa bất kì công việc/nhóm/người dùng khỏi nhóm bất kì). Mặc định User chỉ có thể thêm thảo luận, thêm/sửa/xóa công việc được giao
-
Thiết kế trang đăng nhập, đăng ký:
- Yêu cầu người dùng phải nhập mã xác thực được gửi về email khi đăng ký
- Thiết kế giao diện, thêm chức năng đăng nhập bằng google
- Xử lý lỗi, trong trường hợp người dùng nhập dữ liệu không hợp lệ, hoặc sai tài khoản mật khẩu
-
Thiết kế trang chủ:
- Hiển thị thông báo/thảo luận mới nhất.
- Hiển thị công việc mới nhất/ưu tiên.
- Hiển thị bảng thống kê.
-
Thiết kế trang hoạt động:
- Hiển thị thanh công cụ tìm kiếm theo tên người đăng, bộ lọc thời gian.
- Bảng hiện thị dữ liệu (bao gồm liên kết dẫn tói hoạt động đó).
- Thanh phân trang.
-
Thiết kế trang thông báo/thảo luận
- Hiển thị thanh công cụ tìm kiếm theo tên thông báo/thảo luận, bộ lọc thời gian.
- Bảng hiện thị dữ liệu (bao gồm liên kết dẫn tói thông báo/thảo luận đó).
- Thanh phân trang, from thêm thông báo/thảo luận (việc thực hiện thêm thông báo bởi Owner/Admin)..
- Hiển thị chi tiết khi bấm vào thông báo/thảo luận.
- Cho phép người dùng sửa/xóa/bình luận, với mỗi thao tác, gửi thông báo cho người có liên quan.
- Cho phép nhập ảnh, thay đổi màu chữ/cỡ chữ/chữ gạch chân/thêm link/…
-
Thiết kế trang nhóm:
- Hiển thị thanh công cụ tìm kiếm theo tên nhóm/mã nhóm, bộ lọc thời gian, lọc chỉ nhóm của người dùng đó.
- Hiển thị bảng dữ liệu, phân trang, from thêm nhóm (chỉ Owner/Admin/Team Manager).
- Xử lý điều hướng tới trang chi tiết nhóm nhóm khi ấn vào nhóm
- Cho phép người dùng sửa/xóa/thêm thành viên/xóa thành viên, với mỗi thao tác, gửi thông báo cho người có liên quan (việc thực hiện xóa, sửa chỉ có thể thực hiện bới Owner/Admin/Team Manager).
-
Thiết kế trang công việc:
- Hiển thị danh sách công việc đã được phân trang
- Hiển thị bộ lọc theo tên công việc/mã nhóm/trạng thái/độ ưu tiên/thời gian/người đảm nhiệm
- Hiển thị form thêm công việc (user chỉ thêm được công việc trong nhóm của họ)
- Hiển thị chi tiết công việc khi bấm vào
- Cho phép người dùng sửa/xóa/bình luận, với mỗi thao tác, gửi thông báo cho người có liên quan (việc thực hiện xóa, sửa chỉ có thể thực hiện bới Owner/Admin/Team Manager/Người tạo).
-
Thiết kế trang danh sách thành viên:
- Hiển thị danh sách thông tin cơ bản các thành viên trong cũng 1 công ty đã được phân trang
- Hiển thị bộ lọc theo tên
- Xử lý khi bấm vào sẽ điều hướng tới trang hồ sơ người dùng
- Hiển thị form thêm thành viên (chỉ Owner/Admin)
-
Thiết kế trang hồ sơ người dùng:
- Hiển thị dữ liệu, ảnh của người dùng
- Xử lý thao tác thay đổi ảnh, dữ liệu
- Yêu cầu nhập đúng mật khẩu xác nhận (với hồ sơ của người khác, việc thực hiện thay đổi chỉ có thể thực hiện bới Owner/Admin)
- Hiển thị form đổi mật khẩu (với hồ sơ của người khác, việc thực hiện thay đổi chỉ có thể thực hiện bới Owner/Admin)
-
Thiết kế trang tin nhắn:
- Hiển thị bộ lọc tìm kiếm tin nhắn theo tên
- Hiển thị botchat và các người dùng khác
- Thiết lập botchat để hiển thị các tin nhắn thông báo (từ công việc, thông báo, bình luận,…), ngoài ra, vào 8h sáng hằng ngày (trừ T7 CN), botchat sẽ gửi tin nhắn cập nhật tiến độ công việc.
Khi download code, các bạn sẽ được bảo hành/cải tiến miễn phí (cách thức và hình thức sẽ được gửi kèm theo file code)
XEM THÊM ==> Hướng dẫn cài đặt chi tiết
Nguồn: Sharecode.vn
🚀 Hướng dẫn chạy dự án
🖥 Yêu cầu cài đặt
Bạn cần cài đặt trước các phần mềm sau:
✅ VS Code hoặc IDE tương tự
✅ Node.js: https://nodejs.org/en
✅ Composer: https://getcomposer.org/
✅ XAMPP — để chạy MySQL: https://www.apachefriends.org/
📁 Bước 1: Giải nén dự án
Giải nén 2 thư mục:
backend/ – chứa mã nguồn Laravel (API)
frontend/ – chứa mã nguồn giao diện (Vue)
🧱 Bước 2: Cài đặt và chạy Backend (Laravel)
Mở terminal A trong VS Code (hoặc nhấn `Ctrl + Shift + `` để mở terminal mới).
Chạy các lệnh sau:
cd backend
composer install
cp .env.example .env
php artisan key:generate
Chỉnh sửa file .env:
Đảm bảo MySQL đang chạy (mở XAMPP và bật MySQL)
Cập nhật các dòng:
DB_DATABASE=ten_database_ban_muon_luu
DB_USERNAME=ten_nguoi_dung_mac_dinh_la_root
DB_PASSWORD=mac_dinh_la_khong_co
Cập nhật pusher key và google key (nếu chưa có, liên hệ mình để được hỗ trợ nhé)
BROADCAST_DRIVER=pusher
PUSHER_APP_ID=your_pusher_app_id
PUSHER_APP_KEY=your_pusher_app_key
PUSHER_APP_SECRET=your_pusher_app_secret
PUSHER_APP_CLUSTER=your_pusher_cluster
GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret
GOOGLE_REDIRECT_URL=http://127.0.0.1:8000/api/auth/google/callback
Chạy migrate và seed dữ liệu:
php artisan migrate
php artisan db:seed --class=DatabaseSeeder
Cuối cùng, chạy Laravel server:
php artisan serve
Lưu ý: Giữ terminal A đang chạy, không nhập lệnh khác tại đây nữa. Tiếp theo, mở terminal B để chạy frontend.
🌐 Bước 3: Cài đặt và chạy Frontend (Vue/Vite)
Mở terminal B mới (File → New Terminal, hoặc bấm nút + trong terminal).
Chạy các lệnh sau:
cd frontend
npm install
npm run dev
Sau khi chạy xong, bạn sẽ thấy dòng như:
➜ Local: http://localhost:5173/
📌 Đây là link truy cập chính của trang web – hãy mở trình duyệt và truy cập link này.