{"id":16686,"date":"2015-08-19T05:01:07","date_gmt":"2015-08-18T19:01:07","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=16686"},"modified":"2024-11-07T11:03:11","modified_gmt":"2024-11-07T01:03:11","slug":"php-content-type-iframe-overlay-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/php-content-type-iframe-overlay-tutorial\/","title":{"rendered":"PHP Content Type Iframe Overlay Tutorial"},"content":{"rendered":"
\"PHP<\/a>

PHP Content Type Iframe Overlay Tutorial<\/p><\/div>\n

Today we drill deeper into the scenario 3 of yesterday’s PHP Content Type Primer Tutorial<\/a> as shown below.<\/p>\n

In the process we discover another concept for the “overlay”<\/a> ideas we present at this blog. It is not that we haven’t done this before, in a sense, but that we haven’t tagged it as an idea in the category (or “tag” (chortle, chortle)) of “overlay”, but we need to talk about it … you first … ooooookay … an HTML iframe<\/a> element that has its src= parameter be dynamically changed is another way to think of a concept of “overlay” … okay, it’s out there … do with it what you will! Call up the president on the red phone, or pick the yellow phone and speak to your Avon<\/a> representative.<\/p>\n

But, seriously, this is serious … can’t you tell?!<\/p>\n

What we want to point out about that src= value to dynamically change is that it can be like yesterday’s call with a PHP content type (or mime type) that is not your usual “text\/html”. Is THIS of more interest now?!<\/p>\n

But, seriously, this is serious … you can tell … we changed the font size<\/font> … now THAT<\/font>‘s serious<\/font>.<\/p>\n

The upshot is, that this may mean you can synchronize media perhaps (and perhaps you were a reader when we did tutorials like PHP\/Javascript Media Synchronize Cross Browser Tutorial<\/a> (which attempted synchronization of media) earlier at this blog), or what we do today with our tutorial picture<\/a>, and allow for the piecing together of a “home cobbled” slideshow, a common overlay “suspect”. We allow for the “Add” option rather than “Overlay” as well, to open up a new HTML iframe on the fly, so to speak.<\/p>\n

If you ever use the wonderful Gifpal<\/a> to create your animated GIFs, we hope to have achieved something just a tad similar, in that, once you enter in a new URL, it is added into the slideshow dynamically, probably not as cutely as Gifpal, but there’s an element of cuteness to seeing a slideshow presentation dynamically change … or it could be that the writer is easily amused!<\/p>\n

So have a go at a live run<\/a> if you like, or take a gecko at the PHP source code you could call php_content_type.php<\/a> or take a squizz at the changes made to yesterday’s efforts at php_content_type.php<\/a><\/p>\n

\n

Previous relevant PHP Content Type Primer Tutorial<\/a> is shown below.<\/p>\n

\"PHP<\/a>

PHP Content Type Primer Tutorial<\/p><\/div>\n

Today we want to start a discussion on a big topic in web programming, the webpage content type (or mime type<\/a>).<\/p>\n

The normal association of webpages is with the …<\/p>\n


\ntext\/html
\n<\/code><\/p>\n

… mime type. Server side languages such as PHP and ASP.Net, for the most part, create webpages in HTML format, but they don’t have to. Supposing you have some PDF data then you can use PHP’s header method to use (the snippet from today’s PHP php_content_type.php<\/a>) …<\/p>\n


\n<?php
\n\/\/ ...
\n\/\/ no echo statements anywhere up here
\n\/\/ ...
\n header<\/a>('Content-Type: ' . $ct);
\n echo file_get_contents<\/a>(urldecode<\/a>($_POST['selname']));
\n?>
\n<\/code><\/p>\n

… to show a webpage using a mime type defined by the PHP variable $ct which is “application\/pdf” in the URL “http:\/\/localhost:888\/logo.pdf” of our example tutorial picture<\/a>.<\/p>\n

We show this distinction today by writing a PHP web application that in the first instance is a web page consisting of an HTML form as per …<\/p>\n


\n<form target='_blank' action='.\/php_content_type.php' method='POST'>
\n...
\n<\/code><\/p>\n

… the “target=’_blank'” of which is ensuring a new webpage will be opened and by saying “method=’POST'”, on submission, would POST (into $_POST[‘selname’]) to itself (in a new webpage) the HTML input type=url as per …<\/p>\n


\nUrl: <input type='url'<\/a> name='selname' id='selname' style='width:70%;' value='http:\/\/www.rjmprogramming.com.au\/MyBusinessUnidad\/Welcome_files\/logo.jpg'><\/input>
\n...
\n<\/code><\/p>\n

… the user defined URL of interest.<\/p>\n

In the second instance, or the callback<\/a> scenario, the php_content_type.php<\/a> code analyzes $_POST[‘selname’] to derive a file extension (if none, would assume a mime type of text\/html). That file extension we map against the very useful sitepoint<\/a> resource we thank very much to arrive at a suitable mime type to be suitable for that PHP $ct variable we talked about earlier. This gives us the scenario used for the middle of three buttons …<\/p>\n

    \n
  1. Navigate via Web Browser … up at the web browser address bar you’ll see the Url of your data source<\/li>\n
  2. Show via PHP Content Type to New Webpage … up at the web browser address bar you’ll see the Url of php_content_type.php (which got POSTed to … so no $_SERVER[‘QUERY_STRING’] even)<\/li>\n
  3. Show PHP Content Type Below … ie. to an HTML iframe<\/a>, the scenario of today’s tutorial picture<\/a><\/li>\n<\/ol>\n

    With scenarios 2 and 3 above there is no hope that View->Page Source nor This Frame->View Page Source will result in a happy readable result, where scenario 1 will sometimes allow for this.<\/p>\n

    With this knowledge in mind, or by trying a live run<\/a>, maybe now, some of the mystifying address bar URLs you encounter surfing the net may be more explainable to you … hope so. Understanding of this topic can be a “light bulb” moment for many people, and a little bit of patience can reveal many possibilities with web applications, should you delve deeper yourself.<\/p>\n

    If this was interesting you may be interested in this<\/a> too.<\/p>\n