Preču pievienošana grozam php mysql. Grozs tiešsaistes veikalam priekšpusē vai Modulāra JavaScript rakstīšana

“Kurš grozs? Un kāpēc pēkšņi grozs? - jūs varat būt pārsteigts pēc nosaukuma izlasīšanas. Tātad iepirkumu grozs ir visizplatītākais – tas, kuru mēs visi izmantojam, pērkot kaut ko interneta veikalā. Un es nolēmu publicēt rakstu par tā izveidi tikai viena iemesla dēļ: es nevarēju pretoties brīnišķīgajam un skaistajam risinājumam.

Netici man? jūs varat redzēt rezultātu. Un, ja jūs interesē, kā tas tiek darīts, lasiet tālāk.

Ievads

Šajā rakstā mēs izveidosim iepirkumu grozu, kuru darbina Ajax tehnoloģija. Visi produkti tiks ierakstīti MySQL datu bāzē, un dati tiks apstrādāti, izmantojot PHP.

JQuery lapā palaidīs Ajax, turklāt simpletip spraudnis pievienos interaktivitāti visam procesam.

Sāksim, lejupielādējiet demonstrācijas failus un sāciet lasīt.

1. darbība – MySQL datu bāze

Ja vēlaties iegūt darba demonstrāciju, datu bāzes vadības panelī (t.i., phpMyAdmin) būs jāpalaiž šāds SQL vaicājums. Šis vaicājums izveidos tabulu un ievadīs vairākus produktus. Šis vaicājuma kods ir pieejams arī demonstrācijas faila failā table.sql.

tabula.sql

CREATE TABLE IF NOT EXISTS internet_shop (id int(6) NOT NULL auto_increment, img varchar(32) salīdzina utf8_unicode_ci NOT NULL noklusējuma "", nosaukums varchar(64) salīdzina utf8_unicode_ci NOT NULL noklusējuma "", apraksta teksts NOT NULL_code NOT UTfci double NOT NULL noklusējuma "0", PRIMARY KEY (id), UNIQUE KEY img (img)) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=7 ; INSERT INTO internet_shop VALUES(1, "iPod.png", "iPod", "Oriģinālais un populārais iPod.", 200); INSERT INTO internet_shop VALUES(2, "iMac.png", "iMac", "iMac dators.", 1200); INSERT INTO internet_shop VALUES(3, "iPhone.png", "iPhone", "Šis ir jaunais iPhone.", 400); INSERT INTO internet_shop VALUES(4, "iPod-Shuffle.png", "iPod Shuffle", "Jaunais iPod shuffle.", 49); INSERT INTO internet_shop VALUES(5, "iPod-Nano.png", "iPod Nano", "jaunais iPod Nano.", 99); INSERT INTO internet_shop VALUES(6, "Apple-TV.png", "Apple TV", "Jaunais Apple TV. Pērciet tūlīt!", 300);

Pēc tam failā connect.php ir jāievada sava MySQL konta informācija.

2. darbība — XHTML

Vispirms mēs izveidosim pamata marķējumu.

demo.php

Grozs Labākās preces, par labākajām cenām Produkti // php kods, kas ģenerē preces Grozs Dizains

Kā jūs, iespējams, pamanījāt no iepriekš minētā koda, mēs esam ievietojuši savu saturu divās galvenajās sadaļās, kas ir pilnīgi identiskas XHTML iezīmēšanas ziņā. Pirmajā kolonnā mēs attēlojam visus mūsu produktus, otrā kolonna darbojas kā iepirkumu grozs.

Zemāk jūs varat redzēt detalizētu mūsu produktu sadaļas struktūras attēlojumu.

Produkti tiek ģenerēti, izmantojot mūsu PHP kodu, kā to var redzēt 18. rindiņā. Mēs to aplūkosim sīkāk pēc dažām minūtēm. Tagad apskatīsim, kā mēs apstrādājam XHTML marķējumu, lai izveidotu galīgo dizainu.

3. darbība — CSS

Šoreiz CSS kods bija ļoti garš, tāpēc es to sadalīju divās daļās.

demo.css

