La Ferme du web - Les forums

Venez baraguiner avec la communauté !

Vous n'êtes pas identifié.

#1 23/06/2013 23:36:57

gamc
Membre
Date d'inscription: 10/06/2013
Messages: 12

Exécuter une URL externe dans un slot personnel dans Symfony

Bonjour à tous,

J'espère que c'est le bon endroit, histoire de ne pas enfreindre aux règles du site.
C'est ma première application somme toute modeste dans symfony.
Je souhaite dans la partie violette (section voir image) exécuter des url externes en cliquant sur les images qui sont en bas de celle-ci.
Un de vous saurez me conseiller sur la technique à suivre dans symfony ?
Vous en remercie d'avance.

[img]C:\Users\clotaire\Documents\Cours php\Capture.jpg[/img]

Ah, je me rends compte que l'image sur mon disque n'est pas prise en compte.
On va dire que sur mon twig, j'ai une entête, plus bas un aside contenant le menu nav, une section(vide occupant la majorité du conteneur) et plus bas en sous de la section un slide contenant des images.
Quand le user clique sur une des images du slide, un site externe est appelé(ex: lafermeduweb.net), et je souhaite permettre sa visualisation dans la section, sans jamais sortir de mon application.

Voilà j'espère que mon propos est clair
Merci de m'aider

Dernière modification par gamc (23/06/2013 23:49:43)

Hors ligne

 

23/06/2013 23:36:57

Botte De Foin Publicitaire


#2 25/06/2013 01:14:45

Theocrite
Moderateur
Lieu: Edimbourg
Date d'inscription: 18/07/2009
Messages: 33
Site web

Re: Exécuter une URL externe dans un slot personnel dans Symfony

Bonjour,

Je pense que la question est à peu près clair. Concernant l'image, il faut l'uploader chez un hébergeur d'image type hostingpics puis mettre le lien dans le post.

Pour répondre à la question, même si je ne vois pas forcément l'intérêt d'une telle pratique si j'ai compris la question, il y a deux possibilité qui ne dépendent pas de symfony :

Premièrement, avec une frame, ou iframe, en mettant un target sur le lien. Cette technique est vieille et bloquée par certains sites qui ne veulent pas être inclus.

Sinon, il est possible de charger la page en ajax en tâche de fond, puis d'afficher le HTML tant bien que mal...

Hors ligne

 

#3 25/06/2013 15:54:14

gamc
Membre
Date d'inscription: 10/06/2013
Messages: 12

Re: Exécuter une URL externe dans un slot personnel dans Symfony

Bonjour Théocrite.
Pour t'expliquer ma démarche:
Il existe actuellement l'appli qui a été conçu sous DreamWeaver.
Je fais donc une migration de l'existant, dont l'une des étapes va consister dans un premier temps à afficher l'url externe, en attendant en septembre où l'intégration sera totale à ISO fonctionnalité. Je compte certes dans cette première étape garder le strict minimum de l'existant.
D'ailleurs le site actuelle est [url].
La maquette que j'ai faite et qui n'attend plus que l'implémentation de iframe est celle ci: http://hpics.li/44e5be7.
J'ai une Entité qui s'appelle Sujet qui contient l'url de la vignette exposée et du sujet(url externe) à exécuter.
Lors de l'exécution dans index.html.twig, je prends bien en compte l'url externe pour chaque vignette.
L'affichage telle que représenter est opérationnelle, pour l'instant quand je clique sur une image celle-ci s'affiche sur l'onglet en cours ou sur un nouvel onglet(si je clique sur la mollette de la souris).

A priori le site existant ne bloque pas son affichage dans un iframe.
Je ne connais pas ajax, et au point où je suis rendu un iframe ferait l'affaire...mais comment ?

J'espère avoir dit tout ce qui pourrait aider à comprendre ma problématique...

Hors ligne

 

#4 25/06/2013 16:09:28

Theocrite
Moderateur
Lieu: Edimbourg
Date d'inscription: 18/07/2009
Messages: 33
Site web

Re: Exécuter une URL externe dans un slot personnel dans Symfony

Ok donc c'est bien ce que j'avais compris... J'esperais m'être trompé lol

Une iframe sera donc adaptée (je n'aime pas dire ça...).

L'idée est la suivante : chaque vignette est un lien html contenant une image. Ce lien comportera un target : le nom de la frame.

La frame est définie comme ci-dessous :

<iframe name="content_frame" src="start.html" frameborder="0" scrolling="auto" width="500" height="180" marginwidth="0" marginheight="0" ></iframe>

le nom content_frame est celui à mettre en target dans les liens.

http://manda.com/iframe/

Hors ligne

 

#5 25/06/2013 22:07:43

gamc
Membre
Date d'inscription: 10/06/2013
Messages: 12

Re: Exécuter une URL externe dans un slot personnel dans Symfony

Je suis d'accord avec toi. Mais si tu reprends la copie d'écran que j'ai  mise à disposition, tu vois qu'il y a une zone qui est prévue pour afficher l'url une fois que le user à appuyer sur l'image.
Donc le src est dynamique alors que la zone d'affichage est toujours la même

Dans le controller j'ai ts les eléments que je peux passer au twig dans href, le pb c'est bien comment faire en sorte que le src de l'iframe change.

Hors ligne

 

#6 25/06/2013 22:10:44

Theocrite
Moderateur
Lieu: Edimbourg
Date d'inscription: 18/07/2009
Messages: 33
Site web

Re: Exécuter une URL externe dans un slot personnel dans Symfony

Prends le temps de tester le code qui est sur le lien que je t'ai donné.

Le src de la frame est le chargement initial (pour toi probablement une page vide, ou le contenu du href de la première vignette.

Du coup je ne vois pas bien ton problème...

Hors ligne

 

#7 26/06/2013 01:15:19

gamc
Membre
Date d'inscription: 10/06/2013
Messages: 12

Re: Exécuter une URL externe dans un slot personnel dans Symfony

Tout fonctionne

En fait dans le href il manquait justement le target dans ma boucle {% for ...} dans

<a href="{{asset(vignette.getUrlsujet) }}" target="inlineframe">

Je te remercie beaucoup.

Hors ligne

 

#8 15/11/2013 17:40:59

gamc
Membre
Date d'inscription: 10/06/2013
Messages: 12

Re: Exécuter une URL externe dans un slot personnel dans Symfony

Bonjour Theocrite,

Je cherche à utiliser ajax dans symfony2 pour pouvoir dynamiquement modifier la portion prévue à cet effet.
Au départ dans la zone dédié au résultat tant l'utilisateur n'a pas appuyé sur une image du thumbnail, je compte y mettre des annonces textuelles de mon cru.

http://imagesup.org/images11/1384532562-affichage-des-reali.jpg.

Dans le thumbnail chaque mini image concerne un sujet de réalisation qui peut-être un Film, une Visite virtuelle ou un album photo
la relation est telle que nous avons sujet <-1 to 1->Film, sujet <-1 to 1->Visitevirtuelle et sujet<-1 to many->photo.
Quand un utilisateur clique sur une image du thumbnail c'est là qu'intervient ajax qui capte le clique avec l'id du sujet, récupère la ressource film, Visite virtuelle ou ensemble de photo de l'album et charge le contenu dans la zone reservée à cet effet.

En fait je ne souhaite plus utiliser l'iframe.

Comment faire pour capte le clic dans Ajax
Charger la ressource adéquate
L'écrire dans la portion "View_Panel_Sujet.
Où mettre le code ajax
Que dois faire Ajax exactement ?


Grâce aux repositories j'ai le moyen de récupérer le détail de chaque sujet

Cordialement

voici la zone à remplir

Code:

<section class="span10 corps">
    <div class="viewport_sujet">
        {# C'EST ICI QUE LE DETAIL DU SUJET EST AFFICHE selon que c'est un Film Vvirtuelle ou ensemble de photo #}
    </div>
</section>

La partie thumbnail qui fonctionne parfaitement

Code:

<!-- Thumbnail -->
<section class="span10 offset2 panel-thumbnail">
    <div class="row">
        <ul class="bxslider">
            {% for sujet in sujets%}
                <li>
                    <div class="{{ sujet.getGenre}}" id="{{ sujet.getGenre}}">
                        <img src="{{asset(sujet.getThumbnail)}}" />
                        <p>{{sujet.getTitre}}</p>
                    </div>
                </li>
            {% endfor %}
 
        </ul>   
    </div>
</section>

Voici actuellement le controller qui charge l'index.twig.html
Dois-je y ajouter d'autres actions pour mettre en place ce mécanisme ?

Code:

<?php
 
namespace Etvi\Bundle\RealisationBundle\Controller;
 
use Symfony\Component\HttpFoundation\Request;
use Symfony\Bundle\FrameworkBundle\Controller\Controller;
use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route;
use Sensio\Bundle\FrameworkExtraBundle\Configuration\Template;
 
class DefaultController extends Controller {
 
    /**
     * @Route("/",name="homepage")
     * @Template()
     */
    public function indexAction() {
        $lst_realisations = $this->getDoctrine()
                ->getManager()
                ->getRepository('EtviRealisationBundle:Realisation')
                ->findAllEnabledRealisationWithSujet();
 
        if ($lst_realisations === null) {
            throw $this->createNotFoundException('Pas de réalisations existantes ou validées');
        }
 
        $lst_sujets = array();
 
        // On récupère la liste des sujets
 
        foreach ($lst_realisations as $realisation) {
            $lst_sujets[] = $realisation->getSujet();
        }
 
        return $this->render('EtviRealisationBundle:Default:index.html.twig', array('sujets' => $lst_sujets));
    }
 
}

Dernière modification par gamc (15/11/2013 17:51:16)

Hors ligne

 

#9 16/11/2013 12:20:43

Theocrite
Moderateur
Lieu: Edimbourg
Date d'inscription: 18/07/2009
Messages: 33
Site web

Re: Exécuter une URL externe dans un slot personnel dans Symfony

Bonjour !

Alors deja, je pense qu'il faut mettre un id sur ta balise container (tu veux t'assurer d'avoir une seule balise dans laquelle mettre ton resultat telecharge en AJAX) :

<div class="viewport_sujet">
<div class="viewport_sujet" id="viewport_sujet">

Pour le reste j'utiliserais jquery, parce que honnetement faire de l'ajax sans jquery (ou une autre librairie) c'est un peu chiant...

Tu dois decider quelle trigger utiliser, et sur quel element. Personnellement je partirais sur un lien autour de chaque subnail, puis un onclick dessus (sans oublier de desactiver le comportement par defaut event.preventDefault). Dans la methode de ton onclick, tu recupere le href, tu fais un get ajax sur un controller qui te renvois que la partie necessaire de ton html, puis tu mets les donnees recues (data) dans ta div

$('#viewport_sujet').html(data);

Voila tout !

Hors ligne

 

#10 19/11/2013 00:35:45

gamc
Membre
Date d'inscription: 10/06/2013
Messages: 12

Re: Exécuter une URL externe dans un slot personnel dans Symfony

Salut Théocrite,
T'as eu vent de ce que j'ai supprimé comme message.
Voilà grâce à tes conseils j'ai pas mal avancé. Toutefois je découvre Ajax et Jquery que je ne connaissais pas voici deux jours.
je te résume ce que j'ai fait :

1 J'ai choisi le trigger click OnclickSujet
2 Sur le subnail
3 OnclickSujet permet de récupérer Id et le genre du sujet ex( id=108, genre = Film)
ça fonctionne.

Maintenant je n'ai pas encore trouver un exemple simple et clair pour mon niveau qui me permettrait de comprendre comment passer les valeurs id et genre en POST à une procédure php qui me rendrait les éléments adéquats à ma div, sachant qu'il y a 3 modèles d'affichage sur la même div:
Film-> exécution du film avec le bon js
Photo->album avec le bon js
Visite virtuelle avec le bon js
sachant que le chargement des js doit être dynamique aussi.

Questions :
Comment adresser le controller php avec deux arguments id et genre par Ajax ?
Ajax est il capable de récupérer un array rendu par le controller et le formater pour $('viewport_sujet').html(data) ?
Dans le twig comment distinguer :
un affichage d'origine en y mettant ce que je veux à l'initialisation du twig complet ex(pas de clik utilisateur, je souhaite mettre les message que je veux),
et le fait qu'après un click utilisateur je mette les data rendu par php ? A ce propos faut-il un json ou html conçu par php en include ?

Suis-je clair dans mes questions ?.

Je te remercie d'avance

Mes sources :

Zone d'affichage dynamique

Code:

<section class="span10 viewport_sujet" id="viewport_sujet">

</section>

Mon Thumbnail

Code:

<!-- Thumbnail -->
<section class="span10 offset2 panel-thumbnail">
    <div class="row">
        <ul class="bxslider">
            {% for sujet in sujets%}
                <li>
                    <div    data-genre="{{ sujet.getGenre}}">
                            <a href="#" class="OnClickSujet" data-genre="{{ sujet.getGenre}}" id="{{ sujet.getId}}">
                            <img src="{{asset(sujet.getThumbnail)}}" />
                            <p>{{sujet.getTitre}}</p>
                        </a>
                    </div>
                </li>
            {% endfor %}
</ul>

Mon jquery

Code:

{% block document_ready %}
    {{ parent() }}

var slider = $('.bxslider').bxSlider(
{
mode:'horizontal',
caption: true,
minSlides: 3,
maxSlides: 4,
slideWidth: 140,
slideMargin: 15,
});

$(".OnClickSujet").bind("Click",function(e){

  e.preventDefault();
  
  var id = $(this).attr('id');
  var genre=$(this).attr('data-genre');
    alert("Le bouton a été cliqué et je peux faire une action supplémentaire " + id + " "+ genre);
});

$(".OnClickSujet").click(function(e){
  $(this).trigger("Click"); // On lance l'évènement OnClickSujet
});
{% endblock %}

Dernière modification par gamc (19/11/2013 01:11:45)

Hors ligne

 

#11 20/11/2013 21:46:38

Theocrite
Moderateur
Lieu: Edimbourg
Date d'inscription: 18/07/2009
Messages: 33
Site web

Re: Exécuter une URL externe dans un slot personnel dans Symfony

$(".sujet").bind("Click",function(e,id){
    var newHtml = e.type || [];
    alert("Le bouton a été cliqué et je peux faire une action supplémentaire " + newHtml + " " +id + " ");
});

$(".sujet").click(function(e){
    $(this).trigger("Click"); // On lance l'évènement clicSurleBouton
});

Le deuxième bloc ne sert à rien, l'évènement on click se trigger tout seul...
$(".sujet").click(function(e){
et
$(".sujet").bind("Click",function(e,id){
sont exactement équivalent

Sinon il faut faire un binding comme tu le fais là, mais par contre dedans il te faut un e.preventDefault().

Ensuite dans sous le e.preventDefault, tu peux utiliser des $(this) pour obtenir l'objet <a> courant, et tu peux utiliser $(this).attr('href') pour récupérer ton lien et l'utiliser dans ton $.get...

Tout est là, pas forcément dans l'ordre, et c'est surtout des mots clés, je te laisse voir pour la suite.

Hors ligne

 

#12 24/11/2013 10:48:10

gamc
Membre
Date d'inscription: 10/06/2013
Messages: 12

Re: Exécuter une URL externe dans un slot personnel dans Symfony

Pas mal avancé, je te remercie.
Mais une série de problèmes existe encore, malgrès mon acharnement sur les forums, je ne trouve pas encore :

Problème I:

Le carousel s'affiche sans problème: dès que j'introduis l'ajax, plus de carousel, mais pas de plantage clair.
php app/console router:debug me donne bien my_route_to_expose  ANY    ANY    ANY  /{id}
La console me renvoie ceci :
http://imagesup.org/images11/1385302757-syntaxe-error.jpg

Le javascript:

Code:

$(".OnDemand_Sujet").bind("Click",function(e){
 
  e.preventDefault();
   
  var id = $(this).attr('id');
  var genre=$(this).attr('data-genre'); 
  var titre=  $(this).text();
  var DATA = 'id='+ id;
 
  $.ajax(
    {
  type: "POST",
        url: Routing.generate('my_route_to_expose'),{id: id}),
        data: DATA,
        cache: false,
        success: function( data )
        {
            console.log();
            console.log(data);
            $( "#viewport_sujet" ).html( data );
            console.log('ok');
 
        }
    return false;
    });  
});
 
$(".OnDemand_Sujet").click(function(e){
  $(this).trigger("Click"); // On lance l'évènement OnClickSujet
});

Le controller

Code:

<?php
 
namespace Etvi\Bundle\RealisationBundle\Controller;
 
use Symfony\Component\HttpFoundation\Request;
use Symfony\Bundle\FrameworkBundle\Controller\Controller;
use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route;
use Sensio\Bundle\FrameworkExtraBundle\Configuration\Template;
 
class DefaultController extends Controller {
 
    /**
     * @Route("/",name="homepage")
     * @Template()
     */
    public function indexAction() {
        $lst_realisations = $this->getDoctrine()
                ->getManager()
                ->getRepository('EtviRealisationBundle:Realisation')
                ->findAllEnabledRealisationWithSujet();
 
        if ($lst_realisations === null) {
            throw $this->createNotFoundException('Pas de réalisations existantes ou validées');
        }
 
        $lst_sujets = array();
 
        // On récupère la liste des sujets
 
        foreach ($lst_realisations as $realisation) {
            $lst_sujets[] = $realisation->getSujet();
        }
 
        return $this->render('EtviRealisationBundle:Default:index.html.twig', array('sujets' => $lst_sujets));
    }
     
    /**
     * @Route("/{id}",name="my_route_to_expose")
     */
    public function showsujetAction(Request $request) {
 
        $request = $this->get('request');
        if ($request->isXmlHttpRequest()) {
            $id = $request->request->get('id');
 
            $em = $this->getDoctrine()
                    ->getManager();
            $sujet = $em->getRepository('EtviRealisationBundle:Sujet')
                    ->find($id);
 
            if ($sujet === null) {
                throw $this->createNotFoundException('Sujet[id=' . $id . '] inexistant,');
            }
 
            // On récupère les ressources en fonction du genre
 
            if ($sujet.getGenre() === 'FILM') {
                return $this->render('EtviRealisationBundle:Default:index_film.html.twig', array(
                            'sujet' => $sujet,
                            'film' => $sujet . getFilm()
                ));
            } elseif ($sujet.getGenre() === 'V360') {
                $this->render('EtviRealisationBundle:Default:index_v360.html.twig', array(
                    'sujet' => $sujet,
                    'Vvirtuelle' => $sujet . getVvirtuelle()
                ));
            } else {
                $liste_photo = $em->getRepository('EtviRealisationBundle:Photo')
                        ->findAll();
                return $this->render('EtviRealisationBundle:Default:index_photo.html.twig', array(
                            'sujet' => $sujet,
                            'liste_photo' => $liste_photo
                ));
            }
        }
    }
 
}

Problème II pour être sûr que je suis tes proposition j'ai préparé ceci. pour l'affichage partiel d'index.html.twig
A supposer que cela fonctionne j'ai préparer les twig qui serait affichés dans la zone prévue à cet effet en utilisant la condition if($sujet.GetGenre()...)

Est-ce bien cela que tu m'as proposé ?

Dois-je comme je te l'avais indiqué par le passé utiliser du conditionnel dans le twig, sachant que lors de l'affichage de l'index la première fois il y aura des news tant que l'utilisateur n'aura pas cliqué sur un Thumbnail.

Merci de m'accorder du temps.

L'aventure est belle mais périlleuse et je pense grâce à vous y arriver quand même.

en voici les sources:

index_film.html.twig

Code:

<ul class="bxslider_f">
    <li>
        <video width="100%" height="300" id="video1" controls preload="auto">
            <source src="{{asset(sujet.getLocalisation)}}">
        </video>
    </li>
</ul>

index_photo.html.twig

Code:

{% for photo in liste_photo%}
 
   <!-- vue large des thumbnail -->
    <div class="panel-vue">
        <!-- This is the container for the carousel. -->
        <div id = "carousel1" >           
            <!-- All images with class of "cloudcarousel" will be turned into carousel items -->
            <!-- You can place links around these images -->
            <!--<a href="/images/carousel/big-da-vinci/382px-Leonardo_self.jpg" rel='lightbox' title="Leonardo Da Vinci">
                <img class="cloudcarousel" src="/images/carousel/test9.png" width="128" height="164" alt="Self-portrait in red chalk, circa 1512-1515." title="Leonardo Da Vinci" />
            </a>  -->           
            <a href="{{asset (photo.getLocalisationlarge)}}"  title=photo.title rel="lightbox">
                <img class = "cloudcarousel" src="{{asset(photo.localisationpetit)}} title=photo.title"  />
            </a>
            <!-- Define left and right buttons. -->
            <!--        <input id="left-but"  type="button" value="Left" />
            <input id="right-but" type="button" value="Right" /> -->
            <div id="but1" class="carouselLeft" style="position: absolute; top: 20px; right: 64px; display: inline;"></div>
            <div id="but2" class="carouselRight" style="position: absolute; top: 20px; right: 20px; display: inline;"></div>
        </div>
 
 
        <!-- Define elements to accept the alt and title text from the images. -->
        <p id="title-text"></p>
        <p id="alt-text"></p> 
    </div>
{% endfor%}

Cordialement

Dernière modification par gamc (24/11/2013 15:42:09)

Hors ligne

 

Pied de page des forums

Powered by FluxBB
© Copyright 2008-2009 - LaFermeduWeb.net