How to include JS/CSS files into templates of Slim Framework?

Question

I am developing a simple web app with Slim framework. I got stuck with a probably simple problem. I want to include static files (CSS and Javascript) into my template.

My project folder structure is as follows:

index.php //<=== where all the routing happens.
/flot
      layout.css
      jquery.js
      ....
/templates
      first_template.php

My header of first_template.php contains:

<link href="../flot/layout.css" rel="stylesheet" type="text/css">
<script language="javascript" type="text/javascript" src="../flot/jquery.js"></script>

When I call the projects root url

http://localhost/xampp/ProjectX/ 

(I'm using XAMPP) the template shows up, but the css and javascript stuff is not working. The Google Chrome console shows:

GET http://localhost/xampp/ProjectX/flot/layout.css 404 (Not Found)
GET http://localhost/xampp/ProjectX/flot/jquery.js 404 (Not Found) 

Any suggestions? I spent almonst one hour in googling, but the overall documentation of the Slim framework is still literally slim :)

Answer 1

I assume you are displaying your Template on the Project root (index.php), so you should remove the ../ from your Stylesheet and JS relative Paths:

<link href="flot/layout.css" rel="stylesheet" type="text/css">
<script language="javascript" type="text/javascript" src="flot/jquery.js"></script>