कार्ट में आइटम जोड़ना php mysql. सामने किसी ऑनलाइन स्टोर के लिए शॉपिंग कार्ट या मॉड्यूलर जावास्क्रिप्ट लिखना

“कौन सी टोकरी? और अचानक टोकरी क्यों? - शीर्षक पढ़कर आप आश्चर्यचकित हो सकते हैं। तो, शॉपिंग कार्ट सबसे आम है - जिसे हम सभी ऑनलाइन स्टोर में कुछ खरीदते समय उपयोग करते हैं। और मैंने इसके निर्माण के बारे में एक लेख प्रकाशित करने का निर्णय केवल एक ही कारण से लिया: मैं अद्भुत और सुंदर समाधान का विरोध नहीं कर सका।

मुझ पर विश्वास नहीं है? आप परिणाम देख सकते हैं. और यदि आप इसमें रुचि रखते हैं कि यह कैसे किया जाता है, तो आगे पढ़ें।

परिचय

इस लेख में, हम एक शॉपिंग कार्ट बनाने जा रहे हैं जो अजाक्स तकनीक द्वारा संचालित है। सभी उत्पादों को MySQL डेटाबेस में रिकॉर्ड किया जाएगा और डेटा को PHP का उपयोग करके संसाधित किया जाएगा।

JQuery पेज पर Ajax लॉन्च करेगा, इसके अलावा, सिंपलटिप प्लगइन पूरी प्रक्रिया में अन्तरक्रियाशीलता जोड़ देगा।

तो आइए शुरू करें, डेमो फ़ाइलें डाउनलोड करें, और पढ़ना शुरू करें।

चरण 1 - MySQL डेटाबेस

यदि आप एक कार्यशील डेमो प्राप्त करना चाहते हैं, तो आपको अपने डेटाबेस नियंत्रण कक्ष (यानी phpMyAdmin) में निम्नलिखित SQL क्वेरी चलाने की आवश्यकता होगी। यह क्वेरी एक तालिका बनाएगी और कई उत्पादों को दर्ज करेगी। यह क्वेरी कोड डेमो फ़ाइलों में टेबल.एसक्यूएल फ़ाइल में भी उपलब्ध है।

टेबल.एसक्यूएल

यदि मौजूद नहीं है तो तालिका बनाएं इंटरनेट_शॉप (आईडी int(6) शून्य नहीं ऑटो_इन्क्रीमेंट, img वर्कर(32) मिलान utf8_unicode_ci शून्य डिफ़ॉल्ट नहीं "", नाम वर्कर(64) मिलान utf8_unicode_ci शून्य डिफ़ॉल्ट नहीं "", विवरण टेक्स्ट मिलान utf8_unicode_ci शून्य नहीं, कीमत डबल नॉट नल डिफ़ॉल्ट "0", प्राथमिक कुंजी (आईडी), अद्वितीय कुंजी img (img)) इंजन = MyISAM डिफ़ॉल्ट वर्ण सेट = utf8 COLLATE = utf8_unicode_ci AUTO_INCREMENT = 7; इंटरनेट_शॉप मानों में सम्मिलित करें(1, "iPod.png", "iPod", "मूल और लोकप्रिय iPod.", 200); इंटरनेट_शॉप मानों में सम्मिलित करें (2, "iMac.png", "iMac", "iMac कंप्यूटर।", 1200); इंटरनेट_शॉप मानों में सम्मिलित करें(3, "iPhone.png", "iPhone", "यह नया iPhone है।", 400); इंटरनेट_शॉप मानों में सम्मिलित करें(4, "आईपॉड-शफ़ल.पीएनजी", "आईपॉड शफ़ल", "नया आईपॉड शफ़ल।", 49); इंटरनेट_शॉप मानों में सम्मिलित करें(5, "iPod-Nano.png", "iPod Nano", "नया iPod नैनो।", 99); इंटरनेट_शॉप मानों में सम्मिलित करें(6, "Apple-TV.png", "Apple TV", "नया Apple टीवी। इसे अभी खरीदें!", 300);

इसके बाद आपको कनेक्ट.php फ़ाइल में अपने MySQL खाते का विवरण भरना होगा।

चरण 2 - एक्सएचटीएमएल

सबसे पहले हम मूल मार्कअप बनाएंगे.

डेमो.php

कार्ट सर्वोत्तम उत्पाद, सर्वोत्तम कीमतों पर उत्पाद // php कोड जो उत्पाद कार्ट उत्पन्न करता है डिज़ाइन

जैसा कि आपने उपरोक्त कोड से देखा होगा, हमने अपनी सामग्री को दो मुख्य खंडों में रखा है, जो XHTML मार्कअप के संदर्भ में पूरी तरह से समान हैं। पहले कॉलम में हम अपने सभी उत्पाद प्रदर्शित करते हैं, दूसरा कॉलम शॉपिंग कार्ट के रूप में कार्य करता है।

नीचे, आप हमारे उत्पाद अनुभाग की संरचना का विस्तृत प्रतिनिधित्व देख सकते हैं।

उत्पाद हमारे PHP कोड का उपयोग करके तैयार किए जाते हैं, जैसा कि लाइन 18 पर देखा जा सकता है। हम कुछ ही मिनटों में इसे और अधिक विस्तार से देखेंगे। अब, आइए देखें कि अंतिम डिज़ाइन तैयार करने के लिए हम XHTML मार्कअप को कैसे संसाधित करते हैं।

चरण 3 - सीएसएस

इस बार, CSS कोड बहुत लंबा था, इसलिए मैंने इसे दो भागों में विभाजित कर दिया।

डेमो.सीएसएस

बॉडी, h1, h2, h3, p, td, उद्धरण, छोटा, फॉर्म, इनपुट, ul, li, ol, लेबल ( / * ब्राउज़र संगतता के लिए मूल शैलियों पर रीसेट करें * / मार्जिन: 0px; पैडिंग: 0px; फ़ॉन्ट- परिवार: एरियल, हेल्वेटिका, सैन्स-सेरिफ़; ) बॉडी (रंग: # 555555; फ़ॉन्ट-आकार: 13 पीएक्स; पृष्ठभूमि-रंग: # 282828; ) .क्लियर ( / * फ्लोट्स से स्ट्रीम को साफ करने के लिए क्लियर-फिक्स हैक * / क्लियर :दोनों; -बॉटम:40px; ) .टॉप-लेबल( /* बाहरी विस्तार, अनुभाग नाम सहित */ पृष्ठभूमि: url(img/label_bg.png) दोहराना नहीं; /* label_bg.png के बाईं ओर प्रदर्शित करें - एक विस्तृत छवि गोलाकार किनारों के साथ */ डिस्प्ले: इनलाइन-बाएं: 20px; स्थिति: सापेक्ष; मार्जिन-बॉटम:-15px; अनुभाग शीर्षक उत्पाद अनुभाग के शीर्ष किनारे के निकट है*/ .label-txt( /*ऊपर चित्र में आंतरिक विस्तार को लाल रंग में रेखांकित किया गया है*/ पृष्ठभूमि: url(img/label_bg.png) ऊपर दाईं ओर नो-रिपीट; /* छवि के दाईं ओर प्रदर्शित करें label_bg.png */ डिस्प्ले:इनलाइन-ब्लॉक; फ़ॉन्ट-आकार:10px; ऊँचाई:36px; मार्जिन-बाएँ:10px; /* बाहरी विस्तार की पृष्ठभूमि दिखाने के लिए बाईं ओर खाली जगह छोड़ी गई है */ पैडिंग:12पीएक्स 15पीएक्स 0 5पीएक्स; टेक्स्ट-ट्रांसफॉर्म:अपरकेस; .कंटेंट-एरिया( /* गोलाकार किनारों के साथ छवि का शीर्ष भाग, ऊपर दी गई छवि देखें */ बैकग्राउंड:url(img/container_top.png) नो-रिपीट #fcfcfc; पैडिंग:15px 20px 0 20px; ) .content( /* दोनों अनुभागों के लिए कुल पैडिंग */ पैडिंग:10px; ) . वांछित (/* व्यक्तिगत रूप से निर्दिष्ट गुण */ पृष्ठभूमि: url (img/drag_desired_label.png) ऊपर दाईं ओर नो-रिपीट; पैडिंग: 20px; .drop-here ( / * अन्य अनुभागों के लिए अभिप्रेत नहीं है */ पृष्ठभूमि: url (img/drop_here_label) .png) नहीं- ऊपर दाईं ओर दोहराएं) .bottom-container-border( /* गोलाकार छवि का निचला भाग जो अनुभाग को समाप्त करता है */ बैकग्राउंड:url(img/container_bottom.png) नो-रिपीट; ऊंचाई:14px; ) .product( /* उत्पादों के लिए शैलियाँ */ बॉर्डर:2px ठोस #F5F5F5; फ्लोट:बाएं; पैडिंग:10px; .उत्पाद img(कर्सर:मूव; ) p.descr(पैडिंग:5px 0; ) छोटा(डिस्प्ले:ब्लॉक; मार्जिन- टॉप:4पीएक्स ) .टूलटिप( /* टूलटिप्स जो सिंपलटिप प्लगइन का उपयोग करके बनाए गए हैं */ स्थिति: पूर्ण; शीर्ष: 0; बाएँ: 0; z-सूचकांक: 3; कुछ भी डिस्प्ले मत करो;

टूलटिप क्लास पर ध्यान दें. यह सिंपलटिप प्लगइन द्वारा स्वचालित रूप से बनाया गया है, लेकिन इसमें डिफ़ॉल्ट रूप से कोई स्टाइल नहीं है। इसीलिए हम इसे यहां एक शैली प्रदान करते हैं। मैंने बॉर्डर-रेडियस प्रॉपर्टी का उपयोग किया, जो अभी तक सभी ब्राउज़रों द्वारा समर्थित नहीं है, लेकिन जो इसका समर्थन नहीं करते हैं उन्हें ज्यादा नुकसान नहीं होगा।

अब, आइए कार्ट सेक्शन के लिए CSS शैलियों पर एक नज़र डालें।

#cart-icon( /* div जिसमें कार्ट आइकन शामिल है */ चौड़ाई:128px; फ्लोट:बाएं; स्थिति:सापेक्ष; /* सापेक्ष स्थिति सेट करें ताकि AJAX लोडर div के सापेक्ष स्थित हो*/ ) #ajax- लोडर (स्थिति: निरपेक्ष; /* पूर्ण स्थिति तत्व को उसके मूल तत्व के सापेक्ष पृष्ठ पर स्थित करती है, जिसे सापेक्ष स्थिति दी गई है */ शीर्ष: 0px; बाएँ: 0px; दृश्यता: छिपा हुआ; ) #आइटम-सूची( /* सामग्री कार्ट का हिस्सा इस ब्लॉक में स्थित होगा */ फ़्लोट: बाएँ; चौड़ाई: 490px; पैडिंग-टॉप: 15px; ) a.remove, a.remove:visited( /* एक लिंक हटाना */ रंग: लाल; फ़ॉन्ट आकार) : 10px; टेक्स्ट-ट्रांसफॉर्म: अपरकेस; ) #कुल(/* ब्लॉक, कुल राशि के साथ */ स्पष्ट: दोनों; फ्लोट: राइट; फॉन्ट-साइज: 10px; फॉन्ट-वेट: बोल्ड; पैडिंग: 10px 12px; टेक्स्ट-ट्रांसफॉर्म : अपरकेस; ) #आइटम-सूची तालिका (/* कार्ट में प्रत्येक आइटम आइटम-सूची ब्लॉक के अंदर स्थित है*/ पृष्ठभूमि-रंग:#F7F7F7; बॉर्डर:1px सॉलिड #EFEFEF; मार्जिन-टॉप:5px; पैडिंग:4px ; ) a.button,a.button:visited( /* चेकआउट बटन */ डिस्प्ले:कोई नहीं; ऊँचाई:29px; चौड़ाई:136px; पैडिंग-टॉप:15px; मार्जिन:0 ऑटो; ओवरफ्लो:छिपा हुआ; रंग:सफ़ेद; फ़ॉन्ट - आकार: 12px; फ़ॉन्ट-वजन: बोल्ड; टेक्स्ट-ट्रांसफॉर्म: अपरकेस; बैकग्राउंड: यूआरएल (img/button.png) नो-रिपीट सेंटर टॉप; /* केवल बैकग्राउंड इमेज का शीर्ष प्रदर्शित करें */) ए.बटन: होवर (पृष्ठभूमि-स्थिति:नीचे; /* होवर पर, हम पृष्ठभूमि छवि का निचला भाग दिखाते हैं */ पाठ-सजावट:कोई नहीं; ) /* कुछ कम दिलचस्प शैलियाँ */ ए, ए:विज़िट किया गया (रंग:#00बीबीएफएफ; पाठ- सजावट: कोई नहीं; रूपरेखा: कोई नहीं; ) ए: होवर (पाठ-सजावट: रेखांकित; ) एच 1 (फ़ॉन्ट-आकार: 28पीएक्स; फ़ॉन्ट-वजन: बोल्ड; फ़ॉन्ट-परिवार: "ट्रेबुचेट एमएस", एरियल, हेल्वेटिका, सेन्स-सेरिफ़ ; :48px; ) .tutorialzine h3(रंग:#F5F5F5; फ़ॉन्ट-आकार:10px; फ़ॉन्ट-वजन:बोल्ड; मार्जिन-बॉटम:30px; पाठ-रूपांतरण:अपरकेस; ) .ट्यूटोरियल-जानकारी (रंग: सफेद; पाठ-संरेखण: केंद्र; पैडिंग: 10px; मार्जिन-टॉप: -20px;)

कोई भी डेवलपर हमें बताएगा कि हमसे यहां कुछ छूट गया है। जैसा कि आपने संभवतः अनुमान लगाया होगा, IE6 के लिए विशेष उपचार प्रक्रियाएं हैं।

व्यक्तिगत रूप से, मैं जल्द ही अपनी सभी परियोजनाओं में IE6 का समर्थन बंद करने की योजना बना रहा हूं - यदि यह IE6 के लिए नहीं होता, तो उपरोक्त कोड एक चौथाई छोटा होता, और मुझे इसे डीबग करने में इतना समय नहीं लगाना पड़ता।

लेकिन, किसी भी स्थिति में, हमें IE6 को यह समझाने की आवश्यकता है कि हम उससे क्या कराना चाहते हैं:

डेमो.php

.pngfix (व्यवहार: url(pngfix/iepngfix.htc);) /* यह एक विशेष htc फ़ाइल है जो IE6 पारदर्शिता समस्याओं को ठीक करती है */ .tooltip(width:200px;); /* टूलटिप्स के लिए एक डिफ़ॉल्ट चौड़ाई प्रदान करें */

महान। अब, आइए अंतिम PHP पर एक नज़र डालें।

चरण 4 - पीएचपी

हम PHP का उपयोग कई तरह से और अलग-अलग जगहों पर करते हैं। सबसे पहले, आइए देखें कि मुख्य पृष्ठ पर उत्पाद सूची कैसे बनती है।

डेमो.php