Verstehen Sie die Webentwicklung in weniger als einer Stunde [Teil 2]

 
Im ersten Teil des Artikels wurde erklärt, wie eine clientseitige Webseite funktioniert.
Sehen wir uns nun an, was auf der Serverseite passiert.
 

Teil II

Serverseitig: Formulare und Datenbanken

 

1. Formulare

Bisher haben wir nur über die Wiederherstellung von Daten vom Server gesprochen. Was ist mit dem Senden von Daten? Formulare sind die andere Seite von HTML: Sie ermöglichen es uns, Informationen an den Server zu senden. Wir können die Formulare verwenden, um bestehende Informationen zu aktualisieren oder neue Informationen hinzuzufügen. 
Die am häufigsten verwendeten Methoden in HTML-Formularen sind BESTELLE et jetzt lesen.
 

 
Schauen Sie sich den obigen Code an :
Wir haben zwei Eingabefelder (Varianten des Eingangssignals:), wo der Benutzer Daten eingeben kann, und eine Schaltfläche zum Senden (abschicken). 
Nachdem der Benutzer auf diese Schaltfläche geklickt hat, sendet der Browser die in die beiden Felder eingegebenen Datenwerte an ein aufgerufenes PHP-Skript createproduct.php.
In unserem Beispiel ist es PHP, aber es könnte auch JSP, Python oder jede andere serverseitige Skriptsprache sein. Das serverseitige Skript kann die vom Browser gesendeten Werte über die Methode auslesen jetzt lesen, dann verarbeiten oder in einer Datei oder Datenbank speichern. Kurz gesagt, so werden Daten an den Server gesendet, bevor sie gespeichert werden.

Was ist PHP? 

PHP für Hypertext Preprocessor, ist eine serverseitige Skriptsprache zum Erstellen dynamischer Websites und Anwendungen. Mit anderen Worten: Es ist eine Sprache, die es ermöglicht, auf eine Datenbank zuzugreifen und sie zu lesen und dann ihre Informationen in eine HTML-Seite zu transkribieren.
Hinweis : Nehmen wir an, wir möchten vor dem Senden der Daten Validierungen hinzufügen – zum Beispiel muss der Produktname mindestens 5 Zeichen enthalten oder das Feld „SKU“ darf nicht leer sein. Wir können JavaScript für diese Validierungen verwenden. Wir müssen dann auf das Click-Event des Submit-Buttons reagieren und prüfen, ob die Web-Elemente die gewünschten Daten enthalten. Wenn etwas fehlt, können wir eine Fehlermeldung anzeigen und das Senden von Daten an den Server stoppen.
 

2. Datenbanken

Sobald die Menge an Informationen zu wachsen beginnt, kann das Abrufen von Informationen aus Dateien sehr kompliziert und sehr langsam werden. Nehmen wir zum Beispiel die Preislistendatei, nehmen wir an, das Unternehmen hat Tausende von Produkten und wir möchten die Informationen des letzten Produkts in der Liste wissen – was bedeutet, dass wir alle Produkte lesen müssen, bis wir das finden, was wir sind Auf der Suche nach. Dies ist kein optimaler Weg, um Informationen abzurufen. Um dieses Problem zu lösen, wurden die Datenbanken erstellt.
In einer Datenbank (DB) speichern wir Daten in Tabellen (einem strukturierten Datensatz). So können wir ganz einfach eine Suche durchführen, Daten sortieren oder andere Operationen durchführen.
 

3. Serverseitige Skriptsprachen & Frameworks

Dazu benötigen wir serverseitige Skriptsprachen :

  • Informationen aus einer Datenbank oder Datei speichern und lesen;
  • werden (BESTELLE) Informationen von einem Server durch Ausführen bestimmter Operationen;
  • Lesen Sie die vom Client gesendeten Informationen (jetzt lesen) und speichern oder verbreiten, indem Sie bestimmte Verarbeitungsvorgänge durchführen.

