Mnoho webových aplikácií používa formuláre na zhromažďovanie údajov a odosielanie údajov na server. Formuláre zvyčajne obsahujú niekoľko prvkov na zadávanie údajov rôzne druhy, ako je meno, adresa, dátum narodenia emailová adresa a tak ďalej. HTML podporuje niekoľko typov vstupných prvkov vrátane textové polia, prepínače a začiarkavacie políčka. HTML5 pridalo ďalšie špeciálne prvky, ako je e-mail, pole pre heslo, výber farieb, widgety dátumu a času a posúvače.
Hlavný príklad tohto tutoriálu obsahuje stranu klienta a stranu servera. Klientska časť používa polymér na poskytnutie používateľské rozhranie(formuláre obsahujú veľa typov vstupných prvkov) a rozhranie na synchronizáciu dát s Dart. Klient a server komunikujú pomocou niektorých tried z rôznych knižníc, vrátane streamov, fluxerov, HttpRequest a tak ďalej. Server používa hlavičky CORS na povolenie požiadaviek medzi doménami.
Komentujte Tento článok stavia na tom, čo ste si prečítali v častiach: Vytváranie vlastných prvkov, Používanie rozhrania Futures API, Dynamické spracovanie údajov a mali by ste byť oboznámení s knižnicou Polymer, futures, JSON a HttpRequest.
Všeobecné informácie o formulároch
Formuláre majú vlastnosť akcie, čo je adresa URL na odoslanie údajov formulára a metóda ktorý určuje, akým spôsobom sa majú údaje odosielať. Vlastnosti akcie a metódy je možné definovať priamo v HTML, alebo vo viacerých ťažký prípad alebo ak chcete získať väčšiu kontrolu, môžete napísať kód Dart a použiť knižnice Dart na odhalenie týchto vlastností programovo
Začnime so základmi, len s formulármi HTML, aby sme pochopili vlastnosti akcie a metódy vstupných prvkov a pochopili štandardné správanie formulárov. Nižšie uvedený formulár, priložený štítkom
Použitie atribútov akcie a metódy.
A tu je kód HTML, ktorý do formulára pridáva tri vstupné prvky – textové pole, tlačidlo odoslania a začiarkavacie políčko.
Začiarkavacie políčko je zabalené do štítku, takže hodnotu môžete zmeniť kliknutím na samotné začiarkavacie políčko aj na názov.
Tento kód HTML poskytuje určité automatické správanie.
****
Vytvorí špeciálne tlačidlo, ktoré po kliknutí spôsobí odoslanie údajov formulára. Na základe atribútov akcie a metódy tlačidlo vygeneruje požiadavku a odošle ju na server na zadanú adresu URL.
**name=q** **name="sitesearch**
definuje názov textového poľa a názov začiarkavacieho políčka.
Pre prvky vo formulári, ktoré majú zadaný názov, poskytujú údaje pre tento formulár. IN v tomto príklade, hodnota poskytnutá textovým poľom je hodnotou pre q a začiarkavacie políčko poskytuje hodnotu pre vyhľadávanie na stránkach, oba tieto parametre sú súčasťou správnej adresy URL pre Dopyt Google. Keď používateľ klikne na tlačidlo, do adresy URL vyhľadávania sa pridá názov a zodpovedajúca hodnota. Tu je príklad žiadosti:
Http://www.google.com/search?q=Cookbook&sitesearch=dartlang.org
Tento príklad bol vytvorený úplne bez akéhokoľvek Dart alebo Javascript kódu. Pretože je veľmi jednoduchý, môže používať bežné správanie HTML: verejne prístupné a ľahko vytvoriteľné adresy URL, ako aj bežnú požiadavku GET. Pre formuláre, ktoré obsahujú veľké množstvoúdaje, alebo pre webových aplikácií, ktorý komunikuje so špecializovaným serverom, zvyčajne potrebujete spracovať formulár programovo.
Nasledujúci príklad ukazuje zložitejší formulár, ktorý programovo odosiela údaje na server pomocou požiadavky POST.
Príklad konkrétneho slambooku
Táto časť obsahuje dva programy ako základné príklady.
Prvým je bežný serverový program s názvom slambookserver, ktorý počúva ďalej lokálny počítač port 4040 a spracováva požiadavky POST a OPTIONS vytváraním správ a odoslaním potvrdenia klientovi. Server používa hlavičky CORS, aby umožnil aplikácii používať požiadavky odoslané z iných serverov.
Druhým je klientsky program s názvom slambook, ktorý poskytuje formulár, do ktorého môže používateľ zadávať informácie. Tento program používa Polymér na dvojitú dátovú väzbu medzi vstupnými prvkami a premennými Dart. Keď používateľ klikne na tlačidlo, kód Dart skonvertuje údaje na reťazec JSON, odošle požiadavku OPTIONS na získanie povolenia servera a potom odošle požiadavku POST na odoslanie údajov. Po prijatí požiadavky zo servera sa táto zobrazí klientovi.
Nasledujúci diagram ukazuje postupnosť komunikácie medzi serverom a klientom v tomto príklade.
Skús to! Zadajte akékoľvek údaje a kliknite na tlačidlo Odoslať.
Poznámka k verzii. Aplikácia slambook je kompatibilná s polymer.dart 0.9.
Požiadavka vráti správu „Žiadny server“, pretože ste nespustili server na vašom počítači. Poďme to napraviť.
Spustenie servera
Zdrojový kód hlavného serverového programu slambookserver.dart si môžete stiahnuť z príkladov tutoriálu
Bežať serverový program od príkazový riadok
% dart slambookserver.dart Počúvanie GET a POST na http://127.0.0.1:4040
Teraz môžete znova skúsiť odoslať údaje z aplikácie slambook vyššie.
Komentujte: Ak už port 4040 používa nejaký iný program, server vráti chybovú správu a ukončí vykonávanie. Program na tejto stránke očakáva, že slambookserver bude umiestnený na lokálnom počítači, port 4040. Preto, aby aplikácia fungovala, musíte zabiť ďalší proces a znova spustiť slambookserver. Alebo môžete zmeniť číslo portu na serveri a klientsky program. Vyhnite sa používaniu 3030, pretože ho používa Dart Editor. Potom spustite klienta a server na vašom lokálnom počítači.
Zvyšok tohto návodu vysvetľuje kód servera a klienta.
O klientskej strane sa dozviete o:
Odoslanie údajov formulára
Obnoviť formulár
Použitie polyméru na prepojenie údajov formulára
Serverová časť v tejto časti bude hovoriť o:
CORS hlavičky
Spracúvajú sa požiadavky OPTIONS
Spracovanie žiadostí POST
Odoslanie údajov formulára
Najprv sa pozrime na to, ako sa údaje odosielajú na server.
Pripomeňme, že príklad search_form bol založený na použití atribútov action a method na určenie účelu a metódy odoslania formulára. Pamätajte tiež, že príklad search_form je založený na automatickom správaní špeciálne tlačidlo odosielanie. Na druhej strane, príklad slambooku je priamo zapojený do procesu odosielania:
Po prvé, vo formulári nie je definovaná ani akcia, ani metóda
Po druhé, tlačidlo Odoslať má v Dart obsluhu kliknutia
Po tretie, obsluha kliknutia prepíše automatické správanie tlačidla Odoslať
Nakoniec sa údaje formulára odošlú na server pomocou knižníc Dart
Formulár v príklade slambooku predstavuje vlastný prvok tute-slambook-forma, ktorý je prezentovaný s nasledujúcim kódom HTML:
Všimnite si absenciu atribútov akcie a metódy. Namiesto toho je správanie tlačidla odoslania definované v obslužnom nástroji kliknutia na tlačidlo Dart. Nižšie je uvedený HTML kód, ktorý vytvorí tlačidlo Odoslať a pripojí ho k ovládaču Dart.
A samotný kód pre obsluhu kliknutia na tlačidlo submitForm():
Pozrime sa na každý prvok kódu handlera
Zrušiť štandardný obslužný program
Toto je udalosť bez atribútov akcie A metóda, tlačidlo Odoslať obsahuje automatické správanie, ktoré v príklade slambooku nie je potrebné. Preto prvý riadok kódu obslužného programu volá e.preventDefault(), aby prepísal predvolené správanie tlačidla.
Void submitForm(Event e) ( e.preventDefault(); // Nerobte predvolené odosielanie. … )
Nastavenie a odoslanie požiadavky POST
Ďalší kus kódu vytvorí objekt HttpRequest. Tento kód používa nové na vytvorenie inštancie objektu HttpRequest, ktorý sa používa na nastavenie a odoslanie požiadavky POST. Trieda HttpRequest má zodpovedajúcu funkciu getString(), takže môžete používať a odosielať bežné žiadosti GET na URL.
Ďalší riadok poskytuje objektu HttpRequest volanú funkciu spätného volania onData, ktorý sa volá po prijatí odpovede zo servera. Na podrobnosti deklarácie funkcie onData() sa pozrieme neskôr.
Dôležité: Pred odoslaním požiadavky musíte zaregistrovať funkciu spätného volania!
Request = new HttpRequest(); request.onReadyStateChange.listen(onData); var url = "http://127.0.0.1:4040"; request.open("POST", url); request.send(slambookAsJsonData());
Nakoniec funkcia odošle údaje formulára na server ako reťazec JSON. Niekedy sa údaje odosielajú po častiach. Tento príklad je však dostatočne malý na to, aby sa údaje odosielali naraz. Táto požiadavka je asynchrónna, takže metóda send() sa dokončí hneď po odoslaní požiadavky.
Čaká sa na odpoveď zo servera
Objekt HttpRequest komunikuje so serverom. Stav môžete získať pomocou poľa readyState Objekt HttpRequest. Pripravený stav môže trvať päť rôzne významy: neodoslané (neodoslané), otvorené (otvorené), hlavičky prijaté (prijaté hlavičky), načítavanie (načítavanie) a dokončené (hotovo). Keď sa zmení stav pripravenosti, HttpRequest vyvolá udalosť a zavolá sa funkcia spätného volania onData().
Pripomeňme si riadok kódu, v ktorom je zaregistrovaná obsluha udalosti onReadyStateChange:
Request.onReadyStateChange.listen(onData);
Jediným požadovaným argumentom metódy listen() je funkcia spätného volania s podpisom: void onData(T). Metóda listen() vám tiež umožňuje definovať tri dodatočné argumenty, ako je napríklad obsluha chýb.
Nižšie je uvedená funkcia spätného volania onData():
Void onData(_) ( if (request.readyState == HttpRequest.DONE && request.status == 200) ( // Údaje uložené OK. serverResponse = "Server Sez: " + request.responseText; ) else if (request.readyState == HttpRequest.DONE && request.status == 0) ( // Stav je 0...s najväčšou pravdepodobnosťou server nebeží. serverResponse = "Žiadny server"; ) )
Prvá vec, ktorú kód ukazuje, je, či bola požiadavka úspešne dokončená. Ak áno, obsah odpovede sa umiestni do riadku s názvom serverResponse, ktorá je viazaná na hodnotu prvok textarea aplikácie slambook. Po zmene reťazca sa používateľské rozhranie automaticky aktualizuje a používateľovi sa zobrazí správa.
Ak je požiadavka vykonaná s chybou, program vypíše serverResponse chybové hlásenie, ktoré sa zobrazí používateľovi.
Resetovanie údajov formulára
Tlačidlo reset je špeciálny vstupný prvok HTML, ktorý predvolene vymaže hodnoty zadané do tohto formulára. Namiesto toho chceme, aby tlačidlo obnovilo hodnoty formulára na pôvodné hodnoty. Preto musí obslužný program kliknutia pre tlačidlo reset prepísať automatické správanie a explicitne vyplniť údaje.
Void resetForm(Event e) ( e.preventDefault(); favoriteThings["mačiatka"] = false; FavoriteThings["dažďové kvapky"] = false; favoriteThings["rukavice"] = false; obľúbenéThings["kanvice"] = false; theData ["firstName"] = ""; theData["favoriteQuote"] = ""; theData["favoriteColor"] = "#FFFFFF"] = "2013-01-01"; 0"; theData["catOrDog"] = "mačka"; theData["hudba"] = 0; theData["zombies"] = false; serverResponse = "Resetovanie údajov."; )
Vytvorenie backendu a počúvanie na porte
Teraz sa pozrime na serverovú časť, ktorá sa nazýva slambookserver, vráti HTTP odpoveď na požiadavku odoslanú z klientskej aplikácie slambook. Kód na strane servera je založený na článku [Using Dart to create JSON Web services (#)
Server počúva port 4040 na lokálnom počítači a spracováva iba požiadavky Typ POST a MOŽNOSTI. Oba typy žiadostí používajú na umožnenie prístupu hlavičky CORS. V prípade požiadaviek POST sa server vráti krátka správa o potvrdení, ktoré obsahuje údaje v formát JSON ktoré dostal zo žiadosti.
Poďme sa pozrieť na kód.
Funkcia main() aplikácie slambookserver je uvedená nižšie. Pomocou triedy HttpServer začne aplikácia slambookserver počúvať na porte 4040 lokálneho počítača po zavolaní funkcie špičková úroveň viazať()
Finálny HOST = "127.0.0.1"; konečný PORT = 4040; void main() ( HttpServer.bind(HOST, PORT).then(gotMessage, onError: printError); )
Funkcia bind() vracia budúcnosť, ktorú možno použiť na získanie hodnoty v budúcnosti (ďalšie informácie prídu už o minútu). Funkcia then() registruje dve funkcie spätného volania ako budúcnosť. Prvá funkcia, gotMessage(), sa volá, keď budúcnosť dostane hodnoty. Po druhé printError zavolal kedy neúspešný pokus spojenia. Chyba sa môže vyskytnúť napríklad vtedy, ak na rovnakom porte už počúva iný program.
Filtrujte požiadavky a volajte zostávajúce metódy na spracovanie každého typu požiadavky na funkciu gotMessage() nižšie.
Void gotMessage(_server) ( _server.listen((požiadavka HttpRequest) ( switch (request.method) ( case "POST": handlePost(request); break; case "OPTIONS": handleOptions(request); break; default: defaultHandler( request ) ), onError: printError);
Na spracovanie iných typov požiadaviek, ako je GET, môžete jednoducho pridať ďalšie hodnoty prípad Napríklad prípad 'GET'.
Trochu o budúcnosti.
Skôr ako sa pozrieme na kód na spracovanie požiadaviek POST a OPTIONS, pozrime sa trochu na futures.
Budúcnosť predstavuje spôsob, ako získať hodnotu niekedy v budúcnosti. Futures používate, aby ste zabránili zablokovaniu programu počas čakania na údaje, napríklad ak je potrebný dlhý výpočet na poskytnutie hodnoty, alebo ak sa hodnota musí prečítať alebo získať pomocou I/O.
Keď sa zavolá funkcia vracajúca budúcnosť, stanú sa dve veci
Funkcia sa zaradí do frontu na vykonanie a okamžite vráti neúplný budúci objekt.
Neskôr, keď je hodnota prijatá, futures objekt opustí s prijatou hodnotou alebo s chybou.
Ak chcete získať hodnotu vrátenú budúcnosťou, použite metódu potom() na registráciu spätného volania.
V tomto príklade klient aj serverová časť používa futures na odosielanie požiadaviek a prijímanie zodpovedajúcich odpovedí. Programy klient-server takmer vždy používajú futures na komunikáciu a iné typy asynchrónny vstup výkon.
Spracovanie požiadaviek OPTIONS
Použitie triedy HttpRequest, klientskej aplikácie slambook odosiela požiadavky, keď používateľ klikne na tlačidlo „odoslať“. Kód ste videli skôr v tomto článku.
Ak sú klient a server rôzneho pôvodu, čo je bežné v aplikáciách, pred POST sa odošle požiadavka na kontrolu pred výstupom. Predbežná žiadosť musí najprv obsahovať požiadavku MOŽNOSTI, aby sa určilo, ktoré žiadosti sú vo všeobecnosti povolené. Trieda HttpRequest automaticky spracováva požiadavky OPTIONS pred výstupom. Na to už nemusíte písať kód na strane klienta.
Server dostane predbežnú požiadavku OPTIONS pred prijatím hlavnej požiadavky. Tu je kód aplikácie slambookserver, ktorá spracováva požiadavky OPTIONS.
Void handleOptions(HttpRequest req) ( HttpResponse res = req.response; addCorsHeaders(res); print("$(req.method): $(req.uri.path)"); res.statusCode = HttpStatus.NO_CONTENT; res. Zavrieť();
Tento kód robí nasledovné:
Získa objekt HttpResponse, ktorý sa stará o to, aby server odoslal odpoveď klientovi
Pridáva hlavičky CORS pre riadenie prístupu
Vytlačí správu do konzoly
Signalizuje, že odpoveď nemá žiadny obsah
Dokončí odpoveď, ktorá bude odoslaná klientovi.
Keď klient dostane požiadavku, hlavička CORS signalizuje, že požiadavky POST budú prijaté.
Nastavenie hlavičiek CORS
Serverová aplikácia používa ďalšia funkcia na pridanie hlavičiek pre požiadavky OPTIONS a POST do odpovede CORS. Funkcia pridá do odpovede servera tri hlavičky Riadenie prístupu(ktoré sú zahrnuté v HttpResponse).
Void addCorsHeaders(HttpResponse res) ( res.headers.add("Access-Control-Allow-Origin", "*, "); res.headers.add("Access-Control-Allow-Methods", "POST, OPTIONS" ); res.headers.add("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
Prvé dva riadky hlavičky CORS umožňujú požiadavky POST a OPTIONS z akéhokoľvek pôvodu. Tretí určuje typ požiadaviek POST a OPTIONS, ktoré server umožňuje prijímať požiadavky len s určitými hlavičkami.
Spracovanie požiadaviek POST
Tu je funkcia, ktorá spracováva požiadavky klienta POST.
Void handlePost(HttpRequest req) ( HttpResponse res = req.response; print("$(req.method): $(req.uri.path)"); addCorsHeaders(res); req.listen((Zoznam)
Rovnako ako požiadavka OPTIONS, slambookserver prijme objekt odpovede HTTP z požiadavky, vytlačí správu do konzoly a do odpovede pridá hlavičky CORS.
Ďalej tento kód počúva údaje od klienta POST žiadosť. Ak Všetky dáta sú pripravené, zavolá sa funkcia spätného volania. Táto funkcia je napísaná na rovnakom mieste. Argument funkcie je zoznam čísel, ktorý obsahuje všetky údaje. Každé číslo je reprezentované kódom, ktorý môže byť reprezentovaný ako znak UTF-16. Ale nemusíte sa toho obávať, pretože metódu môžete jednoducho zavolať String.fromCharCodes previesť na bežný reťazec.
Objekt HttpResponse spravuje toky údajov, ktoré môže server použiť na odoslanie údajov späť klientovi. V rámci funkcie spätného volania zapisuje slambookserver správy a zdrojové údaje ako reťazec do tohto prúdu. Zložitejšie servery s týmito údajmi niečo urobia, napríklad ich uložia na server, spracujú alebo možno aj vyberú peniaze z vášho bankového účtu.
Keď je prúd zatvorený, objekt HttpResponse odošle údaje klientovi.
Príklad aplikácia klient-server slambook môže slúžiť ako východiskový bod pre vašu vlastnú aplikáciu klient-server alebo ako príklad, ako zostaviť vlastné aplikácie.
Tu je ukážka toho, čo by mala klientska časť robiť.
Na zhromažďovanie používateľských údajov použite formuláre.
Umiestnite vstupné polia do svojich formulárov do jednotlivé prvkyúdajov.
Použite polymér na spätná väzba aby boli údaje formulára synchronizované s kódom Dart.
Posielajte údaje priamo (vlastnosti akčné formuláre a metóda)
Alebo programovo (prepíše predvolené správanie kódu tlačidla na odoslanie Dart)
Vytvorte objekt odpovede na serveri z objektu HttpRequest.
Toto by mal server robiť.
Použite HttpServer na konfiguráciu servera a počúvanie na porte.
Spracovať odpovede.
Na povolenie každej požiadavky použite hlavičky CORS.
Odpoveď na požiadavku používa HttpResponse.
Spracúvajte dáta asynchrónne pomocou futures.
Na zapisovanie údajov do odpovede použite prúdy.
Tieto zdroje sú väčšinou založené na knižniciach Dart, ktoré poskytujú podporu pre písanie klientov a serverov. Upozorňujeme, že existujú dve triedy HttpRequest: jedna in šípka:html(pre klientov) a druhý šípka:io(pre servery).
| Zdroj | Knižnica | Popis |
|---|---|---|
| HttpRequest | šípka:html | Klientská strana požiadavky HTTP |
| HttpRequest | šípka:io | Strana servera požiadaviek HTTP |
| HTTPServer | šípka:io | Serverová časť spracováva HTTP komunikáciu so serverom |
| HttpResponse | šípka:io | Časť servera, ktorá sa stará o odosielanie odpovedí na požiadavku |
| Prúdy | šípka:async | Dátový tok |
| Budúcnosť | šípka:async | Spôsob asynchrónneho prijímania údajov |
| JSON | šípka:previesť | Predvolená deklarácia konverzie JSON |
| Polymér | Polymér | Údaje vlastných prvkov priradené k šablóne |
Obojsmerná dátová väzba pomocou polyméru
Príklad slambooku používa Polymér na spätnú väzbu, hodnotu vstupného prvku s premennými Dart. Ak používateľ zmení hodnotu vstupného prvku, pridružená premenná v kóde Dart sa automaticky zmení. Alebo ak sa hodnota zmení v Dart kóde, súvisiaci objekt vlastný prvok sa aktualizuje automaticky. V článku Definovanie vlastných prvkov nájdete ďalšie podrobnosti o dátovej väzbe a polyméri.
Tento príklad tiež používa deklaráciu obsluhy udalosti na zachytenie a spracovanie funkcií pre vstupné prvky.
Pomocou príkladu slambooku môžete zvážiť použitie obojsmernej dátovej väzby na rôzne prvky vstup vrátane nových prvkov HTML5. Táto tabuľka sumarizuje všetky obojsmerné atribúty, ktoré môžete použiť s polymérom:
Použitie atribútu hodnotu v ľubovoľnom vstupnom prvku
Atribút hodnotu funguje na akýchkoľvek vstupných prvkoch a priraďuje hodnotu k reťazcu Dart. Tento príklad používa hodnotu pre zaškrtávacie pole, pole na zadávanie textu, výber farieb, výber dátumu a výber rozsahu.
(Všimnite si, že nejaký kód okolo, napr
Slovník v kóde Dart tzv dáta obsahuje údaje formulára. Objektový kód slovníka je zvýraznený pomocou @pozorovateľné a hovory toObservable() na viazanie.
Slovník obsahuje páry kľúč/hodnota pre každý vstupný prvok, kde kľúčom je reťazec. Hodnoty prvkov spojených s hodnotu sú struny. HTML odkazuje na prvky slovníka pomocou ich názvov (identifikátorov) v Dart. Napríklad hodnota výberu farby je spojená s theData['favoriteColor'].
Použitie selectedIndex v rozbaľovacej ponuke
Element
Použitie skontrolované v začiarkavacích políčkach
Môžete použiť atribút skontrolované Dart booleovskú premennú so samostatným začiarkavacím políčkom. Tu je každé začiarkavacie políčko spojené so samostatnou boolovskou premennou.
Na organizáciu prenosu údajov na server pomocou formulára budete musieť implementovať HTML formulár, do ktorého návštevníci stránky zadajú svoje informácie a PHP kód, ktorého účelom je prijať a spracovať prijaté údaje na serveri.
HTML formulár na odoslanie údajov
Formulár na stránke tvoria značky
, do ktorého sú umiestnené značky vstupného poľa textové informácie, značky pre špeciálne komponenty (napríklad pole so zoznamom), značky pre pole výberu a nahrávanie súboru.* Pre HTML5 je tiež možné umiestniť značky poľa formulára nie do značiek formulára, ale kdekoľvek na stránke. V tomto prípade musíte pre každé takéto pole špecifikovať atribút „form“, aby ste určili, s ktorým formulárom na odoslanie má interagovať.
takže, najjednoduchšia forma odosielanie môže obsahovať nasledujúci kód:
Prvky formulára a ich parametre:
action="myform.php"– atribút „akcia“ určuje, ktorý php súbor spracuje odoslané údaje. V tomto príklade budú údaje odoslané do súboru "myform.php", ktorý sa nachádza v rovnakom adresári ako stránka s formulárom. Ak tento atribút nie je výslovne uvedený, údaje formulára sa odošlú na adresu stránky samotného formulára.
method="post"– parameter metódy určuje spôsob prenosu POST údaje alebo GET. Viac podrobností o tom v článku "Rozdiely medzi metódami POST a GET". Ak atribút explicitne nešpecifikujete, štandardne sa použije metóda GET.
Text "Hodnota A:" A "Hodnota B:" pridané len za účelom dizajnu a prehľadnosti formulára pre užívateľa. Na prenos údajov to nie je potrebné pridávať, ale aby bolo používateľovi jasné, čo má zadať, stojí za to uviesť.
Tagy sa používajú na vytváranie rôznych ovládacích prvkov formulára.
type="text"– atribút „type“ určuje typ poľa. V závislosti od špecifikovaného typu vzhľad prvok a jeho účel. Hodnota atribútu „text“ označuje, že prvok sa v prehliadači zobrazí ako jednoriadkové textové pole, do ktorého môže používateľ zadať reťazec.
name="data1"– atribút „name“ označuje názov alebo skôr index údajov v poli prijatom serverom. Toto je povinný parameter, pomocou ktorého môže obsluha PHP pristupovať k odovzdanej hodnote. Názov je možné zvoliť ľubovoľne, je však vhodnejšie, keď má táto hodnota nejaký jasný význam.
type="submit"– štítok s touto hodnotou parametra "typ" sa zobrazí na stránke ako tlačidlo. V skutočnosti sa zaobídete bez tlačidla na formulári. Ak má formulár napríklad textové polia, odoslanie je možné vykonať jednoduchým stlačením klávesu „Enter“ na klávesnici. Vďaka tlačidlu je však formulár zrozumiteľnejší.
value="Odoslať" !}- V v tomto prípade(for type="submit") definuje iba označenie na tlačidle. Napríklad pre type="text" to bude text, ktorý sa zobrazí v textovom poli.
V dôsledku toho bude tento kód na stránke vyzerať asi takto:
Kliknutím na tlačidlo sa údaje odošlú na zadanú stránku, a ak existuje a funguje správne, údaje sa spracujú.
Spracovanie údajov odoslaných HTML formulárom v PHP
Údaje odoslané opísaným spôsobom sa uložia do superglobálne polia$_POST, $_GET a $_REQUEST. $_POST alebo $_GET bude obsahovať údaje v závislosti od metódy použitej na ich odoslanie. $_REQUEST obsahuje údaje odoslané ktoroukoľvek zo špecifikovaných metód.
$_POST, $_GET a $_REQUEST sú asociatívne polia, ktorého indexové polia sa zhodujú s atribútmi „name“ značiek . V súlade s tým, aby ste mohli pracovať s údajmi v súbore myform.php, môžete priradiť premenné hodnoty prvky takéhoto poľa, pričom názov poľa uveďte ako index:
// pre metódu GET
$a = $_GET[ "údaje1" ];
$b = $_GET[ "údaje2" ];
// pre metódu POST
$a = $_POST[ "údaje1" ];
$b = $_POST[ "údaje2" ];
// pre akúkoľvek metódu
$a = $_REQUEST[ "údaje1" ];
$b = $_REQUEST[ "údaje2" ];
Kontrola vyplnenia polí formulára
Niekedy pri prijímaní údajov musíte skontrolovať, či používateľ odoslal prázdny formulár. Na to môžete použiť funkciu prázdny.
if (prázdne ($_REQUEST["data1" ])) (
ozvena "Pole nie je vyplnené";
} inak(
ozvena "Pole bolo vyplnené";
$a = $_REQUEST[ "údaje1" ];
}
Zvyčajne toto riešenie postačuje. Ak potrebujete zadať text, bude jasné, či bol zadaný alebo nie. Ak však používateľ úmyselne zadá nulu na účely výpočtu, prázdna funkcia ukáže, že neexistuje žiadna hodnota. Preto je pre takéto situácie lepšie použiť funkciu isset. Výslovne skontroluje, či je hodnota daná alebo nie.
if (isset ($_REQUEST["data1" ])) (
ozvena "Pole bolo vyplnené";
$a = $_REQUEST[ "údaje1" ];
} inak(
ozvena "Pole nie je vyplnené";
}
Jednou z najobľúbenejších funkcií na stránke je prihláška alebo objednávkový formulár, z ktorého sa údaje odosielajú e-mailom majiteľovi stránky. Takéto formuláre sú spravidla jednoduché a pozostávajú z dvoch alebo troch polí na zadávanie údajov. Ako vytvoriť takýto objednávkový formulár? To si bude vyžadovať používanie jazyka HTML značky a jazyk PHP programovanie.
Samotný značkovací jazyk HTML je jednoduchý, musíte len zistiť, ako a kam umiestniť určité značky. S programovacím jazykom PHP sú veci trochu komplikovanejšie.
Pre programátora nie je vytvorenie takéhoto formulára ťažké, no pre dizajnéra rozloženia HTML sa niektoré akcie môžu zdať ťažké.
Vytvorte formulár na odoslanie údajov v html
Prvý riadok bude nasledovný
Teraz poďme všetko dokopy.
Teraz urobme polia vo formulári povinnými. Máme nasledujúci kód:
Vytvorte súbor, ktorý prijíma údaje z formulára HTML
Toto bude súbor s názvom send.php
V súbore musíte v prvej fáze prijať údaje z poľa príspevkov. Aby sme to dosiahli, vytvoríme dve premenné:
$fio = $_POST["fio"];
$email = $_POST["e-mail"];
Názvy premenných v PHP sú označené znakom $ a na konci každého riadku je umiestnená bodkočiarka. $_POST je pole, do ktorého sa odosielajú údaje z formulára. V html formulári je spôsob odoslania uvedený ako method="post". Z toho sa teda berú dve premenné html formuláre. Aby ste ochránili svoju stránku, musíte tieto premenné preniesť cez niekoľko filtrov – php funkcie.
Prvá funkcia skonvertuje všetky znaky, ktoré sa používateľ pokúsi pridať do formulára:
V tomto prípade sa v php nevytvárajú nové premenné, ale používajú sa existujúce. Filter urobí konverziu znaku "<" в "<". Также он поступить с другими символами, встречающимися в html коде.
Druhá funkcia dekóduje adresu URL, ak sa ju používateľ pokúsi pridať do formulára.
$fio = urldecode($fio);
$email = urldecode($email);
Pomocou tretej funkcie odstránime medzery zo začiatku a konca riadku, ak nejaké existujú:
$fio = trim($fio);
$email = trim($email);
Existujú ďalšie funkcie, ktoré vám umožňujú filtrovať premenné php. Ich použitie závisí od toho, ako sa obávate, že sa útočník pokúsi pridať programový kód do tohto html formulára na odoslanie e-mailu.
Validácia dát prenesených z HTML formulára do PHP súboru
Ak chcete skontrolovať, či tento kód funguje a či sa údaje prenášajú, môžete ho jednoducho zobraziť na obrazovke pomocou funkcie echo:
echo $fio;
ozvena"
";
echo $fio;
Druhý riadok je potrebný na oddelenie výstupu php premenných do rôznych riadkov.
Odosielanie prijatých údajov z HTML formulára na email pomocou PHP
Na odosielanie údajov e-mailom je potrebné použiť funkciu pošty v PHP.
mail("na ktorú adresu poslať", "predmet listu", "Správa (telo listu)","Od: z ktorého emailu je list odoslaný \r\n");
Napríklad musíte odoslať údaje na e-mail vlastníka alebo manažéra stránky [chránený e-mailom].
Predmet listu by mal byť jasný a správa listu by mala obsahovať to, čo používateľ uviedol vo formulári HTML.
mail(" [chránený e-mailom]", "Aplikácia zo stránky", "Celé meno:".$fio.". E-mail: ".$email ,"Od: [chránený e-mailom]\r\n");
Je potrebné pridať podmienku, ktorá skontroluje, či bol formulár odoslaný pomocou PHP na zadanú emailovú adresu.
if (mail(" [chránený e-mailom]", "Objednávka zo stránky", "Celé meno:".$fio.". E-mail: ".$email ,"Od: [chránený e-mailom]\r\n"))
{
echo "správa bola úspešne odoslaná";
) inak (
}
Programový kód súboru send.php, ktorý odošle údaje formulára HTML na poštu, bude teda vyzerať takto:
$fio = $_POST["fio"];
$email = $_POST["e-mail"];
$fio = htmlspecialchars($fio);
$email = htmlspecialchars($email);
$fio = urldecode($fio);
$email = urldecode($email);
$fio = trim($fio);
$email = trim($email);
//echo $fio;
//echo "
";
//echo $email;
if (mail(" [chránený e-mailom]", "Aplikácia zo stránky", "Celé meno:".$fio.". E-mail: ".$email ,"Od: [chránený e-mailom]\r\n"))
( echo "správa bola úspešne odoslaná";
) inak (
echo "pri odosielaní správy sa vyskytli chyby";
}?>
Zakomentované sú tri riadky na kontrolu, či sa údaje prenášajú do súboru. V prípade potreby ich možno odstrániť, pretože boli potrebné iba na ladenie.
HTML a PHP kód na odoslanie formulára umiestňujeme do jedného súboru
V komentároch k tomuto článku si veľa ľudí kladie otázku, ako zabezpečiť, aby HTML formulár aj PHP kód na odosielanie dát na email boli v jednom súbore a nie v dvoch.
Na implementáciu tejto práce je potrebné umiestniť HTML kód formulára do súboru send.php a pridať podmienku, ktorá bude kontrolovať prítomnosť premenných v poli POST (toto pole sa odosiela z formulára). To znamená, že ak premenné v poli neexistujú, musíte používateľovi zobraziť formulár. V opačnom prípade musíte prijať údaje z poľa a odoslať ich príjemcovi.
Pozrime sa, ako zmeniť kód PHP v súbore send.php:
//kontrola, či existujú premenné v poli POST
if(!isset($_POST["fio")] a !isset($_POST["e-mail"]))(
?> ) inak (
//zobraziť formulár
$fio = $_POST["fio"];
$email = $_POST["e-mail"];
$fio = htmlspecialchars($fio);
$email = htmlspecialchars($email);
$fio = urldecode($fio);
$email = urldecode($email);
$fio = trim($fio);
$email = trim($email);
if (mail(" [chránený e-mailom]", "Aplikácia zo stránky", "Celé meno:".$fio.". E-mail: ".$email ,"Od: [chránený e-mailom]\r\n"))(
echo "Správa bola úspešne odoslaná";
) inak (
echo "Pri odosielaní správy sa vyskytli chyby";
}
}
?>
Existenciu premennej v poli POST skontrolujeme pomocou PHP funkcie isset(). Výkričník pred touto funkciou v podmienke znamená negáciu. To znamená, že ak premenná neexistuje, musíme ukázať našu formu. Ak by som neuviedol výkričník, podmienka by doslova znamenala „ak existuje, ukážte formulár“. A to je v našom prípade nesprávne. Samozrejme, môžete ho premenovať na index.php. Ak premenujete súbor, nezabudnite premenovať názov súboru v riadku
V tomto príklade budú údaje formulára označené atribútom name (login a heslo) odovzdané do súboru na /example/handler.php. Ak akčný atribút nezadáte, potom dôjde k prenosu na adresu aktuálnej stránky.
Prenos na server prebieha dvoma rôznymi spôsobmi: GET a POST, aby ste nastavili metódu v tagu