PHP • 無限: 使用 PHP 實作 MVC 框架(四)

設定目標：

修改自己實作的 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 !!

2021年6月23日 星期三

使用 PHP 實作 MVC 框架(四)

2021年6月23日星期三