Aggiungere un Editor WYSIWYG (visuale) nel proprio sito

July 30, 2007

wysiwyg2.gif

Trasforma il tuo sito in PHP o quello dei tuoi clienti in un CMS! La possibilità di editare il contenuto dei tuoi siti in modo visuale è più semplice di quanto pensi, e questo tutorial ti guiderà verso la realizzazione di questo sistema in tre semplici passaggi. Mai più aggiornamenti dei contenuti editando l’HTML e caricando i files tramite FTP. Potrai editare le tue pagine direttamente tramite browser da qualunque posto ti trovi. Una dimostrazione online è reperibile tramite QUESTO LINK.

Questo tutorial riassume alcuni aspetti fondamentali su come separare il design del sito dal contenuto e aggiungendo un editor che consentirà al proprietario del sito, l’editing dei contenuti da qualunque punto d’accesso. Questo tutorial è redatto per l’utilizzo del PHP, ma le stesse tecniche possono essere tradotte con linguaggi tipo ASP, Perl-CGI e altri linguaggi di programmazione per il web.

Questo tutorial presuppone che si abbiano le seguenti conoscenze:

  • HTML
  • Programmazione base in PHP
  • Invio Forms tramite POST
  • Query di Stringhe ($_GET)

Questo tutorial si dividerà in:

  • Separazione dell’header e del footer dalle proprie pagine
  • Creazione di un template per il contenuto della pagina
  • Aggiungere un editor WYSIWYG in JavaScript

Nel tutorial trattato utilizzeremo TinyMCE come editor JavaScript. Questa utility in JavaScript s’integra facilmente in una qualsiasi campo/oggetto HTML denominato “textarea”, consentendo all’utente un’editing del contenuto stile MS Word. Con una minima conoscenza di JavaScript è possibile configurare l’editor in base alle proprie esigenze, aggiungendo nuovi pulsanti e caratteristiche aggiuntive. Tra le caratteristiche già incluse nell’editor vediamo la possibilità di editare il conenuto a tutto schermo e la creazione di tabelle.

Parte 1 – Separazione dell’header e del footer dalle proprie pagine

Molti di voi avranno già praticato questa tecnica. La chiave di questa tecnica è la semplicità di gestione del sito creando files che contengano l’HTML per l’header (parte superiore del sito) e il footer (parte inferiore del sito) della pagina. L’header solitamente contiente il Banner/Logo, i Links di Navigazione e elementi come tabelle o tag DIV che impostino parte della tua pagina. Il footer invece, chiude tutti i TAG precedentemente aperti nell’header, quindi se ad esempio nell’header abbiamo inserito <table>, nel footer procederemo inserendo </table> e così via. Inoltre spesso il footer viene utilizzato per l’inserimento del copyright o le informazioni riguardante il creatore del sito. Se attualmente il vostro sito in PHP utilizza questa tecnica, è possibile saltare questa parte di tutorial.

Esempio di header:

header.html

===========
<html>
<head>
<!– Head stuff goes here. –>
</head>
<body>

<div style=”width: 800px”>

<!– Header Image –>
<img src=”header.jpg” /><br />

<!– Navigation –>
<p style=”text-align: center”>
<a href=”link1.php”>Link 1</a> |
<a href=”link2.php”>Link 2</a> |
<a href=”link3.php”>Link 3</a> |
<a href=”link4.php”>Link 4</a>
</p>

 

Notare come i tag DIV, BODY o HTML non sono stati chiusi. Questo verrà fatto nel footer.

Esempio di footer:

 

footer.html

===========
</div>
<p style=”text-align: center”>Site created by <a href”http://www.smokinglinux.com”>Smoking Linux</a></p>
</html>

Vi starete domandando: “Com’è possibile fare tutto ciò?”. Date uno sguardo allo script che segue:

 

index.php

===========
<?php
include(“header.html”);

// Il contenuto va qui.

include(“footer.html”);
?>

Se si decide di utilizzare questo codice per ogni pagina, vi accorgerete come sia più facile mantenere un sito web. Se infatti si decide di cambiare il design dell’intero sito, andrete a modificare esclusivamente il file header.html e non sarete costretti a modificare ogni singola pagina html del vostro sito web.

Parte 2 – Creazione di un template per il contenuto della pagina

A questo punto, molte pagine del vostro sito risulteranno identiche eccetto per il contenuto. Ci troviamo ad avere per ogni pagina in PHP del nostro sito, un “include” per il piazzamento dell’header, uno spazio dove inserire il contenuto e un “include” per il piazzamento del footer. Questo potrebbe andare bene se il contenuto del nostro sito sia non più di 10-20 pagine, ma se iniziassimo ad avere centinaia di pagine di contenuto? Il trucco sta nell’avere una sola pagina di contenuto e una molteplicità di files “txt”, uno per ogni pagina, dove inserire il contenuto e editarlo successivamente tramite l’editor visuale in JavaScript.

