Comprendre le développement Web en moins d'une heure –

Cet article a été créé en partenariat avec KTree . Merci de soutenir les partenaires qui rendent SitePoint possible.

Cet article explique ce qu'est le développement web, en explorant comment il a commencé et comment il a évolué. Il ne s'agit pas d'une chronique exacte de l'évolution du Web, mais plutôt des besoins de cette évolution, afin que nous puissions comprendre la technologie.

Tout a commencé par l'information. Les humains ont toujours eu besoin de trouver des moyens de partager l'information avec les autres. Comme vous le savez, avant Internet, l'information était partagée par lettres, journaux, radio et télévision. Chacune avait ses propres inconvénients, ce qui a permis à l'autoroute de l'information d'Internet de prendre le devant de la scène.

1. Qu'est-ce que le Web?

Que se passe-t-il si vous pouvez publier des informations dans un endroit où quiconque est intéressé peut aller lire ces informations? C'est exactement ce que fait le web. Vous conservez l'information sur un serveur Web, et les gens peuvent lire cette information en utilisant des clients (navigateurs). Cette architecture est appelée 'architecture serveur-client'

Pourquoi HTTP?

Initialement, cette information était stockée sous forme de texte – c'est pourquoi le protocole de transfert de texte hypertexte est resté coincé même si le texte, les médias et les fichiers tous échangés via ce protocole.

2. Comment l'information est-elle conservée, récupérée et enregistrée?

La façon la plus simple et la plus longue de stocker de l'information sur le Web est dans les fichiers HTML. Pour mieux comprendre, prenons un exemple simple de la société de publier ses informations de prix afin que ses fournisseurs peuvent télécharger et afficher la liste, qui se compose de produits avec un prix et une date d'entrée en vigueur. Cela a été conservé sous forme de fichier HTML sur le serveur, qui peut être consulté à l'aide d'un navigateur Web. Le navigateur demande le fichier au serveur, le serveur le sert et ferme la connexion.

HTML est un langage de balisage standard utilisé pour créer des pages Web. En d'autres termes, c'est un simple fichier texte avec des balises qui aident le navigateur à comprendre comment afficher les informations

 Price List 




  

    
 Nom du produit 
    
 Sku 
    
 Prix 
  
  

    
 KTree Web Service 
    
 1234566 
    
 60.USD Per Hr 
  
  

    
 Service Web KTree 
    
 1234566 
    
 60.USD Per Hr 
  

CSS

Les feuilles de style en cascade (CSS) sont un langage de feuille de style utilisé pour décrire la présentation. d'un document écrit dans un langage de balisage. Le formatage et le style de base peuvent être effectués via HTML, mais il est préférable d'utiliser CSS pour cela.

Une application web contient de nombreuses pages, dynamiques ou statiques. Si nous utilisons des balises HTML pour styliser l'information, nous devons répéter cette information dans chaque page. Supposons que nous voulions changer la couleur de fond – nous devons éditer le HTML pour chaque page qui fait partie du site.

Au lieu de cela, nous pouvons utiliser CSS pour stocker nos définitions de style dans un emplacement, et référencer chaque page HTML à cet emplacement. En modifiant le fichier CSS, nous pouvons modifier la couleur d'arrière-plan sur chaque page qui ressemble à la feuille de style pour les définitions de style.

CSS ne se contente pas de définir la couleur d'arrière-plan: elle nous permet de définir des couleurs pour toutes sortes d'éléments, de polices, de mises en page et bien plus encore.

Disons que nous utilisons des tableaux sur des pages différentes, mais en utilisant les mêmes styles CSS. Nous pouvons déplacer toutes ces informations de style vers son propre fichier.

 <! - pour simplifier nous avons gardé le CSS en ligne dans le HTML - vous pouvez garder le CSS dans n'importe quel fichier avec une extension .css et l'inclure en utilisant  ->
 Les prix 



  

    
 Nom du produit 
    
 Sku 
    
 Prix 
  
  

    
 KTree Web Service 
    
 1234564 
    
 60.USD Par Hr 
  
  

    
 KTree Web Service 
    
 1234565 
    
 40 .DUS par Hr 
  
  

    
 KTree Web Service 
    
 1234566 
    
 50.USD Per Hr 
  

JavaScript est la combinaison de HTML et CSS. pages web interactives. Pour comprendre JavaScript (JS), nous devons savoir ce que le DOM est.

Le Document Object Model (DOM) est une interface de programmation d'application indépendante du langage qui transforme le document HTML en structure arborescente. Les nœuds de chaque document sont organisés dans cette arborescence, appelée l'arbre DOM, avec le nœud le plus haut appelé "Document Object".

Exemple d'arbre DOM (Source: Wikimedia Commons) [19659002] Lorsqu'une page HTML est rendue dans le navigateur, le navigateur télécharge le HTML dans la mémoire locale et crée un arbre DOM pour afficher la page à l'écran.

