Nachrichten-Skript von Werner Zenk

[Tommy Herrmann]

Man muss da halt höllisch aufpassen, um keine Zeichen zu übersehen.
Beispiel aus dem PHP-Code:

(($seite - 1) > 0 ? '&nbsp; <a href="' . $scriptName . '?seite=' . ($seite - 1) . $ampFilter . $ampSortierung . $ampAnzahl . '#anker" title="Zurück zu Seite ' . ($seite - 1) . '">&#9668; Zurück</a>' : '') . PHP_EOL .

Geändert in:

(($seite - 1) > 0 ? '&nbsp; <span class="link" onclick="aktion(`' . $scriptName . '?seite=' . ($seite - 1) . $ampFilter . $ampSortierung . $ampAnzahl . '#anker`)" title="Zurück zu Seite ' . ($seite - 1) . '">&#9668; Zurück</span>' : '') . PHP_EOL .

Damit du das in Zukunft selber machen kannst

Beispielseite "MySQL Nachrichten" von Werner-Zenk.de in Mobirise:

https://www.mobirise-tutorials.com/News ... bau/#anker

... ach so - anstelle des "a href" (Link-Selektor) wird ja mittels JavaScript-Funktion "aktion" die Seite neu aufgerufen, sozusagen als "Link Ersatz", kann man das so verstehen?

Ich hatte immer versucht die "onclick" Anweisung noch in die originale "a href" Zeile mit einzubauen

Danke Dir Werner ...

... ich gebe mir echt Mühe. Ich habe 4 - 5 Stunden nur an dieser Zeile herum probiert. Anscheinend habe ich es immer noch nicht verstanden. Ich kann das nur, wenn ich es auch restlos verstehe.

Was macht dieser gelbe Fliegenschiss da oben eigentlich? Verpackt der das in einen String? Die Zuweisung zur JavaScript-Funktion "aktion" endet ja an der ) Klammer.

Wenn man so lange alles Mögliche probiert, dann bekommt man von Deiner Lösung echt Respekt und Hochachtung




P.S.

Die Breite der Laufschrift müsste bei Dir noch am Handy angepasst werden:

Code: Alles auswählen

/* Newsticker am Smartphone */
@media (max-width: 767px) {
  marquee#marquee {
    margin: 10px auto;
    width: 100%;
  }
}

[Klaus]

? :
Ternärer Operator:
https://www.php.net/manual/de/language. ... on.ternary

`
"Backticks":
https://www.w3schools.com/js/js_strings.asp
Wobei hier offensichtlich weniger die Template Funktion im Vordergrund stand als viel mehr die 3te Möglichkeit einen String zu begrenzen.

Wie das Bsp. bei der w3schools :
let text = `He's often called "Johnny"`;

[Tommy Herrmann]

@ Klaus,

danke Dir - es wird langsam verständlicher für mich

... nun könnte man doch aber auch schreiben, also in 'einfachen' Hochstrichen:

let text = 'He's often called "Johnny"';

... oder nein - dann endet der String hinter dem 'He'

Genau an dieser `String-Begrenzung` bin ich gescheitert, obwohl ich natürlich schon die "Backticks" gesehen hatte, deren Einsatz ich aber bisher nicht genau kannte. Weiterhin war wohl mein ganz großer Denkfehler, dass ich versucht habe, einen Link "a href" mit der JavaScript-Funktion über "onclick" zu steuern.


MySQL Nachrichten sind nun direkt in Mobirise eingebaut:

Ich habe meine Seite mit dem direkt eingebundenen Script "MySQL Nachrichten" nun (halbwegs) fertig.

Der Download der modifizierten Datei "nachrichten.php" und meiner modifizierte CSS-Datei "style.css" ist dabei und mein Tutorial ist geschrieben.

https://www.mobirise-tutorials.com/News/direkteinbau/

Weiterhin habe ich die Seite schon mal halbwegs so modifiziert, dass sich diese auch in Englisch gut lesen lassen kann.

[Tommy Herrmann]

Hallo Werner,

irgendwie stimmt noch etwas an der Navigation (oben an den kleinen Pfeilen) nicht.

Es geht nur vorwärts zu blättern

[Tommy Herrmann]

Hab es gefunden

