Đề bài

• Có 5 ngôi nhà, mỗi ngôi nhà được sơn một màu khác nhau.
• Chủ nhân của mỗi ngôi nhà lại mang quốc tịch khác nhau.
• 5 chủ nhân của ngôi nhà - mỗi người chỉ thích một loại nước uống, hút một hãng thuốc lá và nuôi một con vật nuôi riêng.
• Không vị chủ nhân nào thích cùng một loại nước uống, hút cùng một hãng thuốc lá và có cùng một loại vật nuôi.

Gợi ý

1. Người Anh sống trong ngôi nhà màu đỏ.
2. Người Thụy Điển nuôi chó.
3. Người Đan Mạch thích uống trà.
4. Ngôi nhà màu xanh lá nằm bên trái ngôi nhà màu trắng.
5. Chủ nhà ngôi nhà xanh lá thích uống cà phê.
6. Người hút thuốc lá Pall Mall nuôi chim.
7. Chủ nhà màu vàng hút thuốc lá Dunhill.
8. Người sống trong ngôi nhà chính giữa phố thích uống sữa.
9. Người Na Uy sống trong ngôi nhà đầu tiên.
10. Người hút thuốc lá Blends sống cạnh người nuôi mèo.
11. Người nuôi ngựa sống cạnh người hút thuốc lá Dunhill.
12. Người hút thuốc Blue Master thích uống bia.
13. Người Đức hút thuốc lá Prince.
14. Người Na Uy sống cạnh ngôi nhà màu xanh dương.
15. Người hút thuốc lá Blends có người hàng xóm thích uống nước.

Câu hỏi đưa ra: Ai là người nuôi cá?

Dừng màn hình ở đây nếu bạn không muốn biết trước đáp án. Hãy thử tự giải đố bằng khả năng của mình.

Đáp án

Với hầu hết mọi người, việc phải “dừng bước” trước những câu đố kiểu này thường do sự khởi đầu sai lầm, dẫn đến việc nhanh chóng đi vào ngõ cụt. Mấu chốt để giải quyết vấn đề ở đây đó là phương pháp loại trừ. Những dữ kiện của câu đố cho ta biết rằng có 5 ngôi nhà với:

• 5 màu: Đỏ, Xanh Lá, Trắng, Vàng, Xanh Dương
• 5 quốc tịch: Anh, Thụy Điển, Đan Mạch, Na Uy, Đức
• 5 đồ uống: Trà, Cà Phê, Sữa, Bia, Nước
• 5 loại thuốc: Pall Mall, Blends, Dunhill, Blue Master, Prince
• 5 vật nuôi: Chó, Chim, Mèo, Ngựa, Cá Rất rõ ràng, rành mạch và không thể có chuyện có nhiều hơn 1 người nuôi cá được :D

Đã có bộ khung, giờ ta cần phải ráp những mảnh ghép rời rạc lại thành một bức tranh hoàn chỉnh. Hãy để ý những dữ kiện:

1. Người sống trong ngôi nhà chính giữa phố thích uống sữa
2. Người Na Uy sống trong ngôi nhà đầu tiên.
3. Người Na Uy sống cạnh ngôi nhà màu xanh dương.

Rõ rồi, ngôi nhà đầu tiên và bên cạnh nó chỉ có số 2 thôi phải không? Còn giữa chắc chắn là số 3 rồi, việc gì phải chần chừ.

1. Ngôi nhà màu xanh lá nằm bên trái ngôi nhà màu trắng.
2. Chủ nhà ngôi nhà xanh lá thích uống cà phê.

Nhà xanh lá nằm bên trái nhà trắng. Vậy nhà xanh lá chỉ có thể là nhà số 3 hoặc số 4. Nhưng chủ nhà xanh lá lại uống cà phê, cho nên nhà xanh lá chỉ có thể là nhà số 4. Dễ dàng suy ra nhà trắng là nhà số 5.

1. Người Anh sống trong ngôi nhà màu đỏ.
2. Chủ nhà màu vàng hút thuốc lá Dunhill.
3. Người nuôi ngựa sống cạnh người hút thuốc lá Dunhill.

Nhà đỏ chỉ có thể là nhà số 1 hoặc số 3. Nhưng nhà số 1 người Na Uy đã sống, nên người Anh phải sống ở nhà số 3. Vậy chỉ còn lại nhà vàng dành cho người Na Uy. Và chủ nhà này hút thuốc Dunhill. Người nuôi ngựa sống bên cạnh chỉ có thể ở trong nhà số 2.

1. Người Đan Mạch thích uống trà.
2. Người hút thuốc Blue Master thích uống bia.
3. Người hút thuốc lá Blends có người hàng xóm thích uống nước.

