Dynamic PDF creation with PHP – Very Easy

November 22, 2007

FPDF is a PHP class which allows to create PDF files with PHP. The advantage is that PDFlib requires a fee for a commercial usage. F from FPDF stands for Free: So yu can use this class to generate PDFs for free and modify source code for your needs.

You must use this class if you want create PDF content directly from PHP to implement for example download of your site content in PDF dinamically. You can download it and see how it works in the sample code below.

(more…)

PHP – Simple authentication script with PHP_AUTH_USER and PHP_AUTH_PW

November 18, 2007

In this howto, we can create a little PHP authentication system with only few rows of PHP code. We can use header() function to submit the “Authentication Required” Message to the client browser, so on client browser we can see a dialog popup that require Username and Password. When we fill the fields, we can receive variables through arrays: “$_SERVER: PHP_AUTH_USER” and “$_SERVER: PHP_AUTH_PW”. We can use this simple authentication system only if PHP runtime is installed as Apache module.

Now we can see how it works through the source code:

(more…)

Auto Ajax – Update your old PHP pages in Ajax including a simple class in your PHP Code

November 9, 2007

What is Auto Ajax?

Auto Ajax is a PHP Class written by Cesar D. Rodas. Surely you had seen many Ajax website that work without browser refresh. If you want implement this function in your php projects, this PHP Class is perfect for you. In fact I’ve test personally this class updating only parts of php code.

(more…)

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.