Event-Kalender mit SQLite

PHP, CSS und JavaScript lernen. Anwendungen für Webseiten
Benutzeravatar
hansjuerg
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 116
Registriert: Di 15. Dez 2020, 12:54
Wohnort: Urdorf ZH
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von hansjuerg »

Danke Tommy, werde versuchen, ob ich das so hinkriege :tu:
Schöne Grüsse aus der Schweiz :)
hansjuerg

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

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Tommy Herrmann »

Kopiere doch einfach mal zunächst als Test alle Dateien und Verzeichnisse aus dem Download von meiner Seite in irgendein Verzeichnis am Server. Erstelle z.B. ein Verzeichnis "test":

Zuvor solltest Du den Beispiel Benutzer "user" und das Passwort "0000" in der Datei "kalender.php" (ganz oben) mit Deinen Daten ersetzen, dann kann da keiner an der Datenbank was eintragen aber Du kannst testen und selbst mal einige Einträge vornehmen und auch wieder löschen.

// Namen und Passwörter der Benutzer
$NAME_PASS["user"] = "0000";

Rufe dann in diesem Verzeichnis "test" mal die Datei "demo.htm" mit dem Browser auf.

Dann sieht das so aus und Du weißt schon mal, dass das funktioniert. Das ist das Original-Skript vom Werner, meinen Kalender habe ich vom Design etwas nach meinen Vorstellungen angepasst.

https://www.mobirise-tutorials.com/Even ... t/demo.htm
Benutzeravatar
hansjuerg
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 116
Registriert: Di 15. Dez 2020, 12:54
Wohnort: Urdorf ZH
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von hansjuerg »

Das hat perfekt funktioniert, besten Dank Tommy.

Ich brauche jetzt eine Pause :D und versuche dann den Kalender auf die VMCU-HP zu bringen.
Schöne Grüsse aus der Schweiz :)
hansjuerg

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

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Tommy Herrmann »

Wenn man mit SQLite-Datenbanken - was eigentlich Textdateien sind - arbeitet, sollte man sich auch ein Programm dafür downloaden.

Ich empfehle den kostenlosen "SQLite Browser":

https://sqlitebrowser.org/

Also diese Datei "datenbank.db" hin und wieder auf den PC kopieren und somit sichern.

Mit dem SQLite-Browser könntest Du die Datenbank dann auch bequem ändern.

Ich habe den zum Beispiel sehr häufig benötigt - in der Zeit der Entwicklung, in der Werner Zenk ständig was geändert hat. Da kamen dann öfter mal Spalten in der Datenbank hinzu und die musste ich dann händisch dort einpflegen, da ich schon jede Menge Einträge in der Datenbank hatte und nicht immer wieder von vorne beginnen wollte.

Einfach diese Anwendung mal downloaden und damit die Datei "datenbank.db" laden und nur gucken.

Also bitte nicht mit einem normalen Editor, denn das würde die SQLite-Datenbank zerstören.
Benutzeravatar
hansjuerg
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 116
Registriert: Di 15. Dez 2020, 12:54
Wohnort: Urdorf ZH
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von hansjuerg »

Genau, den SQL-Browser habe ich bereits installiert.
Ich habe auf dem Server ein Verzeichnis "kalender" erstellt und alle Dateien dorthin kopiert. Kann ich das so lassen und in der kalender.php einfach den Pfad anpassen?
Schöne Grüsse aus der Schweiz :)
hansjuerg

VMC Urdorf
Benutzeravatar
hansjuerg
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 116
Registriert: Di 15. Dez 2020, 12:54
Wohnort: Urdorf ZH
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von hansjuerg »

Kalender.jpg
Schöne Grüsse aus der Schweiz :)
hansjuerg

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

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Tommy Herrmann »

Nein - nichts in ein Verzeichnis - die Skripte sind für das Stammverzeichnis des Projektes geschrieben - sonst stimmen ja sämtliche Pfade nicht mehr.

So sieht das in meinem Projekt-Verzeichnis am Server aus:


Stammverzeichnis Projekt.jpg


Bitte lies mein Tutorial aufmerksam, da steht das doch alles.

https://www.mobirise-tutorials.com/Even ... er-SQLite/
Benutzeravatar
hansjuerg
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 116
Registriert: Di 15. Dez 2020, 12:54
Wohnort: Urdorf ZH
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von hansjuerg »

Okay, ich blick da aber nicht durch. Im Stammverzeichnis habe ich ja bereits ein Verzeichnis db, das auch noch passwortgeschützt ist.
Was passiert denn jetzt, wenn ich die Dateien ins Stammverzeichnis kopiere und es da bereits ein solches Verzeichnis gibt?
Schöne Grüsse aus der Schweiz :)
hansjuerg

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

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Tommy Herrmann »

Du schreibst also die beiden Verweise in den Bereich "Inside <head> code" in die Seiteneinstellungen:

Code: Alles auswählen

<link rel="stylesheet" href="style.css" /> 
<script src="javascript.js" defer></script>
... eventuell kann man später die CSS-Datei "style.css" vom Werner noch etwas an seine Wünsche anpassen.

Dann bindest Du lediglich dieses <div> zum Aufruf der Datei "kalender.php" in irgendeinen Block ein. Ich habe dafür einen einfachen Textblock aus der Rubrik "Article" verwenden und damit den Beispieltext ersetzt.

Code: Alles auswählen

<div id="kalender"></div>
Pass nur auf, dass da keine <p> Tags </p> außen um das <div> stehen bleiben, ein <div> darf nicht von <p> Tags </p> umschlossen sein.


Kalender Einbindung im Code-Editor.jpg
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5743
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Tommy Herrmann »

Wenn das Verzeichnis "db" mit einer .htaccess Datei passwortgeschützt ist, kannst Du dennoch intern darauf verweisen, denn dieser Schutz gilt ja nur nach außen - also für einen Aufruf von außen aber nicht vom Skript.

Du brauchst doch gar nicht das Verzeichnis "db" drüber kopieren, sondern nur die SQLite-Datei "datenbank.db" in das vorhandene Verzeichnis "db" kopieren.

Das ist doch Deinem Verzeichnis "db" vollkommen egal wieviele Dateien da drinnen sind.

Das ist doch sowieso alles, was da im Verzeichnis "db" vom Werner drinnen ist - eben die Datei "datenbank.db" und eine .htaccess Datei (die Datei "htaccess" lässt Du dann aber weg, um die vorhandene htaccess nicht zu überschreiben).

Außerdem hatte ich Dir doch schon weiter oben geschrieben, dass Du auch gerne ein eigenes Verzeichnis für die SQLite-Datenbank erstellen kannst:

viewtopic.php?p=8230#p8230
Benutzeravatar
hansjuerg
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 116
Registriert: Di 15. Dez 2020, 12:54
Wohnort: Urdorf ZH
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von hansjuerg »

jaaaaa! :tu:

https://vmcu.ch/kalender.html

Vielen Dank Tommy - super Support wie immer!

Jetzt muss ich nur noch Titel und Breite vom Kalender etwas anpassen. Aber für heute reichts.

Allseits ein schönes Wochenende.
Schöne Grüsse aus der Schweiz :)
hansjuerg

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

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Tommy Herrmann »

Moin,

prima :tu:


Tipp:

Am Desktop kannst Du, wenn man will, auch den Kalender breiter als jetzt bei Dir machen. In Mobirise kannst Du ja die Breite des Textblocks einfach breiter/schmaler einstellen, der Kalender passt sich dann an.


Meine CSS (Style zum Kalender) habe ich etwas von Werners abgeändert.

Du kannst meine CSS-Datei auf meiner Tutorial-Seite zum Event-Kalender:

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

... einsehen, ich habe diese dort verlinkt als "CSS Datei" und alle meine Änderungen markiert mit:

EDIT Tommy

