Crea sito

Tutorial – Un Blog in php: Parte 6

Eccoci quà, sesta parte del tutorial su come costruire un blog in php, usando php-easyMVC, oggi ci occupiamo dei commenti ai vari post,in realtà dovremmo avere già un po di dimestichezza con il framework, per cui non dovrebbe essere difficile! Avevamo però lasciato in sospeso lo styling grafico della pagina che visualizza il singolo post, ecco direi di non perderci troppo tempo, vi propongo la mia soluzione, ma sta a voi creare lo stile che più vi aggrada, per cui non prendete quello che dico per oro colato, e usate la vostra fantasia!

In primis apriamo la nostra vista: views/posts.php e organizziamo il nostro codice inserendolo all’interno di alcuni div in modo che il codice della vista appaia come segue:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="styles/main.css" type="text/css" />
<title>myBlog - Post Viewer</title>
</head>
<body>
<div class="post_container">
<div class="post_header">
<h1 class="title"><?php print($post["title"]); ?></h1>
<h5 class="info">(Scritto da: <span class="main_data"><?php print($post["author"]); ?></span>, il giorno: <span class="main_data"><?php print($post["post_date"]); ?>)</span> </h5>
</div>
<div class="post_content">
<p>
<?php print($post["content"]); ?>
</p>
</div>
</div>

</body>
</html>

come potete vedere dal codice, facciamo riferimento ad alcune classi css che non abbiamo ancora creato, per cui aggiorniamo il file styles/main.css aggiungendo in fondo le seguenti classi

/* stile per la pagina dei post */
.post_container{
font-family: Helvetica, Arial, san-serif;
margin-top:20px;
padding: 10px;
-webkit-box-shadow: 10px 10px 50px 2px #CCC;
box-shadow: 10px 10px 50px 2px #CCC;
}
.post_header .title{
color:#0A0A0A0;
display:block;
float:left;
}
.post_header .info{
color:#A0A0A0;
padding-top:10px;
display:block;
float:right;
}
.post_header .info .main_data{
color:#049CDB;
}
.post_content{
border-top:1px solid #CCC;
margin-top:50px;
padding-top:10px;
margin-bottom:10px;
}

a questo punto la nostra pagina dovrebbe apparire così:

Post StyledOra possiamo proseguire e aggiungere la parte dei commenti, questa volta partiamo proprio dalla vista, dobbiamo sostanzialmente predisporre due nuovi div, il primo ospiterà l’elenco dei commenti già scritti, il secondo ospiterà il form che permetterà al visitatore di lasciare un commento, vi ricordo che il blog che stiamo costruendo in questo tutorial, per semplicità, non contiene nessun sistema di sicurezza, per tanto non predisporremo nessun sistema anti-spam e qualunque utente in grado di compilare un form, potrà lasciare un commento! Starà poi a voi, una volta presa dimestichezza col framework, migliorare ciò che avremo prodotto assieme, integrando tutte le funzionalità che desiderate! Ma bando alle ciance, continuiamo a editare il file views/posts.php e appena dopo la chiusura dell’ultimo div inseriamo il seguente codice:

<div class="comments_maincontainer">
<div class="comments_form_container">
<form action="#" method="POST">
<label for="username">Il tuo Nome: </label><input type="text" class="textbox" name="username"></input>
<label for="content">Commento:</label><textarea name="content"></textarea>
<br/><br/>
<input type="submit" class="submit" value="Lascia Commento"></input>
</form>
</div>

<div class="comments_container">
<ul>
<li class="comment"><span>il 09/08/2013 - Pippo ha scritto: </span>Commento Fuffa 1</li>
<li class="comment"><span>il 07/08/2013 - Pluto ha scritto: </span>Commento Fuffa 2</li>
<li class="comment"><span>il 05/08/2013 - Topolino ha scritto: </span>Commento Fuffa 3</li>
</ul>
</div>
</div>

Come potete vedere si tratta di puro codice html, abbiamo creato due div il primo ospita un form che utilizzeremo per inviare i dati via POST al controller che si occuperà di contattare il modello ed inserire i dati nel database, il secondo ospita un elenco di commenti, per mostrarvi qualcosa, ho inserito manualmente qualche commento “fuffa”… giusto per vedere la resa grafica dell’impaginazione, in realtà alla fine di questo tutorial dovremmo recuperare i commenti dal database,

