Den éischten Deel vum Artikel huet erkläert wéi eng Client-Säit Websäit funktionnéiert.
Loosst eis elo kucken wat op der Serversäit geschitt.

Deel II

Server Säit: Formen an Datenbanken

1. Formen

Bis elo hu mir nëmmen iwwer d'Erhuelung vun Daten vum Server geschwat. Wat iwwer Daten ze schécken? Forme sinn déi aner Säit vum HTML: si erlaben eis Informatioun un de Server ze schécken. Mir kënnen d'Formulairen benotze fir existent Informatioun ze aktualiséieren oder nei Informatioun derbäi ze ginn.
Déi meescht benotzt Methoden an HTML Formen sinn GET et POST.

Kuckt de Code hei uewen :
Mir hunn zwee Input Felder (Input ginn) wou de Benotzer Daten aginn kann an e Submit Knäppchen (validéieren).
Nodeems de Benotzer op dëse Knäppchen klickt, schéckt de Browser d'Datewäerter, déi an den zwee Felder aginn sinn, op e PHP Skript genannt createproduct.php.
An eisem Beispill ass et PHP, awer et kéint JSP, Python oder all aner Server-Säit Skriptsprooch sinn. De Server-Säit Skript kann d'Wäerter liesen, déi vum Browser iwwer d'Methode geschéckt ginn POST, veraarbecht se dann oder späichert se an enger Datei oder Datebank. An enger Nossschuel, et ass wéi d'Donnéeën un de Server geschéckt ginn ier se gespäichert ginn.

Wat ass PHP?

PHP fir Hypertext Viraarbechter, ass eng Server-Säit Scripting Sprooch fir dynamesch Websäiten an Uwendungen ze kreéieren. An anere Wierder: et ass eng Sprooch déi et erméiglecht Zougang zu enger Datebank ze liesen an duerno seng Informatioun an enger HTML Säit ze transkriéieren.
Opgepasst: Loosst eis soen, mir wëllen Validatiounen derbäisetzen ier Dir d'Donnéeën schécken - zum Beispill muss de Produktnumm op d'mannst 5 Zeechen enthalen, oder d'"SKU" Feld däerf net eidel sinn. Mir kënnen JavaScript fir dës Validatiounen benotzen. Mir mussen dann op de Klick Event vum Submit Knäppchen reagéieren, a kucken ob d'Webelementer déi Donnéeën hunn déi mir wëllen. Wann eppes fehlt, kënne mir eng Fehlermeldung weisen an ophalen d'Donnéeën op de Server ze schécken.

2. Datenbanken

Soubal d'Quantitéit un Informatioun ufänkt ze wuessen, kann et aus Dateien zréckzéien, wierklech komplizéiert a ganz lues ginn. Zum Beispill, loosst eis d'Präislëschtdatei huelen, ugeholl datt d'Firma Dausende vu Produkter huet a mir wëllen d'Informatioun vum leschte Produkt an der Lëscht wëssen - dat heescht datt mir all d'Produkter musse liesen bis zu deem wat mir fannen deen mir sinn sichen no. Dëst ass net en optimale Wee fir Informatioun ze recuperéieren. Et ass fir dëse Problem ze léisen datt d'Datebanken erstallt goufen.
An enger Datebank (DB) späichere mir Daten an Tabellen (e strukturéierte Satz vun Daten). Sou kënne mir einfach eng Sich maachen, Daten sortéieren oder all aner Operatiounen ausféieren.

3. Server-Säit Scripting Sproochen & Kaderen

Mir brauchen Server-Säit Scripting Sproochen fir :

späicheren a liesen Informatiounen aus enger Datebank oder Fichier;
kréien (GET) Informatioun vun engem Server andeems Dir bestëmmte Operatiounen ausféiert;
liesen d'Informatioun vum Client geschéckt (POST) a späicheren oder verdeelen se andeems Dir bestëmmte Veraarbechtungsoperatiounen ausféiert.

Typesch Programméierungssprooche wéi C an Java kënnen an Datenbanken liesen a schreiwen, awer se kënnen net direkt am Webbrowser (Client) lafen. Dëst huet zu Server-Säit Scripting Sproochen entstanen.
Server-Säit Skriptsprooche kënnen all déi üblech Dateveraarbechtung maachen, mat Datenbanken kommunizéieren an op engem Webserver lafen. Déi meescht üblech Server-Säit Skriptesprooche sinn PHP, Perl, JSP, Ruby on Rails, etc.
D'Entwéckler hunn ugefaang dës Sproochen ze benotzen a si hu séier gemierkt datt se deeselwechte Kesselcode fir all Projete schreiwen, wat zu der Entwécklung vun Kaderen déi d'Entwécklung vu Webapplikatiounen erliichteren a beschleunegen.
E puer bekannte Kaderen :

