2. Trước tiên mình muốn thông nhất với mọi người những điểm
sau:
1. Bài này và các bài lần sau chúng ta vẫn tiếp tục xây dựng và
thao tác trên cùng 1 website mà chúng ta đã tạo trong bài
tập về nhà của buổi 02. Cũng như là trên 1 cơ sở dữ liệu duy
nhất đó.
2. Mọi người cấu trúc và đặt tên một cách thống nhất theo
hướng dẫn của người dạy. Cụ thể là cách cấu trúc và đặt tên
các folder, file, các thẻ html, tên các class, id, tên các biến,
tên các bảng, các cột trong cơ sở dữ liệu. Việc này sẽ giúp dễ
dàng cho người dạy cũng như là mọi người sẽ dễ dàng giúp
đỡ nhau trong quá trình học tập. Đây là vấn đề khuyến
khích, còn ai tự có thiết kế thì cứ tùy thích theo kiểu của
riêng mình.
Dưới đây là kết quả của bài tập về nhà lần trước: file index.php.
Mọi người hãy chỉnh sửa sao cho trông nó giống thể này (bấm
vào link để xem):
https://onedrive.live.com/redir?resid=8A624474D96FB459!107
027&authkey=!AI4JiOm6-NSzScU&ithint=file%2cphp
3. Bây giờ mọi người hãy cẩn thận thực hiện theo các bước
sau đây:
1. Trong thư mục css hãy tạo 1 file có tên front.css. Và
chắc chắn rằng trong thẻ head của file index.php có
dòng này <link rel="stylesheet"
href="css/front.css">
2. Nếu các bạn đã dùng css trong thẻ style của index.php
thì hãy cắt nó vào file front.css.(chú ý khi cắt vào file
css thì không dùng thẻ style nữa).
3. Bây giờ chúng ta sẽ thực hiện thêm Menu cho trang
web. Trong thẻ header của index.php mọi người thêm
đoạn code sao cho thẻ header trông giống thế này:
4. <header>
<span>Header goes here</span>
<ul id="main-nav">
<li><a href="index.php?page=home">Home</a></li>
<li><a href="index.php?page=member-list">Members List</a></li>
<li><a href="index.php?page=about">About</a></li>
<li><a href="index.php?page=login">Login</a></li>
</ul>
</header><!-- / header -->
Tức là chúng ta đã tạo được một Menu cho trang, mọi người có thể css cho nó tùy ý
ở trong file front.css.
Ở đây chúng ta đã thực hiện phương pháp truyền biến đi biến page với các giá trị
khác nhau theo link tương ứng.
5. 4. Tạo 1 file có tên header.php cùng cấp với file
index.php. Cắt toàn bộ nội dung của thẻ <header>
(kể cả mở và đóng thẻ) trong index.php, copy sang
sang file header.php. Thêm dòng này vào chỗ vừa bị
cắt trong file index.php: <?php
include('header.php') ?>
5. Tương tự, tạo 1 file có tên footer.php sau đó cắt
toàn bộ nội dung của thẻ <footer> trong file
index.php rồi copy sang file footer.php mới tạo.
Thêm dòng này vào chỗ vừa bị cắt trong file
index.php: <?php include('footer.php') ?>
6. Tương tự, tạo 1 file có tên content-left.php sau đó
cắt toàn bộ nội dung của thẻ <div id=“content-left”>
trong index.php rồi copy sang file content-left.php.
Thêm dòng này vào chỗ vừa bị cắt trong file
index.php: <?php include('content-left.php')
?>
6. 7. Bây giờ tạo 1 file home.php với nội dung gồm 1 thẻ
<h3> và 1 thẻ <p>. Có thể trông như thế này:
<h3>Welcome to Coder Of Summer 2014</h3>
<p>Some text goes here. Lorem ipsum dolor sit
amet, consectetur adipisicing elit. Similique,
placeat, facere! Culpa autem nam provident
nostrum, consectetur laboriosam est blanditiis
enim quia nesciunt quasi praesentium eum sed
iure corrupti. Quidem!</p>
7. 7. Tạo 1 file có tên about.php nội dung gồm 1 thẻ <h3> và
1 thẻ <p>. Có thể trông như thế này:
<h3>About Coder Of Summer 2014</h3>
<p>Some text goes here. Lorem ipsum dolor sit
amet, consectetur adipisicing elit. Sit modi
quaerat minus dignissimos molestiae eius nihil
vitae. Vero nulla sunt quo rerum laboriosam
impedit quos, eaque deserunt natus, adipisci
similique.</p>
8. 8. Tạo 1 file có tên là login.php với nội dung sau:
<h3>Login to Coder Of Summer 2014</h3>
<form action="" method="post">
<label for="name">Name:</label>
<input type="text" name="name">
<label for="pass">Password:</label>
<input type="password" name="pass">
<input type="submit" value="Login">
</form>
9. 9. Tạo 1 file member-list.php bên trong có nội dung là
<h3>Members list of Group</h3>. Chuyển
sang file index.php cắt toàn bộ nội dung của thẻ
<table> rồi copy sang sang file member-list.php vừa
tạo (dán ngay xuống bên dưới thẻ h3 lúc nãy)
10. Quan trọng! Bây giờ mọi người có thể thấy trong
thẻ <div id="content-right"> của file index.php không
có nội dung. Chúng ta hãy thêm nội dung vào trong
thẻ đó để cuối cùng ta có 1 file index.php trông giống
thế này:
https://onedrive.live.com/redir?resid=8A624474D96F
B459!107028&authkey=!AIOgsSpm3jWlUW8&ithint=f
ile%2cphp
10. Còn đây là hình ảnh thư mục website:
Bây giờ hãy chạy lại website của bạn và thử bấm vô các link.
Mình muốn mọi người hoàn chỉnh các yêu cầu vừa rồi thật
chính xác để bài sau chúng ta bắt đầu được tốt hơn và học
được nhiều hơn