En utilisant JS, nous pouvons manipuler l'arbre DOM de plusieurs façons: [19659047] JS peut modifier l'arborescence DOM en ajoutant, modifiant et supprimant tous les éléments et attributs HTML de la page.

Dans notre exemple JavaScript, nous continuons avec notre exemple de liste de prix en ajoutant une autre colonne – Prix spécial – qui est caché par défaut. Nous allons le montrer une fois que l'utilisateur clique dessus. En termes techniques, nous utilisons un événement click attaché à l'élément web (balise anchor) et changeons le texte existant de l'élément web, autrement dit manipulons le DOM. Pour ce faire, nous devons utiliser le langage de script accepté par le navigateur, qui est toujours JavaScript.

 <! - pour simplifier nous avons conservé le CSS en ligne dans le HTML - vous pouvez garder le CSS dans n'importe quel fichier avec. css extension et l'inclure en utilisant  ->

    
 Les prix 


    

        
 Nom du produit 
        
 Sku 
        
 Prix 
        
 Prix spécial 
    
    

        
 KTree Web Service 
        
 1234564 
        
 60.USD Par Heure 
        
   Cliquer ici  [19659058] KTree Web Service 
        
 1234565 
        
 40.USD Per Hr 
        
   Cliquez ici  
    
    

        
 KTree Web Service 
        
 1234566 
        
 50.USD Pour Hr 
        
   Cliquez ici  
    
  

Forms

Jusqu'à présent, nous avons seulement discuté de l'obtention de données du serveur. Les formulaires sont l'autre côté de HTML, ce qui nous permet d'envoyer des informations au serveur. Nous pouvons utiliser des formulaires pour mettre à jour les informations existantes ou ajouter de nouvelles informations. Les méthodes les plus couramment utilisées dans les formulaires HTML sont GET et POST .

   Prénom: 

  
  

   Nom: 

  
  


  
 

 Si vous cliquez sur le bouton «Soumettre», le bouton Les données de formulaire seront envoyées à une page appelée "createproduct.php". 

Jetez un coup d'oeil sur le code ci-dessus – nous avons deux champs de saisie où l'utilisateur peut entrer des données et appuyer sur le bouton "soumettre". Une fois que le bouton Soumettre est atteint, le navigateur envoie les valeurs de données de ces deux champs de saisie ainsi que d'autres informations au script PHP createproduct.php .

Dans notre exemple c'est PHP, mais ça peut être JSP, Python ou n'importe quel script côté serveur. Le script côté serveur peut lire les valeurs envoyées par le navigateur via POST, puis les traiter ou les stocker dans un fichier ou une base de données. En un mot, c'est ainsi que les données sont envoyées au serveur et finalement stockées dans un fichier ou une base de données.

Note: Disons que nous voulons ajouter des validations avant de soumettre – par exemple, le produit devrait contenir un minimum de 5 caractères, ou le champ SKU ne doit pas être vide. Nous pouvons utiliser JavaScript pour ces validations. Nous devons réagir à l'événement Submit Click et vérifier si les éléments Web possèdent les données dont nous avons besoin. Si quelque chose manque, nous pouvons afficher un message d'erreur et arrêter d'envoyer les données au serveur.

Bases de données

Dès que l'information commence à croître, obtenir la bonne information des dossiers peut devenir une vraie douleur, sans mentionner douloureusement lent. Par exemple, prenons le même fichier de prix, supposons que l'entreprise a des milliers de produits et nous voulons connaître les informations pour le dernier produit de la liste – ce qui signifie que nous devons lire tous les produits jusqu'à ce que nous trouvions celui que nous recherchons . Ce n'est pas un moyen optimal de récupérer des informations, et donc de résoudre ce problème, des bases de données sont nées.

Dans une base de données (DB), nous stockons les données dans des tables (un ensemble structuré de données).

Langages de script et frameworks côté serveur

Nous avons besoin de langages de programmation:

• Pour stocker et lire depuis une base de données ou un fichier
• A GET ] les informations du serveur en faisant un certain traitement.
• Pour lire les informations POST du client et faire un traitement pour stocker / pousser cette information.

Des langages de programmation typiques comme C et Java peuvent écrire et lire des bases de données, mais elles ne peuvent pas être exécutées directement sur le serveur Web. Cela a donné naissance à des langages de script côté serveur.

Les langages de script côté serveur effectuent tous des traitements réguliers et peuvent communiquer avec des bases de données, et peuvent être exécutés directement sur le serveur Web. Les langages de script côté serveur populaires sont PHP, Perl, JSP, Ruby on Rails, etc.

Les développeurs ont commencé à utiliser ces langages et ils ont vite réalisé qu'ils écrivaient le même code pour tous les projets, ce qui a conduit au développement de frameworks, qui facilitent et accélèrent le développement d'applications web

