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.

Un po' di css

Ora che abbiamo un po' di contenuto nella nostra home page, iniziamo a stilizzare un po' il tutto e rendere le pagine un po' più carine. Abbiamo estratto dei dati dal database e li abbiamo inseriti direttamente nel main. Creiamo la struttura per la stampa dei dati, spostiamo il tag div dentro il ciclo foreach e damogli una classe. Selezioniamo il tutto e tagliamo. Creiamo poi un nuovo file dentro la cartella layouts e lo chiamiamo con lo stesso nome della classe css con cui abbiamo ettichettato il div, main_home_posts.html.php, e incolliamo la struttura. Questo file verrà richiamato dentro il foreach della home con un include. Utilizziamo un include e non include_once perché a ci serve che venga incluso ogni qualvolta inseriamo un nuovo post.

Ora abbiamo un controllo più semplice riguardo i vari elementi. Queste è una buona pratica, tenere staccati i vari pezzi e collegarli soltanto tramite riferimenti, come appunto gli include. L'importante che ogni volta gli elementi siano collegati nel giusto modo e che le variabili, se le hanno, siano giuste, come per esempio le variabili del ciclo foreach. Adesso possiamo iniziare a stilizzare un po' gli elementi. Apriamo il file css e creiamo la classe che abbiamo assegnato al div dei post e diamogli un po' di personalità. Cerco sempre di dare una solo classe all'elemento genitore e richiamare i figli in base ai loro tag, così da non rischiare di confondermi troppo. Il menù di navigazione per ora lo lasciamo dove è, lo sistemeremo per bene nelle prossime lezioni.

Torniamo nel database e inseriamo altri dati nella tabella dei post così da avere più contenuti. Creiamone altri tre, così da avere in totale 4 post. Cambiamo titoli, testi e nomi, lasciando sempre la stessa data, visto che con la funzione CURRENT_DATE verrà imposta in automatico. Fatto ciò aprimo nel nostro browser la home page e vedremo che tutti e quattro i div vengono stampati uno sotto l'altro, con gli stessi stili, ordinati secondo l'indice di chiave primaria.

La dinamicità è una caratteristica molto importante riguardo la programmazione, essa sia sul base web, applicattivi desktop o sviluppo videogiochi. Ci permette di poter utilizzare gli stessi elementi, le stesse funzionalità e creare, dinamicamente appunto, dei contenuti senza dover per forza riutilizzare più di una volta le stesse strutture. Bene, il sito sta iniziando a riempirsi un po' e prendere forma. Dovremmo però iniziare ad interrogare il database direttamente dalle pagine, magari creandone una apposita con un form e delle funzionalità specifiche... ma prima sistemiamo un po' il resto. Prossime lezioni creeremo un header con logo e menù che, come per il footer, sarà visibile in ogni pagina, così da permetterci di riconoscere bene il nostro sito e naviagare tra le sue pagine senza problemi. Inizieremo ad utilizzare anche un po' di Javascript per la manipolazione delle classi e conoscere i suoi selettori. Andando sempre con calma, passo dopo passo iniziamo a capire bene come utilizzare e strutturare i vari linguaggi.