per comodità questa volta, vi scrivo subito cosa aggiungere al vostro file css, in modo da completare la parte grafica della vista, come al solito aprite il file styles/main.css e in fondo aggiungete le seguenti classi:

/* stile per i commenti nella pagina dei post */
.comments_maincontainer{
font-family: Helvetica, Arial, san-serif;
margin-top:60px;
}
.comments_form_container{
-webkit-box-shadow: 10px 10px 50px 2px #CCC;
box-shadow: 10px 10px 50px 2px #CCC;
}
.comments_form_container form{
margin: 0 auto;
padding:10px;
width:75%;
}
.comments_form_container form label{
margin-top:10px;
margin-bottom:10px;
display:block;
width:100%;
color:#049CDB;
text-decoration:underline;
}
.comments_form_container form input.textbox{
width:99%;
padding-left:5px;
padding-right:5px;
color:#A0A0A0;
font-size:20px;
height:30px;
border:1px solid #CCC;
}
.comments_form_container form input.submit{
width:100%;
height:40px;
}
.comments_form_container form textarea{
width:99%;
max-width:100%;
color:#A0A0A0;
height:75px;
max-height:150px;
border:1px solid #CCC;
padding-left:5px;
padding-right:5px;
}
.comments_container{
font-family: Helvetica, Arial, san-serif;
margin-top:60px;
-webkit-box-shadow: 10px 10px 50px 2px #CCC;
box-shadow: 10px 10px 50px 2px #CCC;
}
.comments_container ul{
margin:0 auto;
width:80%;
list-style:none;
padding:0px;
}
.comments_container ul li{
padding:10px;
border-bottom:1px solid #CCC;
}
.comments_container ul li span{
color:#049CDB;
display:block;
width:100%;
margin-bottom:10px;
}

Ok a questo punto la pagina dovrebbe apparire così:

Layout Commenti

Ora non ci resta che fare funzionare il tutto! Iniziamo dal form, modifichiamo la action del form in modo che richiami un metodo specifico del post_controller, come si fa? semplicemente settiamolo con il seguente URL

<?php print("<form action=\"index.php?rt=post/add_comment&post_id=".$post["post_id"]."\" method=\"POST\">"); ?>

stiamo sostanzialmente chiedendo al router di indirizzarci al postController e richiamare la action “add_comment”, bene, creiamo la action che abbiamo chiamato, apriamo il file: controller/postController e sotto il metodo index creiamo una nuova funzione, che chiamiamo add_comment, dobbiamo scrivere il tutto in una print php perchè è necessario portarsi dietro il “post_id” sia per l’inserimento nel database, che per ricaricare la pagina.

sempre per semplicità supponiamo che l’utente riempia correttamente tutti i campi del form, in teoria bisognerebbe controllare la correttezza dell’input, usando tecniche di “form validation”… questo però è preferibile farlo, ove possibile, “client side”, magari in javascript, sia per questioni prestazionali che di overhead sul server… come al solito per saperne di più vi basta fare una ricerca su google, sono argomenti molto importanti, ma che esulano dallo scopo del tutorial…  andiamo avanti, inseriamo nel controller il seguente codice:

/* Richiedo al modello l'inserimento di un nuovo commento e richiamo l'index */
public function add_comment(){
/* Se c'è un problema di input, semplicemente richiamiamo l'index, e non facciamo nulla di grave sul database */
if(!isset($_POST['username']) || $_POST['username'] == "" || !isset($_POST['content']) || $_POST['content'] == "" ){
$this->index();
}
/* Creo un istanza del modello blog, per poter utilizzare i suoi metodi */
$blog = new Blog($this->registry->db);
/* Chiamiamo il metodo save comments del nostro modello, passando i dati recuperati dal form e l'id del post corrente */
$blog->save_comment($_POST, $_GET["post_id"]);

/* Richiamiamo l'index per visualizzare la pagina */
$this->index();
}

Sostanzialmente nel metodo stiamo verificando la correttezza dell’input, se non è corretto ritorniamo all’index senza fare nulla, altrimenti creiamo un’istanza del modello del blog e chiamiamo il metodo save_comment che avevamo predisposto nelle prime parti del tutorial e che adesso andremo a implementare.

