How to Add Style Sheet to a Slim Framework Project

Asked

Viewed 145 times

1

As I can configure a project that I can add css, js and bootstrap files in the slim framework, I used the slim/Skeleton project, but I can’t get my css and js files to work without the need to add a long way ex(c: xampp htdocs template project assests style.css), there is a possibility where I can just add <link href="style.css" />

php slim

  • Try adding a relative path: assests/style.css

1 answer

1

1) Create the 'Assets' folder within your public directory and within it the 'css', 'js' and 'images' folders'.

2) You must indicate no. htaccess the following settings so that from your main directory where the index.php file is, your Assets folder and the folder indexes inside it are visible:


<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /



#Checks to see if the user is attempting to access a valid file,
#such as an image or css document, if this isn't true it sends the
#request to index.php
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond $1 !^(index\.php|assets)
RewriteRule ^(.*)$ index.php?/$1 [L]

</IfModule>

3) After creating a default page layout following the Slim documentation for templates, (i used Twig), you should put on this default page your settings and then you can put directly and only the Assets folder, because with the above setup on . htacess your template will already have access and visibility to the files. Follow an example of configuration of this default layout:

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        {% block head %}
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <!-- Bootstrap e CSS -->
        <link type="text/css" href="/assets/css/bootstrap.min.css" rel="stylesheet">
        <link type="text/css" href="/assets/css/jquery.dataTables.min.css" rel="stylesheet">
        <link type="text/css" href="/assets/css/style.css" rel="stylesheet" />
        <!-- Scripts -->
        <!-- Scripts Datatables -->
        <script type="text/javascript" src="/assets/js/jquery-3.3.1.min.js"></script> 
        <script type="text/javascript" src="/assets/js/jquery.dataTables.min.js"></script>

        <!-- CSS -->
        <link type="text/css" href="/assets/css/bootstrap.min.css" rel="stylesheet">
        <link type="text/css" href="/assets/css/jquery.dataTables.min.css" rel="stylesheet">
        <link type="text/css" href="/assets/css/style.css" rel="stylesheet" />
        <!-- Scripts -->
        <script type="text/javascript" src="/assets/js/jquery-3.3.1.min.js"></script> 
        <script type="text/javascript" src="/assets/js/jquery.dataTables.min.js"></script>
        <!-- Favicon -->
        <link  rel = "ícone de atalho"  href = "favicon.ico"  type = "imagem / x-ícone" > 
        <link  rel = "icon"  href = "favicon.ico"  type = "imagem / x-ícone" >        


        <title>{% block title %}{% endblock %}</title>
        {% endblock %}
    </head>
    <body>
        <div id="content">{% block content %}{% endblock %}</div>
        <div id="footer">
            {% block footer %}
            &copy; Copyrigh by Corporation
            {% endblock %}
        </div>

    </body>
</html>

In the above example I uploaded the default css files, js inside the corresponding folders in the Assets directory. I added a style sheet called 'style.css' adding some of my style settings.

4) When creating a new page in your Views directory, you should extend the default layout (first line of the example file below), you can add following the Twig tags additional settings within the possible block tags (as in the example below I added a function in javascript, the other block matches below as Ahead, title, body, footer):

{% extends "template.html" %}

{% block title %}Corporation{% endblock %}

{% block head %}
{{ parent() }}
<script>
    $(document).ready(function () {
        $('#registros').DataTable({
            "language": {
                "search": "Busca:",
                "lengthMenu": "Exibindo _MENU_ registros",
                "info": "Exibindo de _START_ a _END_ de _TOTAL_ registros",
                "paginate": {
                    "previous": "Antes",
                    "next": "Próxima",
                    "firs": "<<",
                    "last": ">>"
                }
            }
        });
    });
</script>
{% endblock %}

{% block content %}
<nav class="navbar navbar-dark fixed-top bg-dark flex-md-nowrap p-0 shadow">
    <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#">Corporation Title</a>
    <ul class="nav navbar-light">
        <li class="nav-item">
            <a class="nav-link" href="#">Home</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>    
        <li class="nav-item">
            <a class="nav-link" href="#">Link 4</a>
        </li>
    </ul>
</nav>

<div id="content">

Coloque seu contéudo aqui...
</div>
{% endblock %}

{% block footer %}
<footer>
    <p>&copy; Corporation -  Todos os direitos reservados</p>
</footer>
{% endblock %}

Browser other questions tagged php slim

You are not signed in. Login or sign up in order to post.