Site de chacun :
Note 2e trimestre (21 mars) :
Votre note de site du deuxième trimestre sera mise dimanche 21 mars (correction tout au long de la journée).
Voici les différents critères de notation :
- avoir une page forum fonctionnelle, avec plusieurs champs (input de plusieurs types, textarea, select...), qui envoie un mail bien fait, qui affiche (après enregistrement dans toutes les colonnes de la base de données) instantanément les messages postés (pas de vérification manuelle avec le where actif=1), avec tous les messages bien mis en page. En bonus : tri possible pour l'internaute des messages par catégorie, par ancienneté, par animal préféré, etc.
- n'avoir dans son serveur (son dossier connecté, que vous voyez dans Notepad++ ou FileZilla) que les fichiers utiles à votre site, et tous avec un code propre et bien rangés (css dans un dossier css, images dans un dossier img, pas de fichiers sans extension ou avec un mauvais nom, etc.)
- que l'ensemble du site soit cohérent, bien mis en page, et assez riche.
- avoir une page "conception du site" bien accessible par le footer et à jour (pour que je comprenne bien tout ce que vous avez fait).
Pour aide, voici deux fichiers au format .txt à renommer en .php puis ouvrir sur Notepad++ : htf.ovh/demo.txt et htf.ovh/usuel.txt.
Base de données :
Connexion à la base de donnée à partir de Chrome (MDP au tableau) :
https://phpmyadmin.cluster020.hosting.ovh.net/index.php?pma_username=htfovhelqdmain&pma_servername=htfovhelqdmain.mysql.db
Connexion sur vos pages php (MDP au tableau) :
<?php
$conn = new mysqli("htfovhelqdmain.mysql.db", "htfovhelqdmain", "MDP", "htfovhelqdmain"); $conn->query ("SET NAMES utf8");
if (mysqli_connect_errno()) {echo "Erreur de connexion à la base de données" . mysqli_connect_error();}
?>
Fermer la connexion (tout en bas de votre page php) :
<?php mysqli_close($conn);?>
Récupérer sur une page php des données d'une table (SELECT + WHILE) :
<?php
$req = $conn->query("SELECT * FROM ec_contact"); while ($col = mysqli_fetch_array($req)) {$tel = $col[tel]; echo "$tel";}
?>
Autres requêtes ($req) possibles : INSERT, UPDATE, DELETE :
<?php
$conn->query("DELETE FROM ac_messages WHERE id_messages=5;");
$conn->query("UPDATE ac_messages SET message = 'le super message !' WHERE id_messages=4;");
$conn->query("INSERT INTO ac_messages (id_messages, pseudo, message, actif) VALUES (NULL, 'super pseudo !', 'youhou !', '0');");
?>
Envoi d'un mail en php :
<?php
$to = "moi@htf.ovh"; $sujet = "sujet"; $from = "Nom <nom@gmail.com>"; // $headers[] = "Cc:copie@ex.fr"; $headers[] = "Bcc:copie-cachée@ex.fr";
$headers[] = "MIME-Version: 1.0"; $headers[] = "Content-type: text/html; charset=utf8"; $headers[] = "From: $from";
$msg = "blabla<br>2è ligne"; // si le message est long, placer \r\n de temps en temps pour le découper en parties qui passent par la fonction mail php
if ($_POST["recupContact"] == 1) {mail($to, $sujet, $msg, implode("\r\n", $headers)); $conn->query("$insertContact");}
?>
Formulaire :
Sur la page où on remplit le formulaire (ex : contact.php) :
<form method='post' action='merci.php'> <!-- method = GET ou POST / action = votre page d'arrivée -->
Votre prénom : <input name='prenom'><br>
<input type='submit' value='Envoyer'>
</form>
Ce qui donne (sur Chrome) :
Et sur la page d'arrivée du formulaire (ex : merci.php) :
<?php
$prenom = $_POST["prenom"]; // je donne comme valeur à ma variable $prenom ce qui a été posté pour le champ qui avait name="prenom" (ici, en méthode POST)
echo "<p>Merci $prenom !</p>"; // dans echo "blabla"; on met du html et des variables
?>
Ce qui donne (sur Chrome) :
Merci Jean !
Note pour le premier trimestre (coefficient 3,5 - attribuée le 13 décembre) :
CRITERES :
- un code html complet et propre sur chaque page, ainsi qu'un code css à part également propre et d'au moins 15 lignes.
- au moins 5 pages html (mais avec une extension en .php pour anticiper le deuxième trimestre), qui gardent une vraie unité (background, bordures, barre de liens, bannière, logo, footer, police, couleurs...).
- un rendu global sur Chrome qui soit satisfaisant : qu'on se dise que c'est un vrai site, bien fait, que son thème est clair et bien marqué, que les pages soient intéressantes.
- une page "conception du site" (lien visible dans le footer) / conception.php sur laquelle figure un tableau (en table/tr/td ou, mieux, en div) récapitulant chaque étape de code ou de graphisme qui vous a pris du temps : première colonne pour le nom de l'étape, deuxième pour sa durée approximative, troisième pour sa date de réalisation, quatrième pour sa description un peu détaillée.
- aucune ligne de code que vous ne puissiez pas me traduire.
- en points bonus : une favicon, un .htaccess sur le modèle ci-dessous (avec création des pages d'erreurs personnalisées), un design un peu ou entièrement "responsive" (qui s'affiche bien quelles que soient les dimensions de l'écran), des images retravaillées ou créées par vous-même sur GIMP ou un autre logiciel de graphisme (ne pas hésiter à me le prouver en me donnant les images de départ dans votre page "conception.php").
Fichier ".htaccess" (à créer à la racine de votre site) :
# Préférer https à http
RewriteCond %{HTTPS} off
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R,L]
# préférer l'url sans www
RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC]
RewriteRule ^ http%{ENV:protossl}://%1%{REQUEST_URI} [L,R=301]
# rediriger index.html , index.php.... vers racine de site (aussi pour éviter le duplicate contenu)
RewriteCond %{THE_REQUEST} ^(GET|POST|HEAD)\ (/.*)?/index.(htm|html|php|asp|shtml)
RewriteRule ^(.*)index.(htm|html|php|asp|shtml)$ /$1 [R=301,L]
# Erreurs
ErrorDocument 401 /erreurs/erreur_401.php
ErrorDocument 403 /erreurs/erreur_403.php
ErrorDocument 404 /erreurs/erreur_404.php
ErrorDocument 500 /erreurs/erreur_500.php
Choix du thème de votre futur site (à partir du 16 octobre) :
Choisissez votre thème sur le document suivant - Choix du site - en précisant à droite de votre thème choisi votre prénom, votre nom et votre email personnel (qui servira pour le reste de l'année).
Interdiction bien sûr de choisir un thème qu'un camarade a déjà choisi. Les premiers à choisir auront donc plus de choix.
Cette consigne remplace celle que vous avez écrite dans vos agendas : pas besoin de m'écrire à snt@htf.ovh.
Semaine du 5 octobre :
Code HTML d'exemple pour structurer vos pages.
Début d'année :
Accueil du domaine principal - htf.ovh - sur lequel M. Chartier mettra les devoirs et les fichiers utiles.
Serveur : htf.ovh/serveur.
En cas de question, après avoir interrogé Google au moins 5mn, vous pouvez écrire à snt@htf.ovh.