A inserimento avvenuto, richiamiamo l’index per prepararci alla visualizzazione della pagina.

Passiamo quindi al nostro modello… apriamo il file models/blog.class.php e implementiamo save_comment come segue:

/* Salva un nuovo commento nel database, utilizzando i dati provenienti da un form, e l'id del post corrente */
public function save_comment($form_post_data, $post_id){
$this->dbms->connect();
$query = "INSERT INTO comments(comment,user,comment_date,post) VALUES (\"".$form_post_data['content']."\", \"".$form_post_data['username']."\", \"".date("Y/m/d")."\",".$post_id.");";
$this->dbms->prepare($query);
$this->dbms->query();
$this->dbms->disconnect();
}

il codice si commenta da solo, come al solito utilizziamo la variabile $this->dbms per connetterci al database preparare la query ed eseguirla con query()

Ora ci rimangono solo due cose da fare, inserire nel metodo index del controller una chiamata al metodo get_comments_for() del modello per recuperare l’elenco dei commenti associati al post che stiamo visualizzando e modificare la vista per stampare i commenti recuperati dal database invece che i commenti fuffa che abbiamo messo all’inizio del tutorial.

Per cui apriamo nuovamente il nostro controller/postController.php e posizioniamoci all’interno del metodo index e sotto alla chiamata:

$post_data = $blog->get_post_by_id($post_id);

scriviamo il seguente codice:

$comments_list = $blog->get_comments_for($post_id);

Ovvero creiamo una variabile $comments_list in cui salvare i valori ritornati dal modello (la lista dei commenti) e sotto:

$this->registry->template->post = $post_data;

l’assegnamento:

$this->registry->template->comments = $comments_list;

per rendere disponibile nella vista l’elenco dei commenti.

A questo punto torniamo nel nostro modello: models/blog.class.php e implementiamo il metodo get_comments_for() che sostanzialmente prepara l’elenco dei commenti da mostrare all’utente, ecco il codice:

public function get_comments_for($post_id){
/* Questo sarà l'elenco dei commenti da restituire */
$comments = array();
/* Ci colleghiamo al database e effettuiamo la query */
$this->dbms->connect();
/* Notare che la query effettua un order by su comment_date, in questo modo i commenti vengono già ordinati per data di pubblicazione *
* senza dover fare nulla in php                                                      */
$query = "SELECT * FROM comments WHERE post = ".$post_id." ORDER BY comment_date DESC;";
$this->dbms->prepare($query);
if($this->dbms->query()){
$numrows = $this->dbms->numrows();
/* Creo l'elenco di commenti da restituire */
for ($i = 0; $i < $numrows; $i++){
$comment = $this->dbms->fetch("array");
array_push($comments, $comment);
}
}
$this->dbms->disconnect();
return $comments;
}

Come quando abbiamo creato la lista dei post presenti nel blog nella homepage, anche in questo caso ritorneremo un array di tuple estratte dal database…

A questo punto abbiamo tutto ciò che ci serve, riusciamo a inserire post nel database, e il nostro metodo index nel postController riesce a recuperarli, non ci resta che modificare la nostra vista, per visualizzare quanto recuperato dal database… apriamo il file views/posts.php e modifchiamo il contenuto del div con classe “comments_container” embeddando un po’ di php come segue:

<div class="comments_container">
<ul>
<?php
for($i = 0; $i < count($comments); $i++){
$comment = $comments[$i];
print("<li class=\"comment\">");
print("<span>il ".$comment['comment_date']." - ".$comment['user']." - ha scritto:</span>");
print($comment['comment']);
print("</li>");

}
?>
</ul>
</div>

Bene provate a fare qualche prova usate il form per inserire qualche commento, questo dovrebbe essere il risultato finale:

Risultato FinaleCome potete vedere c’è un problema con l’ordinamento dei post, ciò è dovuto alla precisione delle date che stiamo salvando sul database, abbiamo predisposto il nostro blog per salvare solo giorno mese e anno delle date, perciò due commenti postati lo stesso giorno sono considerati equivalenti dalla ORDER BY… una soluzione potrebbe essere quella di cambiare il tipo del campo comment_date nella tabella comments in qualcosa di più preciso, magari un TIMESTAMP, e poi convertire in php il timestamp in una data leggibile dall’utente… è un lavoro che lascio a voi, se avete voglia di farlo, ovviamente se avete problemi chiedete pure!