Typische Programmiersprachen wie C und Java können Datenbanken lesen und schreiben, jedoch nicht direkt auf dem Webbrowser (Client) ausgeführt werden. Dies führte zu serverseitigen Skriptsprachen.
Serverseitige Skriptsprachen können die gesamte übliche Datenverarbeitung durchführen, mit Datenbanken kommunizieren und auf einem Webserver ausgeführt werden. Die gängigsten serverseitigen Skriptsprachen sind PHP, Perl, JSP, Ruby on Rails usw.
Entwickler begannen, diese Sprachen zu verwenden, und stellten bald fest, dass sie für alle Projekte denselben Boilerplate-Code schrieben, was zur Entwicklung von führte Gerüste die die Entwicklung von Webanwendungen erleichtern und beschleunigen.
Einige bekannte Frameworks :

  • PHP: Zend, YII, Symfony, CakePHP, Laravel;
  • CMS PHP (wird auch als Framework verwendet): Drupal, Joomla, SugarCRM, WordPress;
  • Javac : J2EE, Hibernate, Streben, Frühling;
  • JavaScript : Node.js.

 

 

4. MVC-Architektur und Sitzungen

Die MVC-Architektur hilft uns, den Code in mehrere Dateien aufzuteilen, und ermöglicht es uns, die Geschäftslogik von der Präsentation zu trennen, um ihre spätere Änderung zu erleichtern.
Am Beispiel einer Blogging-Plattform werden wir auf alle zuvor erläuterten Themen zurückkommen, um zu sehen, wie wir mit der MVC-Architektur codieren können. 
Eine Blog-Plattform verwaltet dynamische Inhalte und könnte mehrere Module enthalten, wie z :

  • Benutzer (Nutzer);
  • Artikel (Blog-Beiträge);
  • Schlüsselwörter / Tags (Tags);
  • Kategorien (Kategorien).

Bevor wir über andere Funktionen sprechen, stellen wir uns das Datenbankdesign für die Tabelle von vor Beiträge (tbl_blog_post). Wichtige Felder wären :

Wie Sie sehen können, speichern wir doppelte Benutzerinformationen: Vorname (Vorname ) und Nachname (Nachname) den Inhalt des Feldes wiederholen Erstellt von. Wenn wir 10 Blog-Posts haben, speichern wir diese doppelten Benutzerinformationen in jedem der 000 Posts. Und es könnten andere Informationen über den Benutzer gespeichert werden, wie z. B. seine Rolle, sein letztes Anmeldedatum usw.
Die Alternative, wie Sie vielleicht schon erraten haben, besteht darin, diese Benutzerinformationen in einer anderen Tabelle zu speichern Benutzer (tbl_user) und verlinke es mit dem der Artikel (tbl_blog_post) durch eine ID wie unten :

Diese Trennung von Daten in mehrere Tabellen ist eines der vielen Prinzipien von Datennormalisierung.
Der nächste wichtige Teil besteht darin, dem Benutzer zu ermöglichen, Daten über ein HTML-Formular in diese Tabellen einzufügen. Denken Sie daran, dass wir diese Schritte detailliert beschreiben, um die Konzepte zu verstehen – dies ist keineswegs ein vollständiges Programmier-Tutorial.

Erstellung eines neuen Blogbeitrags durch einen authentifizierten Benutzer

Dazu benötigen wir ein HTML-Formular mit zwei Eingabefeldern (Titel, Inhalt), mit der der Benutzer einen Artikel erstellen kann.
Sobald der Benutzer die Informationen eingibt und auf die Schaltfläche „Senden“ „Artikel erstellen“ klickt, werden die Formularwerte über die Methode an den Webserver gesendet jetzt lesen. Die eingesandten Werte jetzt lesen kann von jeder serverseitigen Skriptsprache gelesen werden. Das Serverskript (PHP, Ruby on Rails, Python usw.) liest den Wert aus dem Formular und übergibt ihn an die Datenbank.
Das Skript kann auch Informationen verarbeiten, beispielsweise zum Abrufen von Datum und Uhrzeit vom Server oder zum Ausführen bestimmter Berechnungen auf der Grundlage von Werten, die aus einer anderen Tabelle in der Datenbank oder einem anderen Dienst extrahiert wurden.
Noch ein Hinweis: Das Skript kann auch Validierungen durchführen, die auch als serverseitige Validierungen bezeichnet werden, um sicherzustellen, dass die Daten gültig sind. Nur wenn die Daten gültig sind, werden sie in der Tabelle gespeichert tbl_blog_post. Andernfalls wird eine Fehlermeldung an den Client gesendet, um die fehlenden Informationen einzugeben.
Optisch das Formular zum Abrufen von Daten aus unserer Tabelle tbl_blog_post könnte wie eine WordPress-Schnittstelle zur Erstellung von Posts aussehen :
 

 
Es gibt ein Feld zur Eingabe des Titels (Titel ), dann ein Eingabefeld für den Inhalt (Inhalt).
Das Erstellungsdatum (Erstellt am) wird seinerseits dynamisch von der Skriptsprache (hier PHP) abgerufen und entspricht dem genauen Zeitpunkt der Erstellung des Artikels (Jahr, Monat, Tag, Stunde, Minute und sogar Sekunde).
Weitere Daten, deren Eingabe nicht erforderlich ist: die Kennung des Artikels (ID). Es wird automatisch von der Datenbank generiert, wodurch sichergestellt wird, dass es innerhalb derselben Tabelle eindeutig ist.
An unserem Tisch tbl_blog_post, zusätzlich zu Titel und Inhalt haben wir auch ein Feld namens created_by.
Wie erhalten wir den Wert, um dieses Feld zu füllen?

