‫Istruttore: In questa
‫lezione, inizieremo a costruire davvero la pagina di panoramica del tour.
‫E ricorda che è
‫così che appare la pagina panoramica in questo momento.
‫Quindi non ha alcun contenuto
‫reale, ed è quello che aggiungeremo in questo video.
‫Quindi siamo qui in questo percorso di base, e
‫quindi di nuovo, è lì che sarà la panoramica, ok?
‫Quindi, dal nostro
‫punto di vista router, è ovviamente questo percorso, ok?
‫E quindi il controller che
‫si occupa del rendering di questa pagina è il controller getoverview, ok?
‫E quindi andiamo prima qui e disponiamo
‫i passaggi che faremo per
‫rendere questa pagina.
‫Quindi, la prima cosa che dobbiamo fare
‫è ottenere effettivamente tutti i dati del tour dalla
‫nostra raccolta, giusto?
‫Quindi ottieni i
‫dati del tour dalla raccolta.
‫Quindi in secondo luogo, costruiremo il nostro modello
‫e ovviamente non
‫lo faremo qui in questa funzione del controller.
‫Ma scriviamolo ancora qui.
‫Quindi, crea il modello e infine esegui il rendering di quel
‫modello, utilizzando i dati del tour dal passaggio uno.
‫Quindi, iniziando dal primo passaggio
‫qui, ottieni i dati del tour dalla raccolta,
‫il che significa che ovviamente dobbiamo
‫prima importare effettivamente il modello del tour.
‫Quindi, è qualcosa che abbiamo già fatto
‫molte volte prima.
‫Questo è in realtà un livello superiore,
‫e poi nei modelli.
‫e modello turistico.
‫E poi avremo
‫anche bisogno della funzione
‫catchAsync, perché
‫ovviamente questa panoramica di get diventerà una funzione asincrona.
‫Va bene, allora contrassegniamo questo come asincrono.
‫Ora abbiamo anche bisogno di next qui per far
‫funzionare effettivamente la funzione catchAsync.
‫Ok, quindi spero che ora inizi effettivamente a vedere il
‫valore di aver creato tutte le API
‫e tutti i codici
‫che abbiamo fatto fino a questo punto, in modo che tutto
‫ciò che dobbiamo fare ora è collegare davvero tutti questi pezzi insieme, ok?
‫Quindi, ora sappiamo già come fare tutte queste cose.
‫Abbiamo già il nostro modello di tour che funziona correttamente.
‫Quindi ora tutto questo è molto facile.
‫Quindi const tours è uguale ad aspettare.
‫Quindi, di nuovo, niente di nuovo a questo punto.
‫E trovali tutti fondamentalmente, va bene?
‫E ora cosa faremo effettivamente con
‫i dati di questo tour?
‫Bene, dovremo incollare tutti questi dati
‫del tour nel modello, in modo che possiamo effettivamente
‫utilizzarli e visualizzarli sul sito Web, giusto?
‫E quindi, in realtà è molto facile da fare.
‫Tutto ciò che dobbiamo fare è metterlo qui
‫in questo oggetto che verrà incollato nel modello di
‫panoramica in questo caso, ok?
‫Quindi, molto facile, tutto ciò che dobbiamo dire è tour.
‫Quindi, è lo stesso di tour uguale a tour e
‫di nuovo sai già che a partire da ES 6 è sufficiente
‫farlo in questo modo.
‫Ottimo, quindi ogni volta che ora c'è
‫una richiesta per la pagina panoramica, quindi in pratica
‫la nostra homepage del nostro sito Web reso dinamicamente, tutti i
‫dati del tour verranno recuperati dal nostro database
‫qui e quindi quei dati verranno incollati nel nostro modello.
‫E quindi ora tutto
‫ciò che dobbiamo fare è costruire effettivamente quel modello, giusto?
‫Quindi passiamo alla panoramica. carlino.
‫Qui possiamo effettivamente sbarazzarci di questo segnaposto h1 qui.
‫E ora voglio dare di
‫nuovo un'occhiata al file html statico qui.
‫Quindi, questo è nella cartella pubblica e
‫quindi nella panoramica. html, ok?
‫Quindi, abbiamo già costruito l'intestazione in
‫una delle lezioni precedenti
‫e quindi ora è il momento di costruire quella parte qui.
‫Ora, quando abbiamo creato il modello
‫per la prima volta, in realtà avevo sbagliato nel mio file
‫html e avevo una panoramica della classe della sezione,
‫ma nel tuo file di partenza avresti
‫dovuto avere questo principale con il principale della classe.
‫E quindi credo che nel tuo file
‫ci sia in realtà un piccolo testo che lo spiega, ok?
‫Ma, comunque, abbiamo effettivamente eliminato quella parte dal
‫nostro modello di base.
‫Quindi, ricorda che qui
‫nel contenuto in realtà non abbiamo html.
‫Quindi quell'elemento principale che nell'html è in
‫questo momento, non si trova da nessuna parte.
‫E quindi ora ne abbiamo bisogno nella nostra panoramica, ok?
‫Quindi, creiamo questa parte dell'html nella panoramica perché dopo
‫abbiamo tutte queste carte ripetute.
‫Quindi, diamo un'occhiata anche a
‫questo prima di copiare il codice.
‫Quindi, vedete che abbiamo queste carte
‫qui e quindi fondamentalmente, ognuna di queste carte, quindi ciascuno di
‫questi elementi qui, è
‫ciò che io chiamo una carta.
‫E quindi fondamentalmente avremo nove carte.
‫Quindi, queste nove carte in questa pagina panoramica.
‫E sono nove carte perché in questo momento abbiamo
‫nove tour, ma
‫ovviamente potrebbero essere meno o più di queste carte, giusto?
‫Ma comunque, ciò che è importante notare qui
‫è che queste carte in realtà si
‫ripetono ancora e ancora.
‫Quindi abbiamo questo enorme elemento di carta qui.
‫E quindi c'è il
‫primo, e poi ci sono molti elementi ripetuti uguali in seguito.
‫Va bene?
‫E così, in realtà sono andato avanti e ho creato un modello
‫di carlino solo per questa
‫carta, in modo da non doverlo scrivere manualmente ora
‫e perdere un sacco di tempo a farlo, va bene?
‫Quindi questo renderebbe il corso inutile lungo e
‫quindi ho deciso di creare questo modello in anticipo
‫per utilizzarlo ora.
‫Ora, naturalmente, se vuoi esercitare un po' di più
‫le tue abilità da carlino, sentiti libero di mettere in
‫pausa il video a questo punto e poi tradurre tutto questo codice in carlino.
‫Va bene?
‫E quando hai finito, puoi tornare indietro.
‫Ma ora andrò avanti e utilizzerò quel modello.
‫E questo è qui nei dati di sviluppo
‫e poi nei modelli e nel modello delle schede turistiche, ok?
‫E quindi questa è l'intera carta
‫per una carta, fondamentalmente tradotta in codice pug, ok?
‫Quindi copiamo
‫tutto questo, mettiamolo qui nella panoramica, ok?
‫E poi teniamo presente che prima abbiamo bisogno anche
‫di questo contenitore principale e di questo contenitore per le carte,
‫quindi copiamo anche questo.
‫Quindi solo qui come
‫riferimento, in modo che ora possiamo scrivere
‫main main e lì abbiamo un dev chiamato contenitore di carte.
‫Va bene?
‫E poi, come dice il
‫nome, quel contenitore conterrà la carta.
‫Quindi ora indentiamo questo, perché in questo momento non
‫è proprio all'interno del contenitore della carta.
‫Quindi in questo momento sarebbe all'interno del main, ma non
‫è quello che vogliamo.
‫E così, seleziono tutto e premo tab.
‫Premo di nuovo la linguetta e ora vediamo che
‫è al livello corretto.
‫È all'interno del contenitore della carta.
‫Ma in realtà non è ancora corretto
‫al 100%
‫perché questo elemento dovrebbe essere anche all'interno dell'elemento della carta.
‫E per qualche ragione, copiare questo
‫modello da un file
‫all'altro, ha un po' incasinato questo codice.
‫E quindi fai attenzione quando incolli il codice in
‫questo modo.
‫Quindi nel nostro modello originale, era tutto corretto come
‫vedi, ma poi quando l'abbiamo copiato, è stato
‫un po' incasinato.
‫Quindi, chiudiamolo.
‫Possiamo effettivamente chiudere
‫anche questo, non ci serve più, e
‫infatti anche il template base e il template tour.
‫Quindi stiamo lavorando solo con la panoramica ora.
‫E quindi in questo momento abbiamo questa carta qui.
‫E ora, come vedi, è anche una carta completamente statica.
‫Quindi non utilizza ancora
‫i dati che abbiamo incollato nel modello, giusto?
‫Quindi ha questa immagine statica, ha tutto questo testo qui
‫e non usa affatto la variabile.
‫Ok, perché quella parte la volevo davvero
‫fare insieme a te.
‫Perché in effetti questa è la parte più importante.
‫Quindi creare tutto questo modello
‫come questo non è difficile e ciò
‫che conta davvero è come riempirlo effettivamente di dati, ok?
‫E quindi è quello che faremo dopo.
‫Ma per ora
‫diamo un'occhiata a come appare in questo momento.
‫Quindi tieni presente che dovremmo avere solo una carta
‫e non nove, ok?
‫Perché ancora una volta, a questo punto abbiamo solo un elemento statico
‫della carta.
‫Ricarica questo, e quello non sembra così giusto.
‫Quindi, proviamo a capire cosa sta succedendo qui.
‫Quindi abbiamo il nostro elemento principale come
‫abbiamo creato, quindi abbiamo anche il nostro contenitore di carte.
‫Ma poi, per
‫qualche ragione, c'è di nuovo un main.
‫Umm ah ok, ovviamente ho bisogno di eliminare questo
‫elemento html originale che abbiamo lì.
‫Quindi, proviamo di nuovo.
‫E ora, ora che sembra migliore, ok?
‫Ora l'immagine qui è
‫ancora mancante, ma per ora non importa.
‫L'importante è
‫che abbiamo questo bel biglietto qui, ok?
‫Ora, il fatto è che
‫ovviamente vogliamo avere una carta per ciascuno dei tour, giusto?
‫E quindi, in pratica, quello
‫che vogliamo fare ora è scorrere l'array di
‫tour che abbiamo incollato nel modello, giusto?
‫Quindi, fondamentalmente questa variabile di tour.
‫E tieni presente che questo
‫è un array perché contiene più documenti del tour.
‫E quindi ora giriamo su
‫questo array e creiamo una scheda per ciascuno dei documenti del tour, ok?
‫E fortunatamente, è molto facile da fare
‫in carlino perché fondamentalmente il carlino viene fornito con anelli incorporati, ok?
‫E così
‫ora possiamo fare ogni tour in tour, ok?
‫Quindi tour qui è la variabile che abbiamo incollato e
‫quindi in ogni
‫iterazione la variabile corrente sarà chiamata tour.
‫Potremmo chiamarlo x o x y z o qualsiasi altra
‫cosa, ma ha senso chiamarlo semplicemente tour, ok?
‫E così in ogni iterazione quello che arriva
‫poi c'è quello che verrà stampato fondamentalmente.
‫Quindi anche questo deve essere rientrato di un altro livello.
‫Quindi fondamentalmente è all'interno
‫di questa dichiarazione di ciclo qui.
‫Ottimo, quindi vediamo come appare ora.
‫E così ora dovremmo ottenere nove carte identiche.
‫E infatti, è esattamente quello che è successo, va bene?
‫Ora, ovviamente, questi
‫dati qui non sono ancora stati creati dinamicamente.
‫Ed è proprio quello che andremo
‫a sistemare nel prossimo video.