Catégories
Apprendre le PHP

Les variables PHP

Une variable est une donnée stockée en mémoire temporairement (le temps d’exécution de votre page).

Types de variable

En PHP une variable possède un type qui défini le caractère de la données stockée.

Les types de variables sont les suivants :

  • Texte (string)
  • Nombre entier (int)
  • Nombre décimal (float)
  • Tableau (array)
  • Booléen (bool)
  • Nul (null)

Déclarer une variable

<?php
// Création de la variable "nombre" qui contient la donnée "1" 
$nombre = 1;
// Affichage de la variable "nombre"
echo $nombre;

Vous voyez que créer une variable est assez simple. On écrit le signe dollar « $ » suivi du nom de la variable puis on affecte une valeur avec le signe égal « = ».

Manipuler les nombres

En PHP on peut effectuer toutes les opérations mathématiques que l’on souhaite.

Voici la liste des opérateurs mathématiques classiques :

  •  » +  » Addition
  •  » –  » Sousstraction
  •  » *  » Multiplication
  •  » /  » Division
  •  » %  » Modulo (reste de division euclidienne)
  •  » (…)  » Parenthèses pour prioriser les opérations entre elles

Exemple : Calculer le périmètre d’un cercle avec la formule 2 x PI x R

<?php
// Définition du rayon
$rayon = 10;
// Calcul du périmètre
$perimetre = 2 * pi() * $rayon;
// affichage du périmètre
echo $perimetre;

Résultat : 62.831853071796

Vous voyez ici que nous avons utiliser une fonction PHP pi().
PHP fourni beaucoup de fonctions natives sur lesquels nous reviendrons plus tard quand nous apprendrons à créer nos propres fonctions.

Concaténer

La concaténation consiste à assembler des variables.

Exemple :

<?php
// Définition du rayon
$rayon = 10;
// Calcul du périmètre
$perimetre = 2 * pi() * $rayon;
// affichage du périmètre
echo "Le périmètre d'un cercle de rayon " . $rayon . " est égal à " . $perimetre;

Résultat : Le périmètre d’un cercle de rayon 10 est égal à 62.831853071796

Manipuler les tableaux

Les tableaux sont pratiques pour stocker des données qui possèdent des points communs ou créer des listes.

On déclare un tableau avec une paire de crochets.

Exemple :

<?php
// Définition du tableau
$tableau = ['a', 'b', 'c'];
print_r($tableau);

Résultat :

Array ( [0] => a [1] => b [2] => c )

Comme vous le voyer PHP à automatiquement affecté une « clé » à chaque ligne du tableau en commençant par zéro. Chaque clé est unique et il est possible de définir des clés personnalisées.

<?php
// Définition du tableau
$tableau = [
	'entree'  => "Salade César",
	'plat'    => "Poulet basquaise",
	'dessert' => "Glace vanille",
	'cafe'    => true
];
print_r($tableau);

Catégories
Apprendre le PHP

Introduction au PHP

Le PHP est un langage de programmation exécuté côté serveur. Cela signifie qu’il s’appuie sur la machine qui héberge le code source pour fonctionner.

La plupart du temps un serveur Web (Apache ou ISS) est utilisé en complément de PHP pour pouvoir affiché un site web dans un navigateur web.

Dans ce cours nous allons aborder les notions principales de PHP avec un serveur Web Apache (le plus couramment utilisé).

Pré-requis

Avant de commencer vous allez devoir installer un serveur web local sur votre poste.

Pour faciliter les choses je vous conseille d’installer XAMPP. C’est un serveur Web de type Apache qui tourne sur tous les OS (Windows, Mac, Linux).

Démarrer votre serveur web

Lancer le logiciel XAMPP puis vous devriez voir apparaître la console de XAMPP.

Vous voyez que XAMPP fourni différent services :

  • Apache
  • MySQL
  • FileZilla
  • Mercury
  • Tomcat

Ici nous utiliserons que le Apache. Cliquez sur « Start » dans la ligne « Apache » puis le service doit s’aficher en statut « Démarré ».

Testez ensuite d’accéder à votre serveur web local : http://localhost
Une page de bienvenue de XAMPP doit s’afficher.
Félicitations ! Vous avez un serveur web qui tourne !

Votre première page web dynamique PHP

Nous allons désormais créer une première page web PHP à partir d’une structure de page web HTML standard.

Voir : Comment créer une page web HTML

<!DOCTYPE html>
<html>
<head>
<title>Exemple</title>
</head>
<body>

<?php
echo "Bonjour, je suis un script PHP !";
?>

</body>
</html>

Voici le contenu de notre fichier C:/xampp/htdocs/demo/index.php

Pour y accéder : http://localhost/demo/index.php

Bravo ! vous venez d’afficher le résultat de l’exécution d’un script PHP.

Voyons maintenant tout ce qui est possible de faire avec PHP !

Catégories
Apprendre le CSS

Comment utiliser CSS ?

Lorsqu’un navigateur lit une feuille de style, il formate le document HTML en fonction des informations contenues dans la feuille de style.


Trois façons d’insérer du CSS

Il y a trois façons d’insérer une feuille de style:

  • Feuille de style externe
  • Feuille de style interne
  • Style en ligne

Feuille de style externe

Avec une feuille de style externe, vous pouvez changer l’apparence d’un site Web entier en ne modifiant qu’un seul fichier!

Chaque page doit inclure une référence au fichier de feuille de style externe à l’intérieur de l’élément <link>. L’élément <link> va à l’intérieur de la section <head>:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

Une feuille de style externe peut être écrite dans n’importe quel éditeur de texte. Le fichier ne doit contenir aucune balise HTML. Le fichier de feuille de style doit être enregistré avec une extension .css.

Voici à quoi ressemble « style.css »:

body {
  background-color: lightblue;
}

h1 {
  color: navy;
  margin-left: 20px;
}

Remarque: N’ajoutez pas d’espace entre la valeur de la propriété et l’unité (telle que 
margin-left: 20 px;). 
La manière correcte est:
margin-left: 20px;

Feuille de style interne

Une feuille de style interne peut être utilisée si une seule page a un style unique.

Les styles internes sont définis dans l’élément <style>, dans la section <head> d’une page HTML:

<head>
<style>
body {
  background-color: linen;
}

h1 {
  color: maroon;
  margin-left: 40px;
} 
</style>
</head>

Styles en ligne

Un style en ligne peut être utilisé pour appliquer un style unique à un seul élément.

Pour utiliser des styles inline, ajoutez l’attribut style à l’élément concerné. L’attribut style peut contenir n’importe quelle propriété CSS.

L’exemple ci-dessous montre comment changer la couleur et la marge gauche d’un élément <h1>:

<h1 style="color:blue;margin-left:30px;">This is a heading</h1>

Conseil: Un style en ligne perd beaucoup des avantages d’une feuille de style (en mélangeant le contenu avec la présentation). 
Utilisez cette méthode avec parcimonie.

Plusieurs feuilles de style

Si certaines propriétés ont été définies pour le même sélecteur (élément) dans différentes feuilles de style, la valeur de la dernière feuille de style lue sera utilisée. 

Exemple

Supposons qu’une feuille de style externe ait le style suivant pour l’élément <h1>:

h1 {
  color: blue;
}

supposons ensuite qu’une feuille de style interne possède également le style suivant pour l’élément <h1>:

h1 {
  color: orange;    
}

Si le style interne est défini après le lien vers la feuille de style externe, les éléments <h1> seront « orange »:

<head>
<link rel="stylesheet" type="text/css" href="style.css">
<style>
h1 {
  color: orange;
}
</style>
</head>

Cependant, si le style interne est défini avant le lien vers la feuille de style externe, les éléments <h1> seront « blue »:

<head>
<style>
h1 {
  color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

Commande en cascade

Quel style sera utilisé quand il y a plus d’un style spécifié pour un élément HTML?

Tous les styles d’une page seront « mis en cascade » dans une nouvelle feuille de style « virtuelle » selon les règles suivantes, dans lesquelles le numéro un a la priorité la plus élevée:

  1. Style en ligne (à l’intérieur d’un élément HTML)
  2. Feuilles de style externes et internes (dans la section principale)
  3. Navigateur par défaut

Ainsi, un style en ligne a la priorité la plus haute et remplace les styles internes et externes et les valeurs par défaut du navigateur.

Catégories
Apprendre le CSS

Syntaxe et sélecteurs CSS

Syntaxe CSS

Un ensemble de règles CSS se compose d’un sélecteur et d’un bloc de déclaration:

Le sélecteur pointe sur l’élément HTML que vous souhaitez styler.

Le bloc de déclaration contient une ou plusieurs déclarations séparées par des points-virgules.

Chaque déclaration inclut un nom de propriété CSS et une valeur, séparés par deux points.

Une déclaration CSS se termine toujours par un point-virgule et les blocs de déclaration sont entourés d’accolades.

Dans l’exemple suivant, tous les éléments <p> seront alignés au centre, avec une couleur de texte rouge:

p {
  color: red;
  text-align: center;
}

Sélecteurs CSS

Les sélecteurs CSS permettent de « rechercher » (ou de sélectionner) des éléments HTML en fonction de leur nom, id, classe, attribut, etc.


Le sélecteur d’élément

Le sélecteur d’élément sélectionne les éléments en fonction du nom de l’élément.

Vous pouvez sélectionner tous les éléments <p> sur une page comme ceci (dans ce cas, tous les éléments <p> seront alignés au centre, avec une couleur de texte rouge):

p {
  color: red;
  text-align: center;
}

Le sélecteur d’identifiant

Le sélecteur id utilise l’attribut id d’un élément HTML pour sélectionner un élément spécifique.

L’identifiant d’un élément doit être unique dans une page, le sélecteur d’identifiant sert donc à sélectionner un élément unique!

Pour sélectionner un élément avec un identifiant spécifique, écrivez un caractère dièse (#), suivi de l’identifiant de l’élément.

La règle de style ci-dessous sera appliquée à l’élément HTML avec id="para1":

#para1 {
  text-align: center;
  color: red;
}

Remarque: un identifiant ne peut pas commencer par un numéro!

https://www.w3schools.com/css/css_syntax.asp

Le sélecteur de classe

Le sélecteur de classe sélectionne les éléments avec un attribut de classe spécifique.

Pour sélectionner des éléments avec une classe spécifique, écrivez un caractère point (.), Suivi du nom de la classe.

Dans l’exemple ci-dessous, tous les éléments HTML avec class="center" seront en rouge et centrés:

.center {
  text-align: center;
  color: red;
}

Vous pouvez également spécifier que seuls des éléments HTML spécifiques doivent être affectés par une classe.

Dans l’exemple ci-dessous, seuls les éléments <p> avec class = « center » seront alignés au centre:

p.center {
  text-align: center;
  color: red;
}

Les éléments HTML peuvent également faire référence à plus d’une classe.

Dans l’exemple ci-dessous, l’élément <p> sera stylé selon la classe center et la classe large:

<p class="center large">Ce paragraphe fait référence à deux classes.</p>

Remarque: Un nom de classe ne peut pas commencer par un numéro!

https://www.w3schools.com/css/css_syntax.asp

Sélecteurs de regroupement

Si vous avez des éléments avec les mêmes définitions de style, comme ceci:

h1 {
  text-align: center;
  color: red;
}

h2 {
  text-align: center;
  color: red;
}

p {
  text-align: center;
  color: red;
}

Il sera préférable de regrouper les sélecteurs pour minimiser le code.

Pour regrouper les sélecteurs, séparez chaque sélecteur par une virgule.

Dans l’exemple ci-dessous, nous avons regroupé les sélecteurs à partir du code ci-dessus:

h1, h2, p {
  text-align: center;
  color: red;
}

Commentaires CSS

Les commentaires sont utilisés pour expliquer le code et peuvent vous aider lorsque vous modifiez le code source à une date ultérieure.

Les commentaires sont ignorés par les navigateurs.

Un commentaire CSS commence par /* et se termine par */. Les commentaires peuvent également s’étendre sur plusieurs lignes:

p {
  color: red;
  /* Ceci est un commentaire sur une ligne */
  text-align: center;
}

/* Ceci
est un commentaire
sur plusieurs
lignes */

Catégories
Apprendre le CSS

Introduction au CSS

  • CSS signifie Cascading Style Sheets
  • CSS décrit comment les éléments HTML doivent être affichés à l’écran, sur papier ou sur un autre support.
  • CSS économise beaucoup de travail . Il peut contrôler la mise en page de plusieurs pages Web en même temps
  • Les feuilles de style externes sont stockées dans des fichiers CSS

Pourquoi utiliser CSS?

CSS permet de définir les styles de vos pages Web, notamment la conception, la disposition et les variations d’affichage pour différents appareils et tailles d’écran. 


CSS a résolu un gros problème

Le code HTML n’a JAMAIS été conçu pour contenir des balises permettant de formater une page Web!

HTML a été créé pour décrire le contenu d’une page Web, comme:

<h1> Ceci est un titre de niveau 1 </h1>

<p> Ceci est un paragraphe. </p>

Lorsque des balises telles que <font> et des attributs de couleur ont été ajoutés à la spécification HTML 3.2, cela a créé un cauchemar pour les développeurs Web. Le développement de grands sites Web, où les polices et les informations de couleur étaient ajoutées à chaque page, est devenu un processus long et coûteux.

Pour résoudre ce problème, le World Wide Web Consortium (W3C) a créé CSS.

CSS a supprimé la mise en forme du style de la page HTML!

Si vous ne savez pas ce que HTML est, nous vous suggérons de lire notre cours HTML .

CSS économise beaucoup de travail!

Les définitions de style sont normalement enregistrées dans des fichiers .css externes.

Avec une feuille de style externe, vous pouvez changer l’apparence d’un site Web entier en ne modifiant qu’un seul fichier!