Bouw een winkelwagen met PHP en MySQL

Voor de screencast + tutorial van deze week leren we je hoe je je eigen winkelwagentje kunt bouwen met PHP en MySQL. Zoals je zult zien, is het niet zo moeilijk als je misschien had gedacht.

Premium-opties

Als u op zoek bent naar een snelle, kant-en-klare oplossing, kunt u kiezen uit meer dan 50 PHP-winkelwagentjessjablonen op Envato Market. Hier is een korte blik op een paar van hen.

1. LivelyCart - een JQuery PHP Store / Shop

Dit is een eenvoudig te gebruiken, aanpasbaar, door PHP / MySQL aangedreven winkelwagentje. Het is uitgerust met twee afrekenopties met PayPal en Verzend bestelling per e-mail. Je kunt beide of een van beide gebruiken.

LivelyCart - een JQuery PHP Store / Shop op Envato Market

2. Universele digitale winkel

Universal Digital Shop is een krachtig script, waarmee u digitale producten rechtstreeks op uw website kunt verkopen. Het behandelt betalingen via meerdere betalingsgateways (PayPal, Payza / AlertPay, Skrill / Moneybookers, Authorize.Net, InterKassa, EgoPay, Perfect Money, BitPay, Blockchain.info en Stripe) en kan eenvoudig in elke webpagina worden geïntegreerd.

Met deze widget hoeft u geen ingewikkelde winkelwagentjes te installeren en hun ontwerp te maken dat past bij uw website. Universal Digital Shop is de gemakkelijkste manier om digitale producten te distribueren en geld te verdienen met een website.

Universal Digital Shop op Envato Market

3. Stripe betaalterminal

Met dit script kunt u een snelle en eenvoudige creditcardterminal voor uw klanten laten verwerken door stripe.com.

Installatie en configuratie van het script duurt minder dan 5 minuten (u moet echter wel een SSL- en een stripe.com-account hebben).

Stripe Payment Terminal op Envato Market

4. AJAX-winkelwagentje voor HTML-websites met bestellingen en facturen

Symbiotic - AJAX Winkelwagen is een krachtig systeem dat kan worden geïntegreerd in nieuwe / oude HTML-websites om hun functionaliteit als een winkelwagen uit te breiden. U hoeft OpenCart of een andere winkelwagen niet te gebruiken voor uw e-commerce website. U kunt binnen enkele minuten uw eigen e-commerce website maken met behulp van dit wagensysteem.

AJAX-kar voor HTML-websites met bestellingen en facturen op Envato Market

5. Huur een expert in Envato Studio

Of u nu een bepaalde CMS zoals WordPress of Magento gebruikt of gewoon een eCommerce-site wilt hebben met een winkelwagentje dat helemaal opnieuw is opgebouwd, er zijn tal van deskundige ontwikkelaars op Envato Studio die u voor een redelijke prijs zullen helpen. Dus als je vastzit, ga dan naar daar voor de hulp die je nodig hebt.

Leveranciers van winkelwagentje op Envato Studio

Dit is slechts een kleine selectie van de PHP-winkelwagentjes die beschikbaar zijn op Envato Market. Als die opties je probleem niet oplossen, of als je het liever zelf doet, gaan we verder met het proces om je eigen winkelwagentje samen te stellen met PHP en MySQL.

Screencast Preview

Stap 1

Laten we beginnen met het bekijken van de mappenstructuur:

Structuur

reset.css - je kunt de reset krijgen via deze link
style.css - ons eigen CSS-bestand dat we zullen gebruiken om onze HTML-markup te stylen
connection.php - het bestand dat onze databaseverbinding tot stand zal brengen
index.php - de sjabloon voor onze winkelwagen
cart.php - het bestand waar we onze producten uit de winkelwagen kunnen veranderen (toevoegen, verwijderen)
products.php - de lijst met producten

Stap 2

We beginnen met het schrijven van de html-markup en stylen het vervolgens. Zo open index.php en kopieer en plak de onderstaande code:

       Winkelwagen

Zoals u kunt zien, heeft onze pagina twee kolommen: de hoofdkolom en de zijbalk. Laten we naar de CSS gaan. Open het bestand style.css en typ de onderstaande code:

 body font-family: Verdana; lettergrootte: 12px; kleur: # 444;  #container width: 700px; marge: 150 px auto; achtergrondkleur: #eee; overloop verborgen; / * Overloop instellen: verborgen om de drijvers op #main en #sidebar * / opvulling: 15px te wissen;  #main width: 490px; zweven: links;  #sidebar width: 200px; zweven: links;

Dit is hoe onze productpagina er nu zou moeten uitzien:

Volledige screencast

Stap 3

Voordat we verdergaan met het PHP / MySQL-deel, moeten we de database maken. Dus open phpMyadmin en volg deze stappen:

Ga naar de privileges Klik op het tabblad, klik op de knop Nieuwe gebruiker toevoegen en gebruik de volgende instellingen: Gebruikersnaam: zelfstudie; Gastheer: localhost; Wachtwoord: supersecretpassword ;. Zorg er nu voor dat de algemene privileges zijn ingesteld; ga dan verder met de volgende stap.
Maak een nieuwe database met de naam tutorials.
Maak een nieuwe tabel met de naam producten en stel het aantal velden in op 4. Vul nu deze velden in, zodat u: id_integer - zorg ervoor dat het op INT staat en markeer het als PRIMAIR (zet het ook op auto_increment); naam - maak het VARCHAR met een lengte van 100; Omschrijving - VARCHAR met een lengte van 250; prijs - zorg ervoor dat het op DECIMAL staat (2,6)
Bevolk uw tafel met enkele voorbeeldproducten

Om wat tijd te besparen, heb ik mijn productentabel geëxporteerd, zodat u eenvoudig de volgende query kunt uitvoeren:

 CREËER TAFEL INDIEN NIET BESTAAT 'producten' ('id_product' int (11) NOT NULL AUTO_INCREMENT, 'naam' 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; INSERT INTO 'producten' ('id_product', 'name', 'description', 'price') VALUES (1, 'Product 1', 'Some random description', '15 .00 '), (2,' Product 2 ', 'Enkele willekeurige beschrijving', '20 .00 '), (3,' Product 3 ',' Enkele willekeurige beschrijving ', '50 .00'), (4, 'Product 4', 'Enkele willekeurige beschrijving', '55 .00 '), ( 5, 'Product 5', 'Some random description', '54 .00 '), (6,' Product 6 ',' Some random description ', '34 .00');

Stap 4

Voordat we overgaan tot het extraheren van gegevens uit de database, maak ik mijn index.php een sjabloon voor de productlijst en winkelwagen. Dus voeg de volgende code toe aan de bovenkant van uw index.php pagina:

session_start () - dit is voor later gebruik; het zal ons toelaten om daadwerkelijk sessies te gebruiken (het is van vitaal belang dat de session_start wordt geschreven voordat andere gegevens naar de browser worden verzonden).
Op de tweede regel nemen we de connection.php op die de verbinding met de database tot stand brengt (we zullen dit in een seconde verwerken). Nog een ding: het verschil tussen opnemen en vereisen is dat als u gebruik van het vereiste en het bestand niet kan worden gevonden, de uitvoering van het script zal eindigen. Als u "include" gebruikt, blijft het script werken.
In plaats van de hele HTML-code (de link naar de CSS naar de JS) voor elk bestand in uw site te kopiëren, kunt u ze allemaal relatief maken ten opzichte van één bestand. Dus ik controleer eerst of er een GET-variabele is genaamd "paginaset". Als dat niet het geval is, maak ik een nieuwe variabele genaamd _pages. Als de variabele GET genaamd pagina's als eerste wordt ingesteld, wil ik zeker weten dat het bestand dat ik ga toevoegen een geldige pagina is.

Om dit te laten werken, moeten we het bestand opnemen; voeg deze regel toe aan de index.php tussen de div met de id van "main":

Nu is hier het complete index.php we hebben nu:

        Winkelwagen

Laten we de verbinding met MySQL maken. Open connections.php en typ het volgende:

Stap 5

Nu is het tijd om de markup voor de productenpagina te schrijven. Dus ga je gang open het en typ het volgende:

 Product lijst
   Naam  Omschrijving  Prijs  Actie  
  Product 1  Een willekeurige beschrijving  15 $ Voeg toe aan winkelmandje  
  Product 2  Een willekeurige beschrijving  25 $ Voeg toe aan winkelmandje

Naam	Omschrijving	Prijs	Actie
Product 1	Een willekeurige beschrijving	15 $	Voeg toe aan winkelmandje
Product 2	Een willekeurige beschrijving	25 $	Voeg toe aan winkelmandje

Laten we de pagina eens bekijken:

Zoals je kunt zien, is het behoorlijk lelijk. Dus laten we het stijlen door deze extra CSS toe te voegen.

 een color: # 48577D; tekst-decoratie: geen; a: hover text-decoration: onderstrepen; h1, h2 margin-bottom: 15px h1 font-size: 18px; h2 font-size: 16px #hoofdtabel width : 480px;  #hoofdtabel th opvulling: 10px; achtergrondkleur: # 48577D; kleur: #fff; text-align: left;  #hoofdtabel td opvulling: 5px;  #hoofdtabel tr background-color: # d3dcf2;

Oké: laten we nu nog een keer kijken:

Ziet er veel beter uit, vind je niet? Hieronder heb je het complete style.css code:

 body font-family: Verdana; lettergrootte: 12px; kleur: # 444;  a color: # 48577D; tekst-decoratie: geen; a: hover text-decoration: onderstrepen; h1, h2 margin-bottom: 15px h1 font-size: 18px; h2 font-size: 16px #container width: 700px; marge: 150 px auto; achtergrondkleur: #eee; padding: 15px; overloop verborgen;  #main width: 490px; zweven: links;  # hoofdtabel width: 480px;  #hoofdtabel th opvulling: 10px; achtergrondkleur: # 48577D; kleur: #fff; text-align: left;  #hoofdtabel td opvulling: 5px;  #hoofdtabel tr background-color: # d3dcf2;  #sidebar width: 200px; zweven: links;

Stap 6

Voordat we het product uit de database halen, verwijderen we de laatste twee tabelrijen uit onze tabel (we hebben deze alleen gebruikt om te zien hoe onze tabel eruit zal zien). Verwijder dit:

  Product 1 Een willekeurige beschrijving 15 $ Voeg toe aan winkelmandje   Product 2 Een willekeurige beschrijving 25 $ Voeg toe aan winkelmandje

Super goed! Nu op de plaats waar de rijen van de tabel waren, typt u de volgende PHP-code:

     $ "> Voeg toe aan winkelwagen

Dus, eerst gebruiken we SELECT om de producten op te halen, dan doorlopen we elke rij uit de database en echoeren het naar de pagina in een tabelrij.
U kunt zien dat het anker naar dezelfde pagina linkt (wanneer de gebruiker op het anker klikt, wordt het product toegevoegd aan de winkelwagen / sessie). We geven alleen wat extra variabelen door, zoals de id van het product.

Als u een van de koppelingen voor toevoegen aan winkelwagentje plaatst, ziet u onderaan de pagina dat de id van het product is doorgegeven.

Stap 7

Laten we dat anker laten werken door de volgende code boven aan onze pagina toe te voegen:

  1, "prijs" => $ rij_s ['prijs']);  else $ message = "Dit product-id is ongeldig!"; ?>

