Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

PHP

Posted by rjendeavours
rjendeavours
Courses Plus Student 4,965 Points

Best way to update multiple features on one page.

Ok guys, this is my first reach out for help so I must be pretty stumped on the best way to go about doing this.

So what I am trying to achieve is as follows;

Multiple slideshows on a single page that are pulling the images directly from the database. I would love to keep it all php, but since the images need to change on the client side, it can't be done I don't think.

Now I've already wrote all the insertion code to put the images into the database in a longBlob. I got the code working for displaying them back, which tested my patience to the max ha ha. What I'd like help with is the images changing by themselves according to a delay (time in seconds) already held in the database.

I tried this using javascript, which worked great. I retrieved the images & delays from the database using php, then passed them over to javascript via an array & looped through. The idea was to load all images relevant to each slideshow, then let javascript rotate them using the bespoke delays to each one. However apparently javascript is "single threaded" so functions like setTimeout & setInterval (which I was using) only worked for one slideshow. As soon as I tried two slideshows at the same time, it went crazy & basically didn't work.

So, I've turned to ajax. I'l set a table in the database to update when an image has been shown . Which means it will select the ones that haven't been yet. Reset them all at the end & loop. As far as the delay, I'm thinking, set a timer in the backend (once the page is initially loaded) & as the delays run out on each slideshow, ajax calls a new image. Just to note, today is the first day I have looked at Ajax, at all, I've been very anti-javascript since I started coding (3 months ago). The idea of having code "client-side" sounds like a huge security risk. However I wasn't aware that when interacting with a database or any other high risk feature, you still pass the information sent by the client through all the php filtering & validation. I've been really shocked watching Ajax vids this morning on youtube, seeing how I could have made all the CMS & login I've built from scratch much much quicker for the user, but still just as secure. (Or so I think). My attitude now is to use javascript etc but just treat any information from it as the same as I would treat a password submission (which is expect some kind of a hack & validate the stuffing out of it :)

So a few questions really;

Is this Ajax method I'm going to try (right now) the best way? Or am I going down the wrong route? Some people might mention Jquery & my understanding is that it is a framework of javascript? Sort of like codeignitor is for php or bootstrap for hmtl/css. If that is true I'd like to stay away from that, I like to write things from scratch so I completely understand it. I think too many programmers are relying on these frameworks & it's making them dependant. Anyway, just my view & since I've been coding only 3 months, most likely a "poor view".

I would appreciate any advice & guidance anyone is willing to give & thanks for taking the time to read this.

4 Answers

ecp
ecp
838 Points
ecp
ecp
838 Points

Hi there, Rich E :)

I'm no expert on these things -- but let's see if either Jim Hoskins, Randy Hoyt, or Nick Pettit are able to point you in the right direction.

Best,

Elizabeth

rjendeavours
rjendeavours
Courses Plus Student 4,965 Points

I'm sure they'l be able to help, might need me to explain things better though :) Thank You

Nick Pettit
STAFF
Nick Pettit
Treehouse Teacher
Nick Pettit
Nick Pettit
Treehouse Teacher

Hi Rich E,

You may want to consider using a jQuery plugin for this. There are lots of great sliders out there that will allow you to set a delay, include multiple slideshows per page, and so on.

My favorite right now is SuperSlides: http://nicinabox.com/superslides/

It's fast, it uses GPU acceleration when available, and the code is pretty simple and easy to understand. There are also multiple examples included that show you how to make multiple slideshows per page as you've described.

Does that help? :) If that's not what you're looking for, you may want to post a link to the website you're working on. It would be much more helpful to actually have a visual on which to base our discussion.

rjendeavours
rjendeavours
Courses Plus Student 4,965 Points

Hi Nick, thank you for the reply. Not seen you since html video's, was wondering "Where's Nick gone?" when I moved onto Javascript.

I have made a decision to build everything from scratch as I believe this is crucial to developing my business further in the future. So I'm looking to build in pure javascript & not use Jquery.

Any ideas how I might build this from scratch?

I've got an idea I'm going to try which is basically;

1)Set a timer in javascript when the page is first loaded. Lets call this page.php

2a)Load an image & the delay from a database using Php (PDO of course). Lets call this load.php.

2b)Increment the database to notify that, that particular image has been used.

3)Put the returned image & delay from load.php over to javascript in page.php.

