2010
02.01
partie visible de AskMe

partie visible de AskMe

AskMe

Déjà c’est quoi AskMe ? Un site où vous pouvez me poser des questions (et où je peux vous répondre (heureusement ^^), mais surtout, comme les sources sont disponibles, vous pouvez installer AskMe sur votre site et ainsi les gens pourront vous poser des questions ! (J’avoue c’est très largement inspiré de Formspring que beaucoup de gens connus sur Twitter adoptent).

Partie Admin de AskMe

Partie Admin de AskMe

Comme on peut le voir le design est très simpliste, la partie Admin paraît générée (oui elle l’est et tant mieux ^^ ), c’est encore en français, et la pagination des questions n’est pas encore faite (mais c’est rapide ;) ).

Techniquement

En faite j’avais voulu me servir de ce projet pour faire une série de tutoriels mais le tutoriel officiel est beaucoup mieux fait (et très complet !).

Mais là (et c’est pour ça que je le poste sur le Planet Libre) j’ai eu quelques soucis au passage de mon serveur en local à la mise en production sur http://askme.bydorian.com.

Déjà j’ai fait ça à la barbare avec un copié/collé de tout le dossier vers le FTP (ouvert dans nautilus : merci encore Ubuntu, je suis fan de ça !). Bien sûr : j’ai créé une base de données pour le site et je l’ai remplie avec la structure exporté en locale, et un sous-domaine pointant vers le dossier askme/web. Erreurs : Mieux vaut enlever les choses inutiles : ./symfony cache:clear (ou en vidant les dossiers cache/ et log/ ), préparer un fichier config/databases.yml adapté à la nouvelle base de donnée, et avant d’envoyer les données, exécuter le script de vérification sur le serveur.

Pour information, sur mon serveur mutualisé OVH, j’ai ajouté au début du .htaccess :

SetEnv PHP_VER 5
SetEnv REGISTER_GLOBALS 0
SetEnv MAGIC_QUOTES 0

Si quelqu’un sait comment on désactive « short_open_tag » avec SetEnv ?

PS : Un grand merci à mon sauveur (et c’est peu de le dire) funstaff qui m’a aidé sur le chan #symfony-fr de freenode ;) .

2010
01.26

Décidément Symfony est vraiment intéressant, voici donc la suite des deux premiers articles.

Entre temps j’ai changé de projet, son nom est AskMe, avec l’application frontend et une table Question : le schema de la base.

On peut changer la page d’accueil, dans le fichier apps/frontend/config/routing.xml, changez :

homepage:
  url:   /
  param: { module: default, action: index }

Par :

homepage:
  url:   /
  param: { module: question, action: index }

Ce fichier est très puissant pour la gestion des adresses, vous pouvez par exemple mettre le contenu des questions dans l’url pour améliorer votre référencement.

Vous n’êtes pas obligés de le faire mais je vais changer le fichier apps/frontend/config/view.xml:

default:
  http_metas:
    content-type: text/html

  metas:
    #title:        symfony project
    #description:  symfony project
    #keywords:     symfony, project
    #language:     en
    #robots:       index, follow

  stylesheets:    [main.css]

  javascripts:    []

  has_layout:     true
  layout:         layout

Par :

default:
  http_metas:
    content-type: text/html

  metas:
    #title:        symfony project
    #description:  symfony project
    #keywords:     symfony, project
    language:     fr
    robots:       index, follow

  stylesheets:    [reset.css, main.css]

  javascripts:    [jquery.js, main.js]

  has_layout:     true
  layout:         layout

Pour dire que le site est en français et donner des instructions aux robots des moteurs de recherche. Mais surtout pour ajouter des fichiers CSS et JavaScript : ici reset.css que j’ajoute dans web/css, puis jquery.js et main.js (vide) que j’ajoute dans web/js et qui nous serviront plus tard pour décorer et animer le site. J’ai préféré ne pas indiquer le titre maintenant car je préfère le changer dynamiquement avec le contenu des questions.

Et pour que vous puissiez commencer à jouer avant le prochain article, l’apparence d’un site avec symfony suit le modèle d’un template inclu dans un layout :

Le template et le layout

Le template et le layout

