Crea un Shoutbox di base con PHP e SQL

In questo tutorial, creeremo un sistema di base 'Shoutbox' con PHP. Destinato ai principianti allo sviluppo di PHP, questo ti permette di lavorare a fondo con i database prima di passare ad alcuni dei tutorial PHP più avanzati qui su NETTUTS.




introduzione

Questo tutorial ti guiderà attraverso il processo di creazione di un "shoutbox" di base con PHP, utilizzando un database MySQL per archiviare le urla - e quindi renderlo bello con alcuni CSS. Il tutorial è rivolto a designer che sono fiduciosi con HTML e CSS, ma vogliono cimentarsi nello sviluppo con PHP.

Seguendo il tutorial, dovresti avere una buona comprensione delle basi dell'uso di PHP per comunicare con un database per inviare, richiedere e ricevere informazioni. Includeremo anche l'uso di Gravatars nel nostro Shoutbox, aggiungendo quel tocco in più!

Per quelli che non lo sono, ti consiglio di leggere la nostra serie PHP From Scratch per capire esattamente cosa sia PHP, e dare un'occhiata ad alcune delle sintassi di base e al modo in cui usiamo le variabili.

I file delle fonti sono anche commentati per coloro che preferirebbero imparare in questo modo.

Passaggio 1: Introduzione

Banca dati

Prima di iniziare, dovresti già avere una configurazione del database sul tuo server web. Assicurati di avere i seguenti dettagli a portata di mano:

  • Nome host (es. localhost)
  • Nome del database
  • Nome utente per database
  • Parola d'ordine

Nel database, sarà necessario creare una tabella denominata grida con cinque campi:

  • id
  • nome
  • e-mail
  • inviare
  • indirizzo IP

Per creare questo, eseguire il seguente codice SQL. Normalmente lo eseguirai dalla scheda SQL in phpMyAdmin.

 CREATE TABLE 'shouts' ('id' INTEGER UNSIGNED NOT NULL AUTO_INCREMENT, 'name' VARCHAR (45) NOT NULL, 'email' VARCHAR (60) NOT NULL, 'post' TEXT NOT NULL, 'ipaddress' VARCHAR (45) NOT NULL, PRIMARY KEY ('id'));

Si dovrebbe ricevere un messaggio "La query SQL è stata eseguita correttamente"

I file

Avremo bisogno di tre file creati per questo progetto:

  • index.php
  • style.css
  • db.php

Avrai anche bisogno di una cartella con le nostre immagini richieste. Prendi questo dai file sorgente.

Dettagli di connessione al database

Il db.php il file verrà utilizzato per memorizzare i dettagli del nostro database. Aprilo e inserisci il seguente codice:

 

Passaggio 2: interazione

Inizia il tuo index.php file con il seguente codice, inizia appena il nostro documento e inserisce alcune sezioni per lo stile in un secondo momento.

     Shoutbox per NETTUTS di Dan Harper    

Shoutbox

Dan Harper: NETTUTS

Stabilire una connessione

Prima di poter fare qualsiasi cosa con un database, dobbiamo collegarci ad esso. Inserire quanto segue dopo il codice precedente. È spiegato di seguito.

 Impossibile connettersi al server di database in questo momento.

'); mysql_select_db ($ database, $ connect) o die ('

Impossibile connettersi al database in questo momento.

');

Le prime due righe utilizzano una funzione PHP incorporata per ottenere il nome di questo file e l'altra linea per ottenere l'indirizzo IP dei visitatori. Utilizzeremo le due variabili più avanti nel tutorial.

Quindi includiamo il nostro db.php file in modo da poter recuperare i dettagli del database che hai compilato. In alternativa, puoi incollare tutto da db.php qui, ma è buona norma separare i dettagli.

$ connettersi memorizza una funzione per utilizzare i dettagli del nostro database per stabilire una connessione con il server del database. Se non riesce a connettersi, visualizzerà un messaggio di errore e interromperà il resto della pagina caricando con die ().

Infine, ci colleghiamo al nostro database.

Qualcosa è stato presentato?

