[Anfänger ]Modul erstellen - Wohin mit HTML, JS und CSS?

    Hallo,


    ich versuche gerade ein einfaches Modul zu erstellen. Als erstes habe ich eine HTML Datei erstellt die alles beinhaltet was nun zu einem Modul werden soll.

    Also habe ich zuerst mir ein Tutorial angekuckt wo und wie man ein "Hallo Welt" Modul erstellt.


    Doch leider scheine ich wohl noch nicht ganz das Ganze verinnerlicht zu haben.

    Ich wollte den CSS und den JS Code jeweils in eine extern Datei auslagern.


    Und dann versuchte ich diesen mit

    $document = JFactory::getDocument();

    $document->addStyleSheet('/mod_test/media/css/style.css');

    $document->addScript('/mod_test/media/js/javascript.js');

    in der mod_test.php aufzurufen oder so ähnlich.


    Ok kurze Pause, damit ihr Zeit habt die Hände über den Kopf zusammen zuschlagen. ;)


    Ist das ganze Falsch so? Ich brauche jetzt keine vorgekaute Lösung. Aber ein kleiner Schubser in die richtige Richtung wäre klasse.

    Dann habe ich es so verstanden das man den HTML Code in die default.php im Ordner tmpl packt. Richtig?


    Mein bisheriges Ergebnis ist, das ein Button und Text im Template angezeigt werden. Und nur die HTML Formatierung greift. Sprich sowas wie <p></p>

    Wäre schon froh wenn meine CSS Formatierung greifen würde um schonmal ein kleines Erfolgserlebnis zu haben.


    Ich möchte ungern "einfach" nur die CSS Datei vom Template bearbeiten. Hatte vor das alles über das Modul gehen sollte.


    Bestimmt habe ich schon lauter Fehler beim Erstellen dieses Posts gemacht. Man verzeihe mir. Und ich gelobe Besserung. Werde wenn alles gut läuft hier viel Fragen. Wirklich viel. Also letzte Chance mich noch abzuwimmeln. xD


    Danke schonmal. :)


    Gruß

    Nachtrag: Vieleicht sollte ich noch erwähnen wie die Struktur meiner Dateien ist.

    Ich zippe folgende Dateien:

    - Ordner media (Unterordner je 1x css und js, da drin befinden sich je die externen css und js Dateien)

    - Ordner tmpl (Da drin die Dateien default.php und die index.html )

    - helper.php

    - index.html

    - mod_test.php

    - mod_test.xml

    Zitat von chr-hl

    Warum nicht, dafür bieten in der Regel Templates doch eine user.css oder custom.css an (siehe z.B. Protostar)


    Christian

    Vielen Dank für die Antwort. Nun ich hatte es mir so vorgestellt das ich einfach eine zip Datei am Ende habe und man später im Backend nur sowas wie Farben, Text über Forms einstellen kann. Es sollte halt auch wer mit dem Modul zurecht kommen ohne CSS, JS Kentnisse.

    Zitat von chr-hl

    Und hier noch ein Buchtipp, der m.E. auch dazu was hat >>> Buch


    Christian

    Das Buch hatte ich vorhin auch schon rausgesucht. Aber es ist von 2012. Hat sich in den letzten 5-6 Jahren bei Joomla nicht viel getan?

    Ich hab mir auch Tutorial Videos bei YT angesehen zum Thema Modul erstellen. Aber keiner ging auf das Thema CSS und/oder JS ein. Habe vieleicht auch einfach noch nicht das richtige gefunden.


    Ich kann zwar mein Modul an Joomla testen, zugriff auf die Dateien per FTP habe ich aber nicht. Also kann auch nicht nachsehen wie und wohin mein Modul kopiert wird.


    Das Ziel von dem Modul ist, wenn ich einen Button klicke, erscheint eine Meldung über die ausgegraute Webseite.

    Also nicht wirklich was Kompliziertes.

    Zitat von chr-hl

    Evtl. liest firstlady mit, die ist eine der Autoren und kann Dir sicherlich weiterhelfen.


    Christian

    Danke. Ich werde in der Zwischenzeit mal weiter Try and Error machen. xD


    Hatte auch extra mir schon irgendein Modul runtergeladen um dort in den Dateien vieleicht die Antwort zu finden. Aber Fehlanzeige.


    Hatte mir das ganze irgendwie leichter vorgestellt. Den Code in die Datei, diesen in die andere Datei und fertig.

    Zum Glück hab ich noch ein wenig Zeit um das ganze zu lernen und verstehen.

    Schau dir mal in Joomla das Modul mod_languages an.

    Zitat

    JHtml::_('stylesheet', 'mod_languages/template.css', array('version' => 'auto', 'relative' => true));

    Es ist heir vorausgesetzt dass dein manifest-file die betreffenden Dateien im Verzeichnis media abgelegt hat.


    Bei Joomla hat sich seit diesem Buch sehr, sehr viel geändert :) Das Prinzip stimmt immer noch, aber die Details nicht mehr.

    Zitat von firstlady

    Schau dir mal in Joomla das Modul mod_languages an.

    Es ist heir vorausgesetzt dass dein manifest-file die betreffenden Dateien im Verzeichnis media abgelegt hat.


    Bei Joomla hat sich seit diesem Buch sehr, sehr viel geändert :) Das Prinzip stimmt immer noch, aber die Details nicht mehr.

    Hallo, ich hab schnell bei Google geschaut was "meine" manifest-file ist. Und es ist wohl in meinem Fall die mod_test.xml


    Dort habe ich wegen der CSS und der JS Datei folgendes drin stehen.


    <media folder="media" destination="mod_test">

    <folder>css</folder>

    <folder>js</folder>

    </media>


    Bitte fragt jetzt nicht woher ich das habe. Das stand auf einer Seite, vieleicht habe ich auch den Kontext dazu nicht verstanden.


    Könnte ich die CSS/JS Dateien auch einfach in der Hauptordner tun und dann mit <files> einbinden? Oder erkennt Joomla diese dann nicht? Weil es ist ja wichtig das zumindest die CSS Datei irgendwie in den Headbereich der Webseite verlinkt wird.


    Ach bevor ich es vergesse. PHP Kenntnisse sind bei mir sehr "mau". Aber das soll mich nicht abhalten. :)


    Vielen Dank.


    Gruß

    Es ist einfach Konvention, dass (nicht nur) Module Ihre CSS, JS in Joomlas /media/-Ordner ablegen. Dein <media folder="media" destination="mod_test"> ist also die empfohlene und richtige Art.


    Warum?


    1) Wenn du dir die Standard-robots.txt von Joomla anschaust, findest du eine Zeile "Suchmaschinen sollen nicht im Ordner /modules/ rumsuchen". Z.B. Google meckert dann aber, wenn deine CSS und JS darin für Bots gesperrt sind.


    2) firstlady hat dir oben eine Zeile geliefert, die

    a) die Eingabe für dich vereinfacht.

    b) es Usern erleichtert Overrides der CSS und/oder JS in ihrem Templateordner zu hinterlegen.

    c) dir die Kontrolle insofern etwas erleichtert, weil in deinem Seitenquelltext die CSS nicht erscheint, wenn sie gar nicht existiert (du was falsch gemacht hast).


    Am Beispiel einer blah.css deines Moduls in /media/mod_test/css/. Der Ordner wird angelegt, während du das Modul installierst!!


    JHtml::_('stylesheet', 'mod_test/blah.css', array('version' => 'auto', 'relative' => true));


    Das relative=true sorgt dafür, dass erst im Template des Benutzers gesucht wird, ob eine Datei

    /templates/TEMPLATENAME/css/mod_test/blah.css

    existiert. Wenn ja wird diese gezogen. Wenn nein, wird automatisch die

    /media/mod_test/css/blah.css

    genommen.


    Lässt du das relative=true weg, musst du den ganzen Pfad zur CSS in der JHtml-Zeile angeben. Verbaust aber Nutzern die Möglichkeit von Overrides.


    Diese JHtml-Zeilen kannst du (nahezu) zu jedem Zeitpunkt in jeder PHP-Datei des Joomlas bzw. deines Moduls angeben.

    Hallo,


    Vielen Dank an alle hier.

    Jetzt wird die CSS Datei mit berücksichtigt. Also der Button hat nun Farbe usw.

    Super. :)


    Da musste ich doch glatt nochmal direkt auf die Lösung hingewiesen werden.

    Und vielen Dank auch für die Erklärung.


    Ob das auch mit der JS Datei geht, werde ich mal testen. Aber mein Gefühl sagt mir, das ich da dann doch etwas mehr PHP machen muss um die Funktionen aufzurufen.


    Aber mal schauen.

    Info für den Leser:

    JHtml::_('script', 'mod_test/blah.css', array('version' => 'auto', 'relative' => true));

    Wäre dann für die externe JS Datei. Hatte zuerst "javascript" statt "script" versucht. Da gab es dann nur einen 500er Fehler mit nicht gefunden.


    Wenn ich im Browser den Quellcode mir anzeigen lasse, steht die Datei da nun mit dabei. DIe Scripte werden zwar nicht ausgeführt. Aber sie ist immerhin nun auch mit an Bord. :)

    Wenn dann für JS

    JHtml::_('script', 'mod_test/blah.js', array('version' => 'auto', 'relative' => true));


    Einen 500-Fehler mag ich mir eigentlich nicht vorstellen, da diese Zeilen einfach nix tun, wenn die Datei nicht existiert.


    Stelle in solchen Fällen "Fehler berichten" auf "Maximum" (Was man beim Entwickeln eh machen sollte) und aktiviere den Debugmodus in der Joomla-Konfiguration. Letzterer zeigt dann oft den Weg zum Fehler. Wenn du dann noch die error.php deines Templates durch Umbenennen deaktivierst, kannst sicher sein, dass alles ausgegeben wird, was Joomla eben an Fehlerhinweisen auf solchen toten Seiten ausgeben kann.

    Ja, natürlich mit *.js

    So habe ich es auch bei mir hier stehen. :) Ich ändere das mal oben nochmal.

    Die error.php vom Template kann ich nicht umbennen. Da ich keinen Zugriff auf die Datei habe. Ich hab Joomla auch nicht selber installiert und mache dies alles hier gerade in einer Entwicklungsumgebung. Anders kann ich das gerade nicht bennen. Hab aber einen Account mit Adminrechten bei Joomla.


    Und die Fehlermeldungen habe ich schon auf Maximum eingestellt, nachdem ich gestern eine nichts sagende weiße Seite auf einmal hatte. :)


    Edit: Kann den Beitrag oben nicht mehr editieren. Aber ein aufmerksamer Leser wird sicher den Fehler bemerken und nicht duplizieren.

    Zitat von Neewmla

    Hab aber einen Account mit Adminrechten bei Joomla.

    Dann kannst du, wenn du damit Super User meinst (Administrator-Gruppe weiß ich nicht), die Dateien auch via Template-Manager im Joomla-Backend bearbeiten. Vielleicht macht aber die Template-error.php eh schon was sie soll und zeigt die besagten Daten auch an. Gelegentlich halt nicht. Kommt aufs Template drauf an. Wenn du Protostar verwendest, ist das gegeben.

    Gerade mal nach geschaut. Mein Account gehört zur Super User Gruppe. Das Template was hier genutzt wird heisst "Haven".

    Bin auch die ganze Zeit damit beschäftigt den nun formatierten Button an seine Position zu bringen. Das Template macht es mir nicht so leicht. :)


    Aber das klappt schon noch.

    Morgen werde ich dann versuchen das mein JS Code beim betätigen des Buttons auch ausgeführt wird.

    Die restliche Zeit von heute, werde ich mich mit dem Template anlegen und drauf bestehen das der Button dorthin kommt wo er hin soll. xD