Admin Dashboard Đẹp và Tiện Lợi 2024

Kiến thức cần chuẩn bị

Python Cơ Bản Bấm vào đây OOP_Python Bấm vào đây Django_Module, MVT, Bolerate Tag Dj, Recycling Bấm Vào Đây Video Hướng Dẫn (Lưu ý phải hiểu rõ lý thuyết trước khi xem) Bấm vào đây

Thiết Lập Cho Dự Án

Dùng câu lệnh sau cho terminal:

pip install -r requirements.txt
py manage.py makemigrations
py manage.py migrate

Chạy Dự Án

Dùng câu lệnh sau cho terminal:

py app.py runserver

Tạo ứng dụng Admin Dashboard

1. Tạo ứng dụng Django: Mở terminal và chạy lệnh sau để tạo một ứng dụng Django mới có tên là project_core:

   python manage.py startapp project_core

2. Cập nhật INSTALLED_APPS: Mở file settings.py trong dự án Django của bạn và thêm 'project_core.apps.AdminDashboardConfig', vào danh sách INSTALLED_APPS.

3. Cài đặt Template cho Trang chủ Admin:

   • Tạo một file mới có đường dẫn templates/admin/index.html trong thư mục gốc của dự án Django.
   • Cập nhật các thiết lập của template trong settings.py:

     TEMPLATES = [
         {
             "BACKEND": "django.template.backends.django.DjangoTemplates",
             "DIRS": [BASE_DIR / "templates"],
             "APP_DIRS": True,
             ...
         },
     ]

4. Thêm nội dung vào Template:

   • Copy và dán nội dung sau vào file index.html:

     (Nội dung được cung cấp trong nguồn tài liệu).

Tailwind CSS

5. Cấu hình Tailwind CSS:

   • Tạo một file mới có tên tailwind.config.js trong thư mục gốc của dự án.
   • Copy và dán nội dung cấu hình Tailwind CSS vào file vừa tạo.

6. Biên dịch Tailwind CSS:

   • Chạy lệnh sau trong terminal:

     npx tailwindcss -o <django_project_dir>/project_core/static/project_core/css/styles.css --watch --minify

   • Thay <django_project_dir> bằng đường dẫn thư mục dự án của bạn.

Xây dựng Nội dung Dashboard

7. Cập nhật Context cho Dashboard:

   • Trong file provider.py của ứng dụng project_core, thêm một hàm mới dashboard_callback để cung cấp context cho trang dashboard.
   • Sao chép và dán nội dung hàm dashboard_callback từ nguồn tài liệu.

8. Cập nhật Thiết lập Unfold:

   • Trong file settings.py, cập nhật thiết lập Unfold như sau:

     UNFOLD = {
         ...
         "DASHBOARD_CALLBACK": "project_core.views.dashboard_callback",
         "STYLES": [
             lambda request: static("project_core/css/styles.css"),
         ],
         ...
     }

Với các bước trên, bạn đã có thể tạo ứng dụng Admin Dashboard trong Django và tích hợp Tailwind CSS để tạo giao diện đẹp mắt.

KHóa Học Fullstack Python

Hình Thức:

• Qua Video
• Qua Zoom, Discord, Classin,...

Khóa Học Video:

Hơn 60 giờ học + Tải về + Cập nhật và sử dụng trọn đời Video hướng dẫn 7 dự án + Code Tài liệu biên soàn bản đầy đủ Bấm vào đây xem bản dùng thử Giá Gốc: 1.200.000đ, Giá Hiện Tại: 400.000đ đến hết 11/5/2024 Website Lý Thuyết và Bài Tập (Sắp ra mắt nên đăng kí trước khi hết khuyến mãi)

Khóa Học Zoom:

Liên hệ 0703930513

Bấm vào đây xem chi tiết hình ảnh