Sono lieto di presentarvi la prima parte di una serie in due parti sulla creazione di un sito di foto utilizzando PHP, jQuery e AJAX. Inizialmente, avevo intenzione di inserire l'intero tutorial in uno screencast, ma questo è diventato rapidamente un sogno irrealizzabile quando ho capito che c'era semplicemente troppo da coprire. Tuttavia, anche se guardi solo questo primo video, dovresti imparare molto.

Ritireremo le immagini da un database, creando un semplice modulo di accesso con autenticazione e consentiremo quindi che il nostro database sia aggiornato in modo asincrono. Suona bene? Se è così, entriamoci dentro.

Il nostro obbiettivo

Per questa lezione, il nostro obiettivo è creare una sezione di gestione delle foto in cui un amministratore possa recuperare le foto da un database e aggiornare il titolo delle sue foto semplicemente facendo clic sul testo appropriato. Per rendere questa pagina più sicura, creeremo anche un semplice sistema di appartenenza. Nei tutorial successivi, approfondiremo questi concetti.

Creare le nostre tabelle con MySQL

Apri PHPMyAdmin e crea un database chiamato "db". All'interno di questo database, dovremo aggiungere due tabelle: "foto" e "utenti".

fotografie

Piuttosto che codificare le nostre immagini nel nostro documento, le memorizzeremo in un database. Anche se potessimo rendere questo tavolo tanto sofisticato come vogliamo, lo terremo semplice per ora.

• id - INT - Chiave primaria - Incremento automatico
• titolo - VARCHAR (500)
• src - VARCHAR (200)

utenti

Per modificare le nostre foto, dobbiamo creare un semplice sistema di iscrizione che consenta al nostro utente di accedere e modificare le sue foto. Ovviamente non vogliamo dare a tutti la cosa giusta!

• id - INT - Chiave primaria - Incremento automatico
• first_name - VARCHAR (50)
• last_name - VARCHAR (50)
• email_address - VARCHAR (75)
• user_name - VARCHAR (25)
• password - VARCHAR (30)

Creazione del layout semplice

Crea un nuovo documento php e aggiungi quanto segue nel tuo documento.

             
 
 
Le mie foto clicca sul testo per cambiare il titolo.
 disconnettersi 
  
 
 
   

Non preoccuparti troppo di alcuni di ciò che è qui. Andremo su tutto in tempo. Ma come una rapida panoramica, stiamo importando la nostra libreria jQuery, un plugin jQuery lightbox e i nostri script personalizzati (che creeremo presto). Prenditi qualche secondo per rivedere il file CSS. Non lo esaminerò troppo in questo articolo scritto - poiché è già abbastanza lungo! Fare riferimento allo screencast per ulteriori informazioni. Ma ti assicuro che è roba piuttosto standard e semplice.

La cosa principale su cui devi concentrarti adesso è:

Questa sarà la sezione in cui recupereremo le nostre foto dal database. Lavoriamo su questo adesso. Crea una nuova pagina

chiamato "getPhotos.php".

Passiamo rapidamente a ciò che dobbiamo realizzare con questo codice.

• Crea una connessione al database
• Recupera tutte le righe dalla tabella delle foto
• Se la connessione ha avuto successo, crea un elenco non ordinato.
• Filtra attraverso le righe e inserisci le informazioni necessarie all'interno dei tag delle voci di elenco.

Incolla il seguente codice nel tuo documento:

 query ($ query) o die (mysqli_error ($ mysqli)); if ($ result) echo "
 \ n "; while ($ row = $ result-> fetch_object ()) $ title = $ row-> title; $ src = $ row-> src; $ id = $ row-> id; echo"
 \ n "; echo"
$ titolo
 \ n "; echo"
 \ n \ n "; echo" \ n
";?>

La prima cosa che dobbiamo fare è creare una connessione al nostro database. Tuttavia, lo faremo molte volte nel corso di questo progetto. Creiamo quindi un'altra pagina chiamata "database.php" e memorizziamo le informazioni lì. In questo modo, abbiamo solo bisogno di modificare un file, in caso di necessità. Aggiungi il seguente codice nel tuo file database.php.

Stiamo creando una variabile chiamata "$ mysqli" e la stiamo impostando su una nuova istanza dell'oggetto "MySQLi". Dobbiamo passare in quattro parametri:

• nome del database
• il server
• nome utente
• parola d'ordine

Per mantenere le cose pulite, inseriremo tali valori nelle variabili e li faremo riferimento. Se la connessione non viene effettuata, lo diremo a "morire".

Interrogare il database

Ora torniamo al nostro file "getPhotos.php". Il prossimo passo è quello di interrogare il database.

 $ query = "SELEZIONA id, titolo, src DA foto"; $ result = $ mysqli-> query ($ query) o die (mysqli_error ($ mysqli));

La nostra richiesta è estremamente semplice. Stiamo essenzialmente recuperando tutto dal database. Potresti voler modificare questo

interrogare per adattarsi alla propria applicazione. Passiamo la query usando "$ mysqli-> query ($ query)".

Se quella query è stata eseguita con successo, creeremo la nostra lista non ordinata e aggiungeremo le nostre immagini.

 eco "
 \ n "; while ($ row = $ result-> fetch_object ()) $ title = $ row-> title; $ src = $ row-> src; $ id = $ row-> id; echo"
 \ n "; echo"
$ titolo
 \ n "; echo"
 \ n \ n "; echo" \ n
";

Creiamo una variabile chiamata $ row che sarà uguale a ogni istanza di una riga nel database. Finché ci sono file

per essere recuperato, questa variabile conterrà le informazioni della riga specifica.

Conserveremo tutte le informazioni di cui abbiamo bisogno nelle variabili. Ad esempio, diciamo che in una riga abbiamo i seguenti dati.

• id = 4
• src = 10.jpg
• title = "La mia foto preferita"

Eseguendo $ row-> title, possiamo prendere quel valore e memorizzarlo nella nostra variabile $ title. Quindi in questo caso, $ title = "La mia foto preferita"; $ src = "10.jpg"; $ id = 4;.

Tutto ciò che dobbiamo fare ora è aggiungere tali informazioni nei nostri tag image e anchor. L'ultima riga aggiungerà un campo di input. Questo alla fine permetterà all'utente di aggiornare il titolo dell'immagine in modo asincrono.

Se esegui "index.php" nel tuo browser, dovresti vedere quanto segue:

AJAX Time

Ora che abbiamo il layout di base del nostro sito, provializziamo! Inizieremo riassumendo ciò che abbiamo bisogno del nostro PHP. Trovo che questo aiuta molto quando si lavora.

• Quando l'utente fa clic sul titolo di un'immagine specifica, verrà quindi visualizzato un campo di input che consente all'utente di modificare il titolo.
• Quando si allontana da quel campo di input, useremo AJAX per eseguire un'istruzione di aggiornamento SQL.
• Per dare all'utente un feedback, mostreremo un div che dice qualcosa sulla falsariga di "Success. Il database è stato aggiornato."

Crea un file PHP chiamato "changePhotoTitle.php" e incolla il seguente codice:

?

 query ($ update_query) o die (mysqli_error ($ mysqli)); if ($ result) echo "Success! 
"; echo" Il titolo di questa foto è stato modificato in: $ titolo";?>

Abbiamo richiesto di nuovo il file del database. (Non siamo contenti di averlo memorizzato in un file separato?) Quindi ne stiamo creando due

variabili. $ title equivale a qualunque cosa l'utente inserisca in quel campo di input. $ id è uguale al rispettivo campo id in

il database.

Per evitare un'iniezione SQL, avvolgeremo quei valori dei post con mysql_real_escape_string ().

Aggiornamento del database

L'aggiornamento è piuttosto semplice. Aggiorna la tabella delle foto e modifica il campo del titolo in qualsiasi parte entri in quella casella di testo; Ma cambia solo il campo del titolo che ha un id uguale a $ id. (Fare riferimento allo screencast per una migliore comprensione).

Se l'aggiornamento è stato eseguito correttamente, echeggeremo un messaggio di congratulazioni.

Implementare il Javascript

Per eseguire l'aggiornamento senza un postback, utilizzeremo jQuery. Crea un nuovo file Javascript chiamato "scripts.js" e

incolla quanto segue:

 $ (function () $ ('h4'). click (function () $ (this) .slideUp (). next ('input'). slideDown ();); $ ('ul # photos input' ) .change (function () var id = $ (this) .parent ('li'). find ('img'). attr ('id'); var thisParam = $ (questo); var title = $ ( this) .val (); $ .ajax (type: 'POST', url: 'changePhotoTitle.php', data: 'title =' + title + '& id =' + id, success: function (response) $ ('input'). slideUp (); $ (thisParam) .prev ('h4'). text (title) .slideDown (); $ ('# response'). fadeIn (1000) .empty (). append ( risposta) .prepend ('X'); $ ('span # x'). click (function () $ ('div # response'). fadeOut ('slow');); ); ); );

• Quando l'utente fa clic sul titolo di un'immagine (il tag h4), eseguiremo una funzione. Nascondiamo il tag h4 e quindi mostriamo il campo di input.
• Creeremo due variabili. "title" memorizzerà il valore di ciò che viene inserito nella casella di testo. "id" memorizzerà il rispettivo id.

