Tilføjelse af varer til indkøbskurv php mysql. Indkøbskurv til en online butik foran eller Skrive modulært javascript

"Hvilken kurv? Og hvorfor pludselig en kurv? - du kan blive overrasket efter at have læst titlen. Så indkøbskurven er den mest almindelige - den vi alle bruger, når vi køber noget i en netbutik. Og jeg besluttede at udgive en artikel om dens oprettelse af en eneste grund: Jeg kunne ikke modstå den vidunderlige og smukke løsning.

Tror du mig ikke? du kan se resultatet. Og hvis du er interesseret i, hvordan dette gøres, så læs videre.

Introduktion

I denne artikel skal vi lave en indkøbskurv, der er drevet af Ajax-teknologi. Alle produkter vil blive registreret i en MySQL-database, og dataene vil blive behandlet ved hjælp af PHP.

JQuery vil køre Ajax på siden, desuden vil simpletip-pluginet tilføje interaktivitet til hele processen.

Så lad os komme i gang, downloade demofilerne og begynde at læse.

Trin 1 – MySQL-database

Hvis du vil have en fungerende demo, skal du køre følgende SQL-forespørgsel i dit databasekontrolpanel (dvs. phpMyAdmin). Denne forespørgsel vil oprette en tabel og indtaste flere produkter. Denne forespørgselskode er også tilgængelig i table.sql-filen i demofilerne.

table.sql

OPRET TABEL HVIS IKKE FINDER internet_shop (id int(6) IKKE NULL auto_increment, img varchar(32) collate utf8_unicode_ci NOT NULL standard "", navn varchar(64) collate utf8_unicode_ci IKKE NULL standard "", beskrivelsestekst collate utf8_unicode_ci NOT NULL dobbelt IKKE NULL standard "0", PRIMÆR NØGLE (id), UNIK NØGLE img (img)) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=7 ; INSERT INTO internet_shop VALUES(1, "iPod.png", "iPod", "Den originale og populære iPod.", 200); INSERT INTO internet_shop VALUES(2, "iMac.png", "iMac", "iMac-computeren.", 1200); INSERT INTO internet_shop VALUES(3, "iPhone.png", "iPhone", "Dette er den nye iPhone.", 400); INSERT INTO internet_shop VALUES(4, "iPod-Shuffle.png", "iPod Shuffle", "Den nye iPod shuffle.", 49); INSERT INTO internet_shop VALUES(5, "iPod-Nano.png", "iPod Nano", "Den nye iPod Nano.", 99); INSERT INTO internet_shop VALUES(6, "Apple-TV.png", "Apple TV", "Det nye Apple TV. Køb det nu!", 300);

Herefter skal du udfylde dine MySQL-kontooplysninger i connect.php-filen.

Trin 2 - XHTML

Først opretter vi den grundlæggende markup.

demo.php

Indkøbskurv De bedste produkter, til de bedste priser Produkter // php-kode, der genererer produkterne Indkøbskurv Design

Som du måske har bemærket fra ovenstående kode, har vi placeret vores indhold i to hovedsektioner, fuldstændig identiske med hensyn til XHTML-markering. I den første kolonne viser vi alle vores produkter, den anden kolonne fungerer som en indkøbskurv.

Nedenfor kan du se en detaljeret fremstilling af strukturen i vores produktsektion.

Produkterne er genereret ved hjælp af vores PHP-kode, som det kan ses på linje 18. Vi vil se nærmere på dette om et par minutter. Lad os nu tage et kig på, hvordan vi behandler XHTML-markeringen for at producere det endelige design.

Trin 3 – CSS

Denne gang var CSS-koden meget lang, så jeg delte den op i to dele.

demo.css

