PORTFOLIO version 2.0 LISEZ-MOI

PORTFOLIO MULTIMÉDIA INTERNET

Marie B. Jobin et Gilles G. Jobin
version 2
contenu du fichier lisez-moi.txt

Capture d'écran de la page titre

Le portfolio multimédia tel que nous l'avons développé est libre de droits. Vous pouvez l'utiliser à votre convenance mais nous ne sommes aucunement responsables des conséquences de son utilisation. Il s'agit d'une application web PHP (www.php.net) utilisant une base de données de type MySql (www.mysql.com).
Si vous utilisez cette application, nous vous demandons instamment de ne pas modifier, au menu gauche, les noms des concepteurs originaux de cette application.
Pour obtenir plus d'informations, contactez-nous aux courriels donnés un peu plus bas.
Marie est disponible pour offrir aux enseignants une formation sur l'utilisation pédagogique de l'application.

PRIÈRE DE LIRE AU MOINS DEUX FOIS CE DOCUMENT AVANT DE VOUS LANCER DANS L'INSTALLATION DU PORTFOLIO MULTIMÉDIA.

Si vous éprouvez des difficutés ou si vous avez des questions, vous pouvez me joindre au courriel suivant : jgilles@synapse.net

Vous pouvez aussi joindre Marie au courriel: portfolio@marie-tic.org
N'hésitez pas à nous écrire : nous nous ferons un plaisir de vous aider !

INSTALLATION DU SERVEUR WEB APACHE
INSTALLATION DU PORTFOLIO MULTIMÉDIA
STRUCTURE DES RÉPERTOIRES
PREMIER LANCEMENT DE L'APPLICATION
LISTE ET DESCRIPTION DES FICHIERS SOUS PFP2
LISTE ET DESCRIPTION DES FICHIERS SOUS PFP2-PARENTS (à venir)
LES TABLES MYSQL : LISTE ET DESCRIPTION
TODO LIST

INSTALLATION DU SERVEUR WEB APACHE

Si vous ne disposez pas du serveur web APACHE et de la base de données MySql, téléchargez et installez le tout dernier package EASYPHP que vous trouverez à l'adresse suivante : http://www.easyphp.org (C'est gratuit!) Assurez-vous de sa fonctionnalité.

INSTALLATION DU PORTFOLIO MULTIMÉDIA

Dans votre espace web (par exemple c:\programmes\easyphp\www\) décompactez-y le fichier kitPortfolio.zip. Ce faisant, un dossier portfolioDemo sera créé.
Insérez dans votre base de données MySql portfolioDemo.sql le fichier qui se trouve directement dans le dossier portfolioDemo (dans mon cas, le nom de ma base est portfolioDemo) . Cette base de données est composée d'une dizaine de tables. Plus de détails plus loin.

Structure des répertoires

En décompactant, plusieurs fichiers seront déposés dans plusieurs dossiers. Voici la structure des répertoires :

portfolioDemo
	---pfp2
		---eleves
		---administration
		---images
		---pfpima
		---sons
		---inc
		---ajout_item
		---utilitaires
		---consulter
	---pfp2-parents

Directement dans le dossier portfolioDemo, se trouvent les fichiers permettant l'authentification.
Pour lancer l'application, il faut donc entrer quelque chose comme:
http://localhost/portfolioDemo
ou (si vous êtes sur le net)
http://votresiteweb/portfolioDemo.

Choisissez maintenant la page de l'enseignante. Il faut entrer comme nom d'utilisateur : enseignant et comme mot de passe : portfolio

Capture d'écran «ajout item»
C'est le dossier pfp2 qui contient tous les fichiers importants du portfolio.

Le dossiers pfp2-parents n'est important que si vous désirez donner, via Internet, accès aux parents au portfolio de leur enfant.

En installant le portfolio, notez aussi que 9 sous-dossiers seront créés sous le dossier pfp2. Il est vivement conseillé de les protéger par un htaccess. Voici quelques informations les concernant :

eleves : Ce dossier contient les fichiers des élèves. Par exemple, si vos élèves ont des fichiers de type PowerPoint et aimeraient les conserver dans leur portfolio, c'est dans ce répertoire que vous devrez les déposer (max=1 Meg).
images : Dossiers contenant des dossiers d'images et de photos prisent en classe.
pfpima : Les petites images qui sont utilisées dans la conception web du portfolio.
sons : Dossiers qui contient tous les sons enregistrés en salle de classe.
inc : la valeurs par défaut pour se connecter à la BDD. Vous devrez modifier un ou deux des fichiers qui s'y trouvent.
administration, consulter et ajout_item sont des dossiers qui permettent de mieux s'y retrouver dans la programmation. Normalement, vous n'aurez pas à y toucher.
utilitaires : Ce dossier contient les fichiers qui servent au téléchargement.

