Bygg en handlekurv med PHP og MySQL

For denne ukens screencast + opplæring, skal vi lære deg hvordan du bygger din egen handlekurv med PHP og MySQL. Som du finner, er det ikke så vanskelig som du kanskje har trodd.

Premium-alternativer

Hvis du leter etter en rask, ferdig løsning, er det mer enn 50 PHP handlekurvskript å velge mellom på Envato Market. Her er en rask titt på noen av dem.

1. LivelyCart - en JQuery PHP Store / Shop

Dette er en brukervennlig, tilpassbar PHP / MySQL-drevet handlekurv. Den er utstyrt med to kasseringsalternativer ved hjelp av PayPal og Send inn bestilling via e-post. Du kan bruke begge eller en av dem.

LivelyCart - en JQuery PHP Store / Shop på Envato Market

2. Universal Digital Shop

Universal Digital Shop er et kraftig skript som lar deg selge digitale produkter direkte på nettstedet ditt. Den håndterer betalinger via flere betalings gateways (PayPal, Payza / AlertPay, Skrill / Moneybookers, Authorize.Net, InterKassa, EgoPay, Perfect Money, BitPay, Blockchain.info og Stripe) og kan enkelt integreres i en hvilken som helst nettside.

Med denne widgeten trenger du ikke å installere kompliserte handlekurver og lage deres design for å matche nettstedet ditt. Universal Digital Shop er den enkleste måten å distribuere digitale produkter og tjene penger på et nettsted.

Universal Digital Shop på Envato Market

3. Stripe Betaling Terminal

Dette skriptet lar deg få en rask og enkel kredittkortbetalingsterminal for dine klienter behandlet av stripe.com.

Installasjon og konfigurasjon av skriptet tar mindre enn 5 minutter (men du må ha SSL og en stripe.com-konto).

Stripe Payment Terminal på Envato Market

4. AJAX-handlevogn for HTML-nettsteder med ordre og fakturaer

Symbiotic - AJAX Cart er et kraftig system som kan integreres til nye / gamle HTML-nettsteder for å forlenge funksjonaliteten som en handlekurv. Du trenger ikke å bruke OpenCart eller annen vogn til din e-handelswebside. Du kan lage ditt eget e-handelsnettsted i løpet av få minutter ved hjelp av dette Cart-systemet.

AJAX-handlevogn for HTML-sider med ordre og fakturaer på Envato Market

5. Lei en ekspert på Envato Studio

Enten du bruker et bestemt CMS som WordPress eller Magento, eller du bare vil ha et e-handelsområde med en handlekurv bygget fra begynnelsen, er det mange ekspertutviklere på Envato Studio som vil hjelpe deg til en fornuftig pris. Så hvis du sitter fast, hodet der for hjelpen du trenger.

Handlekurvleverandører på Envato Studio

Dette er bare et lite utvalg av PHP-handlekurvene som er tilgjengelige på Envato Market. Hvis disse alternativene ikke løser problemet ditt, eller hvis du heller vil gjøre det selv, la oss gå videre til prosessen med å bygge din egen handlekurv med PHP og MySQL.

Screencast Preview

Trinn 1

La oss begynne med å se på mappestrukturen:

Struktur

reset.css - Du kan få tilbakestillingen fra denne lenken
style.css - vår egen css-fil som vi skal bruke til å utforme HTML-oppslaget vårt
connection.php - filen som vil gjøre vår databaseforbindelse
index.php - malen for handlekurven vår
cart.php - filen der vil kunne endre våre produkter fra handlekurven (legg til, fjern)
products.php - produktoppføringssiden

Steg 2

Vi starter med å skrive html-oppsettet og deretter stilte det. Så åpen index.php og kopier / lim inn koden nedenfor:

       Handlevogn

Som du kan se har vår side to kolonner: hovedkolonnen og sidebjelken. La oss gå videre til CSS. Åpne filen style.css og skriv inn koden nedenfor:

 kropp font-family: Verdana; skriftstørrelse: 12px; farge: # 444;  #container width: 700px; margin: 150px auto; bakgrunnsfarge: #eee; overløp: skjult; / * Sett overløp: skjult for å fjerne floats på #main og #sidebar * / polstring: 15px;  #main width: 490px; flyte: venstre;  #sidebar width: 200px; flyte: venstre;

