Liên hệ với mình qua Zalo để được hướng dẫn cài đặt sau khi mua thành công.

Thông tin liên hệ sẽ hiển thị sau khi mua thành công. Cảm ơn!

Sẵn sàng nhận phát triển thêm chức năng theo yêu cầu (có tính phí)

--> Sản phẩm đã deploy được lên server --> có thể check thử.

===============

1. Tổng Quan Dự Án

CBH Youth Online là một nền tảng diễn đàn và mạng xã hội được thiết kế dành riêng cho học sinh trường THPT Chuyên Biên Hoà. Hệ thống cung cấp môi trường giao lưu, chia sẻ kiến thức, thảo luận và kết nối giữa các học sinh trong trường. Dự án được xây dựng với PHP thuần, sử dụng BladeOne template engine, và các công nghệ web hiện đại, hướng đến trải nghiệm người dùng mượt mà, dễ sử dụng và dễ mở rộng.

Thông tin dự án:

• Tên dự án: CBH Forum Online (Diễn đàn học sinh Chuyên Biên Hoà)
• Website: https://chuyenbienhoa.com/
• Facebook Fanpage: https://fb.me/cbhyouthonline
• Tổ chức phát triển: Fatties Software 2024
• Team members:
  • Duong Tung Anh (CEO/Founder - C4K60 Bien Hoa Gifted High School)
  • Hoang Phat (Co-Founder/Project Advisor - A1K60 Bien Hoa Gifted High School)

2. Tính Năng Chính

2.1. Dành cho Người Dùng

Quản lý tài khoản và hồ sơ

·       Đăng ký/Đăng nhập:

• Đăng ký tài khoản với username, email, mật khẩu
• Đăng nhập bằng username/email và mật khẩu
• Xác thực email sau khi đăng ký
• Đăng nhập bằng OAuth (Google, Facebook)
• Quên mật khẩu và đặt lại mật khẩu qua email
• Bảo vệ bằng reCAPTCHA

·       Quản lý hồ sơ cá nhân:

• Xem và chỉnh sửa thông tin cá nhân (tên hiển thị, bio, avatar)
• Upload và thay đổi avatar
• Thay đổi username (giới hạn 30 ngày/lần)
• Cập nhật email
• Cài đặt thông báo
• Xem danh sách người theo dõi (followers) và đang theo dõi (following)

Diễn đàn và Thảo luận

·       Diễn đàn chính:

• Xem danh sách các danh mục chính và subforum
• Duyệt bài viết theo danh mục
• Tìm kiếm và lọc bài viết
• Xem thống kê: số người dùng, số bài viết, số bình luận, kỷ lục online

·       Tạo và quản lý bài viết:

• Tạo bài viết mới với tiêu đề và nội dung
• Upload ảnh đính kèm
• Chọn subforum để đăng bài
• Xem chi tiết bài viết với đầy đủ thông tin
• Chỉnh sửa và xóa bài viết của mình
• Lưu bài viết yêu thích
• Xem lịch sử bài viết đã lưu

·       Bình luận và tương tác:

• Bình luận trên bài viết
• Trả lời bình luận (nested comments)
• Upvote/Downvote bài viết và bình luận
• Xem số lượt xem, số bình luận, số vote của bài viết
• Theo dõi người dùng khác

Bảng tin và Nội dung

·       Bảng tin (Feed):

• Xem bảng tin cá nhân với các bài viết từ người dùng đang theo dõi
• Lọc và sắp xếp bài viết
• Tải thêm bài viết (infinite scroll)

·       Tin tức Đoàn (Youth News):

• Xem các tin tức và thông báo từ Đoàn trường
• Theo dõi các hoạt động của Đoàn

·       Loa lớn (Recordings):

• Xem các bài viết đặc biệt được đăng trong mục "Loa lớn"
• Nội dung nổi bật và quan trọng

Khám phá và Tìm kiếm

·       Khám phá (Explore):

• Khám phá nội dung mới
• Tìm kiếm người dùng và bài viết

·       Tìm kiếm (Lookup):

• Tìm kiếm người dùng theo username
• Tìm kiếm bài viết và nội dung

Báo cáo và Bảo mật

• Báo cáo:
  • Báo cáo tập thể lớp
  • Báo cáo học sinh
  • Gửi báo cáo về nội dung không phù hợp

Trợ giúp và Hỗ trợ

·       Trung tâm trợ giúp (Help Center):

• Hướng dẫn sử dụng
• Câu hỏi thường gặp (FAQ)
• Liên hệ hỗ trợ

·       Góp ý:

• Gửi phản hồi và góp ý cho dự án

2.2. Dành cho Quản Trị Viên

Quản lý hệ thống

·       Dashboard quản trị:

• Xem tổng quan người dùng và bài viết
• Thống kê hoạt động hệ thống
• Quản lý nội dung

·       Quản lý người dùng:

• Xem danh sách tất cả người dùng
• Quản lý quyền truy cập
• Xử lý báo cáo

·       Quản lý nội dung:

• Xem và quản lý tất cả bài viết
• Kiểm duyệt nội dung
• Xóa hoặc ẩn nội dung không phù hợp

3. Công Nghệ Sử Dụng

Backend

• PHP 8.2+ - Ngôn ngữ lập trình chính
• Phroute 2.2 - Router đơn giản và hiệu quả cho PHP
• BladeOne 4.13 - Template engine (tương thích Laravel Blade)
• Carbon 3.8 - Xử lý ngày tháng và thời gian
• PHPMailer 6.9 - Gửi email (xác thực, quên mật khẩu)
• League OAuth2 Client 2.7 - Xác thực OAuth2
  • League OAuth2 Google 4.0 - Đăng nhập bằng Google
  • League OAuth2 Facebook 2.2 - Đăng nhập bằng Facebook
• PHP Markdown 2.0 - Hỗ trợ định dạng Markdown trong nội dung

Frontend

• Tailwind CSS - Framework CSS utility-first
• JavaScript (ES6+) - Xử lý tương tác phía client
• Alpine.js - Framework JavaScript nhẹ cho interactive components
• Custom CSS - Styling tùy chỉnh
• Responsive Design - Hỗ trợ đa thiết bị (mobile, tablet, desktop)

Database

• MySQL 5.7+ hoặc MariaDB 10.3+ - Hệ quản trị cơ sở dữ liệu
• UTF-8 - Hỗ trợ đa ngôn ngữ

Development Tools

• Composer - Quản lý dependencies PHP
• Git - Quản lý phiên bản mã nguồn

Third-party Services

• Google reCAPTCHA - Bảo vệ chống spam và bot
• Google OAuth - Đăng nhập bằng tài khoản Google
• Facebook OAuth - Đăng nhập bằng tài khoản Facebook
• PHPMailer - Gửi email qua SMTP
• CDN API - Lưu trữ và quản lý file (avatar, ảnh đính kèm)

4. Mục Tiêu Dự Án

4.1. Mục tiêu chính

• Kết nối học sinh: Tạo môi trường giao lưu và kết nối giữa các học sinh trong trường
• Chia sẻ kiến thức: Khuyến khích học sinh chia sẻ kiến thức, kinh nghiệm học tập
• Thảo luận và trao đổi: Tạo không gian thảo luận về các chủ đề học tập, hoạt động trường lớp
• Thông tin và tin tức: Cung cấp thông tin và tin tức từ Đoàn trường
• An toàn và bảo mật: Đảm bảo môi trường an toàn với hệ thống báo cáo và kiểm duyệt

4.2. Mục tiêu tương lai

• Mở rộng tính năng chat realtime
• Tích hợp thêm các tính năng mạng xã hội
• Phát triển ứng dụng mobile
• Cải thiện hệ thống tìm kiếm
• Thêm tính năng thống kê và phân tích

5. Tính Năng Nổi Bật

5.1. Giao diện và Trải nghiệm

• Thiết kế hiện đại: Giao diện đẹp mắt, dễ sử dụng với Tailwind CSS
• Responsive: Tối ưu cho mọi thiết bị (mobile, tablet, desktop)
• Dark Mode: Hỗ trợ chế độ tối (dark mode) để bảo vệ mắt
• Tải nhanh: Tối ưu hiệu suất và tốc độ tải trang

5.2. Bảo mật và An toàn

• Xác thực email: Xác thực email khi đăng ký
• Mật khẩu mã hóa: Sử dụng bcrypt để mã hóa mật khẩu
• reCAPTCHA: Bảo vệ chống spam và bot
• OAuth: Đăng nhập an toàn bằng Google/Facebook
• Session management: Quản lý phiên đăng nhập an toàn
• Input validation: Kiểm tra và làm sạch dữ liệu đầu vào

5.3. Tương tác và Tương tác xã hội

• Vote system: Upvote/Downvote bài viết và bình luận
• Follow system: Theo dõi người dùng khác
• Save posts: Lưu bài viết yêu thích
• Comments: Bình luận và trả lời bình luận
• Profile: Trang cá nhân với thông tin chi tiết

5.4. Quản lý nội dung

• Forum categories: Tổ chức nội dung theo danh mục và subforum
• Rich content: Hỗ trợ text, ảnh, markdown
• Search: Tìm kiếm người dùng và nội dung
• Filtering: Lọc và sắp xếp bài viết

5.5. Thống kê và Phân tích

• View count: Đếm số lượt xem bài viết
• Comment count: Đếm số bình luận
• Vote count: Đếm số vote
• User statistics: Thống kê người dùng và hoạt động