En pratique, le layout est dans apps/frontend/templates/layout.php , perso j’y ai mis :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
    <?php include_http_metas() ?>
    <?php include_metas() ?>
    <title><?php include_slot('title', 'Ask Me') ?></title>
    <link rel="shortcut icon" href="/favicon.ico" />
    <?php include_stylesheets() ?>
  </head>
  <body>
    <h1 id="header"><a href="<?php echo url_for('@homepage'); ?>">Ask Me</a></h1>
    <div id="content">
      <?php echo $sf_content ?>
    </div>

    <p id="footer">
      Created <a href="http://bydorian.com">by Dorian</a> with <a href="http://www.symfony-project.org/">Symphony</a>.
    </p>

    <?php include_javascripts() ?>
  </body>
</html
–with-show –non-verbose-templates

Le code contient deux mystères : le slot et url_for(‘@homepage’) que je vais expliquer dans le prochain article.

D’accord c’est moche, mais si je vous donne main.css c’est déjà un peu mieux (oui je ne suis pas un graphiste ;) )

2010
01.17

Voici la suite très attendue :) d’Installer Symfony, pour écrire cet article je me base sur le tutoriel Jobeet en français.

Déjà j’ai pris le temps de comprendre les VirtualHost, donc on fait je crée un nom de domaine dans mon /etc/hosts/ en ajoutant une ligne : 127.0.0.1 learn.localhost puis je vais voir /etc/apache2/sites-avaible/default et je rajoute un VirtualHost (en entier) :


<VirtualHost *:80>
  DocumentRoot /var/www/Tests/LearnTogether/web
  DirectoryIndex index.php
  ServerName learn.localhost

  <Directory "/var/www/Tests/LearnTogether/web">
    AllowOverride All
    Allow from All
  </Directory>

  Alias /sf /var/www/Tests/LearnTogether/data/web/sf
  <Directory "/var/www/Tests/LearnTogether/data/web/sf">
    AllowOverride All
    Allow from All
  </Directory>
</VirtualHost>

L’Alias pour /sf n’est pas indispensable mais il éviter la copie du dossier sf/ que je vous ai fait faire ;) .

Maintenant quand vous allez sur http://learn.localhost/ c’est Symfony qui vous accueille ;) .

Le projet

Si vous avez un projet, faîtes une maquette sur Gimp/Inkscape/… et un schéma de la base de données sur Dia/Inkscape/… Personnelement je n’ai pas fait de maquette mais je l’avais à peu près imaginé, pareil pour la base de données.

Donc mon projet s’appelle LearnTogether, le principe : vous avez une question, vous la posez, si il n’y a pas de réponse, alors vous pouvez proposer votre réponse, et tout le monde vote pour la meilleure réponse (mais aussi les meilleures questions). Comme ça au bout d’un moment on a répondu à toute les questions possibles (ou pas) !

On s’occupe de la base de données !

Voici le fichier config/doctrine/schema.yml :

Question:
  actAs: { Timestampable: ~ }
  columns:
    content:   { type: string(4000), notnull: true }
    rate:      { type: integer, default: 0 }
    answer_id: { type: integer, default: 0 }

Answer:
  actAs: { Timestampable: ~ }
  columns:
    content:     { type: string(4000), notnull: true }
    rate:        { type: integer, default: 0 }
    question_id: { type: integer, notnull: true }
  relations:
    Question: { onDelete: CASCADE, local: question_id, foreign: id }

Mais non je vais pas vous laisser seul devant ce fichier :

  • Chaque grosse section (Question et Answer) correspond à des tables, ici celle qui contiendra les questions et celle qui contiendra les réponses.
  • Le actAs: { Timestampable: ~ } permet à Symfony de créer des champs created_at et updated_at pour gérer la date de création et la date de mise à jour de la question et de la réponse.
  • Vous devriez reconnaître de qu’il y a dans columns : ça correspond aux colonnes de table, c’est exactement comme si faisiez votre table depuis PhpMyAdmin (d’ailleurs vous pouvez la créer depuis PhpMyAdmin et l’exporter avec ./symfony doctrine:build-schema).
  • J’ai créé une relation entre Answer et Question qui permet de supprimer toutes les réponses d’une question si on supprime la question.

Bon, elle serait un peu vide cette base de données, on va donc la remplir un peu pour les tests, dans data/fixtures/ j’ai créé deux fichiers : questions.yml

Question:
  creator:
    content: Who is The Creator ?
  linux:
    content: Why linux is better ?
  switch:
    content: How can I switch to Linux ?
  name:
    content: What's your name ?

et answers.yml

