Event-Kalender mit SQLite

PHP, CSS und JavaScript lernen. Anwendungen für Webseiten
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 2250
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Tommy Herrmann »

Hallo Werner,

wie ich in Deiner neuen Version vom 07.01.2022 gesehen habe, hast Du mittels:

htmlspecialchars

die Verwendung von HTML-Code untersagt.

Das finde ich persönlich ganz und gar nicht gut, denn nur der Admin kann das ja machen und ich sehe daher überhaupt keine Gefahr oder Notwendigkeit für diese Einschränkung, die z.B. in einem Forum natürlich vorhanden ist aber doch nicht in einem Editor, an den nur eine einzelne Person, nämlich der Inhaber des Kalender gelangen kann.

Ich kann auch meine YouTube-Videos, die ich bisher so angezeigt hatte, nicht mehr darstellen.

Code: Alles auswählen

<center><p><iframe style="box-shadow: 10px 10px 10px #999999; border-radius: 10px; max-width: 640px;" width="90%"  height="auto" src="//www.youtube.com/embed/YE7VzlLtp-4?feature=player_detailpage" frameborder="0" allowfullscreen></iframe></p></center>
Ich kann weder die URL noch den Einbettungscode (im Iframe) von YouTube in dem [video] BBCode Inhalt [/video] verwenden.

Code: Alles auswählen

  $text = preg_replace('/\[img=(.*)\](.*)\[\/img\]/Uism', '<figure><img class="bild" src="$1" title="$2"><figcaption>$2</figcaption></figure>', $text); // [img]
  $text = preg_replace('/\[video=(.*)\](.*)\[\/video\]/Uism', '<figure><video class="video" controls><source src="$1"></video><figcaption>$2</figcaption><figure>', $text); // [video]
Beides funktioniert nicht.

Man muss ja auch Videos von YouTube und eigene Videos unterscheiden, die ja einen vollkommen anderen Code haben. Ich muss z.B. zur Verwendung der in YouTube möglichen Konfigurationen den Einbettungscode verwenden und nicht etwas nur die URL. Bei YouTube Videos kann man keine Class oder HTML5-Attribute verwenden, die sich auf HTML5 Videos beziehen.

Hier im Forum habe ich z.B. den BBCode für ein YouTube-Video so definiert:

Code: Alles auswählen

[YouTube]{IDENTIFIER}[/YouTube]

<iframe style="box-shadow: 10px 10px 10px #999999; border-radius: 10px; max-width: 640px; margin-bottom: 12px;" src="https://www.youtube.com/embed/{IDENTIFIER}" width="90%" height="360" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Anwendung mit der YouTube ID:

Code: Alles auswählen

[youtube]YE7VzlLtp-4[/youtube]
Weiterhin habe ich mit der Möglichkeit HTML im Editor zu verwenden doch eine unvergleichlich bessere Möglichkeit der Darstellung als mit den paar BBCode-Definitionen in der Anwendung. Mal abgesehen davon, dass die Definition dieser BBCodes nur Profis vorbehalten ist und daher von 99% aller Anwender nicht erweitert oder geändert werden kann.

Wenn jemand mit seinem HTML-Code den Editor zerschießt ist das doch sein eigenes Vergnügen. Wer keine einfachen HTML Befehle beherrscht, der muss so etwas ja auch nicht in den Kalender einbauen. Das merkt man ja sehr schnell und kann es auch immer wieder rückgängig machen.



Ich beantrage daher das wieder rückgängig zu machen :D


Ich habe die Version vom 06.01.2022 also entsprechend wieder aufgespielt und weiter verwendet - auch müsste ich sonst das gesamte Jahr ändern.

Das würde ich ja gerne tun, nur habe ich den BBCode für ein Video nicht einsetzen können und kann diese Einschränkungen auch im Moment noch nicht verstehen.

Mit der vorherigen Version funzt das einwandfrei.

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


Video im Kalender.JPG


Bisher kann ich z.B. auch die "PiP" Funktion (Bild-in-Bild) von YouTube verwenden. Also dann meine Videos auch in besserer Größe (oder auch Fullscreen) betrachten. Das alles geht doch dann nicht mehr.

Für mich hat genau die Möglichkeit der eigenen Gestaltung einen Großteil des gesamten Kalenders ausgemacht :crying:


YouTube PiP.jpg


Habe auch mal gerade zusätzlich mal zum Testen den originalen Einbettungsode, den man bei YouTube an jedem Video durch Rechtsklick auf das Video erhält, wie auch an "Big Buck Bunny", einfach am 14.01.2022 eingefügt und lediglich die Höhe von "503" auf "300" verringert:

Code: Alles auswählen

<iframe width="894" height="300" src="https://www.youtube.com/embed/YE7VzlLtp-4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Einfacher und besser geht nicht.



Ich möchte auch Bilder nicht unbedingt immer auf die einmal definierte CSS darstellen, sondern in sehr unterschiedlicher Darstellung - oder auch mal links- rechtsbündig oder zentriert, mit oder ohne Border oder Schatten.

Code: Alles auswählen

img.bild,
video.video {
  display: Block;
  max-width: 100%;
  height: Auto;
  object-fit: fill;
  margin: 10px;
  border: Solid 1px #202020;
  box-shadow: -1px 0px 12px 2px #868686;
}
Das Video mit "Big Buck Bunny" stelle ich z.B. im Testeintrag vom 17.11.2022 in einer ganz anderen Größe dar als im Eintrag vom 13.01.2022.

Das alles konnte ich ja auch in meiner Version des MySQL-Kalenders ganz genauso tun:

http://www.nof-tutorials.com/Kalender-N ... 1/demo.htm

Das alles schränkt einen ungemein ein und für micht verliert dieser Kalender dadurch genau den Reiz, den er vorher hatte.
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 2250
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Tommy Herrmann »

Werner,

fehlt bei Deinem Video-Code nicht der / am schließenden <figure> ?

Code: Alles auswählen

  $text = preg_replace('/\[video=(.*)\](.*)\[\/video\]/Uism', '<figure><video class="video" controls><source src="$1"></video><figcaption>$2</figcaption><figure>', $text); // [video]
... ich habe jetzt dennoch mal versucht den BBCode für das YouTube-Video zu erstellen. Man trägt tann nur die ID vom Video ein, also z.B.:

Code: Alles auswählen

[youtube=YE7VzlLtp-4][youtube]

Code: Alles auswählen

  $text = preg_replace('/\[youtube=(.*)\](.*)\[\/youtube\]/Uism', '<figure><iframe width="90%" height="360" src="https://www.youtube.com/embed/$1"><figcaption>$2</figcaption></figure>', $text); // [youtube]
Das geht so weit - nur ist (warum auch immer) dann der Link unten

▶ Event bearbeiten

weg.
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 2250
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Tommy Herrmann »

Oh Mann,

so natürlich - hatte das schließende </iframe> vergessen :eek:

Code: Alles auswählen

$text = preg_replace('/\[youtube=(.*)\](.*)\[\/youtube\]/Uism', '<figure><iframe width="90%" height="360" src="https://www.youtube.com/embed/$1"></iframe><figcaption>$2</figcaption></figure>', $text); // [youtube]
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 2250
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Tommy Herrmann »

Werner,

entscheide Du ob mit oder ohne HTML-Code.

Dann baue ich das jetzt um - mit dem YouTube BBCode kann ich auch leben :D

Hier mit BBCode:


YouTube mit BBCode.JPG


Die CSS habe ich so ein wenig geändert:

Code: Alles auswählen

img.bild,
video.video {
  margin-left: auto;
  margin-right: auto;  
  display: block;
  max-width: 90%;
  height: Auto;
  object-fit: fill;
  margin: 20px;
  border: Solid 1px #202020;
  box-shadow: 5px 5px 5px #999999;
  border-radius: 5px;
}

CSS-Bilder.JPG
Benutzeravatar
Werner-Zenk.de
Moderator
Moderator
Beiträge: 347
Registriert: Di 8. Dez 2020, 19:42
Wohnort: Bamberg
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Werner-Zenk.de »

Moin Tommy,

es ist in PHP und anderen Programmiersprachen die Pflicht das man den Kontextwechsel (hier zu der SQLite Datenbank) behandelt.
Das ist immer wieder Thema in vielen Programmierforen und wird sehr oft nicht beachtet.
Auch wenn das hier nur ein kleines PHP-Script ist, du weißt nicht, wo das hingelangt und ob der dortige Benutzer genauso sorgfältig damit umgeht (Stichwort: Passwörter).
Der Hacker sitzt nicht irgendwo in Russland oder China, sondern in der Nachbarschaft bei Kollegen oder in der eigenen Familie ;)

Ich habe deine Versuche gesehen und erst dadurch meinen Fehler entdeckt ;)
Du kannst das PHP-Script einfach anpassen, indem du die Anweisung: htmlspecialchars() (3-mal vorhanden) entfernst.
fehlt bei Deinem Video-Code nicht der / am schließenden <figure>?
Vielen Dank :tu: das wurde korrigiert.
Die CSS habe ich so ein wenig geändert:
Das gefällt mir sehr gut, ich werde das übernehmen :cool:
Es grüßt euch,
Werner
https://werner-zenk.de - Webseiten erstellen, optimieren und aufpeppen

