‫-: In questo video e
‫nel prossimo, costruiremo insieme la pagina dei dettagli del tour.
‫E lungo
‫la strada imparerai altre tecniche di
‫Pug come condizionali e mixin.
‫E come ti ho
‫mostrato prima, ecco come appare la pagina dei dettagli del tour.
‫Ed è quello che costruiremo in questo
‫video e nel prossimo.
‫L'unica cosa che lasceremo per
‫un po' più
‫tardi è in realtà questa mappa.
‫Va bene, ma tutto
‫il resto che costruiremo in queste lezioni sugli strumenti.
‫Comprese queste recensioni.
‫Va bene.
‫Quindi in questo momento abbiamo la nostra
‫panoramica e ovviamente
‫abbiamo questi pulsanti con gli URL già creati.
‫Ma poi quando proviamo ad accedere a questa pagina
‫ovviamente riceviamo questo errore.
‫Va bene.
‫Quindi torniamo al nostro codice VS e
‫in realtà voglio iniziare con una
‫piccola sfida per te.
‫Quindi quello che voglio
‫che tu faccia è creare un percorso per la
‫pagina dei dettagli in base all'URL che abbiamo appena creato prima.
‫E sarà
‫simile a quello che abbiamo
‫già qui, ma devi modificarlo un po'.
‫Va bene.
‫Basta con
‫questo, voglio anche che tu costruisca questo controller.
‫Quindi raggiungilo.
‫Perché in questo momento abbiamo
‫solo questo segnaposto.
‫E quindi lascia che ti dia effettivamente i passaggi qui.
‫E quindi, come
‫sempre, prima
‫dobbiamo ottenere i dati.
‫Questa volta per il tour richiesto.
‫E per questo,
‫tieni presente che in realtà abbiamo bisogno delle recensioni
‫qui e anche delle guide turistiche.
‫Va bene.
‫Quindi,
‫diamo ancora un'occhiata a questo.
‫Quindi abbiamo queste guide turistiche qui.
‫Giusto, e quindi sono fondamentalmente un set di dati separato.
‫Quindi utenti.
‫E poi qui abbiamo anche le recensioni.
‫Ora, queste guide turistiche
‫qui, credo che siano effettivamente popolate automaticamente in
‫un modello.
‫Quindi diamo un'occhiata a questo molto velocemente.
‫Quindi il modello
‫del tour e così,
‫sì.
‫Quindi quaggiù,
‫abbiamo questo popolamento automatico
‫ogni volta che c'è una query di ricerca,
‫ma solo per le guide.
‫E quindi non dimenticare di popolare anche
‫le recensioni.
‫Va bene.
‫Dopodiché, costruiremo
‫un modello ma
‫lo faremo insieme, quindi non ho bisogno
‫che tu faccia questa parte.
‫E infine,
‫voglio che completi anche questa parte.
‫Quindi esegui il
‫rendering
‫del modello utilizzando di
‫nuovo i dati del passaggio uno.
‫Va bene.
‫Quindi anche questo è molto semplice.
‫E quindi quello che
‫voglio che tu faccia è creare il
‫percorso e poi anche ottenere i dati.
‫Ok, metti in pausa il video qui e buona fortuna.
‫Quindi spero che tu l'abbia
‫fatto e per farmi sapere, risolvilo qui per te.
‫E inizieremo con il percorso.
‫E ora tutto ciò che dobbiamo effettivamente aggiungere qui è questa lumaca.
‫E, naturalmente, lo stiamo facendo come parametro URL.
‫Quindi proprio così, chiamandolo lumaca.
‫Quindi prima di usare l'ID giusto?
‫E così abbiamo
‫avuto così e ora chiamiamola semplicemente lumaca.
‫Va bene.
‫Perché, ancora una
‫volta, è così che appare la pagina di panoramica.
‫Fondamentalmente abbiamo il tour slash slug.
‫Ok, quindi è quello
‫che useremo per creare il tour nel controller.
‫Quindi facciamolo ora qui.
‫Quindi const, tour
‫uguale aspetta tour e trovane
‫uno.
‫Quindi questa volta non possiamo usare la ricerca per ID.
‫Beh, perché non
‫conosciamo l'ID del tour.
‫E
‫così, invece, stiamo cercando per la lumaca.
‫E la
‫lumaca è come spero
‫tu sappia richiesta. params dot
‫slug
‫tutto a posto.
‫E ora, finalmente, è tutto per popolare
‫il campo degli array.
‫Va bene.
‫Quindi il percorso da popolare sono le recensioni.
‫E in realtà non abbiamo bisogno di tutti i campi qui.
‫Quindi specifichiamo solo quelli di cui abbiamo bisogno.
‫E quindi, questa è
‫solo la recensione,
‫la
‫valutazione e l'utente.
‫Perché
‫ricorda che in realtà
‫mostriamo così il nome utente e la foto dell'utente.
‫E poi,
‫naturalmente, la recensione stessa e la valutazione.
‫Va bene.
‫Poi, naturalmente,
‫si lamenta che non abbiamo usato asincrono.
‫E ovviamente non l'avrei dimenticato.
‫Ma comunque è
‫bene che ES Line ci avverta di questo tipo di errori.
‫Elimina davvero molti bug
‫dallo sviluppo.
‫Va bene.
‫E poi
‫qui, ovviamente, passeremo quella variabile
‫di tour nel nostro modello di tour.
‫Quindi quello.
‫Dagli un salvataggio.
‫Niente più errori.
‫E quindi quella parte è in realtà ora completa.
‫E quindi tutto ciò
‫che dobbiamo fare ora è andare avanti e costruire il nostro modello.
‫Va bene.
‫Quindi,
‫dovremmo già averlo qui.
‫E questi sono i dati di sviluppo.
‫Quindi abbiamo molte
‫cartelle e molti dati.
‫E ad un certo punto può
‫diventare un po' confuso.
‫Va bene.
‫E
‫quindi, liberiamoci di questo contenuto segnaposto qui.
‫E prima di fare qualsiasi
‫altra cosa, diamo di nuovo un'occhiata al file HTML originale.
‫Che è in quella
‫cartella pubblica che ho appena chiuso.
‫In realtà chiudiamo tutto qui, perché
‫lo trovo davvero confuso.
‫Ok, anche i modelli.
‫E quindi ora ciò di cui abbiamo bisogno è pubblico e
‫poi tour. html.
‫Quindi l'intestazione che abbiamo già ovviamente.
‫E poi ecco tutto il contenuto.
‫Quindi,
‫tutte queste sezioni
‫che abbiamo sulla
‫nostra pagina sono ovviamente tradotte qui come HTML.
‫E proprio
‫come prima, in realtà ho già
‫creato un modello Pug basato su tutto questo codice HTML.
‫Va bene, non vorremmo tradurlo
‫qui manualmente insieme.
‫Va bene.
‫Quindi ce l'ho già qui in questo file modello.
‫Ma ovviamente,
‫di nuovo, se ne hai voglia,
‫puoi mettere in pausa
‫il video ora e tradurlo anche tu.
‫Va bene.
‫Ma quello che farò ora è andare
‫avanti e copiare tutto questo codice.
‫Che è ancora una tonnellata di codice come puoi vedere.
‫Quindi copiamo tutto questo e entriamo nel nostro tour
‫e incolliamolo qui.
‫Ora l'annotazione sarà di nuovo sbagliata.
‫Quindi copiamo o selezioniamo effettivamente ciò che abbiamo appena incollato qui.
‫E quindi tutto tranne la prima riga non è corretto.
‫Ma tutto ciò che dobbiamo fare qui è aggiungere un'altra scheda.
‫E questo è tutto.
‫Quindi ora sono tutti all'interno di questo blocco di contenuti
‫allo stesso livello.
‫Quindi sezione e
‫sezione e
‫quindi fondamentalmente tutte le sezioni sono
‫ora allo stesso
‫livello, quindi sono tutti fratelli.
‫Grande.
‫Quindi chiudiamo tutto ciò di cui non
‫abbiamo più bisogno.
‫E così, proprio
‫come prima, ora abbiamo questa pagina statica
‫qui con tutti questi dati statici.
‫Che sappiamo che dovremo procedere con una sostituzione.
‫Ma prima di farlo,
‫diamo un'occhiata se il nostro percorso
‫funziona già.
‫Va bene.
‫Quindi ricarichiamolo e questo
‫ci dà lo stesso errore.
‫E immagino
‫che sia perché qui
‫abbiamo tour e non tour come
‫penso che abbiamo nel nostro percorso.
‫Proprio così qui abbiamo tour.
‫E questo è il modo in cui ha senso.
‫E quindi andiamo avanti e cambiamo questo qui nella
‫nostra panoramica.
‫Ok, quindi qui
‫vogliamo davvero fare un tour.
‫Perché in
‫realtà stiamo vedendo solo un tour
‫e non più tour.
‫Destra?
‫E quindi se torniamo ora alla
‫panoramica, la carichiamo e ora
‫apriamo The Forest
‫Hiker, allora vedrai che sarà un tour.
‫E
‫poi, ovviamente, otteniamo l'HTML per
‫la pagina che abbiamo appena creato.
‫Ora per qualche ragione il CSS non è qui.
‫Proviamo a ricaricare questo.
‫Bene, cosa sta succedendo qui?
‫Proviamo a ispezionare questo.
‫E vedo che abbiamo un paio di errori.
‫Quindi possiamo fare clic su questo.
‫E quindi il motivo del CSS mancante, perché
‫invece sta cercando di caricare il file nel
‫posto sbagliato.
‫Quindi sta cercando di caricarlo nella cartella CSS all'interno
‫di tour.
‫Ma questo ovviamente non esiste.
‫E questo
‫è perché siamo qui per questo tour, ok.
‫E quindi dobbiamo sostanzialmente correggere il
‫modo in cui importiamo il CSS nel nostro modello di base.
‫Andiamo la.
‫E quindi
‫qui, in effetti, dovremmo avere un'altra barra.
‫Ok, e lo stesso in realtà qui.
‫E quindi
‫è per lo
‫stesso motivo che ti ho spiegato prima nella panoramica qui sotto.
‫Quindi abbiamo iniziato anche questo URL con una barra.
‫E così di nuovo, questo inizierà
‫dalla radice della pagina.
‫Ed è così che dovrebbe funzionare.
‫E in effetti, lo stesso vale per tutte le immagini qui.
‫Quindi tutte le immagini
‫dovrebbero sempre iniziare anche in relazione all'URL radice.
‫Quindi aggiungiamolo molto rapidamente qui a tutte queste immagini.
‫E,
‫sì, è così.
‫Quindi sono tutti loro.
‫E così,
‫con ciò abbiamo corretto
‫la panoramica e anche questo file di base.
‫Quindi, se ora
‫ricarichiamo, dovremmo ottenere l'accesso al CSS corretto.
‫E infatti, ci siamo.
‫C'è solo un altro errore
‫che è qui in questa immagine.
‫E così
‫di nuovo, è perché sta cercando
‫di caricarlo qui dal
‫tour e non dall'URL di root.
‫E così,
‫quel problema è qui nell'intestazione.
‫E
‫quindi, ovviamente, anche qui dobbiamo
‫renderlo relativo al percorso radice.
‫Probabilmente lo stesso nel piè di pagina.
‫E sì.
‫Va bene.
‫Solo per confermarlo rapidamente, sì,
‫eccoci qui.
‫Grande.
‫Quindi, come ho
‫detto ovviamente, questo ha tutti i
‫dati statici su The Park Camper Tour
‫che è quello che abbiamo nel modello.
‫Ma stiamo guardando l'escursionista della foresta.
‫E quindi, iniziamo ora correggendo il nostro modello e
‫fondamentalmente utilizzando i dati dinamici proprio qui.
‫Quindi, ricorda che la variabile che abbiamo passato qui
‫si chiama tour.
‫Destra?
‫Quindi si chiama semplicemente
‫tour ed è così che dobbiamo chiamarlo qui.
‫Quindi tour. nome, e
‫anche lo stesso quassù.
‫E ora sai già che dobbiamo usare
‫una stringa modello
‫qui perché in effetti vogliamo creare una stringa.
‫Così chiamato. tour.
‫E qui anche questo percorso non è corretto.
‫Prima di tutto deve essere una stringa
‫modello e poi le nostre immagini,
‫scriverò image slash
‫tours slash il nome dell'immagine di copertina.
‫Quindi tour dot, e ora non
‫ricordo se
‫è l'immagine di copertina o l'immagine di copertina.
‫Quindi, sì.
‫Copertina dell'immagine.
‫Va bene.
‫Quindi proviamolo velocemente.
‫E quindi ricorda, siamo al The First Hiker.
‫E quindi questo dovrebbe essere il nome.
‫E l'ennesimo errore.
‫Quindi, dice qui, non è possibile leggere il tour
‫della proprietà di undefined.
‫Quindi torniamo indietro e
‫sì.
‫Quindi ecco questo stupido errore.
‫Quindi è ovviamente un tour. nome e non nome.
‫tour.
‫Allora, cosa stavo
‫pensando lì?
‫Ricarichiamo questo e ora davvero,
‫otteniamo The
‫Forest Hiker con questa bella immagine di copertina sullo sfondo.
‫Grande.
‫E continuiamo a muoverci qui.
‫Quindi crea un'altra stringa modello.
‫Tour.
‫Durata e poi
‫il numero di giorni.
‫Poi quaggiù, abbiamo di nuovo la posizione
‫di partenza.
‫Quindi, giro.
‫posizione di partenza. descrizione, ricorda.
‫Va bene.
‫Ora quaggiù
‫abbiamo queste caselle panoramiche qui.
‫Quindi dettaglio della casella panoramica.
‫E come vedi, abbiamo quattro
‫caselle uguali
‫qui dove l'unica cosa che cambia è il
‫nome di questa icona, quindi
‫la data e la data successiva.
‫Ok, quindi qui quello che cambia non è la prossima
‫data, quello
‫che cambia è la descrizione delle scatole.
‫Quindi prossima data,
‫difficoltà, partecipanti e voto.
‫Va bene.
‫E quindi
‫fondamentalmente, questo codice qui
‫è sempre lo stesso solo con tre pezzi che cambiano.
‫Quindi il nome dell'icona, la descrizione e il
‫valore di quella descrizione.
‫E quindi, dal momento che non ci piace il codice
‫ripetuto, giusto?
‫Usiamo un'altra caratteristica di Pug che non
‫abbiamo ancora usato che si
‫chiama mixin.
‫Quindi i mixin sono fondamentalmente
‫pezzi di codice riutilizzabili in cui possiamo passare argomenti.
‫Quindi un po' come una funzione.
‫Ed è anche esattamente come i mixin in SAS.
‫Quindi questo è un preprocessore CSS con
‫cui potresti avere familiarità.
‫Quindi copiamo questo codice qui per questa finestra panoramica.
‫Quindi copiandolo.
‫E ora qui,
‫fuori da questo blocco, creiamo un nuovo mixin.
‫Quindi scriviamo mixin e poi
‫il nome del mixin, che chiamo riquadro di panoramica.
‫E poi, un po' come
‫una funzione, possiamo specificare alcuni argomenti.
‫E quindi ricorda come
‫abbiamo la descrizione della scatola, quindi abbiamo il valore di quella
‫descrizione e chiamiamolo semplicemente testo qui.
‫E poi anche il nome dell'icona.
‫Va bene.
‫Quindi ora, copiamo quel
‫testo qui e ovviamente questo ora incasina la
‫nostra formattazione.
‫Risolviamolo velocemente.
‫E così ora, queste variabili qui, funzionano
‫davvero come
‫tutte le altre variabili in Pug.
‫Quindi, qui questo dovrebbe ora essere il
‫testo.
‫Destra?
‫E questa qui dovrebbe essere la descrizione.
‫Quindi uguale descrizione.
‫Bene, qui in realtà si chiama label nei CSS.
‫Quindi chiamiamola etichetta anche qui.
‫Ok, quindi etichetta, testo e icona.
‫E quindi qui dobbiamo anche cambiare il nome
‫di quell'icona e tutti questi nomi di icone iniziano sempre con
‫il trattino dell'icona.
‫E quindi tutto ciò che dobbiamo
‫veramente sostituire è questa parte.
‫Quindi creiamo di nuovo una stringa modello.
‫E poi liberati di questo.
‫E icona.
‫Ok, ora possiamo usare questo.
‫Volevo anche dire che avremmo anche
‫potuto esportare questo
‫mixin in un altro file e quindi includere quel file qui.
‫Ma penso che questo non abbia molto senso.
‫In questo caso
‫perché non è davvero molto codice.
‫Ad ogni modo, ora andiamo avanti e usiamo
‫questo mixin.
‫Quindi fammi copiare solo il nome.
‫E così qui invece di questa finestra panoramica.
‫E per ora permettetemi di duplicarlo qui.
‫Ok, quindi abbiamo usato questo mixin scrivendo
‫plus e poi, proprio come
‫una normale funzione, gli
‫abbiamo passato argomenti vuoti.
‫E così la nostra prima finestra panoramica è la prossima data.
‫Quindi per ora, solo la data che è qui.
‫Quindi solo per mostrarti che funziona in effetti.
‫Quindi 20, 21
‫agosto.
‫E
‫poi ecco, calendario.
‫Ok perché questo è il nome qui dell'icona.
‫E così ora dovremmo
‫ottenere due scatole.
‫Quindi questo e questo
‫che dovrebbero avere lo stesso aspetto.
‫Quindi confermiamolo rapidamente.
‫E quindi possiamo passare all'uso
‫effettivo del mixin correttamente.
‫E sì, quindi ecco le nostre due
‫scatole esattamente uguali.
‫Grande.
‫Quindi liberiamoci di questo primo.
‫E ovviamente poi qui vogliamo la
‫vera data.
‫Va bene.
‫E
‫così è, aggiungi tour. inizio, date, zero.
‫Quindi diamo un'occhiata a questo.
‫E ricorda
‫che sembrerà un po' strano.
‫Come faceva prima.
‫Va bene.
‫Quindi andiamo avanti e risolviamolo.
‫Quindi prendiamolo da qui.
‫E quindi ciò di cui abbiamo
‫bisogno è fondamentalmente questo.
‫Ora non
‫voglio allungare troppo questa riga
‫qui semplicemente incollandola qui.
‫E quindi perché non
‫creare semplicemente una nuova variabile di script java per questo.
‫Quindi ricorda che dobbiamo usare questa
‫sintassi qui per creare
‫codice java script che non produrrà alcun output.
‫E poi di nuovo
‫possiamo semplicemente scrivere qui uno script java.
‫Va bene.
‫E quindi ora qui userò semplicemente quella
‫data.
‫Grande.
‫E ora duplichiamo questo qui un paio di volte per
‫tutte le scatole che abbiamo.
‫Quindi il primo è per la difficoltà.
‫E l'icona è in trend.
‫Quindi il prossimo è per i partecipanti.
‫Con l'icona dell'utente.
‫E l'ultimo è il voto.
‫E l'icona è una stella.
‫Quindi qui abbiamo la data ma, qui nella
‫difficoltà abbiamo effettivamente il tour. difficoltà.
‫Allora qui per
‫i partecipanti vogliamo questa stringa.
‫Tipo 10 persone.
‫Quindi una stringa
‫modello che dice tour. mix, dimensione
‫del
‫gruppo e poi persone.
‫E infine vogliamo il voto e
‫poi su cinque.
‫Quindi tour,
‫e non riesco mai
‫a ricordare come ho chiamato questo campo.
‫Ed è valutazioni nella media.
‫Va bene.
‫E poi, su
‫cinque.
‫Va bene.
‫E questo dovrebbe essere tutto.
‫Ora possiamo sbarazzarci di tutto questo codice.
‫E in questo modo sembra molto più bello.
‫E
‫giusto per
‫assicurarci che funzioni, salviamolo qui,
‫ricarichiamo e, in effetti, otteniamo facile, 25
‫persone e il punteggio di
‫cinque su cinque.
‫Stupendo.
‫Quindi abbiamo già trattato
‫molto terreno, ma dividiamo questo video in due e continuiamo con
‫il resto della pagina proprio
‫nel prossimo.