Creați un Shoutbox de bază cu PHP și SQL

În acest tutorial, vom crea un sistem de bază "Shoutbox" cu PHP. Începând cu începători pentru dezvoltarea PHP, acest lucru vă permite să vă faceți umed de lucru cu baze de date înainte de a trece la unele dintre cele mai avansate tutoriale PHP aici la NETTUTS.




Introducere

Acest tutorial vă va ghida în procesul de creare a unui "shoutbox" de bază cu PHP, folosind o bază de date MySQL pentru a stoca strigătele - și apoi face să arate frumos cu unele CSS. Tutorialul este destinat designerilor care sunt increzatori cu HTML & CSS, dar doresc sa incerce sa le dezvolte cu PHP.

În urma tutorialului, trebuie să aveți o bună înțelegere a principiilor de bază ale utilizării PHP pentru a comunica cu o bază de date pentru a trimite, solicita și primi informații. Vom include, de asemenea, utilizarea de Gravatars în Shoutbox noastre, adăugând că puțin mai mult oomph!

Pentru cei care nu au, vă recomandăm să citiți seria noastră PHP From Scratch pentru a înțelege exact ceea ce este PHP și pentru a vedea o parte din sintaxa de bază și modul în care folosim variabilele.

Fișierele despre surse sunt, de asemenea, comentate pentru cei care ar prefera să învețe în acest fel.

Pasul 1 - Noțiuni de bază

Bază de date

Înainte de a începe, ar trebui să aveți deja o configurare a bazei de date pe serverul dvs. web. Asigurați-vă că aveți următoarele detalii la îndemână:

  • Numele gazdei (de ex. gazdă locală)
  • Numele bazei de date
  • Nume de utilizator pentru baza de date
  • Parola

În baza de date, va trebui să creați un tabel numit strigăte cu cinci câmpuri:

  • id
  • Nume
  • e-mail
  • post
  • adresa IP

Pentru a crea acest lucru, executați următorul cod SQL. În mod normal, veți rula acest lucru din fila SQL din phpMyAdmin.

 CREATE TABLE "strigătele" ('id' INTEGER UNSIGNED NULL AUTO_INCREMENT, 'nume' VARCHAR (45) NU NULL, 'email' VARCHAR (60) NOT NULL, 'post' TEXT NOT NULL, 'ipaddress' NULL, KEY PRIMARY ("id"));

Ar trebui să primiți mesajul "Interogarea dvs. SQL a fost executată cu succes"

Fișierele

Vom avea nevoie de trei fișiere create pentru acest proiect:

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

Veți avea nevoie, de asemenea, de un dosar cu imaginile noastre necesare. Prindeți acest lucru din fișierele sursă.

Detalii despre conexiunea bazei de date

db.php fișierul va fi utilizat pentru a stoca detaliile bazei noastre de date. Deschideți-l și introduceți următorul cod:

 

Pasul 2 - Interacțiunea

Începeți-vă index.php fișier cu codul următor, acesta începe doar documentul nostru și plasează câteva secțiuni la stil mai târziu.

     Shoutbox pentru NETTUTS de Dan Harper    

Shoutbox

Dan Harper: NETTUTS

Stabilirea unei conexiuni

Înainte de a putea face ceva cu o bază de date, trebuie să ne conectăm la ea. Introduceți următoarele după codul anterior. Este explicat mai jos.

 Nu s-a putut conecta la serverul de baze de date în acest moment.

„); mysql_select_db ($ database, $ connect) sau mor ('

Nu s-a putut conecta la baza de date în acest moment.

„);

Primele două linii folosesc o funcție PHP încorporată pentru a obține numele acestui fișier, iar cealaltă linie pentru a obține adresa IP a vizitatorilor. Vom folosi cele două variabile mai târziu în tutorial.

Apoi includem pe noi db.php astfel încât să putem prelua detaliile bazei de date pe care le-ați completat. Alternativ, ați putea lipi totul de la db.php aici, dar este o practică bună separarea detaliilor.

$ conectați stochează o funcție pentru a utiliza detaliile bazei noastre de date pentru a stabili o conexiune cu serverul de baze de date. Dacă nu se poate conecta, acesta va afișa un mesaj de eroare și va opri restul încărcării paginii cu die ().