Người Đan Mạch chỉ có thể ở trong những ngôi nhà số 2, 4 hoặc 5. Nhưng chủ nhà số 4 uống cà phê chứ không phải trà. Vậy chỉ còn nhà số 2 hoặc số 5. Người uống bia chỉ có thể ở trong những ngôi nhà số 1, 2 hoặc 5. Nhưng chủ nhà số 1 hút thuốc Dunhill chứ không phải Blue Master. Vậy chỉ còn nhà số 2 hoặc số 5. Như vậy người uống trà (Đan Mạch) và người uống bia (Hút thuốc Blue Master) sẽ ở trong 2 ngôi nhà số 2 và số 5. Do đó chỉ còn lại chủ ngôi nhà số 1 sẽ uống nước. Và hàng xóm của người này (nhà số 2) sẽ hút thuốc Blends. Từ đó suy ra chủ nhà số 2 chỉ thể là người Đan Mạch (uống trà). Và chủ nhà số 5 sẽ là người uống bia (Hút thuốc Blue Master).

1. Người Thụy Điển nuôi chó.
2. Người hút thuốc lá Pall Mall nuôi chim.
3. Người Đức hút thuốc lá Prince.

Người Đức sống trong nhà số 4 hay 5? Chắc chắn là số 4 vì người Đức hút thuốc Prince mà. Vậy chỉ còn lại chủ nhà số 5 là người Thụy Điển và nuôi chó. Chủ nhà số 3 sẽ hút thuốc Pall Mall và nuôi chim.

1. Người hút thuốc lá Blends sống cạnh người nuôi mèo.

Cạnh nhà số 2 (hút thuốc Blends) là nhà số 3? Không, người đó nuôi chim rồi, phải là nhà số 1. Cuối cùng chỉ còn lại nhà số 4 nuôi cá mà thôi. Và chủ nhà này là người Đức.

Vậy đáp án cho câu đố là: Người Đức nuôi cá Không hề khó phải không? Chẳng một ai dám chắc câu đố này do Einstein đưa ra. Không có bằng chứng cho thấy ông đã làm điều đó. Vậy nên kể cả khi không giải được câu đố này, bạn cũng không cần quá quan tâm đến con số 2% kia.

VHDX là gì?

VHDX (Virtual Hard Disk) là định dạng file hệ thống ảo được sử dụng rộng rãi trong các môi trường ảo hóa như Hyper-V của Microsoft. Nó mô phỏng một ổ đĩa vật lý và có thể chứa hệ điều hành, dữ liệu, và các ứng dụng. Trong trường hợp của WSL 2, VHDX lưu trữ toàn bộ hệ thống file của bản phân phối Linux bạn đang sử dụng (như Ubuntu, Debian, v.v.), bao gồm cả dữ liệu Docker.

Khi bạn sử dụng Docker trên WSL 2, dữ liệu của các container, image và volume đều được lưu trong file VHDX này. Mặc dù VHDX có khả năng tự động mở rộng dung lượng khi cần thiết, nhưng nó không tự động giảm kích thước khi dữ liệu bên trong bị xóa, dẫn đến việc file này có thể chiếm dụng rất nhiều dung lượng ổ đĩa không cần thiết.

Qua thời gian, khi bạn xóa bớt các container hoặc image trong Docker, dung lượng thật sự sử dụng bên trong file VHDX sẽ giảm xuống, nhưng kích thước của chính file VHDX vẫn không thay đổi. Điều này có nghĩa là dung lượng ổ đĩa của bạn vẫn bị chiếm dụng bởi VHDX, mặc dù không còn nhiều dữ liệu bên trong nó. Do đó, việc thu nhỏ (compact) file VHDX là cần thiết để giải phóng dung lượng không cần thiết này.

Cách giải phóng bộ nhớ Docker trên WSL 2

Dưới đây là hướng dẫn chi tiết các bước sử dụng diskpart để thu nhỏ dung lượng của file VHDX trong WSL 2.

Bước 1: Tắt WSL

Trước khi tiến hành bất kỳ thao tác nào với file VHDX, bạn cần đảm bảo rằng không có tiến trình nào của WSL đang chạy. Điều này đảm bảo rằng file VHDX không bị khóa bởi hệ thống. Bạn có thể tắt tất cả các phiên WSL đang chạy bằng lệnh sau:

wsl --shutdown

Lệnh này sẽ tắt hoàn toàn tất cả các bản phân phối Linux đang chạy trên WSL 2.

Bước 2: Mở Diskpart

Diskpart là một công cụ dòng lệnh mạnh mẽ của Windows, cho phép quản lý các đĩa, phân vùng và file hệ thống ảo. Để bắt đầu, bạn cần mở Command Prompt hoặc PowerShell với quyền quản trị viên (Run as Administrator) và nhập lệnh sau để khởi động diskpart:

diskpart

Giao diện dòng lệnh của diskpart sẽ xuất hiện, sẵn sàng để bạn thao tác với các ổ đĩa và file hệ thống ảo.

Bước 3: Chọn file VHDX

Tiếp theo, bạn cần chỉ định chính xác file VHDX mà WSL 2 đang sử dụng. Thay thế {YourUser} bằng tên người dùng của bạn để tìm đúng đường dẫn:

select vdisk file="C:\Users\{YourUser}\AppData\Local\Packages\CanonicalGroupLimited.UbuntuonWindows_79rhkp1fndgsc\LocalState\ext4.vhdx"

