Cours 3 : syntaxe php et formulaires html

Avant tout : partiel le 4 mars

Pour « prendre la température », pour vous comme pour nous.

Sur le créneau et dans l’amphi du cours (14h30 — 16h30, A1), en trois sessions de 20 minutes (chaque étudiant sera convoqué pour une seule des trois sessions). Je donnerai des précisions d’ici là. Venir au prochain cours peut s’avérer pertinent ;)

Rappel

La note finale est calculée de la façon suivante :

session 1
max(exam final , (15% partiel, 30% projet, 55% examen final))
session 2
note de l’exam 2, point barre.

Syntaxe php

Survol commenté du chapitre Référence du langage du manuel php,
avec une attention particulière sur les sections suivantes :

  • Les opérateurs de comparaison, qui sont l’occasion de voir que les types sont beaucoup plus « souples » qu’en java. Bien noter la distinction == vs. === (et donc != vs. !==), et les tableaux récapitulatifs de comparaison entre types
  • Les chaînes de caractères, avec la distinction entre guillemets ‘simples’ et « doubles ».
  • Les structures de contrôle, très similaires à celles du java, avec quelques exceptions notables (elseif, et surtout foreach, très utile pour le parcours des tableaux, voir ci-dessous).
  • Les tableaux qui, à la différence de java, sont des tableau associatifs, c’est à dire des listes de couples [ clef => valeur ]. Si la clef n’est pas spécifiée, elle est fixée automatiquement à un entier, qui est le plus petit entier qui n’a pas déjà été attribué comme clef (donc 0 si aucune valeur n’a été attribuée précédemment).

    Les tableaux se parcourent fréquemment au moyen de la boucle foreach :

      foreach($tab as $val)
        echo "valeur suivante : $val";
    
      foreach($tab as $key => $val)
        echo "à la clef $key est associée la valeur $val";
    

Les formulaires html

Pour commencer

Voir le fichier formulaire.html.

Les principaux points à retenir dans cet exemple :

  • il n’y a qu’un seul formulaire, défini par la balise form, et contenant plusieurs éléments de saisie (la plupart du temps des élements input
  • l’attribut name d’un input permet de déterminer le nom du paramètre dont cet élément fournira la valeur (dans l’exemple, renseigner le champ « Nom » et valider le formulaire fera apparaître « ?nom=… » dans la barre d’adresse du navigateur). Notez que toutes les valeurs n’ont pas été définies dans l’exemples, pour tester les différents cas.

    Dans le cas de l’input type="radio" (homme / femme), spécifier le même attribut name a pour effet de forcer à ce qu’une seule valeur soit sélectionnée. La valeur du paramètre est spécifiée par l’attribut value.
  • l’élément label permet de sélectionner plus facilement un élément input: si on clique sur le label, l’input correspondant s’actionne (la correspondance est spécifiée au moyens des attributs for et id de label et input respectivement. Observez la différence entre les input Surnom et Prénom ;
  • on envoie le formulaire au moyen de l’input de type submit ;
  • les éléments de formulaire sont de type en-ligne et doivent donc être placés dans un élement de type bloc (form n’en est pas un.) On peut utiliser p ou table.

D’autres éléments de saisie

Voir les exemples donnés dans la liste de w3schools.

Pour html5 et ses nouveaux types d’élements input, lire le chapitre A form of madness de dive into html5. Notez que les problèmes de compatibilité se posent très peu puisque par défaut, un input de type inconnu sera rendu en type="text".

Essayez-en quelques uns en cliquant ci-dessous :

  • number ou range pour les valeurs numériques ;
  • plus subtils, search ou email, dont l’intérêt ne se fait pas sentir sur tous les navigateurs (mais essayez avec un iphone, par exemple).
Publié dans Cours | Marqué avec , , , , , , | Un commentaire

Cours 1 : html

Balises HTML

Utiliser toujours comme référence le site tutoriel w3schools (et
utiliser la fonction « Try it yourself »)

Bloc vs. en ligne

Les élements de type blocs prennent toute la largeur de l’élément qui les
contient et sont précédés et suivis d’un saut de ligne.

Exemple avec h5 :

<h5>Ceci est un élément de type bloc</h5>texte qui le suit

Rendu :

Ceci est un élément de type bloc

texte qui le suit

Les tableaux

On utilise les balises suivantes :

  • <table>
    pour définir le tableau
  • <th>
    cellule d’en-tête (table head)
  • <tr>
    ligne (table row)
  • <td>
    cellule de données (table data)

L’exemple de w3schools est très parlant.

et pour des tableaux élaborés :

  • <thead>
    en-tête
  • <tfoot>
    bas du tableau (à définir juste après l’en-tête pour permettre au
    navigateur de calculer le rendu avant de lire toutes les données)
  • <tbody>
    corps du tableau

Là encore, voir l’exemple de w3schools.

Ces trois trois balises de structure sont optionnelles mais si on en
utilise une, on doit utiliser les trois.

HTML5 et les balises sémantiques

Publié dans Cours | Marqué avec , , , , | 2 commentaires

<section id="cours-2011">

C’est reparti. Ce blog reprend du service pour la deuxième année.

Mis en place en janvier 2010 pour le cours d’internet & outils en première année de la licence d’informatique de Paris-Diderot, le voici qui redémarre avec une mission de taille : inviter html5 à la fête.

Pour cette première semaine de TP et la découverte d’html, vous aurez bien besoin d’un aide-mémoire sur les balises principales.

Au programme, pour les premières semaines (programme susceptible de changements) :

  • structuration d’un document avec html (2 semaines)
  • programmation avec php (2 semaines)
  • mise en forme et style avec css (1 semaine pour commencer)
  • partiel éclair (20 minutes, pendant l’horaire du cours)

Détail important : la note finale est calculée comme suit :

session 1
max(exam final , (15% partiel, 30% projet, 55% examen final))
session 2
note de l’exam 2, point barre.

Bon courage, et surtout amusez-vous bien (mais si, mais si).

Publié dans Organisation | Marqué avec , , , , | Laisser un commentaire

un hack pour css et javascript

La théorie :

http://www.alsacreations.com/actu/lire/1027-une-faille-sur-la-pseudo-classe-visited.html

La pratique :

http://didyouwatchporn.com/

Publié dans Liens | Marqué avec , , , , , | Laisser un commentaire

Concours de CV en html

Les résultats d’un concours de CV en html/css, organisé par Alsacreations :

http://www.alsacreations.com/actu/lire/1012-resultats-concours-12-cv-embauchez-moi.html.

Le CV d’une des gagnantes:

juliegri

Publié dans Liens | Marqué avec , , | Un commentaire

Cours 11 : javascript, éléments de base du langage

Retour sur la petite histoire du web

html 3, W3C, html 4.01, css 2.1, xhtml 1.0, html 5

Javascript

Principaux éléments à retenir

  • les valeurs ont un type, pas les variables
  • les objets sont des tableaux et réciproquement
    t.toto, t.['toto'] et t[i] (où i est l’indice de la propriété toto) sont des alias syntaxiques
  • les fonctions sont des objets particuliers, elles peuvent être manipulées comme n’improrte quelle valeur
  • les arguments d’une fonction sont optionnels, ils sont toujours accessibles via le tableau arguments
  • on peut modifier dynamiquement les propriétés d’une instance d’un objet x : en supprimer (delete) ou en ajouter (x.propriete = …)
  • pour modifier les propriété de toutes les instances d’un objet x, on passe par son prototype (x.prototype.propriete = …)
  • pour créer un objet x avec un champ a, deux possibilités :
    x = new Object(); x.a = …;
    function truc(a) { this.a = a; }
    x = new truc(…)

Javascript est vieux de plus de 10 ans, entre-temps, Ajax l’a rendu quasiment incontournable, le faisant passer du statut de gadget à celui d’un langage professionnel.

D’où la mise en place de règles de bonne pratique (unobtrusive javascript) : bannir les événements du corps du document html etc.

Le DOM

document object model, description d’un document (html) définie par le W3C.

les bibliothèques de fonctions comme jQuery permettent de simplifier l’utilisation du DOM.

Publié dans Cours | Marqué avec , , , , , , | Laisser un commentaire

Cours 10 : exemple de site web avec base de données

Ecriture dans une base de données

  • création de tables
  • les types en mysql (entiers, timestamp, text…)
  • insertion d’entrées dans la table

Exemple

Un site de photo

Publié dans Cours | Marqué avec , , , | 2 commentaires

Photobase

Un site jouet pour illustrer l’utilisation conjointe de php et mysql. Je le présenterai en détail au cours 10.  Pour le moment, seuls les deux premiers utilisateurs ont des photos.

Publié dans Liens | Marqué avec , , | Laisser un commentaire

spams

Les spammeurs de blogs sont d’une inventivité…


hey there smart little blog site ya got there :-) I employ the exact design template on my own yet somehow for whichever odd issue it seems to reload quicker on this blog although your own is carrying more content. Have you been employing some plugins or widgets that will quicken it up? Do you think you might be able to reveal the programs so maybe I would be able to use these on my webpage so twilight breaking dawn followers could watch twilight new moon online trailers and videos a lot quicker I’d be pleased – kudos ahead of time :)

Publié dans Site | Marqué avec , | Laisser un commentaire

Cours 9 : PHP et les données

  • revue de divers mécanismes du langage (fonctions, constantes, objets avec exemple d’utilisation pour factoriser du code en passant un champ en paramètre d’une fonction)
  • considérations sur la sécurité, vérification de formulaires en javascript (pour le confort de l’internaute) vs. en php (pour la sécurité du serveur, l’intégrité et la cohérence de la base de données)
  • fichiers (fopen, fwrite, serialize)
  • cookies
  • sessions
  • un aperçu très rapide de mysql
Publié dans Cours | Marqué avec , , , , , , , , | Un commentaire