Costruisci un carrello con PHP e MySQL

Per il tutorial di screencast + di questa settimana, ti insegneremo come costruire il tuo carrello con PHP e MySQL. Come scoprirai, non è così difficile come potresti aver pensato.

Opzioni Premium

Se stai cercando una soluzione rapida e pronta, ci sono più di 50 script per il carrello degli acquisti PHP tra cui scegliere su Envato Market. Ecco una rapida occhiata ad alcuni di loro.

1. LivelyCart - un JQuery PHP Store / Shop

Questo è un carrello per PHP / MySQL facile da usare e personalizzabile. È dotato di due opzioni di pagamento utilizzando PayPal e Invia ordine via email. Puoi usare entrambi o uno dei due.

LivelyCart - un JQuery PHP Store / Shop su Envato Market

2. Negozio digitale universale

Universal Digital Shop è uno script potente che ti consente di vendere prodotti digitali direttamente sul tuo sito web. Gestisce i pagamenti tramite più gateway di pagamento (PayPal, Payza / AlertPay, Skrill / Moneybookers, Authorize.Net, InterKassa, EgoPay, Perfect Money, BitPay, Blockchain.info e Stripe) e possono essere facilmente integrati in qualsiasi pagina web.

Con questo widget non devi installare complicati carrelli della spesa e creare il loro design per abbinare il tuo sito web. Universal Digital Shop è il modo più semplice per distribuire prodotti digitali e monetizzare un sito web.

Universal Digital Shop sul mercato Envato

3. Terminale di pagamento a strisce

Questo script ti consente di avere un terminale di pagamento con carta di credito facile e veloce per i tuoi clienti elaborato da stripe.com.

L'installazione e la configurazione dello script richiedono meno di 5 minuti (tuttavia è necessario disporre di SSL e un account stripe.com).

Terminale di pagamento a strisce sul mercato Envato

4. Carrello AJAX per siti Web HTML con ordini e fatture

Symbiotic - AJAX Cart è un potente sistema che può essere integrato in nuovi / vecchi siti Web HTML per estendere le loro funzionalità come Carrello. Non è necessario utilizzare OpenCart o qualsiasi altro carrello per il tuo sito di e-commerce. Puoi creare il tuo sito e-commerce in pochi minuti usando questo sistema di carrello.

Carrello AJAX per siti Web HTML con ordini e fatture sul mercato Envato

5. Assumere un esperto su Envato Studio

Sia che utilizzi un particolare CMS come WordPress o Magento o desideri semplicemente avere un sito eCommerce con un carrello della spesa costruito da zero, ci sono molti sviluppatori esperti su Envato Studio che ti aiuteranno a un prezzo ragionevole. Quindi se sei bloccato, vai lì per l'aiuto di cui hai bisogno.

Fornitori di carrelli acquisti su Envato Studio

Questa è solo una piccola selezione dei carrelli PHP disponibili su Envato Market. Se queste opzioni non risolvono il tuo problema, o se preferisci farlo tu stesso, passiamo al processo di costruzione del tuo carrello con PHP e MySQL.

Anteprima Screencast

Passo 1

Iniziamo dando un'occhiata alla struttura delle cartelle:

Struttura

reset.css - puoi ottenere il reset da questo link
style.css - il nostro file css che useremo per modellare il nostro markup HTML
connection.php - il file che renderà la nostra connessione al database
index.php - il modello per il nostro carrello
cart.php - il file in cui sarà possibile modificare i nostri prodotti dal carrello (aggiungere, rimuovere)
products.php - la pagina di elenco dei prodotti

Passo 2

Inizieremo scrivendo il markup html e poi lo stile. Così aperto index.php e copia / incolla il codice qui sotto:

       Carrello della spesa

Come puoi vedere, la nostra pagina ha due colonne: la colonna principale e la barra laterale. Passiamo al CSS. Apri il file style.css e digita il codice qui sotto:

 body font-family: Verdana; font-size: 12px; colore: # 444;  #container width: 700px; margine: 150px auto; background-color: #eee; overflow: nascosto; / * Imposta overflow: nascosto per cancellare i float su #main e #sidebar * / padding: 15px;  #main width: 490px; fluttuare: a sinistra;  #sidebar width: 200px; fluttuare: a sinistra;