... wonach Du dann also suchen könntest, um diese Änderungen zu finden.

Hier ist diese CSS-Datei auch nochmals zur Ansicht:

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


In der aktuellen CSS-Datei "style.css", die Du nun auch aus dem Download verwendest, scheint Werner einen kleinen Fehler drinnen zu haben, den ich dort geändert habe.

Das betrifft also die Zeile der Navigation mit Monat und Jahr.

Hier steht ungefähr bei Zeilennummer 480:

Code: Alles auswählen

   table#tabelle th#navigation {
    word-spacing: 8px;
  }
Ich habe das so wie unten geändert, da sonst die Schrift in der Navigation zu groß ist (auch bei Dir am Handy) und die gesamte Tabelle dadurch am Smartphone zu breit wird. Ich habe also den Abstand zwischen den Wörtern entfernt und die Schriftgröße auf 1.0rem gesetzt:

Code: Alles auswählen

 /* EDIT Tommy word-spacing auf 0 und font-size kleiner */
  table#tabelle th#navigation {
    word-spacing: 0px;
    font-size: 1.0rem;
  }
Ich habe die Anpassung dieser Breite für das Handy nun auch in meiner CSS-Datei im Download-Archiv geändert, sodass es am Smartphone besser passt.

https://www.mobirise-tutorials.com/Download-Archiv/





Falls Du diese bewegten Monatsbilder nicht haben willst (man könnte die Monatsbilder auch in der Datei "kalender.php" ganz entfernen), also die Animation weglassen willst, dann deaktive oder lösche mal das hier noch bei ca. Zeilennummer: 357

Code: Alles auswählen

  /* EDIT Tommy Animation entfernt
  animation: bewegeMonatsbild 25s 2s ease-in-out infinite alternate; */
Ich deaktiviere durch Kommentare meist lieber solche Änderungen, anstatt diese gleich zu löschen - so kann ich bei Bedarf auch alles wieder ganz einfach rückgängig machen.

In CSS schreibt man Kommentare so, kommentierte Zeilen werden dann nicht verarbeitet.

/* Hier steht ein Kommentar */

also alles was zwischen "Slash Stern" und "Stern Slash" steht ist ein Kommentar.
Benutzeravatar
hansjuerg
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 116
Registriert: Di 15. Dez 2020, 12:54
Wohnort: Urdorf ZH
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von hansjuerg »

Guten Morgen Tommy

Danke für die wertvollen Tipps :tu:

Die Anpassung für die Breite am Handy habe ich gemacht. Dazu noch die Wochentage Samstag und Sonntag etwas hervorgehoben. Bekomme langsam Spass mit dieser CSS-Datei zu spielen :D

Noch eine Frage; ist das normal, dass ich den Kalender im Bearbeitungsmodus von Mobirise nicht sehe?
Schöne Grüsse aus der Schweiz :)
hansjuerg

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

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Tommy Herrmann »

Ja - den kannst Du nicht sehen können, da diese Skripte vom Werner immer in PHP programmiert sind.

PHP ist eine eigene Skriptsprache, die Du zwar von Deinem Provider am Server verwenden kannst, aber nicht lokal.

Lokal müsstest Du PHP erst installieren mit z.B. einem lokalen Server wie "XAMPP", dann würdest Du aber immer noch nichts in Mobirise sehen, sondern erst nach Aufruf des Projektes durch XAMPP.

Es ist aber auch immer besser gleich am Server vom eigenen Provider zu testen, denn der könnte andere Einstellungen haben. Außerdem sind solche lokalen Server wie XAMPP ziemlich kompliziert und man muss das erst sehr lange lernen.

Einen lokalen Server verwendet ganz sicher unser Werner, wenn er diese Sachen alle programmiert, dann kann er alles immer sogleich überprüfen.
Benutzeravatar
hansjuerg
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 116
Registriert: Di 15. Dez 2020, 12:54
Wohnort: Urdorf ZH
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von hansjuerg »