La prossima cosa che faremo è controllare se qualcuno ha inviato un messaggio usando il modulo (che includeremo a breve). Controlliamo i documenti POST per vedere se qualcosa è stato inviato da un modulo.

 if (isset ($ _ POST ['send'])) if (vuoto ($ _ POST ['nome']) || vuoto ($ _ POST ['email']) || vuoto ($ _ POST ['post']) )  eco('

Non hai compilato un campo obbligatorio.

'); altro

Iniziamo con il nostro if () che controlla il nostro POST per vedere se è stato inviato un elemento chiamato "invia". Se lo è, utilizziamo la funzione empty () per assicurarci che i campi "name", "email" e "post" siano stati compilati. Se non lo fossero, visualizziamo un errore.

Altrimenti, continuiamo:

 $ name = htmlspecialchars (mysql_real_escape_string ($ _ POST ['name'])); $ email = htmlspecialchars (mysql_real_escape_string ($ _ POST ['email'])); $ post = htmlspecialchars (mysql_real_escape_string ($ _ POST ['post'])); $ sql = "INSERT INTO shouts SET name =" $ name ", email =" $ email ", post =" $ post ", ipaddress =" $ indirizzoip ";"; if (@mysql_query ($ sql)) echo ('

Grazie per aver urlato!

'); else echo ('

Si è verificato un errore imprevisto durante l'invio del tuo messaggio.

');

Sulle prime tre righe, eseguiamo ciascuno dei nostri campi (nome, email e posta) attraverso il htmlspecialchars () e mysql_real_escape_string () funzioni e inserirle nelle proprie variabili.

htmlspecialchars () è una funzione progettata per impedire agli utenti di inviare codice HTML. Se non lo facessimo, qualcuno potrebbe inserire qualsiasi codice HTML nel nostro database che poi verrebbe eseguito ad altri utenti. Ciò è particolarmente grave se qualcuno ha inviato un codice javascript che trasferisce i visitatori a un sito Web dannoso!

mysql_real_escape_string () è una funzione simile. Tranne questo, l'utente non invia alcun tipo di codice SQL al server. Se non lo facessimo, qualcuno potrebbe eseguire il codice per rubare, modificare o cancellare il nostro database!

Usando i nostri nuovi dettagli, creiamo una query SQL per inserire il grido inviato nel database. Nei tag if (), eseguiamo la query SQL. Se la query è stata eseguita correttamente e il grido aggiunto al database, viene visualizzato un messaggio di ringraziamento per urlare! Messaggio; altrimenti visualizziamo un errore.

Recupero delle grida

Ora recupereremo gli ultimi 8 shout dal nostro database per visualizzarli all'utente.

 $ query = "SELECT * FROM 'shouts' ORDER BY 'id' DESC LIMIT 8;"; $ result = @mysql_query ("$ query") o die ('

Si è verificato un errore imprevisto che ha catturato le grida dal database.

'); ?>

    Sulla prima riga, creiamo una nuova query SQL su "Recupera tutti i campi dalla tabella 'shouts', ordinali discendenti con l''ID', ma forniscici solo gli ultimi 8".

    Sulla seconda riga eseguiamo la query e la memorizziamo in $ result. Noi ora:

     while ($ row = mysql_fetch_array ($ result)) $ ename = stripslashes ($ row ['name']); $ eemail = stripslashes ($ row ['email']); $ epost = stripslashes ($ row ['post']); $ grav_url = "http://www.gravatar.com/avatar.php?gravatar_id=".md5(strtolower($eemail))."&size=70"; eco('
  • gravatar

    '$ Ename.'

    '$ EPost.'

  • '); ?>

La prima riga dice "Mentre ci sono ancora righe (risultati) all'interno di $ result, mostrale come segue:".

stripslashes () rimuove tutte le barre che mysql_real_escape_string () potrebbe essere inserito nelle iscrizioni.

$ grav_url crea il nostro Gravatar dall'indirizzo email di ciascun utente.

Quindi emettiamo (eco) ogni urlo in un modo specifico. Fondamentalmente la visualizzazione del Gravatar, Name e Shout in una lista possiamo facilmente stile in seguito.

Il modulo

Il passaggio finale per questa pagina consiste nell'inserire un modulo nella parte inferiore della pagina attraverso il quale gli utenti possono inviare post.

 

Grido!

Si noti che si fa riferimento alla variabile $ $ per indicare al modulo dove inviare i risultati; e inviamo anche tramite il metodo POST. Sotto il modulo chiudiamo tutti i tag HTML che abbiamo aperto.

Messa in piega

Provalo! Hai completato tutto il codice PHP e dovresti essere in grado di aggiungere un nuovo messaggio e vedere gli ultimi 8.

Tuttavia, c'è un problema. Sembra brutto! Lo risolve con alcuni CSS :) Con questo non essendo un tutorial CSS, non andrò su nessuno degli stili, ma tutto è piuttosto semplice.

 * margine: 0; padding: 0;  body background: # 323f66 top center url ("images / back.png") no-repeat; colore: #ffffff; famiglia di font: Helvetica, Arial, Verdana, sans-serif;  h1 font-size: 3.5em; letter-spacing: -1px; background: url ("images / shoutbox.png") no-repeat; larghezza: 303 px; margine: 0 auto; text-indent: -9999em; colore: # 33ccff;  h2 font-size: 2em; letter-spacing: -1px; background: url ("images / shout.png") no-repeat; larghezza: 119 px; text-indent: -9999em; colore: # 33ccff; chiaro: entrambi; margine: 15px 0;  h5 a: link, h5 a: visited color: #ffffff; decorazione del testo: nessuna;  h5 a: hover, h5 a: active, h5 a: focus border-bottom: 1px solid #fff;  p font-size: 0.9em; line-height: 1.3em; font-family: Lucida Sans Unicode, Helvetica, Arial, Verdana, sans-serif;  p.error background-color: # 603131; border: 1px solid # 5c2d2d; larghezza: 260 px; imbottitura: 10px; margin-bottom: 15px;  p.success background-color: # 313d60; border: 1px solid # 2d395c; larghezza: 260 px; imbottitura: 10px; margin-bottom: 15px;  #container width: 664px; margine: 20px auto; allineamento del testo: centro;  #boxtop margin: 30px auto 0px; background: url ("images / top.png") no-repeat; larghezza: 663 px; altezza: 23 px;  #boxbot margin: 0px auto 30px; background: url ("images / bot.png") no-repeat; larghezza: 664 px; altezza: 25px;  #content margin: 0 auto; larghezza: 664 px; allineamento del testo: a sinistra; background: url ("images / bg.png") repeat-y; imbottitura: 15px 35px;  #content ul margin-left: 0; margin-bottom: 15px;  #content ul li list-style: none; chiaro: entrambi; padding-top: 30px;  #content ul li: first-child padding-top: 0;  .meta width: 85px; allineamento del testo: a sinistra; fluttuare: a sinistra; altezza minima: 110 px; font-weight: bold;  .meta img padding: 5px; background-color: # 313d60;  .meta p font-size: 0.8em;  .shout width: 500px; fluttuare: a sinistra; margin-left: 15px; altezza minima: 110 px; padding-top: 5px;  forma chiaro: entrambi; margin-top: 135px! important;  .fname, .femail width: 222px; fluttuare: a sinistra;  forma p carattere-peso: grassetto; margin-bottom: 3px;  forma textarea width: 365px; overflow: nascosto; / * rimuove la barra di scorrimento verticale nell'input del modulo IE * /, forma textarea background-color: # 313d60; border: 1px solid # 2d395c; colore: #ffffff; imbottitura: 5px; font-family: Lucida Sans Unicode, Helvetica, Arial, Verdana, sans-serif; margin-bottom: 10px; 

Conclusione

Così il gioco è fatto! Un bellissimo Shoutbox di grande effetto! Potresti esserti chiesto cosa punto di creare un Shoutbox è, e beh, hai ragione, non ha senso. Ma ciò che questo fa è aiutare a darti alcune fondamentali conoscenze di base sull'uso di PHP per lavorare con un database, permettendoti di passare a guide molto più avanzate qui su NETTUTS.

.