Archives des cms - La programmation sur le web https://programmation.surleweb-france.fr/tag/cms/ La programmation gratuite pour tous Sun, 03 Apr 2022 08:39:33 +0000 fr-FR hourly 1 https://wordpress.org/?v=6.9.4 https://i0.wp.com/programmation.surleweb-france.fr/wp-content/uploads/2023/08/cropped-19518430-icone-de-programmation-pour-votre-site-web-mobile-presentation-et-conception-de-logo-gratuit-vectoriel.jpg?fit=32%2C32&ssl=1 Archives des cms - La programmation sur le web https://programmation.surleweb-france.fr/tag/cms/ 32 32 176210735 Développement Web, les CMS https://programmation.surleweb-france.fr/developpement-web-les-cms/ https://programmation.surleweb-france.fr/developpement-web-les-cms/#respond Sat, 27 Nov 2021 17:48:00 +0000 https://programmation.surleweb-france.fr/?p=1238 Les CMS te permettront de publier ton site internet sans plus de connaissances mais voyons ce qu'est un CMS

Continuer la lecture

L’article Développement Web, les CMS est apparu en premier sur La programmation sur le web.

]]> 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 &quot;J'ai l'intention de conquérir le monde&quot;.<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 &quot;éléPHPant. Pas dur, ceci dit entre nous ...            <br />
            <em><a href="index.php?action=post&amp;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&amp;id=2">Commentaires</a></em>
        </p>
    </div>
    </body>
</html>

Cette page aura le rendu suivant dans votre navigateur :

Exemple en ayant suivi un cours sur openclassroom

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 :

Page d’accueil
Création d’un article

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.

L’article Développement Web, les CMS est apparu en premier sur La programmation sur le web.

]]> https://programmation.surleweb-france.fr/developpement-web-les-cms/feed/ 0 1238 Avec quoi créer son site https://programmation.surleweb-france.fr/avec-quoi-creer-son-site/ https://programmation.surleweb-france.fr/avec-quoi-creer-son-site/#respond Sat, 16 May 2020 17:00:00 +0000 https://programmation.surleweb-france.fr/?p=329 Créer un site peut être facile encore faut-il savoir quoi utiliser, coder de bout en bout ou bien utiliser un CMS ?

Continuer la lecture

L’article Avec quoi créer son site est apparu en premier sur La programmation sur le web.

]]> On avance dans la série d’article sur « Comprendre et créer son site« . Je t’invite d’ailleurs à aller lire cette page, tu y apprendras ce que tu dois faire avant pour que tout soit prêt.

Tu auras le choix dans la manière dont tu veux créer ton site, tu pourras choisir :

  • de coder ton site ligne par ligne, cela te demandera beaucoup de connaissances que ce soit en PHP (ou Perl…), en javascript, en CSS. Pour un site statique, avec une présentation simple, cela peut être une bonne solution
  • d’utiliser un CMS tel que WordPress, l’avantage est qu’en quelques minutes, ton site peut être en ligne en prenant en compte les différents types de navigateur (ordinateur, tablette, téléphone) que les visiteurs utilisent

Dans cet article, je te montrerai comment installer et utiliser WordPress qui sera installé sur ton serveur web tout frais (vu dans cet article).

Installation de WordPress

Une fois que ton serveur web est installé, je m’appuie sur un LAMP (pour moi Linux, Apache2, MariaDB, PHP). L’installation de WordPress est simple.

Je ferai une installation en ligne de commande.

Création de la base de données et de son utilisateur

WordPress utilise une base de données pour stocker la configuration de ton site, les différentes pages, les utilisateurs … En bref, tout le contenu de ton site. Tu auras donc besoin d’une base avec son utilisateur. Dans ton terminal :

sudo mysql

Ensuite, on crée la base et son utilisateur, en lui donnant les droits :

CREATE DATABASE nom_base;
GRANT ALL PRIVILEGES ON nom_base.* TO 'utilisateur'@'localhost' IDENTIFIED BY 'mot_de_passe';
FLUSH  PRIVILEGES;
QUIT;

Les apostrophes sont importantes.

Mise en place de WordPress

Maintenant que ta base et ton utilisateur est créé, passons à WordPress.

On commence par télécharger la dernière version de WordPress :

wget https://fr.wordpress.org/wordpress-latest-fr_FR.zip

On le décompresse et le place dans le dossier du serveur qui doit contenir le site :

sudo unzip wordpress-latest-fr_FR.zip -d /var/www

Maintenant, on va donner les bons droits au dossier afin :

  • de limiter les actions des utilisateurs
  • s’assurer que l’installation via le navigateur fonctionne
  • les fichiers doivent être modifiés par le serveur (www-data)

Dans le terminal, saisies :

sudo chown www-data:www-data /var/www/wordpress -R
sudo chmod -R -wx,u+rwX,g+rX,o+rX /var/www/wordpress

Afin de modifier le nom de ton dossier qui contient ton site, actuellement le dossier se nomme wordpress :

sudo mv /var/www/wordpress /var/www/mon_site

Configuration du VirtualHost d’Apache2

Ecrire dans un nouveau fichier de configuration de virtual /etc/apache2/sites-available/mon_site.conf :

<VirtualHost *:80>
        ServerName mon_site
        DocumentRoot /var/www/mon_site
        <Directory /var/www/mon_site>
                AllowOverride all
                Require all granted
        </Directory>
        ErrorLog /var/log/apache2/error.mon_site.log
        CustomLog /var/log/apache2/access.mon_site.log combined
</VirtualHost>

Maintenant, tu dois activer ce virtualhost :

sudo a2ensite mon_site.conf

puis recharger le service :

sudo service apache2 reload

Conclusion

Ton site est entièrement opérationnel. Abonnes-toi, je ferai une page sur l’utilisation de WordPress.

L’article Avec quoi créer son site est apparu en premier sur La programmation sur le web.

]]> https://programmation.surleweb-france.fr/avec-quoi-creer-son-site/feed/ 0 329