Als de variabele GET genaamd action is ingesteld en de waarde ADD is, voeren we de code uit.
We zorgen ervoor dat het ID dat door de GET-variabele wordt geleid, een geheel getal is
Als de ID van het product in de SESSION van de winkelwagen staat, verhogen we de hoeveelheid ervan met 1
Als de id zich niet in de sessie bevindt, moeten we ervoor zorgen dat de ID die door de GET-variabele is gepasseerd, in de database bestaat. Als dat zo is, pakken we de prijs en maken we zijn sessie. Als dit niet het geval is, stellen we een variabele in met de naam message die onze fout zal bevatten.

Laten we controleren of die berichtvariabele ingesteld is en echo naar de pagina (typ deze code onder de titel van de H1-pagina):

 $ message";?>

Hier kun je het complete zien products.php pagina.

  1, "prijs" => $ rij_s ['prijs']);  else $ message = "Dit product-id is ongeldig!"; ?> Product lijst
 $ message";?>   Naam  Omschrijving  Prijs  Actie  
     $  "> Voeg toe aan winkelwagen

Naam	Omschrijving	Prijs	Actie
		$	"> Voeg toe aan winkelwagen

Hier is de foutmelding als de id van het product ongeldig is

Stap 8

Laten we teruggaan naar de index.php en bouw de zijbalk. Voeg de volgende code toe:

 kar
  $ waarde) $ sql. = $ id. ",";  $ sql = substr ($ sql, 0, -1). ") BESTELLING BY naam ASC"; $ Vraag = mysql_query ($ sql); while ($ row = mysql_fetch_array ($ query)) ?>  X 
  
 Ga naar winkelwagen Uw winkelwagen is leeg. Voeg enkele producten toe.