Alles klar - danke dir. :tu:
Schöne Grüsse aus der Schweiz :)
hansjuerg

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

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Tommy Herrmann »

Das hat also überhaupt nichts mit Mobirise zu tun sondern nur mit den PHP-Skripten. Doppelklicke doch mal zum Starten die dem Download beiliegende Datei "demo.htm" am PC und da siehst Du dann lokal auch nichts.

... oder Doppelklicke zum Starten im Browser mal die PHP-Datei "kalender.php", dann kannst Du auch gut erkennen, dass dem PC die Skriptsprache PHP fehlt, denn es wird nur der Code angezeigt aber nichts ausgeführt.


PHP-Code.jpg
Benutzeravatar
hansjuerg
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 116
Registriert: Di 15. Dez 2020, 12:54
Wohnort: Urdorf ZH
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von hansjuerg »

Letzte Frage für heute :)

Wo kann ich die Schriftgrösse der Eventeinträge anpassen (verkleinern)?
Ich habe das gefunden - da passiert aber nichts.
Dateianhänge
Font.jpg
Font.jpg (7.06 KiB) 754 mal betrachtet
Schöne Grüsse aus der Schweiz :)
hansjuerg

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

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Tommy Herrmann »

... das sollte das hier sein - also die Beschriftung eine Events, die im Kalender selbst zu sehen ist (nicht getestet):

font-size: clamp(0.8rem, 1vw, 1.1rem) !important;

Code: Alles auswählen

/* Event */
.event {
  font-family: var(--font-family);
  font-size: clamp(0.8rem, 1vw, 1.1rem) !important;
  text-align: left;
  word-break: break-all;
  padding: 0px 0px 0px 2px;
  border-radius: 2px;
  border: none !important;
  box-shadow: 1px 1px 2px 0.5px rgb(130, 130, 130);
  display: block;
  width: 100%;
  margin-bottom: 4px;
  cursor: pointer;
}
clamp gibt 2 Größen responsive an. Also hier soll die Schriftgröße mindestens 0.8rem (das sind also 80% der Root-Schrift - der Ausgangsgröße) und maximal 1.1rem groß sein. Dazwischen soll sich die Schriftgröße fließend vergrößern. Sobald 1.1rem erreicht sind, bleibt die Skalierung stehen.

1vw (viewport width) ist dabei 1% der Breite des Viewports - "Viewport" ist das Ansichtsfenster, das der Besucher mit seinem, verwendeten Gerät sieht.

Das alles ist lieb vom Werner gemeint aber vielleicht auch etwas zu kompliziert, du könntest das aber auch ganz einfach ersetzten mit z.B.:

font-size: 12px;

... dann ist es allerdings am Handy winzig.

... versuche nicht die Schrift in die Ansicht vom Handy zu quetschen - das geht bei keinem Kalender - das geht schief.

Der Zusatz !important bei einer CSS-Regel stellt diese über alle zuvor erstellten Regeln, markiert diese also als wichtig. Eine so gekennzeichnete Regel kann auch ihrerseits nur mit einem erneuten !important überschrieben werden.
Benutzeravatar
hansjuerg
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 116
Registriert: Di 15. Dez 2020, 12:54
Wohnort: Urdorf ZH
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von hansjuerg »

Super erklärt - danke Tommy.

Ich habe das mal auf 0.6rem geändert - hatte aber keine Auswirkung auf die Schriftgrösse.
Ist aber auch nicht so wichtig. Ich lass' das mal wies ist.
Schöne Grüsse aus der Schweiz :)
hansjuerg

VMC Urdorf
Benutzeravatar
Werner-Zenk.de
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 755
Registriert: Di 8. Dez 2020, 19:42
Wohnort: Bamberg
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Werner-Zenk.de »

Hallo Tommy,
ich habe heute auch mal Microsoft Teams getestet und dir eine Nachricht gesendet. Mir war gerade langweilig .... :D
Antworten

Wer ist online?

Mitglieder in diesem Forum: Ahrefs [Bot] und 9 Gäste