Legge varer i handlekurven php mysql. Handlevogn for nettbutikk foran eller Skrive modulært javascript

"Hvilken kurv? Og hvorfor plutselig en kurv? – Du kan bli overrasket etter å ha lest tittelen. Så, handlekurven er den vanligste - den vi alle bruker når vi kjøper noe i en nettbutikk. Og jeg bestemte meg for å publisere en artikkel om opprettelsen av en eneste grunn: Jeg kunne ikke motstå den fantastiske og vakre løsningen.

Tro meg ikke? du kan se resultatet. Og hvis du er interessert i hvordan dette gjøres, les videre.

Introduksjon

I denne artikkelen skal vi lage en handlekurv som er drevet av Ajax-teknologi. Alle produktene vil bli registrert i en MySQL-database og dataene vil bli behandlet med PHP.

JQuery vil lansere Ajax på siden, i tillegg vil simpletip-pluginen legge til interaktivitet til hele prosessen.

Så la oss komme i gang, laste ned demofilene og begynne å lese.

Trinn 1 – MySQL-database

Hvis du ønsker å få en fungerende demo, må du kjøre følgende SQL-spørring i databasekontrollpanelet (dvs. phpMyAdmin). Denne spørringen vil opprette en tabell og legge inn flere produkter. Denne spørringskoden er også tilgjengelig i table.sql-filen i demofilene.

table.sql

LAG TABELL HVIS IKKE FINNES internet_shop (id int(6) NOT NULL auto_increment, img varchar(32) collate utf8_unicode_ci NOT NULL default "", navn varchar(64) collate utf8_unicode_ci NOT NULL standard "", beskrivelsestekst sortere utf8_unicode_ci NOT NULL dobbel IKKE NULL standard "0", PRIMÆR NØKKEL (id), UNIK NØKKEL 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-datamaskinen.", 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", "Den nye Apple TV. Kjøp den nå!", 300);

Etter dette må du fylle inn MySQL-kontodetaljer i connect.php-filen.

Trinn 2 - XHTML

Først lager vi den grunnleggende markeringen.

demo.php

Handlevogn De beste produktene, til de beste prisene Produkter // php-kode som genererer produktene Handlevogn Design

Som du kanskje har lagt merke til fra koden ovenfor, har vi plassert innholdet vårt i to hovedseksjoner, helt identiske når det gjelder XHTML-markering. I den første kolonnen viser vi alle produktene våre, den andre kolonnen fungerer som en handlekurv.

Nedenfor kan du se en detaljert representasjon av strukturen til vår produktseksjon.

Produktene genereres ved hjelp av vår PHP-kode, som du kan se på linje 18. Vi skal se nærmere på dette om noen minutter. La oss nå ta en titt på hvordan vi behandler XHTML-markeringen for å produsere det endelige designet.

Trinn 3 – CSS

Denne gangen var CSS-koden veldig lang, så jeg delte den i to deler.

demo.css

Brødtekst,h1,h2,h3,p,td,quote,small,form,input,ul,li,ol,label( /* tilbakestilt til originale stiler, for nettleserkompatibilitet */ margin:0px; padding:0px; font- family :Arial, Helvetica, sans-serif ) body( color:#555555; font-size:13px; background-color:#282828; ) .clear( /* clear-fix hack for å rense strømmen fra flyter */ clear :both ; ) #main-container( /* dette er hovedbeholderen som inneholder to seksjoner */ width:700px; margin:20px auto; ) .container( /* hovedbeholderen for innholdsseksjonene - produkter og handlekurv */ margin -bottom:40px; ) .top-label( /* ytre spenn, inkludert seksjonsnavnet */ background: url(img/label_bg.png) no-repeat; /* vis venstre side av label_bg.png - et bredt bilde med avrundede kanter */ display: inline-left: margin-bottom:-15px; /* det indre spennet er skissert i rødt i bildet over*/ background: url(img/label_bg.png) no-repeat øverst til høyre; /* vis høyre side av bildet label_bg.png */ display:inline-block;

Vær oppmerksom på verktøytipsklassen. Den lages automatisk av simpletip-pluginen, men har ingen stiler som standard. Det er derfor vi tildeler det en stil her. Jeg brukte egenskapen border-radius, som ennå ikke støttes av alle nettlesere, men som ikke vil forårsake mye skade for de som ikke støtter den.

La oss nå ta en titt på CSS-stilene for handlekurvseksjonen.

#cart-icon( /* div som inneholder handlekurvikonet */ width:128px; float:venstre; posisjon:relativ; /* sett relativ plassering slik at ajax-lasteren er plassert i forhold til div-en*/ ) #ajax- loader ( posisjon:absolutt; /* absolutt posisjonering plasserer elementet på siden i forhold til det overordnede elementet, som er tildelt relativ posisjonering */ top:0px; venstre:0px; synlighet:skjult; ) #item-list( /* innholdet av vognen vil bli plassert i denne blokken */ float:left: width:15px ) a.remove,a.remove:visited( /* Fjerner en lenke */ color: red; font-size; : 10px; tekst-transform:store bokstaver ) #total( /* blokk, med totalbeløp */ clear:both; float:right; font-size: bold; padding:10px 12px; text-transform; : store bokstaver; ) #item-list table( /* hvert element i handlekurven er plassert inne i varelisteblokken*/ background-color:#F7F7F7; border:1px solid #EFEFEF; margin-top:5px; padding:4px ; ) a.button,a.button:visited( /* Checkout-knapp */ display:none; høyde:29px; width:136px; padding-top:15px; margin:0 auto; overflow:hidden; color:white; font - størrelse:12px; ( background-position:bottom; /* ved hover viser vi bunnen av bakgrunnsbildet */ text-decoration:none; ) /* Noen mindre interessante stiler */ a, a:visited ( color:#00BBFF ; text- dekorasjon: ingen; disposisjon: ingen; ) a:hover( tekst-dekor: understrek; ) 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(farge:#F5F5F5; font-size:10px; font-weight:bold; margin-bottom:30px;

tekst-transform: store bokstaver; ) .tutorial-info( color:white; text-align:center; padding:10px; margin-top:-20px; )

Enhver utvikler vil fortelle oss at vi gikk glipp av noe her. Som du sikkert har gjettet, er det spesielle behandlingsprosedyrer for IE6.

Men i alle fall, her er det vi trenger for å få IE6 til å forstå hva vi vil at den skal gjøre:

demo.php

.pngfix ( virkemåte: url(pngfix/iepngfix.htc);) /* dette er en spesiell htc-fil som fikser IE6-transparensproblemer */ .tooltip(width:200px;); /* oppgi en standardbredde for verktøytipsene */

Flott. La oss nå ta en titt på den endelige PHP.

Trinn 4 – PHP

Vi bruker PHP på flere måter og på forskjellige steder. Først, la oss se på hvordan produktlisten på hovedsiden er dannet.

demo.php