Felix Riesterer: Innerhalb von php-while-schleife datensatz mit javascritp

Beitrag lesen

Lieber Simon P.,

also gut, Du bist Anfänger. Das war offensichtlich. Dazu bedarf es weder einer Erklärung noch einer Entschuldigung, denn ich gehe davon aus, dass nicht nur ich hier auch einmal als Anfänger meine ersten Fragen gestellt habe...

Leider kam ich in meiner Ausbildung und auch nun schon wieder noch nicht hinter die richtige Logik bei Arrays. Ich habe leider das Problem, dass halt denke, dass ich nur innerhalb dieser einen while schleife arbeiten kann, da ich ja sonst die komplette ausgabe meiner Daten unterbreche, was den Sinn hinter einer Datenbank ja sicherlich entgegen steht.

Du wirfst hier zwei Sachen durcheinander.

1.) Daten in der DB
2.) aus der DB in ein Array eingelesene Daten (eine Auswahl aus der DB)

Warum kann ich denn kein Array (man sagt auch "Feldvariable", stelle sie Dir wie einen Schrank mit elastischen Schubladen vor, die alle wie in Excel beschriftet sind) mit den aus der DB ausgelesenen Daten befüllen?

Es ist manchmal sinnvoll, den DB-Zugriff als einen völlig eigenen Kontext zu verstehen, in dem SQL die Sprache der Wahl ist, und für den mit einem Server (MySQL oder dergleichen) mit allem pi-pa-po Kontakt aufgenommen werden muss. Das ist wie eine Browser-Abfrage, nur dass sich eben Dein PHP-Script analog wie ein Browser verhält, indem es die Antwort auf seine gestellte Anfrage verarbeitet.

Du kannst bereits beim (stückweisen!) Erhalt der Antwort diese sofort in HTML-Kontext umwandeln und Dein Markup erzeugen, Du könntest aber auch ein eigenes PHP-Programm schreiben, welches nichts anderes tut, als tabellarische Daten in einer Tabelle auszugeben (mit HTML-Mitteln). Dein eigentliches PHP-Programm includiert erst die DB-Logik, hat dann die abgefragten Daten in einer Variablen gespeichert (Array) und includiert dann das Ausgabe-Programm, um die im Array enthaltenen Daten in HTML gießen zu lassen. Aktuell wird gerne das MVC-Pattern als idealer Programmaufbau gepredigt, in dem das dann so ähnlich ablaufen würde. Du musst nämlich davon ausgehen, dass man in einer DB viele verschiedenen Dinge abspeichern kann, die nicht unbedingt in Gänze in einem einzigen HTML-Dokument abgebildet werden müssen.

Dann könnte ich auch alle Daten einfach in mein HTML-Dokument eintippen. "Markup" = alles was in "HTML" geschrieben ist (also kein php oder javascript), richtig oder?

Ja und ja. Das könntest Du. HTML ist in der Tat ein Dateiformat. Da lassen sich Daten mit abspeichern. Je nach Menge der Daten und der beabsichtigten Verwendung ist der Weg von MySQL über PHP nach HTML vielleicht sprichwörtlich "mit Kanonen auf Spatzen geschossen". Aber zum Erlernen der Technologien und ihrer Verschränkung ist das allemal eine schöne Herausforderung.

Du kannst Markup (HTML-Code) generieren, um es an den Browser zu senden. CSS und JavaScript erledigt dann der Browser. Da kann PHP sinnvollerweise nicht "mitreden".
Wie mache ich das? Also allgemein baue ich meine Webside so auf, dass ich zu jeder HTML Datei eine CSS Datei habe, die ich halt in die HTML einbinde.

Man hat üblicherweise _eine_ CSS-Datei, die man in allen HTML-Dokumenten referenziert (lies: einbindet). Das ist ja gerade die Idee, dass es nur eine ist, damit alle Dokumente eine einheitliche Darstellung haben. Es wäre nicht sinnvoll, für jede HTML-Datei eine eigene CSS-Datei anzulegen. Da wäre es tatsächlich sinnvoller, den CSS-Inhalt in einem <style>-Element im Kopfbereich (<head>-Element) des HTML-Dokumentes zu notieren. Immerhin ist es bei der Datenübertragung im Internet schneller, wenn nur eine Verbindung für eine Datei benötigt wird, anstatt zwei Verbindungen für zwei Dateien. Nur wenn die zweite Datei bereits im Browser-Cache liegt, weil eine andere HTML-Datei sie auch für das Layout benötigt hatte, hat es einen Sinn, CSS-Code auszulagern.

Damit das schön getrennt ist (im Javascript nicht so, da ich den kopiert habe).

Mein starker Verdacht ist, dass Du das mit JavaScript vielleicht ein wenig auf der Seite liegen lassen solltest. Deine Bedürfnisse lassen sich mit reinen CSS-Mitteln lösen. Erst wenn Du wirklich mit der reinen CSS-Lösung nicht mehr zufrieden bist, könnte (vielleicht!) der Einsatz von JavaScript sinnvoll sein.

