Array-Werte als Bedingung für Format

[gelegenheitsprogrammierer2000]

Hallo,

Ich habe eine MySQL-Abfrage mit einem Array von bis zu 10 Begriffen als Ergebnis.
Jedem Begriff soll über das HTML-Dokument frei verstreut ein kleines grafisches Quadrat an einer bestimmten festen Stelle zugeordnet sein (Städte über einer Landkarte).
Ich möchte nun abhängig von diesen Begriffen an den verschiedenen Stellen im HTML-Dokument ein grünes (Begriff ist da) oder ein rotes kleines Quadrat (Begriff ist nicht im Array enthalten) setzen.

Wie "verschachtele" ich dazu PHP (evtl. Array-Übergabe), JS (evtl. Bedingung) und HTML (evtl. Formatierung)?

Besten Dank!

[Tabellenkalk]

Hallo,

Wie "verschachtele" ich dazu PHP (evtl. Array-Übergabe), JS (evtl. Bedingung) und HTML (evtl. Formatierung)?

Hm, also genau verstehe ich nicht, was du da verschachteln willst. Mit Php kannst du die DB-Abfrage durchführen und das HTML generieren. dorthin kannst du dann noch JS und vorallem CSS für die Gestaltung einbinden. Angeblich gibts für all diese Sachen auch tutorials im Netz zu finden...

Gruß
Kalk

[gelegenheitsprogrammierer2000]

Hallo,

Wie "verschachtele" ich dazu PHP (evtl. Array-Übergabe), JS (evtl. Bedingung) und HTML (evtl. Formatierung)?

Hm, also genau verstehe ich nicht, was du da verschachteln willst. Mit Php kannst du die DB-Abfrage durchführen und das HTML generieren. dorthin kannst du dann noch JS und vorallem CSS für die Gestaltung einbinden. Angeblich gibts für all diese Sachen auch tutorials im Netz zu finden...

Gruß
Kalk

Hallo Kalk,

ja mit diesen Tutorials habe ich sowas auch schon mal gemacht. Allerdings musste ich da die Ergebnisse nicht über das HTML-Dokument grafisch verteilt darstellen, sondern konnte einfach ein div setzen und im PHP dann eine Bedingung mit echo <HTML-Code> kombinieren. Das war damals ein Quadrat im HTML, was rot oder grün wurde, je nachdem ob die DB-Abfrage einen Wert zurückgab oder nicht.

Nun möchte ich aber in der DB-Abfage gleich für mehrere auf der HTML-Seite verteilte Quadrate eine einzige DB-Abfrage durchführen. Dadurch erhalte ich ein Array als MySQL-Ergebnis im PHP-Skript. Wie verknüpfe ich jetzt aber dieses Ergebnis mit der farblichen Darstellung von Quadraten, die auf einer Web-Seite an jeweils ihrer eigenen Position angezeigt werden sollen?

Gruß
Georg

[Tom]

Hello,

Wie "verschachtele" ich dazu PHP (evtl. Array-Übergabe), JS (evtl. Bedingung) und HTML (evtl. Formatierung)?

Gehört Die Aufgabenstellung zu diesem Thread?
https://forum.selfhtml.org/?t=217757&m=1496784

Wenn ja, bitte dort weitermachen und keinen neuen anfangen!

Jedenfalls solltest Du den Thread lesen, da er dein Thema massiv berührt.

Liebe Grüße aus dem schönen Oberharz

Tom vom Berg

[molily]

Hallo,

Wie "verschachtele" ich dazu PHP (evtl. Array-Übergabe), JS (evtl. Bedingung) und HTML (evtl. Formatierung)?

Gegenfrage, was hast du denn schon? Es sind verschiedene Ansätze denkbar, auch welche, die ohne JavaScript auskommen.

PHP generiert üblicherweise HTML-Code, und wenn du bloß zwischen grün und rot unterscheiden willst, dann lässt du PHP z.B. einem Element eine Klasse hinzufügen oder nicht. Wo kommt da nun JavaScript ins Spiel und wie stellst du dir die Array-Übergabe vor? Wie sehen die zu übergebenen Daten genau aus?

Damit will ich nicht sagen, dass das nicht möglich oder sinnvoll ist. Wie PHP sicher eine Objekt- bzw. Arraystruktur an JavaScript übergibt, wurde jüngst diskutiert (wurde schon verlinkt). Auf deine sehr allgemeine Frage lässt sich jedoch keine genaue Antwort geben. Anscheinend hast du schon eine konkrete Vorstellung, was PHP machen muss und wie das JavaScript aussieht. Dann zeige uns am besten mal den Code, den du dafür schon geschrieben hast.

