{"id":43649,"date":"2019-02-17T03:01:42","date_gmt":"2019-02-16T17:01:42","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=43649"},"modified":"2020-02-29T12:13:40","modified_gmt":"2020-02-29T02:13:40","slug":"javascript-and-php-base64-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-and-php-base64-primer-tutorial\/","title":{"rendered":"Javascript and PHP Base64 Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/btoa_atob_base64.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Javascript and PHP Base64 Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/btoa_atob_base64.jpg\" title=\"Javascript and PHP Base64 Primer Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Javascript and PHP Base64 Primer Tutorial<\/p><\/div>\n<p>We&#8217;ve long been interested in all of the PHP functions&#8230;<\/p>\n<ul>\n<li><a target=_blank title='PHP urldecode() method information' href='http:\/\/php.net\/manual\/en\/function.urldecode.php'>urldecode<\/a><\/li>\n<li><a target=_blank title='PHP urlencode() method information' href='http:\/\/php.net\/manual\/en\/function.urldecode.php'>urlencode<\/a> &#8230; and sometimes, especially if <a target=_blank title='Data URI information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Data_URI_scheme'>data URI<\/a> data is involved &#8230;<\/li>\n<li><a target=_blank title='PHP base64_decode() method information' href='http:\/\/php.net\/manual\/en\/function.base64-decode.php'>base64_decode<\/a><\/li>\n<li><a target=_blank title='PHP base64_encode() method information' href='http:\/\/php.net\/manual\/en\/function.base64-encode.php'>base64_encode<\/a><\/li>\n<\/ul>\n<p> &#8230; to facilitate the transfer of sizeable amounts of data within PHP or from HTML to PHP via a <a target=_blank href='http:\/\/www.w3schools.com\/html\/html_forms.asp' title='HTML form element information from w3schools'>form<\/a> (sometimes method=POST) element.<\/p>\n<p>If there is no form involved and\/or if there is a small amount of data (in a form method=GET) you could get by just with HTML to HTML and using Javascript &#8230;<\/p>\n<ul>\n<li><a target=_blank title='Javascript decodeURIComponent() method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/jsref_decodeuricomponent.asp'>decodeURIComponent<\/a><\/li>\n<li><a target=_blank title='Javascript encodeURIComponent() method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/jsref_encodeuricomponent.asp'>encodeURIComponent<\/a><\/li>\n<\/ul>\n<p> &#8230; but just recently we had an occasion (and then another) to start getting interested in Javascript <a target=_blank title='Base64 information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Base64'>Base64<\/a> conversion usages, using &#8230;<\/p>\n<ul>\n<li><a target=_blank title='Javascript btoa information from w3schools' href='https:\/\/www.w3schools.com\/jsref\/met_win_btoa.asp'>btoa<\/a><\/li>\n<li><a target=_blank title='Javascript atob information from w3schools' href='https:\/\/www.w3schools.com\/jsref\/met_win_atob.asp'>atob<\/a><\/li>\n<\/ul>\n<p> &#8230; when we presented &#8230;<\/p>\n<ul>\n<li><a target=_blank title='Venn Diagrams Onclick Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/venn-diagrams-onclick-tutorial\/'>Venn Diagrams Onclick Tutorial<\/a> (and before that creating Flowcharts)<\/li>\n<li><a target=_blank title='HTML Square Horizontal Rule Plot Polynomial Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html-square-horizontal-rule-plot-polynomial-tutorial\/'>HTML Square Horizontal Rule Plot Polynomial Tutorial<\/a><\/li>\n<\/ul>\n<p> &#8230; and if memory serves me correctly, we first started using btoa and atob to help with &#8230;<\/p>\n<ul>\n<li>creating a background image for an HTML element via a <a title='Animated GIF via PHP Writing PHP Data URI Tutorial' href='#agifphpwphpdurit'>Animated GIF via PHP Writing PHP Data URI Tutorial<\/a> animated GIF creator &#8220;PHP Writes PHP&#8221; web application that now has the option for <a target=_blank title='Data URI information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Data_URI_scheme'>data URI<\/a> (and think perhaps the reason to &#8220;go data URI&#8221; is that data URIs are great in emails where if an email attachment is downloaded a data URI (as distinct from an absolute or relative URL) is self contained and transportable) &#8230; but recently we&#8217;ve started looking at btoa and atob even more because &#8230;<\/li>\n<li>to send base64 (converted ascii or graphic data) in an HTML form to a PHP destination avoids the need that we seem to often face (but please research <a target=_blank title='HTML form enctype property information from w3schools' href='https:\/\/www.w3schools.com\/tags\/att_form_enctype.asp'>enctype<\/a> for other thoughts here) where <b>we need to<\/b> go (in PHP, something like) &#8230;<br \/>\n<code><br \/>\n $phpvar = <b>str_replace('+', ' ', <\/b>urldecode($_POST['fieldposted'])<b>)<\/b>;<br \/>\n<\/code><br \/>\n &#8230; a really kludgy and annoying thing for us because what if that $_POST[&#8216;fieldposted&#8217;] has legitimate text like &#8230;<\/p>\n<blockquote><p>\n 1 + 1 = 2<br \/>\n &#8230; not &#8230;<br \/>\n 1 + 1 = 11\n<\/p><\/blockquote>\n<p>  &#8230; to use syntax above is wrong &#8230; and so in today&#8217;s proof of concept (<a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/btoa_atob_base64.php_GETME\" title=\"btoa_atob_base64.php\">btoa_atob_base64.php<\/a>&#8216;s) <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/btoa_atob_base64.php\" title=\"Click picture\">live run<\/a> we <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/btoa_atob_base64.jpg\">deliberately entered<\/a> &#8230;<br \/>\n<code><br \/>\nThe rain +<br \/>\nin Spain +<br \/>\nfalls mainly +<br \/>\non the plain.<br \/>\n<\/code><br \/>\n &#8230; to show you that, indeed, the use of Javascript btoa at the form&#8217;s <a target=_blank title='Event onsubmit information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ev_onsubmit.asp'>onsubmit<\/a> (form) event can help accurately be interpreted by any destination PHP (<i>here&#8217;s looking at you, kid<\/i>) via &#8230;<\/p>\n<p>&lt;?php<br \/>\n\/\/ &#8230;<br \/>\n<code><br \/>\n  echo \"&lt;textarea id=tb64 cols=100 rows=10>\" . base64_decode(urldecode($_POST['base64'])) . \"&lt;\/textarea&gt;&lt;br&gt;\";<br \/>\n<\/code><br \/>\n\/\/ &#8230;<br \/>\n?&gt;<br \/>\n &#8230; type of PHP code, and never interpret the data incorrectly<\/li>\n<\/ul>\n<p>Clearly, if you are not asleep, you&#8217;re interested, and we hope this helps, or clarifies, a little!<\/p>\n<p><b><i>Stop Press<\/i><\/b><\/p>\n<p><a target=_blank title='WordPress Blog Email Post Plus Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-blog-email-post-plus-tutorial\/'>WordPress Blog Email Post Plus Tutorial<\/a> on 29th February 2020 was a leap <font size=1>(chortle, chortle)<\/font> into the realization that the use of <a target=_blank title='Javascript btoa information from w3schools' href='https:\/\/www.w3schools.com\/jsref\/met_win_btoa.asp'>btoa<\/a> (&#8220;to base64&#8221; &#8230; go figure why <a target=_blank title='Javascript atob information from w3schools' href='https:\/\/www.w3schools.com\/jsref\/met_win_atob.asp'>atob<\/a> is &#8220;from base64&#8221;) above is dodgy for many emoji character &#8220;range&#8221; data, so you might want to check that out for yourself!<\/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='#d43649' onclick='var dv=document.getElementById(\"d43649\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/base64\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d43649' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We&#8217;ve long been interested in all of the PHP functions&#8230; urldecode urlencode &#8230; and sometimes, especially if data URI data is involved &#8230; base64_decode base64_encode &#8230; to facilitate the transfer of sizeable amounts of data within PHP or from HTML &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-and-php-base64-primer-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,14,37],"tags":[2830,1653,2829,1654,1606,1605,2832,452,1533,576,652,1830,1712,932,970,997,1200,1319,1611,2831],"class_list":["post-43649","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-atob","tag-base64","tag-btoa","tag-data-uri","tag-decodeuricomponent","tag-encodeuricomponent","tag-enctype","tag-form","tag-get","tag-html","tag-javascript","tag-method","tag-onsubmit","tag-php","tag-post","tag-programming","tag-stop-press","tag-tutorial","tag-urldecode","tag-urlencode"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/43649"}],"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=43649"}],"version-history":[{"count":15,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/43649\/revisions"}],"predecessor-version":[{"id":48178,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/43649\/revisions\/48178"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=43649"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=43649"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=43649"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}