4)When the timer on page.php hits a certain point, javascript or Ajax will call on load.php to produce a new image(which hasn't been shown yet). Of course any information sent by page.php will be validated by load.php (most likely use regex).

Unfortunately I don't have the site uploaded yet, I'm working on it locally & struggling to hit a deadline for pen-testing :/ Only been coding 3 months (Treehouse got me started then I learnt more advanced php via youtube & stackoverflow).

Just tried to get the image to display using Ajax but it displays the binary info from the longBlob eventhough load.php has a header set to image. I think it is the "responseText" that is doing it as it works in my CMS I've built. Must be the Ajax code.

I'm thinking I might just stick a html img tag (<img src=load.php> inside the javascript function.

Anyway I'm just off out & I'l give this a try when I get back. If you have any advice on the above or at all, feel free.

Much appreciated

rjendeavours
PLUS
rjendeavours
Courses Plus Student 4,965 Points
rjendeavours
rjendeavours
Courses Plus Student 4,965 Points

Just noticed my reply had the img tag code I wrote taken out.....nice filtering there Treehouse :D

Randy Hoyt
STAFF
Randy Hoyt
Treehouse Guest Teacher
Randy Hoyt
Randy Hoyt
Treehouse Guest Teacher

You shouldn't need to do this with Ajax. Pulling all the images out of the database when the page first loads and then rotating through them with JavaScript on the page should work just fine.

You should be able to use setTimeout to get multiple slideshows animating. Can you describe in a little more detail how you want the page to behave, something like this:

  1. Someone visits the web page.
  2. It loads with four slideshows. The first one has ## images, the second one has ## images, ...
  3. After 3 seconds, then XX happens
  4. ...
  5. etc.

Is there any chance you could send us a link to something online? It would be immensely helpful for us to see what you've tried and what's not working like you expect.

rjendeavours
rjendeavours
Courses Plus Student 4,965 Points

Hi guys

Thank you for the replies, really helpful. Apologies that my brief isn't great, it's still all a bit new to me. Like I said though, nothing online as yet so whether that means it's hard for you to help, then I'l maybe have to go sort that out on my end.

However if you can help without.

The slideshows are basically advertisements that have been uploaded by businesses in their account area. (Already built that & it's working great).

Businesses can add as many adverts as they wish so I will most likely have to use an array to loop through for sure.

So customer clicks onto the site, php checks to see which "Businesses'" turn it is to have their ads shown. There will be advert 7 spots. One for mobile's but I'l come to that when I finish this part.

Reading Randys post I'm thinking php will select all of the ads & delays from the database that have the same ID as the business that was selected. So one table to sort which business get's chosen,. then a second table that holds all adverts of all businesses.

So it could be advert space 1 is ....Smells Like Bakin'.....they have 2 ads;....

ad 1 has a delay of 30 seconds, (stays on screen for 30 seconds)

but ad 2 is advertising a product with a higher margin so they want to push this product more & set a delay of 120 seconds. Giving more of a chance for the user to see it.

So user hits the site...ad 1 appears on one out of the seven slots.....30 seconds later it changes to ad 2......if there are no more ads....goes back to ad 1...& so on. Whatever business is chosen when the user first hits the site, is the business that will remain in that 1/7 spot on the whole site, even in the login area. So I'l be using a session variable to hold this. I'l be checking if the session is set when the user first hits the website if not set it, if so, display those ads.

So it will work the same for ad slots 2-6.....their ads change as the time goes by. I might want to add in some sort of a fade so it's not harsh on the user with ads changing. There will be a 20 second minimum delay on insert anyhow to avoid creating some freaky strobe light effect of ads flickering every few seconds ha ha.

I'm also going to add in some feature that lets the user flick back to the previous ad incase they missed it, but if you could offer advice on just the above, it would be awesome.

Also, a quick note for Randy: When I tried multiple setIntervals, it made them overlap...so I set one at 1 second & the other at 3 second, but it pushed one forward so it only ever display the second one. Hard to explain but it didn't work the way I was doing it. Without setInterval it might be easier to just pull a single image at a time with the database, to incorporate the delay. Loops aren't my strongest asset. Have noticed you said "setTimeout" though.

Try this link & it will give you an idea what I'm trying to do.

http://www.youtube.com/watch?v=L_bBtKyoARU If he has infact got that working without refreshing I'd

love to do it with Php, but no idea how you do what he is doing with a database, don't understand his code tbh.

http://www.youtube.com/watch?v=5yUwFOv79qI I'l be using that to select the businesses in the first place.

(Using PDO though. That's very straight forward so I should be fine there).

Its once it's on the client side, that's where I'm struggling.

Cheers Guys