Body,h1,h2,h3,p,td,quote,small,form,input,ul,li,ol,label( /* atiestatīt sākotnējos stilus, pārlūkprogrammas saderībai */ margin:0px; polsterējums:0px; font- ģimene :Arial, Helvetica, sans-serif ) body( color:#555555; font-size:13px; background-color:#282828; ) .clear( /* clear-fix hack straumes tīrīšanai no pludiņiem */ skaidrs; :abi -bottom:40 pikseļi ar noapaļotām malām */ displejs: margin-left:20px. /* augšējā attēlā iekšējais laidums ir iezīmēts sarkanā krāsā*/ fons: url(img/label_bg.png) no-repeat augšējā labajā stūrī; /* parāda attēla labo pusi label_bg.png */ display:inline-block;

Pievērsiet uzmanību rīka padomu klasei. To automātiski izveido spraudnis simpletip, taču pēc noklusējuma tam nav stilu. Tāpēc šeit mēs tam piešķiram stilu. Es izmantoju border-radius rekvizītu, ko vēl neatbalsta visas pārlūkprogrammas, taču tas neradīs lielu kaitējumu tiem, kas to neatbalsta.

Tagad apskatīsim groza sadaļas CSS stilus.

#cart-icon( /* div, kas satur groza ikonu */ width:128px; float:left; position:relative; /* iestatīt relatīvo pozicionēšanu tā, lai ajax ielādētājs būtu novietots attiecībā pret div*/ ) #ajax- loader ( position:absolute; /* absolūtā pozicionēšana novieto elementu lapā attiecībā pret tā vecākelementu, kuram ir piešķirta relatīvā pozicionēšana */ top:0px; left:0px; visibility:hidden; ) #item-list( /* saturs no groza tiks ievietots šajā blokā : 10px; teksta pārveidošana: lielie burti ) #kopā( /* bloks, ar kopējo summu */ skaidrs: abi : lielie burti ) #item-list table( /* katra prece grozā ir novietota preču saraksta blokā*/ fona krāsa: #F7F7F7; apmale: 1px solid #EFEFEF; margin-top: 5px; polsterējums: 4px ; ) a.button,a.button:visited( /* Checkout poga */ displejs: nav; augstums: 29 pikseļi; platums: 136 pikseļi; polsterējums-augšdaļa: 15 pikseļi; piemale: 0 auto; pārplūde: paslēpta; krāsa: balta; fonts - izmērs:12px; teksta pārveidošana: lielie burti; ( background-position:bottom; /* novietojot kursoru, mēs rādām fona attēla apakšdaļu */ text-decoration:none; ) /* Daži mazāk interesanti stili */ a, a:visited ( color:#00BBFF ; text- apdare: nav kontūra: nav ) a: hover( text-decoration: underline; ) h1( font-size: 28px; font-weight: bold; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; ; ) h2( fonta svars: normāls; fonta izmērs: 20 pikseļi; krāsa: # 666666; teksta atkāpe: 30 pikseļi; mala: 20 pikseļi :48px; .tutorialzine h3( color:#F5F5F5; font-size:10px; font-weight:bold; margin-bottom:30px;

teksta pārveidošana: lielie burti; ) .tutorial-info( color: white; text-align:center; polsterējums: 10px; margin-top:-20px; )

Jebkurš izstrādātājs mums pateiks, ka mēs šeit kaut ko esam palaiduši garām. Kā jūs droši vien uzminējāt, IE6 ir īpašas ārstēšanas procedūras.

Bet jebkurā gadījumā mums ir nepieciešams, lai IE6 saprastu, ko mēs vēlamies darīt:

demo.php

.pngfix ( uzvedība: url(pngfix/iepngfix.htc);) /* šis ir īpašs htc fails, kas novērš IE6 caurspīdīguma problēmas */ .tooltip(width:200px;); /* nodrošināt noklusējuma platumu rīka padomiem */

Lieliski. Tagad apskatīsim galīgo PHP.

4. darbība – PHP

Mēs izmantojam PHP vairākos veidos un dažādās vietās. Vispirms apskatīsim, kā tiek veidots produktu saraksts galvenajā lapā.

demo.php