Come creare dei Box Dinamici sul nostro sito

Supponiamo di avere un sito web statico con un layout a tre colonne. Immaginiamo di voler creare dei Box laterali in maniera dinamica: di cosa abbiamo bisogno?

Prima di cominciare vediamo i file che useremo per l'applicazione:

table.sql
- Contiene istruzioni SQL per la creazione della tabella nel db

form_add_boxes.php
- Il modulo da compilare per creare il Box

add_boxes.php
- Lo script php che si occupa di inserire i dati nel db

index.php
- La pagina index del nostro sito che prendera i box dal db per poi visualizzarli

Cominciamo creando la tabella nel db
CREATE TABLE boxes (
  idboxes mediumint(8) NOT NULL auto_increment,
  title varchar(50) NOT NULL default '',
  content text NOT NULL,
  position enum('L','R') NOT NULL default 'L',
  PRIMARY KEY  (idboxes)
) TYPE=MyISAM;

Notiamo il campo position (gli altri sono abbastanza chiari) che è di tipo enum, con 2 opzioni ("L" ed "R"). Questo campo ci serivirà per capire dove visualizzare il box, se nella colonna Left o nella colonna Right

Passiamo quindi alla creazione del modulo per l'inserimento dei dati:

<form action="add_box.php" method="post">
  <fieldset>
  <legend>Inserimento nuovo Box</legend>
  <br />
  Titolo:<br />
  <input name="title" type="text" size="50" maxlength="50" />
  <br />
  Testo:<br />
  <textarea name="content" cols="50" rows="6"></textarea>
  <br />
  Posizone: Sinistra
  <input name="position" type="radio" value="L" checked="checked" />
  Destra
  <input name="position" type="radio" value="R" />
  <br />
  <br />
  <input type="submit" name="Submit" value="Invia" />
  </fieldset>
</form>

L'action della form è impostata su add_box.php, che si occuperà dell'inserimento nel db. Per il campo position ho usato 2 imput di tipo radio, ma poteva andar bene anche una select.

Nel file form_add_boxes.php trovate la pagina completa in XHTML della form.

Ora vediamo parte del codice del file add_box.php:

//
// ... Connessione al db e selezionione del databse
//
if (trim($_POST['title'])!='' && trim($_POST['content']!=''))
{
$sql = "INSERT INTO boxes (title, content, position) "
  ."VALUES('". $_POST['title'] ."', '". $_POST['content'] ."', "
  ."'". $_POST['position'] ."')";
$res = mysql_query($sql);
if ($res)
{
  echo 'Inserimento riuscito';
}
else
{
  echo 'Inserimento fallito';
}
}


Siamo arrivati al file più importante di questo articolo: index.php.

Anche qui riporterò solo una parte del codice (se scaricate i file troverete il sorgente completo).

<?php
function write_boxes($side)
{
$sql = "SELECT title, content FROM boxes WHERE position = '". $side ."' ";
$result = mysql_query($sql);
while (list($title, $content) = mysql_fetch_row($result))
{
  echo '<div class="box"><b>'. $title .'</b><br />'
   . $content 
   .'</div><br />';
}
}
?>

Visto che dobbiamo scrivere i box nella colonna di sinistra e anche in quella di destra, ho preferito creare una funzione da richiamare in entrambi i casi. La funzione richiede il valore $side, che sarà L o R, e quindi effettua la query sul database per poi visualizzare i box.

<div id="container">
<div id="sidebar-l">
<?php
  write_boxes('L');
?>
</div>
<div id="sidebar-r">
<?php
  write_boxes('R');
?>
</div>
<div id="content"><h2>Dynamic Boxes</h2></div>
</div>

Vi consiglio di scaricare i file e di studiare attentamente il file index.php, perchè (oltre ad avere la funzione php) è stato volutamente strutturato in XHTML  con i div per la creazione delle colonne. Nel file ci sono anche le classi CSS per il posizionamento dei div.

Tutti il files.