Creare una piccola chat in PHP
Pubblicato da Golars su 19 Luglio 2008
Per seguire questa guida, sono richieste conoscenze di base sul php e sul mysql, conoscenze che per ovvi motivi di spazio, non potrò darvi in questo articolo, nel quale mi limiterò ad illustrarvi passo per passo come poter creare una piccola chat (senza grandi pretese) in PHP che poggia sul database di tipo mysql.
I requisiti iniziali (oltre alle vostre conoscenze) sono quelli di possedere uno spazio web che supporti il PHP e un database di tipo mysql. Se volete provare il tutto direttamente in rete, personalmente consiglio spazi web gratuiti come Altervista, netsons o helloweb, oppure come al solito consiglio di sviluppare il tutto in locale (se non sapete come installare un server in locale andate qui).
Finiti i preliminari, passiamo alla chat vera e propria. Dovendo operare su un database, avremo bisogno di una pagina di connessione al database stesso. In questa pagina metteremo i nostri requisiti per accedere al database e la connessione ad esso. Chiameremo la pagina connessione.php
//parametri per la connessione al database
$db_host = “localhost”; //solitamente è localhost, guardate comunque il vostro fornitore di spazio web
$db_user = “”; //username per l’accesso al database
$db_password = “”;//password per l’accesso al database
$db_nome = “”;//nome database
/* instaurazione della connessione al database*/
$db = mysql_connect($db_host, $db_user, $db_password);
/* in caso di errore nella connessione, stampa a video un messaggio di errore */
if($db == FALSE)
die(”Errore nella connessione. Verificare i parametri nel file config.inc.php”);
/* seleziona il database desiderato, in caso di errore stampa a video un messaggio di errore */
mysql_select_db($db_nome, $db) or die (”Errore nella selezione del database. Verificare i parametri nel file config.inc.php”);
?>
Creata questa pagina, avremo la connessione al database, fate molta attenzione ai dati che inserite, perchè se immettete dati errati, non avverrà la connessione e verrà stampato un messaggio di errore, che renderà inutilizzabile la vostra chat. Se avete dubbi su quali dati inserire, domandate al vostro gestore dello spazio web, che vi segnalerà i dati corretti che dovrete immettere. Per una miglior comprensione di ogni singola funzione PHP, vi rimando alla guida in linea al sito PHP.NET, in quanto sarebbe troppo lungo e noioso (sia per me che per voi) parlare di ogni singola funzione o riga di codice. Il codice stesso è stato commentato, per una miglior comprensione, fate quindi riferimento ai commenti nel codice stesso.
Quando si entra in chat ognuno ha il proprio nickname. Per permettere a ciascuno di scegliere il proprio nome virtuale, costruiremo la pagina prechat.html, nella quale sarà presente una form nel quale inserire il nickname desiderato. N.B. per non rendere il tutto ancora più complicato, diverse persone possono scegliere lo stesso nick, non viene fatto alcun tipo di controllo. Se lo si desidera fare, basta un piccolo accorgimento molto semplice, che spiegerò in una dei prossimi articoli.
<head>
<title>Prechat</title>
</head>
<body>
<!– Il form consente di mettere il nome desiderato per quando si è in chat e contine il tasto invia per passare alla pagina successiva –>
<form action=”chat.php” method=”post”>
Inserire un nome <input type=”text” name=”nome” /><br />
<input type=”submit” value=”Entra” /><br />
</form>
</body>
</html>
La terza pagina che andremo a creare si chiama chat.php, ed è una semplice pagina html formata da due iframe, uno superiore e uno inferiore. Questa è la pagina che ci consentirà di vedere la chat e di poter interagire con gli altri utenti. C’è però un problema, chiunque abbia studiato un pò di programmazione web, sa che i frame e gli iframe non sono proprio tra gli elementi più accettati dagli standard w3c. Per il momento non ci faremo problemi di standard o non standard, perchè per le conoscenze attuali, sono l’unica soluzione per creare una chat con il solo php, nei prossimi articoli, vedremo cos’è AJAX, e come creare una chat aggirando il problema dei frame. Oltre ad essere suddivisa in due iframe, la pagina deve fare anche la cattura del nome passato dalla pagina prechat.html.
session_start();
//catturiamo il nome inviato dal prechat.php, nel caso è uguale alla stringa nulla, stampiamo un messaggio di errore e terminiamo il flusso della pagina. In caso contrario salviamo il nome nella sessione
$nome = htmlspecialchars($_POST['nome']);
if($nome != “”){
$_SESSION['Nome'] = $nome;
}else{
echo(”Attenzione, dovete inserire un nome valido<br/>”);
echo(’<a href=”prechat.html”>Indietro</a>’);
exit();
}
?>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Chat</title>
</head>
<body>
<!– creazione dei due iframe, quello superiore (visualizza) che visualizza le scritte della chat, e quello inferiore (input) nel quale viene
visualizzata la pagina per l’input delle scritte –>
<div align=”center”><iframe name=”visualizza” width=”95%” height=”90%” frameborder=”1″ src=”chat_visualizza.php”></iframe></div>
<div align=”center”><iframe name=”input” align=”bottom” width=”85%” height=”50″ frameborder=”1″ src=”chat_input.php” scrolling=”no”></iframe></div>
</body>
</html>
La pagina non è niente di complicato, come noterete (anche dal commento) il primo iframe, quello superiore, ha il nome “visualizza”, questo perchè al suo interno, andrà inserita la pagina che ci permette di visualizzare le scritte (chat_visualizza.php), mentre nell’iframe inferiore, verrà visualizzato il form per l’inserimento dell’azione.
Finora abbiamo costruito il contorno della chat, e arrivato il momento di passare al cuore dello script. Se finora, le nozioni di php e myslq sono state quasi nulle, adesso si richiede almeno una conoscenza di base di entrambi i linguaggi. Dalle prossime pagine, incominceremo a dialogare con il database.
Partiamo quindi dalla pagina chat_input.php, cioè quella pagina che ci permette di dialogare con la chat, inviadole i nostri pensieri.
/* Inizializzazione della sessione e inclusione della pagina di accesso al database */
session_start();
include(connessione.php’);
/* Controlliamo che l’utente sia entrato correttamente, in caso contrario, stampiamo un messaggio di errore e lo blocchiamo */
if($_SESSION['Nome'] == “”){
echo(”Non sei autorizzato ad entrare!”);
exit();
}
?>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Input chat</title>
</head>
<!– L’evento onLoad mette il cursore del mouse in posizione di scrittura nella casella di scrittura una volta terminato il caricamento della pagina –>
<body onload=”document.inserimento.azione.focus()”>
<!– Le righe sottostanti creano la casella di testo e il bottone di invio. L’evento onSubmit ricarica la pagina ogni volta che viene cliccato il tasto invio –>
<form action=”chat_salva.php” target=”visualizza” name=”inserimento” method=”post” onsubmit=”javascript:location.reload();”>
<input name=”azione” size=”100″>
<input type=”submit” value=”Invia” name=”invia”>
</form>
<?php
/* chiusura del database */
mysql_close($db);
?>
</body>
</html>
Il funzionamento è semplice. Quando viene caricata la pagina, lo script php controlla che ci si sia loggati in precedenza dalla pagina prechat.php, cioè controlla che all’utente corrisponda un nickname, nel caso ciò non sia vero, stampa un messaggio di errore e termina il flusso della pagina. Nel caso invece che ci siamo loggati in maniera corretta, ci mostra il form, nel quale scriviamo il nostro messaggio e poi clicchiamo su Invia. Nel momento che clicchiamo su invia la pagina chat_input.php si ricarica, inviando il nostro messaggio al server chiamando la pagina chat_salva.php, che verrà caricata nell’iframe di nome “visualizza” (cioè quello superiore). Vediamo quindi ora come è fatta la pagina chat_salva.php
/* Inizializzazione della sessione e inclusione della pagina di accesso al database */
session_start();
include(connessione.php’);
/* Controlliamo che l’utente sia entrato correttamente, in caso contrario, stampiamo un messaggio di errore e lo blocchiamo */
if($_SESSION['Nome'] == “”){
echo(”Non sei autorizzato ad entrare!”);
exit();
}
/* Controlla che il parametro azione passato con il metodo POST dalla pagina chat_input.php esista (per vedere come funziona isSet() guardare la documentazione online) e che l’utente sia entrato in maniera corretta*/
if (isSet($_POST['azione']) && $_SESSION['Nome'] != “”)
{
/* nella variabile “nome” viene salvato il nickname dell’utente. La variabile “mss”, salva prima il parametro passato con il metodo POST dopo averlo elaborato con la funzione htmlspecialchars (guardare documentazione online). La variabile “attuale” salva la data e l’ora attuale.*/
$nome = $_SESSION['Nome'];
$attuale = time();
$mss = htmlspecialchars($_POST['azione']);
/* Inserimento all’interno del database dell’azione con relativi campi (Giocatore, Messaggio, Data)*/
$query =”INSERT INTO Chat SET Nome = ‘$nome’, Messaggio = ‘$mss’, Data = ‘$attuale’”;
mysql_query($query) or die(mysql_error());
}
/* chiusura del database */
mysql_close($db);
/*Reindirizzamento alla pagina chat_visualizza.php */
header(”Location: chat_visualizza.php”, true);
?>
Questa pagina funziona in modo molto semplice e lineare, prende l’azione passata tramite la pagina chat_input.php, il nickname dell’utente e l’orario attuale e lo salva all’interno del database. Fatto ciò senza stampare a video niente reindirizza in automatico alla pagina chat_visualizza.php che verrà visualizzata sempre nell’iframe di nome “visualizza”. Ci manca quindi una sola pagina, quella di nome chat_visualizza.php, che ci permetterà di vedere i messaggi nostri e degli altri utenti.
/* Inizializzazione della sessione e inclusione della pagina di accesso al database */
session_start();
include(connessione.php’);
/* Controlliamo che l’utente sia entrato correttamente, in caso contrario, stampiamo un messaggio di errore e lo blocchiamo */
if($_SESSION['Nome'] == “”){
echo(”Non sei autorizzato ad entrare!”);
exit();
}
?>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<!– consente il refresh della pagina ogni 20 secondi –>
<meta http-equiv=”refresh” content=”20,chat_visualizza.php”>
<title>Visualizzazione chat</title>
</head>
<body>
<?php
/* Salvataggio dell’ora attuale, per vedere come funziona la funzione time() vedere la documentazione online al sito www.php.net*/
$ora_attuale = time();
/* Estrazione di tutte le azioni che sono state mandate nell’arco di dieci minuti (600 secondi = 10 minuti), ordinate in
ordine decrescente in base alla data (Visualizzazione delle azioni più recenti in alto).
La variabile result, risulta un array di righe */
$query = “SELECT * FROM chat WHERE Data+600>’$ora_attuale’ ORDER BY Data DESC”;
$result = mysql_query($query) or die(mysql_error());
/* Finchè esiste nel risultato una riga si entra nel ciclo while. Per vedere la funzione della funzione
stripslashes e date guardare la documentazione online. */
while($riga = mysql_fetch_array($result)){
$nome = stripslashes($riga['Nome']);
$mss = stripslashes($riga['Messaggio']);
$ora = date(”H:i”, $riga['Data']);
echo($ora.” “.$nome.” dice: “.$mss.”<br/>”);
}
/* chiusura del database */
mysql_close($db);
?>
</body>
</html>
Siamo cosi giunti alla fine. Con i codici illustrati finora siete in grado di costruirvi la vostra chat. Vi manca solo un’ultima cosa, e cioè il codice del database, che trovate qui sotto:
`Nome` char(20) NOT NULL default ”,
`Messaggio` char(200) NOT NULL default ”,
`Data` int(20) NOT NULL default ”
) TYPE=MyISAM;
Come al solito i miei codici sono scarni, sono composti dalla sola componente di script, cioè non hanno nessuna componente grafica. Quella starà a voi implementarla (è molto semplice farlo, basta avere conoscenze di html) come meglio vi piace. Lasciatemi pure i vostri commenti (è una cosa molto gradita), e chiedendomi chiarimenti o segnalandomi problemi, sarò molto felice di aiutarvi nell’apprendere sempre meglio il php e i linguaggi web in generale. E come al solito prima di salutarvi, vi invito a visitare il mio portfolio. Detto questo, buon lavoro e buona programmazione a tutti.
Peace and Code
P.S. Vi sarò grato se lascerete qualche commento, cosi che possa sapere se articoli del genere sono graditi all’utenza, ed eventualmente venire incontro alle vostre esigenze
mirko detto
ciao io son all prime armi e st realizando il mio primo sito e sempre stato 1 mio desiderio realizare 1 chat tutta mia sarei felice se mi dai 1 tuo parere e magari pure qualke dritta xke nn riesco bene ad andar avvanti se vuoi puoi trovarmi su msn : redevilduil@hotmail.it
Golars detto
Guarda, io non uso msn, però se vuoi, possiamo parlarne tramite mail. Scrivi pure all’indirizzo
curcio.and@gmail.com
nello detto
ciao ho trovato molto interessante e chiaro questo articolo…
ora proverò a costruire una chat seguendo queste istruzioni…
grazie ciao
pato@940 detto
ciao ho notato che in altervista che my_nomesito che è gia il database predifinito in pratica io creo un asd.slq e lo importo su nel database ?
Golars detto
Si… attento però a settare bene i valori per la connessione al database. Il file sql lo puoi chiamare come più ti piace, non cambia niente