Coder Of Summer 2014

PHP MYSQLI – Lesson 3 - Online

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!107027&authkey=!AI4JiOm6-NSzScU&ithint=file%2cphp

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:

<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.

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') ?>

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. 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. 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. 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=8A624474D96FB459!107028&authkey=!AIOgsSpm3jWlUW8&ithint=file%2cphp

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

Trang Đinh Văn,Thanks for you attention!