6. Cấu Trúc Dự Án

6.1. Cấu trúc thư mục

cbh-youth-online-php/

├── app/

│   ├── Controllers/          # Các controller xử lý logic

│   │   ├── AdminController.php

│   │   ├── AuthController.php

│   │   ├── ForumController.php

│   │   ├── HomeController.php

│   │   ├── PostController.php

│   │   ├── ProfileController.php

│   │   └── ...

│   ├── Models/               # Các model tương tác với database

│   │   ├── Admin.php

│   │   ├── AuthAccount.php

│   │   ├── Post.php

│   │   ├── Profile.php

│   │   └── ...

│   └── Views/                # Các template view

│       ├── admin/

│       ├── auth/

│       ├── forum/

│       ├── home/

│       ├── profile/

│       └── ...

├── assets/                   # Tài nguyên tĩnh

│   ├── css/

│   ├── js/

│   └── images/

├── common/                   # File chung

│   └── route.php            # Định nghĩa routes

├── config/                   # Cấu hình

│   └── oauth.php

├── storage/                  # Lưu trữ file

├── vendor/                   # Dependencies (Composer)

├── composer.json            # PHP dependencies

├── env.example.php          # File cấu hình mẫu

├── index.php                # Entry point

└── README.md                # Tài liệu dự án

6.2. Cơ sở dữ liệu

Hệ thống sử dụng các bảng chính:

• cyo_auth_accounts - Tài khoản người dùng
• cyo_user_profiles - Hồ sơ người dùng
• cyo_topics - Bài viết
• cyo_topic_comments - Bình luận
• cyo_topic_votes - Vote bài viết
• cyo_topic_comment_votes - Vote bình luận
• cyo_topic_views - Lượt xem
• cyo_user_saved_topics - Bài viết đã lưu
• cyo_follows - Quan hệ follow
• cyo_main_categories - Danh mục chính
• cyo_subforums - Subforum
• cyo_cdn_user_content - File đã upload
• cyo_online_users - Người dùng online

XEM THÊM ==> Hướng dẫn cài đặt chi tiết

HÌNH ẢNH DEMO

Nguồn: Sharecode.vn

🚀 HƯỚNG DẪN CÀI ĐẶT

Yêu Cầu Phần Mềm

• PHP 8.2+ (khuyến nghị PHP 8.3)
• MySQL 5.7+ hoặc MariaDB 10.3+
• Composer 2.x
• XAMPP/WAMP/LAMP/Laragon (khuyến nghị Laragon)
• Web browser (Chrome, Firefox, Safari, Edge)

Hướng Dẫn Cài Đặt

Bước 1: Cài đặt môi trường phát triển

# Cài đặt XAMPP hoặc Laragon

# Khởi động Apache và MySQL

Bước 2: Clone hoặc giải nén dự án

# Clone repository hoặc giải nén file zip vào thư mục web server

# Ví dụ: C:\xampp\htdocs\cbh-youth-online-php

# hoặc: C:\laragon\www\cbh-youth-online-php

Bước 3: Cài đặt dependencies

# Di chuyển vào thư mục dự án

cd cbh-youth-online-php

# Cài đặt PHP dependencies

composer install

Bước 4: Cấu hình môi trường

# Tạo file env.php từ env.example.php

cp env.example.php env.php

Chỉnh sửa file env.php với thông tin của bạn:

<?php

const DBNAME = "cbh-youth-online";

const DBCHARSET = "utf8";

const DBUSER = "root";

const DBPASS = "";

const DBHOST = "localhost";

const BASE_URL = "http://localhost/cbh-youth-online-php/";

const MAIL_HOST = "smtp.gmail.com";

const MAIL_PORT = 587;

const MAIL_USERNAME = "[email protected]";

const MAIL_PASSWORD = "your_app_password";

const GOOGLE_CLIENT_ID = "your_google_client_id";

const GOOGLE_CLIENT_SECRET = "your_google_client_secret";

const GOOGLE_REDIRECT_URI = "http://localhost/cbh-youth-online-php/login/google/callback";

const FACEBOOK_APP_ID = "your_facebook_app_id";

const FACEBOOK_APP_SECRET = "your_facebook_app_secret";

const FACEBOOK_REDIRECT_URI = "http://localhost/cbh-youth-online-php/login/facebook/callback";

const RECAPTCHA_KEY = "your_recaptcha_secret_key";

Bước 5: Cấu hình database

Tạo database mới trong phpMyAdmin hoặc MySQL CLI:

CREATE DATABASE `cbh-youth-online` CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

Import file SQL (nếu có) hoặc chạy migrations để tạo các bảng cần thiết.

