Top Ad unit 728 × 90

Xây dựng giao diện của trang tin tức

Chào các bạn!
Hôm nay chúng ta cùng nhau đi xây dựng giao diện của trang tin tức nhé!

Trước tiên chúng ta lên trang chủ của codeigniter để tải bộ code của CI về, hiện tại trên trang chủ của CI mới có bản 3.x chưa phát hành bản 4 nên chúng ta sẽ thực hiện dự án này trên bản 3 nhé! Và  nếu trong quá trình thực hiện mà CI cập nhật lên bản 4 thì mình sẽ cập nhật theo nhé! Thực hiện tải tại đây


xem thêm: Tìm hiểu codeigniter (phần 2)



Giải nén tệp tin đó xong các bạn đổi tên tệp tin thành dự án của các bạn và copy vào htdocs của xampp (www của wampserver). Ở đây mình dùng xampp và đổi tên thành tintuc24h nhé!

Trước khi làm việc chúng ta thực hiện cấu hình một vài thông số để dễ dàng làm việc nhé! Trong CI mặc định khi link đến một function nào đều phải qua trang index.php nếu muốn loại bỏ index.php trên url thì chúng ta cần tạo thêm một file .htaccess ngang hàng với file index.php với nội dung như sau:

RewriteEngine on
RewriteCond $1 !^(index\.php|resources|robots\.txt)
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php?$1 [L,QSA]
Tiếp đến chúng ta đi cấu hình đường dẫn trong CI nhé! Các bạn vào \application\config\config.php và tìm đến dòng
$config['base_url'] = '';
và dán dòng như sau: http://localhost/tintuc24h/, các bạn nhớ thay tintuc24h các bạn thay thế bằng tên dự án của các bạn nhé!

Thêm một cái nhỏ nữa là các bạn vào file autoload.php để thực hiện load những thư viện và helper cần thiết nhé!

Vậy là xong phần cấu hình bây giờ chúng ta sẽ bắt đầu vào xây dựng giao diện. Giao diện ở đây thì mình sẽ lấy ở trên mạng cho nhanh, còn các bạn có thể tự tay thiết kế một giao diện dành riêng của mình. Mình sử dụng giao diện TRENDY BLOG
Các bạn tạo folder public ngang hàng với file index.php đây sẽ là nơi chứa các file css và js của cả dự án
Sau khi tạo xong folder để chứa các file css và js xong các bạn vào application/view và tạo folder admin và folder site.
- Folder admin là nơi chứa giao diện của trang quản trị (ở đây mình chưa làm giao diện của admin nhé!).
- Folder site là nơi chứa giao diện của trang người dùng.

Các bạn vào folder site vừa tạo các bạn tạo thêm các file và folder với các chức năng sau: 
  • file: head.php có chức năng chứa các link css, js, header.php có chức năng chứa menu dùng chung trong giao diện, layout.php có chức năng khởi chạy đầu tiên khi người dùng truy cập đến trang của các bạn, footer.php chứa giao diện của nội dung dưới cuối trang.
  • folder: home chứa giao diện của trang chủ, content chứa các giao diện của trang thể loại và trang xem chi tiết.

Sau khi các bạn tạo xong các file và folder như vậy xong thì các bạn chỉ cần copy code trong tệp giao diện vừa tải ở trên vào các file cần thiết.

Các bạn chú ý thêm trong CI lấy link tuyệt đối không lấy link tương đối nên các bạn cần thay đổi link css, js và ảnh từ tương đối trở thành tuyệt đối.

Và để cho dễ dàng tạo link tuyệt đối cho các file css, js và ảnh các bạn vào folder helpers tạo file common.php, trong file đó các bạn tạo 1 function với nội dung như sau:

function public_url($url = '')
{
    return base_url('public/'.$url);
}
và đặt mặc định load trong file autoload.php.

Vậy là chúng ta đã cùng nhau đi xây dựng xong giao diện của người dùng. Mình cũng dừng bài học ngày hôm nay tại đây!
Nếu các bạn thấy hay nhớ like, share ủng hộ mình để mình có thêm động lực làm những bài tiếp theo hay hơn! Mình cảm ơn các bạn! Chúc các bạn thành công nhé!

Tải giao diện TRENDY BLOG

Xây dựng giao diện của trang tin tức Reviewed by Thế Giới Tri Thức on tháng 9 25, 2017 Rating: 5

Không có nhận xét nào:

All Rights Reserved by THẾ GIỚI TRI THỨC © 2018
Thiết kế bởi: THẾ GIỚI TRI THỨC

Biểu mẫu liên hệ

Tên

Email *

Thông báo *

Được tạo bởi Blogger.