Tiếp tục series học lập trình ngôn ngữ PHP bài viết hôm Quỳnh chia sẻ cùng bạn cách xây dựng trang web PHP dạng tin tức kết hợp với Bootstrap.

Với những bước hướng dẫn đơn giản hi vọng ngay sau khi đọc bạn có thể làm được một website bằng PHP. Nhưng trước khi làm được bạn phải có nền tảng về HTML, CSS và biết cách sử dụng các trình soạn thảo như Notepad++, Subline text…

Cách tạo trang web bằng PHP kết hợp Bootstrap

I/ Xây dựng bố cục giao diện Front end

Đầu tiên bạn sẽ copy đoạn code sau vào Notepad++

<!DOCTYPE html>
<html lang="en">
<head>
<title>Xây dựng trang web bằng PHP</title>
<link rel="stylesheet" href="include/css/style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<div class="container-fluid">
<div class="jumbotron">
<img src="http://localhost/quachquynhweb/include/images/photo/logo.png"/>
</div>
<div class="navbar navbar-inverse">
<div class="container-fluid">
<ul class="navbar-header">
<li><a href="/">Trang Chủ</a></li>
<li><a href="/">Wordpress</a></li>
<li><a href="/">HTML</a></li>
<li><a href="/">CSS</a></li>
<li><a href="/">JavaScript</a></li>
</ul>
</div>
</div>
<!-- End header -->
<div class="col-sm-8">
<div class="baiviet">
// Show danh sách bài viết trong CSDL
</div>
</div>
<!-- End Content -->

<div class="col-sm-4">
<div class="baivietmoi">
// Cột bên sidebar
</div>
</div>
<!-- End Sidebar -->

<div class="jumbotron">
<div class="appeal">
<p>Is this website helpful to you? Please give us a,
or share your feedback< to help us improve.
Connect with us on Twitter for the latest updates.</p>
</div>
<h2>Copyright @ 2019 Design by Quách Quỳnh</h2>
</div><!-- End Footer -->

</div>
</div> <!-- Đóng Div Container Fluid -->
</div>
</body>
</html>

Bước 1: Xây dựng cây thư mục

Trong thư mục htdocs (C:\xampp\htdocs\) bạn sẽ tạo một thư mục tên là project1 để chứa toàn bộ file bên dưới

Tạo trang web bằng PHP

Qua hình trên bạn sẽ thấy công việc tiếp theo là sẽ tạo ra các tập tin bao gồm:

index.php : Hiển thị trang chủ PHP

header.php : Hiển thị phần đầu trang web

main.php :  Chứa danh sách bài viết và phần sidebar

footer.php : Hiển thị nội dung chân trang

connect.php : Kết nối tới CSDL Database

Bước 2: Viết code cho từng page

– Code index.php:

<?php require_once "header.php";?>
<?php require_once "main.php";?>
<?php require_once "footer.php";?>

Trong index nó sẽ gọi 3 tập tên ra đó là header.php, main.phpfooter.php

– Code header.php

<!DOCTYPE html>
<html lang="en">
<head>
<title>Xây dựng trang web bằng PHP</title>
<link rel="stylesheet" href="include/css/style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<div class="container-fluid">
<div class="jumbotron">
<img src="http://localhost/quachquynhweb/include/images/photo/logo.png"/>
</div><!-- End header -->
<div class="navbar navbar-inverse">
<div class="container-fluid">
<ul class="navbar-header">
<li><a href="/">Trang Chủ</a></li>
<li><a href="/">Wordpress</a></li>
<li><a href="/">HTML</a></li>
<li><a href="/">CSS</a></li>
<li><a href="/">JavaScript</a></li>
</ul>
</div>
</div>
<!-- End Menu -->

– Code main.php

<div class="container-fluid">
<div class="row">
<div class="col-sm-8">
<div class="baiviet">
<?php
require_once "connect.php";
$query = mysqli_query($conn, "SELECT id,title,content,image FROM posts");

while($row = mysqli_fetch_assoc($query))
{
echo "<div class='posts'>";
echo "<img src='admin/photo/$row[image]' />";
echo "<h2>".$row['title']."</h2><br/>";
$readmore = '<a href="article.php?id='.$row['id'].'"><br/>Đọc thêm...</a>';
echo "<p>".substr($row['content'], 0 , 150).$readmore."</p><br/>";
echo "</div>";
}
?>
</div>
</div><!-- End Content -->
<div class="col-sm-4">
<div class="baivietmoi">
// Cột bên
</div><!-- End Sidebar -->
</div>
</div>
</div>

Hoặc để hiển thị dạng Grid posts bạn có thể dùng code sau:

<div class="container-fluid">
<div class="row">
<?php
require "connect.php";
$query = mysqli_query($conn, "SELECT id,title,content,image FROM posts");

while($row = mysqli_fetch_assoc($query))
{
echo "<div class='col-sm-4'>";
echo "<img src='admin/photo/$row[image]' width='100%'/>";
echo "<h2>".$row['title']."</h2><br/>";
$readmore = '<a href="article.php?id='.$row['id'].'"><br/>Đọc thêm...</a>';
echo "<p>".substr($row['content'], 0 , 150).$readmore."</p><br/>";
echo "</div>";
}
?>
</div>
</div>

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

<div class="container-fluid">
<div class="row">

<?php
include 'connect.php';
require_once 'header.php';
if(isset($_REQUEST['url']) and $_REQUEST['url']!=""){
$url=$_GET['url'];
$sql = "SELECT * FROM posts WHERE url = '$url' ";
$result = mysqli_query($conn, $sql);
while ($row = mysqli_fetch_array($result)) {
echo "<div class='col-sm-8'>";
echo "<img src='admin/photo/$row[image]' width='100%'/>";
echo "<h2>".$row['title']."</h2>";
echo "<p>".$row['content']."</p><br/>";
echo "</div>";
}
}
?>

<?php require_once 'sidebar.php';?>

</div>
</div>
<?php require_once 'footer.php';?>

Tiếp theo tạo file sidebar.php

<div class="col-sm-4">
<h2>Bài viết mới</h2>
<?php
require "connect.php";
$query = mysqli_query($conn, "SELECT id,title,url,content,image FROM posts");

while($row = mysqli_fetch_assoc($query))
{
echo "<a href='{$row['url']}.html' target='_blank'>{$row['title']}</a><br/>";
}
?>
</div>

Và file .htaccess để tạo đường dẫn thân thiện với SEO

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

– Code footer.php

<div class="jumbotron">
<h2>Copyright @ 2019 Design by Quách Quỳnh</h2>
</div>

</div> <!-- Đóng Div Container Fluid -->
</div>
</body>
</html>

– Code file connect.php

<?php
$conn = mysqli_connect("localhost", "root", "", "data");
mysqli_set_charset($conn, 'UTF8');
?>

– Code file style.css (Nằm trong thư mục include/css)

* {
margin: 0;
padding: 0;
}
body {
font-family: Arial;
}
.jumbotron {
margin: 0!important;
}
.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;
}

.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 img {
	width: 100%!important;
}

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

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

Tạo trang web bằng PHP

Bước 3: Truy cập vào liên kết localhost/project1/admin/posts_add.php để thêm bài viết

Cuối cùng load lại địa chỉ localhost/project1/ để xem thành quả nhé!

HƯớng dẫn tạo trang web bằng ngôn ngữ PHP

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é!

Leave a Reply

Your email address will not be published.