Bước 6: Cấu hình Virtual Host (Tùy chọn)

Với Laragon:

• Tự động tạo virtual host khi khởi động
• Truy cập: http://cbh-youth-online-php.test

Với XAMPP:

• Chỉnh sửa file C:\xampp\apache\conf\extra\httpd-vhosts.conf:

<VirtualHost *:80>

    DocumentRoot "C:/xampp/htdocs/cbh-youth-online-php"

    ServerName cbh-youth-online.local

    <Directory "C:/xampp/htdocs/cbh-youth-online-php">

        Options Indexes FollowSymLinks

        AllowOverride All

        Require all granted

    </Directory>

</VirtualHost>

• Thêm vào file C:\Windows\System32\drivers\etc\hosts:

127.0.0.1 cbh-youth-online.local

Bước 7: Cấu hình .htaccess (Nếu cần)

Đảm bảo file .htaccess có nội dung để rewrite URL:

RewriteEngine On

RewriteCond %{REQUEST_FILENAME} !-f

RewriteCond %{REQUEST_FILENAME} !-d

RewriteRule ^(.*)$ index.php?url=$1 [QSA,L]

Bước 8: Cấu hình Permissions

# Đảm bảo thư mục storage có quyền ghi

chmod -R 755 storage/

Bước 9: Chạy dự án

# Với Laragon: Tự động chạy khi khởi động

# Với XAMPP: Khởi động Apache và MySQL, sau đó truy cập:

# http://localhost/cbh-youth-online-php/

# hoặc: http://cbh-youth-online.local/

Cấu Hình Bổ Sung

Cấu hình Mail (cho thông báo email)

1.     Gmail:

• Bật "Less secure app access" hoặc tạo "App Password"
• Sử dụng App Password trong MAIL_PASSWORD

2.     SMTP khác:

• Cập nhật MAIL_HOST, MAIL_PORT, MAIL_USERNAME, MAIL_PASSWORD trong env.php

Cấu hình OAuth

1.     Google OAuth:

• Tạo project tại Google Cloud Console
• Tạo OAuth 2.0 credentials
• Thêm authorized redirect URI: http://localhost/cbh-youth-online-php/login/google/callback
• Cập nhật GOOGLE_CLIENT_ID và GOOGLE_CLIENT_SECRET

2.     Facebook OAuth:

• Tạo app tại Facebook Developers
• Thêm Facebook Login product
• Thêm Valid OAuth Redirect URI: http://localhost/cbh-youth-online-php/login/facebook/callback
• Cập nhật FACEBOOK_APP_ID và FACEBOOK_APP_SECRET

Cấu hình reCAPTCHA

1. Đăng ký tại Google reCAPTCHA
2. Lấy Site Key và Secret Key
3. Thêm Site Key vào form đăng ký
4. Cập nhật Secret Key trong env.php (RECAPTCHA_KEY)

Cấu hình CDN (cho upload file)

Nếu sử dụng CDN API riêng, cập nhật endpoint trong code:

• File: app/Controllers/ProfileController.php (dòng 145)
• URL: https://api.chuyenbienhoa.com/v1.0/users/{username}/avatar

7. Hướng Dẫn Sử Dụng

7.1. Đăng ký tài khoản

1. Truy cập trang đăng ký: /register
2. Điền thông tin: Username, Họ và tên, Email, Mật khẩu
3. Xác thực reCAPTCHA
4. Xác thực email qua link được gửi đến email
5. Đăng nhập và bắt đầu sử dụng

7.2. Đăng nhập

• Đăng nhập thông thường: Username/Email + Mật khẩu
• Đăng nhập OAuth: Click "Đăng nhập bằng Google" hoặc "Đăng nhập bằng Facebook"

7.3. Tạo bài viết

1. Chọn subforum phù hợp
2. Click "Tạo bài viết mới"
3. Nhập tiêu đề và nội dung
4. Upload ảnh (tùy chọn)
5. Đăng bài

7.4. Tương tác với bài viết

• Vote: Click upvote/downvote
• Bình luận: Viết bình luận ở cuối bài viết
• Lưu: Click nút lưu để lưu bài viết
• Chia sẻ: Copy link và chia sẻ

7.5. Quản lý hồ sơ

1. Truy cập: /{username}/settings
2. Chỉnh sửa thông tin cá nhân
3. Upload avatar
4. Cập nhật cài đặt thông báo

Lưu ý

• Nếu bạn đang sử dụng XAMPP thì hãy tham khảo bài viết này để cấu hình virtual host để trỏ đến thư mục public: https://chungnguyen.xyz/posts/cau-hinh-virtual-domain-ten-mien-ao-trong-xampp

Đối với Laragon: https://stackoverflow.com/questions/63318438/how-to-set-custom-virtual-host-name-in-laragon