Votre objectif est de créer un site internet. Avant de vous lancer dans ce très beau projet, il me semblait important d'aborder avec vous une question toute simple : comment fonctionne un site internet ? C'est en me posant cette question en 2004 que j'ai commencé à développer mon premier site en HTML d'abord, puis en y ajoutant du CSS, puis une base de données SQL et du PHP. Plus tard j'ai découvert les CMS, avec, dans un premier temps, Dotclear, puis ensuite WordPress.
Dans cet article, nous allons donc découvrir ensemble le fonctionnement d'un site internet. J'essaierais, pour chaque point, d'être le plus complet possible tout en restant simple. Nous allons donc aborder les fondamentaux d'un site internet, les technologies de base d'un site, la gestion des données et comment WordPress se greffe à tout cela.
Prêt(e) ? Attaquons donc cette première partie.
Les fondamentaux d'un site internet
Un site internet est un ensemble de pages web. Ces pages sont reliées entre elles par des liens hypertextes (maillage interne). Pour accéder à ces pages, vous utilisez un navigateur web comme Google Chrome ou Firefox.
Chaque site internet a une adresse unique appelée URL (Uniform Resource Locator). Par exemple, www.votresite.com est une URL. Www.dix9.com aussi.
Les composants principaux d'un site internet
Pour qu'un site internet fonctionne, il a besoin de plusieurs éléments clés.
Voici les principaux :
- Serveur : Un serveur est un ordinateur puissant. Il héberge votre site et le rend accessible en ligne. Pensez-y comme à une bibliothèque qui stocke vos livres (pages web). Lorsque quelqu'un veut lire un livre, il va à la bibliothèque.
- Nom de domaine : Le nom de domaine est l'adresse de votre site internet. C'est ce que les gens tapent dans leur navigateur pour trouver votre site. Par exemple, www.votresite.com. C'est comme l'adresse de votre maison.
- Adresse IP : Une adresse IP est une série de chiffres unique. Elle identifie chaque appareil connecté à Internet, y compris les serveurs. Pensez-y comme à un numéro de téléphone pour votre serveur.
Dans le fonctionnement d'un site internet, ces éléments travaillent ensemble pour afficher votre site sur l'écran des visiteurs. Lorsque quelqu'un tape votre URL, le navigateur demande au serveur d'envoyer les pages de votre site. Le serveur répond avec les fichiers demandés, et le navigateur les affiche.
Les technologies de base d'un site internet
HTML : La structure de la page
Le HTML (HyperText Markup Language) est la base de tout site internet. Il définit la structure et le contenu des pages web.
- Balises HTML : Les balises sont des éléments de base du HTML. Elles entourent le contenu pour indiquer au navigateur comment afficher ce contenu. Par exemple, <h1> pour un titre, <p> pour un paragraphe, et <a> pour un lien.
- Structure de base : Un document HTML commence avec <!DOCTYPE html>, suivi des balises <html>, <head>, et <body>. Le <head> contient des informations sur la page, et le <body> contient le contenu affiché.
Je vous encourage grandement à prendre quelques minutes pour aller découvrir cela plus en détails. Le but n'est pas de devenir un pro du html, mais au moins de comprendre son fonctionnement. Il existe de très bon tutoriels sur internet, dont celui-ci qui donne les premières bases.
Exemple de structure de base :
<!DOCTYPE html> <html> <head> <title>Mon site web</title> </head> <body> <h1>Bienvenue sur mon site</h1> <p>Ceci est un paragraphe.</p> </body> </html>
CSS : Le design et l'apparence
CSS (Cascading Style Sheets) est utilisé pour contrôler l'apparence des pages web. Si HTML est le squelette, CSS est les vêtements et la décoration.
- Sélecteurs et propriétés : Les sélecteurs sont utilisés pour cibler des éléments HTML. Les propriétés définissent comment ces éléments doivent être stylisés. Par exemple, color pour la couleur du texte, font-size pour la taille de la police.
- Intégration CSS : Les styles CSS peuvent être intégrés directement dans le fichier HTML avec la balise <style>, ou dans un fichier séparé référencé avec <link rel="stylesheet" href="styles.css">.
Là encore, je vous encore à aller apprendre les bases du CSS. Inutile d'apprendre toutes les propriétés, mais au moins apprendre les plus utilisées. Un petit tuto si cela vous intéresse.
Exemple de règles CSS :
h1 {
color: blue;
font-size: 24px;
}
p {
color: black;
font-size: 14px;
}
JavaScript : L'interactivité
JavaScript est un langage de programmation qui ajoute de l'interactivité aux pages web. Il permet de rendre les pages dynamiques et réactives.
- Fonctions et événements : JavaScript peut réagir aux actions de l'utilisateur, comme les clics ou les soumissions de formulaires. Par exemple, une fonction peut afficher un message lorsque l'utilisateur clique sur un bouton.
- Intégration JavaScript : Les scripts JavaScript peuvent être intégrés directement dans le HTML avec la balise <script>, ou dans un fichier externe, tout comme le CSS, référencé avec <script src="script.js"></script>.
Pour le javascript, si vous êtes curieux, vous pouvez aussi vous y attarder. Personnellement, je n'ai jamais pris le soin de m'y pencher et cela ne m'a jamais bloqué.
Exemple de script JavaScript :
<button onclick="saluer()">Cliquez-moi</button>
<script>
function saluer() {
alert('Bonjour, monde !');
}
</script>
PHP : Le traitement côté serveur
PHP (Hypertext Preprocessor) est un langage de script côté serveur utilisé pour créer des pages web dynamiques. Il est particulièrement utilisé avec des bases de données pour générer du contenu en fonction des requêtes des utilisateurs.
- Script PHP : PHP est intégré dans le HTML avec des balises <?php ... ?>. Par exemple, <?php echo 'Bonjour, lecteurs de Dix9.com !'; ?> affiche "Bonjour, lecteurs de Dix9.com !" sur une page web.
- Utilisation dans WordPress : WordPress utilise PHP pour gérer le contenu, interagir avec la base de données et générer les pages dynamiques.
En créant un site internet avec WordPress vous ne serez pas amené à créer des pages PHP. Mais c'est toujours bien de savoir identifier du code PHP.
Exemple de script PHP :
<?php echo 'Bonjour, lecteurs de Dix9.com !'; ?>
SQL : Langage de manipulation des bases de données
SQL (Structured Query Language) est utilisé pour interagir avec les bases de données. Il permet de créer, lire, mettre à jour et supprimer des données.
- Commandes de base : SELECT pour récupérer des données, INSERT pour ajouter des données, UPDATE pour modifier des données, et DELETE pour supprimer des données.
- Exemple de commande SQL : SELECT * FROM utilisateurs WHERE age > 18; récupère tous les utilisateurs de plus de 18 ans dans la base de données.
Exemple de commande SQL :
SELECT * FROM utilisateurs WHERE age > 18;
FTP : Transfert de fichiers
FTP (File Transfer Protocol) est utilisé pour transférer des fichiers entre votre ordinateur local et un serveur web. C'est une méthode courante pour télécharger et téléverser des fichiers de site web. Cela sera le cas par exemple pour déposer les fichiers de WordPress sur votre serveur.
- Utilisation : Vous pouvez utiliser un client FTP pour gérer vos fichiers sur le serveur. Cela vous permet de téléverser des images, des scripts, et des pages HTML nécessaires à votre site.
- Clients FTP populaires : FileZilla et Cyberduck sont des exemples de clients FTP couramment utilisés.
HTTP/HTTPS : Protocoles de communicationHTTP (HyperText Transfer Protocol) et HTTPS (HTTP Secure) sont les protocoles utilisés pour la communication entre les navigateurs web et les serveurs.
- HTTP : Utilisé pour les communications non sécurisées. Lorsqu'un utilisateur visite une page web, son navigateur envoie une requête HTTP au serveur, qui renvoie les fichiers de la page web.
- HTTPS : Une version sécurisée de HTTP. Il utilise le protocole SSL/TLS pour crypter les données échangées entre le navigateur et le serveur, protégeant ainsi les informations sensibles. HTTPS est essentiel pour sécuriser les transactions et améliorer la confiance des utilisateurs.
Aujourd'hui, difficile de penser créer un site interne sans installer un certificat SSL pour crypter les données.
SSL/TLS : Sécurisation des échanges de données
SSL/TLS : Sécurisation des échanges de donnéesSSL (Secure Sockets Layer) et TLS (Transport Layer Security) sont des protocoles de cryptographie qui assurent la sécurité des échanges de données sur Internet.
SSL/TLS protège les informations sensibles comme les mots de passe et les numéros de carte de crédit.
Utiliser un certificat SSL/TLS sur votre site est crucial pour sécuriser vos données et améliorer votre référencement.
Vous devez maintenant mieux comprendre le fonctionnement d'un site internet. Nous avons exploré HTML, CSS, JavaScript, PHP, SQL, FTP, HTTP/HTTPS, et SSL/TLS. Ces technologies travaillent ensemble pour créer, styliser, et sécuriser les sites web.
La gestion des données avec les bases de données
Introduction aux bases de données
Une base de données est un système organisé permettant de stocker, gérer et récupérer des données. Pour un site internet, les bases de données sont essentielles pour gérer des informations comme les utilisateurs, les articles, les commentaires, etc.
Imaginez une bibliothèque où chaque livre représente un ensemble de données organisées de manière à être facilement accessibles et manipulables.
Comme nous avons pu le voir plus haut, SQL est le langage standard utilisé pour interagir avec les bases de données
Interaction entre le site internet et la base de données
Les sites web dynamiques utilisent des langages de programmation comme PHP pour interagir avec les bases de données. Voici comment cela fonctionne :
- Requête utilisateur : Un utilisateur soumet un formulaire sur votre site web (par exemple, un formulaire de contact).
- Traitement serveur : Le serveur web exécute un script PHP qui traite la requête. Ce script utilise SQL pour interagir avec la base de données.
- Réponse base de données : La base de données renvoie les résultats de la requête (par exemple, enregistrement des informations de contact dans la base de données).
- Affichage utilisateur : Le script PHP génère une réponse (comme une page de confirmation) qui est envoyée au navigateur de l'utilisateur au format HTML.
Exemple d'interaction PHP et SQL
Voici un exemple simple de script PHP qui insère un nouvel utilisateur dans une base de données :
<?php
// Connexion à la base de données
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "ma_base_de_donnees";
$conn = new mysqli($servername, $username, $password, $dbname);
// Vérifier la connexion
if ($conn->connect_error) {
die("Connexion échouée: " . $conn->connect_error);
}
// Insérer un nouvel utilisateur
$sql = "INSERT INTO utilisateurs (nom, age) VALUES ('Jean', 25)";
if ($conn->query($sql) === TRUE) {
echo "Nouvel enregistrement créé avec succès";
} else {
echo "Erreur: " . $sql . "<br>" . $conn->error;
}
// Fermer la connexion
$conn->close();
?>
Ce script se connecte à une base de données, exécute une commande SQL pour insérer un nouvel utilisateur, et affiche un message de succès ou d'erreur.
Nous avons abordé les bases de données et leur rôle crucial dans la gestion des informations pour un site internet. Vous avez découvert comment est utilisé SQL pour interagir avec une base de données et vu comment PHP peut être utilisé pour intégrer ces interactions dans un site web.
Le CMS WordPress
Qu'est-ce qu'un CMS ?
Un CMS (Content Management System) est une application qui permet de créer, gérer et modifier du contenu sur un site web sans nécessiter de connaissances approfondies en programmation.
Vous déposez des fichiers sur le serveur, via un client FTP, puis vous ajoutez les paramètres de connexion à la base de données et votre site est disponible.
WordPress est le CMS le plus populaire au monde, utilisé par des millions de sites web.
Pourquoi choisir WordPress ?
WordPress est apprécié pour sa simplicité d'utilisation et sa flexibilité. Voici pourquoi il est souvent choisi :
- Facilité d'utilisation : Une interface intuitive permet de créer et gérer du contenu facilement.
- Personnalisation : Des milliers de thèmes et d'extensions permettent de personnaliser l'apparence et les fonctionnalités du site.
- Communauté active : Une grande communauté d'utilisateurs et de développeurs offre un soutien constant et de nombreuses ressources.
Je vous en dis plus dans mon article "Pourquoi choisir WordPress pour son site internet ?".
Fonctionnement de WordPress
WordPress fonctionne grâce à plusieurs composants clés qui interagissent pour créer un site web dynamique. Voici comment ces composants se connectent :
- Fichiers WordPress : Les fichiers de base de WordPress sont installés sur votre serveur. Ils incluent les fichiers PHP, CSS et JavaScript nécessaires au fonctionnement du site.
- Base de données MySQL : WordPress utilise une base de données MySQL pour stocker tout le contenu du site, y compris les articles, les pages, les commentaires et les paramètres du site.
- Thèmes : Les thèmes contrôlent l'apparence de votre site. Ils sont constitués de fichiers PHP, CSS et d'images. Vous pouvez installer et activer des thèmes pour changer le design de votre site.
- Extensions : Les extensions ajoutent des fonctionnalités à votre site WordPress. Elles peuvent être installées pour ajouter des galeries de photos, des formulaires de contact, des outils SEO, etc.
Interactions de WordPress avec les technologies de base
Voici comment WordPress utilise les technologies de base d'un site web :
- HTML et CSS : WordPress génère du code HTML et CSS pour afficher les pages web. Les thèmes définissent la structure et le style des pages en utilisant ces langages.
- JavaScript : WordPress utilise JavaScript pour ajouter de l'interactivité à votre site. Les thèmes et les extensions peuvent inclure des scripts JavaScript pour améliorer l'expérience utilisateur.
- PHP : PHP est le moteur principal de WordPress. Il traite les requêtes des utilisateurs, interagit avec la base de données MySQL et génère du contenu dynamique.
- SQL : WordPress utilise SQL pour interagir avec la base de données MySQL. Par exemple, lorsqu'un utilisateur publie un nouvel article, WordPress exécute une commande SQL pour enregistrer cet article dans la base de données.
Exemple de fonctionnement de WordPress
Voyons un exemple de ce qui se passe lorsqu'un utilisateur visite une page de votre site WordPress :
- Requête utilisateur : L'utilisateur tape l'URL de votre site dans son navigateur.
- Serveur web : Le serveur web reçoit la requête et exécute le fichier index.php de WordPress.
- PHP et SQL : WordPress utilise PHP pour traiter la requête. Il exécute des commandes SQL pour récupérer le contenu pertinent dans la base de données.
- Génération de la page : WordPress utilise les fichiers de thème pour générer le HTML et le CSS nécessaires à l'affichage de la page.
- Envoi au navigateur : Le serveur envoie le code HTML, CSS et JavaScript généré au navigateur de l'utilisateur, qui affiche la page.
Vous avez maintenant une vue d'ensemble de WordPress et de son fonctionnement par rapport à un site web. WordPress simplifie la gestion des sites web en intégrant des technologies comme HTML, CSS, JavaScript, PHP et SQL.
Grâce à ses thèmes et extensions, il permet de créer des sites web personnalisés sans nécessiter de compétences techniques avancées.
Dans cet article, nous avons donc pu voir le fonctionnement d'un site internet. Bien évidemment, nous avons vu cela de manière très simple. N'hésitez pas à approfondir certains points pour en apprendre plus. Cela sera toujours très utile.
Nous allons maintenant voir comment installer WordPress sur un serveur.