Ecco come dovrebbe apparire la pagina dei nostri prodotti ora:

Screencast completo

Passaggio 3

Prima di passare alla parte PHP / MySQL, dobbiamo creare il database. Quindi apri phpMyadmin e segui questi passaggi:

Vai al privilegi scheda, fare clic sul pulsante Aggiungi nuovo utente e utilizzare le seguenti impostazioni: Nome utente: tutorial; Ospite: localhost; Parola d'ordine: supersecretpassword ;. Adesso assicurati che siano impostati i privilegi globali; quindi passare al passaggio successivo.
Crea un nuovo database chiamato tutorial.
Crea una nuova tabella chiamata prodotti e imposta il numero di campi su 4. Compila ora questi campi in modo da avere: id_integer - assicurati che sia impostato su INT e contrassegnalo come PRIMARY (impostalo anche su auto_increment); nome - rendilo VARCHAR con una lunghezza di 100; descrizione - VARCHAR con una lunghezza di 250; prezzo - assicurati che sia impostato su DECIMAL (2,6)
Compila il tuo tavolo con alcuni prodotti di esempio

Per risparmiare tempo, ho esportato la tabella dei prodotti in modo da poter eseguire semplicemente la seguente query:

 CREATE TABLE SE NON ESISTE 'products' ('id_product' int (11) NOT NULL AUTO_INCREMENT, 'name' varchar (100) NOT NULL, 'description' varchar (250) NOT NULL, 'price' decimal (6,2) NOT NULL, PRIMARY KEY ('id_product')) ENGINE = MyISAM DEFAULT CHARSET = latin1 AUTO_INCREMENT = 7; INSERISCI I "prodotti" ("id_product", "name", "description", "price") VALORI (1, "Prodotto 1", "Alcune descrizioni casuali", "15 .00"), (2, "Prodotto 2", 'Alcune descrizioni casuali', '20 .00 '), (3,' Prodotto 3 ',' Alcune descrizioni casuali ', '50 .00'), (4, 'Prodotto 4', 'Alcune descrizioni casuali', '55 .00 '), ( 5, 'Prodotto 5', 'Alcune descrizioni casuali', '54 .00 '), (6,' Prodotto 6 ',' Alcune descrizioni casuali ', '34 .00');

Passaggio 4

Prima di passare all'estrazione dei dati dal database, farò il mio index.php un modello per l'elenco dei prodotti e il carrello. Quindi aggiungi il seguente codice all'inizio del tuo index.php pagina:

session_start () - questo è per un uso successivo; ci consentirà di utilizzare effettivamente le sessioni (è fondamentale che session_start venga scritto prima che altri dati vengano inviati al browser).
Nella seconda riga, includiamo la connection.php che stabilirà la connessione al database (ci occuperemo di questo in un secondo). Un'altra cosa: la differenza tra include e require è che se usi require e il file non può essere trovato, l'esecuzione dello script finirà. Se si utilizza "include", lo script continuerà a funzionare.
Invece di copiare l'intero codice html (il link al css, al js) per ogni file nel tuo sito, potresti semplicemente renderli tutti relativi a un singolo file. Quindi per prima cosa, sto controllando se c'è una variabile GET chiamata "page set". Se non lo è, sto creando una nuova variabile chiamata _pages. Se la variabile GET denominata pagine è impostata per prima, voglio assicurarmi che il file che sto per includere sia una pagina valida.

Per farlo funzionare, dobbiamo includere il file; aggiungi questa riga all'indice.php tra il div con l'id di "main":

Ora ecco il completo index.php abbiamo ora:

        Carrello della spesa

Creiamo la connessione a MySQL. Aperto connections.php e digita quanto segue:

Passaggio 5

Ora è il momento di scrivere il markup per la pagina dei prodotti. Quindi vai avanti e digita quanto segue:

 Elenco prodotti
   Nome  Descrizione  Prezzo  Azione  
  Prodotto 1  Qualche descrizione casuale  15 $ Aggiungi al carrello  
  Prodotto 2  Qualche descrizione casuale  25 $ Aggiungi al carrello

