Sunt încântat să vă prezint o parte dintr-o serie de două părți privind crearea unui site de fotografie folosind PHP, jQuery și AJAX. Inițial, am intenționat să potrivesc întregul tutorial într-un singur ecran, dar acesta a devenit rapid un vis de tevi, deoarece mi-am dat seama că a fost prea mult de acoperit. Cu toate acestea, chiar dacă vizionați doar primul videoclip, ar trebui să învățați foarte mult.

Vom recupera imagini dintr-o bază de date, creând un simplu formular de autentificare cu autentificare și vom permite ca baza noastră de date să fie actualizată asincron. Suna bine? Dacă da, să intrăm în ea.

Scopul nostru

Pentru această lecție, obiectivul nostru este de a crea o secțiune de administrare a fotografiilor unde un administrator poate prelua fotografii dintr-o bază de date și poate actualiza titlul fotografiilor făcând clic simplu pe textul corespunzător. Pentru a face această pagină mai sigură, vom crea și un simplu sistem de membru. În tutoriale ulterioare, vom extinde aceste concepte.

Crearea tabelelor noastre cu MySQL

Deschideți PHPMyAdmin și creați o bază de date numită "db". În cadrul acestei baze de date, va trebui să adăugăm două tabele: "fotografii" și "utilizatori".

fotografii

În loc să codificăm greșit imaginile noastre în documentul nostru, le vom stoca într-o bază de date. Deși am putea să facem acest tabel atât de sofisticat pe cât vrem, vom păstra simplu pentru moment.

• id - INT - Cheie primară - Creștere automată
• titlu - VARCHAR (500)
• src - VARCHAR (200)

utilizatori

Pentru a edita fotografiile, trebuie să creăm un sistem simplu de membru care să permită utilizatorului nostru să se autentifice și să-și editeze fotografiile. Desigur, nu vrem să dăm tuturor așa!

• id - INT - Cheie primară - Creștere automată
• first_name - VARCHAR (50)
• last_name - VARCHAR (50)
• email_address - VARCHAR (75)
• user_name - VARCHAR (25)
• parola - VARCHAR (30)

Crearea layout-ului simplu

Creați un nou document php și adăugați următoarele în documentul dvs..

             
 
 
Fotografiile mele faceți clic pe text pentru a schimba titlul.
 logout 
  
 
 
   

Nu vă faceți griji prea multe despre ceea ce este aici. Vom trece peste tot în timp. Dar, ca o privire de ansamblu rapidă, importăm biblioteca jQuery, un plugin jQuery lightbox și scripturile personalizate (pe care le vom crea în curând). Faceți câteva secunde pentru a examina fișierul CSS. Nu voi trece prea mult în acest articol scris - cum este deja destul de lung! Consultați secțiunea de difuzare pentru mai multe informații. Dar, vă asigur că este ceva standard și simplu simplu.

Principalul lucru pe care trebuie să vă concentrați acum este:

Aceasta va fi secțiunea în care vom prelua fotografiile din baza de date. Să lucrăm la asta chiar acum. Creați o pagină nouă

numit "getPhotos.php".

Să trecem rapid la ceea ce trebuie să realizăm cu acest cod.

• Creați o conexiune la baza de date
• Preia toate rândurile din tabelul cu fotografii
• Dacă conexiunea a avut succes, creați o listă neordonată.
• Filtrați prin rânduri și plasați informațiile necesare în etichetele elementului de listă.

Inserați următorul cod în documentul dvs.:

 interogați (interogare $) sau mori (mysqli_error ($ mysqli)); dacă ($ rezultat) echo "
 \ n "; în timp ce ($ row = $ result-> fetch_object ()) $ title = $ row-> title; $ src = $ row-> src; $ id = $ row-> id;
 \ n "; echo"
titlu $
 \ n "; echo"
 \ n \ n "; echo" \ n
";>>

Primul lucru pe care trebuie să-l facem este să creezi o legătură cu baza noastră de date. Cu toate acestea, vom face acest lucru de multe ori pe parcursul acestui proiect. Deci, să creăm o altă pagină numită "database.php" și să stocăm informațiile acolo. În acest fel, trebuie doar să editați un fișier, dacă este nevoie. Adăugați următorul cod în fișierul database.php.

Creăm o variabilă numită "$ mysqli" și o setăm la o nouă instanță a obiectului "MySQLi". Trebuie să trecem în patru parametri:

• numele bazei de date
• server-ul
• nume de utilizator
• parola

Pentru a păstra lucrurile curate, vom plasa aceste valori în variabile și le vom referi. Dacă conexiunea nu este făcută, îi vom spune să "moară".

Interogarea bazei de date