";?>

Eerst controleren we of de sessie-kar is ingesteld. Als dit niet het geval is, wordt het bericht weergegeven en wordt de gebruiker gewaarschuwd dat het winkelwagentje leeg is.
Vervolgens maken we een mysql SELECT, maar we selecteren alleen de producten die in de sessie bestaan. Om dit te bereiken, gebruiken we de functie foreach. Dus we doorlopen de sessie en voegen de product-ID toe aan SELECT. Vervolgens gebruiken we de substr-functie om de laatste komma uit de SELECT te verwijderen.
Uiteindelijk voeren wij de gegevens naar de browser uit.

Bekijk de afbeeldingen hieronder:

Omdat de index.php een sjabloon is voor alle bestanden, is de zijbalk zichtbaar in de cart.php te. Is dat niet cool??!

Stap 9

Eindelijk, open cart.php en begin met het typen van de volgende code:

 Bekijk winkelwagen
 Ga terug naar de productenpagina   $ waarde) $ sql. = $ id. ",";  $ sql = substr ($ sql, 0, -1). ") BESTELLING BY naam ASC"; $ Vraag = mysql_query ($ sql); $ Totaalprijs = 0; while ($ row = mysql_fetch_array ($ query)) $ subtotal = $ _ SESSION ['winkelwagen'] [$ row ['id_product']] ['quantity'] * $ row ['price']; $ Totaalprijs + = $ subtotaal; ?>   Naam  Aantal stuks  Prijs  Items Prijs  
    $  $  
   Totale prijs:  
 
 
  
 
 Als u een item wilt verwijderen, stelt u de hoeveelheid in op 0.

Naam	Aantal stuks	Prijs	Items Prijs
		$	$
Totale prijs:

De code is vergelijkbaar met die van index.php en products.php, dus ik ga niet alles opnieuw uitleggen. U zou moeten opmerken dat in plaats van de hoeveelheid in een formulier weer te geven, deze nu wordt weergegeven in een invoervak (zodat we de hoeveelheid kunnen wijzigen). De tabel is ook verpakt in een formuletag. Om de totale prijs van de artikelen te krijgen, vermenigvuldigen we de hoeveelheid van het specifieke product (van de sessie) met de prijs. Dit gebeurt in elke lus.

NOTITIE: De invoer is een array, de sleutel is de id van het product en de hoeveelheid is de hoeveelheidwaarde.

Stap 10

De laatste stap die we moeten doen, is het formulier laten werken. Dus voeg deze code toe aan de bovenkant van de pagina cart.php.

 if (isset ($ _ POST ['submit'])) foreach ($ _ POST ['quantity'] als $ key => $ val) if ($ val == 0) unset ($ _ SESSION ['winkelwagen'] [$ key]);  else $ _SESSION ['winkelwagen'] [$ -code] ['hoeveelheid'] = $ val;

Eerst controleren we of het formulier is ingediend. Als het werd ingediend en de waarde van de invoer nul was, zetten we die sessie af.
Als de waarde een andere waarde is, stellen we in plaats hiervan de hoeveelheid in op die waarde.

Hier is het complete cart.php

  $ val) if ($ val == 0) unset ($ _ SESSION ['winkelwagen'] [$ -code]);  else $ _SESSION ['winkelwagen'] [$ -code] ['hoeveelheid'] = $ val; ?> Bekijk winkelwagen
 Ga terug naar de productenpagina.   $ waarde) $ sql. = $ id. ",";  $ sql = substr ($ sql, 0, -1). ") BESTELLING BY naam ASC"; $ Vraag = mysql_query ($ sql); $ Totaalprijs = 0; while ($ row = mysql_fetch_array ($ query)) $ subtotal = $ _ SESSION ['winkelwagen'] [$ row ['id_product']] ['quantity'] * $ row ['price']; $ Totaalprijs + = $ subtotaal; ?>   Naam  Aantal stuks  Prijs  Items Prijs  
    $  $  
   Totale prijs:  
 
 
  
 
 Om een item te verwijderen, stelt u de hoeveelheid in op 0.

Naam	Aantal stuks	Prijs	Items Prijs
		$	$
Totale prijs:

Ik hoop dat je deze tutorial leuk vond. Als je vragen hebt, bekijk dan de meer diepgaande video-zelfstudie!

Code