TechBlogSD - Tout pour le développement WordPress et WEB
Instructions WEB et WordPress, actualités, revues de thèmes et plugins

Principes de base des sites Web dynamiques

3

Qu’est-ce qu’un site Web dynamique ?

Contrairement aux sites Web statiques, un site Web dynamique ou une page Web affiche le contenu différemment à chaque fois qu’un visiteur recharge ou actualise la page. En outre, il peut également fournir des fonctionnalités plus interactives au sein d’une page Web sans rechargement. Plus important encore, les pages Web dynamiques sont créées en assemblant plusieurs pages statiques ou dynamiques. Prenons l’exemple d’un article de blog PHP comme indiqué ci-dessous. Cette page est un assemblage de fichiers header.php, footer.php, sidebar.php et main-content.php.

Principes de base des sites Web dynamiques

Ces pages dynamiques sont créées à l’aide des deux méthodes suivantes basées sur le traitement :

  • Script côté client
  • Script côté serveur

Script côté client

Les scripts côté client sont utilisés pour contrôler le comportement dynamique au sein d’une page Web en fonction d’une action du mouvement de la souris ou de l’entrée au clavier. Dans ce cas, le comportement dynamique est créé dans le navigateur Web de l’utilisateur exécuté sur un ordinateur local au lieu d’un serveur Web situé à distance. Par conséquent, les pages Web dynamiques n’ont pas besoin d’être rechargées pour les comportements dynamiques côté client. Tout d’abord, le navigateur récupère le contenu initial du serveur et génère les contrôles dynamiques dans le navigateur en fonction de l’entrée de l’utilisateur. Les langages de script côté client incluent JavaScript, ActionScript et Flash.

N’oubliez pas les points suivants :

  • Vous devez activer JavaScript dans votre navigateur afin de voir une page dynamique exécutant un JavaScript.
  • Java et JavaScript sont deux langages différents.
  • Java est un langage complexe développé par Sun Microsystems actuellement détenu par Oracle Corporation. Alors que JavaScript est un langage de script développé par Netscape.

Exemple de fonctionnement des scripts côté client avec JavaScript

Voici un exemple de code d’une page dynamique qui demande le nom d’utilisateur, puis l’affiche dans la fenêtre du navigateur sous la forme "Hello USERNAME" en utilisant HTML et JavaScript.

<HTML> <HEAD> <TITLE>WebNots - Dynamic Page Example with JavaScript</TITLE> <SCRIPT Language = JavaScript> var name = prompt("Enter your name", "Name"); </SCRIPT> </HEAD> <BODY> <SCRIPT Language = "JavaScript"> document.write("<H2> Hello " + name + "</H2>"); </SCRIPT> </BODY> </HTML>
  • Supposons que ce code soit stocké sur un serveur Web avec le nom de la page «http://www.example.com/dynamicjavascript.html» et qu’un visiteur recherche cette page dans un navigateur Chrome.
  • Une fois la demande reçue du navigateur, le serveur Web ne traite aucun code et envoie le document HTML "dynamicjavascript.html" tel qu’il est stocké.
  • Le navigateur reçoit le document HTML, interprète les balises, traite le script et charge le contenu en tant que page Web.

Un exemple typique de script côté client est une validation des entrées de formulaire soumises par les utilisateurs. Par exemple, si vous ne saisissez pas l’identifiant de courrier électronique obligatoire, le code JavaScript au niveau du navigateur cessera de soumettre le formulaire au serveur.

Script côté serveur

Les scripts côté serveur permettent à la même page d’afficher un contenu différent à chaque fois qu’elle est chargée. Le contenu d’une page dynamique est stocké dans la base de données d’un serveur et le comportement dynamique est contrôlé par les programmes de script exécutés côté serveur. Par conséquent, le rechargement de la page est requis par le navigateur à chaque fois pour récupérer le contenu dynamique. Les langages de script côté serveur incluent PHP, JSP, Perl, ASP, ASP.NET, ColdFusion, Ruby et WebDNA.

Exemple de fonctionnement des scripts côté serveur avec PHP

Voici un exemple de code pour que le script côté serveur affiche un contenu différent à chaque fois que la page est chargée en utilisant HTML et PHP.

<html> <head> <title>WebNots - Dynamic Page Example with PHP</title> </head>
  • En supposant que ce code est stocké sur un serveur sous le nom " http://www.example.com/dynamicphp.php ".
  • Lorsque le navigateur demande cette URL pour la première fois, le serveur traite d’abord le code PHP dans le document et envoie le premier contenu «Ceci est un site HTML ».
  • Le navigateur reçoit ce contenu, l’interprète pour les balises et l’affiche en tant qu’en-tête.
  • Lorsque la page est demandée pour la deuxième fois, le serveur répond avec le deuxième élément "Ceci est un site créé avec PHP" et le processus continue.

Un exemple typique de traitement dynamique est la diffusion d’annonces sur une page Web avec des programmes tels que Google AdSense. Vous verrez une publicité différente sur la page à chaque fois qu’elle est chargée en fonction du coût le plus élevé proposé par l’annonceur.

Caractéristiques d’une page Web dynamique

  • Les pages dynamiques offrent des informations personnalisées selon les besoins de l’utilisateur.
  • Fournit des éléments plus interactifs pour engager les visiteurs longtemps dans une page Web.
  • Les scripts côté serveur ont besoin d’accéder au serveur et ont donc besoin d’un compte d’hébergement avec le fournisseur de services comme GoDaddy, Bluehost, SiteGround, HostGator, etc.
  • Bien que les outils de création de sites Web gratuits tels que Weebly permettent l’assemblage dynamique de contenu (au moins pour les articles de blog dans Weebly), vous ne pouvez pas accéder au serveur pour le dépannage.
  • Les validations de formulaire de base sont effectuées avec des scripts côté client et un traitement complexe est réalisé via des scripts côté serveur.

Apprenez des sites Web dynamiques ou statiques.

Source d’enregistrement: www.webnots.com
Leave A Reply

Ce site utilise des cookies pour améliorer votre expérience. Nous supposerons que cela vous convient, mais vous pouvez vous désinscrire si vous le souhaitez. J'accepte Plus de détails