Answer:
  me:
    content:      It's me !
    question_id:  1
  god:
    content:       Oh my god !
    question_id:  1
    rate:         3
  everybody:
    content:       Oh yes, everybody !
    question_id:  1
    rate:         9
  liveCD:
    content:      Use a Live CD of Linux, like Ubuntu !
    question_id:  3
    rate:         8
  no:
    content:      I have no name !
    question_id:  4
    rate:         5

Bon là c’est compréhensible, on crée des entrées sachant les champs ne sont pas tous obligatoires (faîtes pas attention à ce que j’ai mis ;) ).

Pour que tout ça soit mis en place, on fait : ./symfony doctrine:build –all –and-load.

Si vous regardez votre base de données dans PhpMyAdmin, vous verez ce que l’on a mis en place, mais sur le site rien n’a changé… heureusement Symfony est formidable et automatise tout ça !
./symfony doctrine:generate-module –with-show –non-verbose-templates learn question Question
Avec learn le nom de l’application, question le nom du module, et Question le nom de la table. On peut faire pareil pour les réponses :
./symfony doctrine:generate-module –with-show –non-verbose-templates learn answer Answer
Là vous pouvez voir tout ça dans http://learn.localhost/learn_dev.php/question et http://learn.localhost/learn_dev.php/answer.

Là normalement vous êtes sur-motivés pour continuer et apprendre à changer l’apparence du site !

2010
01.15
Symfony in action

Symfony in action

Une idée de site m’est venue et j’avais gardé Symfony dans un coin de l’ordi donc c’est une bonne occasion d’essayer. Mais attention, je ne connais pas Symfony, donc je vais dire des bêtises ;) .

Déjà Symfony est un ensemble d’outils permettant de créer des sites web rapidement, c’est en PHP, ça utilise le modèle MVC et ça permet d’être Agile, donc ca s’annonce pas mal ;) .

Normal, on télécharge la dernière version de Symfony 1.4, on la met dans un dossier de votre serveur web. Et on part en console, vous allez dans le dossier où vous avez jeté Symfony, par exemple : cd /var/www/Symfony, on vérifie que tout va bien : php data/bin/check_configuration.php, normalement c’est assez clair.

Maintenant on va utiliser le script de Symfony présent dans data/bin : php data/bin/symfony generate:project Learn. Ici j’ai appelé mon projet Learn.

La commande magique qui permet de régler tout les problèmes : php data/bin/symfony project:permission.

Pour la base de données : ./symfony configure:database « mysql:host=localhost;dbname=nomDeLaBase » nomDUtilisateur motDePasse.

Déjà, ça a plein de nouveaux dossiers, donc un petit copié-collé (car c’est sous CC By-Sa) :

  • apps/ Accueille toutes les applications du projet
  • cache/ Les fichiers mis en cache par le framework
  • config/ Les fichiers de configuration du projet
  • data/ Les fichiers de données comme les jeux de données initiales
  • lib/ Les bibliothèque et les classes du projet
  • log/ Les fichiers log du framework
  • plugins/ Les plugins installés
  • test/ Les fichiers de test unitaire et fonctionnel
  • web/ Le répertoire racine Web

Puis on crée une application : ./symfony generate:app learn. Ca vous crée l’application dans apps/learn/, encore une fois bien organisée en dossiers :s

  • config La configuration : jetez un coup d’œil du coté de routing.yml, et view.yml, ca montre bien que symfony est vraiment flexible !
  • i18n Pour traduire votre application
  • lib Le modèle
  • modules Le contrôleur
  • templates La vue

Bon on est encore loin du site dynamique et personnalisé mais c’est déjà un début, si j’arrive à aller plus loin, je vous ferais une suite de ce tutoriel ;) .

On sent que Symfony est vraiment bien pensé et largement orienté vers les développeurs web, comparé à quand je codais depuis rien du tout, ca m’a l’air assez impressionnant.

La suite (Les bases de Symfony, où vous allez voir vos premières pages)

PS : Dans les dépôts Ubuntu, c’est encore la version 1.0 8O . J’ai commencé à lire la doc officielle en anglais, avant de me rendre compte qu’elle existe en français avec un complément pour la configuration, et voici une anti-séche en français.

: php data/bin/symfony generate:project Learn. Ic
2010
01.04
Normal, Proxy, et VPN

Normal, Proxy, et VPN

