Tiếp theo ở series Cakephp này mình xin chia sẽ cách thực hiện hoàn chỉnh một website đọc truyện tranh từ a–>z, cái này do mình tự làm nên có thể có nhiều thiếu sót, ai phát hiện thì nói mình biết để bổ sung lại cho hoàn chỉnh.
Đương nhiên nó là trên CakePHP version mà mình đã hướng dẫn ở 21 bài trước, phiên bản mới hơn nếu có thời gian mình sẽ tìm hiểu sau.
Ở cuối mỗi phần mình sẽ đưa source code, nhưng mình khuyên là các bạn chỉ nên tham khảo thôi, và hãy tự mình đánh từng dòng code để có thể nhớ lâu hơn.
Và bây giờ sẽ là điều chuẩn bị.
- Source code nguồn của CakePHP 2.7.2 có thể cao hơn nhưng không lên 3.0 nhá, cách setup thì các bạn xem lại bài 2
- Mình đặt tên tên thư mục là doctruyen, url chạy là doctruyen.local
- Vào phpmyadmin tạo một CSDL là doctruyendoctruyen
- Tiến hành kết nối CSDL là chạy website lên.
Khi bạn thấy được màn hình này là có thể tiến hành các bước tiếp theo
Như các dự án làm website thì phải có ít nhất 2 phần front end và back end, mình sẽ làm cả 2 phần này nhưng đầu tiên chúng ta cần có các template
A. Template admin:
Các bạn lên google search từ khoá “template admin html” sẽ có rất nhiều để bạn lựa chọn đương nhiên là những cái miễn phí thui. Ở đây mình chọn template SB Admin 2, download về rồi giải nén, copy vào thư mục /app/webroot/template_admin/ trong thư mục này có đầy đủ html, css, js đầy đủ cho chúng ta thực hiện một trang quản trị tuyệt vời.
1 – Đầu tiên chúng ta mở file /app/Config/core.php, chúng ta sẽ thấy đoạn
[php]
Configure::write(‘Routing.prefixes’, array(‘admin’));
[/php]
hãy bỏ dấu // phía trước để mở cấu hình cho trang admin
Tiếp theo là file /app/Config/routes.php(đây là file để ta chỉnh sửa các url web ta nhìn đẹp và dễ seo hơn), thêm đoạn sau vào để hướng trang admin đến controller và view cần thiết(chú ý là thêm ở khoảng giữa file đừng thêm cuối cùng nếu đúng phiên bản nó nằm ở line 28 đến 37 là được)
[php]
Router::connect(‘/admin’, array(‘controller’ => ‘users’, ‘action’ => ‘login’, ‘admin’=>true));
[/php]
Bây giờ các bạn chạy thử url http://doctruyen.local/admin, nó sẽ báo lỗi Error: UsersController could not be found. nếu vậy là đúng rồi các bạn tiếp tục bước sau(chú ý là chúng ta chạy host giả lập trên local nên khi chạy đường dẫn trên có thể chrome nó sẽ tự động tìm kiếm=> cách khắc phục là thêm dấu / vào sau chữ admin nó sẽ thành http://doctruyen.local/admin/).
Với lỗi như trên vì chúng ta chưa có tạo controller users nên khi trỏ đường dẫn admin vào nó ở file routes.php sẽ nhận lỗi này, giờ chúng ta sẽ tạo controller users, view users, model user luôn nhá. Cách tạo những cái này thì những bài trước đã có rồi các bạn có thể xem lại.
Liên quan đến model thì sẽ có cơ sở dữ liệu, trước mắt sẽ có bảng users, mình sẽ đính kèm file ở cuối bài, bảng users này đơn giản chỉ cần username và pass để đăng nhập vào trang quản trị.
UsersControllers.php: tạo một action admin_login() nó sẽ tự động gọi file /app/View/Users/admin_login.ctp, nhớ là khi có admin thì nó sẽ gọi file có tên là admin, vì chúng ta đã cấu hình ở bước trên cùng rồi. Nếu sau này chúng ta có nhu cầu viết một trang login ở ngoài không phải trang admin thì action sẽ là login() và nó sẽ tự động gọi đến file /app/View/Users/login.ctp.
admin_login.ctp: nội dung nó tạm thời sẽ là text “Trang Login”.
Tiến hành chạy lại thử url trên xuất hiện chữ Trang Login là chúng ta thành công.
Nhìn trên màn hình hiện tại thì chỉ có chứ trang login là của chúng ta còn lại đều là template mặc định của CakePHP, bây giờ chúng ta sẽ tiến hành thay đổi nó thành của mình:
a. Đầu tiên các bạn hãy vào thư mục /app/View/Layouts/, copy file default.ctp thành file mới là admin.ctp và hãy thử thêm một đoạn text “Page New Admin“, và vào UsersController.php thêm đoạn var $layout = ‘admin’; vào trước function beforeFilter, mục đích của nó là khai báo lại layout khi chay vào controller users, bây giờ chạy lại url xem có thay đổi gì không? Sự thay đổi này chính là sự thành công trong việc đổi layout khác của CakePHP rồi.
b. Bây giờ quay lại template admin chúng ta đã tải về, các bạn có thể vào trực tiếp thư mục đó và chạy file index.html để xem mẫu admin chúng ta thế nào, theo mình thì rất ok ^^:
Chúng ta có thể thấy file login.html trong thư mục pages, mở nó lên và copy toàn bộ vào admin.ctp, chạy lại url sẽ không còn template của CakePHP nữa thay vào đó sẽ là các html chúng ta vừa copy, bây giờ sẽ sửa lại cái css và js cho nó đẹp nhá. Nếu các bạn để ý file default.ctp chúng ta sẽ không thấy nó gọi trực tiếp file css hay js nào nhưng thực chất là có, nó làm mặc định là thông qua helper Html để sử dụng, ở đây mình không làm theo nó là sẽ sử dụng element để gọi css, js, head, footer, content… mỗi loại một file để khi cần thay đổi sẽ vào thư mục element thay đổi là được, cách nào cũng ok không khác nhau đâu(cách này cũng có thể sử dụng cho front-end)
Tạo thư mục admin trong /app/View/Elements/admin và các file sau trong thư mục này: head.ctp, footer.ctp, navigate.ctp
head.ctp: nội dung nó chính là thẻ head trong admin.ctp, các bạn cắt toàn bộ qua, thay thế đoạn sau đây vào vị trí thẻ head vừa cắt: <?php echo $this->element(‘admin/head’);?>, quay lại file head.ctp sửa lại cho đúng đường dẫn đến file css, js, có thể sử dụng đường dẫn trực tiếp đến file trong template_admin nhưng mình khuyên dùng cách của CakePHP, nếu các bạn làm giống mình thì đoạn css của CakePHP như sau:
[php]
<?php
echo $this->Html->css(array(
‘../template_admin/vendor/bootstrap/css/bootstrap.min’,
‘../template_admin/vendor/metisMenu/metisMenu.min’,
‘../template_admin/dist/css/sb-admin-2’,
‘../template_admin/vendor/font-awesome/css/font-awesome.min’
));
?>
[/php]
Đến đây nếu các bạn load lại trang và css đúng thì trang login nhìn đã đẹp rồi. Trong file admin.ctp phần cuối file có các file js, chúng ta sẽ chuyển nó lên file head.ctp luôn. Cách sử dụng file js trong CakePHP như sau: copy đoạn sau dán vào phía dưới đoạn css ở trên
[php]
<?php
echo $this->Html->script(array(
‘../template_admin/vendor/jquery/jquery.min’,
‘../template_admin/vendor/bootstrap/js/bootstrap.min’,
‘../template_admin/vendor/metisMenu/metisMenu.min’,
‘../template_admin/dist/js/sb-admin-2’
));
?>
[/php]
Các bạn có thể thấy với các file css và js thì chúng ta có thể bỏ đi phần mở rộng của file nó vẫn hiểu(nếu ghi luôn cũng không có gì sai)
Phần còn lại ở admin.ctp là nội dung html trong thẻ <body>, các bạn cắt toàn bộ html và dán vào file /app/View/Users/admin_login.ctp và thay thế nội dung đó bằng đoạn sau trong file admin.ctp
[php]
<?php echo $this->fetch(‘content’);?>
[/php]
Đây là cách mà CakePHP lấy nội dung trong các view để đưa vào layout và hiển thị lên, cái này không cần hiểu đâu chỉ cần biết vậy là ok rồi.
Đến đây chạy lại url sẽ được kết quả như sau:
Phần này đến đây thui, bài tiếp theo sẽ là phần login vào trang quản trị admin và thay đổi layout các file trong template. Các bạn có thể tải toàn bộ code bên dưới có cả table users cần thiết để đăng nhập cho bài sau
[create_button_post thamso1=” thamso2=’Demo’ thamso3=’http://nongdanit.info/download/cakephp/bai22/doctruyen.zip’] [/create_button_post]
[thongbao]
- Nếu có thắc mắc gì các bạn để lại comment bên dưới mình sẽ trả lời sớm nhất có thể.
- Cảm ơn các bạn đã đọc.
[/thongbao]