"Gib einem Menschen einen Fisch, und er wird für einen Tag satt.
Lehre ihn Fischen, und er wird ein Leben lang satt."
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 2250
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Tommy Herrmann »

Moin Werner,

das wollte ich hören - dann bleibe ich mit Deinen neuesten Änderungen konform. Ich füge dann noch den BBCode für die YouTube Videos hinzu - willst Du das auch machen oder hast Du es bereits gemacht?

Ich hoffe ich habe das mit dem YouTube BBCode richtig gemacht.

Was heißt das?:

/Uism
$text = preg_replace('/\[youtube=(.*)\](.*)\[\/youtube\]/Uism',
Benutzeravatar
Werner-Zenk.de
Moderator
Moderator
Beiträge: 347
Registriert: Di 8. Dez 2020, 19:42
Wohnort: Bamberg
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Werner-Zenk.de »

Tommy hat geschrieben:Was heißt das?:
/Uism
Das sind Suchmuster-Modifikatoren (PCRE-Modifikatoren) die zur Funktion: preg_replace() gehören.

(Zitat)
U
Dieser Modifikator kehrt die Gier von Quantifikatoren um, sodass sie standardmäßig nicht gierig sind, aber gierig werden.

i
Wenn dieser Modifikator gesetzt ist, passen Buchstaben im Suchmuster sowohl auf groß- als auch auf kleingeschriebene Buchstaben.

s
Wenn dieser Modifikator gesetzt ist, passt das Metazeichen Punkt im Suchmuster auf alle Zeichen inklusive Zeilenumbrüche. Ohne diesen Modifikator sind Zeilenumbrüche ausgeschlossen.

m
Standardmäßig behandelt PCRE eine zu durchsuchende Zeichenkette wie eine einzige Zeile von Zeichen (auch wenn sie tatsächlich mehrere Zeilenumbrüche enthält). Das Metazeichen für einen Zeilenanfang (^) passt nur auf den Anfang der Zeichenkette, das Metazeichen für ein Zeilenende ($) nur auf das Ende der Zeichenkette (falls der Modifikator D nicht gesetzt ist).
Es grüßt euch,
Werner
https://werner-zenk.de - Webseiten erstellen, optimieren und aufpeppen

"Gib einem Menschen einen Fisch, und er wird für einen Tag satt.
Lehre ihn Fischen, und er wird ein Leben lang satt."
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 2250
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Tommy Herrmann »

Ah - danke Werner :tu:

... ganz etwas Neues für mich gelernt :) :smoking:
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 2250
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Tommy Herrmann »

Hallo Werner,

ich habe da mal noch eine Frage zum besseren Verständnis.

Die Variablen "$1" - "$2" beziehen sich doch auf "preg_replace". Ist das immer was zuerst, bzw. als zweites eingetragen wird - wie ich annehme.

Kann man das theoretisch weiterführen - ginge auch "$3" und "$4", usw.?


P.S.:

ah - ich sehe gerade:

n kann einen Wert von 0 bis 99 haben



P.P.S.:

... ich habe jetzt zusätzlich den BBCode für "youtube" (Video) und "url" (Textlink) definiert.

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

Hoffe es ist so korrekt:

Code: Alles auswählen

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

$text = preg_replace('/\[url=(.*)\](.*)\[\/url\]/Uism', '<a href="$1" style="text-decoration: underline;" target="_blank">$2</a>', $text); // [url] EDIT von Tommy
Benutzeravatar
Werner-Zenk.de
Moderator
Moderator
Beiträge: 347
Registriert: Di 8. Dez 2020, 19:42
Wohnort: Bamberg
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Werner-Zenk.de »

Gefällt mir :tu:

Warum ist der Textbereich (Textarea) in deinem Screenshot so schmal?
admin-ansicht-2.jpg
Ich hatte die Breite auf 100% gestellt um eine möglichst große Eingabefläche zu erhalten:

textarea {
font-family: Verdana, Geneva, Tahoma, sans-serif;
margin-top: 3px;
width: 100%;
max-width: 100%;

height: 120px;
min-height: 120px;
max-height: 450px;
resize: vertical;
}

Wird das von Bootstrap überschrieben, fehlt da einfach nur ein !important
Es grüßt euch,
Werner
https://werner-zenk.de - Webseiten erstellen, optimieren und aufpeppen

"Gib einem Menschen einen Fisch, und er wird für einen Tag satt.
Lehre ihn Fischen, und er wird ein Leben lang satt."
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 2250
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Tommy Herrmann »

