Grow your CSS skills. Land your dream job.

change content depending on the time

  • # September 2, 2008 at 11:47 pm

    I am currently making a website for an online radio station. I am trying to find a way to have what program is currently on, which changes dynamically, depending on the time. Eg:

    Quote:
    John Smith – My Radio Program
    10:00-11:00

    I’m guessing i need to use PHP, but am really not sure even where to begin. Can anyone help?

    # September 3, 2008 at 3:03 am

    It could probably be accomplished with JavaScript too, the only hurdle there would be that javascript being client side would require a bit of calculation based on the timezone of the visitor vs. the timezone of the station.

    Probably the best solution would be PHP and a fairly simple database

    My thought would be to create a database like this:

    SHOW_INFO TABLE
    id
    show_name
    start_hour
    start_minute
    end_hour
    end_minute

    SHOW_DAYS
    day_id
    show_id

    ok, now say you’ve got show X that’s on from 9am to 11am on Monday, Wednesday and Friday… you’d create a record in the show info table with the name/info of that show, it’s start time and end time… In the SHOW_DAYS table, we’ll assume day ids are 1-7 for Sunday – Saturday…

    If show X has an id of 1, then the entries to the SHOW_DAYS table would be 2,1 4,1 6,1 That’s show id 1 on days 2,4, and 6 (mon, wed, and fri)… Suppose this same show has a different time slot on a different day of the week, well with this database model you’d have to create a different entry in the SHOW_INFO table.. there are more streamlined ways to handle it, but since there isn’t likely to be an outrageous number of shows to deal with, it’s probably not a huge deal.

    ok, then your php script on the page would check what the current time is (on the server) and what day of the week it is, then run a query against the database to pull the show name where the start time is < the current time, and end time is > the the current time, and the show ID is within the list of show ids matching the days in the SHOW_DAYS table..

    the sql would look something like this:

    Code:
    SELECT show_name from SHOW_INFO as S, SHOW_DAYS as D where D.day_id = $day and S.id = D.show_id and $current_hour > S.start_hour and $current_minute > S.start_minute and $current_hour < S.end_hour and $current_minute < S.end_minute;

    That will return just the show name of the show currently on the air. If you wanted it to return the times as well, then you’d have to add those to the select statement, as such:

    Code:
    SELECT show_name, start_hour, start_minute, end_hour, end_minute from SHOW_INFO as S, SHOW_DAYS as D where D.day_id = $day and S.id = D.show_id and $current_time > S.start_time and $current_time < S.end_time;

    The php code could basically be something along these lines:

    Code:
    < ?php

    $cur_hour = $date('G');
    /* returns current hour on the 24hr clock, 0-23 */

    $cur_minute = $date('i');
    /* returns current minute 0-59 */

    $dayofweek = $date('w') + 1;
    /* returns numeric representation of the current day of the week, $date('w') returns 0-6 for Sunday-Saturday the +1 changes this to 1-7 to make things a bit more 'human' and because database ID's typically do not start at 0. */

    ?>

    Of course you would also need to add the code to open a connection to the database, issue the select statement, and print the output, but that’s all pretty standard stuff that can be found easily by looking through the online manual at php.net… I’ve covered all the difficult bits here for you. ;)

    There’s a couple other benefits afforded by going to this length to handle the stuff you’re after…

    • Visitors could be presented with daily and/or weekly lists of when shows are on the air. These would be dynamically generated.[/*:m]
    • Visitors could search the listings by day/time or show name (ideally by supplying them with drop down lists to select from)[/*:m]
    • Station manager(s) could make use of the same database for scheduling of shows. Any changes would then be immediately reflected on the website.[/*:m][/list:u]

      Of course this is a very basic implementation of what you’re after, it could be expanded greatly to handle seasonal programs, etc.. this could also be tied in to a program archive… the limits are really only determined by how far you want to expand it….

      Hope that helps

# September 3, 2008 at 3:50 am

Wow! Thanks so much tcindie! I didnt really expect such a thorough response. Im still learning PHP at the moment, so it looks a little daunting, but this has been a great help. Thanks again. :D

# September 3, 2008 at 12:25 pm

Check out #7 in this article:
http://nettuts.com/html-css-techniques/ … echniques/

You can use javascript to check the time of day and then load a different stylesheet based on that time. That should do the trick.

# September 3, 2008 at 4:47 pm
"chriscoyier" wrote:
You can use javascript to check the time of day and then load a different stylesheet based on that time. That should do the trick.

Without modification to handle adjustment for visitor timezones that would only be accurate for people in the same timezone as the radio station.. most likely those are the only people listening to the station anyway, but there’s not sense is putting out a website that’s broken for everyone else on the web. ;)

# September 4, 2008 at 11:21 am

the radio station is only a small local one that is only broadcasting in December, so the javascript probably looks like the way to go for me. thanks for all your help both of you!

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".