În cele din urmă, ne conectăm la baza noastră de date.

A fost trimis ceva?

Următorul lucru pe care îl vom face este să verificăm dacă cineva a trimis un strigăt utilizând formularul (pe care îl vom include în scurt timp). Verificăm documentele POST pentru a vedea dacă ceva a fost trimis de la un formular.

 dacă este ($ _ POST ['send'])) if (gol $ _ POST ['nume']) || gol ($ _ POST ['email']) ) echo ('

Nu ați completat un câmp obligatoriu.

„); altceva

Începem cu if () care verifică POST-ul nostru pentru a vedea dacă un articol numit "trimite" a fost trimis. Dacă am folosit funcția empty () pentru a ne asigura că au fost completate câmpurile "name", "email" și "post". Dacă nu au fost, vom afișa o eroare.

În caz contrar, vom continua:

 $ nume = htmlspecialchars (mysql_real_escape_string ($ _ POST ['nume'])); $ email = htmlspecialchars (mysql_real_escape_string ($ _ POST ['e-mail'])); $ post = htmlspecialchars (mysql_real_escape_string ($ _ POST ['post'])); $ sql = "INSERTAȚI ÎN strigăte SET nume =" $ name ", email =" $ email ", post =" $ post ", ipaddress =" $ ipaddress ";"; dacă (@mysql_query ($ sql)) echo ('

Mulțumesc pentru strigăte!

„); altceva echo ('

A apărut o eroare neașteptată la trimiterea strigătului.

„);

În primele trei rânduri, rulați fiecare dintre câmpurile noastre (nume, e-mail și post) prin htmlspecialchars () și mysql_real_escape_string () funcționează și le plasează în propriile lor variabile.

htmlspecialchars () este o funcție concepută pentru a împiedica utilizatorii să trimită cod HTML. Dacă nu am făcut acest lucru, cineva ar putea pune orice cod HTML în baza noastră de date, care ar fi apoi executată altor utilizatori. Acest lucru este deosebit de rău dacă cineva a trimis cod javascript care ar transfera vizitatorii către un site rău intenționat!

mysql_real_escape_string () este o funcție similară. În afară de aceasta, utilizatorul nu mai trimite nici un fel de cod SQL pe server. Dacă nu am făcut acest lucru, cineva ar putea executa un cod pentru a fura, edita sau șterge baza de date!

Folosind noile noastre detalii, vom crea o interogare SQL pentru a insera strigatul trimis în baza de date. În etichetele if (), executăm interogarea SQL. Dacă interogarea a fost executată cu succes, iar strigatul a fost adăugat la baza de date, afișăm un mesaj "Vă mulțumim pentru strigăte!" mesaj; altfel vom afișa o eroare.

Recuperarea strigătelor

Acum vom recupera ultimele 8 strigăte din baza noastră de date pentru a le afișa utilizatorului.

 $ query = "SELECT * FROM" strigă ORDER BY 'id' DESC LIMIT 8; "; $ result = @mysql_query ("$ query") sau mor ('

A apărut o eroare neașteptată, prinsând strigătele din baza de date.

„); ?>

    Pe prima linie, creăm o nouă interogare SQL pentru "Returnați toate câmpurile din tabelul" strigăte ", ordonați-le să coboare prin" ID ", dar dați-ne doar cele mai recente 8".

    În a doua linie, executăm interogarea și stocăm-o în $ result. Noi acum:

     în timp ce ($ row = mysql_fetch_array ($ rezultat)) $ ename = stripslashes ($ row ['nume']); $ eemail = stripslashes ($ row ['email']); $ epost = stripslashes ($ row ['post']); $ grav_url = "http://www.gravatar.com/avatar.php?gravatar_id=".md5(strtolower($eemail))."&&hl=ro"; ecou('
  • Gravatar

    '$ Enume.'

    '$ Epost.'

  • „); ?>

Prima linie spune: "În timp ce există încă rânduri (rezultate) în rezultatul $, afișați-le după cum urmează:".

stripslashes () îndepărtează orice brizură mysql_real_escape_string () poate fi introdus în prezentări.

$ grav_url creează Gravatar-ul nostru de la adresa de e-mail a fiecărui utilizator.

