- 修改自己實作的 MVC 框架,加入靜態檔案的連結與分類!
- 接續上一篇文章進行 kernel 模組的修改!
修改 kernel 模組
- 修改 kernel 目錄下的 kernel.php :
<?php (前面略過...) public function run(){ spl_autoload_register(array($this, 'loadClass')); $this->unregisterGlobals(); $this->_config->show(); //由路由設定,取出需要使用的控制器 include ('Router.php'); //將 css / javascripts / images 檔案歸類 if (preg_match('/.js/i',$this->_router->request)){ include ('../statics/js/'.$this->_router->request); }elseif (preg_match('/.css/i',$this->_router->request)){ include ('../statics/css/'.$this->_router->request); } elseif (preg_match('/./i',$this->_router->request)){ include ('../statics/images/'.$this->_router->request); } else { $uri = $this->_router->run(); $controller = 'App\\Controllers\\'.$uri[1]; //找出控制器後,程式交給控制器執行 if (!class_exists($controller)){ exit($controller.'控制器不存在'); } else { (new $controller($uri[0]))->run(); // \call_user_func_array($dispatch); } } } (後面也略過....)
- 修改在 app\Views 目錄下,indexView.php :
<?php (前面略過...) public function show($user){ include(APP_PATH.'app/Views/header.html'); $twig = $this->getTwig(); echo $twig->render('index.twig.html', ['name' => 'John Doe', 'occupation' => 'gardener']); include(APP_PATH.'app/Views/footer.html'); } (後面也略過....)
- 在 app\Views 目錄下,新增 header.html 檔案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.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.5.2/js/bootstrap.min.js"></script>
<script src="myScripts.js"></script>
<title>Document</title>
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-sm bg-primary">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>
</nav> - 在 app\Views 目錄下,新增 footer.html 檔案
<nav class="navbar navbar-expand-sm bg-light">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>
</nav>
</div>
</body>
</html> - 在 app\Views 目錄下,修改 index.twig.html 檔案
<h2>最新消息列表</h2>
<p>最近本站熱門討論項目</p>
<div class="media border p-3">
<img src="img_avatar3.png" alt="John Doe" class="align-self-start mr-3" style="width:60px;">
<div class="media-body">
<h4>Peter Wang <small><i>發表於 五月 19, 2021</i></small></h4>
<p>最新 MVC 框架發表了!</p>
<div class="media p-3">
<img src="img_avatar4.png" alt="Jane Doe" class="align-self-start mr-3" style="width:45px;">
<div class="media-body">
<h4>Jane Doe <small><i>Posted on February 20 2016</i></small></h4>
<p>Lorem ipsum...</p>
</div>
</div>
</div>
</div>
<p>
{{ name }}test is a {{ occupation }}
</p>
<p id="demo">Hello, This is a site</p>
<button type="button" onclick='demo()'>Click Me !!</button>
<br>
<button onclick="turnOn()">Turn on the light</button>
<img id="myImage" src="pic_bulboff.gif" style="width:100px">
<button onclick="turnOff()">Turn off the light</button> - 在專案 helloMVC 目錄下,新增 statics 目錄,並在其下建立 images、css、js 三個子目錄
- 將網頁中,會使用到的圖檔,放入 statics\images 目錄下!將 CSS 檔案放入 statics\css 目錄下!將 JavaScripts 檔案放入 statics\js 目錄下!
- 使用瀏覽器查看網頁內容: http://hellomvc !!