Why don't CSS and JavaScript load when I using router in PHP?-CodePudding

I'm using PHP MVC architecture in my project. The following is one of my views (php file):

<?php
error_reporting(E_ALL);
ini_set('display_errors', TRUE);
include "../app/model/loadImages.php";
?>


<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Highway Grid CSS Template</title>
  <!-- 

Highway Template

https://templatemo.com/tm-520-highway

-->
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="apple-touch-icon" href="apple-touch-icon.png">

  <link rel="stylesheet" href="../public/assets/css/bootstrap.min.css">
  <link rel="stylesheet" href="../public/assets/css/bootstrap-theme.min.css">
  <link rel="stylesheet" href="../public/assets/css/fontAwesome.css">
  <link rel="stylesheet" href="../public/assets/css/light-box.css">
  <link rel="stylesheet" href="../public/assets/css/templatemo-style.css">

  <link href="https://fonts.googleapis.com/css?family=Kanit:100,200,300,400,500,600,700,800,900" rel="stylesheet">

  <script src="../public/assets/js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
</head>

<body>
  <nav>
    <?php while ($row = $result2->fetch_assoc()) { $rows[] = $row ?>
      <div class="logo">
        <a href="index.php"><?php echo $row['header_1'] ?> <em><?php echo $row['header_2'] ?></em></a>
      </div>
      <div class="menu-icon">
        <span></span>
      </div>
  </nav>

  <div id="video-container">
    <div class="video-overlay"></div>
    <div class="video-content">
      <div class="inner">
        <h1><?php echo $row['mainTitle_1'] ?> <em><?php echo $row['mainTitle_2'] ?></em></h1>
        <p><?php echo $row['subtitle_1'] ?></p>
        <p><?php echo $row['subtitle_2'] ?></p>
        <div class="scroll-icon">
          <a class="scrollTo" data-scrollTo="portfolio" href="#"><img src="../public/assets/img/scroll-icon.png" alt=""></a>
        </div>
      </div>
    </div>
  <?php } $connection->close() ?>
  <?php unset($result2); ?>
  <video autoplay="" loop="" muted>
    <source src="../public/assets/videos/highway-loop.mp4" type="video/mp4" />
  </video>
  </div>


  <div class="grid-portfolio" id="portfolio">
    <div class="container">
      <div class="row">
        <?php while ($row = $result->fetch_assoc()) { ?>
          <div class="col-md-4 col-sm-6">
            <div class="portfolio-item">
              <div class="thumb">
                <a href="../public/assets/img/<?php echo $row['image'] ?>" data-lightbox="image-1">
                  <div class="hover-effect">
                    <div class="hover-content">
                      <h1><?php echo $row['title_1'] ?> <em><?php echo $row['title_2'] ?></em></h1>
                      <p><?php echo $row['subtitle'] ?></p>
                    </div>
                  </div>
                </a>
                <div class="image">
                  <img src="../public/assets/img/<?php echo $row['image'] ?>">
                </div>
              </div>
            </div>
          </div>
        <?php } ?>
      </div>
      <div class="row">
        <div class="col-md-12">
          <div class="load-more-button">
            <a href="#">Load More</a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <footer>
    <div class="container-fluid">
      <?php foreach($rows as $row) { ?>
        <div class="col-md-12">
          <p>Copyright &copy; <?php echo $row['bottom_txt_year'] ?> <?php echo $row['bottom_txt_company'] ?> | Designed by <?php echo $row['designer'] ?></p>
        </div>
      <?php } ?>
    </div>
  </footer>


  <!-- Modal button -->
  <div class="popup-icon">
    <button id="modBtn" class="modal-btn"><img src="../public/assets/img/contact-icon.png" alt=""></button>
  </div>

  <!-- Modal -->
  <div id="modal" class="modal">
    <!-- Modal Content -->
    <div class="modal-content">
      <!-- Modal Header -->
      <div class="modal-header">
        <h3 class="header-title">Send us a mssage!</h3>
        <div class="close-btn"><img src="../public/assets/img/close_contact.png" alt=""></div>
      </div>
      <!-- Modal Body -->
      <div class="modal-body">
        <div class="col-md-6 col-md-offset-3">
          <form id="contact" action="" method="post">
            <div class="row">
              <div class="col-md-12">
                <fieldset>
                  <input name="name" type="text" class="form-control" id="name" placeholder="Your name..." required="">
                </fieldset>
              </div>
              <div class="col-md-12">
                <fieldset>
                  <input name="email" type="email" class="form-control" id="email" placeholder="Your email..." required="">
                </fieldset>
              </div>
              <div class="col-md-12">
                <fieldset>
                  <textarea name="message" rows="6" class="form-control" id="message" placeholder="Your message..." required=""></textarea>
                </fieldset>
              </div>
              <div class="col-md-12">
                <fieldset>
                  <button type="submit" id="form-submit" class="btn">Send Message Now</button>
                </fieldset>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>



  <section class="overlay-menu">
    <div class="container">
      <div class="row">
        <div class="main-menu">
          <ul>
            <li>
              <a href="index.html">SignUp</a>
            </li>
            <li>
              <a href="../public/admin/index.php">LogIn</a>
            </li>
            <li>
              <a href="about.html">About Us</a>
            </li>
            <li>
              <a href="blog.html">Blog Entries</a>
            </li>
            <li>
              <a href="single-post.html">Single Post</a>
            </li>
          </ul>
          <?php foreach($rows as $row) { ?>
          <p><?php echo $row['message_1'] ?></p>
          <?php } ?>
        </div>
      </div>
    </div>
  </section>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <script>
    window.jQuery || document.write('<script src="../public/assets/js/vendor/jquery-1.11.2.min.js"><\/script>')
  </script>

  <script src="../public/assets/js/vendor/bootstrap.min.js"></script>

  <script src="../public/assets/js/plugins.js"></script>
  <script src="../public/assets/js/main.js"></script>