Apoi ieșim (ecou) fiecare strigăt într-o manieră specifică. Afișând, în principiu, Gravatar, Nume și Shout într-o listă, putem să stilizăm cu ușurință mai târziu.

Forma

Ultimul pas pentru această pagină este includerea unui formular în partea de jos a paginii, pe care utilizatorii îl pot trimite prin postări.

 

Strigăt!

Rețineți că referim la variabila de sine $ pentru a spune forma în care să trimită rezultatele; și trimitem și prin metoda POST. Sub forma închidem orice etichete HTML pe care le-am deschis.

Coafura

Încearcă! Ați terminat codul PHP și ar trebui să adăugați un nou strigăt și să vedeți ultimele 8.

Cu toate acestea, există o problemă. Arată UGLY! Lasă-mă să rezolv asta cu niște CSS :) Cu acest tutorial CSS, nu voi trece peste stilul, dar totul e destul de simplu.

 * marja: 0; umplutura: 0;  corp fundal: # 323f66 top center url ("imagini / back.png") no-repeat; culoare: #ffffff; font-familie: Helvetica, Arial, Verdana, sans-serif;  h1 font-size: 3.5; spațierea cu litere: -1px; fundal: adresa URL ("images / shoutbox.png") no-repeat; lățime: 303px; marja: 0 auto; text-liniuță: -9999em; culoare: # 33ccff;  h2 font-size: 2; spațierea cu litere: -1px; fundal: url ("imagini / shout.png") nr-repeta; lățime: 119px; text-liniuță: -9999em; culoare: # 33ccff; clar: ambele; margine: 15px 0;  h5 a: link, h5 a: vizitat culoare: #ffffff; text-decoration: nici unul;  h5 a: hover, h5 a: activ, h5 a: focalizare border-bottom: 1px solid #fff;  p font-size: 0.9; linia-înălțime: 1.3; font-family: Lucida Sans Unicode, Helvetica, Arial, Verdana, sans-serif;  p.error background-color: # 603131; frontieră: 1px solid # 5c2d2d; lățime: 260px; padding: 10px; margin-bottom: 15px;  p.success background-color: # 313d60; frontieră: 1px solid # 2d395c; lățime: 260px; padding: 10px; margin-bottom: 15px;  #container width: 664px; margine: 20 pixeli automat; text-align: centru;  #boxtop margine: 30px auto 0px; fundal: adresa url ("images / top.png") no-repeat; lățime: 663px; înălțime: 23px;  #boxbot margin: 0px auto 30px; fundal: url ("images / bot.png") no-repeat; lățime: 664px; înălțime: 25px;  #content margin: 0 auto; lățime: 664px; text-aliniere: stânga; fundal: url ("images / bg.png") repeat-y; padding: 15px 35px;  #content ul marginea-stânga: 0; margin-bottom: 15px;  #content ul li style-style: none; clar: ambele; padding-top: 30px;  #content ul li: primul-copil padding-top: 0;  .meta width: 85px; text-aliniere: stânga; plutește la stânga; min-înălțime: 110px; font-weight: bold;  .meta img padding: 5px; fundal-culoare: # 313d60;  .meta p font-size: 0.8cm;  .show width: 500px; plutește la stânga; margin-stânga: 15px; min-înălțime: 110px; padding-top: 5px;  formular clar: ambele; margin-top: 135px! important;  .fname, .femail width: 222px; plutește la stânga;  forma p font-weight: bold; margin-bottom: 3px;  forma textarea width: 365px; overflow: ascuns; / * elimină bara de derulare verticală în formularul IE * /, forma textarea background-color: # 313d60; frontieră: 1px solid # 2d395c; culoare: #ffffff; padding: 5px; font-family: Lucida Sans Unicode, Helvetica, Arial, Verdana, sans-serif; margin-bottom: 10px; 

Concluzie

Deci, tu o ai! Un shoutbox cu aspect deosebit de funcțional! S-ar putea să fi întrebat ce punct de a crea un Shoutbox este, și bine, ai dreptate, nu are rost. Dar ceea ce face acest lucru este de a vă ajuta să vă dați o înțelegere fundamentală de bază a folosirii PHP pentru a lucra cu o bază de date, permițându-vă să treceți la ghidaje mult mai avansate aici la NETTUTS.

.

Cod