Dédicace à un lecteur qui se reconnaîtra : Pour ceux qui ne sont pas sous Ubuntu, soit vous avez de la chance et vous utilisez le NetworkManager, sinon il y a pptpclient avec ce tuto.

Époustouflant ce que je viens de découvrir ! On peut avoir accès à un VPN gratuitement et rapidement sans grandes connaissances techniques. Pour faire bref, un VPN c’est une façon de vous rendre anonyme.

En pratique : choisissez votre serveur VPN (la liste de Korben.info), j’ai pris le 1er : itshidden.com, vous y créez un compte « Free », puis vous suivez cette vidéo, en résumé vous installez le paquet network-manager-pptp, puis vous configurez le VPN :

cliquez sur l'icône réseau puis "Configurez le VPN" puis "Nouveau" puis "Créer"

Remplissez et ajoutez la sécurité (voir FAQ du site)

Plus qu »à redémarrer votre ordinateur et à activer le VPN, si vous voyez apparaître un cadenas au dessus de l’icône du wifi alors vous êtes protégé ;) .

Voilà c’était pas compliqué et c’est assez rapide (mon débit a baissé de 10ko/s).

PS : J’ai fait le schéma vite-fait sous Inkscape ;) .

2010
01.01

Joyeuses fêtes ;)

Cher Lecteur,

Comme tout bon informaticien, je m’optimise ( 8) ), je te souhaite donc un joyeux noël en retard et une bonne année 2009 2010 (oui ne te trompe pas ;) ). Le blog a bien grandi, doucement mais j’en ai appris beaucoup depuis le début (et toi aussi j’espère), il a dépassé les 100 articles et les 200 commentaires (sans spam ;) ). Et surtout il vient d’entrer dans le Planet Libre, ce qui m’a apporté une bonne visibilité  et qui me force à approfondir les articles, parce que perso j’écrirais bien :

Enlevez les guillemets automatiques de Wordpress :

remove_filter('the_title', 'wptexturize');
remove_filter('the_content', 'wptexturize');
remove_filter('comment_text', 'wptexturize');

Au lieu d’un petit article très bien écrit de tutoweb. D’ailleurs çà me rappelle que je suis passé à Twitter (et Identi.ca) qui sont de très bonnes sources d’informations et qui me font sortir des blogs habituels que je lis, au fait je préfère largement Identi.ca qui est techniquement beaucoup mieux (qualité des flux, de l’API, de l’interface, …) mais il y a du monde intéressant sur Twitter, donc je reste sur les 2 réseaux (grâce à Gwibber ;) ). C’est aussi très pratique, par exemple il y a un easter egg dans le dernier Wordpress, pas besoin de l’expliquer dans un article, un simple dent/tweet suffit :

Easter egg Wordpress 2.9 : éditez un article, regardez l’historique des versions, comparez 2 mêmes versions.

140 caractères suffisent largement pour faire passer la plupart des news, mais après c’est toujours mieux d’aller lire un bon article complet sur le sujet ;) (d’ailleurs la plupart des tweet/dent sont accompagnés d’un lien (pour ma part j’utilise ur1.ca qui est libre et met à disposition sa base de données)).

À toi lecteur, pour cette année 2010, je te réserve des articles sur le bash, sur Geogebra, sur la personnalisation d’Ubuntu, sur le Python (auxquels je reprend goût :) ) et sûrement sur la migration d’Ubuntu vers Chakra (si j’y arrive !). Et en bonus, mais là c’est si je suis vraiment motivé, des decks de Anki pour réviser le Bac ;) .

PS : je crois que tout le monde va faire la même chose : programmer un article pour le nouvel an à minuit ;)

2009
12.30

Edit : Pour installer Anki : soit vous recherchez Anki dans votre Logithèque/Gestionnaire de paquets, soit vous téléchargez le paquet sur le site, soit vous le compilé ;) (mais ca j’ai pas essayé ;) ).

Pour comprendre Anki (j’admire comment j’ai placé ce lien pour installer Anki ;) ) il faut s’imaginer des cartes, d’un coté on met un question, de l’autre la réponse. Vous regardez la question, vous y réfléchissez, et vous regardez la réponse, là 4 possibilité :

  • Raté vous n’avez pas trouvé (Again) : Anki vous reposera la question dans très peu de temps ;) .
  • Vous avez réfléchi un beaucoup (Hard), moyennement (Good), presque pas (Facile et oui c’est traduit à moitié) : là Anki adaptera les prochaines « séances » pour vous poser les bonnes questions.