Listing de quelques fichiers se trouvant dans portfolioDemo/pfp2

global.inc (dans sous-dossiers inc): Contient les variables globales ($host, $db, etc...)
Les mois sont dans un ARRAY.
connect.inc (dans sous-dossiers inc): Contient les specifications de la connexion
fonction.inc (dans sous-dossiers inc): Les différentes fonctions utilisées dans les autres fichiers PHP
index.php: Le fichier de départ. Par défaut, c'est le fichier d'ouverture du portfolio
titre.php: Contient la page titre à l'ouverture du PF
photo_page_titre.jpg: La photo qui se trouve à l'ouverture du PF
menugauche.php: Le menu de la colonne de gauche. Ce menu est toujours visible à l'écran.
ajout.php: Ce fichier permet de choisir l'élève dont on veut ajouter un item au portfolio
ajoutitem.php: Ce fichier est appelé aussitôt que l'élève a été choisi (ajout.php). C'est le fichier au centre des ajouts. C'est là qu'on ajoute toutes les données des items.
Ce fichier insère plusieurs autres fichiers.
aj_fichier: Ce fichier est appelé par ajoutitem.php. Permet de sélectionner un fichier qui a été créé par l'élève et enregistrer DANS son répertoire.
aj_son: Ce fichier est appelé par ajoutitem.php. Permet d'insérer un élément sonore. Tous les éléments sonores doivent être sauvegardées dans le répertoire «sons»
aj_image: Ce fichier est appelé par ajoutitem.php. Permet d'ajouter une image. Toutes les images DOIVENT être dans un répertoire SOUS le répertoire IMAGES. En général, lorsque vous prenez de photos, créez un répertoire SOUS le répertoire IMAGES pour y déposer vos photos. Vous pouvez créer autant de sous-répertoires que vous le désirez.
aj_ct: Permet d'insérer les forces et défis selon le programme du MEQ.
credits.php: Les auteurs, les remerciements. Se trouvent dans la colonne gauche, en bas.
class_thumbnail.php: Un fichier qui pemet de rétrécir les images. Ce fichier est appelé lorsqu'on choisit une image pour insérer dans le pf.
insertDB.php: Ce fichier est appelé lorqu'on clique le bouton INSERER lors de l'ajout d'un item. C'est ce fichier qui ajoute à la BDD l'item du pf.
voir.php: Ce fichier sert à visualiser les portfolios des élèves.
supprimer.php: Fichier appelé lorsqu'on décide de cliquer sur SUPPRIMER à l'affichage d'un item. La personne aura le choix de revenir à la page précédente SANS avoir supprimé l'item.
modification.php: Fichier qui permet de modifier l'item d'un portfolio. Ce fichier apparaît lorsque qu'on clique sur «MODIFIER» lors de la visuation du PF.
adminele.php: Fichier qui permet de modifier le nom, le prénom de l'élève, le nom d'utilisateur du parent et son mot de passe. C'est également dans ce fichier que l'on désactive un élève qu'on ne veut plus avoir sur sa liste de noms (par exemple, parce qu'il a déménagé.)

Listing des fichiers se trouvant dans portfolioDemo/pfp-parents (À VENIR)

PREMIER LANCEMENT DE L'APPLICATION

À l'aide de votre éditeur de texte, ouvrez le fichier global.inc qui se trouve dans le répertoire inc sous pfp2. Vous devriez y voir le contenu suivant :

    $host = "localhost";
    $db = "portfolioDemo";
    $login = "";
    $pass = "";
    
    $moislitt = array("","Janvier","Février","Mars","Avril","Mai","Juin","Juillet","Août","Septembre","Octobre","Novembre","Décembre");

EN CONSERVANT LES GUILLEMETS, REMPLACEZ LES DONNÉES QUE VOUS UTILISEZ NORMALEMENT AU LANCEMENT DE PHP/MYSQL. Si vous déposez ce portfolio sur le web, votre hébergeur devrait vous fournir ces données importantes.

La variable host contient votre IP de connection. En mode local, cette variable est généralement posée à «localhost».

La variable db est le nom de votre base de données dans laquelle vos tables seront déposées. C'est DANS cette base que vous devez importer le fichier portfolioDemo.sql mentionné plus haut (voir INSTALLATION).

$login contient votre code d'utilisateur et $pass contient votre mot de passe.

