[JQUERY] Drag'n Drop - Plugin de fou !

Je viens de découvrir ce plugin, je vais me pencher dessus la semaine prochaine.. ... En fait, je n'en ai plus l'utilité, il faut utiliser ce genre de plugin avec précaution si on ne veut pas perdre ses visiteurs dans un process trop compliqué.

Plugin Drag Drop - Jquery

[SYMFONY][FACEBOOK] Récupérer les informations de profil : FACEBOOK CONNECT

Pour récupérer les informations de l'utilisateur lorsqu'il s'enregistre à votre site ou bien en appuyant sur un bouton "remplir automatiquement mon profile", il faut créer une fonction qui va faire ca pour nous.

J'ai mis cette fonction dans la classe sfFacebook, c'est pour moi le plus logique :

public static function updateSfGuardUserWithFacebookAccount($sfGuardUser) {

        $sfGuardUserProfile = $sfGuardUser->getProfile();

        $infos = sfFacebook::getFacebookApi()->users_getInfo($sfGuardUserProfile->getFacebookUid(), array("first_name", "last_name", "username", "birthday_date", "email_hashes", "proxied_email", "sex", "pic", "pic_small", "relationship_status", "current_location", "activities", "interests", "music", "tv", "movies", "books", "website"));

        $sfGuardUserProfile->setFirstName($infos[0]["first_name"]);

        $sfGuardUserProfile->setLastName($infos[0]["last_name"]);

        $sfGuardUserProfile->setEmailHash(serialize($infos[0]["email_hashes"]));

        $sfGuardUserProfile->setEmail($infos[0]["proxied_email"]);

        $sfGuardUserProfile->setBirthdayDate($infos[0]["birthday_date"]);

        $sfGuardUserProfile->setSex($infos[0]["sex"]);

        $sfGuardUserProfile->setPic($infos[0]["pic"]);

        $sfGuardUserProfile->setPicSmall($infos[0]["pic_small"]);

        $sfGuardUserProfile->setRelationshipStatus($infos[0]["relationship_status"]);

        $sfGuardUserProfile->setActivities($infos[0]["activities"]);

        $sfGuardUserProfile->setInterests($infos[0]["interests"]);

        $sfGuardUserProfile->setMusic($infos[0]["music"]);

        $sfGuardUserProfile->setTv($infos[0]["tv"]);

       $sfGuardUserProfile->setMovies($infos[0]["movies"]);

        $sfGuardUserProfile->setBooks($infos[0]["books"]);

        $sfGuardUserProfile->setWebsite($infos[0]["website"]);

        $sfGuardUserProfile->save();

        return true;

    }

 Ensuite il faut simplement appeler cette fonction, soit avec le déclencheur onlogin="" sur le bouton facebook connect, soit avec une fonction jquery :

function updateProfileWithFacebook() {

 $.ajax({

 url: '/sfFacebookConnectAuth/UpdateGuardWithFBProfile',

 success: function(profile) { $(".profile").html(profile);

 makeEditableField();},

 error: function(e) { alert("Une erreur est survenue. Nous n'arrivons pas à contacter les serveurs de Facebook. Merci de bien vouloir nous excuser pour ce désagrément et réessayer plus tard."   e); }

 });

}

Vous pouvez trouver la liste des informations récuperables ici
Enjoy !

[SYMFONY][FACEBOOK] Proposer aux visiteurs de s'identifier en un simple clic : FACEBOOK CONNECT

Se connecter à un site en clic est si pratique ! Plus besoin pour vos utilisateurs de passer 2 minutes à remplir le formulaire d'inscription et d'aller cliquer sur lien recu dans l'email de confirmation bal bla !
On connaissait Open ID qui permettait déjà de faire ca, cependant, OpenId ca ne parle pas à grand monde alors que Facebook ! est completement et omiprésent sur le web.

Facebook pense à nous, developpeurs de sites 2.0, pour nous rendre cette tache possible.
Symfony pense à nous, développeurs fainéants, pour nous rendre cette tache facile et complete !

aussi avant d'installer notre fameux plugin, on doit avoir installé le plugin sfDoctrineGuard (marche aussi avec les autres version de sfGuard)

INSTALLEZ sfGuard AVANT D'INCLURE LE FACEBOOK CONNECT

Une fois que c'est fait, on installe le plugin sfFacebookConnect
Pour d'autres (plus amples) informations, vous pouvez vous rendre sur la page du Plugin sfFacebook

svn co http://svn.symfony-project.com/plugins/sfFacebookConnectPlugin/trunk sfFacebookConnectPlugin

Ensuite créer vous une application sur Facebook/developpers
Vous devez renseigner les champs suivants :
Connect Url : 

http://mon.url/  // doit finir par un slash

 Base Domain :

mon.url

ATTENTION : Ceci est choisi d'une certaine facon. Il faut plusieurs choses : que votre mon.url soit en ligne (pas de fichier particulier à inclure sur le site en ligne, Facebook va le pinger, c'est tout). Si vous voulez, comme moi, programmer et tester le plugin en local, vous pouvez modifier votre fichier hosts (qui se trouve ici sous linux : /etc/hosts) et rajoutant la ligne 127.0.0.1 local.mon.url
Ainsi, vous garderez votre accès internet pour votre site en ligne et vous aurez accès à votre site local avec l'adresse local.mon.url . Evidement, votre virtual host doit être fonctionnel mais ca je ne m'en fait pas pour vous.

Une fois l'application créer, on va faire en sorte que nos fichiers de configuration autorise le plugin à être utilisé :
Dans le fichier settings.yml, ajoutez sfFacebookConnectAuth à la ligne enabled_modules :

all:

  .settings:

    enabled_modules:      [default, sfGuardAuth, sfFacebookConnectAuth]

    login_module:           BasesfFacebookConnectAuthActions

    login_action:           executeAjaxSignin

Ensuite modifiez votre fichier app.yml :

all:

  facebook:

    api_key:  votre_api_key

    api_secret: votre_api_secret 

    api_id: votre_app_id

    redirect_after_connect: false

    redirect_after_connect_url: ''

    connect_signin_url: 'sfFacebookConnectAuth/signin'

    app_url: '/my-app'

    guard_adapter: ~

    js_framework: jQuery

  sf_guard_plugin:

    profile_class: sfGuardUserProfile

    profile_field_name: user_id

    profile_facebook_uid_name: facebook_uid

    profile_email_name: email

    profile_email_hash_name: email_hash

  facebook_connect:

    load_routing:     true

    user_permissions: [] 

Allez ensuite dans le fichier /plugins/sfDoctrineGuardPlugin/config/doctrine/schema.yml
Pour qu'on puisse stocker les informations de profil du nouvel utilisateur, il va falloir  une nouvelle table dans la base de données, la table sf_guard_user_profile et la lier avec la table sf_guard_user...
Voilà donc les modifications à apporter :

sfGuardUserProfile:

  tableName:     sf_guard_user_profile

  columns:

    user_id:          { type: integer(4), notnull: true }

    first_name:       { type: string(30) }

    last_name:        { type: string(30) }

    facebook_uid:     { type: string(20) }

    email:            { type: string(255) }

    email_hash:       { type: string(255) }

    birthday_date :   { type: string(255) }

    sex:          { type: string(255) }

    pic:          { type: string(255) }

    pic_small:          { type: string(255) }

    relationship_status : { type: string(255) }

    current_location  : { type: string(255) }

    activities  : { type: string(255) }

    interests  : { type: string(255) }

    music  : { type: string(255) }

    tv  : { type: string(255) }

    movies  : { type: string(255) }

    books  : { type: string(255) }

    local  : { type: string(255) }

    books  : { type: string(255) }

    website  : { type: string(255) }

  indexes:

    facebook_uid_index:

      fields: [facebook_uid]

      unique: true

    email_index:

      fields: [email]

      unique: true

    email_hash_index:

      fields: [email_hash]

      unique: true

  relations:

    sfGuardUser:

      type: one

      foreignType: one

      class: sfGuardUser

      local: user_id

      foreign: id

      onDelete: cascade

      foreignAlias: Profile

Evidement, il faut dire à Doctrine de construire la nouvelle table et les relations associées :

symfony Doctrine:build --all --and-load --no-confirmation

Allez ensuite dans /apps/frontend/lib/myUser.class.php
et faites étendre la classe

class myUser extends sfFacebookUser{}

Voilà, la configuration du plugin est finie.
 U T I L I S O N S   L E   M A I N T E N A N T  !
J'imagine et j'espère que vous utilisez un layout, avec Facebook Connect, l'utilisation du layout facilite grandement l'intégration du plugin.
Ouvre votre /apps/frontend/templates/layout.php
Insérez ces lignes dans la balise head:

<script type="text/javascript" src="/sfFacebookConnectPlugin/js/animation/animation.js"></script>

<?php use_helper('sfFacebookConnect'); ?>

<?php include_bottom_facebook_connect_script();?>

Ensuite, on veut proposer un lien à l'utilisateur pour se connecter en 1 clic à notre site.
On va donc vérifier que l'utilisateur n'est pas connecté au site pour lui proposer ce boutton :
Toujours dans layout, car c'est un élement que vraissemblablement, on veut voir sur toutes les pages :

<?php if (!$sf_user->isAuthenticated()) {

?>

     <fb:login-button v="2" size="medium">Se connecter avec Facebook</fb:login-button>

<?php

}else{

     echo "hello";

} ?>

A ce niveau là, un simple clic sur le bouton, vérifiera si l'utilisateur est déjà connecté à facebook, sinon il lui proposera d'entrer ses identifiants. S'il s'identifie correctement dans le formulaire facebook, il est alors immédiatement identifié sur votre site.
Et si l'on va voir dans la base de données, on voit qu'un nouvel utilisateur nommé Facebook-012345678 vient d'être créé et qu'il a aussi un profile.
Mais là, ( Suprise ! ho !) le profile est vierge. Seul l'uid est récupéré.