Nome	Descrizione	Prezzo	Azione
Prodotto 1	Qualche descrizione casuale	15 $	Aggiungi al carrello
Prodotto 2	Qualche descrizione casuale	25 $	Aggiungi al carrello

Diamo un'occhiata alla pagina:

Come puoi vedere, è piuttosto brutto. Quindi diamo uno stile aggiungendo questo extra CSS.

 a color: # 48577D; text-decoration: none; a: hover text-decoration: underline; h1, h2 margin-bottom: 15px h1 font-size: 18px; h2 font-size: 16px #main table width : 480px;  #main table th padding: 10px; background-color: # 48577D; colore: #fff; allineamento del testo: a sinistra;  #main table td padding: 5px;  #main table tr background-color: # d3dcf2;

Okay: diamo un altro sguardo ora:

Sembra molto meglio, non credi? Di seguito hai il completo style.css codice:

 body font-family: Verdana; font-size: 12px; colore: # 444;  a color: # 48577D; text-decoration: none; a: hover text-decoration: underline; h1, h2 margin-bottom: 15px h1 font-size: 18px; h2 font-size: 16px #container width: 700px; margine: 150px auto; background-color: #eee; padding: 15px; overflow: nascosto;  #main width: 490px; fluttuare: a sinistra;  #main table width: 480px;  #main table th padding: 10px; background-color: # 48577D; colore: #fff; allineamento del testo: a sinistra;  #main table td padding: 5px;  #main table tr background-color: # d3dcf2;  #sidebar width: 200px; fluttuare: a sinistra;

Passaggio 6

Prima di estrarre il prodotto dal database, rimuoviamo le ultime 2 righe di tabella dalla nostra tabella (l'abbiamo usata solo per vedere come sarà la nostra tabella). Rimuovilo:

  Prodotto 1 Qualche descrizione casuale 15 $ Aggiungi al carrello   Prodotto 2 Qualche descrizione casuale 25 $ Aggiungi al carrello

Grande! Ora nel posto in cui si trovavano le righe della tabella, digita il seguente codice PHP:

     $ "> Aggiungi al carrello

Quindi, per prima cosa usiamo SELECT per riattivare i prodotti, quindi eseguiamo il loop su ogni riga del database e lo facciamo eco alla pagina in una riga della tabella.
Puoi vedere che l'ancoraggio si collega alla stessa pagina (quando l'utente fa clic sul punto di ancoraggio, il prodotto viene aggiunto al carrello / sessione). Passiamo solo alcune variabili extra come l'id del prodotto.

Se passi su uno dei link aggiungi al carrello, puoi vedere, in fondo alla pagina, che viene passato l'id del prodotto.

Passaggio 7

Facciamo in modo che l'ancoraggio funzioni aggiungendo il seguente codice nella parte superiore della nostra pagina:

  1, "prezzo" => $ row_s ['prezzo']);  else $ message = "Questo ID prodotto non è valido!"; ?>

Se la variabile GET chiamata action è impostata e il suo valore è ADD, eseguiamo il codice.
Ci assicuriamo che l'ID passato attraverso la variabile GET sia un numero intero
Se l'ID del prodotto si trova nel carrello SESSION, incrementiamo la quantità di 1
Se l'id non è nella sessione, dobbiamo assicurarci che l'ID passato attraverso la variabile GET esista nel database. Se lo fa, prendiamo il prezzo e creiamo la sua sessione. In caso contrario, impostiamo una variabile chiamata messaggio che manterrà il nostro errore.

Controlliamo se la variabile del messaggio è impostata e la echo alla pagina (scrivi questo codice sotto il titolo della pagina H1):

 $ messaggio";?>

Qui puoi vedere il completo products.php pagina.

  1, "prezzo" => $ row_s ['prezzo']);  else $ message = "Questo ID prodotto non è valido!"; ?> Elenco prodotti
 $ messaggio";?>   Nome  Descrizione  Prezzo  Azione  
     $  "> Aggiungi al carrello

Nome	Descrizione	Prezzo	Azione
		$	"> Aggiungi al carrello

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

Passaggio 8

