{"id":18889,"date":"2015-12-16T02:01:23","date_gmt":"2015-12-15T16:01:23","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=18889"},"modified":"2015-12-16T05:11:59","modified_gmt":"2015-12-15T19:11:59","slug":"the-three-p-three-modes-calling-card-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/the-three-p-three-modes-calling-card-tutorial\/","title":{"rendered":"The Three P Three Modes Calling Card Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/interactive_becomes_web.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"The Three P Three Modes Calling Card Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/profile_callingcard.jpg\" title=\"The Three P Three Modes Calling Card Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">The Three P Three Modes Calling Card Tutorial<\/p><\/div>\n<p>Today, we extend the Email functionality of yesterday, with a &#8220;Calling Card&#8221; functionality idea.<\/p>\n<p>Yesterday&#8217;s work personalized the application in the sense that you could &#8220;share&#8221; your profile with others, but each time you had to either dig up an old email, or run through the profile questions again, but today, with our &#8220;Calling Card&#8221; idea we offer you the chance to snapshot the Profile Report into an image you can (download and) keep.<\/p>\n<p>In order to do this, at the client end, we have the HTML5 <a target=_blank title='HTML Canvas element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ref_canvas.asp'><i>canvas<\/i><\/a> element, and its brilliant <a target=_blank title='HTML Canvas element information from w3schools mentions toDataURL method' href='http:\/\/www.w3schools.com\/tags\/ref_canvas.asp'><i>toDataURL<\/i><\/a> method to thank &#8230; so &#8230; ta muchly, CatDurl.<\/p>\n<p>We have then, today, a new &#8220;Calling Card&#8221; HTML <i>a<\/i> link, which looks a bit like a button, and when pressed shows you the created Calling Card (image) below.  Right click options on this image allow you to &#8230;<\/p>\n<ul>\n<li>copy that image into a buffer<\/li>\n<li>save the image to a hard disk<\/li>\n<li>copy the image ready to paste it into the body section of an Email, as per yesterday&#8217;s <a target=_blank title='The Three P Three Modes Sharing Tutorial' href='#ttptmst'>The Three P Three Modes Sharing Tutorial<\/a> as shown below &#8230; bit like an Email signature<\/li>\n<\/ul>\n<p>Again, please take a look at the PHP source code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/interactive_becomes_web.php--GETME\" title=\"interactive_becomes_web.php\">interactive_becomes_web.php<\/a> changed from yesterday in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/interactive_becomes_web.php--GETME\" title=\"interactive_becomes_web.php\">this way<\/a> and for that first Surfing the Web mode we can give you a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/interactive_becomes_web.php\" title=\"Click picture\">live run<\/a> link to peruse, as well.  Again, we really hope this helps you with some ideas you&#8217;ve been working on.<\/p>\n<hr>\n<p id='ttptmst'>Previous relevant <a target=_blank title='The Three P Three Modes Sharing Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/the-three-p-three-modes-sharing-tutorial\/'>The Three P Three Modes Sharing 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\/interactive_becomes_web.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"The Three P Three Modes Sharing Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/profile_email.jpg\" title=\"The Three P Three Modes Sharing Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">The Three P Three Modes Sharing Tutorial<\/p><\/div>\n<p>Do you remember yesterday&#8217;s (<a target=_blank title='The Three P Three Modes Primer Tutorial' href='#ttptmpt'>The Three P Three Modes Primer Tutorial<\/a>) Rudimentary Profile Report featuring The Three Ps and The Three (PHP) Modes of Use?  Well, we thought we could improve that application by offering the user a sharing functionality idea, and that is, as so often at this blog, the chance for the user to send an email snapshot of their Profile Report.<\/p>\n<p>Please take a look at the PHP source code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/interactive_becomes_web.php-GETME\" title=\"interactive_becomes_web.php\">interactive_becomes_web.php<\/a> changed from yesterday in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/interactive_becomes_web.php-GETME\" title=\"interactive_becomes_web.php\">this way<\/a> and for that first Surfing the Web mode we can give you a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/interactive_becomes_web.php\" title=\"Click picture\">live run<\/a> link to peruse, as well.  We hope this helps you with some ideas.<\/p>\n<p>We send the user off to their default email client by using HTML <i>a<\/i> tags with <i>href<\/i> properties starting with <a target=_blank title='Mailto information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tryit.asp?filename=tryhtml_link_mailto'><i>mailto:<\/i><\/a> to achieve this.<\/p>\n<p>If you examine the code you&#8217;ll see that a large number of calls are made to &#8230;<\/p>\n<ul>\n<li>PHP&#8217;s <a target=_blank title='PHP urlencode information' href='http:\/\/php.net\/manual\/en\/function.urlencode.php'>urlencode<\/a> and <a target=_blank title='PHP urldecode information' href='http:\/\/php.net\/manual\/en\/function.urldecode.php'>urldecode<\/a> methods<\/li>\n<li>Javascript&#8217;s <a target=_blank title='Javascript encodeURIComponent information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/jsref_encodeuricomponent.asp'>encodeURIComponent<\/a> method<\/li>\n<\/ul>\n<p> &#8230; to have it so that the link in the email is user genial.<\/p>\n<p>We add little bits of CSS styling to make the HTML <i>a<\/i> tags look a bit like buttons, as well, and we hope this gives you some ideas.<\/p>\n<hr>\n<p id='ttptmpt'>Previous relevant <a target=_blank title='The Three P Three Modes Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/the-three-p-three-modes-primer-tutorial\/'>The Three P Three Modes 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\/interactive_becomes_web.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"The Three P Three Modes Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/profile.jpg\" title=\"The Three P Three Modes Primer Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">The Three P Three Modes Primer Tutorial<\/p><\/div>\n<p>Today we show three PHP modes of use with a Rudimentary Profile Report application, showing our usual (modes of use (ideas of)) &#8230;<\/p>\n<ul>\n<li>Surfing the Web &#8211; with a URL typed into web browser address bar and interactively piecing together the (profile) report<\/li>\n<li>Command Line PHP &#8211; with an interactive entry session on the (Bash) Linux command line on a MacBook Pro Terminal application session, and then firing off the report to a web browser (profile) report<\/li>\n<li>Curl use of PHP &#8211; with a command on the (Bash) Linux command line on a MacBook Pro Terminal application session, and then firing off an interactive web page piecing together the (profile) report to a web browser report<\/li>\n<\/ul>\n<p>And today we detect The Three P&#8217;s sleigh riding again, with &#8230;<\/p>\n<ul>\n<li>PHP as the primary web server language used, using its <a target=_blank title='PHP exec() method information' href='http:\/\/php.net\/manual\/en\/function.exec.php'>exec<\/a> method to call &#8230;<\/li>\n<li>Python helps the Command Line PHP and Curl use of PHP modes fire up the web page in a web browser from the command line via the <a target=_blank title='Advice for this came from this useful link ... thanks' href='http:\/\/stackoverflow.com\/questions\/3124556\/clean-way-to-launch-the-web-browser-from-shell-script'>-mwebbrowser<\/a> (Python command line usage) switch<\/li>\n<li>Perl is used, a bit like the Linux <i>sed<\/i> command, to help the Command Line PHP and Curl use of PHP modes populate the Javascript DOM innerHTML property of the following web page&#8217;s H1 heading, to give context to whose profile is involved<\/li>\n<\/ul>\n<p>We tried an idea for the first time today.  Paring it down, the idea is the use of a PHP function &#8230;<\/p>\n<p><code><br \/>\nfunction get_line($inidea, $j) {<br \/>\n  $suffix=\"\";<br \/>\n  if ($j == 1) $suffix=\"&lt;script&gt; document.getElementById('myh1').innerHTML='Profile for ' + document.getElementById('t0').innerHTML + ' ' + document.getElementById('t1').innerHTML; &lt;\/script&gt;\";<br \/>\n  return \"\\n\" . '&lt;script&gt; document.write((\"&lt;td&gt;' . $inidea . '&lt;\/td&gt;&lt;td id=t' . $j . '&gt;\" + prompt(\"What is your ' . $inidea . '?  You can Cancel or OK nothing.\",\"\") + \"&lt;\/td&gt;\").replace(\"&lt;td&gt;' . $inidea . '&lt;\/td&gt;&lt;td id=t' . $j . '&gt;&lt;\/td&gt;\",\"&lt;td&gt;&lt;\/td&gt;&lt;td id=t' . $j . '&gt;&lt;\/td&gt;\").replace(\"&lt;td&gt;' . $inidea . '&lt;\/td&gt;&lt;td id=t' . $j . '&gt;null&lt;\/td&gt;\",\"&lt;td&gt;&lt;\/td&gt;&lt;td id=t' . $j . '&gt;&lt;\/td&gt;\")); &lt;\/script&gt;' . $suffix . \"\\n\";<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; that embeds within a &lt;tr&gt;&lt;\/tr&gt; HTML table row, cell data information within those rows &#8220;on the fly&#8221;, by interactively asking for Profile (Report) information, at the client, via the Javascript <a target=_blank title='Javascript prompt() method information' href='http:\/\/www.w3schools.com\/jsref\/met_win_prompt.asp'>prompt()<\/a> method, encased within the Javascript DOM <a target=_blank title='Javascript DOM document.write() method information' href='http:\/\/www.w3schools.com\/jsref\/met_doc_write.asp'>document.write()<\/a> method.<\/p>\n<p>So please take a look at the PHP source code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/interactive_becomes_web.php_GETME\" title=\"interactive_becomes_web.php\">interactive_becomes_web.php<\/a> and for that first Surfing the Web mode we can give you a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/interactive_becomes_web.php\" title=\"Click picture\">live run<\/a> link to peruse, as well.  We hope this helps you with some ideas.<\/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='#d18850' onclick='var dv=document.getElementById(\"d18850\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/php\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d18850' 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='#d18876' onclick='var dv=document.getElementById(\"d18876\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/email\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d18876' 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='#d18889' onclick='var dv=document.getElementById(\"d18889\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/canvas\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d18889' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Today, we extend the Email functionality of yesterday, with a &#8220;Calling Card&#8221; functionality idea. Yesterday&#8217;s work personalized the application in the sense that you could &#8220;share&#8221; your profile with others, but each time you had to either dig up an &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/the-three-p-three-modes-calling-card-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":[184,352,380,405,578,707,916,932,997,1761,1012,1115,1319],"class_list":["post-18889","post","type-post","status-publish","format-standard","hentry","category-elearning","category-tutorials","tag-canvas","tag-document-write","tag-email","tag-exec","tag-html5","tag-linux","tag-perl","tag-php","tag-programming","tag-prompt","tag-python","tag-sed","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/18889"}],"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=18889"}],"version-history":[{"count":3,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/18889\/revisions"}],"predecessor-version":[{"id":18899,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/18889\/revisions\/18899"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=18889"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=18889"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=18889"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}