J'ai longtemps cherché la solution mais en fait ca parait logique. On ne sait pas a l'avance ce que vous voulez récupérer pour votre application et de base on dit que vous ne voulez seulement connecter un utilisateur.

Mais moi, je veux récupérer beaucoup plus de choses que cela, c'est pour cette raison que j'ai créé un modèle pour sf_guard_user_profile avec tous ces champs (sex, brithday_date etc...).

Pour faire ceci, vous pouvez suivre ce tuto : Récupérer les informations des utilisateurs FacebookConnect
http://www.symfony-project.org/more-with-symfony/1_4/fr/12-Developing-for-Facebook
http://blog.fruitsoftware.com/2010/01/facebook-connect-friends-et-autres-plaisirs/

[SYMFONY] Insérer le formulaire de login dans le frontend

Voici un blog assez génial que je viens de découvrir, il explique notamment comment insérer le formulaire de login dans le frontend.

http://www.clementdelmas.fr/blog/developpement-web/symfony/formulaire-dauthentification-pour-frontend-avec-sfguardplugin/comment-page-1#comment-9

Formulaire d’authentification pour frontend avec sfGuardPlugin

Dans la série « je déterre des tutos que j’ai rédigé l’an dernier », voilà un tutoriel fait pour symfony. Il a été rédigé pour la 1.2, mais je pense qu’il doit être encore compatible pour 1.4 (à vérifier quand même). Le but de ce tutoriel est de vous montrer comment faire, simplement et rapidement, un formulaire d’authentification pour l’application frontend, dans un component, le tout avec sfGuardPlugin (ouf!). Je vous invite à lire au passage, la documentation du plugin et un extrait du guide pour Symfony 1.2, qui pourront toujours vous aider / compléter cet article.

Création du component

On crée un component contenant le code de l’action qu’on veut exécuter dans le partial. Pour cela, crée un nouveau fichier components.class.php dans le module lié au component (dossier sfGuardAuth/actions). Ensuite, on édite le fichier et on ajoute la création du formulaire :

<?php
    class sfGuardAuthComponents extends sfComponents
    {
        public function executeSideSignin($request)
    {
        $class = sfConfig::get('app_sf_guard_plugin_signin_form', 'sfGuardFormSignin');
    $this->signinForm = new $class();
    }
}

?>

Création du template

On crée le template du component (dans notre cas _sideSignin.php dans le dossier sfGuardAuth/templates),
qui permettra d’afficher le formulaire de connexion, et on l’édite:

<h2>Formulaire d'identification</h2>
<form id="signinForm" action="<?php echo url_for('@sf_guard_signin') ?>" method="post" class="clearfix">
    <div id="signinFields">
        <label for="signin_username">Login</label>
        <input type="text" name="signin[username]" id="signin_username" />
        <br />
        <label for="signin_password">Mot de passe</label>
        <input type="password" name="signin[password]" id="signin_password" />
        <br />
        <input type="checkbox" name="signin[remember]" id="signin_remember" />
        <label for="signin_remember">Se souvenir de moi</label>
    </div>
    <div id="signinSubmit">
        <?php echo $signinForm->renderHiddenFields();
&nbsp; ?>
        <!-- a href="#">Mot de passe oublié ?</a> | -->
        <input type="submit" value="Connexion »" />
    </div>

</div>

Finalisation

Il ne reste plus qu’à l’intégrer dans le template voulu, avec le fameux : "include_component(’sfGuardAuth’, ’sideSignin’);", vider le cache et rafraichir la page…
Pour tester si l'utilisateur est déjà authentifié, on se sert de cette fonction : if(!$sf_user->isAuthenticated())
    include_component('sfGuardAuth', 'sideSignin'); ?>

Merci à clementdelmas.fr

Reconnaitre n'importe quelle police

Voici un site génial pour retrouver le nom d'une police que l'on veut ! http://new.myfonts.com/WhatTheFont/

Gérer des utilisateurs avec SYMFONY

Voici un site très riche sur Symfony notament en ce qui concerne la gestion des utilisateurs :

http://www.lafermeduweb.net/tutorial/la-gestion-des-droits-et-utilisateur-dans-symfony-p49.html
http://www.lexik.fr/blog/symfony/symfony/utilisation-de-sfuser-et-de-ses-namespaces-1053

Stylez vos champs input type="file"

C'est plutot frustrant, les input type="text" ne se style pas comme les autres.... 

Vous voulez quand même les styler et vous avez bien raison. Voici une solution :

 Joignez ces styles :

label.FileLabel
{
    width: 79px;
    height: 22px;
    background: url(myIMAGE.png) 0 0 no-repeat;

    display: block;
    overflow: hidden;
    cursor: pointer;
}
 

label.FileLabel input.file
{
    position: relative;
    height: 100%;
    width: auto;
    opacity: 0;
    -moz-opacity: 0;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);

} 

Il faut ensuite entourer votre bouton de choix de fichier comme ceci :

<label class="FileLabel">

<input type="file" class="file" name="myFile"/>

</label>

Exemple :