PHP: Zend, YII, Symfony, CakePHP, Laravel;
CMS PHP (och als Kader benotzt): Drupal, Joomla, SugarCRM, WordPress;
Java : J2EE, Wanterschlof, Struts, Fréijoer;
Javascript : Node.js.

4. MVC Architektur & Sessiounen

D'MVC Architektur hëlleft eis de Code a verschidde Dateien opzedeelen an erlaabt eis d'Geschäftslogik vun der Presentatioun ze trennen, fir hir Ännerung spéider ze erliichteren.
Huelt d'Beispill vun enger Blogging Plattform, mir kommen zréck op all déi virdru erkläert Themen fir ze kucken wéi mir mat der MVC Architektur kënne codéieren.
Eng Blogplattform geréiert dynameschen Inhalter a kéint verschidde Moduler enthalen wéi z :

Benotzer (Benotzer);
Artikelen (Blog posts);
Schlësselwieder / Tags (Tags);
Kategorien (Kategorien).

Ier mer iwwer aner Funktiounen schwätzen, loosst eis d'Datebankdesign fir den Dësch virstellen Artikelen (tbl_blog_post). Wichteg Felder wieren :

Wéi Dir gesitt, späichere mir duplizéiert Benotzerinformatioun: Virnumm (Virnumm) a Familljennumm (Familljennumm) widderhuelen den Inhalt vum Feld Erstellt vum. Wa mir 10 Blog Posts hunn, späichere mir dës duplizéiert Benotzerinformatioun an all eenzel vun den 000 Posts. An et kéint aner Informatioun iwwer de Benotzer sinn fir ze späicheren, sou wéi hir Roll, hire leschte Logindatum, etc.
D'Alternativ, wéi Dir scho scho virgestallt hutt, ass dës Benotzerinformatioun an enger anerer Tabell ze späicheren Benotzer (tbl_user) a verlinkt et mat deem vun den Artikelen (tbl_blog_post) duerch eng ID wéi hei drënner :

Dës Trennung vun Daten a verschidde Dëscher ass ee vun de ville Prinzipien vun Daten Normaliséierung.
Deen nächste wichtegen Deel ass de Benotzer z'erméiglechen Daten an dës Tabellen iwwer eng HTML Form anzeginn. Denkt drun datt mir dës Schrëtt detailléiert fir d'Konzepter ze verstoen - dëst ass op kee Fall e komplette Programméierungstutorial.

Schafung vun engem neie Blog Post vun engem authentifizéierte Benotzer

Fir dëst brauche mir eng HTML Form mat zwee Input Felder (Titel, Inhalt) mat deem de Benotzer en Artikel erstellen kann.
Wann de Benotzer d'Informatioun aginn an klickt op de Submit Knäppchen, "Artikel erstellen", ginn d'Formularwäerter iwwer d'Method op de Webserver geschéckt POST. D'Wäerter geschéckt POST kann vun all Server-Säit Scripting Sprooch gelies ginn. De Server Skript (PHP, Ruby on Rails, Python, etc.) liest de Wäert vun der Form a gitt et an d'Datebank.
De Skript kann och Informatioun veraarbecht, wat kann sinn den Datum an d'Zäit vum Server ze recuperéieren oder bestëmmte Berechnungen ze maachen baséiert op Wäerter extrahéiert aus enger anerer Tabell an der Datebank oder vun engem anere Service. web.
En anere Punkt fir ze notéieren: de Skript kann och Validatioune maachen, och Server-Säit Validatiounen genannt, fir sécherzestellen datt d'Donnéeë valabel sinn. Nëmme wann d'Donnéeën gëlteg sinn, ginn se an der Tabell gespäichert tbl_blog_post. Soss gëtt eng Fehlermeldung un de Client geschéckt fir déi fehlend Informatioun anzeginn.
Visuell, d'Form fir Daten aus eisem Dësch ze recuperéieren tbl_blog_post kéint ausgesinn wéi WordPress Post Kreatioun Interface :