Slik ser produktsiden vår ut:

Full Screencast

Trinn 3

Før vi går videre til PHP / MySQL-delen, må vi opprette databasen. Så åpne phpMyadmin og følg disse trinnene:

Gå til privilegier Klikk på knappen Legg til ny bruker, og bruk følgende innstillinger: Brukernavn: opplæringen; Vert: lokal vert; Passord: supersecretpassword ;. Kontroller nå at de globale rettighetene er angitt. Fortsett videre til neste trinn.
Opprett en ny database som heter tutorials.
Opprett et nytt bord som heter Produkter og sett antall felt til 4. Nå fyller du feltene slik at du har: id_integer - sørg for at det er satt til INT og merk det som PRIMARY (også sett det til auto_increment); Navn - gjør det VARCHAR med en lengde på 100; beskrivelse - VARCHAR med en lengde på 250; pris - sørg for at den er satt til DECIMAL (2,6)
Befolk ditt bord med noen utvalgsprodukter

For å spare tid har jeg eksportert produkttabellen min slik at du bare kan kjøre følgende spørring:

 CREATE TABLE IF NOT EXISTS 'produkter' ('id_product' int (11) IKKE NULL AUTO_INCREMENT, 'navn' varchar (100) IKKE NULL, 'beskrivelse' varchar (250) IKKE NULL, 'pris' desimal (6,2) IKKE NULL, PRIMARY KEY ('id_product')) ENGINE = MyISAM DEFAULT CHARSET = latin1 AUTO_INCREMENT = 7; INSERT TIL 'produkter' ('id_produkt', 'navn', 'beskrivelse', 'pris') VÆRDIER (1, 'Produkt 1', 'Enkel tilfeldig beskrivelse', '15 .00 '), (2,' Produkt 2 ' 'Noen tilfeldige beskrivelser', '20 .00 '), (3,' Produkt 3 ',' Enkel tilfeldig beskrivelse ', '50 .00'), (4, 'Produkt 4', 'Enkel tilfeldig beskrivelse', '55 .00 '), 5, 'Produkt 5', 'Enkel tilfeldig beskrivelse', '54 .00 '), (6,' Produkt 6 ',' Enkel tilfeldig beskrivelse ', '34 .00');

Trinn 4

Før vi flytter til utpakking av data fra databasen, lager jeg meg index.php en mal for produktlisten og handlekurven. Så legg til følgende kode til toppen av din index.php side:

session_start () - dette er til senere bruk det vil tillate oss å faktisk bruke økter (det er viktig at session_start er skrevet før andre data sendes til nettleseren).
På den andre linjen, inkluderer vi connection.php som vil etablere forbindelsen til databasen (vi vil håndtere dette på et sekund). En ting til og med: Forskjellen mellom inkludere og kreve er at hvis du bruker krever og filen ikke kan bli funnet, avslutter manuset. Hvis du bruker "inkludere", vil skriptet fortsette å fungere.
I stedet for å kopiere hele html-koden (lenken til css, til js) for hver fil på nettstedet ditt, kan du bare gjøre dem alle i forhold til en enkelt fil. Så først sjekker jeg om det er en GET-variabel kalt "sidesett". Hvis det ikke er det, lager jeg en ny variabel som heter _pages. Hvis GET-variabelen kalt sider er satt først, vil jeg forsikre meg om at filen jeg skal inkludere er en gyldig side.

For å gjøre dette arbeidet må vi inkludere filen; legg til denne linjen til indeksen.php mellom diven med iden "main":

Nå er det komplett index.php vi har nå:

        Handlevogn

La oss opprette forbindelsen til MySQL. Åpen connections.php og skriv inn følgende:

Trinn 5

Nå er det på tide å skrive opp merkingen for produktsiden. Så vær så snill å åpne den og skriv følgende:

 Produktliste
   Navn  Beskrivelse  Pris  Handling  
  Produkt 1  Noen tilfeldig beskrivelse  15 $ Legg i handlekurv  
  Produkt 2  Noen tilfeldig beskrivelse  25 $ Legg i handlekurv

