Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Symfony Grundkurs

CSS-Elemente einbinden

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Innerhalb von Symfony 2.8 ist das web-Verzeichnis der Ort, auf den öffentlich zugegriffen werden kann. Dort werden also die Dateien hinterlegt, die zum Beispiel von einem Browser abrufbar sein sollen.
05:14

Transkript

Derzeit habe ich hier in meinem "head"-Bereich, meiner "basis.html.twig", noch eine leichte Unordnung, was lokale Dateien anbelangt, was ich jetzt ganz gerne ändern möchte. Es stellt sich also die Frage, wo hinterlege ich lokale Dateien innerhalb von Symfony, die dann über einen Browser abrufbar sein müssen. Und dafür gibt es ein eigenes Verzeichnis, nämlich das "web"-Verzeichnis. Das ist quasi das "root"-verzeichnis für die Außensicht und hier liegt zum Beispiel schon das "favicon" von Symfony, das hier über diese Twig-Funktion eingebunden wird. Im Unterschied zu diesem "favicon", das so nicht existent ist und ich es deswegen gleich löschen werde. Ich möchte jetzt also dafür sorgen, dass ich auch lokale Stylesheets einbinden kann, nicht nur über den CDN-Server. Und dazu lege ich mir zuerst ein neues "css"-Verzeichnis an und mache dasselbe noch für JavaScript. Das heißt, rechte Maustaste "New" "Folder", den nenne ich "js", und dann, für den Falle eines Falles, auch noch einen für "images". Damit habe ich schon mal prinzipiell eine Struktur erstellt, mit der ich dann weiterarbeiten kann. Ich könnte natürlich auch rein theoretisch innerhalb meines Bundles, ein "public"-Verzeichnis erzeugen in meinem "resources"-Ordner und dieses dann mithilfe eines Consolenbefehls quasi ins "web"-Verzeichnis exportieren. Davon rate ich aber ab, zumal ich ja schon hier im "app"-Verzeichnis meine ganzen Templates liegen habe. Das heißt, ich nehme die Gesamtstruktur von meinem Projekt und da dient es dann der Übersichtlichkeit, wenn ich mich nicht im Detail meines Bundles verliere, sondern wenn ich das große Ganze im Auge behalte, also das "web"-Verzeichnis selbst befülle. Ich brauche also eine CSS-Datei. Das heißt, ich brauche aber auch den Inhalt von dieser "starter-template.css". Dazu gehe ich jetzt zurück in meinen Browser und da habe ich ja noch die Starter-Vorlage liegen. Mit Strg+U bewege ich mich noch mal in den Quellcode und hier habe ich einen Link zu besagtem Starter-Template. Und da werde ich mir jetzt diese CSS-Anweisungen einfach herauskopieren mit Strg+C, gehe dann zurück in meine IDE und werde jetzt innerhalb meines "css"-Verzeichnisses, eine neue CSS-Datei anlegen. Und die nenne ich "grund", weil ich dann eventuell auch noch anderes CSS einbinden möchte. Hier, den oberen Teil entferne ich und mit Strg+V füge ich jetzt diese CSS-Befehle ein, die eben dafür sorgen, dass ich etwas mehr Luft nach oben bekomme, bzw. dass meine Inhalte zentriert werden. Gut. Ich speichere meine "grund.css" und muss jetzt in einem nächsten Schritt diese Verlinkung anpassen. Und wie schon erwähnt, haben wir die Möglichkeit, auf eine Twig-Funktion zuzugreifen. Ich beginne also mit den geschwungenen Klammern und innerhalb der geschwungenen Klammern kann ich jetzt auf dieses web-Verzeichnis; verkürzt, mithilfe von "asset" zugreifen. Die Adresse selbst steht dann in geschwungenen Klammern und ich brauche eben nur eine relative Pfadangabe zu machen, das heißt, ich verweise auf meinen "css"-Ordner und innerhalb des "css"-Ordners liegt meine "grund.css". So, das wär’s soweit, bis auf das, dass mir dieses Gesamterscheinungsbild noch nicht ganz gefällt, das heißt, ich lege mir meine CSS-Datei hier unterhalb des CDN-Servers ab. Ich habe hier noch einen speziellen Block für Stylesheets, der ist dafür da, würde ich lokal in einer meiner Kind-Templates auf ein spezielles CSS verweisen wollen. Sonst sollte dies hier jetzt reichen, dass sich meine Ansicht, nachdem ich gespeichert habe, im Browser verändert. Ich klicke also jetzt nochmal auf meinen Browser, erneuere die Ansicht, und tatsächlich rutscht jetzt meine Überschrift so weit runter, dass sie gut lesbar ist. Um also Dateien einbinden zu können, die dann über den Browser abrufbar sind, gibt es innerhalb von Symfony die Möglichkeit im "web"-Verzeichnis alles Nötige unterzubringen.

Symfony Grundkurs

Steigen Sie in die moderne und flexible PHP-Entwicklung mit dem praktischen Framework ein.

2 Std. 35 min (34 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Software:
Exklusiv für Abo-Kunden
Ihr(e) Trainer:
Erscheinungsdatum:18.01.2017
Laufzeit:2 Std. 35 min (34 Videos)

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!