Médiaforma

All posts tagged table

Le volet gauche de la fenêtre dresse la liste des bases de données existantes.

Pour créer une nouvelle base de données, sélectionnez l’onglet Bases de données, choisissez un nom pour la nouvelle base de données et cliquez sur Créer. Ici par exemple, nous créons la base de données formation :

Pour créer une table dans la base de données formation, cliquez sur son nom dans le volet gauche, choisissez un nom pour la table (Nom) et un nombre de champs (Nombre de colonnes) et cliquez sur Exécuter. Ici par exemple, nous définissons table utilisateurs qui contient cinq champs :

Maintenant, il ne vous reste plus qu’à choisir le nom et le type des champs et à valider pour créer la table :

Pour l’instant, nous allons nous contenter de créer des champs très simples :

  • nom, de type TEXT ;
  • prenom, de type TEXT ;
  • login, de type TEXT ;
  • password, de type TEXT ;
  • email, de type TEXT.

Une fois ces informations définies, cliquez sur Sauvegarder pour créer la table.


Pour définir un tableau, vous utiliserez la balise <table></table>. Chacune des lignes du tableau sera repérée par la balise <tr> </tr> et chacune des colonnes d’une ligne par la balise <td> </td>.

Voici un exemple élémentaire de tableau contenant deux lignes et trois colonnes :

Pour mieux visualiser les cellules du tableau, nous allons leur ajouter des bordures avec l’attribut border de la balise <table> :

Comme vous pouvez le voir la taille des cellules s’adapte à leur contenu, tout en conservant une cohérence sur les colonnes. Ainsi, la largeur d’une colonne sera définie par la cellule dont le contenu est le plus large. Dans l’exemple précédent, la cellule qui contient le mot “quatrième” fixe la largeur de la première colonne, et la cellule qui contient le mot “troisième” fixe la largeur de la troisième colonne.


Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Dans cette rubrique, je vais vous montrer comment remplacer les zones de saisie des deux exemples précédents par des curseurs. Pour l’instant, ce code ne fonctionne que dans Google Chrome. Voici le résultat que nous cherchons à obtenir :

Dans Firefox et Internet Explorer, les curseurs seront représentés par des zones de texte.

Les portions CSS et JavaScript du document sont identiques à celles de la rubrique précédente. Nous n’y reviendrons pas. Par contre, n’hésitez pas à vous reporter aux rubriques “Alignement avec un tableau” et “Codes couleur en JavaScript” pour avoir des informations complémentaires à leur sujet.

Examinons le code HTML.

<table>

 <tr><td colspan=2><div id="div1"></div></td></tr>

 <tr><td>Rouge</td><td><input id="rouge" min="0" max="255" value="0" onchange="changeCouleur(event)"></td></tr>

 <tr><td>Vert</td><td><input id="vert" min="0" max="255" value="0" onchange="changeCouleur(event)"></td></tr>

 <tr><td>Bleu</td><td><input id="bleu" min="0" max="255" value="0" onchange="changeCouleur(event)"></td></tr>

 <tr><td colspan=2><div id="hexa"></div></td></tr>

</table>

Comme vous pouvez le remarquer, les balises <input> (c’est-à-dire les zones de saisie) ont été remplacées par des balises <input>. Cette simple substitution provoque l’affichage de curseurs dans Google Chrome. Les attributs min et max définissent les valeurs minimale et maximale de chaque curseur : 0 et 255. L’attribut value indique la position du curseur à l’ouverture du document. Cet attribut étant initialisé à 0 pour les trois curseurs, ils seront tous trois positionnés au minimum à l’ouverture de la page. Enfin, pour relier la position de chaque curseur avec la couleur d’arrière-plan de la balise div1, il faut définir une fonction événementielle qui sera exécutée à chaque modification d’un des curseurs. Pour cela, il suffit de capturer l’événement onchange. La fonction exécutée a pour nom changeCouleur(). Son code est quasiment identique à celui utilisé dans les deux rubriques précédentes. Reportez-vous à la rubrique “Codes couleur en JavaScript” pour en savoir plus à son sujet.


Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Dans la vidéo précédente, les zones de saisie n’étaient pas alignées verticalement. Nous allons voir comment améliorer leur mise en page en utilisant un tableau. Tant que nous y sommes, nous allons centrer horizontalement les deux <div> et le bouton dans le tableau pour obtenir quelque chose comme ceci :

Examinons le code HTML.

Comme vous pouvez le voir, les différents éléments affichés dans le document ont été placés dans un tableau comportant deux colonnes. Les deux balises <div> et le bouton de commande occupent deux colonnes dans le tableau. Pour cela, il suffit d’affecter la valeur 2 à l’attribut colspan de ces trois éléments. Par contre, les éléments concernant les composantes Rouge, Vert et Bleu sont répartis sur deux colonnes : à gauche les libellés des couleurs, à droite, les zones de saisie. Remarquez l’utilisation de la propriété CSS text-align pour aligner à gauche les trois zones de saisie.