Sonst arbeite ich auch mit "inculde" von PhP z.B. für meine Login Daten für den mySQL - Zugang. Was meinst du jetzt mit "...generieren, um es an den Browser zu senden...". Was muss ich anders machen?

Du musst überhaupt nichts anders machen. Dein PHP-Code generiert HTML-Code, der dann an den Browser ausgegeben wird. Das ist die Idee hinter dynamischen Webseiten.

2.) <span> Verstanden! Die anderen sind doch dazu gedacht um die Schriftart zu verändern oder?

HTML kennt keine Schriftart. Nein. Es geht darum, Deine Inhalte in einer sinnvollen Struktur abzubilden. Wie das hinterher aussieht, regelt CSS. Daher ist es ja so wichtig, dass die Struktur in Deinem Markup (HTML) sinnvoll (und syntaktisch korrekt) ist!

3.) Das mit der ID weiß ich, sonst halt class. Ich benutze in diesem Beispiel die ID doch nur zweimal wegen der Schleife (darauf habe ich nicht geachtet, danke).

Also keine ID. Schön. Mir war nicht klar, was da genau als Inhalt im Dokument später stehen soll, daher habe ich mich an der ID orientiert.

Ok, das heißt ich arbeite dann mit <span> mit einer class, damit ich per CSS dieses Inline-Elemente formatieren kann.

Nein. Die <span>-Elemente brauchen keine Klasse. Die erreichst Du über die ID des <ul>-Elements. In CSS gibt es ja den Nachfahren-Selektor. Mit dem kannst Du die <span>-Elemente per CSS "anfassen". Daher ja auch mein Beispiel, welches ich hier wiederhole:

Besser so:

<ul id="boxes">

<li>
        Name 1
        <span>ID 1</span>
    </li>
    <li>
        Name 2
        <span>ID 2</span>
    </li>
    <li>
        Name 3
        <span>ID 3</span>
    </li>
</ul>


>   
> Dein CSS sollte dann folgendes enthalten:  
>   
> ~~~css

#boxes li span{  

>     display: none;  
> }  
>   
> #boxes li:hover span {  
>     display: block;  
>     position: absolute;  
> }

Wie Du sehen kannst, steht da "#boxes", was ein Element mit der ID "boxes" selektiert (das <ul>-Element). Für Dich habe ich es extra ausführlich notiert: #boxes li span - man hätte das "li" in der Mitte auch weglassen können. Das <span>-Element ist ja sozusagen der Enkel von <ul>. Enkel sind ebenso Nachfahren, wie Kinder es auch sind. Daher der "Nachfahren-Selektor".

Wenn Du allerdings darauf reagieren lassen willst, dass sich der Mauszeiger gerade über einem Listenelement (<li>-Element) bewegt, dann kannst Du mit der Pseudoklasse ":hover" dafür sorgen, dass Nachfahren ihre Darstellung verändern. Im obigen Beispiel sind die <span>-Elemente mittels der Eigenschaft "display:none" auf nicht-sichtbar geschaltet. In dem Moment, wo der Mauszeiger über das <li>-Element fährt, gilt die Psuedoklasse ":hover", sodass der zweite Selektor (also das "#boxes li:hover span") gültig wird. Dieser Selektor selektiert dasjenige <span>-Element, dessen Vorfahre (<li>) gerade "übermaust" wird. Dadurch gelten für das <span>-Element nun die Regeln, die in diesem Ruleset definiert sind, darunter "display:block", was die Sichtbarkeit einschaltet. Das "position:absolute" sorgt dafür, dass die bisher verborgenen Inhalte sich überdeckend in den Vordergrund drängen.

Ich habe Dir hier ein Fiddle erstellt, mit dem Du das ausprobieren kannst: Version mit :hover
Bitte nicht wundern, ich habe eine etwas andere Struktur gewählt... die mir mehr Semantik ermöglicht.

wie ich neben meinem Namen (was ein Serientitel werden soll) einen "Button" auf dem "Anzeigen" steht erzeuge,

Wozu? Genügt Dir ein mouse-over nicht? Muss es für den Anfang zwingend ein Button sein? Auch wenn der einen Klick benötigt und damit tendenziell unbequemer wäre?

Ich würder gerne per klick das akitivieren lassen, ginge das?

Es gibt auch die Pseudoklassen :active und :focus. Erstere scheint sich für Deine Zwecke (bedingt) zu eigenen. Bleibt man mit der gedrückten Maustaste auf dem <li>-Element, erscheint der Zusatz-Kasten. Hier das Fiddle: Version mit :active

5.) Das habe ich so gemacht, weil ich ja sonst wieder in mein PHP-Syntax eingegriffen hätte, das ich ja mit '' die Syntax vom Java eingeklammert habe (so hat es mir mein Editor angezeigt).

