CODEWITHSUNDEEP
phphtmlcss.htaccess
Khairul
Khairul

Reputation: 425

PHP Routing - Error include css/js files

I am learning to do routing in php. I am able to route the page without any error but I am stuck on including the css and js files. The medium that I use for the tutorial and example is on laracast video. I am also using xampp for the apache server on Windows.

I wanted to make my own practice and below image are the file structure that I did,

on my .htaccess file, I have:

RewriteEngine On
RewriteBase /season-temp
RewriteRule ^.*$ index.php [END]

On my views folder, I have all the view page file including header and footer to include the css and js.

header.php

<!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">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Logo Nav - Start Bootstrap Template</title>

    <!-- Bootstrap Core CSS -->
    <link href="/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="/css/logo-nav.css" rel="stylesheet">

</head>
<body>

<?php require('navigations.php'); ?>

footer.php

<!-- jQuery -->
<script src="/js/jquery.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="/js/bootstrap.min.js"></script>

</body>

</html>

From the codes above, it will give an error:

GET http://localhost/css/bootstrap.min.css 
GET http://localhost/css/logo-nav.css 
GET http://localhost/js/jquery.js 
GET http://localhost/js/bootstrap.min.js

I tried to insert <base href="/"> on the head section and make the link on each src/href like 'season-temp/<folder_name>/<file_name>', eg; 'season-temp/css/bootstrap.min.css' but still unable to get the css and js files.

How do I want to include those files?

Update - Incorrect output

Firstly, apologize for the wrong update on below solution. The css and js did work but the link is broken. If I undo the .htaccess file base on @Triby answer, the link works fine but the css and js is not. Below are the page for my navigations.php and routes.php

navigations.php

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
   <ul class="nav navbar-nav">
      <li>
         <a href="/season-temp/about">About</a>
      </li>
      <li>
         <a href="/season-temp/services">Services</a>
      </li>
      <li>
         <a href="/season-temp/contact">Contact</a>
      </li>
   </ul>
</div>

routes.php

<?php

$router->get('season-temp','controllers/index.php');

$router->get('season-temp/about','controllers/about.php');

$router->get('season-temp/services','controllers/services.php');

$router->get('season-temp/contact','controllers/contact.php');

If I update the link as @ceejayoz mentioned for the css and js files, I got an error of:

<br />
<b>Fatal error</b>:  Uncaught exception 'Exception' with message 
'No route defined for this URI.' 
in C:\xampp\htdocs\season-temp\core\router.php:30
Stack trace:
#0 C:\xampp\htdocs\season-temp\index.php(9): 
Router-&gt;direct('season-temp/js/...', 'GET')
#1 {main}
thrown in <b>C:\xampp\htdocs\season-temp\core\router.php</b> 
on line <b>30</b><br />

Upvotes: 3

Views: 2926

Answers (2)

ceejayoz
ceejayoz

Reputation: 180023

I am accessing using http://localhost/season-temp/

This is the problem.

Your files are all referenced like this:

<script src="/js/jquery.js"></script>

but you should be using:

<script src="/season-temp/js/jquery.js"></script>

Upvotes: 1

Triby
Triby

Reputation: 1757

You are redirecting everything to index.php, try to redirect only inexistent files or directories:

RewriteEngine On
RewriteBase /season-temp
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^.*$ index.php [L]

L is to avoid processing any rules below when the rule matches

Upvotes: 2

Related Questions