<table>

<tr><td colspan=2><div id=”div1″></div></td></tr>

<tr><td>Rouge</td><td style=”text-align:left;”><input id=”rouge”> (0 à 255)</td></tr>

<tr><td>Vert</td><td style=”text-align:left;”><input id=”vert”> (0 à 255)</td></tr>

<tr><td>Bleu</td><td style=”text-align:left;”><input id=”bleu”> (0 à 255)</td></tr>

<tr><td colspan=2><div id=”hexa”>Définissez les composantes RVB et cliquez sur le bouton</div></td></tr>

<tr><td colspan=2><input type=”button” value=”Afficher la couleur correspondante”></td></tr>

</table>

Examinons le code CSS.

  • La première balise <div> a pour identifiant div1. Ses caractéristiques sont définies entre les lignes 5 et 12. Les trois premières instructions définissent la couleur et les dimensions de la balise <div>. Quant aux deux dernières instructions, elles provoquent le centrage de la balise dans le tableau.
  • Les lignes 13 à 17 définissent la mise en forme des cellules du tableau. Le texte sera centré dans les cellules et les cellules auront une largeur de 300 pixels.

Le code JavaScript est identique à celui de la rubrique précédente. N’hésitez pas à vous y reporter pour avoir de plus amples renseignements à son sujet.


Pour supprimer une table, connectez-vous à la base de données où elle est stockée en définissant un objet PDO puis utilisez l’instruction SQL DROP TABLE :

$base = new PDO('mysql:host=localhost; dbname=nomBase', 'root', '');
$base->exec("DROP TABLE nom");

Où nom est le nom de la table à supprimer.

Pour supprimer une base de données, vous devrez utiliser la console MySQL ou la console d’administration Web phpMyAdmin. Dans le premier cas, utiliserez l’instruction SQL DROP DATABASE :

DROP DATABASE nom;

Dans le deuxième cas, sélectionnez l’onglet Bases de données, cochez la case de la base de données à supprimer et cliquez sur Supprimer.


La table étant définie, il suffit d’exécuter une instruction SQL INSERT INTO pour chaque enregistrement :

$base->exec("INSERT INTO nomTable VALUE('val1', … 'valN')");

Où nomTable est le nom de la table dans laquelle doit se faire l’insertion et les valI correspondent aux différentes valeurs à insérer dans les champs de la table pour créer un enregistrement.

Cette instruction suppose que tous les champs sont renseignés entre les parenthèses qui suivent le mot VALUE. Si une partie seulement des champs est renseignée, spécifiez-les entre parenthèses à la suite du nom de la table :

$base->exec("INSERT INTO nomTable(champ1, champ3, champ4) VALUE('val1', 'val3', 'val4')");

Enfin, si vous le souhaitez, il est possible de définir plusieurs enregistrements en une seule instruction, en remplaçant le mot VALUE par le mot VALUES :

$base->exec("INSERT INTO nomTable VALUES('val11', … 'val1N'),
('val21', … 'val2N'), ('val31', … 'val3N'), … ");

Pour créer une table, commencez par définir une instance de la classe PDO qui pointe vers la base de données qui a été définie dans l’étape précédente :

$base = new PDO('mysql:host=localhost; dbname=nom', 'root', '');

Où nom est le nom de la base de données dans laquelle vous voulez créer une table.

Cette étape accomplie, vous exécuterez une instruction SQL CREATE TABLE :

$base->exec("CREATE TABLE nomTable(champ1 type1(taille1), …, champN typeN(tailleN))");

Où :

  • nomTable est le nom de la table à créer ;
  • champI sont les noms des champs de la table ;
  • typeI sont les types des champs ;
  • tailleI sont les tailles associées à chacun des types.

Pour améliorer les performances d’accès aux tables MySQL, vous pouvez définir un champ unique incrémenté de façon automatique chaque fois qu’un enregistrement est ajouté dans la table.

Par exemple, pour ajouter le champ entier autoincrémenté id, vous utiliserez la syntaxe suivante :

$base->exec("CREATE TABLE nomTable(id INT NOT NULL AUTO_INCREMENT, …)");

Vous pouvez également indexer le champ id en définissant une clé primaire. L’accès aux enregistrements sera bien plus rapide. Pour cela, utilisez la syntaxe suivante :

$base->exec("CREATE TABLE nomTable(id INT NOT NULL AUTO_INCREMENT,
PRIMARY KEY(id), …)");