Enregistrez ce fichier EN MODE TEXTE en gardant le même nom : global.inc. [ATTENTION ! Avec BLOCNOTE, il arrive communément que ce dernier enregistre le fichier en ajoutant l'extension .txt. Il est donc IMPORTANT que vous vous assuriez que le fichier global.inc apparaît TOUJOURS sous ce nom dans le dossier pfp2. Si vous utilisez un autre traitement de texte, par ex. Ms WORD, ASSUREZ-VOUS de bien enregistrer EN MODE TEXTE SEULEMENT.]

Dans le cas ci-haut, puisque je lance le portfolio en mode local, j'utilise l'adresse localhost pour me connecter au serveur. Le nom de ma base de données est portfolioDemo. Comme je suis en local, je n'utilise ni LOGIN ni PASS.

Lancez maintenant votre serveur APACHE et MYSQL (avec, par exemple, EASYPHP). Puis ouvrez votre navigateur préféré. Entrez dans le répertoire portfolioDemo/ (Par exemple, dans mon cas, je dois entrer comme adresse : http://localhost/www/portfolioDemo/. En effet : localhost, car je suis en mode local. www car c'est le répertoire dans lequel mon site web se trouve.)

Si tout fonctionne bien, on vous demandera d'entrer un code utilisateur et un mot de passe. La première fois, entrez code utilisateur : enseignant
mot de passe : portfolio

Il faut maintenant créer votre liste d'élèves.
Dans la colonne gauche, cliquez sur LISTE D'ÉLÈVES et suivez les instructions.

Quelques remarques :

La première fois que vous entrez dans l'application, choisissez l'option : modifier la liste de classe. Puis, personnalisez votre nom, votre prénom, le code utilisateur et le mot de passe.
Sous la colonne parent, entrer un nom d'utilisateur que vous fournirez au parent de l'élève au cas où vous aimeriez donner un accès Internet aux parents au portfolio de son enfant. Entrez aussi un mot de passe. PRENEZ BIEN EN NOTE ces deux données car vous devrez les fournir au parents. Évidemment, vous pouvez toujours IMPRIMER cette page. Une fois le bouton OK appuyé, ces données s'inscriront dans la BDD. Le mot de passe sera CRYPTÉ et il sera absolument impossible (en tout cas, pour le commun des mortels) de le décrypter. En entrant dans l'application avec ce code utilisateur et ce mot de passe, vous serez dans la vision "parent"
Dans le sous-dossiers «eleves», déposez les divers fichiers que l'élève désire conserver à son portfolio (doc, wpd, des images, power-point, etc.). SI vous êtes sur l'Internet, vous déposez ces fichiers soit par FTP soit en utilisant la rubrique «téléchargement» du menu gauche. En mode local, vous déposez évidemment directement ces fichiers dans leur bon répertoire.
Pour ajouter des images (jpg, png ou gif), il faut absolument les déposer dans un ou plusieurs sous-dossiers du répertoire IMAGES qui lui-même se trouve dans le répertoire pfp2. Concrètement, voilà comment il faut faire :
- prenez les photos de votre caméra numérique (ou du scanner)
- Créez un dossier sous le dossier portfolioDemo\pfp2\images soit par FTP soit en utilisant la rubrique "téléchargement" du menu gauche.
- Déposez-y ces photos (il n'est pas nécessaire ni judicieux de renommer les photos, car cette opération demande du temps et est absolument inutile).
- Si l'Internet, vous devriez déposer les fichiers sonores dans le dossier portfolioDemo\pfp2\sons (par FTP). Vous pouvez également télécharger ces fichiers à l'aide de la rubrique «Téléchargement» du menu gauche. En local, vous déposez directement les photos dans un répertoire sous IMAGES.

LES TABLES MySQL

pfp_categories: Cette table contient les catégories des items. Au fur et à mesure que vous entrez des catégories, cette table est mise à jour.
pfp_comm_ele: Cette table contient le commentaire de l'élève relativement à son item de portfolio.
pfp_parents: Cette table contient le commentaire du parent relativement à un item de portfolio.
pfp_competences
pfp_composantes
pfp_pistes
pfp_evaluation: Ces quatre tables sont en fait le programme de formation de l'école québécoise. Ce sont ces tables qui permettent d'accéder rapidement au contenu du programme.
pfp_eleves: La liste des élèves de votre classe. Cette table contient donc les nom, prénom, code d'utilisateur, mot de passe des élèves du groupe.
pfp_portfolio: Tous les items du portfolio se trouvent dans cette table.
pfp_details: Les pistes associées aux items de la table pfp_portfolio

TODO LIST

Écrire une documentation avec des illustrations;
«Web-er» la documentation
Dormir...

Gilles G. Jobin
Mars 2002