Hi,
I have a ‘Watering Days’ table I wish to reproduce from a government water authority site. I have supplied a screenshot as the site requires local input fields to generate the table I wish to re-create.
The script I’ve used generates the current date for the first day and date_add() increments the date for the following days of the week.
The days Sunday and Thursday are my watering days so I need to highlight them just as in the screenshot. The date advances every day to show the current date in the first position each new day and the subsequent week days after that. Background images are used to highlight on days and off days. My effort so far can be seen at www.gordondesign.com.au/watering-days
I would be very grateful if somebody could show me how to do this - I’m stumped.
I can’t see your screen shot, off the top of my head would this do the trick, obviously merged in with your existing loop code:
$day = time();
$end = $day + (7*86400);
while ($day < $end) {
switch(date('w', $day)) {
case '0':
case '4':
// use background image for watering day, 0=Sun, 4=Thurs
$bgimage = "wateringday.png";
break;
default:
// output the other background image
$bgimage = "nonwateringday.png";
break;
}
$day += 86400;
}
Failing that, post the code you are using to generate the page.
Hi Thanks for your reply,
Unfortunate you couldn’t see the screenshot. It said pending last time I looked, so hopefully it will be available now.
I’m not that competent with php so find it had to interpret you code sample. Perhaps if you have a look at my code it might help:
<?php
$sun = '<div style="font-size: 1.3em; font-weight: bold; color: #fff; opacity: .5; margin-bottom: -18px;">Sun</div></br>';
$mon = '<div style="font-size: 1.3em; font-weight: bold; color: #fff; opacity: .5; margin-bottom: -18px;">Mon</div></br>';
$tue = '<div style="font-size: 1.3em; font-weight: bold; color: #fff; opacity: .5; margin-bottom: -18px;">Tue</div></br>';
$wed = '<div style="font-size: 1.3em; font-weight: bold; color: #fff; opacity: .5; margin-bottom: -18px;">Wed</div></br>';
$thu = '<div style="font-size: 1.3em; font-weight: bold; color: #fff; opacity: .5; margin-bottom: -18px;">Thu</div></br>';
$fri = '<div style="font-size: 1.3em; font-weight: bold; color: #fff; opacity: .5; margin-bottom: -18px;">Fri</div></br>';
$sat = '<div style="font-size: 1.3em; font-weight: bold; color: #fff; opacity: .5; margin-bottom: -18px;">Sat</div></br>';
echo '<div style="position: relative; color: #000; padding: 7px 0 0 30px; width: 678px; height: 440px; background-color: #099; font-family: Arial, Helvetica, sans-serif;">';//main-container
$day1_box = '<div style="background: url(watering-day-images/sprinkler-days-0.png) no-repeat 0 0; position: relative; text-align: center; width: 78px; height: 140px; float: left; padding-top: 14px; margin: 0 7px 0 7px;">';
$day1_box_on = '<div style="background: url(watering-day-images/sprinkler-days-1.png) no-repeat 0 0; position: relative; text-align: center; width: 78px; height: 140px; float: left; padding-top: 14px; margin: 0 7px 0 7px;">';
$current_date = date_create();
$day1 = '<div style="font-size: 1.3em; font-weight: bold; color: #fff; opacity: .5; margin-bottom: -18px;">'. date_format($current_date,"D").'</div>'.'</br>';
$day1_on = '<div style="font-size: 1.3em; font-weight: bold; color: #000; margin-bottom: -18px;">'. date_format($current_date,"D").'</div>'.'</br>';
$date1 = '<div style="font-size: .9em; color: #fff; opacity: .5;">'.date_format($current_date,"d/m"). '</div>'.'</br>';
$date1_on = '<div style="font-size: .9em; color: #000;">'.date_format($current_date,"d/m"). '</div>'.'</br>';
$first_day = $day1_box.$day1.$date1;
$first_day_on = $day1_box_on.$day1_on.$date1_on;
echo $first_day_on;
echo '</div>';
$day2_box = '<div style="background: url(watering-day-images/sprinkler-days-0.png) no-repeat 0 0; position: relative; text-align: center; width: 78px; height: 140px; float: left; padding-top: 14px; margin: 0 7px 0 7px;">';
$current_date = date_create();
$new_date = date_add($current_date,date_interval_create_from_date_string("1 days"));
$day2 = '<div style="font-size: 1.3em; font-weight: bold; color: #fff; opacity: .5; margin-bottom: -18px;">'. date_format($new_date,"D").'</div>'.'</br>';
$date2 = '<div style="font-size: .9em; color: #fff; opacity: .5;">'.date_format($new_date,"d/m"). '</div>'.'</br>';
$second_day = $day2_box.$day2.$date2;
echo $second_day;
echo '</div>';
$day3_box = '<div style="background: url(watering-day-images/sprinkler-days-0.png) no-repeat 0 0; position: relative; text-align: center; width: 78px; height: 140px; float: left; padding-top: 14px; margin: 0 7px 0 7px;">';
$current_date = date_create();
$new_date = date_add($current_date,date_interval_create_from_date_string("2 days"));
$day3 = '<div style="font-size: 1.3em; font-weight: bold; color: #fff; opacity: .5; margin-bottom: -18px;">'. date_format($new_date,"D").'</div>'.'</br>';
$date3 = '<div style="font-size: .9em; color: #fff; opacity: .5;">'.date_format($new_date,"d/m"). '</div>'.'</br>';
$third_day = $day3_box.$day3.$date3;
echo $third_day;
echo '</div>';
$day4_box_warning = '<div style="background: url(watering-day-images/sprinkler-days-0.png) no-repeat 0 0; position: relative; text-align: center; width: 78px; height: 140px; float: left; padding-top: 14px; margin: 0 7px 0 7px;">'
.'<div style=""><img src="watering-day-images/warning-days-no.png" width="78" height="73" /></div>';
$day4_box = '<div style="background: url(watering-day-images/sprinkler-days-0.png) no-repeat 0 0; position: relative; text-align: center; width: 78px; height: 140px; float: left; padding-top: 14px; margin: 0 7px 0 7px;">';
$current_date = date_create();
$new_date = date_add($current_date,date_interval_create_from_date_string("3 days"));
$day4 = '<div style="font-size: 1.3em; font-weight: bold; color: #fff; opacity: .5; margin-bottom: -18px;">'. date_format($new_date,"D").'</div>'.'</br>';
$date4 = '<div style="font-size: .9em; color: #fff; opacity: .5;">'.date_format($new_date,"d/m"). '</div>'.'</br>';
$fourth_day = $day4_box.$day4.$date4;
echo $fourth_day;
echo '</div>';
$day5_box = '<div style="background: url(watering-day-images/sprinkler-days-0.png) no-repeat 0 0; position: relative; text-align: center; width: 78px; height: 140px; float: left; padding-top: 14px; margin: 0 7px 0 7px;">';
$current_date = date_create();
$new_date = date_add($current_date,date_interval_create_from_date_string("4 days"));
$day5 = '<div style="font-size: 1.3em; font-weight: bold; color: #fff; opacity: .5; margin-bottom: -18px;">'. date_format($new_date,"D").'</div>'.'</br>';
$date5 = '<div style="font-size: .9em; color: #fff; opacity: .5;">'.date_format($new_date,"d/m"). '</div>'.'</br>';
$fifth_day = $day5_box.$day5.$date5;
echo $fifth_day;
echo '</div>';
$day6_box = '<div style="background: url(watering-day-images/sprinkler-days-0.png) no-repeat 0 0; position: relative; text-align: center; width: 78px; height: 140px; float: left; padding-top: 14px; margin: 0 7px 0 7px;">';
$current_date = date_create();
$new_date = date_add($current_date,date_interval_create_from_date_string("5 days"));
$day6 = '<div style="font-size: 1.3em; font-weight: bold; color: #fff; opacity: .5; margin-bottom: -18px;">'. date_format($new_date,"D").'</div>'.'</br>';
$date6 = '<div style="font-size: .9em; color: #fff; opacity: .5;">'.date_format($new_date,"d/m"). '</div>'.'</br>';
$sixth_day = $day6_box.$day6.$date6;
echo $sixth_day;
echo '</div>';
$day7_box = '<div style="background: url(watering-day-images/sprinkler-days-0.png) no-repeat 0 0; position: relative; text-align: center; width: 78px; height: 140px; float: left; padding-top: 14px; margin: 0 7px 0 7px;">';
$current_date = date_create();
$new_date = date_add($current_date,date_interval_create_from_date_string("6 days"));
$day7 = '<div style="font-size: 1.3em; font-weight: bold; color: #fff; opacity: .5; margin-bottom: -18px;">'. date_format($new_date,"D").'</div>'.'</br>';
$date7 = '<div style="font-size: .9em; color: #fff; opacity: .5;">'.date_format($new_date,"d/m"). '</div>'.'</br>';
$seventh_day = $day7_box.$day7.$date7;
echo $seventh_day;
echo '</div>';
echo '</div>';
Okay. Step 1: Simplify with looping. (Whenever you do the same thing multiple times, it’s a hint that you should probably loop.) I shall attempt to stick as close to your code as i can, to try and make the translation understandable.
Your boxes are all the same. So; we’ll simplify that part…
$day_box = '<div style="background: url(WARK) no-repeat 0 0; position: relative; text-align: center; width: 78px; height: 140px; float: left; padding-top: 14px; margin: 0 7px 0 7px;">';
I’ve replaced your background URL here because we’re going to replace it with the appropriate image. I dont know what the appropriate image is for you because on your demo page i can only see the ‘water’ image. Below I will use “ON” and “OFF” in the URL’s; replace as necessary.
The New Date is a variable offset: (Which i am defining as $i. We’ll explore why in a minute.)
$new_date = date_add($current_date,date_interval_create_from_date_string($i." days"));
The rest of the box is identical also; So we’ll tack that all together with the box.
$day_box .= '<div style="font-size: 1.3em; font-weight: bold; color: #fff; opacity: .5; margin-bottom: -18px;">'. date_format($new_date,"D").'</div></br>';
$day_box .= '<div style="font-size: .9em; color: #fff; opacity: .5;">'.date_format($new_date,"d/m"). '</div></br></div>';
(Also tacked the trailing </div> on in there.)
So now let’s loop. We want 7 days, starting from today (also known as +0 days). Our looping structure will be:
for ($i = 0; $i < 7; $i++) {
There’s that $i. Now, lets stick it all together appropriately:
<?php
echo '<div style="position: relative; color: #000; padding: 7px 0 0 30px; width: 678px; height: 440px; background-color: #099; font-family: Arial, Helvetica, sans-serif;">';//main-container
for ($i = 0; $i < 7; $i++) {
$current_date = date_create();
$new_date = date_add($current_date,date_interval_create_from_date_string($i." days"));
$day_box = '<div style="background: url(watering-day-images/'.((date_format($new_date,'w') == 0 || date_format($new_date,'w') == 4) ? "ON.png" : "OFF.png").') no-repeat 0 0; position: relative; text-align: center; width: 78px; height: 140px; float: left; padding-top: 14px; margin: 0 7px 0 7px;">'; //If Sun (0) or Thurs (4), ON. Else, OFF.
$day_box .= '<div style="font-size: 1.3em; font-weight: bold; color: #fff; opacity: .5; margin-bottom: -18px;">'. date_format($new_date,"D").'</div></br>';
$day_box .= '<div style="font-size: .9em; color: #fff; opacity: .5;">'.date_format($new_date,"d/m"). '</div></br></div>';
echo $day_box;
}
echo "</div>"; //End Main Container
There are certainly more ways to streamline this code, but this will at least get you what you want without having to make modifications in 7 different places!
If anything’s confusing, don’t hesitate to ask.
Awesome work!
Very nicely explained, my only problem is my grasp of php. Unfortunately I get a blank page when I load the file on my local server.
Any further help appreciated.
Post your code so we can have a look at it, also perhaps post the ‘view source’ output for the blank page (if there is any).
Additionally, add these lines to the top of your code. Blank pages most often mean there was a fatal error that is being hidden. (You’ll want to remove them again once the code’s running!)
ini_set('display_errors',1);
error_reporting(E_ALL);
StarLion,
Here is the code you sent with the right images plugged in;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>php local server test</title>
</head>
<body>
<?php
echo '<div style="position: relative; color: #000; padding: 7px 0 0 30px; width: 678px; height: 440px; background-color: #099; font-family: Arial, Helvetica, sans-serif;">';//main-container
for ($i = 0; $i < 7; $i++) {
$current_date = date_create();
$new_date = date_add($current_date,date_interval_create_from_date_string($i." days"));
$day_box = '<div style="background: url(watering-day-images/sprinkler-days-0.png'.((date_format($new_date,'w') == 0 || date_format($new_date,'w') == 4) ? "watering-day-images/sprinkler-days-1.png" : "watering-day-images/sprinkler-days-0.png").') no-repeat 0 0; position: relative; text-align: center; width: 78px; height: 140px; float: left; padding-top: 14px; margin: 0 7px 0 7px;">'; //If Sun (0) or Thurs (4), ON. Else, OFF.
$day_box .= '<div style="font-size: 1.3em; font-weight: bold; color: #fff; opacity: .5; margin-bottom: -18px;">'. date_format($new_date,"D").'</div></br>';
$day_box .= '<div style="font-size: .9em; color: #fff; opacity: .5;">'.date_format($new_date,"d/m"). '</div></br></div>';
echo $day_box;
}
echo "</div>"; //End Main Container ;?>
</body>
</html>
The screenshot shows the result. Can you advise on the next step from here please?
Thanks for the error diagnosis code, I added it as you suggested and got the following message 7 times for each day of the week.
Warning: date_create(): It is not safe to rely on the system’s timezone settings. You are required to use the date.timezone setting or the date_default_timezone_set() function. In case you used any of those methods and you are still getting this warning, you most likely misspelled the timezone identifier. We selected the timezone ‘UTC’ for now, but please set date.timezone to select your timezone. in /Applications/MAMP/htdocs/php_sandbox/terraces/test.php on line 16
droopsnoot,
Thanks for looking at this for me. StarLion has posted some code for me which he is coaching me on.
Warnings wont stop the code. You can execute
date_default_timezone_set('Australia/Perth');
as soon as you start your PHP to get rid of those messages (and set the timezone correctly), as i’m assuming you’re running this site on a server that does not allow you to edit php.ini.
I cant actually see your output yet because I need a moderator to approve it. Will post again when i can see what it’s doing.
Output is at:
http://www.gordondesign.com.au/watering-days.php
For some reason the background images are not rendering.
A quick glance at the source of the result shows that it’s looking for and image:
http://www.gordondesign.com.au/watering-day-images/sprinkler-days-0.pngOFF.png
Obviously that last bit shouldnt be there.
$day_box = '<div style="background: url(watering-day-images/sprinkler-days-[COLOR="#FF0000"]0.png[/COLOR]'.((date_format($new_date,'w') == 0 || date_format($new_date,'w') == 4) ? "[COLOR="#FF0000"]watering-day-images/sprinkler-days-1.png" : "watering-day-images/sprinkler-days-0.png[/COLOR]").') no-repeat 0 0; position: relative; text-align: center; width: 78px; height: 140px; float: left; padding-top: 14px; margin: 0 7px 0 7px;">'; //If Sun (0) or Thurs (4), ON. Else, OFF.
okay. Lets clear that up a bit.
We only want the 0/1 to change. So everything else comes outside of the if results to reduce redundancy…
$day_box = '<div style="background: url([COLOR="#008000"]watering-day-images/sprinkler-days-[/COLOR]'.((date_format($new_date,'w') == 0 || date_format($new_date,'w') == 4) ? "[COLOR="#008000"]1[/COLOR]" : "[COLOR="#008000"]0[/COLOR]").'[COLOR="#008000"].png[/COLOR]) no-repeat 0 0; position: relative; text-align: center; width: 78px; height: 140px; float: left; padding-top: 14px; margin: 0 7px 0 7px;">'; //If Sun (0) or Thurs (4), ON. Else, OFF.
the parts in green will be concatenated together; so you will get ‘watering-day-images/sprinkler-days-0.png’ or ‘watering-day-images/sprinkler-days-1.png’.
Lookin’ good 
I have updated the code on the server: http://www.gordondesign.com.au/watering-days.php
I just need to have the ‘on’ watering days to have their dates rendered in #000 (opacity: 1) and the ‘cross warning image’ see http://www.gordondesign.com.au/watering-day-images/warning-days-no.png to render in (opacity: 0.5) over the top of the ‘off’ dates.
Thanks so much for your help! I love php, but what hope have I of understanding what you’ve done 
At this point, i’d more suggest you flip this into a CSS definition swap. (yup, i’m gonna throw ANOTHER technology at you! :P) Mostly this is because you want to make several CSS changes conditionally (URL, color, opacity).
Define a couple of classes in a file called ‘watering.css’ (or whatever name you choose).
.on {
background: url('watering-day-images/sprinkler-days-0.png') no-repeat 0 0;
position: relative;
text-align: center;
width: 78px;
height: 140px;
float: left;
padding-top: 14px;
margin: 0 7px 0 7px;
color: black;
opacity: 1;
}
.off {
background: url('watering-day-images/sprinkler-days-1.png') no-repeat 0 0;
position: relative;
text-align: center;
width: 78px;
height: 140px;
float: left;
padding-top: 14px;
margin: 0 7px 0 7px;
color: white;
opacity: 0.5;
}
Include the CSS in your head tag…
<link rel="stylesheet" type="text/css" href="watering.css">
This can then reduce your inline styling significantly:
$day_box = '<div class="'.((date_format($new_date,'w') == 0 || date_format($new_date,'w') == 4) ? "on" : "off").'">'; //the class now defines all element styling.
$day_box .= '<div style="font-size: 1.3em; font-weight: bold; margin-bottom: -18px;">'. date_format($new_date,"D").'</div></br>'; //No longer need Color or Opacity setting; inherited from the surrounding div.
$day_box .= '<div style="font-size: .9em;">'.date_format($new_date,"d/m"). '</div></br></div>'; //Ditto.
StarLion, Very nice work! - can’t thank you enough!
http://www.gordondesign.com.au/watering-days.php
This is working now except for one thing. Would you be good enough to show me how to slap the warning cross over the ‘off’ days in opacity .5 ?
http://www.gordondesign.com.au/watering-day-images/warning-days-no.png
Still getting my head around your code - can I come back to you for further explanation of the code?
That… is going to require some CSS tweaking that is above my head to be certain about. I want to say it’s going to require another div, with a higher z-index, positioned on top of the text divs…you’d have to figure out how tall the text was, and define a negative Y value to move it up and onto the text…
ok, no problem. Once again thank you for getting this working for me I’ve learned a lot. Can I PM re details of the code you wrote?
Sure.
Can you walk me through the code below? I have never seen an expression planted in the middle of a class name before. Whats the logic with the full colon between the “on” and “off”?
‘<div class="’.((date_format($new_date,‘w’) == 0 || date_format($new_date,‘w’) == 4) ? “on” : “off”).‘">’