Hướng dẫn làm web php
|
Trong hướng dẫn này mình chỉ hướng dẫn tạo ra một trang web đơn giản. Vì thế nên CSDL mình sẽ tạo ra 3 bảng đơn giản như sau: Bảng user: lưu trữ thông tin đăng nhập của người dùng 
Bảng category: Lưu trữ các danh mục của bài viết
Bảng post: Lưu các thông tin về một bài đăng.
Như vậy mình đã có Database rồi. Các bảng này mình thiết kế đơn giản, không theo chuẩn và mình cũng không phân tích kỹ. Nếu các bạn làm một dự án nghiêm túc mình khuyên các bạn nên bỏ thời gian để nghiên cứu kỹ về CSDL vì nó ảnh hưởng rất nhiều sau này. Và bây giờ chúng ta sẽ tiến hành xây dựng cấu trúc folder cho website.
Tạo các action trong PHPĐầu tiên mình cần lấy biến action trong file index. Bạn mở file index và code như sau: biến này được lấy ở đâu?, chính là trên URL của browser. Bạn thử gõ vào đường dẫn: http://localhost/hocphp/?action=post. Sau đó thêm đoạn echo trong file index.php như sau: echo $action;kết quả bạn nhận được sẽ là một từ post. Bây giờ chúng ta đã biết được chúng ta cần xử lý một action post. Code đoạn sau vào file index.php. Đầu tiên mình sẽ tạo ra một biến $path để lưu đường dẫn đến cái file action cần xử lý. Sau đó thì mình sẽ kiểm tra xem file đó có tồn tại hay không. Và mình sẽ sử dụng hàm require để require file đó vào. Cũng với đường dẫn http://localhost/hocphp/?action=post bạn mở file post.php trong thư mục action và thêm vào dòng bất kỳ, F5 lại bạn sẽ thấy kết quả. Tương tự như vậy, nếu gọi ?action=cat thì nó sẽ gọi vào file cat.php. Và nếu không có biến action thì mặc định nó sẽ require action home. Bạn có thể thêm một file 404.php trong action để thay thế cho cái echo nếu action tìm là không thấy. Thông thường thì hàm isset($_GET['action']) ? $_GET['action'] : false; sẽ được sử dụng rất nhiều nên mình sẽ tạo ra một hàm và chỉ truyền key vào thôi. Bây giờ bạn mở file site.php trong thư mục sys ra và code đoạn sau vào, Mình tạo luôn cả việc lấy biến POST nhé. Cuối cùng bạn chỉnh sửa lại file index như thế này: Các mục ở trên mình đã chú thích lại rồi đấy. Tiếp theo mình sẽ đưa các Widget vào các action. Công việc này cũng đơn giản như việc viết theme cho WordPress vậy. Bây giờ bạn tiếp tục mở file site.php và viết các hàm như sau: function head() { require('site/widget/header.php'); } function footer() { require('site/widget/footer.php'); } function content($name) { require('site/widget/'.$name.'-content.php'); }Các hàm này đơn giản chỉ là require vào các widget tương ứng, trong hàm content mình cần truyền tên content để xác định là content nào. Bây giờ bạn có thể mở file home.php ở file action và gõ đoạn sau vào. Vậy là xong trang chủ. bạn muốn design cho nó thì mở từng widget lên để chỉnh sửa nhé, Nó tương tự như cắt html cho theme WordPress vậy. Bổ sung: tuy nhiên bây giờ nếu bạn truy cập thẳng vào các file như thế này “http://localhost/hocphp/site/action/cat.php” sẽ sinh ra lỗi ngay. lý do là hằng SYSPATH mình khai báo ở file index.php, nhưng khi truy cập thẳng thì nó không thông qua file này và hằng SYSPATH không được khởi tạo. Để khắc phục điều này trong file action và widget mình sẽ thêm đoạn này vào đầu. if (!defined ('SYSPATH')) header("Location:../../index.php");Nó sẽ đưa về trang index nếu hằng syspath chưa tồn tại. Thật ra bạn không cần thêm vào các file widget đâu. Như vậy chúng ta có được một cấu trúc folder rồi. Bây giờ mình sẽ làm việc với CSDL để lấy dữ liệu lên các action và widget. Xem tiếp phần 2 tại đây: Hướng dẫn viết một website PHP căn bản từ A-Z (p2)
Sau khi đã trải qua những bài học cơ bản về PHP, thì hôm nay mình sẽ hướng dẫn các bạn tạo website bằng PHP. Trong loạt bài viết này, mình sẽ hướng dẫn các bạn tạo website bằng PHP với chủ đề website tin tức đơn giản. Nội dung của loạt bài viết tạo website bằng PHP bao gồm tổng quát nội dung như sau :
THIẾT KẾ GIAO DIỆN WEBSITEĐể có thể tạo website bằng PHP, đầu tiên mình sẽ hướng dẫn các bạn thiết kế giao diện website. Giao diện website chính là thành phần sẽ hiển thị ra bên ngoài người dùng và có thể thấy được bằng mắt. Chẳng hạn như các bạn nhìn vào website https://kungfuphp.com sẽ thấy menu, chuyên mục, bài viết, màu sắc,…tất cả những thứ này gộp chung lại gọi lại giao diện website Giao diện website được tạo nên bằng ngôn ngữ thiết kế web như là : HTML, CSS, Javascript,.. Ok, chúng ta đã nắm sơ về khái niệm giao diện website rồi. Giờ thì bắt tay vào thiết kế nào ! 1. Tạo cấu trúc thư mụcTrước tiên, chúng ta cần phải tạo cấu trúc thư mục để chứa mã nguồn website tin tức. Cấu trúc thư mục mã nguồn của chúng ta sẽ giống như sau đây: Trong thư mục gốc của website, ta tạo 1 folder đặt tên là website. Trong thư mục website này sẽ bao gồm:
2. Thiết kế giao diện websiteTrong file index.php, các bạn chèn nội dung sau : Header...HeadingThis, too, will pass. If the facts don't fit the theory, change the facts. The past has no power over the present moment.HeadingThe most important moment of your life is now. The most important person in your life is the one you are with now, and the most important activity in your life is the one you are involved with now. The past has no power over the present moment. HeadingThe most important moment of your life is now. The most important person in your life is the one you are with now, and the most important activity in your life is the one you are involved with now. The smaller your reality, the more convinced you are that you know everything. This, too, will pass. Peace comes from within. Do not seek it without. HeadingThe most important moment of your life is now. The most important person in your life is the one you are with now, and the most important activity in your life is the one you are involved with now. You will not be punished for your anger, you will be punished by your anger. The past has no power over the present moment. You will not be punished for your anger, you will be punished by your anger. HeadingThe most important moment of your life is now. The most important person in your life is the one you are with now, and the most important activity in your life is the one you are involved with now. Peace comes from within. Do not seek it without. This, too, will pass. You will not be punished for your anger, you will be punished by your anger. The smaller your reality, the more convinced you are that you know everything. If the facts don't fit the theory, change the facts. The past has no power over the present moment. Sau đó, các bạn vào trình duyệt, chạy đường dẫn : http://localhost/website/index.php , các bạn sẽ thấy được giao diện hiển thị như sau: Như vậy là chúng ta đã hoàn thành thiết kế giao diện tổng quát. Tiếp theo chúng ta sẽ làm thực hiện phân tác bố cục file index vào các file con 3. Phân tách bố cục file index.php vào các file conĐể có thể tạo website bằng PHP dễ bảo trì về sau, chúng ta cần phải phân tách bố cục file. Mục đích của việc chia nhỏ file index.php vào các file con là để dễ dàng và thuận tiện quản lý code sau này. Hãy tưởng tượng nếu toàn bộ code đặt toàn bộ trong file index.php trên thì mỗi lần bạn quay lại sửa 1 cái gì đó thì sẽ rối rắm, nhức đầu. Đó sẽ là 1 cơn ác mộng. Ta tiến hành chia nhỏ file index.php thành các phần như sau:
Trong file index.php đã tạo ở trên, các bạn cắt toàn bộ đoạn code như sau : Header...toàn bộ đoạn code đã cắt này, các bạn bỏ vào file header.php và save lại. Trong file index.php, các bạn cắt (ctrl + x) toàn bộ đoạn code như sau : và bỏ vào file footer.php, rồi save lại. c. Chỉnh sửa lại file index.phpSau khi đã cắt đi 2 phần code của trang index.php, lúc này bạn cần phải include 2 thành phần đã cắt đó vào, sử dụng 2 đoạn mã dưới đây bỏ vào đầu và cuối file index.php Lúc này bạn sẽ được file index.php có nội dung như sau : HeadingThis, too, will pass. If the facts don't fit the theory, change the facts. The past has no power over the present moment.HeadingThe most important moment of your life is now. The most important person in your life is the one you are with now, and the most important activity in your life is the one you are involved with now. The past has no power over the present moment. HeadingThe most important moment of your life is now. The most important person in your life is the one you are with now, and the most important activity in your life is the one you are involved with now. The smaller your reality, the more convinced you are that you know everything. This, too, will pass. Peace comes from within. Do not seek it without. HeadingThe most important moment of your life is now. The most important person in your life is the one you are with now, and the most important activity in your life is the one you are involved with now. You will not be punished for your anger, you will be punished by your anger. The past has no power over the present moment. You will not be punished for your anger, you will be punished by your anger. HeadingThe most important moment of your life is now. The most important person in your life is the one you are with now, and the most important activity in your life is the one you are involved with now. Peace comes from within. Do not seek it without. This, too, will pass. You will not be punished for your anger, you will be punished by your anger. The smaller your reality, the more convinced you are that you know everything. If the facts don't fit the theory, change the facts. The past has no power over the present moment. Trong file header.php của chúng ta lúc này, các bạn sẽ thấy chứa đoạn mã css, chúng ta sẽ tiếp tục cắt toàn bộ đoạn mã css này vào file style.css. Các bạn cắt toàn bộ đoạn mã sau trong file header.php body { margin:0; padding:0; font-family: Sans-Serif; line-height: 1.5em; } header { background: #ccc; height: 100px; } header h1 { margin: 0; padding-top: 15px; } main { padding-bottom: 10010px; margin-bottom: -10000px; float: left; width: 100%; } nav { padding-bottom: 10010px; margin-bottom: -10000px; float: left; width: 230px; margin-left: -230px; background: #eee; } footer { clear: left; width: 100%; background: #ccc; text-align: center; padding: 4px 0; } #wrapper { overflow: hidden; } #content { margin-right: 230px; /* Same as 'nav' width */ } .innertube { margin: 15px; /* Padding for content */ margin-top: 0; } p { color: #555; } nav ul { list-style-type: none; margin: 0; padding: 0; } nav ul a { color: darkgreen; text-decoration: none; }và bỏ vào file style.css, đồng thời sửa lại file header.php 1 chút như sau : Header...Giờ thì các bạn vào trình duyệt, chạy lại đường dẫn http://localhost/website/index.php . Bạn sẽ thấy trang index.php không có gì thay đổi như ban đầu, nhưng lúc này các đoạn mã trong file index.php đã được chia thành các file con nhỏ hơn. Rất thuận tiện để chúng ta có thể code và mở rộng sau này. Điều này rất quan trọng, vì nếu ngay từ bây giờ chúng ta không chia nhỏ các thành phần của website ra thì sau này, trong quá trình tạo website bằng PHP các bạn sẽ gặp rất nhiều khó khăn và rối rắm. Tổng KếtVậy là mình đã hướng dẫn các bạn xong cách tạo giao diện website tin tức, bài viết đầu tiên của loạt bài tạo website bằng PHP. Bài kế tiếp chúng ta sẽ tiếp tục tạo cơ sở dữ liệu cho website. Chúc các bạn học tốt ! Mình là Hiếu. Người sáng lập ra blog Kungfu PHP chia sẻ mọi thứ về tiền điện tử, mmo, lập trình,… Một câu nói mà mình rất thích đó là “Cuộc đời chỉ có một, vì thế hãy làm những gì khiến bạn hạnh phúc và ở bên người khiến bạn luôn mỉm cười”. Hy vọng nơi đây là góc cafe nhỏ để chúng ta có thể trao đổi, cùng nhau phát triển. ►Nếu bạn thấy bài viết bạn đang đọc hữu ích, hãy mời mình một ly cafe nhé : https://kungfuphp.com/donate |