</body>

</html>

And this is my router:

<?php
class APP 
{
    protected $controller = "home";
    protected $method = "index";
    protected $params = [];
    public function Run()
    {
        $url = $this->SplitURL();
        if(file_exists("../app/controller/".strtolower($url[0]).".php"))
        {
            $this->controller = strtolower($url[0]);
            unset($url[0]);
        }
        require "../app/controller/".$this->controller.".php";

        if(isset($url[1]))
        {
            if(method_exists($this->controller, $url[1]))
            {
                $this->method = $url[1];
                unset($url[1]);
            }
        }
        //array_values function resets array's empty indexes
        $this->params = array_values($url);
        //This function calls methods in controller
        $this->controller = new $this->controller;
        call_user_func_array([$this->controller, $this->method], $this->params);

    }

    private function SplitURL()
    {
        if($_GET == null)
        {
            return array("home/index");
        }
        else
        {
            return explode("/", filter_var(trim($_GET['url'], '/')),FILTER_SANITIZE_URL);
        }
    }
}

This is one of my controllers (home controller):

<?php
class Home
{
    public function index()
    {
        $this->View("gallery/index");
    }
    public function View($view, $data = '')
    {
        if(file_exists("../app/views/".$view.".php"))
        {
            include "../app/views/".$view.".php";
        }
    }
}
?>

My problem is that when I don't enter controller and index or when I just enter controller name in the URL everything is OK, but when I enter controller and method names in the URL, only HTML is loaded and CSS and JavaScript don't load. I have provided my project as a zip file. Please help me to solve it. https://filebin.net/7nps0b1x04z8a08m

CodePudding user response：

Don't use relative path in your link href, For example when you using route example.com/controller then href="../public/assets/css/bootstrap.min.css" load css file from example.com/public/assets/css/bootstrap.min.css but if route is example.com/controller/index then css will loaded from example.com/controller/public/assets/css/bootstrap.min.css (which i guess this address is wrong).

So define your stylesheet links like below (Relative path doc):

<link rel="stylesheet" href="/public/assets/css/bootstrap.min.css">
<link rel="stylesheet" href="/public/assets/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="/public/assets/css/fontAwesome.css">
<link rel="stylesheet" href="/public/assets/css/light-box.css">
<link rel="stylesheet" href="/public/assets/css/templatemo-style.css">