La prossima volta implementeremo l’ultima grossa parte del nostro blog, ovvero l’inserimento di un nuovo post… si tratterà di predisporre una nuova pagina con un form da compilare per l’inserimento di un nuovo post, così come abbiamo fatto per i commenti…

Come al solito per commenti, domande o suggerimenti non esitate a scrivermi qua sotto! A presto!

<- Parte 5 – Visualizzare il Post Parte 7 – Creare Nuovi Post ->

8 Responses to Tutorial – Un Blog in php: Parte 6

  1. taddeus settembre 18, 2013 at 7:18 pm #

    ciao jacopo mi chiedevo questo: siccome sto usando il tuo framework se fosse possibile passare una variabile via indirizzo quando passo da pagina all’altra: mi spiego: se avessi questo codice

    Vai

    e volessi passare un id come dovrei fare?

    se non ci fosse il framework farei:

    Vai

    ciao e grazie in anticipo

    • Jacopo settembre 18, 2013 at 7:56 pm #

      Ciao, certo lo puoi fare senza problemi, dopo l’action metti una &nomevariabile=contenuto in questo modo:
      index.php?rt=controllerName/actionName&nomevariabile=contenuto …

      la variabile a questo punto sarà accessibile da $_GET[‘nomevariabile’]; tutto qua…

      ovviamente ne puoi concatenare anche più di una con il carattere &

  2. taddeus settembre 18, 2013 at 8:12 pm #

    ok perfetto, grazie mille

  3. giovanni ottobre 24, 2013 at 3:11 am #

    Veramente ben fatto!
    ci sarà mai un seguito?

  4. Giorgio novembre 12, 2013 at 3:03 pm #

    Ciao Jacopo. Di nuovo congratulazioni per la chiarezza. Volevo segnalarti un warning che appare all’inserimento del commento:

    Warning: date(): It is not safe to rely on the system’s timezone settings. You are *required* to use the date.timezone setting or the date_default_timezone_set() function. In case you used any of those methods and you are still getting this warning, you most likely misspelled the timezone identifier. We selected ‘Europe/Paris’ for ‘1.0/no DST’ instead in C:\Programmi\Apache Software Foundation\Apache2.2\htdocs\myblog\models\blog.class.php on line 113

    Non so se sia il modo migliore, ma io ho risolto aggiungendo all’inizio del metodo save_comment l’istruzione: date_default_timezone_set(‘Europe/Rome’);

    A presto, ciao!

    • Jacopo novembre 12, 2013 at 11:15 pm #

      Hai fatto benissimo!
      In realtà non si tratta di un vero e proprio problema del codice, ma un problema di setup di apache e php.

      Le soluzioni a questo problema sono 2,

      la prima è quella che hai scelto tu, quando usi date() in php setti prima la timezone con la funzione che hai usato tu: date_default_timezone_set(‘timezone’);
      la seconda invece è settare il parametro date.timezone nel tuo file php.ini, e riavviare apache. In questo modo qualunque script php eseguito sul tuo webserver
      che utilizza la funzione date() non ti genererà più quell’errore

  5. Kampa gennaio 21, 2014 at 7:30 pm #

    Ciao Jacopo,
    innanzi tutto da parte mia e nel mio piccolo il tuo framework mi sembra un gran gran bel lavoro, personalmente ti ringrazio, mi hai tolto tutti i vari problemi nell’utilizzo del MVC per progetti più piccoli, per i quali non ha senso l utilizzo di Yii e affini.
    tra l’altro è un framework veloce, semplice ed efficace!!!

    Grazie mille.

    Sto proprio lavorando ad un blog ed ho utilizzato il tuo MVC a proposito, appena finito posto l’url (così mi date dei consigli 🙂 e magari fa piacere sapere i lavori che sono stati sviluppati con i propri metodi/software ). Tra l’altro sto ricostruendo anche il cms che è sotto il blog con il tuo MVC….

Lascia un commento

Powered by WordPress. Designed by WooThemes