Vous pouvez créer vos propres paquets de cartes (decks), les cartes peuvent contenir de l’HTML, des sons et du LaTeX (je ferais sûrement un article dessus tellement c’est puissant !). La plupart des gens utilise Anki pour apprendre des langues étrangères mais je trouve que c’est réduire ses possibilités, voici une petite vidéo de présentation :


Regarder la vidéo sur blip.tv (en Flash)

J’ai commencé à faire un deck pour mes cours de Maths, mais j’ai surtout téléchargé plein de decks :) celui pour apprendre le français, en anglais, donc je l’ai utilisé pour apprendre l’anglais (c’était marrant : toute les bases de l’anglais comme en primaire :) ), et là je révise le python :) .

2009
12.28
Mnemosyne dans la Logithèque

Mnemosyne dans la Logithèque

En se promenant dans la Logithèque Ubuntu on peut tomber (et c’est malheureusement souvent le cas) sur des programmes n’ayant pas de capture d’écran. Donc je me suis demandé comment ajouter une capture d’écran et je suis tombé sur screenshots.debian.net, et c’est vraiment bien fait :

  1. Installez le programme ;)
  2. Jouez avec ;)
  3. Fermez-le :(
  4. Ouvrez une console, faîtes export LANG=C et export LC_ALL=C puis lancez le programme (depuis la console bien sûr)
  5. Essayez de faire en sorte que l’on croit que vous avez une activité normale avec 8)
  6. Redimensionnez la fenêtre de sorte à être proche de 800×600 (ou proche de ce ratio)
  7. Pam ! (vous prenez une capture d’écran avec le premier truc que vous avez sous la main (avec import screen.png par exemple)
  8. Allez sur http://screenshots.debian.net/upload, remplissez les champs (pour la version vous l’avez sous le bouton Installer dans la Logithèque Ubuntu).
  9. Un fois l’image envoyée… vous stressez (quoi « non pas du tout » :) )… suspens… roulement de tambours…
  10. Elle y est ! mais elle n’est pas encore approuvée…

Voilà, c’était pas compliqué : vous remarquerez que ma capture d’écran est très moche (problème avec Qt sous Gnome), mais c’est mieux que rien. J’éditerais surement cet article si elle est validée.

Edit :
elle a été approuvée, en plus elle est en français alors qu’il faudrait la mettre en anglais… en clair essayez de suivre leur conseils mais c’est pas grave si c’est pas exactement comme ils veulent ;) (ils sont sympas quoi :) ).

2009
12.23

Essayons Raindrop

Raindrop c’est… un clone libre de Google Wave une sorte de tableau de bord pour toutes vos activités en ligne :) , il n’a pas pour ambition de révolutionner le mél mais de l’utiliser au mieux. Quand je vous dis que j’aime pas expliquer ;) .

Pour écrire ce qui suit je me suis basé sur la page d’installation de Raindrop et de cet article.

Déjà il faut installer quelques paquets, soit en cliquant ici (j’adore le apt://), soit en adaptant cette ligne de commande pour votre distribution (ici Ubuntu) :
sudo apt-get install python-twisted python-twitter python-feedparser python-openssl python-skype python-twitter python-setuptools mercurial couchdb
Là j’ai essayé de récupérer le trunk : hg clone http://hg.mozilla.org/labs/raindrop mais c’était assez long, donc j’ai essayé de récupérer la version 0.1 : hg clone -r 0.1 http://hg.mozilla.org/labs/raindrop mais c’était aussi très long, donc j’ai pensé à prendre le .bz2 depuis la page de mercurial, mais c’était sans fin… (pas de limite de taille donc pas de temps déterminé 8) ).

… dommage j’aurai bien voulu essayer Raindrop.

PS : Je mettrais cet article à jour si une des méthodes aboutie.

2009
12.23
Options de AntiSpam Bee

Options de AntiSpam Bee

L’anti-spam par défaut (Askimet) vous rend dépendant de Automattic (la société qui édite Wordpress) et vous impose des contraintes (clef API, envoit d’informations personnelles, …), donc j’ai cherché une alternative et j’ai trouvé :

AntiSpam Bee

C’est efficace (aucun spam n’est passé depuis 2 mois), transparent (je vide les spam une fois par semaine mais à part ça il est discret) et relativement personnalisable.