Verbundener/authentifizierter Benutzer

Im Allgemeinen verfügen die meisten Webanwendungen über eine Anmeldefunktion. Jedes Mal, wenn sich ein Benutzer erfolgreich authentifiziert, werden die Informationen dieses Benutzers in Sitzungen gespeichert, damit die Informationen später wiederverwendet werden können.

Was ist eine Sitzung?

HTTP ist ein zustandsloses Protokoll, was bedeutet, dass keine Anfrage erfolgt BESTELLE ou jetzt lesen die vom Client an den Webserver gesendet werden, werden nicht verfolgt. Wenn der Client (der Browser) zwei Anfragen stellt, weiß der Webserver nicht, ob sie vom selben Benutzer stammen. Dies bedeutet auch, dass der Server beispielsweise nicht weiß, dass es sich um denselben Benutzer handelt, wenn Sie mit einer E-Commerce-Website verbunden sind und Produkte in Ihren Warenkorb legen.
Um diesen Zustandsmangel zu überwinden, müssen Clients in jeder ihrer Anfragen zusätzliche Informationen senden, um Sitzungsinformationen für die Dauer mehrerer Anfragen beizubehalten. Diese Zusatzinformationen werden clientseitig in Cookies und serverseitig in Sessions gespeichert.
Eine Sitzung ist ein Array von Variablen, in denen Informationen gespeichert werden, um sie auf mehreren Seiten zu verwenden. Sitzungen werden durch eine eindeutige ID identifiziert, deren Name von der Sprache abhängt – in PHP heißt sie „PHP-Sitzungs-ID“. Dieselbe Session-ID muss in einem Cookie im Browser gespeichert werden, um dem Benutzer zugeordnet zu werden.

Zeigen Sie ein einzelnes Element an

Im nächsten Schritt werden die Blogbeiträge einzeln angezeigt. Wir müssen die Daten aus der Datenbank basierend auf der Post-ID (ID) des angeforderten Artikels und zeigen Sie dann die Werte der Titelfelder (Titel ) und Inhalt (Inhalt).
Hier ist der Pseudocode zum Anzeigen eines einzelnen Beitrags :

  • Lesen Sie die mit der Element-ID verknüpften Datenbankdaten.
  • Fügen Sie diese Daten in eine HTML-Seite ein, die CSS und JS enthält.

Der gesamte obige Code kann in eine einzige Datei geschrieben werden. So wurde es am Anfang tatsächlich gemacht, aber die Entwicklergemeinschaft erkannte, dass es nicht optimal war. Tatsächlich musste für jede neue Funktion, die hinzugefügt werden sollte, der gesamte Code geändert werden, und es war nicht einfach, in einer Umgebung mit mehreren Entwicklern zu arbeiten.
Dies hat Webentwickler dazu veranlasst, die MVC-Architektur zu übernehmen, die den Code im Wesentlichen in drei Komponenten aufteilt :

  • Das Model : Dies ist Geschäftslogik, unabhängig von der Benutzeroberfläche. In unserem Beispiel ist dies der Code, der die Artikel aus der Datenbank abruft.
  • La Vue : Eine Ansicht, eine visuelle Darstellung der Daten. In unserem Beispiel ist es der HTML-Code, der die Artikel anzeigt. Die Daten kommen also aus dem Modell, und das HTML ist die Ansicht.
  • Der Controller : Es wird aufgerufen, wenn Sie auf den Link „Artikel anzeigen“ klicken. Der Controller ruft mithilfe des Modells Daten aus der Datenbank ab und zeigt sie in der Ansicht an.

