Construiți un coș de cumpărături cu PHP și MySQL

Pentru programul de screencast + tutorial din această săptămână, vă vom învăța cum să vă construiți propriul coș de cumpărături cu PHP și MySQL. După cum veți găsi, nu este chiar atât de dificil cum ați fi crezut.

Opțiuni premium

Dacă sunteți în căutarea unei soluții rapide, gata, există mai mult de 50 de scripturi de coș de cumpărături PHP de la care puteți alege de pe Envato Market. Iată o scurtă privire la câteva dintre ele.

1. LivelyCart - un magazin / magazin JQuery PHP

Acesta este un coș de cumpărături ușor de utilizat, personalizabil, bazat pe PHP / MySQL. Este echipat cu două opțiuni de checkout folosind PayPal și Trimiteți comanda prin e-mail. Puteți utiliza ambele sau oricare dintre ele.

LivelyCart - un magazin / magazin JQuery pentru PHP pe Envato Market

2. Magazin universal digital

Universal Digital Shop este un script puternic, care vă permite să vindeți produse digitale direct pe site-ul dvs. Acesta gestionează plățile prin intermediul mai multor gateway-uri de plată (PayPal, Payza / AlertPay, Skrill / Moneybookers, Autorize.Net, InterKassa, EgoPay, Perfect Money, BitPay, Blockchain.info și Stripe).

Cu acest widget nu trebuie să instalați coșuri de cumpărături complicate și să creați designul acestora pentru a se potrivi cu site-ul dvs. Web. Universal Digital Shop este cel mai simplu mod de a distribui produse digitale și de a genera bani dintr-un site web.

Magazin universal digital pe piața Envato

3. Terminalul de plăți pentru prăjituri

Acest script vă permite să aveți un terminal de plată rapid și simplu pentru clienții dvs., procesat de stripe.com.

Instalarea și configurarea scriptului durează mai puțin de 5 minute (totuși trebuie să aveți un cont SSL și stripe.com).

Stripe Terminal de plată pe Envato Market

4. AJAX Cart pentru site-uri HTML cu comenzi și facturi

Symbiotic - AJAX Cart este un sistem puternic care poate fi integrat pe site-urile web noi / vechi HTML pentru a extinde funcționalitatea lor ca o coș. Nu aveți nevoie să utilizați OpenCart sau orice alt coș pentru site-ul dvs. de comerț electronic. Puteți crea propriul dvs. site de comerț electronic în câteva minute utilizând acest sistem Cart.

AJAX Cart pentru site-uri HTML cu comenzi și facturi pe Envato Market

5. Închiriați un expert pe Envato Studio

Fie că utilizați un anumit CMS cum ar fi WordPress sau Magento sau doriți doar să aveți un site de eCommerce cu un coș de cumpărături construit de la zero, există o mulțime de dezvoltatori de experți pe Envato Studio care vă vor ajuta la un preț rezonabil. Deci, dacă sunteți blocați, mergeți acolo pentru ajutorul de care aveți nevoie.

Comercianți de coș de cumpărături pe Envato Studio

Aceasta este doar o mică selecție a căruțelor de cumpărături PHP disponibile pe Envato Market. Dacă aceste opțiuni nu vă rezolvă problema sau dacă preferați să o faceți singuri, hai să trecem la procesul de construire a propriului coș de cumpărături cu PHP și MySQL.

Previzualizare ecran

Pasul 1

Să începem să aruncăm o privire asupra structurii dosarelor:

Structura

reset.css - puteți obține resetarea de la această legătură
style.css - propriul nostru fișier css pe care îl vom folosi pentru a ne modela marcajul HTML
connection.php - fișierul care va face conexiunea bazei noastre de date
index.php - șablonul pentru coșul nostru de cumpărături
cart.php - fișierul în care se vor putea schimba produsele din cărucior (adăugați, eliminați)
products.php - pagina de înscriere a produselor

Pasul 2

Vom începe prin scrierea marcajului html și apoi stilul. Atât de deschis index.php și copiați / inserați codul de mai jos:

       Cărucior de cumpărături

După cum puteți vedea, pagina noastră are două coloane: coloana principală și bara laterală. Să trecem la CSS. Deschideți fișierul style.css și introduceți codul de mai jos:

 corp font-family: Verdana; font-size: 12px; culoare: # 444;  #container width: 700px; margine: 150 pixeli auto; fundal-culoare: #eee; overflow: ascuns; / * Setare overflow: ascuns pentru a șterge plutirile pe #main și #sidebar * / padding: 15px;  #main width: 490px; plutește la stânga;  #sidebar width: 200px; plutește la stânga;

Iată cum ar trebui să se uite acum pagina noastră de produse:

Full Screencast

Pasul 3

Înainte de a trece la partea PHP / MySQL, trebuie să creați baza de date. Deci, deschideți phpMyadmin și urmați acești pași:

Mergeți la privilegii , dați clic pe butonul de adăugare a unui nou utilizator și utilizați următoarele setări: Nume de utilizator: tutorial; Gazdă: gazdă locală; Parola: supersecretpassword ;. Acum asigurați-vă că sunt setate privilegiile globale; apoi treceți la pasul următor.
Creați o nouă bază de date numită Tutoriale.
Creați un nou tabel numit produse și setați numărul de câmpuri la 4. Acum populează acele câmpuri astfel încât să aveți: id_integer - asigurați-vă că este setat la INT și marcați-l ca PRIMARY (de asemenea, setați-l la auto_increment); Nume - face VARCHAR cu o lungime de 100; Descriere - VARCHAR cu o lungime de 250; Preț - asigurați-vă că este setat la DECIMAL (2,6)
Populați masa dvs. cu unele produse de probă

Pentru a salva ceva timp, mi-am exportat tabelul de produse pentru a putea rula urmatoarea interogare:

 CREATE TABLE DACA NU EXISTĂ "produse" ('id_product' int (11) NOT NULL AUTO_INCREMENT, 'nume' varchar (100) NOT NULL, 'description' varchar (250) NULL, KEY PRIMARY ('id_product')) MOTOR = MyISAM DEFAULT CHARSET = latin1 AUTO_INCREMENT = 7; INSERT INTO "produse" ("id_product", "nume", "descriere", "preț") VALORI (1, "Produs 1", " "O descriere aleatorie", "20 .00"), (3, "Produsul 3", "Unele descrieri aleatorii", "50 .00"), 5, "Produsul 5", "Unele descrieri aleatorii", "54 .00"), (6, "Produsul 6", "Unele descrieri aleatorii", "34 .00");

Pasul 4

Înainte de a ne muta la extragerea datelor din baza de date, o să-mi fac index.php un șablon pentru lista de produse și cărucior. Deci, adăugați următorul cod în partea de sus a paginii index.php pagină:

session_start () - aceasta este pentru o utilizare ulterioară; ne va permite să folosim efectiv sesiunile (este vital ca sesiunea_start să fie scrisă înainte ca orice alt tip de date să fie trimisă browserului).
Pe linia a doua, vom include link-ul.php care va stabili conexiunea cu baza de date (vom aborda acest lucru într-o secundă). Încă un lucru: diferența dintre includerea și solicitarea este că dacă utilizați cerința și fișierul nu poate fi găsit, executarea scriptului se va încheia. Dacă utilizați "include", scriptul va continua să funcționeze.
În loc să copiați întregul cod html (linkul către css, la js) pentru fiecare fișier de pe site-ul dvs., puteți să-i faceți pe toate în raport cu un singur fișier. Deci, mai întâi, verific dacă există o variabilă GET numită "set de pagini". Dacă nu este, creez o nouă variabilă numită _pages. Dacă variabila GET numită pagini este setată prima, vreau să fiu sigur că fișierul pe care o voi include este o pagină validă.

Pentru a face acest lucru, trebuie să includeți fișierul; adăugați această linie la index.php între div cu id-ul "principal":

Acum, aici este completă index.php avem acum:

        Cărucior de cumpărături

Să creăm conexiunea cu MySQL. Deschis connections.php și tastați următoarele:

Pasul 5

Acum este momentul să scrieți marcajul pentru pagina de produse. Așa că deschideți-l și tastați următoarele:

 Lista de produse
   Nume  Descriere  Preț  Acțiune  
  Produsul 1  Unele descrieri aleatorii  15 $ Adaugă în coș  
  Produsul 2  Unele descrieri aleatorii  25 $ Adaugă în coș

Nume	Descriere	Preț	Acțiune
Produsul 1	Unele descrieri aleatorii	15 $	Adaugă în coș
Produsul 2	Unele descrieri aleatorii	25 $	Adaugă în coș

Să aruncăm o privire la pagină:

După cum puteți vedea, este destul de urât. Deci, haideți să-l stil prin adăugarea acestui CSS suplimentar.

 a culoare: # 48577D; text-decorare: nici unul; a: hover text-decorare: subliniere; h1, h2 margin-bottom: 15px h1 font-size: 18px; : 480px;  #main masă th padding: 10px; fundal-culoare: # 48577D; culoare: #fff; text-aliniere: stânga;  #main table td padding: 5px;  #main table tr fundal-culoare: # d3dcf2;

Bine: să ne mai uităm acum:

Se pare mult mai bine, nu crezi? Mai jos aveți completă style.css cod:

 corp font-family: Verdana; font-size: 12px; culoare: # 444;  a culoare: # 48577D; text-decorare: nici unul; a: hover text-decorare: subliniere; h1, h2 font-size: 18px 700 de pixeli; margine: 150 pixeli auto; fundal-culoare: #eee; padding: 15px; overflow: ascuns;  #main width: 490px; plutește la stânga;  #main table [width: 480px;  #main masă th padding: 10px; fundal-culoare: # 48577D; culoare: #fff; text-aliniere: stânga;  #main table td padding: 5px;  #main table tr fundal-culoare: # d3dcf2;  #sidebar width: 200px; plutește la stânga;

Pasul 6

Înainte de extragerea produsului din baza de date, să eliminăm ultimele 2 rânduri de masă din tabelul nostru (am folosit-o doar pentru a vedea cum ar arata masa noastră). Înlătură asta:

  Produsul 1 Unele descrieri aleatorii 15 $ Adaugă în coș   Produsul 2 Unele descrieri aleatorii 25 $ Adaugă în coș

Grozav! Acum, în locul unde erau rândurile de tabelă, tastați următorul cod PHP:

     $ "> Adaugă în coș

Așadar, mai întâi folosim SELECT pentru a retriva produsele, apoi buclele prin fiecare rând din baza de date și ecou-l la pagina într-un rând de tabel.
Puteți vedea că ancora leagă aceeași pagină (când utilizatorul dă click pe ancora produsul pe care îl adaugă la coș / sesiune). Trecem doar câteva variabile suplimentare, cum ar fi id-ul produsului.

Dacă plasați cursorul pe unul dintre legăturile adăugați în coș, puteți vedea, în partea de jos a paginii, că este trecut numele produsului.

Pasul 7

Să facem ancora să funcționeze prin adăugarea următorului cod în partea de sus a paginii noastre:

  1, "preț" => $ row_s ['price']);  altceva $ message = "Acest id de produs este nevalid!"; ?>

Dacă variabila GET numită acțiune este setată și valoarea ei este ADD, executăm codul.
Ne asigurăm că idul trecut prin variabila GET este un număr întreg
Dacă id-ul produsului se află în coșul SESSION, noi doar creștem cantitatea acestuia cu 1
Dacă id-ul nu este în sesiune, trebuie să ne asigurăm că ID-ul trecut prin variabila GET există în baza de date. Dacă da, luăm prețul și creăm sesiunea. În caz contrar, vom seta o variabilă numită mesaj care ne va păstra eroarea.

Să verificăm dacă variabila mesajului este setată și să-i răspundeți la pagină (introduceți acest cod sub titlul paginii H1):

 $ mesaj";>>

Aici puteți vedea completă products.php pagină.

  1, "preț" => $ row_s ['price']);  altceva $ message = "Acest id de produs este nevalid!"; ?> Lista de produse
 $ mesaj";>>   Nume  Descriere  Preț  Acțiune  
     $  "> Adaugă în coș

Nume	Descriere	Preț	Acțiune
		$	"> Adaugă în coș

Iată mesajul de eroare dacă id-ul produsului este nevalid

Pasul 8

Să ne întoarcem la index.php și să construiască bara laterală. Adăugați următorul cod:

 Cart
  valoare $) $ sql. = $ id. ",";  $ sql = substr ($ sql, 0, -1).) ORDER BY ASC nume "; $ Query = mysql_query ($ sql); în timp ce ($ row = mysql_fetch_array ($ query)) ?>  X 
  
 Du-te în căruță Cosul dvs. este gol. Adăugați câteva produse.
";>>

Mai întâi verificăm dacă setul de coș este setat. Dacă nu, afișăm mesajul, avertizând utilizatorul că carul este gol.
Apoi vom face un mysql SELECT, dar vom selecta numai produsele care există și în sesiune. Pentru a realiza acest lucru, folosim funcția foreach. Deci, suntem în buclă prin sesiune și adăugăm ID-ul produsului la SELECT. Apoi, folosim funcția substr pentru a elimina ultima virgulă din SELECT.
În final, trimitem datele către browser.

Uitați-vă la imaginile de mai jos:

Deoarece index.php este un șablon pentru toate fișierele, bara laterală va fi vizibilă în cart.php de asemenea. Nu este așa de cool?!

Pasul 9

În cele din urmă, deschisă cart.php și începeți prin tastarea următorului cod:

 Vizualizare coș
 Reveniți la pagina de produse   valoare $) $ sql. = $ id. ",";  $ sql = substr ($ sql, 0, -1).) ORDER BY ASC nume "; $ Query = mysql_query ($ sql); $ Totalprice = 0; în timp ce ($ row = mysql_fetch_array ($ interogare)) $ subtotal = $ _ SESSION ['cart'] [$ row ['id_product']] [$]; $ Totalprice + = $ subtotal; ?>   Nume  Cantitate  Preț  Preț pentru articole  
    $  $  
   Pretul total:  
 
 
  
 
 Pentru a elimina un element, setați cantitatea la 0.

Nume	Cantitate	Preț	Preț pentru articole
		$	$
Pretul total:

Codul este similar cu cel din index.php și products.php, deci nu voi mai explica totul. Ar trebui să observați că în loc să afișați cantitatea într-o formă, acum este afișată într-o casetă de introducere (pentru a putea schimba cantitatea). De asemenea, tabelul este înfășurat într-o etichetă de formă. Pentru a obține prețul total al articolelor, se multiplică cantitatea produsului specific (din sesiune) id cu prețul lui. Acest lucru se face în fiecare buclă.

NOTĂ: Intrarea este o matrice, cheia este id-ul produsului, iar cantitatea este valoarea cantitatii.

Pasul 10

Ultimul pas pe care trebuie să-l facem este ca formularul să funcționeze. Deci, adăugați acest cod în partea superioară a paginii cart.php.

 dacă ($ _ = SESSION ['cart']) $ (= $) =  [tasta $]);  altceva $ _SESSION ['cart'] [$ key] ['quantity'] = $ val;

Mai întâi verificăm dacă formularul a fost trimis. Dacă a fost trimis și valoarea inputului a fost zero, am dezactivat acea sesiune.
Dacă valoarea este orice altă valoare, setăm cantitatea la acea valoare.

Aici este completă cart.php

  $ val) if ($ val == 0) unset ($ _ SESSION ['cart'] [$ cheie]);  altceva $ _SESSION ['cart'] [$ key] ['quantity'] = $ val; ?> Vizualizare coș
 Du-te înapoi la pagina de produse.   valoare $) $ sql. = $ id. ",";  $ sql = substr ($ sql, 0, -1).) ORDER BY ASC nume "; $ Query = mysql_query ($ sql); $ Totalprice = 0; în timp ce ($ row = mysql_fetch_array ($ interogare)) $ subtotal = $ _ SESSION ['cart'] [$ row ['id_product']] [$]; $ Totalprice + = $ subtotal; ?>   Nume  Cantitate  Preț  Preț pentru articole  
    $  $  
   Pretul total:  
 
 
  
 
 Pentru a elimina un element, setați cantitatea la 0.

Nume	Cantitate	Preț	Preț pentru articole
		$	$
Pretul total:

Sper că ți-a plăcut acest tutorial. Dacă aveți întrebări, asigurați-vă că vizionați un tutorial video mai aprofundat!

Cod