Quelques frameworks remarquables:

• PHP : Zend, YII, Symfony, CakePHP, Laravel
• utilisé comme cadres : Drupal, Joomla, SugarCRM, WordPress
• Java : J2EE, Hibernate, Struts, Printemps
• JavaScript : Node.js

MVC Architecture & Sessions

L'architecture MVC nous aide à diviser le code en plusieurs fichiers et nous permet de séparer la logique métier et la logique de présentation afin de pouvoir les modifier ultérieurement.

En prenant l'exemple d'une plateforme de blogs, nous revisiterons tous les sujets dont nous avons discuté jusqu'à présent, et voir comment nous pouvons co

Une plateforme de blog gère un contenu dynamique et pourrait contenir quelques modules tels que:

• Users
• Blog posts
• Tags
• Catégories

Avant de discuter d'autres fonctionnalités, nous allons venir avec la conception de base de données de base pour le tableau Blog Posts. Les champs importants seraient:

tbl_blog_post

Comme vous pouvez le voir, nous stockons des informations utilisateur dupliquées telles que «Prénom» et «Nom de famille». Si nous avons 10 000 billets de blog, nous stockerons toutes les informations sur les utilisateurs en double dans les 10 000 enregistrements de blog. Il peut y avoir plus d'informations sur l'utilisateur à stocker, par exemple sa désignation, la dernière connexion, etc.

L'alternative, comme vous l'avez peut-être deviné, est de stocker des informations 'Utilisateur' dans un autre tableau. avec le 'Related' Id comme ci-dessous

tbl_user

Récent

Cette division des données en plusieurs tables est l'un des nombreux principes de la normalisation des données

La prochaine partie importante est laisser l'utilisateur créer les données dans ces tables via un formulaire HTML. S'il vous plaît rappelez-vous que nous faisons cette dissection pour comprendre les concepts – ce n'est en aucun cas un tutoriel de programmation complet.

Créer un nouveau blog par un utilisateur authentifié

Pour cela nous avons besoin d'un formulaire HTML avec deux champs de saisie Title, Content) par lequel l'utilisateur peut créer un post de blog.

Une fois que l'utilisateur a saisi les informations et cliqué sur le bouton "Create Post", ces valeurs de formulaire sont envoyées au serveur web en utilisant POST . Les valeurs POST peuvent être lues à l'aide de n'importe quel langage de script côté serveur. Le script du serveur (PHP, Ruby on Rails, Python, etc.) lit la valeur à partir du FORM et la pousse dans la base de données.

Le script peut également traiter, ce qui peut aller du serveur à la date et l'heure pourrait être un champ de calcul basé sur les valeurs récupérées d'une autre table ou d'un service web.

Un autre point à noter: le script peut aussi effectuer des validations, aussi connues sous le nom de validations côté serveur, pour s'assurer que les données sont valides. Si les données sont valides, seules les données FORM sont conservées à tbl_blog_post ou elles renvoient un message au client pour entrer les informations manquantes et le processus continue.

Dans notre tableau tbl_blog_post avec le titre et le contenu, nous avons aussi un champ nommé created_by . Comment obtenir la valeur de ce champ?

Connexion de l'utilisateur

Généralement, la plupart des applications Web ont des fonctionnalités de connexion. Chaque fois qu'un utilisateur s'authentifie avec succès, les informations de l'utilisateur sont stockées dans des sessions afin que ces informations puissent être réutilisées ultérieurement

Qu'est-ce qu'une session?

Le protocole HTTP est un protocole sans état, ce qui signifie le client créé en utilisant GET ou POST vers le serveur Web n'est pas suivi. Si le client (navigateur) fait deux requêtes, le serveur web ne sait pas ou ne se soucie pas si les deux proviennent du même utilisateur. Cela signifie également que, par exemple, si vous êtes connecté à une application eCommerce et que vous ajoutez des produits à votre panier, le serveur ne sait pas que vous êtes tous les deux des mêmes utilisateurs.

Afin de surmonter cette situation d'apatridie, les clients besoin d'envoyer des informations supplémentaires dans chaque demande pour conserver les informations de session pour la durée de plusieurs demandes. Ces informations supplémentaires sont stockées du côté client dans les cookies et du côté serveur dans les sessions.

Une session est une variable tableau qui stocke les informations à utiliser sur plusieurs pages. Les sessions sont identifiées par un identifiant unique avec un nom qui dépend des langages de programmation – en PHP, il s'appelle 'PHP Session ID'. le même ID de session doit être stocké en tant que cookie dans le navigateur client pour être mis en relation.

Afficher des articles de blog individuels

L'élément suivant pour nous consiste à afficher des articles de blog individuels. Nous devons lire les données de la base de données en fonction de l'ID de blog demandé, puis afficher le contenu des champs Titre et Contenu.

