IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Symfony PHP Discussion :

Symfony 4.2 - Assets / Encore / Bootstrap / Jquery


Sujet :

Symfony PHP

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Nouveau membre du Club
    Homme Profil pro
    Responsable d'un système d'information métier
    Inscrit en
    Avril 2019
    Messages
    6
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Responsable d'un système d'information métier
    Secteur : Santé

    Informations forums :
    Inscription : Avril 2019
    Messages : 6
    Par défaut 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

  2. #2
    Membre extrêmement actif
    Avatar de dukoid
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Novembre 2012
    Messages
    2 100
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Novembre 2012
    Messages : 2 100
    Par défaut
    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é !

  3. #3
    Nouveau membre du Club
    Homme Profil pro
    Responsable d'un système d'information métier
    Inscrit en
    Avril 2019
    Messages
    6
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Responsable d'un système d'information métier
    Secteur : Santé

    Informations forums :
    Inscription : Avril 2019
    Messages : 6
    Par défaut
    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 Twig : Sélectionner tout - Visualiser dans une fenêtre à part
    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 %}
    et
    Code Twig : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
            {% block javascripts %}  
                <script src="{{ asset('js/jquery-3.4.0.min.js') }}" type="text/javascript"></script>  
            {% endblock %}
    Est-ce possible ?
    Merci

  4. #4
    Membre extrêmement actif
    Avatar de dukoid
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Novembre 2012
    Messages
    2 100
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Novembre 2012
    Messages : 2 100
    Par défaut
    tout est possible.

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

  5. #5
    Futur Membre du Club
    Homme Profil pro
    Technicien maintenance
    Inscrit en
    Mai 2019
    Messages
    4
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Technicien maintenance
    Secteur : Santé

    Informations forums :
    Inscription : Mai 2019
    Messages : 4
    Par défaut
    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 Twig : Sélectionner tout - Visualiser dans une fenêtre à part
    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 %}

  6. #6
    Nouveau membre du Club
    Homme Profil pro
    Responsable d'un système d'information métier
    Inscrit en
    Avril 2019
    Messages
    6
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Responsable d'un système d'information métier
    Secteur : Santé

    Informations forums :
    Inscription : Avril 2019
    Messages : 6
    Par défaut
    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 HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    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 HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    <title>    No route found for &quot;GET /%C2%A8/css/bootstrap.min.css%C2%A8&quot; (404 Not Found)  </title>

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

    En vous remerciant,

    Jérémie

Discussions similaires

  1. Bootstrap Jquery ajouter supprimer modifier
    Par soufiane656 dans le forum jQuery
    Réponses: 3
    Dernier message: 26/12/2015, 23h48
  2. Erreur Loading bar Bootstrap / jQuery
    Par napi15 dans le forum jQuery
    Réponses: 1
    Dernier message: 10/06/2014, 09h11
  3. Implémentation d'un Bootstrap JQuery JS Classes
    Par faroukgharssallah dans le forum Bibliothèques & Frameworks
    Réponses: 1
    Dernier message: 21/04/2014, 13h02
  4. [2.x] Symfony 2 Envoyer message alert avec JQuery
    Par cescu dans le forum Symfony
    Réponses: 1
    Dernier message: 29/11/2012, 16h13
  5. [1.x] problème commandes php symfony plugin:publish-assets
    Par sylvain230 dans le forum Débuter
    Réponses: 0
    Dernier message: 09/03/2011, 14h16

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo