{"id":26945,"date":"2016-12-17T03:01:26","date_gmt":"2016-12-16T17:01:26","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=26945"},"modified":"2016-12-17T19:18:16","modified_gmt":"2016-12-17T09:18:16","slug":"timezone-country-places-integration-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/timezone-country-places-integration-tutorial\/","title":{"rendered":"TimeZone Country Places Integration Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/tz_places.php\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"TimeZone Country Places Integration Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/tz_places_yet_more.jpg\" title=\"TimeZone Country Places Integration Tutorial\"  \/><\/a><p class=\"wp-caption-text\">TimeZone Country Places Integration Tutorial<\/p><\/div>\n<p>Yesterday we set up the framework for our software integration improvements to the web application at the heart of <a title='TimeZone Country Places Iframe Tutorial' href='#tcpit'>TimeZone Country Places Iframe Tutorial<\/a> as shown below.  It ended up, yesterday, in its completed framework &#8230; in other words, we no longer need to add or subtract any hierarchies, to the architecture &#8230; we ended up with (what we hinted at, then) &#8230;<\/p>\n<ol>\n<li>a &#8220;parent&#8221; web application of &#8220;when&#8221; content &#8230; supervising &#8230;<\/li>\n<li>an HTML table row cell&#8217;s &#8220;child&#8221; HTML iframe layer combining &#8220;when&#8221; and &#8220;where&#8221; content &#8230; supervising &#8230;<\/li>\n<li><a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.'>Google Charts<\/a> <a target=_blank title='Google Chart Map Chart' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=4832'>Map Chart<\/a> HTML &#8220;grandchildren&#8221; iframe &#8220;where&#8221; content<\/li>\n<\/ol>\n<p> &#8230; where the &#8220;grandchild&#8221; Map Chart above sees the &#8220;grandparent&#8221; as <i>top.document<\/i> and the &#8220;parent&#8221; HTML table row cell&#8217;s &#8220;child&#8221; HTML iframe layer as <i>parent.document<\/i> so that with our Map Chart new functionality code &#8230;<\/p>\n<p><code><br \/>\n&lt;?php echo \"\\n var topdocumentURL='\" . $_SERVER['HTTP_REFERER'] . \"'; \\n\"; ?&gt;<br \/>\n<b><\/b><br \/>\nfunction mapadvice(opl) {<br \/>\n           var tprop='';<br \/>\n           if (topdocumentURL.indexOf('rjmprogramming.com.au') != -1) {<br \/>\n           <b>if (top.document.getElementById('mapphpmailbox')) {<\/b><br \/>\n             if (parent.document.getElementById('aof_' + opl.replace(' ','_').replace(' ','_').replace(' ','_').replace(' ','_').replace(' ','_'))) {<br \/>\n              tprop=parent.document.getElementById('aof_' + opl.replace(' ','_').replace(' ','_').replace(' ','_').replace(' ','_').replace(' ','_')).title;<br \/>\n              if (top.document.getElementById('mapphpmailbox').value.indexOf(tprop) == -1) {<br \/>\n                if (top.document.getElementById('mapphpmailbox').value == '') {<br \/>\n                  top.document.getElementById('mapphpmailbox').value=tprop;<br \/>\n                } else {<br \/>\n                  top.document.getElementById('mapphpmailbox').value+=';' + tprop;<br \/>\n                }<br \/>\n                tprop=String.fromCharCode(10) + 'As you click multiple places see TimeZone Places supervisor dropdown options' + String.fromCharCode(10);<br \/>\n              }<br \/>\n             }<br \/>\n           }<br \/>\n           }<br \/>\n           return tprop;<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; we can add any Google Chart Map Chart select (onclick) event data points into the mix of the &#8220;parent&#8221; who organizes a dropdown presenting pairs of TimeZone Place From\/To set proposals, showing on the dropdown &#8230;<\/p>\n<ul>\n<li>From\/To names &#8230; and &#8230;.<\/li>\n<li>Distance between (as the crow flies) regarding &#8220;where&#8221; &#8230; and &#8230;<\/li>\n<li>Time Difference regarding &#8220;when&#8221; &#8230; that, when clicked &#8230;<\/li>\n<li>Access to a <a target=_blank title='Google Maps' href='http:\/\/maps.google.com'>Google Maps<\/a> directions map for that From\/To scenario &#8230; thanks<\/li>\n<\/ul>\n<p>The middle <strike>man<\/strike>person data item we add, and populate via Javascript DOM techniques here is a <i>title<\/i> property to the HTML <i>a<\/i> link TimeZone name parts of the &#8220;middle&#8221; HTML table row cell&#8217;s &#8220;child&#8221; HTML iframe layer.<\/p>\n<p>You&#8217;ll see from the &#8220;grandchild&#8221; code we show above, a &#8220;child&#8221; method of determining and, thus, filtering its actions according to its boolean return, where an HTML element with a <b>particular ID property (ie. mapphpmailbox)<\/b> exists, or not.  With regard to this &#8220;interprocess&#8221; (web application) messaging we also use these types of techniques when we presented <a target=_blank title='Emoji Overlay Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/emoji-overlay-primer-tutorial\/'>Emoji Overlay Primer Tutorial<\/a> (though there we also checked existences of &#8220;parent&#8221; Javascript <i>function<\/i>s as well).<\/p>\n<p>In a similar line of thinking regarding &#8220;interprocess&#8221; (web application) messaging we recommend the understanding of window.postMessage ideas we gave an introductory look at with <a target=_blank title='Legend for and from HTML Map Element Web Server Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/legend-for-and-from-html-map-element-web-server-tutorial\/'>Legend for and from HTML Map Element Web Server Tutorial<\/a>.<\/p>\n<p>And so we have our amended &#8220;parent&#8221; (and &#8220;child&#8221;) <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/tz_places.php\" title='Click picture'>live run<\/a> PHP code <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/tz_places.php--GETME\" title=\"tz_places.php\">tz_places.php<\/a> that changed in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/tz_places.php--GETME\" title=\"tz_places.php\">this way<\/a> for integration with Google Chart Map Charts with regard to TimeZone Place From\/To pairings, supervising Google Chart Map Chart &#8220;grandchild&#8221; iframe PHP <a href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php----------GETME\" title=\"map.php\" target=\"_blank\">map.php<\/a> changed as per <a href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php-----------GETME\" title=\"map.php\" target=\"_blank\">these changes<\/a>.<\/p>\n<p>Why not try it out for yourself?<\/p>\n<hr>\n<p id='tcpit'>Previous relevant <a target=_blank title='TimeZone Country Places Iframe Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/timezone-country-places-iframe-tutorial\/'>TimeZone Country Places Iframe Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/tz_places.php\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"TimeZone Country Places Iframe Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/tz_places_more.jpg\" title=\"TimeZone Country Places Iframe Tutorial\"  \/><\/a><p class=\"wp-caption-text\">TimeZone Country Places Iframe Tutorial<\/p><\/div>\n<p>Just because a concept is simple doesn&#8217;t mean it should somehow be disrespected.  For the most part, we often wonder why complicated things that supercede simple things that worked well (and were well understood) become obsolete.  If we were to be a little less naive perhaps we&#8217;d understand, but that&#8217;s business.  What we most respect here, are simple ideas, and ones that ask little, and give a lot, and ones that are renewable or leave a small footprint on the world &#8230; EOR &#8230; end of rave.<\/p>\n<p>Today&#8217;s &#8220;simple concept&#8221; is the HTML <a target=_blank title='HTML iframe element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_iframe.asp'>iframe<\/a> element, which to us means &#8220;child&#8221; in &#8220;parent\/child&#8221; or &#8220;client&#8221; in &#8220;server\/client&#8221; for web applications.  A &#8220;child&#8221; talks to their &#8220;parent&#8221;, and vice vera.  And a &#8220;child&#8221; can influence their &#8220;parent&#8221; &#8230; you bet!  That&#8217;s a (metaphor for a) web application &#8220;parent&#8221; web page, and its relationship to an HTML iframe element.  We find it the easiest way to understand (and practically arrange) the modularisation of web application functionality, where all that functionality can even be contained within the one piece of code, but just called differently, with a feel of <a target=_blank title='Recursion information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Recursion_(computer_science)'>recursion<\/a>.<\/p>\n<p>With our <a title='TimeZone Country Places Primer Tutorial' href='#tcppt'>TimeZone Country Places Primer Tutorial<\/a> as shown below, we&#8217;d actually already started on HTML iframe work, because the <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.'>Google Charts<\/a> <a target=_blank title='Google Chart Map Chart' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=4832'>Map Chart<\/a> functionality is already (contained) in an HTML iframe element.  But we&#8217;re talking, today, about another level of HTML iframe use, by allowing for an HTML table row&#8217;s worth of TimeZone\/MapChart cells (up to 10).   Why?  We&#8217;ll let you know more tomorrow, but the obvious reason for today, is that you see information sidled up next to each other horizontally &#8230; simple and effective way we humans work &#8230; we naturally compare and contrast and observe data, ideally all within eyesight of each other.<\/p>\n<p>Which leaves us with our amended <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/tz_places.php\" title='Click picture'>live run<\/a> PHP code <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/tz_places.php-GETME\" title=\"tz_places.php\">tz_places.php<\/a> that changed in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/tz_places.php-GETME\" title=\"tz_places.php\">this way<\/a> for your perusal.  Perhaps, today, you can visualize this web application&#8217;s practical use and can imagine what we are tempted to do next?<\/p>\n<hr>\n<p id='tcppt'>Previous relevant <a target=_blank title='TimeZone Country Places Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/timezone-country-places-primer-tutorial\/'>TimeZone Country Places Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/tz_places.php\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"TimeZone Country Places Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/tz_places.jpg\" title=\"TimeZone Country Places Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">TimeZone Country Places Primer Tutorial<\/p><\/div>\n<p>We&#8217;ve elaborated on the PHP TimeZone functionalities today to write another web application where &#8220;when&#8221; meets &#8220;where&#8221; via TimeZones.<\/p>\n<p>Into the mix of the logic here, we need to venture into the world of two letter ISO Country Codes, and we work this with help from <a target=_blank title='http:\/\/php.net\/manual\/en\/datetimezone.getlocation.php' href='http:\/\/php.net\/manual\/en\/datetimezone.getlocation.php'>http:\/\/php.net\/manual\/en\/datetimezone.getlocation.php<\/a> and <a target=_blank title='http:\/\/stackoverflow.com\/questions\/17842003\/php-intl-country-code-2-chars-to-country-name' href='http:\/\/stackoverflow.com\/questions\/17842003\/php-intl-country-code-2-chars-to-country-name'>http:\/\/stackoverflow.com\/questions\/17842003\/php-intl-country-code-2-chars-to-country-name<\/a> and <a target=_blank title=http:\/\/php.net\/manual\/en\/function.timezone-identifiers-list.php href=http:\/\/php.net\/manual\/en\/function.timezone-identifiers-list.php>http:\/\/php.net\/manual\/en\/function.timezone-identifiers-list.php<\/a> and <a target=_blank title=http:\/\/www.timezoneconverter.com\/ href=http:\/\/www.timezoneconverter.com\/>http:\/\/www.timezoneconverter.com\/<\/a> to &#8220;hardcode&#8221; our HTML select &#8220;dropdown&#8221; elements we create in the process, and offer TimeZone information HTML select &#8220;dropdown&#8221; elements as well.<\/p>\n<p>Also in the mix, as is so often the case for us here, when &#8220;where&#8221; is part of the &#8220;equation&#8221;, we use that wonderful <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.'>Google Charts<\/a> <a target=_blank title='Google Chart Map Chart' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=4832'>Map Chart<\/a> functionality, to help us out.<\/p>\n<p>And so we have written our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/tz_places.php\" title='Click picture'>live run<\/a> of the PHP code <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/tz_places.php_GETME\" title=\"tz_places.php\">tz_places.php<\/a> for your perusal.<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d26907' onclick='var dv=document.getElementById(\"d26907\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/timezone\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d26907' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d26931' onclick='var dv=document.getElementById(\"d26931\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/iframe\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d26931' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d26945' onclick='var dv=document.getElementById(\"d26945\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/integration\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d26945' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Yesterday we set up the framework for our software integration improvements to the web application at the heart of TimeZone Country Places Iframe Tutorial as shown below. It ended up, yesterday, in its completed framework &#8230; in other words, we &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/timezone-country-places-integration-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,37],"tags":[2081,481,518,519,527,587,614,626,745,1616,932,997,1034,1279,1693,1319],"class_list":["post-26945","post","type-post","status-publish","format-standard","hentry","category-elearning","category-tutorials","tag-country","tag-geographicals","tag-google-chart","tag-google-charts","tag-google-maps","tag-iframe","tag-integration","tag-ios","tag-map","tag-modularization","tag-php","tag-programming","tag-recursion","tag-time","tag-timezone","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/26945"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=26945"}],"version-history":[{"count":9,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/26945\/revisions"}],"predecessor-version":[{"id":26960,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/26945\/revisions\/26960"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=26945"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=26945"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=26945"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}