Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. PHP
Code

Creare un carrello elettronico con PHP e MySQL

by
Difficulty:AdvancedLength:LongLanguages:

Italian (Italiano) translation by Francesco (you can also view the original English article)

Per il tutorial + screencast di questa settimana, vi insegneremo come creare il vostro carrello elettronico con PHP e MySQL. Come vedrai, non è così difficile come potresti pensare.


Screencast preview

 

Step 1

Iniziamo dando uno sguardo alla struttura della cartella:


Struttura

  • reset.css - potete scaricare il file reset da questo link
  • style.css - il nostro file css che useremo per stilizzare il nostro markup HTML
  • connection.php - il file che creerà la connessione al database
  • index.php - il template per il nostro carrello
  • cart.php - il file in cui potremo cambiare i prodotti del carrello (aggiungere, rimuovere)
  • products.php - pagina di elenco dei prodotti

Step 2

Inizieremo scrivendo il markup html e dopo applicheremo lo stile. Quindi apriamo il file index.php e copiamo/incolliamo il codice seguente:

Come potete vedere, la nostra pagina ha due colonne: la colonna principale e la sidebar. Vediamo il CSS. Aprite il file style.css e scrivete il codice sottostante:

Ecco come dovrebbe apparire la nostra pagina prodotti:



Screencast completo

 

Step 3

Prima di andare avanti sulla parte PHP/MySQL, dobbiamo creare il database.  Aprite phpMyadmin e seguite questi passi:

  1. Andate sulla tab Privilegi, cliccate il bottone aggiungi nuovo utente e usate le seguenti impostazioni: Username: tutorial; Host: localhost; Password: supersecretpassword. Ora assicuratevi che sono stati assegnati i privilegi globali; poi andate al passo successivo.
  2. Create un nuovo database chiamato tutorials.
  3. Create una nuova tabella chiamata products e impostate il numero di campi a 4. Ora popolate questi campi con questi valori: id_integer - assicuratevi che non sia impostato su INT e spuntate la casella PRIMARY(imposta anche auto_increment): name - imposta VARCHAR con una lunghezza di 100; description - VARCHAR con lunghezza 250; price - assicurati che sia impostato su DECIMAL(2,6)
  4. Popolate il database con dei prodotti di esempio

Per risparmiare tempo, ho esportato la mia tabella prodotti così potete semplicemente eseguire la seguente query:





Step 4

Prima di estrarre i dati dal database, creerò il file index.php come template per la lista dei prodotti e il carrello. Quindi aggiungi il seguente codice all'inizio del file index.php:

  1. session_start() - questo verrà usato dopo; ci permetterà di usare le sessioni (è di vitale importanza che session_start sia chiamato prima che gli altri dati sono inviati al browser).
  2. Nella seconda linea, includiamo connection.php che creerà la connessione al database (affronteremo questo tra poco). Un'altra cosa: la differenza tra include e require è che se usi require e il file non viene trovato, l'esecuzione dello script si fermerà. Se usiamo "include", lo script continuerà a funzionare.
  3. Invece di copiare il codice html intero (il link per il css, per il js) per ogni file nel vostro sito, si potrebbe solo renderli relativi in un singolo file. Quindi per prima cosa, controllerò se c'è una variabile GET chiamata "page set". In caso negativo, creerò una nuova variabile chiamata _pages. Se la variabile GET pages è impostata prima, vorrò essere sicuro che il file che sto andando ad includere è una pagina valida.

Per far funzionare tutto questo, abbiamo bisogno di includere il file; aggiungiamo questa linea al file index.php tra il div con id "main".

Ecco il file index.php completo che avremo:


Creamo la connessione a MySQL. Apriamo connections.php e scriviamo quanto segue:


Step 5

Ora è il momento di scrivere il markup della pagina prodotti. Quindi andiamo avanti e scriviamo quanto segue:

Diamo un'occhiata alla pagina:


Come potete vedere è bruttina. Aggiungiamo un pò di stile con i CSS.

Okay: diamo un'altra occhiata ora:


Un po' meglio, non credete? Di seguito il codice di style.css completo:


Step 6

Prima di estrarre il prodotto dal database, cerchiamo di rimuovere le ultime due righe dalla nostra tabella (le abbiamo usate solo per vedere come si presenta la nostra tabella). Rimuovere questo:

Grande! Ora, dove erano le righe della tabella, digitare il seguente codice PHP:

  1. Quindi, in primo luogo usiamo SELECT per recuperare i prodotti, quindi facciamo un loop su ogni riga del database e la visualizziamo sulla pagina in una riga della tabella.
  2. Si può vedere che il link punta alla stessa pagina (quando l'utente fa clic il prodotto viene aggiunto al carrello/sessione). Passiamo solo alcune variabili supplementari come l'id del prodotto.

Se si passa col mouse sopra uno dei collegamenti Aggiungi al carrello, si può vedere, nella parte inferiore della pagina, che viene passato l'id del prodotto.



Step 7

Facciamo in modo che i link funzionino aggiungendo il seguente codice nella parte superiore della nostra pagina:

  1. Se è impostata la variabile GET chiamata action e il suo valore è ADD, eseguiamo il codice.
  2. Facciamo in modo che l'id passato attraverso la variabile GET sia un numero intero
  3. Se l'id del prodotto è nella sessione del carrello, dobbiamo solo incrementare la quantità di 1
  4. Se l'id non è presente nella sessione, abbiamo bisogno di assicurarci che l'id passato attraverso la variabile GET esista nel database. In caso affermativo, dobbiamo prendere il prezzo e creare la sessione. Se così non fosse, abbiamo impostato una variabile denominata messaggio che conterrà il nostro errore.

Controlliamo se tale variabile di messaggio è impostata e mostriamola sulla pagina (digitate questo codice sotto il titolo della pagina H1):

Qui si vede la pagina completa products.php.

Ecco il messaggio di errore se l'id del prodotto non è valido



Step 8

Torniamo alla index.php e costruiamo la barra laterale. Aggiungete il codice riportato di seguito:

  1. Prima verifichiamo se il carrello di sessione è impostato. In caso negativo, visualizziamo il messaggio, per avvertire l'utente che il carrello è vuoto.
  2. Successivamente facciamo una SELECT mysql, ma stiamo selezionando solo i prodotti che sono nella sessione. A tale scopo, utilizziamo la funzione foreach. Quindi facciamo un loop sulla sessione ed aggiungiamo l'id del prodotto alla SELECT. Poi, useremo la funzione substr per rimuovere l'ultima virgola dalla SELECT.
  3. Alla fine abbiamo l'output dei dati al browser.

Date un'occhiata alle immagini qui sotto:



Poiché l'index.php è un modello per tutti i file, la barra laterale sarà visibile in cart.php anche. Non è cool?!


Step 9

Infine, aprite cart.php e digitate il codice riportato di seguito:

Il codice è simile a quella di index.php e products.php, quindi non ho intenzione di spiegare tutto di nuovo. Si dovrebbe notare che invece di visualizzare la quantità in un form, ora viene visualizzato in una casella di input (in modo che possiamo cambiare la quantità). Inoltre la tabella è racchiusa in un tag form. Per ottenere il prezzo totale degli articoli si moltiplica la quantità dell'id prodotto specifico (dalla sessione) con il suo prezzo. Questo viene fatto in ogni ciclo.

Nota: L'input è un array, la chiave è l'id del prodotto e la quantità è il valore della quantità.



Step 10

L'ultimo passo che dobbiamo fare è quello di far funzionare il form. Quindi aggiungiamo questo codice all'inizio della pagina cart.php.

  1. Prima verifichiamo se il modulo è stato inviato. Se è stato inviato e il valore dell'input era zero, cancelliamo tale sessione.
  2. Se il valore è qualsiasi altro valore, impostiamo la quantità a quel valore invece.

Ecco il file cart.php completo


Spero che vi sia piaciuto questo tutorial. Se avete domande, assicuratevi di guardare il video tutorial in modo approfondito!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.