Et gëtt e Feld fir den Titel anzeginn (title), dann eng Inputbox fir den Inhalt (Inhalt).
Den Erstellungsdatum (Erstellt On), fir säin Deel, gëtt dynamesch vun der Skriptsprooch (hei PHP) zréckgezunn a entsprécht dem genaue Moment vun der Schafung vum Artikel (Joer, Mount, Dag, Stonn, Minutt a souguer zweet).
Aner Donnéeën déi net erfuerderlech sinn ze aginn: den Identifizéierer vum Artikel (ID). Et gëtt automatesch vun der Datebank generéiert déi garantéiert datt se eenzegaarteg an der selwechter Tabell ass.
An eiser Tabell tbl_blog_post, Nieft Titel an Inhalt hu mir och e Feld genannt geschaf_vun.
Wéi kréie mir de Wäert fir dëst Feld ze populéieren?

Ugeschloss / authentifizéiert Benotzer

Allgemeng hunn déi meescht Webapplikatiounen Login Funktionalitéit. All Kéier wann e Benotzer erfollegräich authentifizéiert, gëtt d'Informatioun vum Benotzer a Sessiounen gespäichert, sou datt d'Informatioun spéider erëmbenotzt ka ginn.

Wat ass eng Sessioun?

HTTP ass e stateless Protokoll, dat heescht datt keng Ufro GET ou POST vum Client un de Webserver geschéckt gëtt net verfollegt. Wann de Client (de Browser) zwou Ufroe mécht, weess de Webserver net ob se vum selwechte Benotzer kommen. Dëst bedeit och datt, zum Beispill, wann Dir mat engem E-Commerce Site verbonne sidd an Dir Produkter an Äre Kuerf bäidréit, de Server net weess datt se fir dee selwechte Benotzer sinn.
Fir dëse Mangel u Staat ze iwwerwannen, mussen d'Clienten zousätzlech Informatioun an all vun hiren Ufroe schécken fir Sessiounsinformatioun fir d'Dauer vu multiple Ufroen ze halen. Dës zousätzlech Informatioun gëtt op der Client Säit a Cookien gespäichert, an op der Server Säit a Sessiounen.
Eng Sessioun ass eng Rei Variabelen, an deenen d'Informatioun gespäichert ass fir op e puer Säiten ze benotzen. Sessiounen ginn duerch eng eenzegaarteg ID identifizéiert, deem säin Numm vun der Sprooch hänkt - an PHP gëtt et "PHP Sessioun ID". Dës selwescht Sessiouns-ID muss an engem Cookie am Browser gespäichert ginn fir mam Benotzer verbonnen ze sinn.

Weist een eenzegen Element

De nächste Schrëtt ass d'Blogposts individuell ze weisen. Mir mussen d'Donnéeën aus der Datebank liesen baséiert op der Post ID (ID) vum ugefrote Artikel, weist dann d'Wäerter vun den Titelfelder (title) an Inhalt (Inhalt).
Hei ass de Pseudocode fir en eenzege Post ze weisen :

Liest d'Datebankdaten verbonne mat der Element ID.
Füügt dës Donnéeën an eng HTML Säit mat CSS an JS un.

All de Code hei uewen kann an enger eenzeger Datei geschriwwe ginn. Dëst ass eigentlech wéi et am Ufank gemaach gouf, awer d'Entwécklungsgemeinschaft huet gemierkt datt et net optimal war. Tatsächlech, fir all nei Feature ze addéieren, muss de ganze Code geännert ginn, an et war net einfach an engem Multi-Entwéckler Ëmfeld ze schaffen.
Dëst huet verursaacht datt Webentwéckler d'MVC Architektur adoptéieren, déi am Wesentlechen Code an dräi Komponenten brécht :

Le Modelle : Dëst ass Geschäftslogik, onofhängeg vun der User-Interface. An eisem Beispill ass dëst de Code deen d'Artikelen aus der Datebank zréckhëlt.
Vue : A Vue eng visuell Representatioun vun den Donnéeën. An eisem Beispill ass et den HTML Code deen d'Artikelen weist. Also d'Daten kommen aus dem Model, an den HTML ass d'View.
De Controller : Et gëtt genannt beim Klick op de Link "Kuckt Artikel". De Controller recuperéiert Daten aus der Datebank mam Model a weist se an der View.

