Hướng dẫn xây dựng trang web bằng PHP và Bootstrap

Code single.php

– Tiếp theo tạo 1 file là single.php để hiện nội dung bài viết cụ thể khi nhấp chuột và

Code file

seo_friendly.php

– Code sidebar.php

File. htaccess

để tạo đường dẫn thân thiện với SEO

RewriteEngine on
RewriteRule ^post/(.*).html$ ./single.php?url=$1

Code footer.php

Code file connect.php

Code file style.css

( Nằm trong thư mục include / css )

* { margin: 0; padding: 0; } body { font-family: Arial; } .jumbotron { margin: 0!important; } .header { width: 100%; height: 50px; background-color:#23384e; position: relative; margin-bottom: 10px; box-shadow: 0 0 15px rgba(0,0,0,0.6); padding-top: 10px; } .header img { float: left; position: absolute; left: 0; margin-left: 5px; } .header input { background: #fff; border: 0 none; color: #807E7E; height: 38px; line-height: 26px; font-size: 14px; margin: 0 0 0 12px; outline: medium none; padding: 6px 14px; width: 500px; border-radius: 2px; box-shadow: 0 0 1px rgba(0,0,0,0.6); font-family: inherit; float: right; margin-right: 5px; } .navbar-header { width: 100%; height: 30px; padding: 10px 0; } .navbar-header li { display: inline-block; float: left; margin-right: 20px; padding: 5px; } .navbar-header li a { color: #ffffff; text-decoration: none; } .main { width: 100%; } .col-sm-8 {padding: 0!important; } div.baiviet{ } .baiviet { overflow: auto; box-shadow: 0 0 5px #000; padding: 10px; border: 1px solid green; } .baiviet a { text-decoration: none; } .baiviet img{ width: 50%; height: 200px; float: left; margin: 0 20px 20px 0; } .baiviet h1 { display: inline; line-height: 32px; font-size: 25px; } .baiviet p { line-height: 32px; font-size: 16px; margin-bottom: 20px; } .col-sm-4 { margin: 0!important; } .col-sm-4 img {height:182px} .baivietmoi { } .baivietmoi img { float: left; margin: 0 10px 10px 0; width: 100px; height: 90px; clear: both; box-shadow: 0 0 5px #000; } .baivietmoi h1 { font-size: 18px; } .register { width:100%; } .register input { width: 100%; margin-bottom: 10px; height: 20px; padding: 15px; } .chapters{ width: 100%; } .jumbotron { position: relative; } .jumbotron .appeal { font-size: 17px; background: #1ebba3; color: #fff; width: 100%; } .jumbotron h2 { position: absolute; top: 100px; } .posts { clear: both; }

Ok như vậy là đã xong phần Front-end rồi !

II/ Xây dựng phần backend để thêm dữ liệu là bài viết

Bước 1 : Trước tiên bạn sẽ tạo thư mục admin như trong hình để làm trang admin bằng php

Bước 2: Tạo trang thêm bài viết trong PHP (Nhấp vào liên kết để đọc)

Bước 3 : Truy cập vào link localhost / project1 / admin / posts_add. php để thêm bài viếtCuối cùng load lại địa chỉ localhost / project1 / để xem thành quả nhé !

Lời kết: Trên đây là bài viết hướng dẫn tạo website tin tức bằng PHP và Bootstrap. Hi vọng qua bài viết này sau khi đọc xong bạn có thể tự tạo cho mình website với PHP.

Ngoài ra cũng đừng quên đọc thêm các bài viết hướng dẫn học lập trình php cơ bản tới nâng cao tại Quach Quynh blog nhé!

Ngoài ra bạn cũng nên tìm hiểu thêm thêm về cách tự tạo Framework bằng PHP thuần qua bài viết Xây dựng MVC trong PHP thuần. Sẽ giúp bạn xây dựng nên một website nhỏ vừa để học vừa làm website luôn.

 Xem thêm: Hướng dẫn các bước xây dựng website bán hàng trực tuyến hiệu quả