Tạo trang web tin tức bằng Codeigniter & Bootstrap 4

Tiếp tục Series học Codeigniter hôm nay mình chia sẻ bạn cách tạo trang web tin tức đơn giản. Nếu bạn chưa đọc bài viết Hướng dẫn xây dựng trang web bằng PHP và Bootstrap có thể xem lại. Để hiểu rõ hơn các bước tạo website hoặc blog khi sử dụng PHP thuần như thế nào.

Để thực hiện dễ dàng thì bạn cũng cần đọc lại bài viết Hướng dẫn sử dụng Codeigniter Framework

Bước 1: Cấu hình Model – View – Controll

– Tạo 1 file trên là BlogCtroller.php tại C:\xampp\htdocs\CodeIgniter\application\controllers

<?php
class BlogController extends CI_Controller
{
public function __construct()
{

parent::__construct();

/*load dữ liệu từ database*/
$this->load->database();

/*load Model*/
$this->load->model('BlogModel');
}
/*Display*/
public function index()
{
$result['data']=$this->BlogModel->display_records();
$this->load->view('blog',$result);
}

}
?>

– Tạo 1 file BlogModel.php tại C:\xampp\htdocs\CodeIgniter\application\models

<?php
class BlogModel extends CI_Model
{
/*Hiển thị*/
function display_records()
{
$query=$this->db->query("select * from posts");
return $query->result();
}

}

Chú thích: posts đây là chính là bảng trong Database

– Tạo View với file blog.php

<?php $this->load->view('include/header');?>
<div class="container" style="margin-top:30px">
<div class="row">
<?php $this->load->view('include/sidebar');?>
<?php $this->load->view('include/main');?>
</div>
</div>
<?php $this->load->view('include/footer');?>

Bước 2: Tạo file include chứa 4 file header.php, main.php, sidebar.php và footer.php

Xây dựng trang web tin tức bằng Codeigniter

a. code header.php

<!DOCTYPE html>
<html lang="en">
<head>
<title>Tạo trang web tin tức bằng Codeigniter</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron text-center" style="margin-bottom:0">
<h1>Tạo trang web tin tức bằng Codeigniter</h1>
<p>Hướng dẫn xây dựng website tin tức với Codeigniter và Boostrap 4</p>
</div>

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" href="#">Home</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">HTML</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CSS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">PHP</a>
</li>
</ul>
</div>
</nav>

b. Code main.php

<div class="col-sm-8">
<h2>Danh sách bài viết</h2>
<?php
foreach($data as $row)
{
echo "<h3>".$row->title."</h3>";
echo "<hr>";
echo "<p>".$row->content."</p>";
}
?>
</div>

c. Code sidebar.php

<div class="col-sm-4">
<h2>Cột bên</h2>
<p>Đây là Sidebar</p>
</div>

d. Code footer.php

<div class="jumbotron text-center" style="margin-bottom:0">
<p>Đây là Footer</p>
</div>
</body>
</html>

Xong xuôi bạn sẽ truy cập vào đường dẫn localhost/codeigniter để xem website tin tức mình vừa tạo xong đã thành công chưa nhé!

0 0 vote
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments