6. září 2015
Jednoho dne jsem dostal bláznivý nápad napsat sérii příspěvků o různých přístupech k organizaci javascriptového kódu. Tato myšlenka vznikla, když jsem studoval React.js pro práci a byl jsem potěšen některými nápady, které položili její autoři. Chtěl jsem si to víc osahat, a protože psát pozdravy z dokumentace je nuda, potřeboval jsem nějaký nápad. Když už jsem začal blogovat na téma web development, proč si nevytvořit jednoduchou, ale víceméně srozumitelnou aplikaci s využitím různých knihoven a frameworků? A nejen reakce, ale jakékoli další, na které zlá a zanícená mysl dosáhne. Jako testovací aplikaci vezmu jednoduchý internetový obchod s katalogem a nákupním košíkem. Trik bude v tom, že kód pro katalog i košík bude napsán v javascriptu. Vozík na přední straně není nejlepším řešením pro skutečné projekty, ale pro malé weby a pro studijní účely bude dobře fungovat. Naučit se React nějakou dobu zabere, proto vás nejprve pobavím článkem, kde popíšu proces tvorby naší aplikace bez použití knihoven a frameworků, ale s využitím modulů JavaScriptu. Mým hlavním cílem je ukázat různé přístupy k tvorbě aplikací v javascriptu. Nebudu se příliš obtěžovat s rozložením, udělám rozložení pomocí bootstrapu a zaměřím se hlavně na kód javascriptu. S DOM budeme manipulovat pomocí známého dobrého jquery. Připojíme také podtržítko pro práci s daty a html šablonami. Data pro katalog načteme z externího souboru json a košík uložíme do localStorage. Takže, začněme...
Nápad aplikace a operační schéma.Internetový obchod je tedy v popředí. Co od něj chceme? Chceme, aby bylo možné alespoň zobrazit katalog produktů, přidat je do košíku, prohlížet tento košík, měnit počet produktů v něm a mazat omylem přidané produkty, přepočítat cenu objednávky. Navíc přidáme úložiště dat do localStorage, aby po opětovném načtení stránky náš košík neupadl v zapomnění.
Upozorňujeme, že se nejedná o jednostránkovou aplikaci. Vytvoříme 2 html stránky, katalog a košík, ale budou sloužit pouze jako framework pro hlavní kód. Hlavním kódem je stále javascript.
Funkčnost podrobněji.Hlavní menu - 2 tlačítka, katalog a košík. V menu vedle nápisu "košík" je zobrazen počet vybraných produktů. Stránka indexu je hlavní stránka obchodu, známá také jako katalog. Jejich produkty načítáme z externího souboru json. Produkty mají pole: id, name, price, img. Každý produkt má tlačítko "Přidat do košíku". Seznam produktů ukládáme do localStorage (id, název, počet, cena). Košík - tabulka s vybranými produkty. Zobrazujeme id a název produktu, jeho množství a množství. Pod tabulkou uvádíme celkové množství veškerého zboží. Při změně množství zboží a jeho smazání měníme všechny související údaje. Katalog a košík navrhneme jako samostatné moduly.
Můžeme vidět, s čím skončíme. Zkuste přidávat položky do košíku, chodit do něj, měnit množství a mazat položky a uvidíte, jak má obchod fungovat. Nebo si zdroje můžete rovnou stáhnout z tohoto odkazu.
Struktura souboruDo kořene projektu umístíme 2 soubory: index.html (katalog) a cart.html (košík). A několik složek: css, tam je bootstrap.min.css a main.css - naše styly. Složka dat obsahuje jeden soubor zboží.json - naše produkty. fonts ukládá fonty z ikon bootstrapu. img - obrázky produktů a načítací gif, který ukážeme návštěvníkům stránek při načítání katalogu a košíku. Složka js je rozdělena do 2 podsložek: dodavatel a moduly. Vendor obsahuje knihovny, které potřebujeme: jquery a underscore a modules obsahuje moduly naší aplikace. Jsou pouze 3: main.js je zodpovědný za inicializaci aplikace, katalog slouží k zobrazování produktů, košík slouží k ovládání nákupního košíku.
Malá odbočka: Záměrně jsem do našeho projektu nezavedl zbytečnou logiku. Je dobrou praxí vyvíjet s přístupem MVC, rozdělit kód na modely, řadiče a pohledy a tyto části rozdělit do samostatných souborů kvůli přehlednosti. O správnosti použití tohoto přístupu pro naprosto všechny projekty lze dlouze polemizovat, ale v našem konkrétním příkladu se od tohoto postulátu vzdálíme a veškerý kód pro správu košíku umístíme do jednoho souboru a v rámci něj logicky oddělenou práci s daty od značkování.
Začněme vývoj.Nebudu podrobně popisovat každý řádek kódu, to by zabralo příliš mnoho místa a času. V článku se podíváme na hlavní body a celý kód lze zobrazit ve zdrojovém kódu na výše uvedeném odkazu. Kód s podrobnými komentáři.
Začít.
Vytvořme soubory index.html a cart.html v kořenovém adresáři našeho projektu. Každý soubor je standardní HTML5 šablona. V hlavovém bloku propojíme font Ubuntu z Google Fonts a 2 css soubory: bootstrap.min.css a naše vlastní main.css styly.
Webděvkin. Internetový obchod. Javascript Na konec stránky, před koncovou značku body, zařadíme skripty v tomto pořadí: Markup for index.html
Něco zajímavého: v datové stránce značky body uvádíme název stránky a prvek s id="total-cart-count", který bude obsahovat počet produktů přidaných do košíku. Seznam produktů katalogu se zobrazí v seznamu id="zboží". Při načítání stránky umístíme do seznamu náš načítací gif, aby se uživatelé nenudili čekáním na načtení katalogu.
Značka pro cart.html
Ani zde není nic zvláštního: prázdná tabulka košíku, nápis „celkem“ a tlačítko objednat (jeho funkci nebudeme implementovat). Obsah košíku se zobrazí v tbody id="cart", nyní je na tomto místě již známý gif. Poznámka: konvence pro kód html a css.V layoutu se vždy snažím nezapomenout na pár bodů a doporučit vám je.
Za prvé: vždy píšeme ve třídách a pouze ve třídách. Žádná ID v css. id je potřeba pro kód JavaScript – pro rychlé získání přístupu k prvku DOM.
A za druhé: pokud v kódu js potřebujeme přistupovat k mnoha prvkům (mnozí tlačítka pro přidání do košíku), pak prvkům přiřadíme třídy s předponou „js-“. A tyto „js“ v kódu css nepoužíváme. Zpočátku se tyto dohody zdají zbytečné, ale výhody se rychle stanou jasnějšími, jak projekt roste. Je lepší si na tento styl hned zvyknout, zejména proto, že jej používá mnoho vývojářů.
Nejprve si vytvořte soubor pro uložení našeho zboží: data/goods.json
[ ( "id": "1", "name": "Lenovo Notebook", "cena": "18000", "img": "img/cars/notebook_lenovo.jpg" ), ( "id": "2" , "name": "Nikon Camera", "price": "25000", "img": "img/cars/camera_nikon.jpg" ), ( "id": "3", "name": "Apple ipad" , "price": "35000", "img": "img/cars/ipad.jpg" ), ( "id": "4", "name": "Samsung Galaxy", "price": "20000", "img": "img/cars/phone_galaxy.jpg" ), ( "id": "5", "name": "SUPRA TV", "price": "19000", "img": "img/cars/ tv_supra.jpg" ) ] Jak můžete vidět, toto je běžné pole json se čtyřmi poli, které potřebujeme. Nyní přejdeme k vytvoření adresáře. Než ale začneme psát js kód, budeme muset napsat nějaké další označení pro zobrazení jednotlivého produktu. K dynamickému generování jednotlivých produktů použijeme šablony HTML kódu knihovny podtržení. Pokud neznáte šablony podtržení, mám . Nebudu se tím zabývat, ale jednoduše uvedu kód šablony, zejména proto, že je to docela triviální a nevyžaduje dlouhé diskuse: Co se stane v tomto kódu? Šablona podtržítka je běžný řetězec, do kterého se dosazují požadovaná data. Je to dobrý způsob, jak oddělit logiku a data od prezentace. Celá myšlenka šablon spočívá v tom, že nevíme, jak se data získávají, ale víme, jak by se měla zobrazovat. V našem příkladu zadáme pole zboží zboží (ze souboru zboží.json), procházíme všechny zboží ve smyčce pomocí každé funkce knihovny podtržení a pro každý produkt zobrazujeme vlastní označení nahrazující produkt. id, jméno, obrázek a cena na správných místech. Věnujte pozornost atributům data tlačítka "Přidat do košíku", budou použity v budoucnu. Výše uvedený kód umístíme do těla souboru index.html. Dále uvidíme, jak propojit data a naši šablonu podtržení.
Psaní modulu katalogu jsKód souboru Catalog.js bude velmi krátký
"použít přísné"; // Modul katalogu var katalog = (funkce($) ( // Inicializace funkce modulu init() ( _render(); ) // Vykreslení funkce katalogu _render() ( var template = _.template($("#catalog) -template ").html()), $zboží = $("#zboží"); $.getJSON("data/zboží.json", funkce(data) ( $zboží.html(šablona((zboží: data)) )) ; )); ) // Export mimo return ( init: init ) ))(jQuery); Zde pomocí uzávěru deklarujeme proměnnou modulu katalogu, napíšeme funkci init, která volá funkci _render, která je pro nás nejzajímavější, a exportujeme init ven, přičemž umožňujeme volání Catalog.init() z jiných aplikačních modulů. Ve skutečnosti se obejdete bez další funkce init, ale vždy je lepší deklarovat veřejnou funkci init ve všech modulech kvůli konzistenci. V tomto případě funkce _render začíná znakem _, což ukazuje, že tato funkce je soukromá a neměla by přesahovat hranice modulu. Pomocí tohoto přístupu již v kódu modulu vidíme, co se používá v jiných modulech a co je určeno pouze pro interní použití. Druh zapouzdření kódu, jako v OOP.
Podívejme se na funkci _render. Nejprve deklarujeme proměnnou template = _.template($("#catalog-template").html()).
_.template je funkce podtržení, která vykresluje html značky pomocí html šablony a jejích dat.
$("#catalog-template").html() - obsah šablony, tzn. jen provázek. $.getJSON přijímá data z externího souboru a předává naše pole produktů zpětnému volání. Výraz šablona((zboží: data)) znamená, že funkci šablony předáme objekt s daty a na jeho základě vygenerujeme HTML řetězec. Tento řetězec se vloží na stránku pomocí $goods.html(htmlString). Nyní je vše, co je potřeba k načtení katalogu na stránku index.html, volání funkce Catalog.init().
Konečně se dostáváme k nejzajímavější části našeho projektu – koši. Náš modul bude rozdělen do 3 logických částí:
- 1 - logika pro práci s daty
- 2 - práce s DOM událostmi
- 3 - obecné inicializační a konfigurační funkce
Asi jste si všimli, že exportuji nejen init, ale i všechny funkce související se zpracováním dat. To bylo provedeno za účelem usnadnění testování kódu. Jak se testy provádějí? Existují 2 způsoby: ruční a jednotkové testy. Při ručním testování voláme funkce modulu v konzoli prohlížeče a okamžitě vidíme výsledek. Například zavoláním cart.add((id: 1, jméno: "notebook", cena: 30000, počet: 2)) můžeme okamžitě vidět změny v konzoli a ujistit se, že data byla skutečně přidána ( nebo se něco pokazilo Takže). Oddělili jsme logiku práce s daty od ostatních funkcí a viděli jsme, že testování tímto způsobem je mnohem zábavnější než klikání na tlačítka a kontrola obsahu localStorage po každém kliknutí. Druhá metoda se sama navrhne, když nás omrzí psaní příkazů do konzole a konečně přijdeme na unit testování kódu. Napíšu o tom v některém z připravovaných článků.
AKTUALIZOVÁNO: Pro zájemce o unit testing vyšel článek: unit testy na frontě aneb učení jasmine.js. Ukazuje, jak otestovat kód pomocí našeho nákupního košíku pomocí oblíbené knihovny jasmine.js.
Zápis funkcí zpracování datCelkem napíšeme 11 funkcí:
- 1. updateData - aktualizujte data z localStorage, obsah zapište do proměnné cartData
- 2. getData - návrat dat
- 3. saveData - uložte košík do localStorage
- 4. clearData - vymazání košíku
- 5. getById – vyhledejte položku košíku podle ID produktu
- 6. přidat - přidat produkt do košíku
- 7. odebrat - odebrat položku z košíku
- 8. changeCount - změna množství
- 9. getCount - vrátí počet unikátních položek v košíku
- 10. getCountAll - vrátí počet všech položek v košíku
- 11. getSumma - vrátí celkovou částku objednávky
Zajímavostí je, že každá funkce vrací nějaká data: celý košík, přidaný produkt nebo celkovou částku. V modulu nejsou použita všechna vrácená data, ale všechna usnadňují testování. Také vidíme, že v localStorage ukládáme serializovanou řadu produktů. Funkce přidat poskytuje podmínku: pokud přidáme položku, která již je v košíku, nevznikne duplicitní položka, ale zvýší se množství stávající. Když množství konkrétního produktu klesne na nulu, je odstraněn z košíku.
Inicializace nastavení. Výchozí nastavení.Před psaním renderovacích funkcí a obslužných rutin událostí se vraťme trochu zpět a podívejme se na inicializaci nastavení modulu. Funkce _initOptions zkopíruje do proměnné opts všechna nastavení předaná modulu košíku při jeho vytvoření.
// Inicializuje funkci nastavení _initOptions(options) ( var defaultOptions = ( renderCartOnInit: true, // zda se má vykreslit košík při inicializaci renderMenuCartOnInit: true, // zda se má vykreslit počet produktů v nabídce při inicializaci elAddToCart: ". js-add-to-cart ", // selektor pro tlačítko Přidat do košíku attrId: "data-id", // atribut data pro id produktu attrName: "data-name", // atribut data pro název produktu attrPrice: "data-price", // atribut data pro cenu produktu attrDelta: "data-delta", // atribut data ukazující, o kolik změnit množství produktu v košíku (-1 a 1) elCart: " #cart", // selektor pro obsah košíku elTotalCartCount: "#total-cart-count", // selektor pro počet položek v košíku elTotalCartSumma: "#total-cart-summa", // selektor pro celkovou objednávku množství elCartItem: ".js-cart-item", // selektor pro jednotlivou položku košíku elCartCount: ".js-count", // selektor pro množství jednotlivého produktu elCartSumma: ".js-summa", // selektor pro množství jednotlivého produktu elChangeCount: ".js-change-count", / / selektor pro tlačítka změny množství elRemoveFromCart: ".js-remove-from-cart", // selektor pro tlačítko pro odebrání z košíku elOrder: "#order" // volič pro tlačítko pokladny ) _.defaults(options || (), defaultOptions); opts = _.klon(volby); ) Nejprve deklarujeme výchozí nastavení a poté je „přilepíme“ daty, která přicházejí zvenčí. U malé aplikace, jako je ta naše, nebylo nutné implementovat možnost přizpůsobení modulu. Ale toto malé zvýšení kódu nám dává větší flexibilitu při přesunu tohoto modulu do jiného projektu.
Vykreslení košíku a html šablonaNejprve si vytvoříme šablonu pro zobrazení košíku a umístíme ji do části těla souboru cart.html.
Vše je zde známé z podobné funkce v katalogu. ID produktů umístíme do atributů dat, aby bylo jasné, se kterými aktuálně pracujeme. Atribut data-delta ukazuje, zda se má po kliknutí na toto tlačítko zvýšit nebo snížit množství produktu.
Vykreslovací funkce. // Vykreslení funkce košíku renderCart() ( var template = _.template($("#cart-template").html()), data = (zboží: cartData ); $(opts.elCart).html(template ( data)); renderTotalCartSumma(); ) // Vykreslení počtu produktů ve funkci nabídky renderMenuCart() ( var countAll = getCountAll(); $(opts.elTotalCartCount).html(countAll !== 0 ? countAll: " "); ) // Funkce vykreslení celkového součtu zboží renderTotalCartSumma() ( $(opts.elTotalCartSumma).html(getSumma()); ) Operace s DOM jsou tradičně obtížné, takže vykreslíme celý košík, ale když generování množství a množství, budeme konkrétně odkazovat na prvky. Obsluha událostí.Blížíme se k dokončení...
Napišme pomocnou funkci pro získání položky košíku podle jejího id. Bude se nám hodit při změně množství a mazání zboží
// Vyhledání produktu v košíku podle funkce id findCartElemById(id) ( return $(opts.elCartItem + "[" + opts.attrId + "=""+id+""]"); ) Řádek vypadá děsivě, ale význam spočívá v hledání takového prvku $(.js-cart-item“).
Celkem budeme mít 4 klikací nástroje: přidání do košíku, změna množství, smazání a zadání objednávky. Podívejme se:
// Přidat do košíku funkci _onClickAddBtn() ( $("body").on("click", opts.elAddToCart, function(e) ( var $this = $(this); add(( id: +$this. attr(opts.attrId), name: $this.attr(opts.attrName), price: +$this.attr(opts.attrPrice), count: 1 )); renderMenuCart(); alert("Položka přidána do košíku" ); )); ) // Změňte počet položek ve funkci košíku _onClickChangeCountInCart() ( $("body").on("click", opts.elChangeCount, function(e) ( var $this = $(this ), id = +$this.attr(opts.attrId), delta = +$this.attr(opts.attrDelta), $cartElem = findCartElemById(id), cartItem = changeCount(id, delta); if (cartItem.count ) ( $ cartElem.find(opts.elCartCount).html(cartItem.count); $cartElem.find(opts.elCartSumma).html(cartItem.count * cartItem.price); ) else ( $cartElem.remove(); ) renderMenuCart( ); renderTotalCartSumma(); )); ) // Odebrání produktu z košíku funkce _onClickRemoveFromCart() ( $("body").on("click", opts.elRemoveFromCart, function(e) ( if( !confirm("Smazat položku z košíku?")) return false; var $this = $(this), id = +$this.attr(opts.attrId), $cartElem = findCartElemById(id); odstranit(id); $cartElem.remove(); renderMenuCart(); renderTotalCartSumma(); )); ) // Zadejte objednávku funkce _onClickOrder() ( $("body").on("click", opts.elOrder, function(e) ( // Nechám vás napsat kód pro zadání objednávky a odeslání dat na server sami upozornění("Zadat objednávku:-)"); )); )
Na poznámku. Kód související s vykreslováním a zavěšováním událostí by se dal výrazně snížit použitím takového jednoduchého triku. Kód pro vykreslení košíku, množství a množství spojíme do jedné renderovací funkce a po jakékoliv manipulaci s košíkem ji zavoláme. To znamená, že pro každou událost je schéma následující: zavolali požadovanou metodu zpracování dat - VŠECHNO bylo vykresleno. Pak se zbavíme kontrol typu „zda byla položka odstraněna z košíku po snížení jejího množství“ a volání několika renderovacích funkcí místo jedné. U malých projektů je to opodstatněné, ale když vaše aplikace obsahuje hromadu widgetů, složité rozvržení a data budou přijímána nejen klikáním uživatelů, ale také online z různých zdrojů, překreslení celého obsahu stránky negativně ovlivní výkon prohlížeče. Proto jsem i v našem jednoduchém případě zvolil trochu složitější, ale správnější schéma.
Sestavení modulu koše do jednoho celkuHlavní kód je již napsán, zbývá nám jen napsat funkci pro inicializaci košíku a handlery událostí vazby. Pojďme z opaku, manipulátoři:
// Připojujeme funkci událostí _bindHandlers() ( _onClickAddBtn(); _onClickChangeCountInCart(); _onClickRemoveFromCart(); _onClickOrder(); ) Myslím, že zde bez velkého vysvětlení shromažďujeme dříve napsané funkce do hromady. Inicializace: // Inicializace funkce modulu init(options) ( _initOptions(options); updateData(); if (opts.renderCartOnInit) ( renderCart(); ) if (opts.renderMenuCartOnInit) ( renderMenuCart(); ) _bindHandlers(); ) Proč jsme zavedli samostatná nastavení pro renderCartOnInit a opts.renderMenuCartOnInit? Jednoduše proto, že na stránce katalogu potřebujeme inicializovat košík (v nabídce zobrazujeme počet přidaných produktů), ale nemusíme jej vykreslovat. Abychom nekomplikovali logiku zbytečnými kontrolami, tyto možnosti jsme oddělili.
Celý kód košíkuNa kód pro celý košík jsme se již podívali v článku, ale abychom si to ještě jednou připomněli, zde je celý modul v souboru cart.js.
Hlavní aplikační modulPravděpodobně i toho nejvytrvalejšího čtenáře už čtení dopisů docela unavuje, a tak spěchám s dokončením svého pojednání.
Soubor main.js je hlavní modul, spouštění aplikace, královský modul.
"použít přísné"; // Aplikační modul var app = (function($) ( var $body = $("body"), page = $body.data("page"), options = ( elAddToCart: ".js-add-to-cart ", attrId: "data-id", attrName: "data-name", attrPrice: "data-price", attrDelta: "data-delta", elCart: "#cart", elTotalCartCount: "#total-cart-count ", elTotalCartSumma: "#total-cart-summa", elCartItem: ".js-cart-item", elCartCount: ".js-count", elCartSumma: ".js-summa", elChangeCount: ".js-change- count", elRemoveFromCart: ".js-remove-from-cart", elOrder: "#order" ), optionsCatalog = _.extend(( renderCartOnInit: false, renderMenuCartOnInit: true ), options), optionsCart = _.extend(( renderCartOnInit: true, renderMenuCartOnInit: true ), možnosti); funkce init() ( if (page === "katalog") ( Catalog.init(); cart.init(optionsCatalog); ) if (stránka === "košík ") ( cart.init(optionsCart); ) ) return ( init: init ) ))(jQuery); jQuery(document).ready(app.init); Myšlenka je následující: deklarujeme hlavní modul, nastavení aplikace (v našem případě duplikují výchozí možnosti), definujeme aktuální nastavení modulu stránky a košíku pro aktuální stránku a nakonec inicializujeme potřebné moduly. Všechny tyto věci jsou uvedeny do činnosti magickou čárou jQuery(document).ready(app.init);
Pojďme si to shrnout.Sepsali jsme tedy malou aplikaci pro jednoduchý internetový obchod s katalogem a nákupním košíkem.
AKTUALIZOVÁNO: Vzhledem k velké oblíbenosti tohoto článku a zájmu o téma internetových obchodů obecně bylo natočeno a publikováno pokračování článku: Realizace zadání objednávky v internetovém obchodě na klientovi a serveru. Pokrývá celý cyklus sběru dat o klientovi, zadání objednávkového formuláře, odeslání požadavku Ajax na server, vytvoření tabulek v databázi a přidání stejných dat, stejně jako zasílání dopisů s objednávkou. Jako obvykle vše s příklady. Zdroje byly aktualizovány. Odeslání objednávky je integrováno s katalogem a košíkem probíraným v tomto článku. Vypadá to jako kompletní aplikace, připravená k použití.
Další aktualizace: článek o přidání způsobu doručení do internetového obchodu je připraven. Čtěte zde
Přestože hlavním cílem bylo demonstrovat modulární přístup při vývoji v javascriptu a oddělení logiky od prezentace, modul košíku se ukázal jako zcela soběstačný a nezávislý. Na přání jej můžeme zařadit do jiných projektů. Máme pouze 2 závislosti modulu: jquery a podtržítko. I když věřím, že lidé obeznámení s oběma knihovnami je přidávají do téměř jakéhokoli svého projektu.
Mnoho bodů v naší aplikaci je docela kontroverzních. Neexistuje striktní oddělení logiky a prezentace, tyto funkce jsou sloučeny do jednoho modulu. Šablony podtržení jsou také zabudovány přímo do kódu stránky, což také není nejlepší postup; musíte je umístit do samostatných souborů. Záměrně jsem konstrukci příliš nekomplikoval. V článku jsem se podíval na příklad tvorby kódu, který je na jednu stranu dostatečně modulární, aby se dal pohodlně testovat, udržovat v budoucnu nebo extrahovat nějaké nápady pro vaše budoucí aplikace, ale na druhou stranu ne tak složitý, že jeho pochopení trvá příliš dlouho. Nakonec jsou knihovny a frameworky vytvořeny pro seriózní vývoj JavaScriptu a dříve nebo později všichni dojdeme k pochopení, že je musíme znát a studovat. Backbone, Angular, Ember, React, je jich spousta a stále se objevují nové. A čím více budeme studovat a učit se o různých přístupech, tím širší jsou naše obzory a tím více možností budeme mít.
Snažím se vytvořit jednoduchý PHP nákupní košík s cenami, produkty, registrací a pokladní oblastí. Hledal jsem na Googlu výukové programy, ale všechny zahrnují SQL, což ještě není v mých dovednostech. Má někdo příklady nebo jiné výukové zdroje, které byste mohli považovat za začátečníka v PHP?
Opět jen pokus o vytvoření jednoduchého PHP nákupního košíku (bez SQL) pomocí polí pro produkty, funkcí pro různé programové úlohy, ověřování formulářů, cookies/relací pro kontinuitu košíku, soubory šablon a potvrzovací/příjmové e-maily.
Předem děkujeme za vaši pomoc!
3 odpovědi
Proč místo kritiky nepomáhat? Pokrytecké, ale co už. Mějte prosím na paměti, že bez SQL databáze se nemůžete "zaregistrovat", ale můžete mít provizorní uživatelská jména a hesla.
Pojďme tedy vytvořit vaši pseudo sql databázi pomocí php.
Potřebujeme tabulku k ukládání uživatelských jmen a hesel k vašemu účtu.
Nyní potřebujeme stůl pro uložení produktů
Máme tedy „tabulku“ našich produktů a „tabulku“ našeho účtu. Nyní je tu ta složitější část, kterou je vytvoření systému, který všechny tyto informace převezme, zobrazí je, umožní vám přihlášení a odhlášení a bude sledovat položky, které máte v košíku.