Navn	Beskrivelse	Pris	Handling
Produkt 1	Noen tilfeldig beskrivelse	15 $	Legg i handlekurv
Produkt 2	Noen tilfeldig beskrivelse	25 $	Legg i handlekurv

La oss ta en titt på siden:

Som du kan se, er det ganske styggt. Så la oss stilte det ved å legge til dette ekstra CSS.

 en farge: # 48577D; tekst-dekorasjon: ingen; a: hover text-decoration: underline; h1, h2 margin-bottom: 15px h1 fontstørrelse: 18px; h2 font-size: 16px #main bord bredde : 480px;  #main table th polstring: 10px; bakgrunnsfarge: # 48577D; farge: #fff; tekstjustering: venstre;  #main table td padding: 5px;  #main table tr bakgrunnsfarge: # d3dcf2;

Ok, la oss få et nytt blikk nå:

Ser mye bedre ut, tror du ikke? Nedenfor har du det komplette style.css kode:

 kropp font-family: Verdana; skriftstørrelse: 12px; farge: # 444;  en farge: # 48577D; tekst-dekorasjon: ingen; a: sving text-decoration: underline; h1, h2 margin-bottom: 15px h1 fontstørrelse: 18px; h2 font-size: 16px #container width: 700 piksler; margin: 150px auto; bakgrunnsfarge: #eee; padding: 15px; overløp: skjult;  #main width: 490px; flyte: venstre;  #main bord bredde: 480px;  #main table th polstring: 10px; bakgrunnsfarge: # 48577D; farge: #fff; tekstjustering: venstre;  #main table td padding: 5px;  #main table tr bakgrunnsfarge: # d3dcf2;  #sidebar width: 200px; flyte: venstre;

Trinn 6

Før vi trekker ut produktet fra databasen, la oss fjerne de siste 2 tabellrader fra bordet vårt (vi brukte det bare for å se hvordan vårt bord vil se ut). Fjern dette:

  Produkt 1 Noen tilfeldig beskrivelse 15 $ Legg i handlekurv   Produkt 2 Noen tilfeldig beskrivelse 25 $ Legg i handlekurv

Flott! Nå på stedet der tabellrader var, skriver du inn følgende PHP-kode:

     $ "> Legg i handlevognen

Så først bruker vi SELECT for å tilbakestille produktene, så løper vi gjennom hver rad fra databasen og ekko den til siden i en tabellrad.
Du kan se at ankeret kobler til samme side (når brukeren klikker anker produktet det er lagt til i handlekurven / økten). Vi sender bare noen ekstra variabler som produktets id.

Hvis du svever en av koblingene i handlekurven, kan du se nederst på siden at produktets ID er bestått.

Trinn 7

La oss gjøre det ankerarbeid ved å legge til følgende kode øverst på siden vår:

  1, "pris" => $ rad_s ['pris']);  else $ message = "Dette produkt-IDet er ugyldig!"; ?>

Hvis GET-variabelen kalles handling er satt og verdien er ADD, utfører vi koden.
Vi sørger for at iden som passerer gjennom GET-variabelen er et heltall
Hvis produktets id er i handlekurven SESSION, øker vi bare den er mengde med 1
Hvis ID ikke er i sesjonen, må vi forsikre oss om at ID-en som er passert gjennom GET-variabelen finnes i databasen. Hvis det gjør det, tar vi prisen og oppretter den. Hvis det ikke gjør det, setter vi en variabel som heter melding som vil holde feilen vår.

La oss sjekke om meldingsvariabelen er satt og ekko den til siden (skriv inn denne koden under H1-siden tittel):

 $ melding";?>

Her kan du se komplett products.php side.

  1, "pris" => $ rad_s ['pris']);  else $ message = "Dette produkt-IDet er ugyldig!"; ?> Produktliste
 $ melding";?>   Navn  Beskrivelse  Pris  Handling  
     $  "> Legg i handlevognen

Navn	Beskrivelse	Pris	Handling
		$	"> Legg i handlevognen

Her er feilmeldingen hvis produktets ID er ugyldig

Trinn 8