Acum să revenim la fișierul nostru "getPhotos.php". Următorul pas este interogarea bazei de date.

 $ query = "SELECT id, titlu, src FROM photos"; $ result = $ mysqli-> interogare (interogare $) sau muri (mysqli_error ($ mysqli));

Întrebarea noastră este extrem de simplă. În principiu, preluăm totul din baza de date. S-ar putea să doriți să modificați acest lucru

interogare pentru a se potrivi cu propria aplicație. Transmitem interogarea utilizând "$ mysqli-> query ($ query)".

Dacă această interogare a fost efectuată cu succes, vom crea lista neordonată și vom adăuga imaginile noastre.

 ecou "
 \ n "; în timp ce ($ row = $ result-> fetch_object ()) $ title = $ row-> title; $ src = $ row-> src; $ id = $ row-> id;
 \ n "; echo"
titlu $
 \ n "; echo"
 \ n \ n "; echo" \ n
„;

Creăm o variabilă numită rând $ care va fi egală cu fiecare instanță a unui rând din baza de date. Atâta timp cât există rânduri

pentru a fi preluat, această variabilă va conține informațiile despre rândul respectiv.

Vom stoca toate informațiile de care avem nevoie în variabile. De exemplu, să presupunem că într-un rând avem următoarele date.

• id = 4
• src = 10.jpg
• title = "Fotografia mea preferată"

Prin efectuarea unui $ row-> title, putem să luăm acea valoare și să o stocăm în variabila de titlu $. Deci, în acest caz, $ title = "Fotografia mea preferată"; $ src = "10.jpg"; $ id = 4;.

Tot ce trebuie să facem acum este să adăugăm acele informații în imaginea noastră și etichetele ancorei. Ultima linie va adăuga un câmp de intrare. Acest lucru va permite în final utilizatorului să actualizeze titlul imaginii în mod asincron.

Dacă executați "index.php" în browserul dvs., ar trebui să vedeți următoarele:

Timpul AJAX

Acum, că avem aspectul de bază al site-ului nostru, să-l ajaxificăm! Vom începe prin rezumarea a ceea ce avem nevoie de PHP pentru a face. Consider că acest lucru ajută foarte mult la lucru.

• Când utilizatorul face clic pe titlul unei anumite imagini, vom afișa un câmp de introducere care permite utilizatorului să schimbe titlul.
• Când se îndepărtează de câmpul de introducere, vom folosi AJAX pentru a executa o instrucțiune de actualizare SQL.
• Pentru a oferi feedback unui utilizator, vom afișa un div care spune ceva în paralel cu "Succes. Baza de date a fost actualizată".

Creați un fișier PHP numit "changePhotoTitle.php" și lipiți-l în următorul cod:

?

 interogați ($ update_query) sau mori (mysqli_error ($ mysqli)); dacă ($ rezultat) echo "Succes! 
"; echo" Titlul acestei fotografii a fost schimbat în: titlu $";>>

Am solicitat din nou fișierul bazei de date. (Nu ne bucurăm că am stocat-o într-un fișier separat?) Apoi, creăm două

variabile. Titlul $ este egal cu oricare dintre utilizatori intră în acel câmp de introducere. $ id este egal cu câmpul său de identificare respectiv în

bazei de date.

Pentru a preveni o injecție SQL, vom împacheta aceste valori post cu mysql_real_escape_string ().

Actualizarea bazei de date

Actualizarea este destul de simplă. Actualizați tabelul cu fotografii și modificați câmpul de titlu la oricare dintre utilizatori intră în caseta de text respectivă; Dar modificați numai câmpul de titlu care are un id egal cu $ id. (Consultați ecranul pentru o mai bună înțelegere.)

Dacă actualizarea a fost efectuată cu succes, vom reciona un mesaj de felicitări.

Implementarea Javascript-ului

Pentru a efectua actualizarea fără postback, vom folosi jQuery. Creați un nou fișier Javascript numit "scripts.js" și

lipiți în următoarele:

 $ (') $ (') () ($) ($) ) .arr ('id'); var thisParam = $ (this); var titlu = $ () acest lucru este valabil pentru toate tipurile de aplicații de tip " (')' ($) ($) ($) ($) ($). răspuns) .prepend (“X„); $ ('span # x') faceți clic pe (funcția () $ ('div # response'). ); ); );

• Când utilizatorul face clic pe titlul unei imagini (eticheta h4), vom rula o funcție. Vom ascunde eticheta h4 și apoi vom afișa câmpul de introducere.
• Vom crea două variabile. "title" va stoca valoarea a ceea ce este introdus în caseta de text. "id" va stoca ID-ul respectiv.