Loosst eis eng typesch URL fir eng Applikatioun kucken déi d'MVC Architektur benotzt.
http://www.abc.com/blogpost/id/1
hei Blogpost ass den Numm vum Controller an d'Vue ass eng Handlung (Methode) vun dësem Controller. id ass den Element Identifizéierer. Wa mir dës URL an engem Browser aginn, geet d'Ufro un d'Aktioun "View" vum "BlogPost" Controller, a rufft de Modell do un fir den Inhalt vum Artikel mat ID "1" a Form vun 'an' ze kréien. Objet. Dësen Objet gëtt dann an d'"View" iwwerginn fir ze weisen.
Méi konkret: déi folgend URL https://www.ux-republic.com/blog/page/2 weist déi zweet Säit vun der Lëscht vun all UX-Republik Blog Posts.
D'URL ofbriechen, hu mir :

Blog, de Controller
Säit, den Identifizéierer deen d'Säitnummer bezeechent
2, d'Säitnummer

All Kéier wann d'Paging geklickt gëtt, ass et déiselwecht Method vum Controller Blog déi ausgefouert gëtt an déi verantwortlech ass fir den Inhalt entspriechend dem Säit ausgewielt.

Ajax & Single Page Apps (SPA)

Wann Dir am leschte Joerdausend gebuer sidd, musst Dir un d'Webmail Ubidder Hotmail an Yahoo! erënneren, déi an den 1990er an 2000er Joren ganz populär waren.Wann Dir op d'Inbox oder op eng E-Mail geklickt hutt, gouf déi ganz Säit aktualiséiert. Ëm 2004 ass Gmail mat enger wichteger Feature ukomm: Ajax. Mat Ajax gëtt d'ganz Säit net erfrëscht - nëmmen déi Deeler déi et brauchen. Also, wann Dir eng nei E-Mail kritt, gesitt Dir se einfach uewen op der Säit erschéngen, ouni se nei ze lueden. Dëst huet gehollef de Benotzer eng besser Surferfahrung ze ginn, an Ajax gouf e ganz populäre Wee fir Apps ze bauen.

Wat ass Ajax?

de Begrëff Ajax stellt eng grouss Grupp vu Webtechnologien duer, déi an enger Applikatioun implementéiert kënne ginn, déi mat engem Server am Hannergrond kommunizéiert, ouni den aktuellen Zoustand vun der Säit ze stéieren.
Mat Ajax schéckt Dir eng Demande duerch GET op de Server, an de Server schéckt seng Äntwert ouni d'Websäit ze blockéieren, dat heescht datt de Benotzer ouni Ënnerbriechung weiderfuere kann. D'Äntwert vum Server gëtt op déi aktuell Websäit agebaut oder ugeschloss.
Op Siten déi Ajax net benotzen, erfuerdert all Benotzeraktioun eng komplett Reload vun der Säit vum Server. Dëse Prozess ass ineffizient a schaaft eng schlecht Benotzererfarung well all Inhalt op der Säit verschwënnt ier se erëm erscheint.
Ajax ass eng vun den Technike benotzt fir eenzel Säit Uwendungen ze bauen (Single Säit Apps ou SPAen). Wéi den Numm et scho seet, passt déi ganz App op eng eenzeg Säit an all säin Inhalt gëtt dynamesch gelueden. JavaScript Kaderen wéi Angular, React, a Backbone.js kënne benotzt ginn fir ze maachen SPAen.

Server & Webbrowser

Browser sinn d'Interpreter vum Internet. Si froen Daten vu Webserver, déi d'Ufro veraarbecht an eng Äntwert op de Browser an HTML schécken (mat CSS, JS, Biller, etc.), an dës Äntwert gëtt dann ugewisen.
Eng Ufro un de Webserver kann mat enger vun dräi wichtege Methoden gemaach ginn :

GET : kréien déi ugefrote Ressource als Äntwert;
SEKTIOUNSPRËSIDENT :selwecht wéi GET, awer d'Ressource gëtt am Header vun der Äntwert zréckgezunn;
POST : schéckt d'Donnéeën op de Server.

Zum Beispill, wann Dir "google.com" am Browser tippt, schéckt dee leschten dëse Kommando am Hannergrond op den google.com Server:
GET: http://google.com
De Google Webserver wäert dann seng Haaptdatei (Index) kucken a seng Äntwert op de Client zréckginn. Et schéckt normalerweis HTML Inhalt an CSS Dateien zesumme mat all aner Mediendateien.

# Iwwersetzung vum Artikel Verstinn Webentwécklung a Manner wéi 1 Stonn, par Shaik Ismail

Verstinn Webentwécklung a manner wéi enger Stonn [Deel 2]