La oss gå tilbake til index.php og bygge sidebjelken. Legg til følgende kode:

 kurven
  $ verdi) $ sql. = $ id. ",";  $ sql = substr ($ sql, 0, -1). ") BESTILL BY NAME ASC"; $ Query = mysql_query ($ sql); mens ($ row = mysql_fetch_array ($ query)) ?>  x 
  
 Gå til handlekurven Vognen din er tom. Vennligst legg til noen produkter.
";?>

Først sjekker vi om øktvognen er satt. Hvis ikke, viser vi meldingen, varsle brukeren om at handlekurven er tom.
Deretter lager vi en mysql SELECT, men vi velger bare produktene som finnes i økten også. For å oppnå dette bruker vi foreaksfunksjonen. Så vi løper gjennom økten og legger til produktidentifikasjonen til SELECT. Deretter bruker vi substr-funksjonen til å fjerne det siste komma fra SELECT.
Til slutt sender vi dataene til nettleseren.

Ta en titt på bildene nedenfor:

Siden index.php er en mal for alle filene, vil sidebjelken være synlig i cart.php også. Er det ikke kult?!

Trinn 9

Endelig, åpne cart.php og start med å skrive følgende kode:

 Se handlekurv
 Gå tilbake til produktsiden   $ verdi) $ sql. = $ id. ",";  $ sql = substr ($ sql, 0, -1). ") BESTILL BY NAME ASC"; $ Query = mysql_query ($ sql); $ Totalprice = 0; mens $ rad = mysql_fetch_array ($ query)) $ subtotal = $ _ SESSION ['cart'] [$ rad ['id_product']] ['quantity'] * $ rad ['pris']; $ Totalprice + = $ delsum; ?>   Navn  Mengde  Pris  Elementer Pris  
    $  $  
   Totalpris:  
 
 
  
 
 For å fjerne et element, sett det mengde til 0.

Navn	Mengde	Pris	Elementer Pris
		$	$
Totalpris:

Koden ligner den fra index.php og products.php, så jeg skal ikke forklare alt igjen. Du bør legge merke til at i stedet for å vise mengden i et skjema, vises det nå i en innmatingsboks (slik at vi kan endre mengden). Også tabellen er viklet inn i et skjema tag. For å få totalprisen på elementene vi multipliserer mengden av det bestemte produktet (fra økten) ID med det er prisen. Dette gjøres i hver løkke.

MERK: Inngangen er en matrise, nøkkelen er produktets id, og mengden er mengdeverdien.

Trinn 10

Det siste skrittet vi trenger å gjøre er å gjøre skjemaarbeidet. Legg så denne koden til toppen av cart.php-siden.

 hvis isset ($ _ POST ['submit'])) foreach ($ _ POST ['kvantitet'] som $ key => $ val) if ($ val == 0) unset ($ _ SESSION ['cart'] [$ key]);  ellers $ _SESSION ['cart'] [$ key] ['quantity'] = $ val;

Først sjekker vi om skjemaet ble sendt inn. Hvis det ble sendt inn og verdien av inngangen var null, satte vi opp den økten.
Hvis verdien er en annen verdi, setter vi mengden til den verdien i stedet.

Her er komplett cart.php

  $ val) if ($ val == 0) unset ($ _ SESSION ['cart'] [$ key]);  ellers $ _SESSION ['cart'] [$ key] ['quantity'] = $ val; ?> Se handlekurv
 Gå tilbake til produktsiden.   $ verdi) $ sql. = $ id. ",";  $ sql = substr ($ sql, 0, -1). ") BESTILL BY NAME ASC"; $ Query = mysql_query ($ sql); $ Totalprice = 0; mens $ rad = mysql_fetch_array ($ query)) $ subtotal = $ _ SESSION ['cart'] [$ rad ['id_product']] ['quantity'] * $ rad ['pris']; $ Totalprice + = $ delsum; ?>   Navn  Mengde  Pris  Elementer Pris  
    $  $  
   Totalpris:  
 
 
  
 
 For å fjerne et element angi mengden til 0.

Navn	Mengde	Pris	Elementer Pris
		$	$
Totalpris:

Jeg håper du likte denne opplæringen. Hvis du har noen spørsmål, må du passe på å se den dybere videoopplæringen!

Kode