Jquery

Version imprimable

28/04/2019, 17h15
Jérémie17

Symfony 4.2 - Assets / Encore / Bootstrap / Jquery

Bonjour,

j'essaie d'installer un bon environnement de développement (symfony) mais impossible de comprendre l'histoire des assets.
Même avec la doc officielle, je ne trouve pas cela clair.

Je souhaite pouvoir utiliser symfony 4.2 avec du css (bootstrap) et du javascript (jquery).
Je tombe sur plusieurs tutoriels mais tous disent des choses différentes.

Je souhaite pouvoir utiliser les dernières méthodes mais sans être obliger d'utiliser des technologies "imposées"
Dans la doc officielle il est recommandé d'utiliser "Encore" pour la gestion des assets.
Sauf qu'il est demandé d'installer NodeJs au préalable. Cependant, je ne souhaite pas utiliser Nodejs, mais seulement jquery.

Ensuite, est-il possible de se passer de Encore ?
Faut-il installer "asset" (composer require asset) obligatoirement avec Encore?
Peut-on utiliser uniquement "asset" ?

Pas moyen de trouver une explication claire.

Si vous pouviez m'éclaircir un peu plus ?
En vous remerciant
Jérémie
28/04/2019, 17h57
dukoid

en fait Encore utilise webpack qui utilise nodejs

ce sont 2 outils qui servent uniquement à gérer les ressources, qui donc au final permet d'avoir un des fichiers css et des fichiers js pour la PROD
en gros, ces outils sont là mais n'est pas utilisé en prod pour le site..

pour jQuery c'est pourtant bien expliqué !

Merci pour la réponse Dukoid.

J'aimerais allé au plus simple, idéalement sans utiliser Encore, j'ai vu un tutoriel parlant de asset.
composer require asset
avec dans le base.html.twig.

Code:

1
2
3
4
        {% block stylesheets %}  
            <link rel=¨stylesheet¨ type=¨text/css¨ href=¨{{ asset('css/bootstrap.css') }}¨>  
            <link rel=¨stylesheet¨ type=¨text/css¨ href=¨{{ asset('css/styles.css') }}¨>  
        {% endblock %}

Code:

1
2
3
        {% block javascripts %}  
            <script src="{{ asset('js/jquery-3.4.0.min.js') }}" type="text/javascript"></script>  
        {% endblock %}

Est-ce possible ?
Merci

28/04/2019, 21h20
dukoid

tout est possible.

faut mettre tes fichiers dans /web/css/... /web/js/...

hello c'est tout a fait possible par contre les fichiers statiques sont a mettre dans le dossier public qui est présent dans ton projet a la racine dans ton cas :

/public/css/bootstrap.css
/public/css/styles.css

/public/js/jquery-3.4.0.min.js

Puis tu fait appel avec {{ asset() }} dans ton template twig comme dans ton exemple par contre ne pas ajouter "public" dans le chemin du css ou js
Code:

1 2 3 4 {% block stylesheets %} <link rel=¨stylesheet¨ type=¨text/css¨ href=¨{{ asset('css/bootstrap.css') }}¨> <link rel=¨stylesheet¨ type=¨text/css¨ href=¨{{ asset('css/styles.css') }}¨> {% endblock %}

05/05/2019, 17h41
Jérémie17
Bonjour,
merci pour vos réponses.
J'ai bien fait tout ce que vous m'avez indiqué (il me semble), mais toujours aucun résultat.
Voici ce que j'obtiens en visionnant le code source de la page HTML :
Code:

1 2 <link rel=¨stylesheet¨ type=¨text/css¨ href=¨/css/bootstrap.min.css¨> <link rel=¨stylesheet¨ type=¨text/css¨ href=¨/css/bootstrap-theme.min.css¨>
Et quand je clique sur un fichier css j'obtiens :

Code:

<title> No route found for "GET /%C2%A8/css/bootstrap.min.css%C2%A8" (404 Not Found) </title>

En fait il ne semble pas trouver les fichiers css...

En vous remerciant,

Jérémie
05/05/2019, 17h59
benjamin-

Bonjour comment servez vous votre site avec quelle méthode ? et mettez votre code source de la page ou vous utilisez les asset merci d'avance

Code:

composer require asset

Code:

symfony server:start

base.html.twig

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}Welcome!{% endblock %}</title>
        {% block stylesheets %}
            <link rel=¨stylesheet¨ type=¨text/css¨ href=¨{{ asset('css/bootstrap.min.css') }}¨>
            <link rel=¨stylesheet¨ type=¨text/css¨ href=¨{{ asset('css/bootstrap-theme.min.css') }}¨>
            {#<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">#}
        {% endblock %}
 
    </head>
 
    <body>
        {% block body %}
 
        {% endblock %}
        {% block javascripts %}
            <script src="{{ asset('js/jquery.min.js') }}" type="text/javascript"></script>
            <script src="{{ asset('js/popper.min.js') }}" type="text/javascript"></script>
            <script src="{{ asset('js/bootstrap.min.js') }}" type="text/javascript"></script>
        {% endblock %}
    </body>
</html>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
{% extends "base.html.twig" %}
 
{% block stylesheets %}
    {{ parent() }}
 
{% endblock %}
 
{% block title %}Réinitialisation du mot de passe{% endblock %}
 
{% block body %}
    <img src="{{ asset('img/logo.png') }}" alt="logo"/>
    <div class="container">
        <div class="row">
            <div class="line col-md-12"></div>
        </div>
        <br/>
 
        <form  class="form-horizontal" role="form" method="post" action="">
            <div class="row">
                <div class="col-lg-offset-4 col-lg-4 text-center">
                    <h3>Saisissez votre e-mail</h3>
                </div>
            </div>
 
            <div class="row">
                <div class="col-lg-offset-4 col-lg-4">
                    <div class="form-group">
                        <label for="lemail" class="sr-only">Adresse mail</label>
                        <input type="email" class="form-control" id="lemail" placeholder="Email" name="email">
                    </div>
                    <div class="form-group">
                        <button class="btn btn-primary btn-block " type="submit">Valider</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
{% endblock %}

Regarde du coté de l'encodage de tes " sur les fonctions assets ¨ => "

J'ai modifié le code

Bonne soirée

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}Welcome!{% endblock %}</title>
        {% block stylesheets %}
            <link rel="stylesheet" type="text/css" href="{{ asset('css/bootstrap.min.css') }}">
            <link rel="stylesheet" type="text/css" href="{{ asset('css/bootstrap-theme.min.css') }}">
            {#<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">#}
        {% endblock %}
 
    </head>
 
    <body>
        {% block body %}
 
        {% endblock %}
        {% block javascripts %}
            <script src="{{ asset('js/jquery.min.js') }}" type="text/javascript"></script>
            <script src="{{ asset('js/popper.min.js') }}" type="text/javascript"></script>
            <script src="{{ asset('js/bootstrap.min.js') }}" type="text/javascript"></script>
        {% endblock %}
    </body>
</html>

16/05/2019, 10h19
Jérémie17

Bonjour Benjamin,
merci pour la réponse.
Effectivement, il y avait une problème de quote ".
Cela fonctionne maintenant,
Jérémie