Torniamo al index.php e costruisci la barra laterale. Aggiungi il seguente codice:

 Carrello
  $ valore) $ sql. = $ id. ",";  $ sql = substr ($ sql, 0, -1). ") ORDER BY nome ASC"; $ Query = mysql_query ($ sql); while ($ row = mysql_fetch_array ($ query)) ?>  X 
  
 Vai al carrello Il tuo carrello è vuoto. Si prega di aggiungere alcuni prodotti.
";?>

Per prima cosa controlliamo se il carrello di sessione è impostato. In caso contrario, viene visualizzato il messaggio, avvisando l'utente che il carrello è vuoto.
Poi creiamo un mysql SELECT, ma stiamo selezionando solo i prodotti che esistono anche nella sessione. Per fare ciò, usiamo la funzione foreach. Quindi stiamo eseguendo il looping della sessione e stiamo aggiungendo l'id del prodotto a SELECT. Successivamente, stiamo usando la funzione substr per rimuovere l'ultima virgola da SELECT.
Alla fine forniamo i dati al browser.

Dai un'occhiata alle immagini qui sotto:

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

Passaggio 9

Finalmente, apri cart.php e inizia digitando il seguente codice:

 Visualizza il carrello
 Torna alla pagina dei prodotti   $ valore) $ sql. = $ id. ",";  $ sql = substr ($ sql, 0, -1). ") ORDER BY nome ASC"; $ Query = mysql_query ($ sql); $ TotalPrice = 0; while ($ row = mysql_fetch_array ($ query)) $ subtotal = $ _ SESSION ['cart'] [$ row ['id_product']] ['quantity'] * $ row ['price']; $ TotalPrice + = $ subtotale; ?>   Nome  Quantità  Prezzo  Articoli Prezzo  
    $  $  
   Prezzo totale:  
 
 
  
 
 Per rimuovere un oggetto, impostalo su 0.

Nome	Quantità	Prezzo	Articoli Prezzo
		$	$
Prezzo totale:

Il codice è simile a quello 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 modulo, ora viene visualizzata in una casella di input (in modo che possiamo modificare la quantità). Anche la tabella è racchiusa in un tag form. Per ottenere il prezzo totale degli articoli moltiplichiamo la quantità del prodotto specifico (dalla sessione) id con il suo prezzo. Questo è fatto in ogni ciclo.

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

Passaggio 10

L'ultimo passo che dobbiamo fare è far funzionare il modulo. Quindi aggiungi questo codice nella parte superiore della pagina cart.php.

 if (isset ($ _ POST ['submit'])) foreach ($ _ POST ['quantity'] come $ key => $ val) if ($ val == 0) unset ($ _ SESSION ['cart'] [tasto $]);  else $ _SESSION ['carrello'] [$ chiave] ['quantità'] = $ val;

Per prima cosa controlliamo se il modulo è stato inviato. Se è stato inviato e il valore dell'input era zero, annulliamo la sessione.
Se il valore è qualsiasi altro valore, impostiamo la quantità su quel valore.

Ecco il completo cart.php

  $ val) if ($ val == 0) unset ($ _ SESSION ['cart'] [$ key]);  else $ _SESSION ['carrello'] [$ chiave] ['quantità'] = $ val; ?> Visualizza il carrello
 Torna alla pagina dei prodotti.   $ valore) $ sql. = $ id. ",";  $ sql = substr ($ sql, 0, -1). ") ORDER BY nome ASC"; $ Query = mysql_query ($ sql); $ TotalPrice = 0; while ($ row = mysql_fetch_array ($ query)) $ subtotal = $ _ SESSION ['cart'] [$ row ['id_product']] ['quantity'] * $ row ['price']; $ TotalPrice + = $ subtotale; ?>   Nome  Quantità  Prezzo  Articoli Prezzo  
    $  $  
   Prezzo totale:  
 
 
  
 
 Per rimuovere un articolo, imposta la sua quantità su 0.

Nome	Quantità	Prezzo	Articoli Prezzo
		$	$
Prezzo totale:

Spero che questo tutorial ti sia piaciuto. Se hai domande, assicurati di guardare il video tutorial più approfondito!

Codice