Moin,

ja - wollte ich Dich auch schon fragen. Auch mit !important bleibt es bei der Breite :confused:
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 2250
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Tommy Herrmann »

Das funktioniert erst in dem Moment, wenn ich die Breite auf Pixel stelle:

Code: Alles auswählen

textarea {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  margin-top: 3px;
  width: 300px;
  max-width: 100%;
  height: 120px;
  min-height: 120px;
  max-height: 450px;
  resize: vertical;
}
... finde den Fehler leider nicht und bekomme es nur mit einer Pixelangabe hin :confused:
Benutzeravatar
Werner-Zenk.de
Moderator
Moderator
Beiträge: 347
Registriert: Di 8. Dez 2020, 19:42
Wohnort: Bamberg
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Werner-Zenk.de »

Wenn ich das auf 400px stelle, geht die eigentliche Funktionalität verloren, die ich erreichen wollte:
400pixel.png
Dann ist die Angabe: resize: vertical; sinnlos, weil der Benutzer die Breite nicht anpassen kann :confused:
Bei mir im Firefox und Edge schaut das so aus:
100prozent.png
Es grüßt euch,
Werner
https://werner-zenk.de - Webseiten erstellen, optimieren und aufpeppen

"Gib einem Menschen einen Fisch, und er wird für einen Tag satt.
Lehre ihn Fischen, und er wird ein Leben lang satt."
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 2250
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Tommy Herrmann »

Die Textarea lässt sich auch nicht am "Greifer" breiter ziehen - nur nach unten.


Textarea Breite.jpg
Benutzeravatar
Werner-Zenk.de
Moderator
Moderator
Beiträge: 347
Registriert: Di 8. Dez 2020, 19:42
Wohnort: Bamberg
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Werner-Zenk.de »

Eben, das macht die Anweisung resize: vertical;

Ich habe das jetzt so geändert, also die 100% belassen und min-width: 330px; hinzugefügt:

Code: Alles auswählen

textarea {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  margin-top: 3px;
  width: 100%;
  max-width: 100%;
  min-width: 330px;
  height: 120px;
  min-height: 120px;
  max-height: 450px;
}
Es grüßt euch,
Werner
https://werner-zenk.de - Webseiten erstellen, optimieren und aufpeppen

"Gib einem Menschen einen Fisch, und er wird für einen Tag satt.
Lehre ihn Fischen, und er wird ein Leben lang satt."
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 2250
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Tommy Herrmann »

also gehen tut:

resize: both;

dennoch nicht die 100%. Auf die Angabe max-width: 90%; reagiert die Textarea aber sehr wohl.

Code: Alles auswählen

textarea {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  margin-top: 3px;
  /* EDIT Tommy - Breite von 100% auf 300px gestellt, da es sonst in Mobirise nicht funktioniert */
  width: 300px;
  max-width: 90%;
  height: 120px;
  min-height: 120px;
  max-height: 450px;
  /* EDIT Tommy - geändert von resize: vertical */
  resize: both;
}
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 2250
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Tommy Herrmann »

so funzt es - auch am Handy :hurra:

Code: Alles auswählen

textarea {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  margin-top: 3px;
  width: 100%;
  max-width: 100%;
  min-width: 300px;
  height: 120px;
  min-height: 120px;
  max-height: 450px;
  /* EDIT Tommy - geändert von resize: vertical */
  resize: both;
}
Benutzeravatar
Werner-Zenk.de
Moderator
Moderator
Beiträge: 347
Registriert: Di 8. Dez 2020, 19:42
Wohnort: Bamberg
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Werner-Zenk.de »

Nein, keine 100% , aber der Benutzer kann wenigstens die Breite anpassen was viel wichtiger ist.
Das hat bei mir auch schon vorher am Handy gefunzt :)
Es grüßt euch,
Werner
https://werner-zenk.de - Webseiten erstellen, optimieren und aufpeppen

"Gib einem Menschen einen Fisch, und er wird für einen Tag satt.
Lehre ihn Fischen, und er wird ein Leben lang satt."
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 2250
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Tommy Herrmann »

... also das Feld "textarea" kann ich am Handy an keinem Browser in der Größe verändern.

Nicht am:

Android
Firefox
Edge


... das geht bei mir nur am Desktop.
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 2250
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Tommy Herrmann »

... übrigens "Bootstrap" lässt auch bei Deinem normalen Formular nur ein vertikales "resize" zu:

https://www.mobirise-tutorials.com/Formular/

... da müsste man mal forschen. Mit "important" hatte ich schon sämtliche Anweisungen probiert.
Antworten

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast