IGE511

Thème 6

Utilisation de diverses technologies contributives

Terme	Exemple
Balise	`<p></p>`
Balise ouvrante	`<p>`
Balise fermante	`</p>`
Attribut	`<p class="a"></p>`
doctypes	`<!DOCTYPE html>`

Un document HTML simple

<!DOCTYPE html>
<html>

  <head>
    <title>Titre de ma page</title>
  </head>

  <body>
    <h1>Titre</h1>
    <p>Paragraphe</p>
  </body>

</html>

Balise	Description
`<html>`	Noeud racine (parent) du document HTML
`<head>`	Décris la page, ses méta données et son contexte technique (ex: encodage)
`<body>`	Tout ce qui se trouve à l'intérieur sera présenté par le navigateur

Balise	Exemple
Entête	`<h1>texte</h1>` ... `<h6>texte</h6>`
Paragraphe	`<p>texte</p>`
Image	`<img src="url" />`
Lien	`<a href="url">texte</a>`
Conteneur	`<div></div>`

Listes

Code

<!-- Ordonnée -->
<ol>
  <li>Item 1</li>
  <li>Item 2</li>
</ol>

<!-- Avec boulets -->
<ul>
  <li>Item A</li>
  <li>Item B</li>
</ul>

Résultat

Item 1
Item 2

Item A
Item B

Tableaux

Code

<table>
  <thead>
    <tr>
      <th>Colonne A</th>
      <th>Colonne B</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>A</td>
      <td>B</td>
    </tr>
  </tbody>
</table>

Résultat

Colonne A	Colonne B
A	B

Formulaires

Code

<form>
  <input type="text" placeholder="Nom" />
  <input type="email" placeholder="Courriel" />
  <input type="checkbox" />
  <input type="radio" />
  <select>
    <option>A</option>
    <option>B</option>
  </select>
  <input type="submit" placeholder="Envoyer" />
</form>

Résultat

Balise	Description
`<header>...</header>`	Entête du document ou section
`<footer>...</footer>`	Pied de page du document ou section
`<nav>...</nav>`	Navigation via des liens (menu)
`<section>...</section>`	Regroupement thématique de contenu
`<article>...</article>`	Contenu indépendant et autonome
`<aside>...</aside>`	Section en dehors du contenu principal

Exemple de balises sémantiques

Code

<nav></nav>
<header></header>
<section>
  <header></header>
  <article></article>
  <article></article>
</section>
<aside></aside>
<footer></footer>

Résultat

Varie selon le CSS!

Terme	Définition	Exemple
Propriété	Caractéristiques modifiables via le CSS (plus de 300)	color
Valeur	Donnée associée à une propriété	#ff0000
Déclaration	Association d'un couple propriété - valeur	color: #ff0000;
Sélecteur	Pointeur vers un ou des éléments HTML	.nom-pertinent
Classe	Identifiant CSS donné à des balises HTML	nom-pertinent
Bloc de déclaration	Regroupement de déclarations et sélecteurs

Sélecteur	Exemple
Classe	`.mon-item`
ID	`#mon-item`
Élément	`li`
Combinaison	`.ma-liste, .mon-item`
Relationnel	`.ma-liste .mon-item`
...	Liste des sélecteurs CSS

Sélecteur	Exemple
État	`a:hover`
Position	`.maliste:first-child`
Négation	`:not(.maliste:first-child)`
...	Liste des pseudo-sélecteurs CSS

Bootstrap

Une des librairies les plus populaires est Bootstrap. L'approche retenue par cette librairie est basée sur l'ajout de balises HTML auxquelles on donne des classes CSS spécifiques.

Voici un exemple de deux colonnes avec Bootstrap:

<div class="container">
  <div class="row">
    <div class="col-6">
      Colonne A
    </div>
    <div class="col-6">
      Colonne B
    </div>
  </div>
</div>

Documentation officielle

Exemple de grille en CSS

<section>
  <article></article>
  <aside></aside>
</section>

section {
  display: grid;
  grid-gap: 25px;
  grid-template-columns: repeat(12, 1fr)
}

article {
  grid-column: span 8;
}

aside {
  grid-column: span 4;
}

Type	Exemple
Boolean	`true` `false`
Number	`1` `1.234` `+Infinity` `Nan`
String	`'hello'` `"world"`
Null	`null`
Undefined	`undefined`
Symbol (ES6)	`Symbol()` `Symbol(1)` `Symbol('foo')`

Opérateurs	Exemples
Affectation	`a = 1;`
Mathématiques	`1 + 1` `1 - 1` `1 * 1` `1 / 1` `1 % 1`
Logiques	`true && false` `1 < 2` `!true`
typeof	`typeof 1`

Type	Exemple
Boolean	`true` `false`
Integer	`1`
Float	`1.5`
String	`'hello'` `"world"`
Null	`null`
Array	`array(1, 2, 3)`
Object

Variables

Les variables sont à typage dynamique et leur nom doit débuter par $.

<?php
  $nom = "John";
  $age = 25;
?>

Comment écrire du PHP

Pour écrire du PHP, il suffit de créer un fichier avec l'extension .php et de l'interpréter avec un serveur.

Le code PHP doit se trouver à l'intérieur des balises <?php et ?>. Sinon, tout le texte à l 'extérieur sera envoyé tel quel.

Code PHP

<p>test</p>
<?php
  echo "<p>Hello world!</p>";
?>

Une fois interprété, le rendu HTML:

<p>test</p>
<p>Hello world!</p>

Exemple simple

Code PHP

<?php
  echo "<p>Hello world!</p>";
?>

Une fois interprété, le rendu HTML:

<p>Hello world!</p>

Exemple conditions

Code PHP

<?php
  $est_connecte = false;
  if ($est_connecte) {
    echo "<a href="logout.php">Se déconnecter</a>";
  } else {
    echo "<a href="signin.php">Se connecter</a>";
  }
?>

Une fois interprété, le rendu HTML:

<a href="signin.php">Se connecter</a>

Exemple boucles

Code PHP

<?php
  echo "<ul>";
  for ($i = 0; $i < 3; $i++) {
      echo "<li>" . $i . "</li>";
  }
  echo "</ul>";
?>

Une fois interprété, le rendu HTML:

<ul>
  <li>0</li>
  <li>1</li>
  <li>2</li>
</ul>

Exemple PHP et MySQL

Code PHP naïf utilisant MySQLi (pourquoi?)

$connexion = new mysqli('servername', 'username', 'password');

$sql = "SELECT id, nom FROM usagers";
$resultats = $connexion->query($sql);

while($usager = $resultats->fetch_assoc()) {
  echo $usager["id"] . " - " . $usager["nom"];
}

$conn->close();

IGE511 Thème 6 Utilisation de diverses technologies contributives