Lệnh này sẽ chọn file VHDX mà hệ thống WSL 2 đang sử dụng. Đường dẫn này có thể khác nhau nếu bạn đang sử dụng bản phân phối Linux khác, vì vậy hãy đảm bảo bạn đã nhập đúng đường dẫn.

Bước 4: Gắn VHDX dưới chế độ chỉ đọc

Để đảm bảo an toàn, bạn nên gắn (attach) file VHDX dưới chế độ chỉ đọc. Điều này giúp ngăn chặn bất kỳ thay đổi nào không mong muốn có thể xảy ra trong quá trình thao tác:

attach vdisk readonly

Lệnh này sẽ gắn file VHDX vào hệ thống, nhưng chỉ cho phép đọc, không cho phép ghi dữ liệu.

Bước 5: Thu nhỏ dung lượng của VHDX

Sau khi gắn file VHDX, bạn có thể sử dụng lệnh compact vdisk để thu nhỏ dung lượng của nó. Lệnh này sẽ loại bỏ không gian trống bên trong file VHDX và giảm kích thước của nó trên ổ đĩa vật lý:

compact vdisk

Quá trình này có thể mất vài phút tùy thuộc vào dung lượng trống cần thu nhỏ.

Bước 6: Tháo VHDX

Khi quá trình thu nhỏ hoàn tất, bạn nên tháo (detach) file VHDX khỏi hệ thống:

detach vdisk

Lệnh này sẽ ngắt kết nối file VHDX khỏi hệ thống, hoàn tất quá trình giải phóng dung lượng.

Bước 7: Thoát diskpart

Cuối cùng, nhập lệnh sau để thoát khỏi diskpart:

exit

Giao diện dòng lệnh của diskpart sẽ đóng lại và bạn có thể quay trở lại với các tác vụ thông thường trên hệ thống.

Việc quản lý và tối ưu hóa dung lượng lưu trữ là rất quan trọng, đặc biệt khi bạn làm việc với Docker trên WSL 2. Bằng cách thực hiện các bước trên, bạn có thể dễ dàng giải phóng dung lượng ổ đĩa bị chiếm dụng không cần thiết bởi file VHDX của WSL 2. Điều này không chỉ giúp hệ thống của bạn hoạt động mượt mà hơn mà còn giúp bạn tiết kiệm không gian lưu trữ quý giá trên ổ đĩa của mình.

Những Extension VS Code hữu ích giúp cải thiện trải nghiệm lập trình

Bookmarks (alefragnani.bookmarks)

• Cho phép bạn đánh dấu các dòng code quan trọng và chuyển nhanh giữa các điểm đánh dấu trong file hoặc giữa nhiều file. Rất hữu ích khi bạn làm việc với file dài.

Change Case (wmaurer.change-case)

• Dễ dàng chuyển đổi chuỗi giữa các định dạng camelCase, snake_case, kebab-case, PascalCase,… chỉ bằng vài phím bấm.

Code Spell Checker (streetsidesoftware.code-spell-checker)

• Tự động kiểm tra chính tả trong comment, chuỗi văn bản, tài liệu Markdown,… giúp bạn tránh những lỗi chính tả nhỏ nhặt nhưng đáng tiếc.

Docker (ms-azuretools.vscode-containers)

• Hỗ trợ quản lý Docker container, image, volume ngay trong VS Code. Có thể xem logs, mở terminal, attach vào container rất thuận tiện.

Fluent Icons (miguelsolorio.fluent-icons)

• Bộ icon theo phong cách Fluent Design hiện đại, tạo cảm giác dễ chịu và mới mẻ cho sidebar và file explorer của VS Code.

GitLens (eamodio.gitlens)

• Mở rộng chức năng Git trong VS Code: xem lịch sử commit theo dòng, blame rõ ràng từng thay đổi, hiển thị tác giả, thời gian chỉnh sửa… cực kỳ hữu dụng khi làm việc nhóm.

Increment Selection (albymor.increment-selection)

• Cho phép bạn mở rộng vùng chọn một cách thông minh theo cấu trúc mã nguồn, không chỉ đơn thuần là chọn từ hoặc dòng như mặc định.

Indent Rainbow (oderwat.indent-rainbow)

• Tô màu cho các mức thụt dòng bằng màu sắc khác nhau, giúp dễ phân biệt các cấp độ lồng nhau trong code, đặc biệt hữu ích với Python hoặc YAML.

Live Server (ritwickdey.liveserver)

• Mở một server cục bộ và reload trang tự động khi bạn chỉnh sửa file HTML, CSS, JS. Phù hợp khi làm web tĩnh hoặc thử nghiệm nhanh giao diện.

Material Icon Theme (pkief.material-icon-theme)

• Thay đổi icon file/folder theo Material Design. Hỗ trợ nhiều định dạng file và framework như Angular, Vue, Laravel, Docker,…

One Dark Pro (Material Theme) (zhuangtongfa.material-theme)

• Một trong những theme phổ biến nhất cho VS Code, lấy cảm hứng từ Atom’s One Dark với màu sắc hài hòa, dễ chịu cho mắt khi làm việc lâu.

Remote - WSL (ms-vscode-remote.remote-wsl)

• Giúp bạn mở và phát triển dự án trong môi trường WSL (Windows Subsystem for Linux) ngay trong VS Code, như thể bạn đang làm việc trên Linux thực thụ.

Run on Save (emeraldwalk.runonsave)

• Tự động chạy một hoặc nhiều lệnh terminal khi bạn lưu file, chẳng hạn như eslint, prettier, php artisan,… Rất hữu ích cho CI/CD nhẹ tại local.

Sublime Keymap (ms-vscode.sublime-keybindings)

• Mang toàn bộ keybinding của Sublime Text sang VS Code. Nếu bạn là fan của Sublime, extension này sẽ giúp bạn cảm thấy quen thuộc ngay lập tức.

Xuất & nhập danh sách extensions giữa các máy

Nếu bạn muốn chuyển extension từ máy A sang máy B, hãy làm như sau:

Xuất danh sách extension:

code --list-extensions > extensions.txt

Import vào máy khác:

cat extensions.txt | xargs -n 1 code --install-extension

💡 Với PowerShell (trên Windows), bạn dùng:

Get-Content extensions.txt | ForEach-Object { code --install-extension $_ }

Với sự đa dạng của các extension này, bạn có thể tùy chỉnh VSCode theo cách tốt nhất phù hợp với nhu cầu phát triển của mình. Hãy tải xuống và thử nghiệm để tận dụng sức mạnh của trình soạn thảo mã nguồn này.

Kiểm Tra Quyền và Chủ Sở Hữu của Thư Mục storage

Đầu tiên, kiểm tra quyền và chủ sở hữu (owner) của thư mục storage bằng lệnh:

ls -lZ storage

Nếu Web Server không có quyền ghi vào thư mục storage hoặc file /storage/logs/laravel.log, bạn cần cấp quyền ghi bằng lệnh:

sudo chmod -R 775 storage

Lưu ý: Không nên đặt quyền 777 vì điều này có thể gây ra lỗ hổng bảo mật nghiêm trọng.

Tiếp theo, kiểm tra chủ sở hữu của thư mục storage. Nếu không phải là user đang chạy Web Server, bạn cần thay đổi chủ sở hữu bằng lệnh:

sudo chown -R apache:apache storage

Thay apache bằng tên user chạy Web Server của bạn. Nếu không biết user nào đang chạy Web Server, bạn có thể kiểm tra bằng:

ps aux | egrep '(apache|httpd|nginx)'

Ngoài ra, đảm bảo rằng các tiến trình liên quan như cronjob, supervisor cũng chạy dưới user phù hợp với chủ sở hữu của thư mục storage.

Kiểm Tra và Cấu Hình SELinux

Nếu đã chỉnh sửa quyền và chủ sở hữu mà vẫn gặp lỗi, vấn đề có thể liên quan đến SELinux - một mô-đun bảo mật của Linux, kiểm soát các chính sách bảo mật về truy cập. SELinux có ba chế độ:

• Enforcing: Kiểm soát truy cập theo chính sách và ghi lại log.
• Permissive: Cho phép tất cả truy cập nhưng vẫn ghi lại log.
• Disabled: SELinux bị vô hiệu hóa.

Để kiểm tra trạng thái của SELinux, sử dụng lệnh:

sestatus

Mặc định trên CentOS, SELinux thường bật ở chế độ Enforcing, có thể gây cản trở quyền ghi vào thư mục storage của Laravel. Bạn có thể tạm thời tắt SELinux bằng lệnh:

sudo setenforce 0

Lưu ý: Tắt SELinux không phải là giải pháp tốt nhất vì có thể giảm mức độ bảo mật của hệ thống. Thay vào đó, chỉ nên thay đổi context của thư mục storage để phù hợp với yêu cầu của Web Server.

Thay Đổi SELinux Context

Có hai cách để thay đổi SELinux context:

Sử Dụng chcon

Lệnh chcon giúp thay đổi context của thư mục storage một cách tạm thời:

sudo chcon -R -t httpd_sys_rw_content_t storage

Sử Dụng semanage

Lệnh semanage thay đổi context một cách vĩnh viễn:

sudo semanage fcontext -a -t httpd_sys_rw_content_t "/path/to/your/laravel/project/storage(/.*)?"

Sau đó, áp dụng thay đổi với lệnh:

sudo restorecon -R -v storage

Lưu ý: Khi sử dụng semanage, bạn cần chỉ định đường dẫn tuyệt đối tới thư mục storage. Nếu semanage chưa được cài đặt, bạn có thể cài đặt nó bằng:

sudo yum install -y policycoreutils-python-utils
# hoặc với Ubuntu
sudo apt install -y policycoreutils-python-utils

Áp Dụng Cho Thư Mục Khác

Ngoài thư mục storage, đôi khi bạn cũng cần thực hiện các thao tác tương tự cho thư mục bootstrap/cache, đặc biệt khi gặp các lỗi liên quan đến quyền truy cập.

