PHP in <script>

[beartooth]

Guten Tag zusammen,

ich versuche gerade via Datenbanksätze in Leaflet zu integrieren, allerdings funktioniert das nicht wie gewünscht.

Der originale Satz:

const germaniastrasse = L.marker([52.46470, 13.39755]).addTo(map)
         .bindPopup('<b>Germaniastraße 18-20</b><br><strong>ComputerBase GmbH</strong><br><i>www.computerbase.de</i>');

Und wenn ich versuche, ihn mit PHP zu füttern:

foreach ($pdo->query($sql) as $row) {
   echo "const ".$row['id']." = L.marker([".$row['marker']."]).addTo(map)
         .bindPopup('<b>".$row['location']."</b><br><strong>".$row['title']."</strong><br><i>".$row['website']."</i>');";

Allerdings lädt das Script dann gar nicht mehr. Ich bin den Code mehrfach durchgegangen, googeln half auch nicht wirklich weiter.
Wo liegt mein Fehler?

Ich bin dankbar für jede Hilfe.

 

[zenokortin]

Schritt für Schritt debuggen?

Aber ich seh auf Anhieb einen Fehler:
"const ".$row['id']." wird nicht funktionieren, wenn id ein Int ist.

 

[kartoffelpü]

geschweifte Klammer zu fehlt?!

 

[tollertyp]

Wo der Fehler liegt? Wir kennen die Daten nicht, die in der Datenbank stehen.
Wie sieht denn der erzeuge Code aus? Was sagt die JavaScript-Konsole im Browser?
Zeige doch die Sachen mal an, ohne als JS Code. Einfach als Kommentar mit "// const ..."

Wie sieht $row['id'] aus? Wie sieht $row['marker'] aus? Meine Glaskugel ist defekt, wenn sie funktionieren würde, wäre ich aber sicher auch nicht in einem Forum unterwegs. Falls doch, hätte ich dich ja bereits per PM angeschrieben, noch bevor du den Thread aufgemacht hättest.

geschweifte Klammer zu fehlt?!

Ernsthaft? $sql und $pdo sind auch undefiniert...

 

[zenokortin]

Nein Konstanten- und Variablenbezeichner müssen mit einem Buchstaben anfangen und dürfen auch nicht komplett aus Zahlen bestehen

edit: hab übersehen dass Post 3 nicht vom TE kam.

 

[beartooth]

Aber ich seh auf Anhieb einen Fehler:
"const ".$row['id']." wird nicht funktionieren, wenn id ein Int ist.

Hat eine Weile gebraucht, aber habs verstanden. Es geht drum, dass die JS-Funktion keine Zahl sein darf, richtig? Ich habe es jetzt einfach wie folgt gelöst, auch wenn es vielleicht nicht die eleganteste Art ist:

echo "const id".$row['id']."

Danke euch!

 

[tollertyp]

Ne, eigentlich passt das mit dem Präfix schon. Ob die Wahl "id" sinnvoll ist, darüber kann man diskutieren.

Edit:
Es ist ja keine id, die da gehalten wird, sondern eher "Aktion". Und dann sollte das Präfix eher ausdrücken, was das Ding macht. Der Bezeichner id123 sollte ja ausdrücken, was es repräsentiert. Was meine ich damit? Ein unrealisitisches Beispiel:

Schlecht
const text = "Hallo";
const string = "Hallo";
const hallo = "Hallo"; // auch nicht wirklich gut

Besser:
const greeing = "Hallo";

Alternativ könnte man sie auch in einem Array ablegen - aber welche Variante sinnvoller ist kann man anhand der Informationen nicht pauschal sagen. Mit solchen Präfixen zu arbeiten ist aber schon eine gängige Vorgehensweise.

 

[zenokortin]

Die bessere Lösung wäre sicher ein Array (und da nur die reinen Daten und diese dann im JS mit einer func abrufen) bzw. wozu wird das überhaupt in eine Const/Var geschrieben?

 

[netzgestaltung]

Ich würd mit strings eher ein paar Zeilen HTML mit der Datensource schreiben und dann mit dem JS und einem einfach Selektor drüber gehen.

<?php foreach ($pdo->query($sql) as $row) { ?>
  <div class="map_source" data-marker="<?php echo $row['marker']; ?>" data-id="<?php echo $row['id']; ?>" data-title="<?php echo $row['title']; ?>" data-website="<?php echo $row['website']; ?>" data-location="<?php echo $row['location']; ?>"></div>
<?php } ?>

Als Alternative könnte auch ein JSON so befüllt sein

var map_sources = document.querySelectorAll('.map_source');

map_sources.forEach(function(map_source){
  L.marker(map_source.dataset.marker).addTo(map)
         .bindPopup('<b>' + map_source.dataset.location + '</b><br><strong>' + map_source.dataset.title + '</strong><br><i>' + map_source.dataset.website + '</i>');
});

als 2. alternative könnte das ganze HTML schon wo fertig gebaut werden und dann kopiert aus dem DOM in die bindPopup funktion.

 

[tollertyp]

Ob sie "sicher" die bessere Lösung wäre, das würde ich nicht unterschreiben.
Um das zu beurteilen, dazu ist das, was du zusätzlich gefragt hast relevant. Die Frage ist: Wird die Konstante überhaupt gebraucht usw...

@netzgestaltung: Dein Script ist semantisch aber kaum das gleiche...
ist germaniastrasse dann global? Und wird es immer wieder überschrieben?

Aber im Sinne von "Sparation of Concerns" (PHP soll sich nur um die Beschaffung der Daten kümmern aber nicht für das Layout usw zuständig sein) sicher sinnvoll, ich nehme an, das mit dem Bezeichner hast du nur flüchtig übersehen.

Edit: und durch ein Bearbeiten hast du den Fehler auch noch korrigiert.

 

[netzgestaltung]

Es braucht schlicht keine "germaniastraße" variable. Die Funktion L.marker() wird für jede Zeile ausgeführt. Wenn dann wäre der Variablenname "marker" - dann hab ich innerhalb der forEach Funktion wieder zugriff.

Ist die Iteration gerade bei der germaniastraße oder will ich da was spezielles machen kann ich mit if ( map_source.dataset.location === "germaniastraße" ) { darauf prüfen

Alternativ könnte außen eine Variable "markers" als array definiert werden, der wieder alle "marker" hinzugefügt werden können. Dann lässt sich später nochmals über die marker iterieren.

 

[tollertyp]

Ich bezog mich auf deine ursprüngliche Version, wo du ein "const germaniastrasse = ... " drin hattest. Hast du vergessen.

 

[netzgestaltung]

Ja ich bearbeite immer nach, was ich noch finde...

var map_sources = document.querySelectorAll('.map_source'),
    markers = [];

map_sources.forEach(function(map_source){
  markers[map_source.dataset.id] = L.marker(map_source.dataset.marker).addTo(map)
         .bindPopup('<b>' + map_source.dataset.location + '</b><br><strong>' + map_source.dataset.title + '</strong><br><i>' + map_source.dataset.website + '</i>');
});

ich hab das mal mit variablenspeicherung notiert.

 

[tollertyp]

Ja ich bearbeite immer nach, was ich noch finde...

Ja, das ist ja nicht verwerflich, mache ich ja selbst auch.

Vom Stil her ist das so aber deutlich besser als die Generierung von JS-Code via PHP, da solcher Code schlecht lesbar und schlecht wartbar ist.