‫Kursleiter: Lassen Sie uns nun den
‫ersten Teil der Erstellung der dynamischen Knotenfarm-Website durchführen, indem
‫Sie nur die Vorlagen
‫erstellen, die die tatsächlichen Daten enthalten.
‫Und denken Sie daran, dass unser Ziel darin
‫besteht, eine solche dynamische Website zu erstellen, auf der wir einen Überblick
‫über alle Produkte haben, und dann
‫hat jedes Produkt seine Detailseite, genau wie ich es
‫Ihnen zuvor gezeigt habe.
‫Und diese Daten hier werden natürlich aus der Json-Datei gelesen. Wenn wir
‫also die Json-Datei ändern, zum Beispiel eines dieser
‫Produkte löschen und dann diese Seite neu laden, dann sollte
‫dieses Produkt von hier weg sein.
‫Oder wenn wir einige dieser Daten hier oder den Namen geändert
‫haben, dann sollte das hier auf der Site aktualisiert werden.
‫Auch hier, weil es sich um eine dynamische
‫Website handelt, die aus den Daten in der JSON-Datei erstellt wurde.
‫Wie
‫bereits erwähnt, besteht der erste Schritt
‫darin, diese Vorlagen zu erstellen, eine
‫für diese Übersichtsseite und eine für die Produktdetailseite.
‫Und wir beginnen mit der Detailseite, und
‫ich werde diese
‫Vorlagen basierend auf diesen Daten-Webseiten erstellen, die
‫wir hier im Vorlagenordner haben.
‫Schauen wir sie uns also an.
‫Wir haben also Übersicht und Produkt und beginnen
‫wieder mit dem Produkt. html.
‫Wir haben hier also den Produktnamen und dann dieses
‫Bild hier, das eigentlich ein Emoji ist, aber das spielt keine Rolle.
‫Anstatt also die echten Bilder für all
‫diese verschiedenen Produkte anfordern zu müssen, habe ich
‫mich für Emojis entschieden.
‫Das ist viel einfacher.
‫Das gleiche eigentlich für den Stil.
‫Also habe ich den gesamten CSS-Stil in die HTML-Seiten integriert, damit
‫wir nicht mehrere Anfragen stellen
‫müssen, um diese verschiedenen Daten zu erhalten, oder?
‫Denn
‫eigentlich löst jede unterschiedliche Datei eine andere Anfrage aus, okay?
‫Erinnern Sie sich, wo wir früher die Anfrage
‫nach dem Fünf-Symbol hatten, oder?
‫Wir haben also eine Anfrage für das Root, also für die Hauptseite,
‫und dann eine Anfrage für dieses Bild gesehen, und das
‫bedeutet, dass jedes Asset,
‫also jedes Teil, das Teil der Website ist,
‫seine eigene
‫Anfrage erhält, und wir das müssen wir dann
‫handhaben, und das wollen
‫wir nicht, also habe ich den Style einfach in diese HTML-Seiten inline eingefügt.
‫In Ordnung, also hier ist ein Haufen Stil, Stil, Stil, und
‫dann haben wir hier irgendwo
‫den, nun ja, den Namen des Produkts.
‫Oh ja, hier, also ist es der Name des Produkts.
‫Hier ist das Produktbild, das wiederum
‫nur ein Emoji ist, aber hier aus diesem Bildfeld stammt.
‫Wir haben also dieses Feld namens image.
‫Richtig?
‫Dann haben wir woher es kommt, einige der Zutaten
‫und den Preis und auch die Beschreibung hier unten, okay?
‫Aber auch hier kommt all dies aus diesen verschiedenen Bereichen.
‫Werfen wir also einen Blick auf die Felder, die wir haben.
‫Also Produktname, Image, Herkunft, Nährstoffe, Menge, Preis, ob Bio
‫oder nicht, und die Beschreibung.
‫Was wir jetzt also tun werden, ist im
‫Grunde all diese Teile, die wir dynamisch hinzufügen möchten,
‫durch einen Platzhalter zu ersetzen, und
‫wir werden dann später mit unserem Code
‫diesen Platzhalter durch die echten Daten ersetzen, okay?
‫Beginnen wir also hier mit dem Produktnamen, und
‫ich werde ihn löschen
‫und dann einen Platzhalter hier einfügen.
‫Und ich kann alles machen, was ich für einen Platzhalter will.
‫Ich gehe in diesem Fall einfach gerne auf so etwas ein.
‫So...
‫Produktname, dann Prozentsatz und dann die geschweiften Klammern.
‫Dies könnte also wieder alles sein, was
‫wir wollten, aber
‫wir möchten etwas finden, das
‫wahrscheinlich nicht auf der Seite ist, damit wir
‫nichts Falsches ersetzen, also nichts, was wir eigentlich nicht ersetzen möchten, okay?
‫Und ich könnte so etwas hier reinstellen, okay?
‫Und dann alles ersetzen, aber ich denke, so sieht es
‫gut aus und ist leicht zu erkennen.
‫Also müssen wir nur weitermachen und
‫das alles hier
‫hinstellen, und dann werde ich diese Namen natürlich ersetzen.
‫Hier haben wir also die Nährstoffe.
‫Hier haben wir die Menge.
‫Und hier habe ich den Preis.
‫Hier unten haben wir wieder den Preis, sehen Sie.
‫Und der Preis ist nur die Zahl, okay?
‫Das Eurozeichen bleibt hier einfach stehen,
‫denn der Preis, den wir haben, ist eigentlich nur eine Zahl.
‫Schauen wir uns das gleich hier in json an.
‫Wir haben also nur 6. 50, aber nicht die Währung.
‫Und eigentlich das gleiche hier, also greifen wir es und kopieren
‫es hier ganz schnell, und ja, tatsächlich habe
‫ich vergessen, dieses zu ersetzen, also
‫ist dies das Aus.
‫Und schreiben wir tatsächlich aus, nicht in Großbuchstaben, damit dieser Text
‫ein bisschen mehr Sinn macht.
‫Also zum Beispiel aus Portugal oder aus Spanien oder was auch immer.
‫Ach, was ist das hier?
‫Okay, ich glaube, ich habe gerade mitten im Produktnamen geschrieben.
‫Also Nährstoffe.
‫Okay.
‫Oh, und hier unten haben wir natürlich die Beschreibung, also lasst
‫uns auch diese ersetzen.
‫Oh, natürlich muss ich das hier zurückbekommen
‫und
‫so eine Beschreibung.
‫Als nächstes haben wir diese Bilder, also die Avocado,
‫und so drücke ich ein paar Befehls-Vs,
‫füge sie hier ein und kann sie hier alle
‫gleichzeitig bearbeiten.
‫Okay, dann Bild und, oh, etwas hier im Titel.
‫Wir wollen auch das Bild hier oben ersetzen und
‫auch den Produktnamen.
‫So.
‫Produktname
‫hier und hier
‫das Bild, damit auch dieses dynamisch ersetzt wird.
‫In Ordnung, jetzt nur noch eine Sache,
‫die etwas komplexer ist.
‫Wo ist es?
‫Alles klar, es ist hier.
‫Einige Produkte sind also biologisch und andere nicht.
‫Es gibt also eine Klasse im CSS,
‫die all diesen Elementen hinzugefügt wird, wenn sie nicht organisch sind, okay?
‫Das ist also diese Klasse hier.
‫Wenn es also nicht biologisch ist, sollte es nicht angezeigt
‫werden, daher dieses Bio-Abzeichen hier.
‫Und nur um Ihnen zu zeigen,
‫wovon ich rede, das Bio-Abzeichen ist dieses Ding hier, okay?
‫Wir wollen das also
‫nicht anzeigen, falls es im json falsch ist, also werden
‫wir hier tatsächlich einen weiteren Platzhalter hier
‫oder tatsächlich innerhalb der Klasse hinzufügen,
‫und deshalb nenne ich diesen nicht organisch
‫.
‫Und Sie werden später sehen, warum, okay?
‫Wenn wir dies ersetzen, wird es für Sie ein bisschen mehr Sinn machen.
‫In Ordnung, also denke ich, dass dieser hier fertig
‫ist, und ich habe einfach alles überschrieben, was wir hatten.
‫Lassen Sie mich
‫dieses Vorlagenprodukt jetzt einfach nennen, okay?
‫Dieser ist also fertig.
‫Kommen wir zum nächsten, der Übersicht.
‫Und dieser hier wird tatsächlich ein bisschen anders sein, und lassen Sie
‫mich Ihnen zeigen, warum das so ist.
‫Auch hier haben wir alle SCCs hier eingefügt,
‫und jetzt haben wir diesen
‫Kartencontainer und dann für jedes der Produkte eine Karte.
‫Jede dieser Karten hier hat also dieses Figuren-Tag, oder?
‫Nun wissen wir eigentlich nicht,
‫wie viele dieser Karten hier in dieser Übersicht sein werden, oder?
‫Stellen Sie sich vor, wir haben 10 Produkte im json.
‫Dann brauchen wir 10 dieser Karten.
‫Aber stellen Sie sich vor, wir haben nur ein oder zwei.
‫Nun, wir wollen nicht alle 10 Karten, sondern nur zwei.
‫Also, wie sollen wir das machen?
‫Nun, wir erstellen eigentlich nur eine weitere Vorlage, in der
‫nur eine Karte vorhanden ist, und
‫fügen dann eine dieser Vorlagen für
‫jede der gewünschten Karten,
‫also jedes der Produkte in die JSON-Datei, ein.
‫Alles klar, Sinn?
‫Nennen wir dies hier also die Vorlagenübersicht.
‫Und ich werde fortfahren und die Vorlagenkarte erstellen.
‫Also, was ich hier machen werde, ist, wie ich bereits erwähnt habe, jetzt ist es
‫wieder ganz oben,
‫also gehe ich vor und schnappe mir eine Figur.
‫Das war zu viel.
‫Und füge es hier ein.
‫Also bring das ein bisschen runter.
‫Okay, jede Karte bekommt nun ihre eigene Figur.
‫Okay, und jetzt werde ich alle
‫Karten von hier löschen und auch
‫hier einen Platzhalter erstellen.
‫Produktkarten.
‫Okay?
‫Später in unserem Code werden wir
‫also wieder so viele Karten erstellen, wie wir hier benötigen.
‫Wenn wir beispielsweise fünf
‫Produkte haben, erstellen wir fünf solcher Karten.
‫Wir werden sie dann zu einer
‫Reihe zusammenfügen und dann Produktkarten durch diese
‫Reihe ersetzen, die all diese verschiedenen Karten enthält, in Ordnung?
‫Damit sind wir eigentlich fertig.
‫Okay?
‫Weil die
‫meisten Dinge innerhalb der Vorlagenkarte passieren.
‫Also nichts anderes zu ersetzen hier.
‫Ich komme nur hierher, um das hier zu
‫kopieren, und jetzt ist es für uns
‫sehr einfach, das zu ersetzen, was wir hier brauchen.
‫Das hier ist also das Bild, und wir haben es tatsächlich zweimal.
‫Okay, das macht es ein bisschen schöner.
‫Bild, Bild, dann haben wir hier den Produktnamen, erinnerst du dich?
‫Hier an
‫dieser Stelle werden wir wieder den nicht organischen Platzhalter haben, und auch
‫dieser wird etwas später für Sie sinnvoller sein.
‫Mehr Bio, dann die Menge hier.
‫Dann der Preis.
‫Also müssen wir den Link hier auch tatsächlich aufbauen.
‫Also dieses hier, also das
‫A-Element, falls Sie mit HTML nicht wirklich vertraut
‫sind, das A-Element ist für einen Link.
‫Lassen Sie mich es Ihnen also in einem realen Arbeitsbeispiel zeigen.
‫Wenn wir also mit der Maus hier auf diesen Link
‫fahren, dort unten in der linken unteren Ecke,
‫also hier unten, sehen Sie, dass es sich um ein Schrägstrichprodukt handelt
‫und dann die ID gleich Null ist.
‫Und dieser ist ID gleich eins, ID gleich zwei.
‫Okay, und wenn wir darauf klicken, sehen wir es tatsächlich hier.
‫Schrägstrich also Produkt und dann ID gleich Null, und
‫diese ID hier ist genau die ID, die wir im json haben.
‫Okay, also dieser hier.
‫Die Avocado ist also eine, der Ziegenkäse hat eine.
‫Entschuldigung, die Avocado hat natürlich null.
‫Der Brokkoli hat zwei und so weiter und so weiter.
‫Und hier müssen wir eigentlich die Verbindung aufbauen.
‫Also Produkt und natürlich nicht in Großbuchstaben.
‫Also Produkt, und die ID
‫ist ID.
‫Okay?
‫Dann müssen wir diesen ID-Platzhalter hier durch die richtige
‫Nummer ersetzen.
‫Also null, eins, zwei, drei, vier, fünf und so weiter und so weiter,
‫je nachdem, wie viele Produkte es gibt.
‫Angenommen, wir haben hier einen Käse, okay?
‫Gehen wir hierher zurück.
‫Nun, dann ist das Bild dieses hier,
‫der Produktname ist dieses und die ID ist eins.
‫Okay, und das hier
‫wird dann zu ID gleich Eins und unserem Handler hier übersetzt.
‫Dieser Server-Handler hier kümmert sich dann darum,
‫zur richtigen Seite zu gelangen, wenn die Produkt-ID eins ist, okay?
‫Diese Logik ist also noch nicht implementiert, aber das
‫werden wir natürlich in den nächsten Vorlesungen tun.
‫Damit haben wir nun die Vorlagen tatsächlich erstellt, und gehen wir
‫zum nächsten Video über, in dem wir tatsächlich
‫damit beginnen, die Vorlagen auszufüllen und die letzte
‫Seite an den Browser zurückzusenden.