... es fehlte ein Fliegenschiss `)

... doch etwas gelernt

Neuer Download mit Fix ist am Server ...

[struggle]

Was mir besonders gut im Nachrichten-Skript von Werner Zenk gefällt, ist, daß im Nachrichtentext bei der Smartphone-Ansicht der Text getrennt wird. Ich weiß nicht, ob das schon vorher war, aber toll

[Tommy Herrmann]

... die Bilder stehen auf einer maximalen Breite von 100%, danach bricht der Text um. Ja - das war schon immer so in der Anwendung vom Werner.

Ich habe das umgeschrieben, damit auch die Bilder am Smartphone mit "float" in den Text integriert werden. Das habe ich deswegen gemacht, weil sich die Bildgröße bei "Mobirise5" ganz anders darstellt als bei Deinem "Mobirise4".

Bei meinem Script nehmen die Bilder nun 40% der Bildschirmbreite am Smartphone in Anspruch.

In "Mobirise5" müssen die Bilder eine maximale Größe am Desktop erhalten, sonst werden diese auf die 100% des DIV Containers vergrößert - also nicht wie eigentlich gewollt auf 100% der Bildbreite - daher dann schon mal auf 1900 Pixel und mehr - und werden dadurch natürlich viel zu groß und unscharf.

"Mobirise5" hat da leider die eine oder andere Macke mit solchen Layouts und mit JavaScripts. Das Framework "jQuery" gibt es in "Mobirise5" nicht mehr und dadurch sind jede Menge Probleme entstanden - auch gibt es eine andere Bootstrap-Version - dadurch auch sehr viele Kompatibilitätsprobleme. Das war in "Mobirise4" noch alles besser - dennoch rate ich zu einer Umstellung, bevor "Mobirise4" (wie auch schon "Mobirise3") irgendwann eingestellt wird.

Ich teste auch mit jedem Update immer noch die alten "Mobirise3" Themen.

Im Großen und Ganzen geht noch alles, jedoch kommt nach und nach das eine oder andere Problem hinzu. Diese alten Themen werden gar nicht mehr gewartet.

Etliche CSS stimmt einfach nicht mehr und ist auch kaum mehr reparabel. Dazu kommt das riesengroße Problem, dass es damals gekaufte Erweiterungen, wie bei mir das "Block-Paket 60+" einfach nicht mehr gibt und man diese auch nicht auf einen neuen Computer übertragen kann. Diese alten Erweiterungen müssen auf jedem neuen System neu installiert werden. Dazu benötigt man eine Installationsdatei .mbrext - die aber niemand hat - außer Mobirise.

Das war auch der Grund, warum ich meine eigentliche, ursprüngliche Seite "Mobirise-Tutorials.com" Ende 2022 komplett neu in "Mobirise5" Themen erstellt habe, dabei sind aus fast 60 Seiten 30 geworden

[struggle]

Hallo,
lch habe noch eine Frage zum Nachrichten-Editor. Kann man im Nachhinein den Editor noch verändern oder muss man, um den Editor zu konfigurieren (Beispiel: Schlagwörter, Laufschrift usw.), diesen neu erstellen ?

[Tommy Herrmann]

Du musst nichts neu beginnen. Stelle das was Du erreichen willst in der Konfigurationsdatei "verbindung.php" ein und gut ist.

Diese Datei wir mit jedem Aufruf der Seite zunächst geladen, schon weil dadurch die Verbindung zur Datenbank hergestellt werden muss. Dabei werden dann auch alle Deine Einstellungen immer wieder neu geladen.

[struggle]

Dankeschön.

[Tommy Herrmann]

Moin,

nur zum besseren Verständnis noch kurz erklärt.

Wenn die Datei "nachrichten.php", zur Anzeige der Nachrichten im Browser aufgerufen wird, dann steht in dieser Datei gleich ganz oben ein sogenannter "PHP Include" Befehl zur Konfigurationsdatei "verbindung.php".

https://www.php.net/manual/de/function.include.php

Dieses Inkludieren macht ja nichts weiter, als genau an dieser Stelle den Inhalt der Datei "verbindung.php" mit auszulesen. Der Programmierer könnte diese Datei auch an dieser Stelle ebenso komplett einbauen.

Das Inkludieren bietet aber die Möglichkeit eine solche Konfigurationsdatei in mehreren, unterschiedliche Dateien einzubinden. Das spart dann ganz viel Arbeit und ist obendrein sehr viel übersichtlicher.

Außerdem - der wichtigste Punkt beim Inkludieren - soll ja der Benutzer seine Konfiguration ja nur ein einziges Mal eintragen müssen. Würde man diese Datei nicht Inkludieren, müsste man diese Daten ja zig mal neu eintragen. Das will ja wohl keiner.

<?php
/*
* Nachrichten - nachrichten.php (utf-8)
* https://werner-zenk.de
*/

include "verbindung.php";

... ebenso wird die Datei auch im Script "editor.php" für den Administrator inkludiert:

<?php
/*
* Nachrichten - Editor - editor.php (utf-8)
* https://werner-zenk.de
*/

session_start();
include "verbindung.php";

Das erklärt dann, warum Du jederzeit Änderungen in dieser Datei "verbindung.php" vornehmen kannst.

[struggle]

Das heißt also, ich kann nachträgliche Veränderungen in der verbinden.php und das weitere In der style.css vornehmen. Und es ist übersichtlicher.
Vielen Dank für die Erklärungen.

[struggle]

Hallo,
ich bin gerade dabei, in der style.css Veränderungen vorzunehmen.

Ich habe beim Bild die Rahmenfarbe auf weiss gesetzt und den Schatten rausgenommen.
Meine erste Frage ist, was ist der Unterschied zwischen "border: solid" und "border: solid medium"?

Und meine zweite Frage ist, wie kriege ich den Rahmen etwas schmaler ?
Schreibe ich dann einfach die Stärke dazu ? Z.b. "border: Solid 1px #ffffff;"

[Tommy Herrmann]

Moin,

das "medium" ist eine zusätzliche Angabe der Stärke, guckst Du:

https://www.w3schools.com/cssref/playde ... rder-width

Du könntest das "medium" auch genausogut weglassen und z.B. die Breite angeben, also (wahrscheinlich dann 2 opder 3 Pixel), Beispiel:

Code: Alles auswählen

border: 2px solid white;

oder auch anstelle von "white" (weiß) den Hex-Code #ffffff

Code: Alles auswählen

border: 2px solid #ffffff;

... und ja 1px solid ist richtig, guckst Du:

https://www.w3schools.com/cssref/pr_border.php

Werner hat die Angewohnheit diese Stäke wie "solid" immer vorne groß zu schreiben. Es ist egal, ob man das vorne groß oder klein schreibt.



Gib doch mal bei Google so eine Frage ein. Wichtig ist immer da CSS bei der Frage dazu zu schreiben, z.B.:

css border 1px solid

https://letmegooglethat.com/?q=css+border+1px+solid

www.w3schools.com hat eigentlich immer tolle Beispiele und man kann auch beim Ausprobieren Werte ändern.

> Button "Try it Yourself" (versuche es selbst) > Änderungen links rein schreiben > Button "Run" klicken > Ergebnis rechts



Ansonsten kannst Du eigentlich nichts kaputt machen. Wenn Du etwas falsch machst am Style, wird es einfach ignoriert und nicht angezeigt.

Im "Notepad++" kannst Du doch auch ganz einfach die Änderung danach wieder rückgängig machen oder eben die Original-Datei nochmals neu laden.


P.S.:

Man hebt sich grundsätzlich immer alle Original-Downloads auch zusätzlich unverändert auf und sichert diese auch auf externen Laufwerken, sodass diese nicht verloren gehen. Werner hat z.B. schon 3 x seine Internet-Seiten komplett gelöscht, wahrscheinlich weil ich ihn zu sehr genervt habe

Das war für seine Fan-Gemeinde eine riesen Katastrophe und ganz besonders für mich

[struggle]

Hat alles geklappt !

Ich habe das einfach mal so gemacht:

Code: Alles auswählen

/* Nachrichten - Bild */
dl.nachrichten dd img.bild {
  margin: 1rem 1rem 1rem 0;
  border: Solid 1px #ffffff;
  /*box-shadow: 0px 0px 5px #999999;*/
  max-width: 100%;
  height: Auto;
  object-fit: Contain;
  float: Left;

wobei ich den Schatten nicht gelöscht, sondern einfach so:
/*box-shadow: 0px 0px 5px #999999;*/
ausgeklammert habe. So könnte ich das ganz schnell wieder rückgängig machen.

css_bild.PNG (46.52 KiB) 443 mal betrachtet

[Tommy Herrmann]

Moin,

ja - so ist es auch vollkommen richtig.

Werner hat das auch so gedacht, seine CSS ist natürlich sehr hilfreich - aber es ist erlaubt und gewünscht dort auch eigene Anpassungen vorzunehmen.

Ich kommentiere da auch manchmal die Original-CSS aus und schreibe meine Anweisungen dann neu dazu, so vergesse ich nicht wie es vorher war. Wie Du siehst, kann man diese /* Kommentar-Zeichen */ auch über mehrere Zeilen oder ganze Passagen anwenden - aber nie vergessen einen Kommentar wieder zu schließen mit */, denn sonst wird der gesamte CSS-Code darunter mit auskommentiert und wirkt dann natürlich nicht mehr.

Ich habe diesen Rahmen (border) bei mir also ganz entfernt, da ich jede Menge Bilder mit einem transparenten Hintergrund habe und da gefällt mir das nicht so gut mit einem Rahmen.

Wolltest Du den Rahmen z.B. 10px abrunden, könntest Du noch dazu schreiben:

border-radius: 10px;

Werner verwendet einen dezenten Border-Radius von nur 4px für die Nachrichten-Container. Kannst Du natürlich auch mal ausprobieren oder es so lassen wie es jetzt ist - was am besten gefällt eben.

https://www.meinlangengrassau.de/ereignisse

Unten diese Stelle in meiner CSS-Datei. Ich verwende ja nun "Mobirise5" und das hat eine ganz andere CSS und ein neueres Framework "Bootstrap" mit wieder anderer CSS als Du bei "Mobirise4" hast.

Bemerkung zu "Mobirise5" - insbesondere für andere, die eben "Mobirise5" verwenden:

Hier stand 100% Breite für die Bilder, das geht in "Mobirise5" so nicht, denn dann werden diese auf 100% der Container-Breite aufgezogen - also meist über die gesamte Bildschirmbreite. So musste ich meine Bilder hier auf max. 250px Breite limitieren, andererseits habe ich Bilder, die z.B. nur 125px breit sind und damit diese nicht auch auf 250px Breite vergrößert werden und dadurch unscharf, musste ich noch das width: auto; (Breite automatisch) hinzufügen, das automatisch die jeweilige Bildbreite verwendet, jedoch nie mehr als 250px. Das ist bei Dir in "Mobirise4" besser gelöst. Dort sind die Bilder auf maximal 100% der Bildbreite und nicht auf die Container-Breite bezogen.

Code: Alles auswählen

/* Nachrichten - Bild */
dl.nachrichten dd img.bild {
  margin: 1rem 1rem 1rem 0;
  /* EDIT Tommy - Border und Schatten entfernt, Bild auf max. 250px Breite
  border: Solid Medium #808080;
  box-shadow: 0px 0px 5px #999999; */
  width: auto;
  max-width: 250px;
  height: auto;
  object-fit: Contain;
  float: Left;
}

Diese Media-Anweisung für das Handy habe ich noch zusätzlich eingebaut. Ich wollte auch hier, die Bilder vom Text umfließen lassen, deswegen habe ich dann am Handy allen Bildern eine Container-Breite von 40% gegeben. Natürlich könnte man hier z.B. auch 100% schreiben, dann würden alle Bilder in voller Breite am Handy über dem Text positioniert.

Code: Alles auswählen

/* Nachrichten - Bildbreite am Smartphone */
@media (max-width: 767px) {
  dl.nachrichten dd img.bild {
    max-width: 40%;
  }
}

[struggle]

Ich habe den Rahmen auch rausgenommen, das sieht auf jeden Fall besser aus. Auch ich verwende auf der Homepage viele "transparente" Bilder. Fast immer kann man bestehende Bilder transparent machen, manchmal wird es ein wenig "unrein", das kriegt man aber durch ein bischen Feinarbeit weg. Oder ich fülle den Hintergrund des Bildes mit der Farbe, wo ich es gerade einfüge (hier z.B. beim Blog). Mit der Zeit habe ich 6 Bildbearbeitungsprogramme installiert, mit denen ich mir jeden Wunsch erfüllen kann.

Das mit dem umfliessenden Text am Handy sieht "professionell" aus, gute Idee!

Auch heute habe ich eine Frage:

Man kann ja das Nachrichten-Skript für vieles Andere einsetzen. Wenn ich jetzt das Nachrichten-Skript 2 x auf einer Webseite einsetzen will, haben die Dateien ja die gleichen Namen. Würde das funktionieren, im zweiten Skript einfach die Dateien umzubenennen, oder müssen die Umbenennungen auch noch in den php.dateien vorgenommen werden ?

[Werner-Zenk.de]

Auch heute habe ich eine Frage:

Man kann ja das Nachrichten-Skript für vieles Andere einsetzen. Wenn ich jetzt das Nachrichten-Skript 2 x auf einer Webseite einsetzen will, haben die Dateien ja die gleichen Namen. Würde das funktionieren, im zweiten Skript einfach die Dateien umzubenennen, oder müssen die Umbenennungen auch noch in den php.dateien vorgenommen werden ?

Am einfachsten ist es, ein Verzeichnis anzulegen und die Dateien dorthinein zu kopieren.

[struggle]

Hallo Werner,
danke für die Antwort !

Das wäre also dann auf dem Server ein Unterverzeichnis, richtig ?

Das wäre aus meiner Sicht sowieso daß Logischste! Bei soviel php.dateien alles ohne Unterordner, verliert man schnell die Übersicht.

Beispiel:
ORDNER meinlangengrassau
Unterordner Blog
Unterordner Nachrichten
Unterordner Kommentare
Unterordner Kontakt
usw.

[Tommy Herrmann]

Moin,

ich habe jetzt noch nicht ganz verstanden, was Du genau erreichen willst.



1) Willst Du eine zweite Anwendung "Nachrichten" im gleichen Projekt, mit den gleichen Bildern und dem gleichen Texten nur auf einer anderen Seite zusätzlich anzeigen?

> dann benötigst Du doch nur einen weiteren "iFrame" auf der anderen Seite, denn Du zeigst die "Nachrichten" ja wieder im "iFrame" an.



2) Willst Du eine zweite Anwendung "Nachrichten" im gleichen Projekt, mit ganz anderem Inhalt - also anderen Bildern und anderen Texten?

> dann benötigst Du auch eine zweite Datenbank, kopierst die neuen Zugangsdaten wieder in die Datei "verbindung.php" und musst die Tabellen der neuen Datenbank auch wieder einmalig neu über die Datei "installation.php" installieren.

Die Datei "style.css" und Deine Datei "anzeige.php", die die Nachrichten anzeigen, kannst Du ja dann auch in das neue Verzeichnis - wie Werner oben schon beschrieben hat - kopieren, sodass das Aussehen gleich bleibt.



.... und nein - Du brauchst doch nur einen Unterordner eben für die Dateien der Anwendung "Nachrichten" vom Werner. Den nennst Du meinetwegen blog.

Dort kopierst Du wieder alle Dateien vom Werner rein und richtest eine neue MySQL-Datenbank, durch einen Aufruf der Datei "installation.php" im Browser, wieder ein - also so:

Code: Alles auswählen

https://www.meinlangengrassau.de/blog/installation.php

Die Anwendung rufst Du dann wieder ganz genauso im "iFrame" Deiner anderen Seite auf:

Code: Alles auswählen

<iframe id="myFrame" src="https://www.meinlangengrassau.de/blog/anzeige.php"></iframe>

Im Moment hast Du ja nur eine Anwendung "Nachrichten" und die liegt im Stammverzeichnis (Root). Hier ohne Frame:

https://www.meinlangengrassau.de/anzeige.php

Eigentlich solltest Du bei geframten Seiten auch alle CSS in Werners CSS-Datei "style.css" anpassen und nicht im Block von Mobirise. Sonst hast Du ja eine falsche Anzeige ohne Frame - also keine Hintergrundfarbe, nicht zu sehende (weiße) Links, usw.

Man könnte eine geframte Seite auch so einstellen, dass man diese nicht direkt aufrufen kann, sondern nur über den iFrame. Das erkläre ich gerne noch, falls Du interessiert sein solltest.



P.S.:

.... noch zu Deiner Frage die Dateien umzubenennen

Darüber solltest Du nicht einmal nachdenken.

Natürlich wird doch überall innerhalb der Dateien von Werners Skripten auch auf alle anderen Dateien immer wieder verlinkt. Dann müsste man doch auch alle diese Verweise in jeder Datei anpassen. Wozu auch, wenn Du anderen Inhalt anzeigen willst, dann hat das doch nur mit dem Inhalt der Datenbank und nichts mit den Dateien der Anwendung zu tun.