Grüße
Mathias

[gelegenheitsprogrammierer2000]

Hallo Mathias,

was ich bislang zusammengestrickt habe macht nur Sinn, wenn ich die Farbe nur an einer Stelle im Dokument ändern muss. Die Daten aus der Datenbank sind die mit MySQL abgefragten Namen von mehreren Städten für die eine bestimmte Bedingung im Datensatz zutrifft.

Wie man das am besten realisiert ist mir völlig egal. Ich sehe hier derzeit noch überhaupt keine Variante. JavaScript brauche ich wahrscheinlich nur, weil ich die DB-Abfrage mit PHP alle 5 Sekunden automatisch wiederholen möchte.

Ich weis nicht, wie ich (z.B. mit PHP) die roten/grünen Quadrate an die jeweiligen Positionen im HTML bringen kann?

Grüße
Georg

[molily]

Hallo,

Ich weis nicht, wie ich (z.B. mit PHP) die roten/grünen Quadrate an die jeweiligen Positionen im HTML bringen kann?

PHP macht erst einmal nichts anderes als dynamisch HTML zu generieren. Also müssen wir uns erst fragen, wie das HTML auszusehen hat. Dann können wir zu PHP zurückkehren und das gewünschte HTML generieren.

Wie gedenkst du also die Quadrate mit HTML an die Positionen zu bringen? Das wird mit HTML alleine schwierig sein, denn mit HTML kannst du nur irgendwelche Elemente zusammenbauen. Zum Beispiel eine Liste.

<ul>  
<li>Leipzig</li>  
<li>Berlin</li>  
<li>Potsdam</li>  
<li>Magdeburg</li>  
<li>Zwickau</li>  
</ul>

Das Positionieren ist nicht Aufgabe von HTML. Die Präsentation wird immer über CSS gesteuert. Um Elemente frei auf einer Karte zu positionieren, kannst du z.B. absolute Positionierung verwenden. Dazu müssen die Elemente wahrscheinlich einzeln ansprechbar sein. Füge entsprechende Angriffspunkte für das CSS hinzu, beispielsweise Klassen oder IDs:

<ul class="boxen">  
<li class="leipzig">Leipzig</li>  
<li class="berlin">Berlin</li>  
<li class="potsdam">Potsdam</li>  
<li class="magdeburg">Magdeburg</li>  
<li class="zwickau">Zwickau</li>  
</ul>

Eine Beispiel-Formatierung mit absoluter Positionierung:

.boxen li { /* Irgendwelche Formatierungen für alle Boxen */ }  
.leipzig { position: absolute; top: 100px; left: 200px; }

Jetzt fehlt nur noch der Aktiviert-Status. Auch den kannst du über Klassen lösen:

<ul class="boxen">  
<li class="leipzig">Leipzig</li>  
<li class="berlin aktiv">Berlin</li>  
<li class="potsdam">Potsdam</li>  
<li class="magdeburg aktiv">Magdeburg</li>  
<li class="zwickau">Zwickau</li>  
</ul>

  
[code lang=css].boxen li { background-color: red; } /* Standardmäßig rot */  
.boxen li.aktiv { background-color: green; }  
/* Und so weiter für alle Städte */

Wie das PHP nun aussehen muss? Es muss das gewünschte HTML erzeugen. Also die ul-Liste mit allen Städten generieren und den aktiven eine zusätzliche aktiv-Klasse verpassen.

Das Nachladen mit JavaScript kann auf unterschiedliche Arten erfolgen. Ich würde vorschlagen, einen XMLHttpRequest (»Ajax«) auf ein PHP-Script zu starten, das ausschließlich den obigen Code zurückgibt. Dann wird das aktuelle Dokument mit dem zurückgelieferten HTML aktualisiert.

Grüße
Mathias

[gelegenheitsprogrammierer2000]

Hallo Mathias,

vielen Dank für Deine ausführliche und anschauliche Antwort.

Verstehe ich das so richtig, daß man im PHP über echo die letzte Liste erzeugt und diese abhängig vom Ergebnis der DB-Abfrage mit bzw. ohne "aktiv" bestückt? Die css-Datei sorgt dann dafür, daß die Position und Farbe der Standorte stimmen. Wie sehen dann diese Standorte im Browser aus? Sind das die Namen? Oder erzeugt "boxen" Rechtecke? Fehlen dann nicht noch die Maße?

Ich habe das mit nur einem Standort derzeit so gelöst:

<!-- Standort Koeln-->  
  
<div style="position:fixed; top:590px; left:160px" id="refresh" title="Standort: Koeln">  
  