Esempio di File “txt” per il contenuto:

news.txt
===========
<h1 align=”center”>News</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>

 

Com’è possibile utilizzarlo nel nostro sito? Semplicemente attraverso una query di stringhe che chiedano al nostro script in PHP quale contenuto si vuole visualizzare. Per esempio: http://tuosito.com/?page=news. Pertanto osservate il nostro nuovo file index.php come dovrà apparire:

index.php
===========
<?php
include(‘header.html’);

// Set $page to “home.txt” if a parameter isn’t passed
if ($_GET[‘page’]) {
$page = $_GET[‘page’] . ‘.txt’;
} else {
$page = ‘home.txt’;
}

// Check to see if file exists and include it in.
if (file_exists(“pages/$page”)) {
include(“pages/$page”);

// If page doesn’t exist, give an error message.
} else {
echo(“<h1 align=\”center\”>Page cannot be found</h1>\n”);
}

include(‘footer.html’);
?>

 

Un’altra importante caratteristica da aggiungere dovrebbe essere la navigazione del contenuto nel caso in cui decideste di dividere il contenuto in più pagine, quindi aggiungendo il links “Previous” (precedente) e “Next”. Il prossimo blocco di testo potrebbe essere aggiunto dopo “include(“pages/$page”)’. Questo controllerà per un nome di file che termini con _page(number). Se ci sono altri nomi di files che terminano con _page(number-1) e/o _page(number+1), esso includerà i links: “Previous Page” (pagina precedente) e “Next Page” (pagina successiva) nella parte inferiore della pagina.

 

if (preg_match(“/^(.*_page)(\d+)/”, $page], $matches)) {
$prev_page = $matches[2] – 1;
$next_page = $matches[2] + 1;
echo(“<p style=\”text-align: center\”>”);
if (file_exists(“pages/” . $matches[1] . $prev_page . “.php”)) {
echo(“<a href=\”{$_SERVER[‘PHP_SELF’]}” .
“?page={$matches[1]}$prev_page\”>Previous Page</a>”);
$prev = 1;
}
if (file_exists(“pages/” . $matches[1] . $next_page . “.php”)) {
if ($prev) {
echo(“      “);
}
echo(“<a href=\”{$_SERVER[‘PHP_SELF’]}” .
“?page={$matches[1]}$next_page\”>Next Page</a>”);
}
echo(“</p>”);
}

Parte 3 – Aggiungere un editor WYSIWYG in JavaScript

Questa parte di tutorial riassume come inserire l’editor JavaScript per l’editazione delle pagine. Ovviamente la parte di amministrazione e modifica delle pagine dovrebbe essere fuori dalla portata del visitatore e quindi dobbiamo creare un’area protetta tramite .htaccess per la directory che chiameremo “secure”. E’ possibile chiedere al provider per l’abilitazione di tale servizio. Se la creazione dell’area sicura verrà effettuata correttamente vi troverete a dover digitare nome utente e password in un box di autenticazione quando tenterete l’accesso all’indirizzo: http://tuosito.com/secure/?page=nomepagina.

Siccome lo script proposto risulterà un tantino più esteso del precente, lo tratteremo in sezioni.

secure/index.php
============
<?php
include(“../header.html”);

// Get the page name from the query string
$page = $_GET[‘page’] . ‘.txt’;

if (!$_GET[‘page’]) {
echo(“<h1>Page name not specified</h1>\n”);
include(“../footer.html”);
exit;
}

Questo è molto simile al precedente script. Accertiamoci però che in questo caso, ci troviamo nella directory “secure”. Procediamo quindi con la stesura del codice:

if ($_POST[‘page’]) {
$handle = fopen(“../pages/$page”, ‘a’);
fwrite( $handle, $_POST[‘page’]);
fclose($handle);
echo($_POST[‘page’]);
include(“../footer.html”);
exit;
}

In questo modo il nostro editor ci consente l’editing, e lo stesso script processerà il risultato. Questo passaggio controllerà se noi abbiamo inserito il contenuto. Se abbiamo inserito contenuti nella nostra pagine, esso apre il file indicato nel nome della query di stringhe, lo scrive, chiude il file, mostra il nuovo contenuto del file, carica il footer ed esce.

 

if (file_exists(“../pages/$page”)) {
$FILE = fopen(“../pages/$page”, “rt”);
while (!feof($FILE)) {
$text .= fgets($FILE);
}
fclose($FILE);
} else {
echo(“<h1>New Page: $page</h1>\n”);
$text = “<p></p>”;
}

