A moins d’être un féru de PHP et HTML, la mise en place d’un site internet peut être fastidieuse, connaissance en langage de programmation, le mise en page, des scripts. Tout ses concepts peuvent être déroutant surtout si tu veux faire un site simple pour évoquer tes recettes de cuisine ou tout autre sujet que tu as envie de partager.
De plus, tu peux rapidement avoir des soucis pour la mise en page ou l’intégration d’outils si tes connaissances sont limitées. Limitées ne veut pas dire que tu es idiot, des personnes font de la programmation leur métier, ils vont étudier des années afin d’acquérir les compétences notamment pour créer et/ou administrer et/ou gérer le contenu d’un site internet.
Heureusement, des personnes pleines de bon sens et voulant se simplifier la vie ont créées les CMS pour Content Management System (pour les anglophiles) ou Système de Gestion de Contenu (SGC pour les francophiles !!!).
CMS, c’est quoi ?
Un CMS est un système de gestion de contenu, il va permettre de mettre à disposition un ensemble d’outils pour publier et gérer du contenu que ce soit la mise en page avec bien souvent des thèmes à foison mais aussi pour l’administration de la base de données (SGBDD), les actions sur celle-ci seront gérées par le CMS.
Les CMS vont également fournir (dans la majorité des cas), une gestion des utilisateurs que ce soit en tant qu’administrateur, auteur ou lecteur avec des droits qui leur seront propres.
Parmi les CMS les plus connus, on va retrouver :
Bien que ce sont tous des systèmes de gestion de contenu, ils n’ont pas tous le même objectif, WordPress sera plus orienté blog facile à mettre en œuvre avec l’intégration de plugins divers et variés (y compris pour y ajouter une petite plateforme d’e-commerce) alors que Magento sera bien plus orienté e-commerce.
Plus en détails
Cette partie n’est pas présente pour te dégouter, cela reste très intéressant à connaître, elle est simplement faite pour te montrer comment un CMS peut être utile.
Quelque soit le type de site internet que nous voulons concevoir, nous allons avoir besoin de compétences dans différents domaines. Pour la mise en page d’un site, qu’il soit statique (avec des pages qui ne se modifieront pas une fois chargées) ou bien dynamique (avec des pages ayant une interaction avec l’utilisateur même si celui-ci n’en a pas conscience).
Vous allez avoir donc besoin de connaître au moins le XHTML qui est un langage de description avec des balises :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Mon blog</title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<h1>Mon super blog !</h1>
<p>Derniers billets du blog :</p>
<div class="news">
<h3>
Le PHP à la conquête du monde ! <em>le 20/09/2020 à 19h38min49s</em>
</h3>
<p>
C'est officiel, l'éléPHPant a annoncé à la radio hier soir "J'ai l'intention de conquérir le monde".<br />
Il a en outre précisé que le monde serait serait à sa botte en moins de temps qu'il n'en fallait pour dire "éléPHPant. Pas dur, ceci dit entre nous ... <br />
<em><a href="index.php?action=post&id=1">Commentaires</a></em>
</p>
</div>
<div class="news">
<h3>
Bienvenu sur mon blog ! <em>le 18/09/2020 à 10h12min00s</em>
</h3>
<p>
Je vous souhaite à toutes et à tous la bienvenue sur mon blog qui parlera de ... PHP, bien sûr ! <br />
<em><a href="index.php?action=post&id=2">Commentaires</a></em>
</p>
</div>
</body>
</html>
Cette page aura le rendu suivant dans votre navigateur :
Pas très beau, n’est-ce pas ?
Pour lui donner un peu plus de forme, nous devons inclure du CSS. Le CSS permettra de faire la mise en forme des balises utilisées dans le code XHTML. Sans chercher à réaliser quoi que ce soit, voici un exemple en utilisant le code HTML précédent :
body{
background-color: green;
margin: auto
}
h1, h2, h3{
text-align: center;
}
h1{
font-size: 50px;
color: red;
}
h2{
font-size: 40px;
}
h3{
font-size: 30px;
}
Cela donnera un rendu (moche) de ce type :
J’espère que malgré la pauvreté de cet exemple, tu comprends que les connaissances pour écrire son site sont importantes.
Maintenant, si tu veux en plus ajouter du dynamisme à ta page, tu auras besoin d’un langage de programmation, par exemple le PHP qui sera du côté serveur, le code HTML pourra être différent en fonction de l’internaute mais une fois la page chargée, le code ne bougera plus. Pour faire simple, si tu veux simplement créer un espace membre pour afficher le nom de l’internaute qu’il aura préalablement enregistrer, sur ton serveur, tu devras écrire les lignes pour :
- créer un compte
- se connecter au compte
- afficher les données liées au compte
L’exemple suivant, provient du site Waytolearnx.com :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<?php
require('config.php');
if (isset($_REQUEST['username'], $_REQUEST['email'], $_REQUEST['password'])){
// récupérer le nom d'utilisateur
$username = stripslashes($_REQUEST['username']);
$username = mysqli_real_escape_string($conn, $username);
// récupérer l'email
$email = stripslashes($_REQUEST['email']);
$email = mysqli_real_escape_string($conn, $email);
// récupérer le mot de passe
$password = stripslashes($_REQUEST['password']);
$password = mysqli_real_escape_string($conn, $password);
$query = "INSERT into `users` (username, email, type, password)
VALUES ('$username', '$email', 'user', '".hash('sha256', $password)."')";
$res = mysqli_query($conn, $query);
if($res){
echo "<div class='sucess'>
<h3>Vous êtes inscrit avec succès.</h3>
<p>Cliquez ici pour vous <a href='login.php'>connecter</a></p>
</div>";
}
}else{
?>
<form class="box" action="" method="post">
<h1 class="box-logo box-title">
<a href="https://waytolearnx.com/">WayToLearnX.com</a>
</h1>
<h1 class="box-title">S'inscrire</h1>
<input type="text" class="box-input" name="username"
placeholder="Nom d'utilisateur" required />
<input type="text" class="box-input" name="email"
placeholder="Email" required />
<input type="password" class="box-input" name="password"
placeholder="Mot de passe" required />
<input type="submit" name="submit"
value="S'inscrire" class="box-button" />
<p class="box-register">Déjà inscrit?
<a href="login.php">Connectez-vous ici</a></p>
</form>
<?php } ?>
</body>
</html>
Pour dynamiser ta page sans la recharger, tu pourras aussi utiliser le javascript, il s’agit d’un autre langage de programmation qui peut être directement utilisé dans ton navigateur sans avoir à recharger la page, voici un exemple provenant de Outils-web :
<script language="JavaScript1.2">
/*
Source : http://www.editeurjavascript.com
Adaptation : http://www.outils-web.com
*/
/*dimensions de la box*/
ejs_scroll_largeur = 200;
ejs_scroll_hauteur = 100;
/*couleur du fond de la box*/
ejs_scroll_bgcolor = '#DDD';
/* chemin de l'image de fond */
ejs_scroll_background = "";
/* temps en secondes */
ejs_scroll_pause_seconde = 3;
ejs_scroll_message = new Array;
/* placez vos liens et messages ici*/
ejs_scroll_message[0]='<a href="lien 1" CLASS=ejs_scroll>message 1</a>';
ejs_scroll_message[1]='<a href="lien 2" CLASS=ejs_scroll>message 2</a>';
ejs_scroll_message[2]='<a href="lien 3" CLASS=ejs_scroll>message 3</a>';
function d(texte)
{document.write(texte);}
d('<DIV ID=ejs_scroll_relativ STYLE="position:relative;width:'+ejs_scroll_largeur+';height:'+ejs_scroll_hauteur+';background-color:'+ejs_scroll_bgcolor+';background-image:url('+ejs_scroll_background+')">');
d('<DIV ID=ejs_scroll_cadre STYLE="position:absolute;width:'+(ejs_scroll_largeur-8)+';height:'+(ejs_scroll_hauteur-8)+';top:4;left:4;clip:rect(0 '+(ejs_scroll_largeur-8)+' '+(ejs_scroll_hauteur-8)+' 0)">');
d('<div id=ejs_scroller_1 style="position:absolute;width:'+(ejs_scroll_largeur-8)+';left:0;top:0;" CLASS=ejs_scroll>'+ejs_scroll_message[0]+'</DIV>');
d('<div id=ejs_scroller_2 style="position:absolute;width:'+(ejs_scroll_largeur-8)+';left:0;top:'+ejs_scroll_hauteur+';" CLASS=ejs_scroll>'+ejs_scroll_message[1]+'</DIV>');
d('</DIV></DIV>');
ejs_scroll_mode =1;
ejs_scroll_actuel = 0;
/* NE PAS MODIFIER*/
function ejs_scroll_start()
{if(ejs_scroll_mode == 1)
{ejs_scroller_haut = "ejs_scroller_1";
ejs_scroller_bas = "ejs_scroller_2";
ejs_scroll_mode = 0;}
else
{ejs_scroller_bas = "ejs_scroller_1";
ejs_scroller_haut = "ejs_scroller_2";
ejs_scroll_mode = 1;}
ejs_scroll_nb_message = ejs_scroll_message.length-1;
if(ejs_scroll_actuel == ejs_scroll_nb_message)
ejs_scroll_suivant = 0;
else
ejs_scroll_suivant = ejs_scroll_actuel+1;
if(document.getElementById)
document.getElementById(ejs_scroller_bas).innerHTML = ejs_scroll_message[ejs_scroll_suivant];
ejs_scroll_top = 0;
if(document.getElementById)
setTimeout("ejs_scroll_action()",ejs_scroll_pause_seconde*1000) }
function ejs_scroll_action()
{ejs_scroll_top -= 1;
document.getElementById(ejs_scroller_haut).style.top = ejs_scroll_top;
document.getElementById(ejs_scroller_bas).style.top = ejs_scroll_top+ejs_scroll_hauteur;
if((ejs_scroll_top+ejs_scroll_hauteur) > 0)
setTimeout("ejs_scroll_action()",10)
else
ejs_scroll_stop()}
function ejs_scroll_stop()
{ejs_scroll_actuel = ejs_scroll_suivant;
ejs_scroll_start()}
window.onload = ejs_scroll_start;
Pour finir cette partie, en reprenant un espace membre, tu auras besoin d’un base de données et de faire des requêtes pour lire des données s’y trouvant ou en inscrire de nouvelles, tu utiliseras certainement le langage SQL (oui encore un nouveau). Pour cela, tu auras besoin d’un SGBDD comme MariaDB ou bien MySQL :
INSERT INTO client (prenom, nom, ville, age)
VALUES
('Rébecca', 'Armand', 'Saint-Didier-des-Bois', 24),
('Aimée', 'Hebert', 'Marigny-le-Châtel', 36),
('Marielle', 'Ribeiro', 'Maillères', 27),
('Hilaire', 'Savary', 'Conie-Molitard', 58);
Et alors ? Un CMS ?
Maintenant que tu as vu les connaissances (minimum) à devoir acquérir, tu comprends que pour mettre en ligne tes pages pour simplement les partager sans faire de toi un ingénieur informaticien, il sera plus simple d’utiliser un CMS qui te donnera tous les outils pour publier ton site.
Si l’on prend l’interface de WordPress, tu auras accès (via ton navigateur) à ce genre de page :
WordPress se chargera de mettre en base de données tes articles ainsi que la mise en page grâce à l’ajout de thème et de plugin.
Pour ce qui est du rendu, je t’invite de finir la lecture pour voir les résultats possibles.
Quelques exemples
Site WordPress
Voici quelques sites utilisant les différentes solutions :
Walt Disney Company
News Microsoft
Site Prestashop
Le slip français
Naturabox
Je pourrais également faire de même pour l’ensemble des CMS, mais tu as saisi l’idée. Ces 5 solutions sont les plus répandues.
Conclusion
J’espère ne pas t’avoir détourner de l’apprentissage des connaissances utiles pour la création d’un site internet mais simplement t’avoir montré que la création d’un site peut être simple même pour une personne ne possédant de connaissance en langage informatique.