In questo video impareremo a creare uno splendido sito web moderno, grazie a Django, il framework Python più popolare al mondo per la realizzazione di siti internet. Utilizzato per lo sviluppo web da una marea di aziende del momento, come Instagram, YouTube, Spotify e tante altre, Django ci offre degli ottimi strumenti per creare, in modo rapido ed efficiente, dei siti internet professionali. La nostra web app presenterà un ghiottissimo menù di piatti orientali, Una pagina con un form per contattarci e un'area di amministrazione accessibile solo a noi sviluppatori, dove poter gestire e modificare i dati del database.
Una volta terminato il nostro sito web, lo pubblicheremo online, per condividerlo con i nostri amici e i nostri clienti affamati di sushi. Ciao a tutti i ragazzi del vostro carissimo pitone programmatore, il canale che vi insegna i linguaggi di programmazione e di framework del momento con esempi pratici e in modo semplice e rapido. Benvenuti in questa splendida serie di video in cui realizzeremo insieme, passo passo, un sito web nella sua interezza, partendo dal front-end e arrivando fino al back-end. Nelle puntate precedenti abbiamo già conosciuto i favolosi framework Bootstrap e React, che sono i leader dello sviluppo front-end.
Oggi inizieremo ad addentrarci nel back-end, col mitico Django, e nel video successivo conosceremo MySQL, il popolarissimo servizio di gestione database. E infine, nell'ultimo video della serie, avremo il gran finale. Uniremo le quattro tecnologie apprese realizzando un sito web nella sua interezza full-stop. Ma adesso, iniziamo subito col video di oggi e mentre scorre la sigla, premi il tasto iscriviti, attivando anche la campanella... per non perderti tutti i prossimi video bene ragazzi procediamo innanzitutto a installare django sul nostro pc apriamo il terminale di windows e ingrandiamolo per bene che la presbiopia incombe attenzione per funzionare django avrà bisogno di una versione aggiornata di python quindi se non l'avete procedete ad installarla recandovi al sito python.org slash downloads che vi lascio in descrizione scaricando l'installer premendo su download python e installandolo avendo cura di spuntare ad python2pad.
A questo punto, scrivendo python-version e premendo invio, dovreste ottenere la versione configurata sul vostro sistema. Prova che Python è installato e funzionante. Possiamo ora procedere a installare Django.
Per mezzo del comando python-m pip install django. A me dice che il requisito è già soddisfatto, perché Django era già presente sul mio sistema. Bene, l'installazione di Django è terminata. Semplice no? Ora possiamo creare subito il nostro primo progetto Django.
Spostiamoci nella cartella dove desideriamo conservarlo. Io vado sul desktop, cd desktop. E ora creiamolo mediante il comando django-admin startproject e diamo un nome al nostro sito web. In questa serie di video stiamo realizzando un sito web full stack per la vendita di pietanze giapponesi. E ho già deciso il nome di questo nostro ristorante online.
Si chiamerà Full Stack Sushi, in bio! In un batter d'occhio la directory di progetto verrà creata. Guarda un po', eccola qui.
Essa contiene tutti i file di partenza utili all'esecuzione del sito web. Li conosceremo piacevolmente nel corso di questo tutorial. E come vedi sono tutti in linguaggio Python. Ma ora proviamo subito a lanciare il nostro sito web.
Uno dei file che utilizzeremo più frequentemente è manage.py che ci consente, fra le tante utili funzionalità, di mandare in esercizio il nostro sito web su un server locale. Allora torniamo al terminale, spostiamoci nella cartella di progetto cd fullstack underscore sushi e lanciamo il comando python manage.py run server. Benissimo, il server è in esecuzione alla porta 8000 sul nostro host locale.
Per raggiungerlo apriamo il nostro browser di fiducia, ecco, e digitiamo localhost 2.8000. Ottimo! Ecco una simpatica pagina web di congratulazioni che ci conferma che Django sta girando correttamente sul nostro server locale.
Per stoppare il server locale... possiamo tornare al terminale e premere ctrl c sulla tastiera ecco ora che il nostro progetto full stack sushi è stato creato ed è ben funzionante inseriamo all'interno di esso la nostra primissima app una app in django è semplicemente un'applicazione riutilizzabile che comprende un insieme di funzionalità utili ad uno scopo ben preciso. Un progetto Django può essere costituito da una o più app.
Il sito web che stiamo realizzando è molto semplice, perciò una sola app sarà più che sufficiente per racchiudere le funzionalità di cui... necessitiamo. La nostra app servirà per la vendita online di golosissimi sushi rolls, perciò sul terminale creiamola col comando python manage.py startup e chiamiamola sushi rolls o anche solo rolls.
Neanche il tempo di premere invio che l'app è creata. Infatti se entriamo nella directory di progetto ecco che ora è presente la cartella rolls contenente tutti i file python che costituiscono la app. Ottimo ragazzi, è tutto prontissimo!
Nota che il framework Django utilizza il linguaggio di programmazione Python. Se non sei pratico di tale linguaggio, non preoccuparti, ti aiuterò a seguire questo tutorial senza alcun problema. A fine video, se vorrai impararlo per bene, potrai dare uno sguardo ai tanti tutorial Python che trovi sul mio canale. Ma adesso proseguiamo, te lo ricorderò più tardi.
Possiamo ora iniziare a modificare l'app a nostro piacimento. A tal fine apriamo il progetto Django Fullstack Sushi nel nostro editor di testo preferito. Io uso l'efficientissimo Visual Studio Code.
ma sentitevi liberi di lavorare con l'editor di testo che preferite. Sublime Text, ad esempio, è un'altra scelta sublime. Andiamo su File e Open Folder per aprire il progetto Django precedentemente creato sul desktop.
Ecco fatto. Innanzitutto, dobbiamo avvisare il nostro progetto Fullstack Sushi che è stata installata la app Rolls. Apriamo il file di configurazione Settings.py.
All'interno di esso vi è una lista che contiene tutte le app Django. già installate. Aggiungiamo la nostra nuova app Roles scrivendo roles.apps.rolesconfig in Pascalcase. Includendo la nostra app con questa modalità si aprirà la porta a tutte le funzionalità di integrazione dell'app nel progetto. Salviamo?
Ottimo, siamo pronti per partire! Torniamo al terminale. Avviamo nuovamente il server locale con python manage.py runserver e verifichiamo che sia in esecuzione aggiornando il browser.
Magnifico! Ora proviamo ad aggiungere la nostra prima pagina web. Vorrei che, andando all'indirizzo url rolls, sia possibile vedere uno stuzzicante menu di sushi rolls.
A tal proposito è necessario creare una vista o view per gli amici inglesi. Una vista è una funzione Django che riceve riceve una richiesta o request e restituisce una risposta o response. La request conterrà l'URL richiesto dall'utente e la response sarà la pagina HTML che verrà a degli mostrata.
Attualmente se richiediamo tale URL ci viene mostrata una pagina di errore perché non abbiamo ancora creato alcuna vista. Che aspettiamo? Procediamo subito a crearla!
su vs code espandiamo l'app rolls e apriamo il file views è proprio qui che andremo a creare tutte le nostre viste la vista come abbiamo detto non è altro che una funzione quindi definiamola col comando def e chiamiamola ad esempio roles abbiamo anche detto che la funzione riceverà la richiesta quindi tra parentesi inseriamo request infine abbiamo detto che ritornerà una pagina html quindi scriviamo return e grazie alla funzione render già importata nel file grazie mille django possiamo renderizzare una pagina web la funzione render prende in ingresso la request, ecco, e poi una stringa che rappresenta la pagina html da visualizzare. Ma non abbiamo ancora creato nessuna pagina html. Beh, in realtà nella seconda puntata di questa serie, relativa al mitico bootstrap, avevamo già realizzato un'incantevole pagina html, contenente un appetitoso menù di sushi rolls.
In questo tutorial userò proprio tale file html. Non ti preoccupare se ti eri perso la puntata, ti ho lasciato in descrizione un link per scaricare il file HTML, già bello che pronto. A fine video ti consiglio comunque di dare uno sguardo alla lezione su Bootstrap, se desideri acquisire delle ottime basi sul popolarissimo framework frontend, ma te lo ricorderò più tardi.
Ora procediamo. Bene, ho già posizionato sul desktop il file succitato, sushi-rolls.html. Ora sorge una domanda, dove devo posizionare il file affinché che possa essere visto e riconosciuto da Django, e in particolare dalla view che stiamo definendo, vi sono diverse strategie. Io preferisco attenermi a quella ufficiale e consigliata da Django.
Apriamo la directory di progetto. Entriamo nell'app roles, qui Qui creiamo una cartella chiamata Templates, ecco, e all'interno di essa un'ulteriore cartella con lo stesso nome della nostra app, Rolls. Inseriamo proprio qui il nostro file HTML. Perfetto, Django troverà automaticamente tutti i modelli HTML presenti nella cartella Templates. Perciò non resta che tornare alla view e scrivere come argomento della funzione render semplicemente rolls slash Sì?
sushi-rolls.html. Perfetto, possiamo salvare il file. Ora dobbiamo far sì che questa vista venga eseguita quando si accede all'indirizzo url rolls. Nella cartella del progetto fullstack sushi apriamo il file urls.py. Nella lista url patterns sono inclusi tutti gli url accessibili nel nostro sito web e la relativa vista o funzione che li gestisce.
La pagina admin la conosceremo a breve, è estremamente utile. Per ora aggiungiamo la nostra brava pagina roles. Inseriamo una nuova funzione path, ecco, che prende in ingresso l'indirizzo roles è la vista che lo gestisce, che è presente nel modulo views che abbiamo appena modificato e si chiama Rolls.
Non è obbligatorio usare, per la vista, lo stesso nome dell'indirizzo, ma è certamente buona pratica. Il modulo views dobbiamo importarlo. Scriviamo sopra from la nostra app Rolls, import views.
Salviamo. Benissimo ragazzi, ora quando l'utente andrà all'indirizzo Rolls, verrà lanciata la vista Rolls, che si occuperà di renderizzare lo squisito file HTML Sushi Rolls. Torniamo al nostro sito e dirigiamoci all'indirizzo Rolls. Fantastico, la nostra stilosissima pagina web appare correttamente.
Beh, ad essere del tutto sincero, guarda un po', mancano tutte le immagini. Ma non preoccuparti, a questo problema rimedieremo dopo, perché ora vi sono alcuni punti più importanti da analizzare. Torniamo al file urls.py.
Qui abbiamo aggiunto una funzione path che chiama la vista rolls quando si accede all'indirizzo rolls. Tutto ciò funziona alla grande, come abbiamo visto, ma esiste una pratica leggermente differente che è consigliata da Django perché è più modulare ed efficiente. Per completezza ci tengo ad illustrarvelo un attimino, sarò rapido. Invece di chiamare la vista specifica dell'app roles, in questo file globale contenente tutti gli indirizzi del progetto, chiamiamola da un file specifico per l'app roles stessa.
È più sensato, no? Allora creiamo. dentro la cartella dell'app rolls un nuovo file chiamato sempre urls.py.
Qui, from django.urls, importiamo la funzione path, che ci servirà a breve, e dalla cartella corrente, from punto, il modulo views. contenente la vista da noi creata precedentemente. Ora qui definiamo una lista, sempre chiamata URLPatterns, che conterrà sempre una funzione path che avrà come argomento un indirizzo vuoto. Poi vi spiego perché.
È la solita vista views.rolls. Perfetto! Ora che abbiamo impostato il file urls.py specifico per l'app, adeguiamo il file omonimo relativo al progetto. In questo file non dobbiamo più importare l'app, cancelliamo, e non dobbiamo neanche più riferirci alla vista specifica dell'app. Questo è un grosso vantaggio, perché tale file globale non dovrà gestire tutti gli URL e le viste di tutte le app esistenti, ma ne delegherà la gestione al rispettivo file urls.py specifico per l'app.
Procediamo ad includerlo. Ci servirà la funzione include, che importiamo, ecco, e tale funzione la useremo come secondo argomento della funzione path, delegando il file specifico dell'app.rot.urls. Sarà tale file.
file che si occuperà di gestire tutti i link relativi all'app Rolls, richiamando le relative viste. In questo file l'indirizzo è vuoto, perché voglio che l'URL per accedere alla pagina sia semplicemente rolls slash senza aggiungere altro. Se volessi ad esempio rolls slash menu, aggiungerei qui menu. Vedremo più avanti un esempio calzante per comprendere meglio tale funzionalità.
Per ora salviamo i file modificati, torniamo alla pagina, Aggiorniamola? Yes! L'accesso alla pagina continua a funzionare perfettamente! Sì sì, lo so che non vedi l'ora di visualizzare le immagini, ma pazienta un secondo.
Vi è un'altra faccenda molto importante da analizzare, che riguarda il modo in cui stiamo inserendo nella pagina queste sei cards. Torniamo al nostro caro file HTML Sushi Rolls e diamogli uno sguardo. Ecco qui!
Il contenitore delle cards. Questa è la card del California Roll, questa del Dragon, del Dynamite e così via. Come starei notando, tutti i valori di ciascuna card sono hardcoded, ovvero sono inseriti manualmente qui sul file HTML.
Vedi l'immagine, il nome e la descrizione. Inserire e modificare i valori in questo modo risulta molto disordinato e caotico. Sarebbe molto meglio estrarre questi valori dinamicamente da un database facilmente accessibile e modificabile.
Buone notizie! Fortunatamente nel framework Django è già incluso un database leggero per le operazioni più semplici, che si chiama SQLite 3. Possiamo utilizzare questo database proprio per conservare i dati relativi a ciascuna card. ovvero l'immagine, il nome e la descrizione di ciascun sushi rolls.
Vediamo come procedere. Innanzitutto dobbiamo creare un modello, ovvero una classe Django, che rappresenta la tabella di un database, con i vari campi e datatype. Nella cartella dell'app apriamo il file models.py.
È qui che creeremo i modelli utilizzati nell'app. Abbiamo detto che dobbiamo conservare l'immagine, il nome e la descrizione di ciascun roll. Allora creiamo.
una classe chiamata Roll, che tra parentesi è erede della classe Models.model, madre di tutti i modelli Django. Due punti a capo. Il primo campo sarà Immagine e sarà di tipo Models.ImageField perché conterrà appunto un'immagine. Il secondo sarà Nome di tipo Models.CharField perché conterrà dei caratteri.
Per tale field possiamo stabilire il numero massimo di caratteri valorizzando il parametro MaxLength, ad esempio 20 caratteri. Infine avremmo la descrizione che sarebbe sempre un char field, ma dai, invece di una descrizione mettiamo un prezzo, così con la scusa conosciamo un field differente. Prezzo uguale models.floatField che rappresenta un numero con la virgola.
Salviamo il file e… fantastico! Abbiamo così creato il nostro primo modello! Ora dobbiamo avvertire Django di tale creazione, generando una migrazione. Le migrazioni sono dei file che Django usa per tenere conto delle modifiche effettuate ai modelli. Per generare una migrazione, migrazione dobbiamo lanciare un comando dal terminale, ma è già occupato con l'esecuzione del server, come al solito.
Potremmo stoppare il server, ma facciamo prima ad aprire un nuovo terminale. Ecco, spostiamoci nella cartella del progetto cd desktop slash fullstack sushi, dove è presente il buon file manage.py. E siamo pronti a generare le migrazioni.
Scriviamo python manage.py make migrations. Invio. Ecco che Django ha creato una migrazione, che altro non è che un file python, in questo percorso. La migrazione è relativa alla creazione del modello role.
È proprio ciò che abbiamo fatto poco fa e Django non ha avuto problemi ad accorgersene. Ora che la migrazione è creata dobbiamo usarla per aggiornare il database generando la tabella. A tal fine eseguiamo il comando python manage.py migrate.
Invio. Guarda un po', sono stati applicate un sacco di migrazioni al database. Questo perché quando si crea un progetto Django vi sono tante migrazioni. di partenza in sospeso e quando si lancia il primo migrate vengono tutte applicate.
Oltre queste è stata applicata anche la nostra cara migrazione relativa all'app roll, eccola qua. Ora che la tabella è stata creata, come possiamo accedere al database per visualizzarla e aggiungere i dati che ci servono? È semplicissimo! Django ci mette gentilmente a disposizione un'area di amministrazione dove poter accedere al database. Torniamo al file degli URL di progetto.
Ricordi l'indirizzo admin? Ti avevo detto che lo avremmo esplorato ed è finalmente giunto il momento. Torniamo alla nostra spavaldissima pagina web e, al posto dell'indirizzo roles, dirigiamoci verso admin. Invio.
Guarda un po', ci compare una misteriosissima pagina di login al sistema di amministrazione Django. Ci vengono richieste delle credenziali utente, ma noi non abbiamo ancora creato nessun utente. Beh, procediamo subito.
Torniamo al terminale e digitiamo python manage.py create superuser per creare un utente che possa accedere all'area di amministrazione. Invio. Scegliamo un nome utente. Io scrivo semplicemente admin. Metto un'email fittizia, admin at example punto com.
E come password, sempre admin. Django giustamente si lamenta e ci dà dei consigli per rendere il nome utente. per la password più sicura.
Quando realizzerete un vero sito web vi consiglio di dargli ascolto, ma per questo tutorial possiamo tranquillamente infischiarcene e scegliere Yes. Il super utente è stato creato con successo! Bene, ora siamo pronti per accedere.
Torniamo alla pagina e digitiamo admin, admin... e premiamo login. Perfetto!
Siamo finalmente dentro l'area di amministrazione di Django. Qui possiamo gestire i gruppi utenti e gli utenti stessi. Ecco quello che abbiamo appena creato. Ma non abbiamo a disposizione la tabella database da noi creata.
Non preoccuparti, è sufficiente abilitarla per potervi accedere qui nell'area di amministrazione. A tal fine torniamo al codice e dentro la cartella dell'app apriamo il file admin.py. E'qui che registreremo i modelli che vogliamo visualizzare nell'area di amministrazione.
Importiamo il modello realizzato. From.models Import role. E procediamo alla registrazione scrivendo admin.site.register e tra parentesi passiamo role.
Salviamo e... Ora se torniamo alla pagina ed eseguiamo nuovamente l'accesso all'area di amministrazione... Ecco che appare la nostra tabella roles pronta pronta per essere popolata. Entriamovi e aggiungiamo il primo role.
Ecco i tre campi da noi impostati. Iniziamo con l'inserire un'immagine. Sul desktop ho una cartella Images che contiene tutte le golosissime immagini di questo tutorial.
Potete scaricarla anche voi, vi ho lasciato il link in descrizione. Torniamo alla pagina e per l'immagine premiamo Choose File. Entrando nella cartella Images, scegliamo l'immagine del primo roll. ad esempio California. Ecco fatto!
Come nome scriviamo California e come prezzo, ad esempio, 1.99. Premiamo save e ecco inserito nel database il nostro primo roll. Se diamo uno sguardo alla cartella base di Django, vediamo che è apparsa l'immagine California, proprio quella che abbiamo appena caricato sul primo roll.
Ciò significa che il caricamento dell'immagine ha avuto successo e che è proprio qui, nella cartella base, che Django conserva le immagini. caricate a database. Però, a dirla tutta, non mi piace che le immagini vengano gettate qui. Sarebbe meglio inserirle in una cartella specifica, altrimenti si creerebbe disordine.
Buone notizie! Django ci dà la possibilità di specificare in quale cartella conservare i file caricati a database. Nella cartella di progetto apriamo il solito file Settings. Sotto la costante basedir, che rappresenta la cartella base di Django, quella dove è conservato il file immagine, valorizziamo un'altra costante.
Si chiama MediaRoot e definisce in quale cartella vengono conservati tutti i media del progetto, immagini comprese. Mi piacerebbe venissero conservate dentro la cartella BaseDeer, va bene, ma all'interno di un ulteriore cartello. cartella, chiamata ad esempio media.
Allora le assegno la funzione os.path.join, dandole come argomenti base dir e la cartella media. La funzione join prenderà il percorso della cartella base, vi aggiungerà la funzione join, e la funzione join prenderà il percorso alla cartella media e ritornerà così il percorso completo alla costante media root. Il modulo OS contenente la funzione join va importato, quindi poco sopra scriviamo import OS. Ora, per finire, spostiamoci sul file degli indirizzi globali. Alla lista URL patterns aggiungiamo, con un più, la funzione static, che avrà come primo argomento settings.mediaurl e come secondo argomento document root.
è uguale settings.mediaRoot, la costante appena definita. Grazie a tale aggiunta, i template HTML potranno vedere le immagini contenute nel mediaRoot da noi impostato, ovvero nella cartella media. Non dimentichiamo di importare la funzione static e il modulo setting.
Quassù scrivo from django.conf.urls.static Import static e poi from django.conf import settings. Perfetto! Salviamo tutti i file e...
Proviamo a ricreare il Roll California, ricaricando l'immagine. Prima cancelliamola dalla cartella base. Ecco.
Ora facciamo pulizia anche sul database. Selezioniamo l'elemento creato e, dal menu a tendina, selezioniamo Delete Selected Rolls. Go. Confermiamo.
Benissimo, la tabella dei rolls è nuovamente vuota. Ora proviamo a ricreare l'elemento. Add Roll.
Scegliamo l'immagine California. Nome California. Prendiamo la scatola, e se torniamo alla cartella base di django, vediamo che è stata creata la giocatrice. E'stato creato!
E'stato creato! E'stato creato! E'stato creato!
E'stato creato! E'stato creato! E'stato creato! E'stato creato! E'stato creato!
E'stato creato! E'stato creato! E'stato creato! E'stato creato! DirecTory Media e all'interno di essa conservata l'immagine California.
Ottimo, ora che è tutto in ordine, torniamo al database e continuiamo ad aggiungere gli altri roll a velocità supersonica. Bene, ora che sono arrivato all'ultimo premo Save e ecco i sei roll creati. Il primo è il California, il terzo è il Dynamite, e così via. Però non mi piace che vengano chiamati Role Object seguiti dal numero. Sarebbe più intuitivo se fosse visualizzato proprio il loro nome.
California, Dynamite, eccetera. A tal fine dobbiamo tornare al file dei modelli, e far sì che la rappresentazione degli oggetti Role sia coincidente col field nome. Per fare ciò definiamo la funzione built-in python doppio underscore string doppio underscore dandogli self come parametro e ritorniamo self punto nome ottimo ora salviamo e ricordiamoci che ogni volta che modifichiamo i modelli dobbiamo generare nuovamente le migrazioni lanciando make my creations e applicarli al database lanciando migrate tuttavia per questa modifica in particolare è che influenza solamente le rappresentazioni degli oggetti, non è necessario.
Torniamo alla pagina, aggiorniamola e... Perfetto! Ora gli oggetti sono rappresentati come si deve.
Oltre che essere più comprensibile per noi, tale rappresentazione giova anche a diverse funzionalità di amministrazione Django, quindi è sempre buona norma implementarla. Bene ragazzi, tenetevi forte perché siamo in procinto di vedere, finalmente, tutte le splendide immagini visualizzate nella pagina. A tal proposito dobbiamo estrapolare i roll dal database e passarli alla pagina HTML, che si occuperà di visualizzarli.
Questa operazione sarà effettuata dalla vista, vi faccio vedere subito. Prima però, se state trovando questo video interessante, fatemelo sapere con un graditissimo mi piace. Se il video vi piacerà, porterò avanti questa serie, mostrandovi come realizzare un intero sito web in tutte le sue parti, dal front-end fino al back-end.
Lasciami un bel commento dicendomi come mai ti è piaciuto questo video. ti interessa lo sviluppo web o quali video vorresti vedere in futuro? E iscriviti al canale attivando anche la campanella per non perderti i prossimi video. Bene, torniamo al modulo views e innanzitutto importiamo il modello role precedentemente creato.
Scriviamo from.models import role, ovvero dal modulo modelli importiamo il modello role. Ora, quando la vista role verrà eseguita, prima di renderizzare la pagina HTML dovrà andare a pescare i role dal database e, magari, conservarli su una variabile. La variabile la chiamiamo roles, uguale, e per estrarre tutti gli oggetti roles contenuti nel database scriviamo il modello role.objects.all. Benissimo, così facendo avremo salvato tutti i roles del db nella variabile roles.
Adesso, tale variabile, dobbiamo passarla alla pagina HTML. per visualizzare immagine, nome e prezzo di ciascun roll. Nella funzione render possiamo aggiungere come terzo argomento un dizionario, quindi aggiungiamo una virgola e apriamo parentesi graffe.
Nel dizionario inseriremo una chiave con un nome a nostra scelta, ad esempio rolls, a cui assegnare, due punti, la variabile coi dati di interesse. roles. Perfetto, così facendo la variabile roles, contenente i dati estratti dal database, verrà passata alla pagina HTML, che potrà accedervi mediante la chiave roles. Ora salviamo il file e andiamo alla pagina HTML per effettuare tale operazione.
Come ben ricorderete, le sei card che presentano i roles sono scritte manualmente, una dopo l'altra. Questo è un sacrilegio, perché nei linguaggi di programmazione moderni si deve assolutamente evitare di evitare di ripetere porzioni di codice scrivendole manualmente. Per ripetere del codice è ben più opportuno utilizzare dei cicli.
Fortunatamente il buon Django ci consente di utilizzare dei cicli, persino qui, nei file HTML. Vediamo subito come fare. Innanzitutto disfiamoci di tutte le card ripetute, lasciando solo la prima.
Ecco fatto. Questa card dovrà essere ripetuta tante volte quanti sono i roles presenti nel database. In Python potremmo scrivere un semplice ciclo for che dice per ciascun role nell'elenco dei roles aggiungi una card. In Django agiremo nello stesso identico modo, cambia solo la sintassi.
Ti faccio vedere. Subito prima della card da ripetere apriamo parentesi graffe e percentuali. Questa sintassi ci permette di inserire in un file HTML dei comandi Django.
Scriviamo per ciascun role in role. Ecco, la chiave ROLLS è quella che abbiamo passato precedentemente dalla vista e contiene tutti i ROLLS presenti nel database. Ora che abbiamo aperto un ciclo FOR, dobbiamo chiuderlo. Subito dopo la card da ripetere, apriamo nuovamente graffe e percentuali e scriviamo tutto attaccato END FOR. Ecco fatto!
Il codice contenuto dentro il ciclo FOR verrà ripetuto tante volte quanti sono i ROLLS a database. Salviamo il file e proviamo subito. Torniamo alla pagina, aggiorniamo...
Fantastico! La card è stata ripetuta 6 volte. Quanti sono i roles al database?
Ottimo! Però ogni card presenta sempre gli stessi valori. Questo perché, torniamo al codice, anche se la card è dentro il ciclo for, i valori di immagine, titolo e descrizione sono sempre hardcoded. Allora, voglio che ad ogni iterazione vengano mostrati i valori del relativo...
Partiamo dal nome, che è il più facile. Cancelliamo il valore statico California e, al suo posto, voglio aggiungere un valore dinamico che rappresenti il nome di ciascun role. Oltre che dei comandi, Django ci permette anche di inserire semplici variabili. È sufficiente aprire doppia graffa e inserire il nome della variabile.
Scriviamo role.nome per estrarre il campo nome da ciascun elemento role. Se ora... Salviamo, torniamo alla pagina e aggiorniamo... Meraviglioso! Ora ciascuna card ha il nome corretto.
Procediamo similmente per gli altri due valori. Cancelliamo la descrizione e al suo posto, come avevamo detto, inseriamo il prezzo. Scriviamo il simbolo euro e poi apriamo doppia graffa e scriviamo roll.prezzo. Salviamo, torniamo alla pagina, aggiorniamo, yes, ecco anche i prezzi!
Ed ora, finalmente, il momento che tutti aspettavamo, le immagini! Torniamo al file e cancelliamo la source statica. Al suo posto apriamo doppie graffe e scriviamo roll.immagine. Salviamo, torniamo alla pagina e siete pronti a vedere le splendide e prelibate immagini di Sushi Rolls? 3, 2, 1, aggiorniamo!
Ehm, non si vede ancora una cippa. Questo perché, torniamo al codice, l'oggetto immagine è di tipo image field, come avevamo definito nel modello. E tale oggetto è un tantino più complesso dei char field o del float field, che abbiamo assegnato con successo. Accedendo al char field si ottiene una semplice stringa, e al float field un semplice float. Invece, accedendo all'image field, si ottiene una classe Django chiamata imageFieldFile, che è composta da diversi parametri.
Torniamo al file HTML. All'attributo source va passato il percorso in cui è conservata l'immagine. come avevamo fatto prima staticamente. Per fortuna, la classe ImageFieldFile offre l'attributo URL, che specifica appunto il percorso in cui è conservata l'immagine a database. Allora aggiungiamo a immagine.url e salviamo.
Se ora torniamo alla pagina e la aggiorniamo... Finalmente! Guardate che splendore la nostra golosissima pagina di Sushi Rolls! C'è però un dettaglio che è ancora da sistemare, vediamo se riesci a notarlo. Ti do un indizio, guarda nella barra di navigazione.
Ebbene sì, il logo è ancora non visibile. Torniamo al codice HTML e capiamo perché. Ecco, nella barra di navigazione, il valore dell'attributo source è ancora relativo ad un'immagine non esistente.
Beh, potrebbe essere che il valore sia più alto, ma non è così. potremo fare come visto precedentemente per le altre immagini, ovvero creare un modello a database e caricarvi un file immagine. Ma per un semplice logo, che sarà uno solo e non verrà modificato frequentemente, mi sembra un tantino superfluo e per me è un effettuare un'implementazione su database. Vi mostro una soluzione più basilare che Django ci mette a disposizione per gestire semplici file statici, come una semplice immagine ad esempio. Innanzitutto creiamo nella directory dell'app una cartella chiamata static e in questa cartella che è per impostazione predefinita Django andrà a cercare i file statici.
In questa cartella possiamo creare una sottocartella col nome della nostra app, Rolls. È all'interno di quest'ultima directory che conserveremo il nostro logo. Perciò andiamo sul desktop, apriamo la cartella immagini, prendiamo il logo e trasciniamolo sulla cartella creata. Ecco. Bene, ora torniamo al template HTML.
Troviamo il tag immagine responsabile della visualizzazione del logo. Eccolo. Subito sopra di esso apriamo graffa e percentuale per inserire un comando Il comando in questione è load static e serve, come intuibile, a caricare la directory contenente i file statici. Una volta caricata, possiamo accedervi!
Nell'attributo source del tag immagine apriamo nuovamente graffe e percentuali e indichiamo la directory static appena caricata e, tra apici, il percorso del file a cui vogliamo accedere. roles.logo.png È tutto pronto! Salviamo i file, torniamo alla pagina, aggiorniamola... Mitico! Ecco il logo che appare correttamente!
Bene ragazzi, la nostra prima pagina web realizzata! con django è finalmente terminata è un look frizzante e brioso ma se volessimo inserire un'altra pagina nel nostro sito web come potremmo fare ad esempio vorrei che cliccando il bottone contattaci l'utente venga trasferito ad una pagina che presenti un modulo dove inserire le sue domande ed impressioni. Beh, innanzitutto dobbiamo creare tale pagina. E abbiamo già imparato come fare, no?
Basta creare un template HTML. Andiamo nella cartella dei template e, invece che crearne uno da zero, duplichiamo il cartello. Caro vecchio sushi rolls punto html.
Facciamo tasto destro, copy, e sulla cartella rolls, tasto destro, paste. Ora rinominiamolo. Tasto destro, rename, contattaci ad esempio. Apriamolo.
Bene, nella sezione head vi sono le configurazioni preliminari, l'import di bootstrap, eccetera. Possiamo lasciare tutto così com'è. Nel body abbiamo la navbar, che a mio parere possiamo mantenere.
Ecco. carino che in tutte le pagine del sito vi sia la stessa navbar con tanto di logo e titolo. Tutto ciò che viene dopo è relativo al menu dei sushi rolls, quindi dobbiamo cancellarlo. Selezioniamo tutto fino a giù, ma lasciando lo script bootstrap.
E cancelliamo. Ecco. Ora vediamo se sul sito di bootstrap trovo un semplice form da copiare. Nel browser vado su getbootstrap.com.
Vi lascio il link in descrizione. Entro nella sezione docs. e, sulla barra laterale, espando il menu Forms per visitare la pagina Form Control. Benissimo, il primo form presentato è già sufficiente per il nostro esempio.
L'utente del nostro sito potrà inserire la propria email e, nel campo sottostante, farci delle domande, speriamo non troppo inopportune. Ovviamente, se ci chiederà qual è l'ingrediente segreto del Dynamite Roll, non glielo sveleremo neanche sotto tortura. Bene ragazzi, copiamo il codice gentilmente offerto da Bootstrap, torniamo al nuovo template e, per avere un layout migliore, inseriamo il contenitore base di Bootstrap.
Ecco, all'interno di esso incolliamo il codice copiato. Se navighiamo tutto a destra, la scritta EXEMPLE TEXT AREA non mi piace affatto. Sostituiamola con CHIEDICI TUTTO CIÒ CHE VUOI, o quasi. Salviamo e... Ora dobbiamo decidere in quale indirizzo del nostro sito debba essere visualizzata questa nuova pagina HTML.
Torniamo un attimo al sito. Come vedete, la pagina col menu dei Sushi Rolls si trova all'indirizzo Rolls, semplicemente. Questo è l'indirizzo base della omonima app Django. Voglio mostrare la nuova pagina dei contatti all'indirizzo rolls.com.
Se lo scrivo adesso e premo invio, mi dà errore. perché tale indirizzo è attualmente inesistente. Procediamo a crearlo.
Apriamo nella cartella dell'app ROLLS il file degli indirizzi. Aggiungiamo alla lista URL PATTERNS un nuovo PAT con indirizzo CONTATTACI. Non serve scrivere ROLLS slash CONTATTACI perché tale indirizzo precede già tutti gli indirizzi della nostra app ROLLS.
Questo grazie al file degli indirizzi globali, se infatti lo apriamo per rinfrescarci la memoria, Vediamo che rolls slash è passato al modulo urls che stiamo modificando. Torniamo a tale modulo. Il primo indirizzo, rolls slash senza nient'altro, evoca la vista rolls che si occupa di renderizzare la pagina dei sushi rolls. Il nuovo indirizzo, rolls slash contattaci, dovrà evocare anche egli una vista, ad esempio views.com. contattaci che si occuperà di renderizzare la nuova pagina di contatti.
Ricorda, le viste sono quelle funzioni di Django che si occupano, tra le altre operazioni, di renderizzare una pagina quando l'utente accede ad un indirizzo URL. La vista contattaci però non l'abbiamo ancora creata. Procediamo subito.
Apriamo il modulo views e abbiamo già la vista roles che si occupa di visualizzare il template html sushi rolls. Creiamo similmente la nuova vista. def contattaci frattonde il parametro request due punti a capo return la funzione render e frattonde dopo l'argomento inseriamo il percorso del nuovo template rolls slash contattaci punto html.
Benissimo ora è tutto pronto salviamo tutti i file torniamo alla pagina E proviamo a riaccedere all'indirizzo roles slash contattaci. Fantastico! Ecco la nostra nuova bellissima pagina con i campi di inserimento.
E una label a dir poco sospetta. Ottimo! Ora torniamo alla pagina principale.
Ecco. Ora l'ultimo passaggio è far sì che alla nuova pagina si possa accedere semplicemente cliccando il bel bottone contattaci. È molto semplice. Torniamo al template HTML Sushi Rolls. Individuiamo il button Contattaci.
Eccolo. Cambiamolo in un link. Ah, ecco. Aggiungiamo l'attributo href e specifichiamo il percorso desiderato.
Slash Rolls slash Contattaci. Salviamo, torniamo alla pagina e aggiorniamola. Ed ora, siete pronti? Premiamo il pulsante Contattaci.
Perfetto! Siamo immediatamente immediatamente trasportati alla nuova pagina di contatti. Il collegamento funziona alla grande.
Ma vi voglio svelare che vi è un modo molto migliore per effettuare tale collegamento. Se torniamo al template, vediamo che abbiamo inserito, molto spartanamente, l'indirizzo URL della pagina. Questo, oltre che essere poco leggibile, è una ripetizione dell'indirizzo URL già scritto nel file degli indirizzi, vedi? Perciò, se in futuro volessimo cambiare questo indirizzo, dovremo cambiarlo anche nel template HTML, o meglio, in tutti i template e file in cui si fa riferimento a tale indirizzo.
Fortunatamente Django mette a disposizione una soluzione più efficiente ed organizzata. Nella funzione path possiamo valorizzare un terzo parametro, che si chiama name. Questo parametro ci permette di dare un nome a questo indirizzo.
Ad esempio, contattaci. Ora, se in un altro punto del sistema vogliamo riferirci a questo indirizzo, non dovremo scrivere spartanamente la sua url, come fatto qui, ma... cancelliamo? Possiamo aprire graffa e percentuale per inserire il comando django url e specificare il nome dell'indirizzo desiderato. Contattaci.
Se adesso salviamo i file, torniamo alla pagina e la aggiorniamo e premiamo nuovamente il pulsante contattaci, il collegamento continua a funzionare. E ti dirò di più. Se torno al file degli indirizzi e al posto dell'url contattaci scrivo ad esempio informazioni slash facci una domanda È sufficiente salvare, tornare alla pagina, aggiornarla e se ora clicco sul pulsante Perfetto!
Ecco che ci trasporta automaticamente alla nuova pagina aggiornata. Bene, ora da questa pagina dobbiamo inventarci un modo per tornare alla pagina iniziale. Io direi di sfruttare il logo e scritta che, anche se non sembra, sono racchiusi all'interno di un link cliccabile. Benissimo, innanzitutto torniamo al file degli indirizzi e ripristiniamo l'url originale, che questo sembra uscito da un sito di pubblica amministrazione.
Senza offesa. Ora, la pagina iniziale è rappresentata da questo percorso, perciò diamo un nome anche adesso. Name uguale home, ad esempio. Ora, come abbiamo imparato, andiamo al template HTML, stavolta della pagina contattaci, e individuiamo il link che ci interessa. Eccolo qui.
Come vedi, contiene il logo e il nome del nostro prediletto ristorante. Ora, se vuoi, puoi anche aggiungere un nome. Valorizziamo l'attributo href, aprendo graffe e percentuali e scrivendo url home.
Perfetto, salviamo e… beh, lo stesso link è presente anche nel template sushi rolls, perché anche qui è presente la medesima navbar. Quindi svolgiamo la stessa operazione, graffe e percentuali, url home. È un bel po'ripetitivo, ma come starai già immaginando, esiste una soluzione migliore anche per esigenze come questa.
La vedremo a breve. Benissimo, assicurati di aver salvato tutti i file modificati e torniamo al browser. Per testare il tutto, partiamo dalla pagina iniziale. Ecco qua. Premiamo il pulsante contattaci, eccoci alla pagina dei contatti e ora se premiamo sul logo, voilà, il tutto funziona alla grande.
Se volete, come esercizio, potete provare a creare un collegamento ad una nuova pagina mediante il bottone ordina subito. Ora vi mostro l'ottimo sistema di gestione dei template gentilmente offerto da Django per organizzare i codici HTML in modo più proficuo, evitando la ripetizione che abbiamo visto poco fa. Se ci pensi, tutta la parte di intestazione iniziale, così come la navbar e la parte finale del file, sono identiche sia nel template Sushi Rolls che nel template di Django. che nel template contattaci. E il discorso varrà per tutte le altre pagine della nostra applicazione web.
Ma quindi non ha senso riscrivere tutto sto codice in ogni template, ci deve essere un modo migliore. E infatti c'è, seguitemi un attimo. Creiamo un nuovo template nella solita cartella, chiamato ad esempio common.html. In questo file inseriamo tutto il codice che tutto il codice HTML che sarà uguale e comune per tutte le pagine del nostro sito.
Allora andiamo al template Sushi Rolls e selezioniamo tutto con CTRL A. Copiamo e incolliamo nel template common. Ecco. Ora cancelliamo tutto il codice da dopo la navbar fino a prima dello script così da mantenere solo l'HTML comune a tutte le pagine. Ora voglio che qui, fra la navbar e lo script, possa essere inserito dinamicamente un blocco di contenuti HTML, diversi per ogni pagina.
È semplicissimo! Apriamo graffe e percentuali e definiamo un blocco col comando block e diamogli un nome, ad esempio content. Immediatamente sotto riapriamo graffe e percentuali e chiudiamo il blocco appena aperto col comando end block.
Benissimo! Tutto il codice HTML diverso per ciascuna pagina verrà... inserito all'interno di questo blocco. L'ultimo passaggio da svolgere è estendere i template Sushi Rolls e Contattaci affinché includano il codice cui presente.
Sul template Sushi Rolls cancelliamo innanzitutto il codice già presente nel template comune. perché non ci servirà più. Ecco fatto.
Ora, all'inizio del file, apriamo graffe percentuali e scriviamo il comando extents per importare l'HTML presente nel template comune, che si trova nella cartella roles e si chiama common.html. Benissimo. Per finire, specifichiamo l'inizio e la fine del blocco di contenuti dinamico. Sopra la prima div apriamo block content. Ecco, e sotto l'ultima div, alla fine del file, chiudiamolo con end block.
Perfetto. Facciamo la stessa operazione nel template contattaci a velocità supersonica. Ecco fatto.
Bene, dopo aver salvato tutti i file, torniamo alla pagina e testiamola. Fantastico ragazzi, funziona tutto alla grande. Abbiamo realizzato in pochissimo tempo un vero e proprio sito web, scritto in modo efficiente e ben organizzato. Ora non resta che renderlo accessibile al mondo intero.
Ebbene sì! Nella seconda e terza parte di questo video vi mostrerò come pubblicare sul web il nostro splendido sito, in due modalità differenti. Prima di pubblicarlo, sentiti pure libero di aggiungere ulteriori pagine e funzionalità, se lo desideri. Le conoscenze apprese in questo video ti permetteranno di implementare... tutti i collegamenti, le pagine e gli elementi database che desideri.
Il limite è solo la fantasia. Ovviamente un framework vasto e ricco di potenzialità come Django richiede decine di ore per essere apprese esaurientemente. Ma in questo tutorial ho voluto fornirti delle solide conoscenze di base che ti permetteranno di continuare ad apprendere questo eccellente framework in totale indipendenza.
Se vuoi che pubblichi sul canale altri tutorial su Django per esplorare insieme le tante altre funzionalità offerte da questo popolarissimo framework fammelo sapere lasciandomi un mi piace e scrivendomi un graditissimo commento. E non perderti i prossimi video di questa serie, che tratteranno la realizzazione di un database col favoloso framework MySQL. Inoltre, se te le sei perse, dai uno sguardo alle puntate precedenti, per diventare un mago del frontend, apprendendo i framework Bootstrap e React. Iscriviti al canale attivando anche la campanella per non perderti i prossimi video.
Bene ragazzi miei, il tutorial di oggi è fina finalmente terminato. Vi ringrazio di cuore per essere arrivati fino a qui e spero vi siate davvero divertiti e abbiate appreso tante nozioni utili. Sentitevi liberi di riconsultare il video ogni volta che desiderate qualche rapida delucidazione su Django. Ho elencato giù in descrizione tutti i capitoli per facilitarvene la fruizione. Se volete potete dare uno sguardo al mio tutorial Python per approfondire la conoscenza di questo importantissimo linguaggio.
Commentate, mettete like, condividete e ci vediamo al prossimo video! Come sempre, un grazie sincero ragazzi, statemi bene e buona programmazione!