Việc gặp lỗi quyền truy cập với Laravel là rất phổ biến, đặc biệt trong các môi trường bảo mật cao như CentOS với SELinux. Thay vì tắt các tính năng bảo mật, hãy điều chỉnh cấu hình và quyền truy cập phù hợp để đảm bảo ứng dụng của bạn hoạt động trơn tru và an toàn.

Cài đặt Supervisor

Để cài đặt Supervisor trên Ubuntu, sử dụng lệnh:

sudo apt install supervisor

Nếu bạn sử dụng CentOS, cần cài đặt epel-release trước:

sudo yum install epel-release

Trên CentOS chạy trên Amazon EC2, bạn sẽ cần cài đặt epel-release thông qua Amazon Linux Extras:

sudo amazon-linux-extras install epel

Trên Windows, Supervisor có thể được cài đặt qua pip:

pip install supervisor

Cấu hình Supervisor

Thông thường, file cấu hình chính của Supervisor sẽ nằm tại /etc/supervisord.conf. Nếu file này chưa tồn tại, bạn có thể tạo mới với cấu hình mặc định bằng lệnh:

echo_supervisord_conf > /etc/supervisord.conf

Bên trong file cấu hình, phần include ở cuối cho phép bạn tách cấu hình thành nhiều file riêng biệt:

[include]
files = supervisord.d/*.ini

Tiếp theo, tạo file laravel-worker.ini trong thư mục supervisord.d với nội dung sau:

[program:laravel-worker]
process_name=%(program_name)s_%(process_num)02d
command=/usr/bin/php /var/www/html/artisan queue:work --sleep=3 --tries=3
autostart=true
autorestart=true
stopasgroup=true
killasgroup=true
user=root
numprocs=3
redirect_stderr=true
stdout_logfile=/var/www/html/storage/logs/queue.log
stopwaitsecs=3600

Trong đó:

• numprocs=3: Supervisor sẽ chạy và giám sát 3 process queue:work, tự động khởi động lại nếu có lỗi.
• command: Đảm bảo chỉ định đúng đường dẫn đến file artisan trong thư mục dự án của bạn.
• stdout_logfile: Chỉ định nơi lưu log file.

Để biết thêm chi tiết về các cấu hình, bạn có thể tham khảo tài liệu chính thức của Supervisor.

Sau khi cấu hình, khởi động các process với các lệnh:

sudo supervisorctl reread
sudo supervisorctl update
sudo supervisorctl start laravel-worker:*

Nếu gặp lỗi như sau:

error: <class 'socket.error'>, [Errno 2] No such file or directory: file: /usr/lib64/python2.7/socket.py line: 228

Điều này có nghĩa là Supervisor chưa được khởi động. Chạy lệnh sau để khởi động lại Supervisor:

sudo service supervisord restart

Kiểm tra trạng thái của các process với lệnh:

sudo supervisorctl status

Nếu kết quả hiển thị như dưới đây, Supervisor đã hoạt động thành công:

laravel-worker:laravel-worker_00   RUNNING   pid 1233, uptime 0:00:30
laravel-worker:laravel-worker_01   RUNNING   pid 1234, uptime 0:00:30
laravel-worker:laravel-worker_02   RUNNING   pid 1235, uptime 0:00:30

Cài đặt Redis cho Laravel Queue

Để sử dụng Redis làm Queue Driver cho Laravel, bạn có thể cài đặt Redis trên Ubuntu với lệnh:

sudo apt install redis-server

Trên CentOS, cần cài đặt epel-release trước khi cài Redis:

sudo yum install epel-release
sudo yum install redis

Khởi động Redis sau khi cài đặt thành công:

sudo systemctl start redis.service

Để Redis khởi động cùng hệ thống:

sudo systemctl enable redis-server

Để sử dụng Redis làm Queue Driver cho Laravel, mở file .env và chỉnh sửa như sau:

QUEUE_CONNECTION=redis

Nếu gặp lỗi sau khi sử dụng Redis:

Class 'Predis\Client' not found

Bạn cần cài đặt thư viện predis/predis bằng Composer:

composer require predis/predis

Với các bước trên, Supervisor sẽ giúp bạn giám sát và tự động khởi động lại các process của Laravel Queue, đảm bảo hệ thống luôn hoạt động ổn định và hiệu quả.

Cài Đặt Xdebug

Bước 1: Kiểm tra phiên bản PHP và cài đặt Xdebug tương ứng.

Bạn có thể kiểm tra phiên bản PHP bằng lệnh sau:

php -v

Bước 2: Cài đặt Xdebug.

Cách cài đặt Xdebug sẽ khác nhau tùy thuộc vào hệ điều hành và phiên bản PHP. Bạn có thể cài đặt Xdebug thông qua pecl:

pecl install xdebug

Hoặc nếu bạn dùng Ubuntu, bạn có thể cài đặt thông qua apt:

sudo apt-get install php-xdebug

Bước 3: Kích hoạt Xdebug trong file cấu hình PHP (php.ini).

Tìm vị trí file php.ini bằng lệnh:

php --ini

Thêm hoặc cập nhật các dòng cấu hình sau vào php.ini:

zend_extension=xdebug.so
xdebug.mode=debug
xdebug.start_with_request=yes
xdebug.client_host=127.0.0.1
xdebug.client_port=9003
xdebug.log=/tmp/xdebug.log

• xdebug.mode=debug: Kích hoạt chế độ debug.
• xdebug.start_with_request=yes: Xdebug sẽ khởi động cùng với mỗi yêu cầu.
• xdebug.client_host=127.0.0.1: Địa chỉ IP của máy client (VS Code).
• xdebug.client_port=9003: Cổng để VS Code và Xdebug kết nối (mặc định là 9003).

Cấu Hình VS Code Để Debug

Bước 1: Cài đặt extension “PHP Debug” từ Felix Becker trong VS Code.

• Mở VS Code, đi đến phần Extensions (Ctrl + Shift + X).
• Tìm kiếm “PHP Debug” và cài đặt extension.

Bước 2: Cấu hình launch.json trong VS Code.

• Mở thư mục dự án của bạn trong VS Code.
• Tạo thư mục .vscode nếu chưa có, và tạo file launch.json với nội dung sau:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Listen for Xdebug",
            "type": "php",
            "request": "launch",
            "port": 9003,
            "pathMappings": {
                "/path/to/your/php/files": "${workspaceFolder}"
            }
        }
    ]
}

• pathMappings: Chỉ định đường dẫn của mã nguồn PHP trên máy so với VS Code.

Bước 3: Đặt breakpoint trong file PHP và bắt đầu debug.

• Đặt breakpoint bằng cách nhấn vào bên trái dòng mã mà bạn muốn dừng.
• Chọn “Run and Debug” từ thanh bên trái (Ctrl + Shift + D).
• Chọn cấu hình “Listen for Xdebug” và nhấn “Start Debugging”.

Cài Đặt Xdebug Cho Ứng Dụng PHP Sử Dụng Docker Compose

Nếu bạn đang sử dụng Docker Compose để chạy ứng dụng PHP, bạn cần cấu hình Xdebug trong Docker.

Cấu Hình Docker Compose

Bước 1: Thêm Xdebug vào Dockerfile của PHP.

Trong Dockerfile, thêm các dòng sau để cài đặt và cấu hình Xdebug:

# Dockerfile
FROM php:8.1-fpm

RUN pecl install xdebug && docker-php-ext-enable xdebug

COPY ./xdebug.ini /usr/local/etc/php/conf.d/xdebug.ini

Bước 2: Tạo file xdebug.ini trong thư mục dự án (cùng cấp với Dockerfile) với nội dung:

zend_extension=xdebug.so
xdebug.mode=debug
xdebug.start_with_request=yes
xdebug.client_host=host.docker.internal
xdebug.client_port=9003
xdebug.log=/tmp/xdebug.log

• xdebug.client_host=host.docker.internal: Đảm bảo Xdebug kết nối được với VS Code trên máy host.

Bước 3: Cập nhật file docker-compose.yml.

Thêm các cổng cần thiết để Xdebug có thể kết nối với máy host:

# docker-compose.yml
services:
  php:
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - .:/var/www/html
    ports:
      - "9003:9003"
    extra_hosts:
      - "host.docker.internal:host-gateway"
    environment:
      XDEBUG_MODE: debug

Cấu Hình VS Code Để Debug Với Docker

Tương tự như phần cài đặt thủ công, bạn cần cấu hình launch.json trong VS Code:

Bước 1: Mở thư mục dự án trong VS Code.

Bước 2: Tạo thư mục .vscode nếu chưa có, và tạo file launch.json với nội dung sau:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Listen for Xdebug (Docker)",
            "type": "php",
            "request": "launch",
            "port": 9003,
            "pathMappings": {
                "/var/www/html": "${workspaceFolder}"
            }
        }
    ]
}

• pathMappings: Liên kết đường dẫn mã nguồn PHP trong container Docker với thư mục làm việc của bạn trên máy host.

Bước 3: Đặt breakpoint trong mã PHP và bắt đầu debug như đã hướng dẫn ở phần trên.

Xdebug là một công cụ tuyệt vời giúp bạn kiểm soát và phân tích mã PHP một cách hiệu quả. Việc cấu hình và sử dụng Xdebug với VS Code không quá phức tạp, dù bạn cài đặt ứng dụng PHP thủ công hay sử dụng Docker Compose. Hy vọng bài viết này giúp bạn thiết lập môi trường debug dễ dàng hơn. Nếu bạn có bất kỳ câu hỏi hoặc thắc mắc nào, đừng ngần ngại để lại bình luận dưới bài viết này!

Cài Đặt PHP-CS-Fixer với Composer

Đầu tiên, chúng ta sẽ cài đặt PHP-CS-Fixer bằng Composer. Composer là một công cụ quản lý phụ thuộc phổ biến trong PHP, cho phép bạn dễ dàng cài đặt và quản lý các package trong dự án của mình.

Bước 1: Mở terminal và điều hướng đến thư mục dự án của bạn.

Bước 2: Chạy lệnh sau để cài đặt PHP-CS-Fixer:

composer require --dev friendsofphp/php-cs-fixer

Lệnh này sẽ cài đặt PHP-CS-Fixer dưới dạng một package phát triển (--dev), giúp bạn sử dụng công cụ này mà không làm ảnh hưởng đến môi trường sản xuất.

Tạo File Cấu Hình Cho PHP-CS-Fixer

Để PHP-CS-Fixer hoạt động theo các quy tắc mà bạn mong muốn, bạn cần tạo một file cấu hình.

Bước 1: Tạo file .php-cs-fixer.php trong thư mục gốc của dự án.

Bước 2: Thêm nội dung sau vào file .php-cs-fixer.php:

<?php

use PhpCsFixer\Config;
use PhpCsFixer\Finder;

$finder = Finder::create()
    ->in(__DIR__)
    ->exclude(['vendor', 'node_modules'])
    ->name('*.php');

return (new Config())
    ->setRules([
        '@PSR12' => true,
        'array_syntax' => ['syntax' => 'short'],
        'ordered_imports' => ['sort_algorithm' => 'alpha'],
        'no_unused_imports' => true,
        'single_quote' => true,
    ])
    ->setFinder($finder);

Trong file này, chúng ta thiết lập các quy tắc định dạng mã nguồn như sử dụng chuẩn PSR-12, cú pháp mảng ngắn, sắp xếp import theo thứ tự bảng chữ cái, loại bỏ import không sử dụng, và sử dụng dấu nháy đơn. Bạn có thể tham khảo thêm các quy tắc khác tại đây.

Tích Hợp PHP-CS-Fixer với VS Code

Để tích hợp PHP-CS-Fixer vào VS Code, chúng ta sẽ sử dụng extension “PHP CS Fixer” và cấu hình nó để tự động định dạng mã nguồn khi lưu file.

Bước 1: Cài đặt extension “PHP CS Fixer” trong VS Code.

• Mở VS Code, đi đến phần Extensions (Ctrl + Shift + X).
• Tìm kiếm “PHP CS Fixer” và cài đặt extension từ junstyle.

Bước 2: Cấu hình extension “PHP CS Fixer”.

Thay vì sửa file cấu hình settings.json toàn cục, chúng ta sẽ lưu cấu hình ở mức độ dự án để dễ dàng quản lý trong VCS.

• Mở VS Code, đi đến phần Explorer, và tạo thư mục .vscode trong thư mục gốc của dự án (nếu chưa có).

• Tạo file settings.json bên trong thư mục .vscode và thêm các cấu hình sau:

    {
        "php-cs-fixer.executablePath": "./vendor/bin/php-cs-fixer",
        "php-cs-fixer.onsave": true,
        "php-cs-fixer.config": ".php-cs-fixer.php",
        "editor.formatOnSave": true,
        "[php]": {
            "editor.defaultFormatter": "junstyle.php-cs-fixer"
        }
    }
  

  • "php-cs-fixer.executablePath": Chỉ định đường dẫn đến PHP-CS-Fixer trong thư mục vendor của dự án.
  • "php-cs-fixer.onsave": Bật tính năng tự động fix code khi lưu file.
  • "php-cs-fixer.config": Đặt đường dẫn tới file cấu hình .php-cs-fixer.php.
  • "editor.formatOnSave": Bật tính năng tự động định dạng mã khi lưu file.
  • "[php]": Đặt PHP-CS-Fixer làm trình định dạng mặc định cho các file PHP.

Việc lưu cấu hình tại mức độ dự án trong thư mục .vscode giúp bạn dễ dàng quản lý và chia sẻ các thiết lập này với team thông qua VCS, đảm bảo mọi người cùng sử dụng chung một cấu hình.

Chạy PHP-CS-Fixer

Bạn có thể chạy PHP-CS-Fixer theo hai cách:

Cách 1: Chạy từ terminal

Để fix toàn bộ dự án:

./vendor/bin/php-cs-fixer fix

Để fix một file cụ thể:

./vendor/bin/php-cs-fixer fix path/to/your/file.php

Cách 2: Sử dụng phím tắt trong VS Code

• Mở file PHP mà bạn muốn fix.
• Nhấn Ctrl + Shift + I để định dạng file ngay lập tức theo các quy tắc đã cấu hình.

Với các bước trên, bạn đã cấu hình thành công PHP-CS-Fixer để tự động sửa lỗi mã nguồn trong dự án PHP của mình và tích hợp hoàn toàn với VS Code. Điều này giúp mã nguồn của bạn luôn tuân thủ các tiêu chuẩn và giảm thiểu thời gian sửa lỗi thủ công. Việc lưu cấu hình tại mức độ dự án giúp bạn dễ dàng chia sẻ và quản lý cấu hình trong đội ngũ.

Chuẩn Bị Cấu Trúc Thư Mục

Giả sử bạn có cấu trúc thư mục như sau:

/my-project
  /src
  /vendor
  /packages
    /my-local-package
      composer.json

• my-project: Thư mục dự án chính của bạn.
• packages/my-local-package: Thư mục chứa package cục bộ của bạn.

Tạo File composer.json Cho Package Cục Bộ

Trong thư mục my-local-package, bạn tạo file composer.json với nội dung cơ bản như sau:

{
    "name": "my-vendor/my-local-package",
    "description": "My local package for development",
    "type": "library",
    "autoload": {
        "psr-4": {
            "MyVendor\\MyLocalPackage\\": "src/"
        }
    },
    "require": {}
}

• name: Đặt tên cho package theo định dạng vendor/package-name.
• autoload: Khai báo cách tự động load các class từ package.

Khai Báo Package Cục Bộ Trong Dự Án Chính

Trong dự án chính (my-project), bạn mở file composer.json và thêm đường dẫn đến package cục bộ trong phần repositories và sau đó yêu cầu package này:

{
    "repositories": [
        {
            "type": "path",
            "url": "./packages/my-local-package"
        }
    ],
    "require": {
        "my-vendor/my-local-package": "*"
    }
}

• repositories: Định nghĩa repository của package cục bộ. type là path, và url là đường dẫn đến package.
• require: Yêu cầu package này trong dự án của bạn.

Cài Đặt Package

Chạy lệnh sau trong terminal để cài đặt package:

composer update

Lệnh này sẽ cài đặt package từ đường dẫn cục bộ mà bạn đã chỉ định.

Sử Dụng Chế Độ symlink Để Phát Triển Package

Để tiện lợi trong quá trình phát triển, Composer sẽ tạo một symbolic link (symlink) đến thư mục package thay vì sao chép toàn bộ code vào vendor. Điều này giúp mọi thay đổi bạn thực hiện trong packages/my-local-package sẽ ngay lập tức có hiệu lực trong dự án của bạn.

Bạn chỉ cần chắc chắn rằng phần cấu hình composer.json của package cục bộ có dạng:

{
    "name": "my-vendor/my-local-package",
    "version": "1.0.0",
    "type": "library",
    "autoload": {
        "psr-4": {
            "MyVendor\\MyLocalPackage\\": "src/"
        }
    },
    "extra": {
        "branch-alias": {
            "dev-main": "1.0.x-dev"
        }
    }
}

Kiểm Tra và Phát Triển

Bây giờ, khi bạn thay đổi code trong thư mục packages/my-local-package, bạn không cần làm gì thêm; mọi thay đổi sẽ tự động có hiệu lực trong dự án của bạn vì Composer đã thiết lập liên kết động.

Với phương pháp này, bạn có thể phát triển và kiểm tra package một cách nhanh chóng và dễ dàng. Sau khi hoàn thiện, bạn có thể public package này lên Packagist hoặc một kho lưu trữ khác mà không cần thay đổi nhiều. Việc sử dụng symlink giúp bạn giảm bớt thời gian và công sức trong việc phát triển package cục bộ.

Code HTML chi tiết

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tab Active Timer with requestAnimationFrame</title>
</head>
<body>
  <h1>Tab Active Timer</h1>
  <p id="timer">Time left: 60 seconds</p>

  <script>
    const countdownDuration = 60 * 1000;

    let startTime = 0;
    let elapsedTime = 0;
    let lastTimestamp = 0;
    let isActive = true;
    const timerElement = document.getElementById('timer');

    function updateTimer(timestamp) {
      if (isActive) {
        if (lastTimestamp) {
          elapsedTime += timestamp - lastTimestamp;
        }
        lastTimestamp = timestamp;

        const remainingTime = countdownDuration - elapsedTime;
        if (remainingTime <= 0) {
          timerElement.textContent = 'Time is up!';
          return;
        }

        const seconds = Math.ceil(remainingTime / 1000);
        timerElement.textContent = `Time left: ${seconds} seconds`;

        requestAnimationFrame(updateTimer);
      }
    }

    function startTimer() {
      isActive = true;
      lastTimestamp = performance.now();
      requestAnimationFrame(updateTimer);
    }

    function stopTimer() {
      isActive = false;
    }

    document.addEventListener('visibilitychange', () => {
      if (document.visibilityState === 'visible') {
        startTimer();
      } else {
        stopTimer();
      }
    });

    startTimer();
  </script>
</body>
</html>

Giải Thích

1. Cài Đặt Thời Gian Đếm Ngược:
   • Biến countdownDuration được thiết lập cho thời gian đếm ngược (60 giây trong ví dụ này).
2. Hàm updateTimer:
   • Hàm này được gọi liên tục bởi requestAnimationFrame. Nó tính toán thời gian còn lại và cập nhật nội dung của phần tử hiển thị đồng hồ.
3. Bắt Đầu và Dừng Đồng Hồ:
   • startTimer bắt đầu đếm ngược và stopTimer dừng đếm ngược khi người dùng chuyển tab.
4. Sự Kiện visibilitychange:
   • Khi người dùng chuyển tab, đồng hồ sẽ dừng lại. Khi người dùng quay lại, đồng hồ sẽ tiếp tục đếm ngược từ thời điểm trước khi chuyển tab.

Với đoạn mã này, bạn có thể tạo một đồng hồ đếm ngược hoạt động chính xác ngay cả khi người dùng chuyển đổi giữa các tab trong trình duyệt.