<script type="text/javascript">  
   $(document).ready(function() {  
       $("#refresh").load("StandortKoeln.php");  
       var refreshId = setInterval(function() {  
          $("#refresh").load('StandortKoeln.php?' + 1*new Date());  
       }, 5000);  
    });  
</script>  
</div>

Im PHP erzeuge ich dann abhängig vom Ergebnis ("$_menge") der DB-Abfrage ein rotes oder grünes Quadrat durch den Hintergrund einer einzelligen leeren Tabelle (Unschön: für jeden Standort müsste ich eine separate PHP-DB-Abfrage durchführen):

if ($_menge == 0) {  
	echo "<table style=\"height:15px; width:15px\" bgcolor=#009900 border=\"0\" cellpadding=\"2\">\n";  
	echo "<tr><td><font color= #0B6138></td></tr>";  
	} else {  
	echo "<table style=\"height:15px; width:15px\" bgcolor=#FF0000 border=\"0\" cellpadding=\"2\">\n";  
	}  

Mir ist noch nicht ganz klar, wie/ob aus Deiner Liste so etwas Ähnliches (wie Quadrate) entstehen?

Beste Grüße
Georg

[Auge]

Hallo

Verstehe ich das so richtig, daß man im PHP über echo die letzte Liste erzeugt und diese abhängig vom Ergebnis der DB-Abfrage mit bzw. ohne "aktiv" bestückt?

Zur Klarstellung: Mit echo gibst du zum Schluss das (hoffentlich) vorher generierte HTML-Stück aus (EVA-Prinzip). Aber ja, du holst aus deiner Datenbank die Liste der vorhandenen Städte, vergleichst sie mit einer Liste aller Städte und gibst dem HTML-Element für eine Stadt die Klasse „aktiv“ (oder so ähnlich), wenn sie auch im Ergebnis der DB-Abfrage vorhanden ist.

Die css-Datei sorgt dann dafür, daß die Position und Farbe der Standorte stimmen.

Ja. Du kannst anhand der Klasse „aktiv“ die Farbe festlegen. Die Position (auf einer Karte?) musst du im CSS vorher definieren. Die wird ja für jede Stadt anders sein.

Wie sehen dann diese Standorte im Browser aus? Sind das die Namen? Oder erzeugt "boxen" Rechtecke? Fehlen dann nicht noch die Maße?

Das kommt auf deinen Aufbau des HTML an. nehmen wir molilys Quelltext.

<ul class="boxen">  
<li class="leipzig">Leipzig</li>  
<li class="berlin aktiv">Berlin</li>  
<li class="potsdam">Potsdam</li>  
<li class="magdeburg aktiv">Magdeburg</li>  
<li class="zwickau">Zwickau</li>  
</ul>

Über die Klasse des Stadtnamens legst du die Position fest und mit der Klasse „aktiv“ die Farbe. Was die Boxen angeht, kannst du dich austoben. Du kannst die Listenpunkte (li) selbst zu Boxen machen. Du kannst auch mit <li class="leipzig"><span></span>Leipzig</li> ein zusätzliches Element (das span) bereitstellen, dass du mit display: inline-block;, den passenden Abmessungen und Farben zu der Box machst.

Im PHP erzeuge ich dann abhängig vom Ergebnis ("$_menge") der DB-Abfrage ein rotes oder grünes Quadrat durch den Hintergrund einer einzelligen leeren Tabelle (Unschön: für jeden Standort müsste ich eine separate PHP-DB-Abfrage durchführen):

Warum für jede Stadt eine Abfrage? Hole dir die Liste aller Städte und gehe sie am Stück durch. Das Ergebnis des Vergleichs merke ich mir gern in einem mehrdimensionalen Array. Das wäre hier das Array aller anzuzeigenden Städte, dem ich mit dem Vergleich der aus der DB geholten Städte die relevanten Informationen hinzufüge. Das HTML-Stück würde nun mit dem resultierenden Array erzeugt werden.

Die Struktur des Arrays könnte nach dem Vergleich folgenderßmaßen aussehen.

$staedteListe = array(  
array("name"=>"Leipzig", "vorhanden"=>0, url=>""),  
array("name"=>"Berlin", "vorhanden"=>1, url=>"http://www.berlin.de"),  
Array("name"=>"Potsdam", "vorhanden"=>0, url=>""),  
array("name"=>"Magdeburg", "vorhanden"=>1, url=>"http://www.magdeburg.de"),  
array("name"=>"Zwickau", "vorhanden"=>0, url=>""));

Mit diesen Daten kann ich die HTML-Listenpunkte in einer Schleife generieren.

Tschö, Auge