Codeigniter 4基础教程（8）-- 一个简单的博客（blog）例子(一)

前言：迄今为止，我们讲解了Codeigniter 4 的几个常见概念。从这一将开始，我们以一个简单的博客（Blog）项目演示一下如何使用Codeigniter 4.

0.安装配置
安装wamp 64位的， 7.2+（略过）
下载Codeigniter 4包，解压到www/blog
创建一个虚拟主机,重启wamp的全部服务
在这里插入图片描述
浏览器输入blog.net

打开app/Config/App.php

	public $baseURL = 'http://blog.net/';
	
	public $indexPage = '';

为便于debug, 修改app/Config/Boot/production.php

ini_set('display_errors', '1');

修改app/Config/Routers.php

$routes->get('/', 'Pages::index');
$routes->get('(:any)', 'Pages::showme/$1');

这里的默认controller就是Pages，其余的路由由第二个对应。

1.创建Pages Controller

<?php namespace App\Controllers;

class Pages extends BaseController
{
    
    
	public function index()
	{
    
    
		$this->showme();
	}

	public function showme(string $page = 'home')
	{
    
    
		if(! is_file(APPPATH.'/Views/pages/'.$page.'.php'))
		{
    
    
			throw new \CodeIgniter\Exceptions\PageNoutFoundException($page);
		}
		echo view('templates/header');
		echo view('pages/'.$page);
		echo view('templates/footer');
	}
}

2.创建一些列View

app/Views/pages/about.php

<section>
	<div class="container">
		<h3>About us</h3>
		<p>This is me</p>
		<h2>Learn more</h2>
		<p>This is me again</p>
	</div>
</section>

app/Views/pages/home.php

<section>
	<div class="container">
		<div class="jumbotron">
			<h1 class="display-4"> My Blog Project by CodeIgniter 4</h1>
			<p class="lead">This is a simple CodeIgniter 4 Project project, for educational purpose</p>
			<hr class="my-4">
			<p>Welcome to my project</p>
			<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
		</div>
	</div>
</section>

app/Views/templates/footer.php

	<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>

app/Views/templates/header.php

<!DOCTYPE html>
<html>
<head>
	<title>CI4 Blog Tutorial</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
	
  <a class="navbar-brand" href="#">My Blog</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="/home">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="/about">About us</a>
      </li>
    </ul>
  </div>
</div>
</nav>

测试：大家可以进入blog.net测试一下。基本上都能跑得起来，nav的部分指向也正常。

Codeigniter 4基础教程（8）-- 一个简单的博客（blog）例子(一)

猜你喜欢