AJAX

Usando "$ .ajax", chiameremo l'aggiornamento. $ .ajax accetterà quattro parametri.

• Tipo = il tipo di aggiornamento. In questo caso, sarà 'Post'
• Url = l'url del file che eseguirà il nostro aggiornamento. Abbiamo già creato quel file.
• Dati = le informazioni che stiamo per passare a changePhotoTitle.php. In questo caso, stiamo passando il valore della casella di testo e l'id.
• Operazione riuscita = questa sarà la funzione eseguita se l'aggiornamento è stato eseguito correttamente. In questa funzione, rimuoveremo la casella di testo perché non ne abbiamo più bisogno. Torneremo indietro e mostreremo il tag h4 che ora ha il valore aggiornato.
  Per fornire il feedback degli utenti, prenderemo il div "response" che abbiamo creato all'inizio di questo tutorial e riempirlo con il nostro eco "Congratulazioni". Queste ultime due righe consentono semplicemente all'utente di rimuovere il div "Congratulazioni". Se è necessario, fare riferimento allo screencast per una spiegazione completa.

Implementazione del modulo di accesso

Ora ovviamente, non vogliamo che nessuno sia in grado di modificare i titoli di queste immagini. Quindi, creeremo un semplice sistema di appartenenza.

Crea una nuova pagina chiamata "login.php" e aggiungi il seguente codice:

         
 
 
ACCESSO
 
Nome utente: 
 
Parola d'ordine: 
 
 
 
  

All'interno del body tag, abbiamo un semplice modulo che ha due campi: uno per il nome utente, l'altro per la password. Quando l'utente fa clic sul pulsante "Accedi", le informazioni da quelle caselle di testo verranno pubblicate su "confirmLoginCredentials.php". Vai avanti, crea quella pagina adesso e aggiungi quanto segue.

 query ($ q) o die (mysqli_error ($ mysqli)); if (! mysqli_num_rows ($ result) == 1) header ("Location: login.php");  else setcookie ('authorized', 1, 0); header ("Location: index.php"); ?>

Come al solito, stiamo memorizzando i valori da quelle caselle di testo in variabili denominate $ username e $ password, rispettivamente. Tiriamo ancora una volta il nostro file database.php. La nostra query recupera la riga dal database dove user_name e la password sono uguali a ciò che è stato inserito in queste due caselle di testo. È necessario restituire solo una riga. Se ciò non accade, l'utente verrà reindirizzato a "login.php". Altrimenti, li invieremo alla pagina principale "index.php" e imposteremo un cookie.

 setcookie ('autorizzato', 1, 0);

Il nome del nostro cookie sarà "autorizzato"; il valore sarà uguale a 1; e la data di scadenza sarà 0. 0 significa essenzialmente che quando l'utente chiude il suo browser, quel cookie scadrà.

Quando l'utente viene indirizzato alla pagina index.php, dobbiamo scrivere un breve bit di codice che assicuri che ci sia il cookie richiesto sul computer dell'utente. Torna a index.php e aggiungi il codice seguente nella parte superiore del documento.

Se l'utente ha un cookie denominato "autorizzato" sul suo computer e quel cookie ha un valore uguale a 1, quindi visualizza la pagina. Ma se NON lo fanno, rimandali a login.php.

Disconnettersi

Il passaggio finale in questo tutorial è consentire all'utente di disconnettersi. Trova il tag sulla tua pagina index.php che assomiglia a questo:

 disconnettersi

Sto aggiungendo una coppia chiave-valore a questo URL. Quel valore sarà passato a 'login.php'. Vai a questa pagina e aggiungi il tuo ultimo bit di codice in cima.

Se, nella querystring, la chiave di "logout" è uguale a 1, imposta un cookie con una data di scadenza di un'ora fa. Questo rimuoverà il cookie dal computer dell'utente.

Finalmente hai finito ... per ora!

Quindi abbiamo creato un bel po '. Sfortunatamente, fare tutto ciò che mi piacerebbe prenderebbe pagine e pagine. Forse la prossima settimana verrà pubblicata la seconda parte. Nella parte 2, implementeremo quanto segue:

• Scrivi un codice che permetta all'amministratore di modificare le foto. Se non sono connessi, possono visualizzare le foto, ma non possono modificarle.
• Implementare la funzionalità lightbox
• Crea inserto ed elimina pagine
• Proteggi il sito di più
• Aggiungi più convalida
• Rendi il sito più carino
• E molto altro ...

Grazie mille per aver guardato lo screencast e aver esaminato l'articolo. C'è altro in arrivo!