[Résolu ] Problème Url [ Tuto Site A à Z ]
Bonjours,
j'ai suivis le tuto "comment faire son site de a à z" et en prenant les sources j'ai corriger beaucoup de bug car l'archive en avait pas mal.
Mais je veux créer une page accueil où il y a de script, et un nouveau css, je ne peux donc pas me servir de la bdd pour les injections en php. Et vu que je veux ce css que sur une page je ne peux me servir du controller page. J'ai donc créé un controller accueil avec une fonction index.
A la base c'est pour inclure un carousel à ma page et je ne peux vu que c'est du php et la bdd block.
AccueilController.php
<?php
class AccueilController extends Controller
{
function index()
{
$this->layout='carousel';
$d'lien']=BASE_URL . '/webroot/';
$this->set($d);
}
}view/layout/carousel.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title><?php echo isset($title_for_layout) ? $title_for_layout : 'Mon site'; ?></title>
<link rel="stylesheet" href="<?php echo BASE_URL . '/webroot/css/style.css' ?>">
<link rel="stylesheet" href="<?php echo BASE_URL . '/webroot/css/global.css'?>">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="<?php echo BASE_URL . '/webroot/js/slides.min.jquery.js'?>"></script>
<script>
$(function(){
$('#slides').slides({
preload: true,
preloadImage: <?php echo BASE_URL . '/webroot/img/loading.gif'?>,
play: 5000,
pause: 2500,
hoverPause: true,
animationStart: function(current){
$('.caption').animate({
bottom:-35
},100);
if (window.console && console.log) {
// example return of current slide number
console.log('animationStart on slide: ', current);
};
},
animationComplete: function(current){
$('.caption').animate({
bottom:0
},200);
if (window.console && console.log) {
// example return of current slide number
console.log('animationComplete on slide: ', current);
};
},
slidesLoaded: function() {
$('.caption').animate({
bottom:0
},200);
}
});
});
</script>
</head>
<body>
<div class="topbar" style="position:static">
<div class="topbar-inner">
<div class="container">
<h3><a href="<?php echo Router::url('pages/view/id:1/slug:accueil'); ?>">Mon site</a></h3>
<ul class="nav">
<?php $pagesMenu = $this->request('Pages', 'getMenu'); ?>
<?php foreach ($pagesMenu as $p): ?>
<li><a href="<?php echo Router::url('pages/view/id:' . $p->id . '/slug:' . $p->slug); ?>" title="<?php echo $p->name; ?>"><?php echo $p->name; ?></a></li>
<?php endforeach; ?>
<li><a href="<?php echo Router::url('posts/index'); ?>">Actualité</a></li>
<li><a href="<?php echo Router::url('pages/index'); ?>">Pages</a></li>
</ul>
</div>
</div>
</div>
<div class="container" style="padding-top:60px;">
<?php echo $this->Session->flash(); ?>
<?php echo stripslashes($content_for_layout); ?>
</div>
</body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
</html>Et ma vue
view/accueil/index.php
<div id="container">
<div id="example">
<img src="<?php echo $lien.'img/new-ribbon.png'?>" width="112" height="112" alt="New Ribbon" id="ribbon">
<div id="slides">
<div class="slides_container">
<div class="slide">
<a href="http://www.flickr.com/photos/jliba/4665625073/" title="145.365 - Happy Bokeh Thursday! | Flickr - Photo Sharing!" target="_blank"><img src="<?php echo $lien.'img/slide-1.jpg'?>" width="570" height="270" alt="Slide 1"></a>
<div class="caption" style="bottom:0">
<p>Happy Bokeh Thursday!</p>
</div>
</div>
<div class="slide">
<a href="http://www.flickr.com/photos/stephangeyer/3020487807/" title="Taxi | Flickr - Photo Sharing!" target="_blank"><img src="
<?php echo $lien.'img/slide-2.jpg' ?>
" width="570" height="270" alt="Slide 2"></a>
<div class="caption">
<p>Taxi</p>
</div>
</div>
<div class="slide">
<a href="http://www.flickr.com/photos/childofwar/2984345060/" title="Happy Bokeh raining Day | Flickr - Photo Sharing!" target="_blank"><img src="<?php echo $lien.'img/slide-3.jpg'?>" width="570" height="270" alt="Slide 3"></a>
<div class="caption">
<p>Happy Bokeh raining Day</p>
</div>
</div>
<div class="slide">
<a href="http://www.flickr.com/photos/b-tal/117037943/" title="We Eat Light | Flickr - Photo Sharing!" target="_blank"><img src="<?php echo $lien.'img/slide-4.jpg'?>" width="570" height="270" alt="Slide 4"></a>
<div class="caption">
<p>We Eat Light</p>
</div>
</div>
<div class="slide">
<a href="http://www.flickr.com/photos/bu7amd/3447416780/" title="“I must go down to the sea again, to the lonely sea and the sky; and all I ask is a tall ship and a star to steer her by.” | Flickr - Photo Sharing!" target="_blank"><img src="<?php echo $lien.'img/slide-5.jpg'?>" width="570" height="270" alt="Slide 5"></a>
<div class="caption">
<p>“I must go down to the sea again, to the lonely sea and the sky...”</p>
</div>
</div>
<div class="slide">
<a href="http://www.flickr.com/photos/streetpreacher/2078765853/" title="twelve.inch | Flickr - Photo Sharing!" target="_blank"><img src="<?php echo $lien.'img/slide-6.jpg'?>" width="570" height="270" alt="Slide 6"></a>
<div class="caption">
<p>twelve.inch</p>
</div>
</div>
<div class="slide">
<a href="http://www.flickr.com/photos/aftab/3152515428/" title="Save my love for loneliness | Flickr - Photo Sharing!" target="_blank"><img src="<?php echo $lien.'img/slide-7.jpg'?>" width="570" height="270" alt="Slide 7"></a>
<div class="caption">
<p>Save my love for loneliness</p>
</div>
</div>
</div>
<a href="#" class="prev"><img src="<?php echo $lien.'img/arrow-prev.png'?>" width="24" height="43" alt="Arrow Prev"></a>
<a href="#" class="next"><img src="<?php echo $lien.'img/arrow-next.png'?>" width="24" height="43" alt="Arrow Next"></a>
</div>
<img src="<?php echo $lien.'img/example-frame.png'?>" width="739" height="341" alt="Example Frame" id="frame">
</div>
</div>Merci de votre aide.
PS : Si vous avez une autre solution pour une page accueil avec un carousel, elle est le bien venue ;)
17 réponses
Dans le fichier js de InfiniteCarousel met un alert('charge'); au début du fichier pour voir s'il est bien chargé
Si j'ai bien compris tu veux pouvoir utiliser la bdd Post dans AccueilController c'est bien ça?
En faite je voulais faire une page accueil avec le controlleur page du tuto mais quand j'ai vu que j'avais du css des script et du php dans ma vue ba je me suis rendu compte que sa marchait pas.
Une solution ?
Et ça ça marche pas:
<?php
class PageController extends Controller
{
function acceuil()
{
$this->layout='carousel';
$d'lien']=BASE_URL . '/webroot/';
$this->set($d);
}
// Là tes autres fonctions
}Et dans le fichier routes.php tu fais:
Router::connect('', 'pages/accueil');J'aurai pu faire sa mais ce que tu ne comprends pas c'est que je ne peux mettre du php dans la bdd.
Donc je ne peux mettre un slider et autre valeur. Parce que j'ai essayé et automatiquement sa me block les balises php
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/polodu94/webroot/js/jquery.infinitecarousel.js"></script>
<script type="text/javascript">
$(function(){
$('#carousel').infiniteCarousel();
});
</script>
<div id="carousel">
<ul>
<li><img src="/polodu94/webroot/img/p1.jpg" alt="" width="500" height="213" />
<p>This carousel has no padding applied to it so you won't see hints for the previous and next images. Also, the progress bar could be disabled by setting just one option on the plugin.</p>
</li>
<li><img src="/polodu94/webroot/img/p2.jpg" alt="" width="500" height="213" />
<p>This is the caption for the second image. The height of the caption box is an option.</p>
</li>
<li><img src="/polodu94/webroot/img/p3.jpg" alt="" width="500" height="213" /></li>
<li><img src="/polodu94/webroot/img/p4.jpg" alt="" width="500" height="213" />
<p>It's not easy being green.</p>
</li>
<li><img src="/polodu94/webroot/img/p5.jpg" alt="" width="500" height="213" /></li>
<li><img src="/polodu94/webroot/img/p6.jpg" alt="" width="500" height="213" />
<p>You can easily mix images types. Gif, png, and jpeg all work without any issues.</p>
</li>
</ul>
</div>Et j'ai sa dans ma bdd :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/polodu94/webroot/js/jquery.infinitecarousel.js"></script>
<script type="text/javascript">// <![CDATA[
$(function(){
$('#carousel').infiniteCarousel();
});
// ]]></script>
<div id="carousel">
<ul>
<li><img src="/polodu94/webroot/img/p1.jpg" alt="" width="500" height="213" />
<p>This carousel has no padding applied to it so you won't see hints for the previous and next images. Also, the progress bar could be disabled by setting just one option on the plugin.</p>
</li>
<li><img src="/polodu94/webroot/img/p2.jpg" alt="" width="500" height="213" />
<p>This is the caption for the second image. The height of the caption box is an option.</p>
</li>
<li><img src="/polodu94/webroot/img/p3.jpg" alt="" width="500" height="213" /></li>
<li><img src="/polodu94/webroot/img/p4.jpg" alt="" width="500" height="213" />
<p>It's not easy being green.</p>
</li>
<li><img src="/polodu94/webroot/img/p5.jpg" alt="" width="500" height="213" /></li>
<li><img src="/polodu94/webroot/img/p6.jpg" alt="" width="500" height="213" />
<p>You can easily mix images types. Gif, png, and jpeg all work without any issues.</p>
</li>
</ul>
</div>Et pourquoi ne pas juste garder les images que tu veux utiliser en BDD.
Je m'explique :
Pour moi tu n'a pas besoin d'un contrôleur spécial pour l'accueil. Si tu veux juste un css et un JS que pour cette page tu a juste à les insérer comme tu a fais là.
Après si tu pense ajouter souvent des images dans ton carrousel, fait toi une table media ou tu aura tes images et une table carrousel ou tu aura les identifiants de tes images à insérer. A ce moment là dans ta fonction index du contrôleur tu va récupérer tes images et tu passe les liens de tes images avec ta fonction set().
Après tu a juste a faire un foreach pour créer dynamiquement le carrousel.
N'hésite pas a demander des précisions, le dimanche c'est dur :p
En fait les images je verrai après mais ta technique est pas mal.
Mais mon problème est que le script ne se charge pas parce que la bdd block les balises :
<script type="text/javascript">// <![CDATA[
$(function(){
$('#carousel').infiniteCarousel();
});
// ]]></script>Enfin je ne maîtrise pas le js j'ai pris un carousel à la volée et je l'ai placé en suivant les indications. Si je prends une page avec que mon carousel donc sans interaction avec la bdd, il n'y a pas de souci.
Je m'explique peut-être mal mais as-tu une idée ?
$("#carousel").infiniteCarousel is not a function
[Stopper sur une erreur]
$('#carousel').infiniteCarousel();J'ai ça c'est pour sa que sa marche pas, mais si je charges la page html de démo tout marche --'
Tout compte fais je pense pas ^^ vu que les images sont bien chargées et tout. Mais c'est le lien ? Je galère là ...
EDIT : j'ai mis le lien de mon site donc il n'y a pas de souci de chargement mais cela ne marche toujours pas ...
Il est bien chargé j'ai le alerte charge. J'ai l'impression il initialise le carousel avant d'inclure le script pck l'appel est beaucoup plus long que je mets le
<script type="text/javascript">
$(function(){
$('#carousel').infiniteCarousel();
});
</script>EDIT : Il me dit toujours :
$("#carousel").infiniteCarousel is not a function