Sehen wir uns eine typische URL für eine Anwendung an, die die MVC-Architektur verwendet.
http://www.abc.com/blogpost/id/1
hier Blogeintrag der Name des Controllers ist und die Ansicht eine Aktion (Methode) dieses Controllers ist. id ist die Artikelkennung. Wenn wir diese URL in einen Browser eingeben, geht die Anfrage an die „View“-Aktion des „BlogPost“-Controllers und ruft dort das Modell auf, um den Inhalt des Artikels mit der ID „1“ in Form von „an“ zu erhalten Objekt. Dieses Objekt wird dann zur Anzeige an die „Ansicht“ übergeben.
Konkreter: die folgende URL https://www.ux-republic.com/blog/page/2 zeigt die zweite Seite der Liste aller UX-Republic-Blogbeiträge an.
Die Aufschlüsselung der URL haben wir :

  • Blog, Der Controller
  • Seite, der Bezeichner, der die Seitenzahl angibt
  • 2, die Seitenzahl


Jedes Mal, wenn auf das Paging geklickt wird, ist es die gleiche Methode des Controllers Blog die ausgeführt wird und die für den Abruf der entsprechenden Inhalte verantwortlich ist Seite ausgewählt.

Ajax- und Single-Page-Apps (SPA)

Wenn Sie im letzten Jahrtausend geboren wurden, müssen Sie sich an die in den 1990er und 2000er Jahren sehr beliebten Webmail-Anbieter Hotmail und Yahoo! erinnern: Wenn Sie auf den Posteingang oder auf eine E-Mail klickten, wurde die ganze Seite aktualisiert. Um 2004 kam Gmail mit einem wichtigen Feature auf den Markt: Ajax. Bei Ajax wird nicht die ganze Seite aktualisiert – nur die Teile, die es brauchen. Wenn Sie also eine neue E-Mail erhalten, sehen Sie diese einfach oben auf der Seite, ohne sie neu laden zu müssen. Dies trug dazu bei, den Benutzern ein besseres Surferlebnis zu bieten, und Ajax wurde zu einer sehr beliebten Methode zum Erstellen von Apps.

Was ist Ajax?

Thermalbäder Ajax stellt eine große Gruppe von Webtechnologien dar, die in einer Anwendung implementiert werden können, die im Hintergrund mit einem Server kommuniziert, ohne den aktuellen Zustand der Seite zu beeinträchtigen.
Mit Ajax senden Sie eine Anfrage per BESTELLE an den Server, und der Server sendet seine Antwort, ohne die Webseite zu blockieren, was bedeutet, dass der Benutzer ohne Unterbrechung weiter surfen kann. Die Antwort vom Server wird in die aktuelle Webseite eingefügt oder an diese angehängt.
Auf Websites, die Ajax nicht verwenden, erfordert jede Benutzeraktion ein vollständiges Neuladen der Seite vom Server. Dieser Prozess ist ineffizient und führt zu einer schlechten Benutzererfahrung, da alle Inhalte auf der Seite verschwinden, bevor sie wieder angezeigt werden.
Ajax ist eine der Techniken, die zum Erstellen von Single-Page-Anwendungen verwendet werden (Single-Page-Apps ou SPAs). Wie der Name schon sagt, passt die gesamte App auf eine einzige Seite und ihr gesamter Inhalt wird dynamisch geladen. Zur Erstellung können JavaScript-Frameworks wie Angular, React und Backbone.js verwendet werden SPAs.

Server und Webbrowser

Browser sind die Dolmetscher des Webs. Sie fordern Daten von Webservern an, die die Anfrage verarbeiten und eine Antwort in HTML (mit CSS, JS, Bildern usw.) an den Browser senden, die dann angezeigt wird.
Eine Anfrage an den Webserver kann mit einer von drei wichtigen Methoden gestellt werden :

  • BESTELLE : die angeforderte Ressource als Antwort erhalten;
  • KOPF : gleich wie BESTELLE, aber die Ressource wird im Header der Antwort abgerufen;
  • jetzt lesen : Senden Sie die Daten an den Server.

Wenn Sie beispielsweise „google.com“ in den Browser eingeben, sendet der Browser im Hintergrund diesen Befehl an den Server von google.com:
ERHALTEN: http://google.com
Der Google-Webserver sieht sich dann seine Hauptdatei (Index) an und gibt seine Antwort an den Client zurück. Es sendet normalerweise HTML-Inhalte und CSS-Dateien zusammen mit anderen Mediendateien.
 
# Übersetzung des Artikels Verstehen Sie die Webentwicklung in weniger als 1 StundeDurch Scheich Ismail
 
 
 
 

Audrey Guénée, Dev-Front @ux-Republic