Questo invece è un po’ più complicato. Se abbiamo specificato una pagina che esiste, legge il file e lo carica nella variabile $text. Se la pagina non esiste, presuppone che ne vogliamo creare una nuova e inserisce all’inizio della pagina un paragrafo vuoto tramite i tag (<p></p>). La prossima parte di codice caricherà il nostro editor JavaScript TinyMCE. E’ necessario inoltre prestare attenzione al percorso inserito che dovrà puntare a TinyMCE, quindi la directory dove avrete caricato i files di TinyMCE precedentemente scaricati.

 

echo <<< EOM
<script language=”javascript” type=”text/javascript” src=”/tinymce/jscripts/tiny_mce/tiny_mce.js”></script>
<script language=”javascript” type=”text/javascript”>
tinyMCE.init({
mode : “textareas”,
theme : “advanced”,
theme_advanced_toolbar_location : “top”,
theme_advanced_toolbar_align : “left”,
theme_advanced_path_location : “bottom”
});
</script>
EOM;

Solitamente inseriamo il nostro JavaScript all’interno dei tag <head> della nostra pagina. Ma <head> è caricato attraverso il file header.html e siccome non abbiamo intenzione di caricare il nostro codice in ogni pagina, ma esclusivamente quando amministriamo i contenuti, inseriremo lo script all’interno dei tag <body>. Nel sito web di TinyMCE, troverete tantissime risorse su come configurare e personalizzare il vostro editor. Lo scopo del nostro tutorial invece è quello di porre le basi per il corretto funzionamento dello stesso all’interno del codice PHP.

 

$this_page = $_SERVER[‘PHP_SELF’];
$query_string = $_SERVER[‘QUERY_STRING’];
echo(“<form method=\”post\” action=\”$this_page$query_string\”>\n”);
echo(“<textarea id=\”page\” name=\”page\” rows=25 cols=80>\n”);
echo(htmlspecialchars($text));
echo(“</textarea>\n”);
echo(“<input type=\”submit\” value=\”Save\”>\n”);
echo(“</form>\n”);

Questa parte di codice crea il form, la textarea e il bottone “Save” (salva). La funzione “htmlspecialchars($text)” richiama la variabile $text, e sostituisce tutti i caratteri speciali con i codici HTML per i caratteri speciali. Così il vostro file non presenterà errori quando visualizzato nella pagina. L’output di questa funzione verrà passato alla textarea. Quando il bottone “Save” verrà premuto, esso ricaricherà nuovamente la stessa pagina con la stessa query di stringhe, ma questa volta troverà del contenuto inviato. Questo è inviato alla seconda sezione di codice all’inizio di questa pagina dove verrà salvato il file.

include(“../footer.html”);
?>

Questà è la parte finale del nostro codice che chiuderà tutti i tag precedentemente aperti attraverso il caricamento del footer.

E’ possibile scaricare il file compresso contenente i files dell’intero tutorial da QUI.

Il presente tutorial è una traduzione offerta da smokinglinux.com, la fonte originale è reperibile QUI.

 

 

Skype viola la GPLv2

La General Public License esce ancora una volta vittoriosa da un tribunale. Questa volta è Skype ad aver violato la licenza ideata da Richard Stallman. A stabilire la violazione è stato il tribunale di Monaco su richiesta di Harald Welte di gpl-violations.org.Sul sito web del popolare software VoIP infatti verrebbe venduto il telefono SMCWSKP 100, il cui firmware è basato su Gnu/Linux, senza fornire i sorgenti nè citare la licenza GPLv2.
Maggiori dettagli sono disponibili nella traduzione dal tedesco dell’ifrOSS

[fonte]

Openmosix chiude i battenti

Openmosix, uno tra i più interessanti progetti per la realizzazione di un cluster di macchine Linux, dà il suo addio alla comunità.
E’ stato Moshe Bar, fondatore e project leader, a spiegare come nell’epoca dei sistemi multi-core sia diventato “inutile” continuare a sviluppare soluzioni di clustering single-system image (SSI) , tecnologia che unisce più macchine insieme che appaiono e lavorano come un unico sistema.Il progetto rimarrà per sempre su Sourceforge ma lo sviluppo terminerà a Marzo 2008 e anche il sito web chiuderà i battenti in quella data.

Per tutti gli utenti che da sempre hanno apprezzato questa ingegnosa patch al kernel linux non resta che sperare che il progetto venga alimentato da altri sviluppatori mentre per chi non lo ha mai provato non posso che consigliare una sbirciata alle numerose LiveCD che permettono la realizzazione di un cluster “al volo”.

[fonte]

Samba adotterà Gpl3 per le sue prossime versioni

Verrà aggiornato per permettere la compatibilità con le altre licenze e rendere più semplice la sua adozione a livello internazionale. Inoltre viene considerato aderire meglio ai bisogni del Free Software per il 21 Secolo. Tutte le versioni successive alla 3.2 adotteranno la nuova licenza.