AJAX

Folosind ".ajax", vom apela actualizarea. $ .axax va accepta patru parametri.

• Tip = tipul de actualizare. În acest caz, va fi "Post"
• Url = adresa URL a fișierului care va efectua actualizarea. Am creat deja acel fișier.
• Datele = informațiile pe care le vom trece pentru a schimbaPhotoTitle.php. În acest caz, trecem valoarea casetei de text și a id-ului.
• Success = aceasta va fi funcția care rulează dacă actualizarea a fost efectuată cu succes. În această funcție, vom elimina caseta de text pentru că nu mai avem nevoie de ea. Vom reveni și vom afișa eticheta h4 care are acum valoarea actualizată.
  Pentru a oferi feedback utilizatorilor, vom lua răspunsul "div" pe care l-am creat la începutul acestui tutorial și îl vom completa cu ecoul nostru "Felicitări". Aceste ultimele două linii permit pur și simplu o modalitate pentru utilizatorul de a elimina acel "Felicitări" div. Dacă doriți, consultați ecranul pentru o explicație completă.

Implementarea formularului de autentificare

Acum, evident, nu vrem ca nimeni să poată edita titlurile acestor imagini. Deci, vom crea un simplu sistem de aderare.

Creați o pagină nouă numită "login.php" și adăugați următorul cod:

         
 
 
LOGARE
 
Nume de utilizator: 
 
Parola: 
 
 
 
  

În eticheta organismului, avem o formulă simplă care are două câmpuri: una pentru numele de utilizator și cealaltă pentru parolă. Când utilizatorul face clic pe butonul "Conectare", informațiile din acele casete de text vor fi postate în "confirmLoginCredentials.php". Continuați, creați acea pagină chiar acum și adăugați următoarele.

 interogați ($ q) sau muriți (mysqli_error ($ mysqli)); dacă (! mysqli_num_rows ($ rezultat) == 1) antet ("Locație: login.php");  altceva setcookie ("autorizat", 1, 0); antet ("Locație: index.php"); ?>

În mod obișnuit, stocăm valorile din acele casete de text în variabile numite $ username și $ password, respectiv. Din nou, tragem în fișierul nostru database.php. Interogarea noastră returnează rândul din baza de date în care numele de utilizator și parola sunt egale cu cele introduse în aceste două casete de text. Trebuie returnat un singur rând. Dacă nu se întâmplă acest lucru, utilizatorul va redirecționa înapoi la "login.php". Altfel, le vom trimite pe pagina principală "index.php" și vom seta un cookie.

 setcookie ("autorizat", 1, 0);

Numele cookie-ului nostru va fi "autorizat"; valoarea va fi egală cu 1; iar data de expirare va fi 0. 0 în esență înseamnă că atunci când utilizatorul își închide browser-ul, cookie-ul va expira.

Când utilizatorul este direcționat către pagina index.php, trebuie să scriem un cod rapid de cod care să asigure că există cookie-ul necesar pe computerul utilizatorului. Reveniți la index.php și adăugați codul următor în partea superioară a documentului.

Dacă utilizatorul are un cookie numit "autorizat" pe computerul său și acel cookie are o valoare egală cu 1, atunci afișați pagina. Dar dacă nu, trimiteți-le înapoi la login.php.

Delogare

Ultimul pas în acest tutorial este de a permite utilizatorului să se deconecteze. Găsiți eticheta pe pagina dvs. index.php care arată astfel:

 logout

Adăugez o pereche cheie-valoare la această adresă URL. Această valoare va fi trecută la "login.php". Mergeți la această pagină și adăugați ultimul cod de cod la partea de sus.

Dacă în cheia de interogare cheia de "logout" este egală cu 1, setați un cookie care are o dată de expirare de o oră în urmă. Aceasta va elimina cookie-ul de pe computerul utilizatorului.

În cele din urmă, ați terminat ... deocamdată!

Așa că am creat destul de puțin. Din nefericire, pentru a face tot ce mi-ar plăcea ar lua pagini și pagini. Poate săptămâna viitoare, Partea a 2-a va fi eliberată. În Partea 2, vom implementa următoarele:

• Scrieți un cod care permite administratorului să editeze fotografiile. Dacă nu sunt conectați, pot vizualiza fotografiile, dar nu li se permite să le editați.
• Implementați funcționalitatea Lightbox
• Creați inserarea și ștergerea paginilor
• Asigurați mai mult site-ul
• Adăugați mai multă validare
• Faceți site-ul mai frumos
• Și multe altele ...

Vă mulțumim foarte mult pentru vizionarea ecranului și revizuirea articolului. Mai sunt multe de parcurs!