Crea sito

Tutorial – Un Blog in php: Parte 4

Ciao a tutti, eccoci, dopo qualche mese di pausa, finalmente alla parte 4 del tutorial su come creare un blog in PHP utilizzando php-easyMVC framework, se non avete seguito la parte 3 del tutorial, in fondo a questo post troverete un link alla pagina per mettervi in pari, ma bando alle ciance, incominciamo!

Dove eravamo rimasti?

Alla fine dello scorso tutorial siamo riusciti a “collegare” il nostro modello al nostro controller e il controller alla vista, siamo dunque ora in grado di recuperare dati dal nostro database e, attraverso una serie di passaggi, di visualizzarli all’interno della nostra pagina web. Il problema con cui ci eravamo lasciati era appunto come “formattare” in una maniera più gradevole, da presentare al nostro visitatore, tutti i dati che ci arrivano dal modello, ed è il problema che cercheremo di risolvere in questo tutorial!

Includere o non includere il PHP nella vista?

Ok, a questo punto ci si pone un dilemma abbastanza critico, mi spiego, abbiamo utilizzato il pattern di programmazione MVC con lo scopo di separare il più possibile il codice scritto per generare ciò che è la pagina che visualizzerà l’utente, dalla struttura interna del sito, e dal modo in cui abbiamo recuperato i dati.

Ora noi ci troviamo una struttura dati, un array, all’interno della vista che dobbiamo trasformare in qualcosa di comprensibile all’utente, le soluzioni a questo punto sono due:

  1.  diciamo al controller di “pre-formattare” i dati ricevuti dal modello sottoforma, che ne so, di tabella, salvare il relativo codice html all’interno di una stringa che passeremo alla vista, che dovrà semplicemente fare una echo della stringa, per visualizzare la tabella.
  2. Oppure, passiamo l’intera struttura dati alla vista, come stiamo facendo ora per fare la print_r, ma invece di eseguire una semplice print, creiamo dei cicli in php all’interno della vista per formattare come più ci aggrada i dati nell’array.

La prima soluzione è interessante, perché chiunque conosca un minimo di html, senza sapere nulla di php, sarebbe in grado di visualizzare i dati con una semplice echo della variabile, nonostante ciò questa, a mio avviso, è la soluzione meno conveniente per i seguenti motivi:

  • sporchiamo la struttura dell’MVC, stiamo creando una tabella, ovvero una cosa da mostrare all’utente, dentro al controller
  • se decidessimo di modificare la vista in seguito per mostrare i contenuti in una nuova maniera, magari non in forma tabellare, ma di lista dovremmo andare a modificare non la vista, ma il controller, il che è poco logico, e poco intuitivo, e su grandi progetti si rischia di creare un bel minestrone!

La seconda soluzione, invece, costringe il designer, che si sta occupando di quella che volgarmente chiameremo “grafica del sito”, ad imparare ad usare un minimo il php (di certo male non gli fa), e a conoscere un minimo la struttura dati che il controller gli sta passando (basta darsi delle convenzioni da seguire), ma in questo modo il codice della vista si troverà nella vista!!! e visto che, nel nostro caso si tratta solo di un esempio, ma in progetti grandi è fondamentale mantenere la “separation of concerns”, per non perdersi nel proprio codice (per questo stiamo usando l’MVC), questa mi sembra la soluzione più adatta.

Inoltre ricordiamoci che PHP è nato come linguaggio da embeddare nell’html, per cui non stiamo facendo nulla di male!!!

Cominciamo…

Dal database abbiamo recuperato i metadati relativi ai post dell’utente, e all’interno della nostra vista (FILE: views/index.php), abbiamo un array, puntato da $posts, che punta a una serie di vettori che contengono tutti i metadati dei post, iniziamo rimuovendo la print_r dalla nostra vista, non ci serve più, impostiamo un ciclo sul vettore principale sostituendo il codice tra <?php e ?> come segue:

<?php
for($i = 0; $i < count($posts); $i++){
print_r($posts[$i]);
print("<br/><br/>");
}
?>

puntando il nostro browser verso il nostro blog, ora come potete vedere qua sotto non è cambiato molto, ma siamo riusciti a “dividere” i metadati dei singoli post su righe separate.

Righe SeparateOk siamo ancora abbastanza distanti dal risultato finale, quello che dobbiamo fare ora è estrapolare i dati dal vettore metadata di ogni singolo post, o in altri termini spulciare le tre righe che abbiamo tenuto, estrapolando i dati che ci servono e incastrandoli all’interno di appropriati tag html, ecco come fare:

