gallo davide web developer

Benvenuto in questo percorso di programmazione e sviluppo web, ti accompagnerò lungo un percorso in cui svilupperemo un piccolo social di condivisione di post. Scriveremo il codice man mano che andremo avanti, passo passo, senza fretta. Utilizzeremo soltanto linguaggi puri di base, senza framework. Spero possa esserti di aiuto e ispirarti.

Menù e tabella utenti

Ora che iniziamo a capire come usufruire di Javascript e delle sue potenzialità, sistemiamo il nostro menù. Creeremo un menù a scomparsa che appare dall'alto. Partiamo stitemando un po' gli stili nel foglio CSS creando alcune classi in più che utilizzeremo per scambiarle tra di loro. Modifichiamo la funzione di javascript in modo che utilizzi la funzione toggle. Questa funzione ci permette di interaggire tra due classi differenti scambiandole l'una con l'altra. Stessa cosa faremo con l'immagine di sfondo del pulsante del menù. Creiamo la cartella icons dentro la cartella images, e al suo interno salviamo due immagini png, una per il menù chiuso e una per il menù aperto. Così facendo, al momento del click, l'immagine cambierà.

Abbiamo un menù a scomparsa con una piccola animazione. Si possono creare differenti animazioni, menù che appaiono da sinistra o da destra, che si ingrandiscono partendo dal centro della pagina, che ricoprono tutta la pagina. Dovete soltanto giocare con le due classi css e vedere un po' i risultati. Ma voglio tenere tutto il più semplice possibile così da farvi capire meglio il funzionamento. Quindi, abbiamo due pagine, la home page in cui ci sono tutti i post che abbiamo scritto e la pagina about in cui ci saranno differenti dati, magari quelli riguardanti il sito in sè... magari riguardanti il nostro account. Lasciamo il tutto in sospeso per ora. Creiamo ora una cartella che chiameremo account al cui interno il solito file index.php, come abbiamo fatto per le altre pagine, includiamo il file account.html.php che salveremo sempre in layouts in cui creeremo un form per la creazione del nostro profilo. Limitiamoci ad inserire un nome, cognome, un indirizzo e-mail e una password. Diamogli un po' di stile con qualche classe css. Io preferisco creare una sola classe per l'elemento genitore così da poter tenere conto degli elementi figli, evitando così di scrivere troppe classi e magari rischiare di confondermi. Lasciamo il tutto un po' grezzo, ci serve soltanto per capire il funzionamento del salvataggio dei dati nel database. Naturalmente il tasto Invia non farà niente perché ancora non abbiamo scritto le query per la registrazione dei dati. Aggiungiamo pure il link alla barra di navigazione, allo stesso modo con cui abbiamo scritto le altre.

Il nostro scopo ora è di scrivere e salvare dinamicamente i post, salvarli nel database e visualizzarli in home page. Ma andiamo con ordine. Per poter condividere i nostri post, i nostri pensieri, o quello che vogliamo, abbiamo bisogno di un nostro account. Abbiamo bisogno quindi di una tabella in cui salvare i vari utenti. Apriamo il phpMyAdmin e creaiamo una tabella apposita. Avremmo come sempre bisogno di un id che si autoincrementa, così da poter gestire l'aumento e il controllo degli account, campi per il nome, cognome, un indirizzo email, una password. Questi passaggi saranno un po' lunghi, faremo prima alcune funzionalità semplici, e nelle prossime pagine implementeremo delle classi e dei namespace. Per ora concentriamoci alla creazione della tabella.

Bene, ora siamo pronti per la registrazione degli utenti. Nella prossima lezione creeremo la nostra prima query, salveremo i nostri primi dati nella tabella sul database da noi creato in precedenza, sistemeremo qualche stile e inizieremo a creare dei nostri post da condividere nella home page del sito.