Pseudo-code de haut niveau pour l'affichage d'un seul article de blog:

• Lire données de la base de données pour l'ID de blog
• Insérer les données dans le modèle HTML avec CSS et JS

Tout le code ci-dessus peut être écrit dans un seul fichier. C'est ainsi que cela a été fait au début, mais la fraternité du développement a réalisé que ce n'était pas optimal. Pour toute nouvelle fonctionnalité à ajouter, tout le code devait être changé, et il n'était pas facile de travailler dans un environnement multi-développeur.

Cela a amené les développeurs Web à adopter l'architecture MVC, qui découple essentiellement le code en trois composants énumérés ci-dessous:

• Modèle : Le modèle est le domaine / la logique métier, indépendant de l'interface utilisateur. Dans notre exemple, le code pour obtenir des messages individuels à partir de la base de données peut être conservé ici.
• Voir : Une vue peut être n'importe quelle représentation sortie d'information. Notre code HTML pour l'affichage du message peut être conservé ici, donc les données proviennent du modèle, mais le HTML est dans la vue.
• Contrôleur : La troisième partie, le contrôleur est ce qu'on appelle si nous cliquons sur le lien Voir le message. Il obtient les données du modèle et, en utilisant ces données, rend la vue.

Examinons une URL typique dans une application MVC pour mieux la comprendre.

 http://www.abc.com/blogpost/id /1

Ici, le blogpost est le nom du contrôleur et la vue est une action (méthode) dans ce contrôleur. id est l'identifiant du blog. Si nous l'introduisons dans le navigateur, la requête passe à l'action 'View' du contrôleur 'BlogPost', et appelle ici le modèle pour obtenir le contenu de l'ID de blogpost '1' en tant qu'objet modèle. Cet objet est passé à la 'View' pour le rendre.

Ajax & Single Page Applications (SPA)

Si vous êtes né au cours du dernier millénaire, vous pouvez vous rappeler que dans les années 90 et 00, Hotmail et Yahoo! étaient des fournisseurs de messagerie Web très populaires. Si vous cliquez sur la boîte de réception ou un seul e-mail dans la boîte de réception, la page entière sera rafraîchie. Autour de 2004, Gmail est venu avec une caractéristique importante, Ajax. Avec Ajax, la page entière n'a pas été rafraîchie – seules les portions qui devaient être modifiées l'étaient. Donc, si vous avez reçu un nouvel e-mail, au lieu d'avoir à actualiser toute la page, vous avez simplement vu un nouvel e-mail en haut. Cela a donné aux utilisateurs une expérience de bureau, et c'est devenu un moyen très populaire de créer des applications.

Qu'est-ce que Ajax?

Le terme Ajax est venu représenter un large groupe de technologies web peut être implémenté dans une application qui communique avec un serveur en arrière-plan, sans interférer avec l'état actuel de la page.

Avec Ajax, vous envoyez une requête GET à un serveur, et le serveur envoie sa réponse en tant que sortie tout sans bloquer la page Web actuelle, ce qui signifie que l'utilisateur peut continuer à faire tout ce qu'ils faisaient sans interruption. La sortie est ajoutée ou ajoutée à la page Web actuelle.

Dans les sites Web non-Ajax, chaque action de l'utilisateur nécessitant le chargement d'une page complète complète à partir du serveur. Ce processus était inefficace et a créé une mauvaise expérience utilisateur. Tout le contenu de la page a disparu, puis réapparu.

Ajax est l'une des techniques que nous pouvons utiliser pour créer des applications de page unique (ASP). Comme son nom l'indique, l'application entière est dans une seule page et tout le contenu est chargé dynamiquement. Les frameworks JavaScript tels que Angular, React, et Backbone.js peuvent être utilisés pour construire des SPA

Web Servers & Browsers

Les navigateurs sont les interprètes du web. Les navigateurs demandent des données à partir de serveurs Web, et les serveurs Web traitent cette requête et envoient la réponse au navigateur en HTML (y compris CSS, JS, images, etc.), qui est ensuite affichée.

Nous pouvons faire une requête sur le web serveur utilisant l'une de ces trois méthodes importantes:

• GET : Obtenir la ressource demandée comme réponse.
• HEAD : Identique à GET mais la réponse vient dans la tête au lieu de la réponse.
• POST : Soumettez les données de forme au serveur, ou n'importe quelles données via Ajax.

Par exemple, quand vous tapez google.com dans votre navigateur, dans En arrière-plan, le navigateur envoie cette commande au serveur google.com.

 GET: http://google.com

Le serveur Web Google traitera son fichier principal / index et enverra la réponse au client. Il envoie généralement du contenu HTML et des fichiers CSS, ainsi que tout autre fichier multimédia.