<!-- Elenco dei post -->
<ul>
<?php
/* Per ogni post contenuto in $posts mostra: */
for($i = 0; $i < count($posts); $i++){
print("<li>");
/* il titolo */
print("<b>".$posts[$i]["title"]."</b>");
/* la descrizione */
print(" - \"".$posts[$i]["description"]."\"");
/* la data e l'autore */
print(" (scritto il: ".$posts[$i]["post_date"]." da: <i>".$posts[$i]["author"]."</i>)");
/* link per la lettura del post */
print(" - <a href=\"#\">Leggi...</a>");
print("</li>");
}
?>
</ul>

Ok vediamo cosa abbiamo combinato, prima di tutto vi faccio notare che abbiamo incluso l’intero codice php all’interno del tag html <ul></ul> questo perché abbiamo deciso di presentare l’elenco dei post sotto forma di lista, cosa abbiamo fatto dentro al ciclo? Abbiamo semplicemente riempito la lista riempiendo i vari tag <li></li> chiamando una serie di print con i dati che ci servivano, il risultato come potete vedere qua sotto, è decisamente migliore del precedente:

Lista senza stileCome potete notare, il link “Leggi” non funziona ancora, infatti quando lo abbiamo creato abbiamo impostato il campo href=#, questo campo lo modificheremo nella prossima parte del tutorial quando prepareremo una pagina per la visualizzazione completa del post.

Per ora limitiamoci a concludere la lezione modificando il foglio di stile incluso nel framework (FILE: styles/main.css) creando una classe da applicare al tag ul per migliorare l’aspetto del nostro elenco, aggiungiamo il seguente codice in fondo al file:

/* stile per l'elenco dei post */
ul.post_list{
list-style: none;
margin-top: 50px;
padding-left: 0px;
border-bottom: 1px solid #FFF;
/* CSS3 Only: IE 9+*/
-webkit-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 10px 10px 50px 2px #CCC;
box-shadow: 10px 10px 50px 2px #CCC;
}

ul.post_list li{
display: block;
height:50px;
border-bottom: 1px solid #CCC;
padding-top:25px;
padding-left:10px;
}

ul.post_list li:hover{
background-color: #EEE;
}

Si tratta di istruzioni css di base, che non sto a commentare nel dettaglio, non è nello scopo del tutorial, unica nota che vi faccio è per le istruzioni appena dopo al commento “CSS3 only” sono istruzioni comprensibili solo da browser compatibili con css3, se usate browser vecchiotti o non convenzionali, quelle istruzioni potrebbero non funzionare, considerate poi che questo foglio di stile è solo di esempio, siete liberi di modificare lo stile del vostro blog come più vi aggrada senza aver paura di modificare nulla di funzionale, il bello dei fogli di stile è proprio questo.

Dopo aver aggiunto la classe, dobbiamo tornare un attimo alla nostra vista e applicare la classe post_list appena creata al tag ul, il file views/index.php alla fine di tutto dovrebbe apparire come segue:

<!-- This is the default home page -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="styles/main.css" type="text/css" />
<title>myBlog</title>
</head>
<body>
<h1><?php echo $title; ?></h1>
<h2>il mio primo blog!</h2>
<!-- Elenco dei post -->
<ul class="post_list">
<?php
/* Per ogni post contenuto in $posts mostra: */
for($i = 0; $i < count($posts); $i++){
print("<li>");
/* il titolo */
print("<b>".$posts[$i]["title"]."</b>");
/* la descrizione */
print(" - \"".$posts[$i]["description"]."\"");
/* la data e l'autore */
print(" (scritto il: ".$posts[$i]["post_date"]." da: <i>".$posts[$i]["author"]."</i>)");
/* link per la lettura del post */
print(" - <a href=\"#\">Leggi...</a>");
print("</li>");
}
?>
</ul>
</body>
</html>

e il risultato finale dovrebbe essere qualcosa di simile a questo:

lista con stile

Direi che per oggi può bastare, la prossima volta, come vi dicevo prima, ci occuperemo di creare una pagina per mostrare nei dettagli il post e i suoi contenuti, questo ci porterà a creare un nuovo controller, una nuova vista e a scrivere un nuovo metodo nel nostro modello (la classe blog)….

Come al solito, per domande dubbi o suggerimenti, non esitate a commentare, alla prossima!!!

 <- Parte 3: Il Modello Parte5: Visualizzare il post –>

One Response to Tutorial – Un Blog in php: Parte 4

  1. Carlo Audino giugno 24, 2014 at 8:43 pm #

    Grazie Jacopo, la tua guida e’ chiarissima. Finalmente un po’ di luce nella creazione di MVC in PHP.

Lascia un commento

Powered by WordPress. Designed by WooThemes