Brødtekst,h1,h2,h3,p,td,citat,small,form,input,ul,li,ol,label( /* nulstillet til originale stilarter, for browserkompatibilitet */ margin:0px; padding:0px; font- familie :Arial, Helvetica, sans-serif ) body( color:#555555; font-size:13px; background-color:#282828; ) .clear( /* clear-fix hack til at rense vandløbet fra flydere */ clear :both ; ) #main-container( /* dette er hovedbeholderen, der indeholder to sektioner */ width:700px; margin:20px auto; ) .container( /* hovedbeholderen for indholdssektionerne - produkter og indkøbskurv */ margin -bottom:40px; ) .top-label( /* ydre span, inklusive sektionsnavnet */ background: url(img/label_bg.png) no-repeat; /* vis venstre side af label_bg.png - et bredt billede med afrundede kanter */ display: inline-left: 20px position: margin-bottom:-15px; /* det indre spænd er markeret med rødt på billedet ovenfor*/ baggrund: url(img/label_bg.png) no-repeat øverst til højre; /* vis højre side af billedet label_bg.png */ display:inline-block; font-size:10px; højde:36px; margin-left:10px; /* tom plads er tilbage til venstre for at vise baggrunden for det ydre spænd */ padding:12px 0 5px text-transform:uppercase ) .content-area( /* Den øverste del af billedet med afrundede kanter; se billedet ovenfor */ background:url(img/container_top.png) no-repeat #fcfcfc:15px 20px ) .content( /* total polstring for begge sektioner */ padding:10px; ) .drag- ønsket( /* individuelt tildelte egenskaber */ background:url(img/drag_desired_label.png) no-repeat øverst til højre; padding:20px; .drop-here( /* ikke beregnet til andre sektioner */ background:url(img/drop_here_label .png) no- repeat øverst til højre; ) .bottom-container-border( /* bunden af ​​det afrundede billede, der afslutter sektionen */ background:url(img/container_bottom.png) no-repeat; height:14px; ) .product( /* styles for products */ border:2px solid #F5F5F5; float:left; padding:10px; .product img( cursor:move; ) p.descr( padding:5px 0; ) small( display:block; margin-top:4px; ) .tooltip( /* tooltips, der er oprettet ved hjælp af simpletip-plugin'et */ position: absolute; top: 0; venstre: 0; z-indeks: 3; display: ingen; baggrundsfarve:#666666; border:1px solid #666666; farve:#fcfcfc; polstring:10px; -moz-border-radius:12px; /* afrundede hjørner */ -khtml-border-radius: 12px; -webkit-border-radius: 12px; border-radius:12px; )

Vær opmærksom på værktøjstip-klassen. Det oprettes automatisk af simpletip-plugin'et, men har som standard ingen stilarter. Derfor tildeler vi den en stil her. Jeg brugte egenskaben border-radius, som endnu ikke understøttes af alle browsere, men som ikke vil forårsage meget skade for dem, der ikke understøtter den.

Lad os nu tage et kig på CSS-stilene til kurvsektionen.

#cart-icon( /* div, der indeholder vognikonet */ width:128px; float:venstre; position:relative; /* indstil relativ positionering, så ajax-loaderen er placeret i forhold til div*/ ) #ajax- loader ( position:absolute; /* absolut positionering placerer elementet på siden i forhold til dets overordnede element, som er tildelt relativ positionering */ top:0px; left:0px; visibility:hidden; ) #item-list( /* indholdet af vognen vil blive placeret i denne blok */ float:left: width: 15px ) a.remove,a.remove:visited( /* Fjernelse af et link */ color: red; font-size; : 10px; tekst-transform:store bogstaver ) #total( /* blok, med samlet beløb */ clear:both; float:right; font-size: font-weight: bold; padding: 10px 12px; text-transform; : store bogstaver; ) #item-list table( /* hver vare i kurven er placeret inde i varelisteblokken*/ baggrundsfarve:#F7F7F7; border:1px solid #EFEFEF; margin-top:5px; padding:4px ; ) a.button,a.button:visited( /* Checkout-knap */ display:none; højde:29px; width:136px; padding-top:15px; margin:0 auto; overflow:hidden; color:white; font - størrelse:12px; skrifttype-vægt:fed tekst; ( background-position:bottom; /* ved svævning viser vi bunden af ​​baggrundsbilledet */ text-decoration:none; ) /* Nogle mindre interessante stilarter */ a, a:visited ( color:#00BBFF ; text- decoration:none; outline:none; ) a:hover( text-decoration:underline; ) h1( font-size:28px; font-weight:bold; font-family:"Trebuchet MS",Arial, Helvetica, sans-serif ; ) h2( font-weight:normal; font-size:20px; color:#666666; text-indent:30px; margin:20px 0; ) .tutorialzine h1( color:white; margin-bottom:10px; font-size :48px; ) .tutorialzine h3(farve:#F5F5F5; font-size:10px; font-weight:bold; margin-bottom:30px; tekst-transform:store bogstaver; ) .tutorial-info( color:white; text-align:center; padding:10px; margin-top:-20px; )

Enhver udvikler vil fortælle os, at vi gik glip af noget her. Som du sikkert har gættet, er der særlige behandlingsprocedurer for IE6.

Personligt planlægger jeg snart at stoppe med at understøtte IE6 i alle mine projekter - hvis det ikke var for IE6, ville ovenstående kode være en fjerdedel kortere, og jeg ville ikke skulle bruge så meget tid på at fejlfinde den.

Men under alle omstændigheder er her, hvad vi skal bruge for at få IE6 til at forstå, hvad vi vil have den til at gøre:

demo.php

.pngfix ( adfærd: url(pngfix/iepngfix.htc);) /* dette er en speciel htc-fil, der løser IE6-gennemsigtighedsproblemerne */ .tooltip(width:200px;); /* angiv en standardbredde for værktøjstip */

Store. Lad os nu tage et kig på den endelige PHP.

Trin 4 – PHP

Vi bruger PHP på flere måder og forskellige steder. Lad os først se på, hvordan listen over produkter på hovedsiden er dannet.

demo.php