Du kennst wohl den Backslash zum Maskieren noch nicht? Schau her:
echo '<li><a href="#" onclick="toggleElementDisplay(\'box\')"></li>';
Wie man sieht, wird die Zeichenkette ("string") mit Hilfe der Backslashes nicht unterbrochen, obwohl die einfachen Anführungszeichen um "box" herum den String sonst beenden müssten.

Ich arbeite mit "Sublime" und habe mich regelrecht in diesen Editor verliebt (^_-).

Also bist Du bestens ausgerüstet.

Mit HTML komm ich ganz gut klar und auch in CSS fühle ich mich langsam sicherer,

Ja, da gibt es noch viel zu entdecken...

aber PHP und mySQL sind echt ein Brocken, den ich erstmal logisch verstehen muss.

Und diese Sprachen sind noch "heftiger" als HTML und CSS. Das dauert.

Liebe Grüße,

Felix Riesterer.

--
"Wäre die EU ein Staat, der die Aufnahme in die EU beantragen würde, müsste der Antrag zurückgewiesen werden - aus Mangel an demokratischer Substanz." (Martin Schulz, Präsident des EU-Parlamentes)
0 78

Innerhalb von php-while-schleife datensatz mit javascritp

Simon P.
  • datenbank
  1. 0
    Felix Riesterer
    1. 0
      Simon P.
      1. 0
        Simon P.
        1. 0
          Felix Riesterer
          1. 0
            Simon P.
            1. 0
              Felix Riesterer
              1. 0
                Simon P.
                1. 0
                  Felix Riesterer
                  1. 0
                    Simon P.
                    1. 0
                      Felix Riesterer
                      1. 0
                        Simon P.
                        1. 0
                          Felix Riesterer
                          1. 0
                            Simon P.
                            1. 0
                              Simon P.
                              1. 0
                                Felix Riesterer
                                1. 0
                                  Simon P.
                                  1. 0
                                    Felix Riesterer
                                    1. 0
                                      Simon P.
                                      1. 0
                                        Simon P.
                                        1. 0
                                          Auge
                                          1. 0
                                            Simon P.
                                            1. 0
                                              Felix Riesterer
                                              1. 0
                                                Simon P.
                                            2. 0
                                              Martin_Online
                                              1. 0
                                                Felix Riesterer
                                                1. 0
                                                  Martin_Online
                                                  1. 0
                                                    M.
                                                    1. 0
                                                      Simon P.
                                            3. 0
                                              M.
                                        2. 0
                                          Felix Riesterer
                                          1. 0
                                            Simon P.
                                            1. 0
                                              Felix Riesterer
                                              1. 0
                                                Simon P.
                                                1. 0
                                                  Felix Riesterer
                                                  1. 0
                                                    Simon P.
                                                    1. 0
                                                      Simon P.
                                                    2. 0
                                                      Felix Riesterer
                                                      1. 0
                                                        Simon P.
                                                        1. 0
                                                          Felix Riesterer
                                                          1. 0
                                                            Simon P.
                                                            1. 0
                                                              Felix Riesterer
                                                              1. 0
                                                                Simon P.
                                                                1. 0
                                                                  Simon P.
                                                                  1. 0
                                                                    Felix Riesterer
                                                                    1. 0
                                                                      Simon P.
                                                                      1. 0
                                                                        Simon P.
                                                                        1. 0

                                                                          HTML5-Semantik

                                                                          Felix Riesterer
                                                                          • html
                                                                          1. 0
                                                                            Simon P.
                                                                            1. 0
                                                                              Felix Riesterer
                                                                              1. 0
                                                                                Simon P.
                                                                                1. 0
                                                                                  Felix Riesterer
                                                                                  1. 0
                                                                                    Simon P.
                                                                                    1. 0
                                                                                      Felix Riesterer
                                                                                      1. 0
                                                                                        Simon P.
                                                                                        1. 0
                                                                                          Simon P.
                2. 0
                  Simon P.
                  1. 1
                    Felix Riesterer
                    1. 0
                      Simon P.
                      1. 0
                        M.
                        1. 0
                          Matthias Apsel
                          1. 0
                            M.
                            1. 0
                              molily
                              1. 0
                                M.
                      2. 0
                        Felix Riesterer
                        1. 0
                          Simon P.
                          1. 0

                            Begriff Webseite

                            Tabellenkalk
                            • projektverwaltung
                            1. 0
                              Simon P.
                              1. 0
                                Gunnar Bittersmann
                          2. 0
                            Auge
      2. 0
        Felix Riesterer
        1. 1
          Matthias Apsel
          1. 0
            Felix Riesterer
            1. 0

              Browserverlauf bei seiteninternen Verweisen löschen

              Matthias Apsel
              • selfhtml-wiki
              1. 0
                Felix Riesterer
                1. 0
                  molily
              2. 0
                molily
  2. 0
    ChrisB