Event-Kalender mit SQLite

[Werner-Zenk.de]

Ich habe da mal wieder eine Idee, und zwar möchte ich einige BBCodes umbenennen.
Mich nervt es einfach das man für ein Bild einen fünfstelligen Code eingeben muss [img],
also mit Bildpfad dann [img=bild.png].
Besser wäre [m], das kann man sich einfacher merken

[m=bild.jpg][/m]
[v=video.mp4][/v]
[z]Zentriert[/z]
[a=audio.mp3][/a]

[Tommy Herrmann]

Moin Werner,

hmm - warum nicht - der Grund ist ja wohl eher die teilweise "bekannte" Schreibweise und dass man mit einem Buchstaben öfter mal nicht auskommen könnte.

Ich mache da aber gerne mit

Wofür steht dann "m" - für Mamamia - logisch wäre ja dann "i" nur steht das ja für kursiv ("italic")

Dies ist der bisherige BBCode bei mir im Kalender - man muss dann eben aufpassen, denn mit einem Buchstaben kann es schnell mal daneben gehen:

Code: Alles auswählen

[i]Kursiv[/i] 
[s]Durchgestrichen[/s] 
[q]Quotieren[/q] 
[u]Unterstrichen[/u] 
[c=#FF0000]Schrift Farbe[/c] 
[bc=#FFFF00]Hintergrund Farbe[/bc] 
[center]Zentriert[/center] 
[img=image.jpg]optionale Beschreibung[/img] 
[video=film.mp4]optionale Beschreibung[/video]
[youtube=YE7VzlLtp-4]optionale Beschreibung[/youtube]
[url=https://www.domain.de/]verlinkter Text[/url]

[Werner-Zenk.de]

..."
Wofür steht dann "m" - für Mamamia - logisch wäre ja dann "i" nur steht das ja für kursiv ("italic")
"...

Nee, das ist meiner Fantasie entsprungen, besser wäre [g] für Grafik gewesen

Die Aussagekraft geht da etwas verloren, das müsste dann in der optionalen Beschreibung mit hinein:
[y=YE7VzlLtp-4]Youtube-Video mit optionaler Beschreibung[/y]

Und was ist mit [url] ?
[r=https://www.domain.de/]verlinkter Text[/r]

[Werner-Zenk.de]

Im Gegensatz zu anderen Auszeichnungssprachen ist BBCode nicht offiziell reglementiert, unterscheidet sich also von Implementierung zu Implementierung. Der grundlegende Aufbau und Umfang ist jedoch großteils gleich und bildet einen De-facto-Standard. Größere und auf ein Thema spezialisierte Foren erweitern den Standardsatz von BBCodes oft durch einige eigene Codes.

Ich habe da schon immer in meinen Scripten damit experimentiert und teilweise neue BBCodes erfunden ...

[Werner-Zenk.de]

[samp], [mark], [red], [blue], [green], [yellow], [pic], [details]
Das sind nur einige Beispiele, die ich in der Kommentarfunktion auf meiner Website verwende.

[Tommy Herrmann]

nee - ist ja auch sehr gut - wie auch immer. Ich denke nur manchmal, dass Du Dir so viel Gedanken und Arbeit machst für Dinge die jetzt schon Luxus sind.

Hast Du eigentlich ein Tutorial wie und warum man überhaupt BBCode erstellt? Das wäre zum Verständnis eine tolle Sache. Damit tue ich mich auch immer wieder schwer.

... ich meine - so etwas ist nicht gerade so ohne weiteres für jeden verständlich:

Code: Alles auswählen

$txt = preg_replace('/\[youtube=(.*)\](.*)\[\/youtube\]/Uism', '<figure><iframe width="90%" height="360" src="https://www.youtube.com/embed/$1"></iframe><figcaption>$2</figcaption></figure>', $txt); // [youtube]

... vor allen Dingen das Maskieren müsste man mal langsam und klar erklärt bekommen und warum das so wichtig für die Sicherheit ist.

[pinky]

Hallo zusammen,

ich habe mal eine dumme Frage. Welche Dateien muss ich alle auf den Server laden, um das Update zu erhalten? Ich habe auch manuelle Änderungen an der CSS-Datei vorgenommen, wenn ich das richtig verstehe, dann muss ich meine Anpassungen wieder in die neue CSS-Datei einbringen. Ist das soweit richtig?

[Tommy Herrmann]

Hallo Pinky,

das ist leider so nicht zu sagen und auch nicht so ohne weiteres zu erkennen.

Ganz oft sind alle Dateien betroffen und da fängt man dann quasi immer wieder neu an. Das ist dann auch nicht so einfach, da man ja selbst nicht weiß was Werner alles geändert hat, insbesondere wenn auch die SQLite-Datenbank neue Felder erhalten hat.

Ich habe seit Jahren das kostenlose Programm "WinMerge" (tolles Programm) und vergleiche dann immer diese 3 Dateien:

javascript.js
kalender.php
style.css

https://winmerge.org/?lang=de

Ich persönlich auch noch die Datei "lies_mich.txt", da ich diese ja auch auf meiner Tutorials-Seite anzeige und auch ins Englische übersetze. Ich habe ja fast mehr englische als deutsche Besucher

Es ist ja eben ganz oft nicht nur die CSS, sondern ganze Klassen und viele andere Dinge werden vom Werner oft verbessert, die ja dann auch in der Datei kalender.php und/oder auch in der Datei javascript.js angepasst wurden.

Ich habe dann meine persönlichen Änderungen in allen Dateien markiert mit:

EDIT Tommy

Hier kannst Du das in meiner CSS-Datei vom Kalender mal sehen:

https://www.mobirise-tutorials.com/Even ... /style.css

... und so finde ich Änderungen recht schnell wieder und muss dann jedes Mal gucken, ob ich da was selbst anpassen muss oder nicht.

Das muss ich natürlich nur für die Datei(en) machen, bei denen ich selbst etwas verändert habe (wie bei der "style.css"). Wenn ich sehe, dass sich z.B. an der Datei javascript.js etwas verändert hat, dann verwende ich einfach die neue Datei.

Dabei habe ich mir in der Eile und der Begeisterung schon ganz oft alles zerschossen

Fertige Dir also ausreichende Sicherungen an. Ich habe auch ein Testverzeichnis mit den identischen Dateien am Server, bei dem ich das (meist) zunächst teste.

Mit "WinMerge" lädt man beide Dateien (links meinetwegen die neue und rechts die alte). Dann wird einem sehr klar jede Änderung angezeigt. Man kann diese dann von einer Seite zur anderen schieben oder es eben lassen. Ohne so ein Programm ist das eigentlich fast nicht möglich.

[Werner-Zenk.de]

@Pinky
Am besten ist es, du schreibst dir deine Änderungen in eine Text-Datei. So brauchst du nur von dort wieder zu kopieren und einzufügen.

Man muss da nicht alle Aktualisierungen mitmachen, die ich da herausbringe, oft sind es nur Kleinigkeiten.
Außerdem ist es besser das jeder das Script individuell anpassen kann, als wenn es ein kompiliertes Programm ist, wo nur der Programmierer Änderungen vornimmt.

Mir fällt es auch oft recht schwer die geänderten Sachen zu dokumentieren, weil viele Dinge voneinander abhängig sind.

@Tommy
Um es dem Benutzer etwas einfacher zu machen, können die BBCodes nun markiert und kopiert werden (via Tooltip):

[Tommy Herrmann]

... sehr gute Idee

[Tommy Herrmann]

Moin Werner,

Du verwendest ja (normalerweise) kein Bootstrap, wollte aber mal auf das "Popover" von Bootstrap aufmerksam machen. Gucke mal hier (am 2. Link klicken):

https://www.mobirise-tutorials.com/Test ... k/#Popover

... und hier die Bootstrap-Dokumentation:

https://getbootstrap.com/docs/5.0/components/popovers/

[pinky]

@Tommy vielen Dank für die Antwort. Ich hatte mir das schon beinahe so gedacht. Der Tipp mit der Software ist richtig gut für mich. Habe sie sofort runtergeladen.

@Werner, ich werde es auch so machen. Alle Änderungen werde ich in separaten Dateien ablegen, dann kann ich diese später kopieren und einfügen.

[Werner-Zenk.de]

Moin Werner,

Du verwendest ja (normalerweise) kein Bootstrap, wollte aber mal auf das "Popover" von Bootstrap aufmerksam machen. Gucke mal hier (am 2. Link klicken):

https://www.mobirise-tutorials.com/Test ... k/#Popover

... und hier die Bootstrap-Dokumentation:

https://getbootstrap.com/docs/5.0/components/popovers/

Das funktioniert hervorragend
Ich suche halt immer nach einer Lösung, die möglichst einfach ist, weil kompliziert kann jeder
Der Kalender soll nicht mit irgendwelchen Funktionen, Anweisungen und Skripten vollgestopft werden.

Das macht die Editierbarkeit dann umso schwieriger, zum Beispiel in CSS mit dem @media-Regeln.
Am besten ist es, der Browser übernimmt die Darstellung selbst vor, ohne dass man da eingreifen muss.

Es gibt eine neue Version des Kalenders mit dem geänderten BBCode und dem Tooltip zum Herunterladen.

[Tommy Herrmann]

Hallo Werner,

bei Dir am Server zeigt es aber immer noch die Version vom 30.04.2022.

Hast Du das schon aktualisiert? Ich sehe noch den gleichen Code ...

[Werner-Zenk.de]

Das hatte ich vergessen zu aktualisieren weil ich zurzeit an zwei anderen Projekten arbeite. Außerdem habe ich einen Fehler auf meiner Website behoben, den mir jemand per Mail gesendet hatte.

[Tommy Herrmann]

Moin Werner,

vielen Dank für diese Anpassungen vom 03.05.2022.

Komischer Weise wird bei Mausüber bei allen Dateien noch das Datum vom vorherigen Update vom 30.04.2022 an Deinem Download-Link angezeigt.

Ich habe die Änderungen zum großen Teil übernommen:

https://www.mobirise-tutorials.com/Even ... er-SQLite/

Diesmal weiche ich mit meinen persönlichen Einstellungen allerdings etwas von Deinen ab.

Im BBCode bleibe ich bei meinen ursprünglichen Codes, da ich sonst ein bis drei Jahre Kalender-Einträge ändern müsste

... und wenn ich den BBCode jetzt auch kopieren kann - was ich super gut finde - ist das ja ohnehin vollkommen egal.

Solche Änderungen sind im Nachhinein nicht gerade vorteilhaft, wenn man eventuell schon Dutzende oder Hunderte von Einträgen im Kalender hat. Daher habe ich den geänderten BBCode gar nicht übernommen.

Code: Alles auswählen

  // EDIT Tommy - center, img, audio, video - nicht übernommen
  // EDIT Tommy - youtube, url - hinzugfügt
  $txt = preg_replace('/\[center\](.*)\[\/center\]/Uism', '<div style="text-align:center;">$1</div>', $txt); // [center]
  $txt = preg_replace('/\[img=(.*)\](.*)\[\/img\]/Uism', '<figure><img src="$1" title="$2" alt="$2"><figcaption>$2</figcaption></figure>', $txt); // [img=url]
  $txt = preg_replace('/\[video=(.*)\](.*)\[\/video\]/Uism', '<figure><video controls><source src="$1"></video><figcaption>$2</figcaption></figure>', $txt); // [video=url]
  $txt = preg_replace('/\[youtube=(.*)\](.*)\[\/youtube\]/Uism', '<figure><iframe width="100%" height="360" src="https://www.youtube.com/embed/$1"></iframe><figcaption>$2</figcaption></figure>', $txt); // [youtube=ID] EDIT von Tommy
  $txt = preg_replace('/\[url=(.*)\](.*)\[\/url\]/Uism', '<a href="$1" style="text-decoration: underline;" class="text-primary" target="_blank">$2</a>', $txt); // [url] EDIT von Tommy

Dann habe ich natürlich auch mein Tooltip-Fenster zur Anzeige vom BBCode entsprechend angepasst und dieses auch von 250px auf 350px Breite in der Datei "style.css" an der <span> class="tip" geändert.

Dabei ist mir aufgefallen, dass man den Code nicht über das Kontextmenü (rechte Maustaste) kopieren kann, da sich dann das Tooltip-Fenster schließt. Man kann hier tatsächlich nur die Tatstaturkürzel (Strg+Einfg und Shift+Einfg) verwenden. Geht das noch anzupassen, sodass man auch über das Kontextmenü kopieren kann? Ist jetzt nicht so wirklich wichtig - dachte nur weil viele es so gewöhnt sind.

[Werner-Zenk.de]

Moin Tommy,

bei mir funktioniert das mit dem Kontextmenü mit der Maus (das liegt am verwendeten Browser)
https://werner-zenk.de/test/2022-05-04-06-39-12.gif
Strg+C / Strg+V funktioniert auch, Strg+Einfg / Shift+Einfg habe ich noch nie benutzt.
Was allerdings nicht funktioniert ist die Kontext-Menü-Taste an der Tastatur, da verschwindet der Tooltip wieder.

Im BBCode bleibe ich bei meinen ursprünglichen Codes, da ich sonst ein bis drei Jahre Kalender-Einträge ändern müsste

... und wenn ich den BBCode jetzt auch kopieren kann - was ich super gut finde - ist das ja ohnehin vollkommen egal.

Mir war von vornherein klar, dass da solche Probleme auftreten können, ich habe ohnehin nur diese 6 Standard-Einträge, die ich jeden Monat verschiebe

Komischer Weise wird bei Mausüber bei allen Dateien noch das Datum vom vorherigen Update vom 30.04.2022 an Deinem Download-Link angezeigt.

Wichtig ist das erste Datum, Version vom: 03.05.2022

[Tommy Herrmann]

Moin,

ja tatsächlich - das geht nur am Firefox und an den Handy-Browsern mit dem Kontextmenü nicht

... ist das neu mit dem "Versionsdatum" oben in Deiner Anzeige. Bisher wurden doch immer die Daten der Dateien geändert angezeigt.

[Werner-Zenk.de]

Nee, das war schon immer so.
Auf dem PC zeigt mir diese Funktion auch die Anzahl der Verzeichnisse und die Namen an, im Web funktioniert dieses leider nicht

[Tommy Herrmann]

... also nee - ich habe mich ja bisher immer und nur nach diesen geänderten Daten gerichtet.

Jetzt (plötzlich) werden eben auch die 3 geänderten Dateien mit dem Datum von heute angezeigt: